Yehowshua/ZIm
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Style channels panel items

Browse source
This commit is contained in:
Nate Butler 2023-08-14 15:50:37 -04:00
parent 4a5b2fa5dc
commit 8531cdaff7
2 changed files with 90 additions and 161 deletions
Download patch file Download diff file Expand all files Collapse all files

4
styles/src/component/text_button.ts
View file

@ -30,7 +30,7 @@ export function text_button({
layer, layer,
margin, margin,
text_properties, text_properties,
}: TextButtonOptions) { }: TextButtonOptions = {}) {
const theme = useTheme() const theme = useTheme()
if (!color) color = "base" if (!color) color = "base"
@ -81,7 +81,7 @@ export function text_button({
export function toggleable_text_button( export function toggleable_text_button(
theme: Theme, theme: Theme,
{ variant, color, active_color, margin }: ToggleableTextButtonOptions { variant, color, active_color, margin }: ToggleableTextButtonOptions = {}
) { ) {
if (!color) color = "base" if (!color) color = "base"

247
styles/src/style_tree/collab_panel.ts
View file

@ -8,12 +8,16 @@ import {
import { interactive, toggleable } from "../element" import { interactive, toggleable } from "../element"
import { useTheme } from "../theme" import { useTheme } from "../theme"
import collab_modals from "./collab_modals" import collab_modals from "./collab_modals"
import { text_button } from "../component/text_button"
import { toggleable_icon_button } from "../component/icon_button"
export default function contacts_panel(): any { export default function contacts_panel(): any {
const theme = useTheme() const theme = useTheme()
const name_margin = 8 const NAME_MARGIN = 6 as const
const side_padding = 12 const SPACING = 12 as const
const INDENT_SIZE = 8 as const
const ITEM_HEIGHT = 28 as const
const layer = theme.middle const layer = theme.middle
@ -24,6 +28,7 @@ export default function contacts_panel(): any {
button_width: 16, button_width: 16,
corner_radius: 8, corner_radius: 8,
} }
const project_row = { const project_row = {
guest_avatar_spacing: 4, guest_avatar_spacing: 4,
height: 24, height: 24,
@ -32,186 +37,111 @@ export default function contacts_panel(): any {
width: 14, width: 14,
}, },
name: { name: {
...text(layer, "mono", { size: "sm" }), ...text(layer, "ui_sans", { size: "sm" }),
margin: { margin: {
left: name_margin, left: NAME_MARGIN,
right: 6, right: 4,
}, },
}, },
guests: { guests: {
margin: { margin: {
left: name_margin, left: NAME_MARGIN,
right: name_margin, right: NAME_MARGIN,
}, },
}, },
padding: { padding: {
left: side_padding, left: SPACING,
right: side_padding, right: SPACING,
}, },
} }
const headerButton = toggleable({ const icon_style = {
state: { color: foreground(layer, "variant"),
inactive: interactive({ width: 14,
base: { }
corner_radius: 6,
padding: { const header_icon_button = toggleable_icon_button(theme, {
top: 2, layer: theme.middle,
bottom: 2, variant: "ghost",
left: 4,
right: 4,
},
icon_width: 14,
icon_height: 14,
button_width: 20,
button_height: 16,
color: foreground(layer, "on"),
},
state: {
default: {
},
hovered: {
background: background(layer, "base", "hovered"),
},
clicked: {
background: background(layer, "base", "pressed"),
},
},
}),
active: interactive({
base: {
corner_radius: 6,
padding: {
top: 2,
bottom: 2,
left: 4,
right: 4,
},
icon_width: 14,
icon_height: 14,
button_width: 20,
button_height: 16,
color: foreground(layer, "on"),
},
state: {
default: {
background: background(layer, "base", "active"),
},
clicked: {
background: background(layer, "base", "active"),
},
},
}),
},
}) })
const subheader_row = toggleable({
return { base: interactive({
...collab_modals(),
log_in_button: interactive({
base: { base: {
background: background(theme.middle), ...text(layer, "ui_sans", { size: "sm" }),
border: border(theme.middle, "active"),
corner_radius: 4,
margin: {
top: 16,
left: 16,
right: 16,
},
padding: { padding: {
top: 3, left: SPACING,
bottom: 3, right: SPACING,
left: 7,
right: 7,
}, },
...text(theme.middle, "sans", "default", { size: "sm" }),
}, },
state: { state: {
hovered: { hovered: {
...text(theme.middle, "sans", "default", { size: "sm" }), background: background(layer, "hovered"),
background: background(theme.middle, "hovered"),
border: border(theme.middle, "active"),
}, },
clicked: { clicked: {
...text(theme.middle, "sans", "default", { size: "sm" }), background: background(layer, "pressed"),
background: background(theme.middle, "pressed"),
border: border(theme.middle, "active"),
}, },
}, },
}), }),
state: {
active: {
default: {
...text(layer, "ui_sans", "active", { size: "sm" }),
background: background(layer, "active"),
},
clicked: {
background: background(layer, "pressed"),
},
},
},
})
const filter_input = {
background: background(layer, "on"),
corner_radius: 6,
text: text(layer, "ui_sans", "base"),
placeholder_text: text(layer, "ui_sans", "base", "disabled", {
size: "xs",
}),
selection: theme.players[0],
border: border(layer, "on"),
padding: {
bottom: 4,
left: 8,
right: 8,
top: 4,
},
margin: {
left: SPACING,
right: SPACING,
},
}
return {
...collab_modals(),
log_in_button: text_button(),
background: background(layer), background: background(layer),
padding: { padding: {
top: 12, top: SPACING,
},
user_query_editor: {
background: background(layer, "on"),
corner_radius: 6,
text: text(layer, "mono", "on"),
placeholder_text: text(layer, "mono", "on", "disabled", {
size: "xs",
}),
selection: theme.players[0],
border: border(layer, "on"),
padding: {
bottom: 4,
left: 8,
right: 8,
top: 4,
},
margin: {
left: side_padding,
right: side_padding,
},
},
channel_hash: {
color: foreground(layer, "on"),
width: 14,
}, },
user_query_editor: filter_input,
channel_hash: icon_style,
user_query_editor_height: 33, user_query_editor_height: 33,
add_contact_button: headerButton, add_contact_button: header_icon_button,
add_channel_button: headerButton, add_channel_button: header_icon_button,
leave_call_button: headerButton, leave_call_button: header_icon_button,
row_height: 28, row_height: ITEM_HEIGHT,
channel_indent: 10, channel_indent: INDENT_SIZE,
section_icon_size: 8, section_icon_size: 8,
header_row: { header_row: {
...text(layer, "mono", { size: "sm", weight: "bold" }), ...text(layer, "ui_sans", { size: "sm", weight: "bold" }),
margin: { top: 14 }, margin: { top: SPACING },
padding: { padding: {
left: side_padding, left: SPACING,
right: side_padding, right: SPACING,
}, },
}, },
subheader_row: toggleable({ subheader_row,
base: interactive({
base: {
...text(layer, "mono", { size: "sm" }),
padding: {
left: side_padding,
right: side_padding,
},
},
state: {
hovered: {
background: background(layer, "hovered"),
},
clicked: {
background: background(layer, "pressed"),
},
},
}),
state: {
active: {
default: {
...text(layer, "mono", "active", { size: "sm" }),
background: background(layer, "active"),
},
clicked: {
background: background(layer, "pressed"),
},
},
},
}),
leave_call: interactive({ leave_call: interactive({
base: { base: {
background: background(layer), background: background(layer),
@ -240,8 +170,8 @@ export default function contacts_panel(): any {
base: interactive({ base: interactive({
base: { base: {
padding: { padding: {
left: side_padding, left: SPACING,
right: side_padding, right: SPACING,
}, },
}, },
state: { state: {
@ -258,7 +188,7 @@ export default function contacts_panel(): any {
}, },
active: { active: {
default: { default: {
...text(layer, "mono", "active", { size: "sm" }), ...text(layer, "ui_sans", "active", { size: "sm" }),
background: background(layer, "active"), background: background(layer, "active"),
}, },
clicked: { clicked: {
@ -280,7 +210,7 @@ export default function contacts_panel(): any {
base: interactive({ base: interactive({
base: { base: {
...text(layer, "ui_sans", "variant", { size: "sm" }), ...text(layer, "ui_sans", "variant", { size: "sm" }),
padding: side_padding padding: SPACING
}, },
state: { state: {
@ -323,12 +253,12 @@ export default function contacts_panel(): any {
background: foreground(layer, "negative"), background: foreground(layer, "negative"),
}, },
contact_username: { contact_username: {
...text(layer, "mono", { size: "sm" }), ...text(layer, "ui_sans", { size: "sm" }),
margin: { margin: {
left: name_margin, left: NAME_MARGIN,
}, },
}, },
contact_button_spacing: name_margin, contact_button_spacing: NAME_MARGIN,
contact_button: interactive({ contact_button: interactive({
base: { ...contact_button }, base: { ...contact_button },
state: { state: {
@ -369,9 +299,8 @@ export default function contacts_panel(): any {
base: interactive({ base: interactive({
base: { base: {
...project_row, ...project_row,
// background: background(layer),
icon: { icon: {
margin: { left: name_margin }, margin: { left: NAME_MARGIN },
color: foreground(layer, "variant"), color: foreground(layer, "variant"),
width: 12, width: 12,
}, },
@ -395,7 +324,7 @@ export default function contacts_panel(): any {
face_overlap: 8, face_overlap: 8,
channel_editor: { channel_editor: {
padding: { padding: {
left: name_margin, left: NAME_MARGIN,
} }
} }
} }