Merge branch 'main' into multi-server-completions-tailwind
This commit is contained in:
Julia
@@ -1,5 +1,3 @@
|
||||
import contact_finder from "./contact_finder"
|
||||
import contacts_popover from "./contacts_popover"
|
||||
import command_palette from "./command_palette"
|
||||
import project_panel from "./project_panel"
|
||||
import search from "./search"
|
||||
@@ -14,7 +12,7 @@ import simple_message_notification from "./simple_message_notification"
|
||||
import project_shared_notification from "./project_shared_notification"
|
||||
import tooltip from "./tooltip"
|
||||
import terminal from "./terminal"
|
||||
import contact_list from "./contact_list"
|
||||
import collab_panel from "./collab_panel"
|
||||
import toolbar_dropdown_menu from "./toolbar_dropdown_menu"
|
||||
import incoming_call_notification from "./incoming_call_notification"
|
||||
import welcome from "./welcome"
|
||||
@@ -23,6 +21,7 @@ import assistant from "./assistant"
|
||||
import { titlebar } from "./titlebar"
|
||||
import editor from "./editor"
|
||||
import feedback from "./feedback"
|
||||
import component_test from "./component_test"
|
||||
import { useTheme } from "../common"
|
||||
|
||||
export default function app(): any {
|
||||
@@ -46,9 +45,7 @@ export default function app(): any {
|
||||
editor: editor(),
|
||||
project_diagnostics: project_diagnostics(),
|
||||
project_panel: project_panel(),
|
||||
contacts_popover: contacts_popover(),
|
||||
contact_finder: contact_finder(),
|
||||
contact_list: contact_list(),
|
||||
collab_panel: collab_panel(),
|
||||
toolbar_dropdown_menu: toolbar_dropdown_menu(),
|
||||
search: search(),
|
||||
shared_screen: shared_screen(),
|
||||
@@ -57,6 +54,7 @@ export default function app(): any {
|
||||
tooltip: tooltip(),
|
||||
terminal: terminal(),
|
||||
assistant: assistant(),
|
||||
feedback: feedback()
|
||||
feedback: feedback(),
|
||||
component_test: component_test(),
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { text, border, background, foreground, TextStyle } from "./components"
|
||||
import { Interactive, interactive } from "../element"
|
||||
import { Interactive, interactive, toggleable } from "../element"
|
||||
import { tab_bar_button } from "../component/tab_bar_button"
|
||||
import { StyleSets, useTheme } from "../theme"
|
||||
|
||||
@@ -8,50 +8,48 @@ type RoleCycleButton = TextStyle & {
|
||||
}
|
||||
// TODO: Replace these with zed types
|
||||
type RemainingTokens = TextStyle & {
|
||||
background: string,
|
||||
margin: { top: number, right: number },
|
||||
background: string
|
||||
margin: { top: number; right: number }
|
||||
padding: {
|
||||
right: number,
|
||||
left: number,
|
||||
top: number,
|
||||
bottom: number,
|
||||
},
|
||||
corner_radius: number,
|
||||
right: number
|
||||
left: number
|
||||
top: number
|
||||
bottom: number
|
||||
}
|
||||
corner_radius: number
|
||||
}
|
||||
|
||||
export default function assistant(): any {
|
||||
const theme = useTheme()
|
||||
|
||||
const interactive_role = (color: StyleSets): Interactive<RoleCycleButton> => {
|
||||
return (
|
||||
interactive({
|
||||
base: {
|
||||
const interactive_role = (
|
||||
color: StyleSets
|
||||
): Interactive<RoleCycleButton> => {
|
||||
return interactive({
|
||||
base: {
|
||||
...text(theme.highest, "sans", color, { size: "sm" }),
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
...text(theme.highest, "sans", color, { size: "sm" }),
|
||||
background: background(theme.highest, color, "hovered"),
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
...text(theme.highest, "sans", color, { size: "sm" }),
|
||||
background: background(theme.highest, color, "hovered"),
|
||||
},
|
||||
clicked: {
|
||||
...text(theme.highest, "sans", color, { size: "sm" }),
|
||||
background: background(theme.highest, color, "pressed"),
|
||||
}
|
||||
clicked: {
|
||||
...text(theme.highest, "sans", color, { size: "sm" }),
|
||||
background: background(theme.highest, color, "pressed"),
|
||||
},
|
||||
})
|
||||
)
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
const tokens_remaining = (color: StyleSets): RemainingTokens => {
|
||||
return (
|
||||
{
|
||||
...text(theme.highest, "mono", color, { size: "xs" }),
|
||||
background: background(theme.highest, "on", "default"),
|
||||
margin: { top: 12, right: 20 },
|
||||
padding: { right: 4, left: 4, top: 1, bottom: 1 },
|
||||
corner_radius: 6,
|
||||
}
|
||||
)
|
||||
return {
|
||||
...text(theme.highest, "mono", color, { size: "xs" }),
|
||||
background: background(theme.highest, "on", "default"),
|
||||
margin: { top: 12, right: 20 },
|
||||
padding: { right: 4, left: 4, top: 1, bottom: 1 },
|
||||
corner_radius: 6,
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
@@ -59,6 +57,85 @@ export default function assistant(): any {
|
||||
background: background(theme.highest),
|
||||
padding: { left: 12 },
|
||||
},
|
||||
inline: {
|
||||
background: background(theme.highest),
|
||||
margin: { top: 3, bottom: 3 },
|
||||
border: border(theme.lowest, "on", {
|
||||
top: true,
|
||||
bottom: true,
|
||||
overlay: true,
|
||||
}),
|
||||
editor: {
|
||||
text: text(theme.highest, "mono", "default", { size: "sm" }),
|
||||
placeholder_text: text(theme.highest, "sans", "on", "disabled"),
|
||||
selection: theme.players[0],
|
||||
},
|
||||
disabled_editor: {
|
||||
text: text(theme.highest, "mono", "disabled", { size: "sm" }),
|
||||
placeholder_text: text(theme.highest, "sans", "on", "disabled"),
|
||||
selection: {
|
||||
cursor: text(theme.highest, "mono", "disabled").color,
|
||||
selection: theme.players[0].selection,
|
||||
},
|
||||
},
|
||||
pending_edit_background: background(theme.highest, "positive"),
|
||||
include_conversation: toggleable({
|
||||
base: interactive({
|
||||
base: {
|
||||
icon_size: 12,
|
||||
color: foreground(theme.highest, "variant"),
|
||||
|
||||
button_width: 12,
|
||||
background: background(theme.highest, "on"),
|
||||
corner_radius: 2,
|
||||
border: {
|
||||
width: 1., color: background(theme.highest, "on")
|
||||
},
|
||||
padding: {
|
||||
left: 4,
|
||||
right: 4,
|
||||
top: 4,
|
||||
bottom: 4,
|
||||
},
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
...text(theme.highest, "mono", "variant", "hovered"),
|
||||
background: background(theme.highest, "on", "hovered"),
|
||||
border: {
|
||||
width: 1., color: background(theme.highest, "on", "hovered")
|
||||
},
|
||||
},
|
||||
clicked: {
|
||||
...text(theme.highest, "mono", "variant", "pressed"),
|
||||
background: background(theme.highest, "on", "pressed"),
|
||||
border: {
|
||||
width: 1., color: background(theme.highest, "on", "pressed")
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
state: {
|
||||
active: {
|
||||
default: {
|
||||
icon_size: 12,
|
||||
button_width: 12,
|
||||
color: foreground(theme.highest, "variant"),
|
||||
background: background(theme.highest, "accent"),
|
||||
border: border(theme.highest, "accent"),
|
||||
},
|
||||
hovered: {
|
||||
background: background(theme.highest, "accent", "hovered"),
|
||||
border: border(theme.highest, "accent", "hovered"),
|
||||
},
|
||||
clicked: {
|
||||
background: background(theme.highest, "accent", "pressed"),
|
||||
border: border(theme.highest, "accent", "pressed"),
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
},
|
||||
message_header: {
|
||||
margin: { bottom: 4, top: 4 },
|
||||
background: background(theme.highest),
|
||||
@@ -93,7 +170,10 @@ export default function assistant(): any {
|
||||
base: {
|
||||
background: background(theme.middle),
|
||||
padding: { top: 4, bottom: 4 },
|
||||
border: border(theme.middle, "default", { top: true, overlay: true }),
|
||||
border: border(theme.middle, "default", {
|
||||
top: true,
|
||||
overlay: true,
|
||||
}),
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
@@ -101,7 +181,7 @@ export default function assistant(): any {
|
||||
},
|
||||
clicked: {
|
||||
background: background(theme.middle, "pressed"),
|
||||
}
|
||||
},
|
||||
},
|
||||
}),
|
||||
saved_at: {
|
||||
|
||||
@@ -0,0 +1,155 @@
|
||||
import { useTheme } from "../theme"
|
||||
import { background, border, foreground, text } from "./components"
|
||||
import picker from "./picker"
|
||||
import { input } from "../component/input"
|
||||
import contact_finder from "./contact_finder"
|
||||
import { tab } from "../component/tab"
|
||||
import { icon_button } from "../component/icon_button"
|
||||
|
||||
export default function channel_modal(): any {
|
||||
const theme = useTheme()
|
||||
|
||||
const SPACING = 12 as const
|
||||
const BUTTON_OFFSET = 6 as const
|
||||
const ITEM_HEIGHT = 36 as const
|
||||
|
||||
const contact_button = {
|
||||
background: background(theme.middle, "variant"),
|
||||
color: foreground(theme.middle, "variant"),
|
||||
icon_width: 8,
|
||||
button_width: 16,
|
||||
corner_radius: 8,
|
||||
}
|
||||
|
||||
const picker_style = picker()
|
||||
delete picker_style.shadow
|
||||
delete picker_style.border
|
||||
|
||||
const picker_input = input()
|
||||
|
||||
const member_icon_style = icon_button({
|
||||
variant: "ghost",
|
||||
size: "sm",
|
||||
}).default
|
||||
|
||||
return {
|
||||
contact_finder: contact_finder(),
|
||||
tabbed_modal: {
|
||||
tab_button: tab({ layer: theme.middle }),
|
||||
row_height: ITEM_HEIGHT,
|
||||
header: {
|
||||
background: background(theme.lowest),
|
||||
border: border(theme.middle, {
|
||||
bottom: true,
|
||||
top: false,
|
||||
left: false,
|
||||
right: false,
|
||||
}),
|
||||
padding: {
|
||||
top: SPACING,
|
||||
left: SPACING - BUTTON_OFFSET,
|
||||
right: SPACING - BUTTON_OFFSET,
|
||||
},
|
||||
corner_radii: {
|
||||
top_right: 12,
|
||||
top_left: 12,
|
||||
},
|
||||
},
|
||||
body: {
|
||||
background: background(theme.middle),
|
||||
padding: {
|
||||
top: SPACING - 4,
|
||||
left: SPACING,
|
||||
right: SPACING,
|
||||
bottom: SPACING,
|
||||
},
|
||||
corner_radii: {
|
||||
bottom_right: 12,
|
||||
bottom_left: 12,
|
||||
},
|
||||
},
|
||||
modal: {
|
||||
background: background(theme.middle),
|
||||
shadow: theme.modal_shadow,
|
||||
corner_radius: 12,
|
||||
padding: {
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
},
|
||||
},
|
||||
// FIXME: due to a bug in the picker's size calculation, this must be 600
|
||||
max_height: 600,
|
||||
max_width: 540,
|
||||
title: {
|
||||
...text(theme.middle, "sans", "on", { size: "lg" }),
|
||||
padding: {
|
||||
left: BUTTON_OFFSET,
|
||||
},
|
||||
},
|
||||
picker: {
|
||||
empty_container: {},
|
||||
item: {
|
||||
...picker_style.item,
|
||||
margin: { left: SPACING, right: SPACING },
|
||||
},
|
||||
no_matches: picker_style.no_matches,
|
||||
input_editor: picker_input,
|
||||
empty_input_editor: picker_input,
|
||||
header: picker_style.header,
|
||||
footer: picker_style.footer,
|
||||
},
|
||||
},
|
||||
channel_modal: {
|
||||
// This is used for the icons that are rendered to the right of channel Members in both UIs
|
||||
member_icon: member_icon_style,
|
||||
// This is used for the icons that are rendered to the right of channel invites in both UIs
|
||||
invitee_icon: member_icon_style,
|
||||
remove_member_button: {
|
||||
...text(theme.middle, "sans", { size: "xs" }),
|
||||
background: background(theme.middle),
|
||||
padding: {
|
||||
left: 7,
|
||||
right: 7,
|
||||
},
|
||||
},
|
||||
cancel_invite_button: {
|
||||
...text(theme.middle, "sans", { size: "xs" }),
|
||||
background: background(theme.middle),
|
||||
},
|
||||
member_tag: {
|
||||
...text(theme.middle, "sans", { size: "xs" }),
|
||||
border: border(theme.middle, "active"),
|
||||
background: background(theme.middle),
|
||||
margin: {
|
||||
left: 8,
|
||||
},
|
||||
padding: {
|
||||
left: 4,
|
||||
right: 4,
|
||||
},
|
||||
},
|
||||
contact_avatar: {
|
||||
corner_radius: 10,
|
||||
width: 18,
|
||||
},
|
||||
contact_username: {
|
||||
padding: {
|
||||
left: 8,
|
||||
},
|
||||
},
|
||||
contact_button: {
|
||||
...contact_button,
|
||||
hover: {
|
||||
background: background(theme.middle, "variant", "hovered"),
|
||||
},
|
||||
},
|
||||
disabled_contact_button: {
|
||||
...contact_button,
|
||||
background: background(theme.middle, "disabled"),
|
||||
color: foreground(theme.middle, "disabled"),
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,410 @@
|
||||
import {
|
||||
background,
|
||||
border,
|
||||
border_color,
|
||||
foreground,
|
||||
text,
|
||||
} from "./components"
|
||||
import { interactive, toggleable } from "../element"
|
||||
import { useTheme } from "../theme"
|
||||
import collab_modals from "./collab_modals"
|
||||
import { icon_button, toggleable_icon_button } from "../component/icon_button"
|
||||
import { indicator } from "../component/indicator"
|
||||
|
||||
export default function contacts_panel(): any {
|
||||
const theme = useTheme()
|
||||
|
||||
const CHANNEL_SPACING = 4 as const
|
||||
const NAME_MARGIN = 6 as const
|
||||
const SPACING = 12 as const
|
||||
const INDENT_SIZE = 8 as const
|
||||
const ITEM_HEIGHT = 28 as const
|
||||
|
||||
const layer = theme.middle
|
||||
|
||||
const contact_button = {
|
||||
background: background(layer, "on"),
|
||||
color: foreground(layer, "on"),
|
||||
icon_width: 14,
|
||||
button_width: 16,
|
||||
corner_radius: 8,
|
||||
}
|
||||
|
||||
const project_row = {
|
||||
guest_avatar_spacing: 4,
|
||||
height: 24,
|
||||
guest_avatar: {
|
||||
corner_radius: 8,
|
||||
width: 14,
|
||||
},
|
||||
name: {
|
||||
...text(layer, "sans", { size: "sm" }),
|
||||
margin: {
|
||||
left: NAME_MARGIN,
|
||||
right: 4,
|
||||
},
|
||||
},
|
||||
guests: {
|
||||
margin: {
|
||||
left: NAME_MARGIN,
|
||||
right: NAME_MARGIN,
|
||||
},
|
||||
},
|
||||
padding: {
|
||||
left: SPACING,
|
||||
right: SPACING,
|
||||
},
|
||||
}
|
||||
|
||||
const icon_style = {
|
||||
color: foreground(layer, "variant"),
|
||||
width: 14,
|
||||
}
|
||||
|
||||
const header_icon_button = toggleable_icon_button({
|
||||
variant: "ghost",
|
||||
size: "sm",
|
||||
active_layer: theme.lowest,
|
||||
})
|
||||
|
||||
const subheader_row = toggleable({
|
||||
base: interactive({
|
||||
base: {
|
||||
...text(layer, "sans", { size: "sm" }),
|
||||
padding: {
|
||||
left: SPACING,
|
||||
right: SPACING,
|
||||
},
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
background: background(layer, "hovered"),
|
||||
},
|
||||
clicked: {
|
||||
background: background(layer, "pressed"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
state: {
|
||||
active: {
|
||||
default: {
|
||||
...text(theme.lowest, "sans", { size: "sm" }),
|
||||
background: background(theme.lowest),
|
||||
},
|
||||
clicked: {
|
||||
background: background(layer, "pressed"),
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
const filter_input = {
|
||||
background: background(layer, "on"),
|
||||
corner_radius: 6,
|
||||
text: text(layer, "sans", "base"),
|
||||
placeholder_text: text(layer, "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,
|
||||
},
|
||||
}
|
||||
|
||||
const item_row = toggleable({
|
||||
base: interactive({
|
||||
base: {
|
||||
padding: {
|
||||
left: SPACING,
|
||||
right: SPACING,
|
||||
},
|
||||
},
|
||||
state: {
|
||||
clicked: {
|
||||
background: background(layer, "pressed"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
state: {
|
||||
inactive: {
|
||||
hovered: {
|
||||
background: background(layer, "hovered"),
|
||||
},
|
||||
},
|
||||
active: {
|
||||
default: {
|
||||
...text(theme.lowest, "sans", { size: "sm" }),
|
||||
background: background(theme.lowest),
|
||||
},
|
||||
clicked: {
|
||||
background: background(layer, "pressed"),
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
return {
|
||||
...collab_modals(),
|
||||
disclosure: {
|
||||
button: icon_button({ variant: "ghost", size: "sm" }),
|
||||
spacing: CHANNEL_SPACING,
|
||||
},
|
||||
log_in_button: interactive({
|
||||
base: {
|
||||
background: background(theme.middle),
|
||||
border: border(theme.middle, "active"),
|
||||
corner_radius: 4,
|
||||
margin: {
|
||||
top: 4,
|
||||
left: 16,
|
||||
right: 16,
|
||||
},
|
||||
padding: {
|
||||
top: 3,
|
||||
bottom: 3,
|
||||
left: 7,
|
||||
right: 7,
|
||||
},
|
||||
...text(theme.middle, "sans", "default", { size: "sm" }),
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
...text(theme.middle, "sans", "default", { size: "sm" }),
|
||||
background: background(theme.middle, "hovered"),
|
||||
border: border(theme.middle, "active"),
|
||||
},
|
||||
clicked: {
|
||||
...text(theme.middle, "sans", "default", { size: "sm" }),
|
||||
background: background(theme.middle, "pressed"),
|
||||
border: border(theme.middle, "active"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
background: background(layer),
|
||||
padding: {
|
||||
top: SPACING,
|
||||
},
|
||||
user_query_editor: filter_input,
|
||||
channel_hash: icon_style,
|
||||
user_query_editor_height: 33,
|
||||
add_contact_button: header_icon_button,
|
||||
add_channel_button: header_icon_button,
|
||||
leave_call_button: header_icon_button,
|
||||
row_height: ITEM_HEIGHT,
|
||||
channel_indent: INDENT_SIZE * 2 + 2,
|
||||
section_icon_size: 14,
|
||||
header_row: {
|
||||
...text(layer, "sans", { size: "sm", weight: "bold" }),
|
||||
margin: { top: SPACING },
|
||||
padding: {
|
||||
left: SPACING,
|
||||
right: SPACING,
|
||||
},
|
||||
},
|
||||
subheader_row,
|
||||
leave_call: interactive({
|
||||
base: {
|
||||
background: background(layer),
|
||||
border: border(layer),
|
||||
corner_radius: 6,
|
||||
margin: {
|
||||
top: 1,
|
||||
},
|
||||
padding: {
|
||||
top: 1,
|
||||
bottom: 1,
|
||||
left: 7,
|
||||
right: 7,
|
||||
},
|
||||
...text(layer, "sans", "variant", { size: "xs" }),
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
...text(layer, "sans", "hovered", { size: "xs" }),
|
||||
background: background(layer, "hovered"),
|
||||
border: border(layer, "hovered"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
contact_row: toggleable({
|
||||
base: interactive({
|
||||
base: {
|
||||
padding: {
|
||||
left: SPACING,
|
||||
right: SPACING,
|
||||
},
|
||||
},
|
||||
state: {
|
||||
clicked: {
|
||||
background: background(layer, "pressed"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
state: {
|
||||
inactive: {
|
||||
hovered: {
|
||||
background: background(layer, "hovered"),
|
||||
},
|
||||
},
|
||||
active: {
|
||||
default: {
|
||||
...text(theme.lowest, "sans", { size: "sm" }),
|
||||
background: background(theme.lowest),
|
||||
},
|
||||
clicked: {
|
||||
background: background(layer, "pressed"),
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
channel_row: item_row,
|
||||
channel_name: {
|
||||
...text(layer, "sans", { size: "sm" }),
|
||||
margin: {
|
||||
left: CHANNEL_SPACING,
|
||||
},
|
||||
},
|
||||
list_empty_label_container: {
|
||||
margin: {
|
||||
left: NAME_MARGIN,
|
||||
},
|
||||
},
|
||||
list_empty_icon: {
|
||||
color: foreground(layer, "variant"),
|
||||
width: 14,
|
||||
},
|
||||
list_empty_state: toggleable({
|
||||
base: interactive({
|
||||
base: {
|
||||
...text(layer, "sans", "variant", { size: "sm" }),
|
||||
padding: {
|
||||
top: SPACING / 2,
|
||||
bottom: SPACING / 2,
|
||||
left: SPACING,
|
||||
right: SPACING,
|
||||
},
|
||||
},
|
||||
state: {
|
||||
clicked: {
|
||||
background: background(layer, "pressed"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
state: {
|
||||
inactive: {
|
||||
hovered: {
|
||||
background: background(layer, "hovered"),
|
||||
},
|
||||
},
|
||||
active: {
|
||||
default: {
|
||||
...text(theme.lowest, "sans", { size: "sm" }),
|
||||
background: background(theme.lowest),
|
||||
},
|
||||
clicked: {
|
||||
background: background(layer, "pressed"),
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
contact_avatar: {
|
||||
corner_radius: 10,
|
||||
width: 20,
|
||||
},
|
||||
channel_avatar: {
|
||||
corner_radius: 10,
|
||||
width: 20,
|
||||
},
|
||||
extra_participant_label: {
|
||||
corner_radius: 10,
|
||||
padding: {
|
||||
left: 10,
|
||||
right: 4,
|
||||
},
|
||||
background: background(layer, "hovered"),
|
||||
...text(layer, "sans", "hovered", { size: "xs" }),
|
||||
},
|
||||
contact_status_free: indicator({ layer, color: "positive" }),
|
||||
contact_status_busy: indicator({ layer, color: "negative" }),
|
||||
contact_username: {
|
||||
...text(layer, "sans", { size: "sm" }),
|
||||
margin: {
|
||||
left: NAME_MARGIN,
|
||||
},
|
||||
},
|
||||
contact_button_spacing: NAME_MARGIN,
|
||||
contact_button: icon_button({
|
||||
variant: "ghost",
|
||||
color: "variant",
|
||||
size: "sm",
|
||||
}),
|
||||
disabled_button: {
|
||||
...contact_button,
|
||||
background: background(layer, "on"),
|
||||
color: foreground(layer, "on"),
|
||||
},
|
||||
calling_indicator: {
|
||||
...text(layer, "sans", "variant", { size: "xs" }),
|
||||
},
|
||||
tree_branch: toggleable({
|
||||
base: interactive({
|
||||
base: {
|
||||
color: border_color(layer),
|
||||
width: 1,
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
color: border_color(layer),
|
||||
},
|
||||
},
|
||||
}),
|
||||
state: {
|
||||
active: {
|
||||
default: {
|
||||
color: border_color(layer),
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
project_row: toggleable({
|
||||
base: interactive({
|
||||
base: {
|
||||
...project_row,
|
||||
icon: {
|
||||
margin: { left: NAME_MARGIN },
|
||||
color: foreground(layer, "variant"),
|
||||
width: 14,
|
||||
},
|
||||
name: {
|
||||
...project_row.name,
|
||||
...text(layer, "sans", { size: "sm" }),
|
||||
},
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
background: background(layer, "hovered"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
state: {
|
||||
active: {
|
||||
default: { background: background(theme.lowest) },
|
||||
},
|
||||
},
|
||||
}),
|
||||
face_overlap: 8,
|
||||
channel_editor: {
|
||||
padding: {
|
||||
left: NAME_MARGIN,
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
import { useTheme } from "../common"
|
||||
import { text_button } from "../component/text_button"
|
||||
import { icon_button } from "../component/icon_button"
|
||||
import { text } from "./components"
|
||||
import { toggleable } from "../element"
|
||||
|
||||
export default function contacts_panel(): any {
|
||||
const theme = useTheme()
|
||||
|
||||
return {
|
||||
button: text_button({}),
|
||||
toggle: toggleable({
|
||||
base: text_button({}),
|
||||
state: {
|
||||
active: {
|
||||
...text_button({ color: "accent" }),
|
||||
},
|
||||
},
|
||||
}),
|
||||
disclosure: {
|
||||
...text(theme.lowest, "sans", "base"),
|
||||
button: icon_button({ variant: "ghost" }),
|
||||
spacing: 4,
|
||||
},
|
||||
}
|
||||
}
|
||||
@@ -1,11 +1,11 @@
|
||||
import picker from "./picker"
|
||||
// import picker from "./picker"
|
||||
import { background, border, foreground, text } from "./components"
|
||||
import { useTheme } from "../theme"
|
||||
|
||||
export default function contact_finder(): any {
|
||||
const theme = useTheme()
|
||||
|
||||
const side_margin = 6
|
||||
// const side_margin = 6
|
||||
const contact_button = {
|
||||
background: background(theme.middle, "variant"),
|
||||
color: foreground(theme.middle, "variant"),
|
||||
@@ -14,42 +14,42 @@ export default function contact_finder(): any {
|
||||
corner_radius: 8,
|
||||
}
|
||||
|
||||
const picker_style = picker()
|
||||
const picker_input = {
|
||||
background: background(theme.middle, "on"),
|
||||
corner_radius: 6,
|
||||
text: text(theme.middle, "mono"),
|
||||
placeholder_text: text(theme.middle, "mono", "on", "disabled", {
|
||||
size: "xs",
|
||||
}),
|
||||
selection: theme.players[0],
|
||||
border: border(theme.middle),
|
||||
padding: {
|
||||
bottom: 4,
|
||||
left: 8,
|
||||
right: 8,
|
||||
top: 4,
|
||||
},
|
||||
margin: {
|
||||
left: side_margin,
|
||||
right: side_margin,
|
||||
},
|
||||
}
|
||||
// const picker_style = picker()
|
||||
// const picker_input = {
|
||||
// background: background(theme.middle, "on"),
|
||||
// corner_radius: 6,
|
||||
// text: text(theme.middle, "mono"),
|
||||
// placeholder_text: text(theme.middle, "mono", "on", "disabled", {
|
||||
// size: "xs",
|
||||
// }),
|
||||
// selection: theme.players[0],
|
||||
// border: border(theme.middle),
|
||||
// padding: {
|
||||
// bottom: 4,
|
||||
// left: 8,
|
||||
// right: 8,
|
||||
// top: 4,
|
||||
// },
|
||||
// margin: {
|
||||
// left: side_margin,
|
||||
// right: side_margin,
|
||||
// },
|
||||
// }
|
||||
|
||||
return {
|
||||
picker: {
|
||||
empty_container: {},
|
||||
item: {
|
||||
...picker_style.item,
|
||||
margin: { left: side_margin, right: side_margin },
|
||||
},
|
||||
no_matches: picker_style.no_matches,
|
||||
input_editor: picker_input,
|
||||
empty_input_editor: picker_input,
|
||||
header: picker_style.header,
|
||||
footer: picker_style.footer,
|
||||
},
|
||||
row_height: 28,
|
||||
// picker: {
|
||||
// empty_container: {},
|
||||
// item: {
|
||||
// ...picker_style.item,
|
||||
// margin: { left: side_margin, right: side_margin },
|
||||
// },
|
||||
// no_matches: picker_style.no_matches,
|
||||
// input_editor: picker_input,
|
||||
// empty_input_editor: picker_input,
|
||||
// header: picker_style.header,
|
||||
// footer: picker_style.footer,
|
||||
// },
|
||||
// row_height: 28,
|
||||
contact_avatar: {
|
||||
corner_radius: 10,
|
||||
width: 18,
|
||||
|
||||
@@ -1,247 +0,0 @@
|
||||
import {
|
||||
background,
|
||||
border,
|
||||
border_color,
|
||||
foreground,
|
||||
text,
|
||||
} from "./components"
|
||||
import { interactive, toggleable } from "../element"
|
||||
import { useTheme } from "../theme"
|
||||
export default function contacts_panel(): any {
|
||||
const theme = useTheme()
|
||||
|
||||
const name_margin = 8
|
||||
const side_padding = 12
|
||||
|
||||
const layer = theme.middle
|
||||
|
||||
const contact_button = {
|
||||
background: background(layer, "on"),
|
||||
color: foreground(layer, "on"),
|
||||
icon_width: 8,
|
||||
button_width: 16,
|
||||
corner_radius: 8,
|
||||
}
|
||||
const project_row = {
|
||||
guest_avatar_spacing: 4,
|
||||
height: 24,
|
||||
guest_avatar: {
|
||||
corner_radius: 8,
|
||||
width: 14,
|
||||
},
|
||||
name: {
|
||||
...text(layer, "mono", { size: "sm" }),
|
||||
margin: {
|
||||
left: name_margin,
|
||||
right: 6,
|
||||
},
|
||||
},
|
||||
guests: {
|
||||
margin: {
|
||||
left: name_margin,
|
||||
right: name_margin,
|
||||
},
|
||||
},
|
||||
padding: {
|
||||
left: side_padding,
|
||||
right: side_padding,
|
||||
},
|
||||
}
|
||||
|
||||
return {
|
||||
background: background(layer),
|
||||
padding: { top: 12 },
|
||||
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: 6,
|
||||
},
|
||||
},
|
||||
user_query_editor_height: 33,
|
||||
add_contact_button: {
|
||||
margin: { left: 6, right: 12 },
|
||||
color: foreground(layer, "on"),
|
||||
button_width: 28,
|
||||
icon_width: 16,
|
||||
},
|
||||
row_height: 28,
|
||||
section_icon_size: 8,
|
||||
header_row: toggleable({
|
||||
base: interactive({
|
||||
base: {
|
||||
...text(layer, "mono", { size: "sm" }),
|
||||
margin: { top: 14 },
|
||||
padding: {
|
||||
left: side_padding,
|
||||
right: side_padding,
|
||||
},
|
||||
background: background(layer, "default"), // posiewic: breaking change
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
background: background(layer, "hovered"),
|
||||
},
|
||||
clicked: {
|
||||
background: background(layer, "pressed"),
|
||||
},
|
||||
}, // hack, we want headerRow to be interactive for whatever reason. It probably shouldn't be interactive in the first place.
|
||||
}),
|
||||
state: {
|
||||
active: {
|
||||
default: {
|
||||
...text(layer, "mono", "active", { size: "sm" }),
|
||||
background: background(layer, "active"),
|
||||
},
|
||||
hovered: {
|
||||
background: background(layer, "hovered"),
|
||||
},
|
||||
clicked: {
|
||||
background: background(layer, "pressed"),
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
leave_call: interactive({
|
||||
base: {
|
||||
background: background(layer),
|
||||
border: border(layer),
|
||||
corner_radius: 6,
|
||||
margin: {
|
||||
top: 1,
|
||||
},
|
||||
padding: {
|
||||
top: 1,
|
||||
bottom: 1,
|
||||
left: 7,
|
||||
right: 7,
|
||||
},
|
||||
...text(layer, "sans", "variant", { size: "xs" }),
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
...text(layer, "sans", "hovered", { size: "xs" }),
|
||||
background: background(layer, "hovered"),
|
||||
border: border(layer, "hovered"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
contact_row: {
|
||||
inactive: {
|
||||
default: {
|
||||
padding: {
|
||||
left: side_padding,
|
||||
right: side_padding,
|
||||
},
|
||||
},
|
||||
},
|
||||
active: {
|
||||
default: {
|
||||
background: background(layer, "active"),
|
||||
padding: {
|
||||
left: side_padding,
|
||||
right: side_padding,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
contact_avatar: {
|
||||
corner_radius: 10,
|
||||
width: 18,
|
||||
},
|
||||
contact_status_free: {
|
||||
corner_radius: 4,
|
||||
padding: 4,
|
||||
margin: { top: 12, left: 12 },
|
||||
background: foreground(layer, "positive"),
|
||||
},
|
||||
contact_status_busy: {
|
||||
corner_radius: 4,
|
||||
padding: 4,
|
||||
margin: { top: 12, left: 12 },
|
||||
background: foreground(layer, "negative"),
|
||||
},
|
||||
contact_username: {
|
||||
...text(layer, "mono", { size: "sm" }),
|
||||
margin: {
|
||||
left: name_margin,
|
||||
},
|
||||
},
|
||||
contact_button_spacing: name_margin,
|
||||
contact_button: interactive({
|
||||
base: { ...contact_button },
|
||||
state: {
|
||||
hovered: {
|
||||
background: background(layer, "hovered"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
disabled_button: {
|
||||
...contact_button,
|
||||
background: background(layer, "on"),
|
||||
color: foreground(layer, "on"),
|
||||
},
|
||||
calling_indicator: {
|
||||
...text(layer, "mono", "variant", { size: "xs" }),
|
||||
},
|
||||
tree_branch: toggleable({
|
||||
base: interactive({
|
||||
base: {
|
||||
color: border_color(layer),
|
||||
width: 1,
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
color: border_color(layer),
|
||||
},
|
||||
},
|
||||
}),
|
||||
state: {
|
||||
active: {
|
||||
default: {
|
||||
color: border_color(layer),
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
project_row: toggleable({
|
||||
base: interactive({
|
||||
base: {
|
||||
...project_row,
|
||||
background: background(layer),
|
||||
icon: {
|
||||
margin: { left: name_margin },
|
||||
color: foreground(layer, "variant"),
|
||||
width: 12,
|
||||
},
|
||||
name: {
|
||||
...project_row.name,
|
||||
...text(layer, "mono", { size: "sm" }),
|
||||
},
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
background: background(layer, "hovered"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
state: {
|
||||
active: {
|
||||
default: { background: background(layer, "active") },
|
||||
},
|
||||
},
|
||||
}),
|
||||
}
|
||||
}
|
||||
@@ -3,14 +3,4 @@ import { background, border } from "./components"
|
||||
|
||||
export default function contacts_popover(): any {
|
||||
const theme = useTheme()
|
||||
|
||||
return {
|
||||
background: background(theme.middle),
|
||||
corner_radius: 6,
|
||||
padding: { top: 6, bottom: 6 },
|
||||
shadow: theme.popover_shadow,
|
||||
border: border(theme.middle),
|
||||
width: 300,
|
||||
height: 400,
|
||||
}
|
||||
}
|
||||
|
||||
@@ -31,16 +31,6 @@ export default function context_menu(): any {
|
||||
state: {
|
||||
hovered: {
|
||||
background: background(theme.middle, "hovered"),
|
||||
label: text(theme.middle, "sans", "hovered", {
|
||||
size: "sm",
|
||||
}),
|
||||
keystroke: {
|
||||
...text(theme.middle, "sans", "hovered", {
|
||||
size: "sm",
|
||||
weight: "bold",
|
||||
}),
|
||||
padding: { left: 3, right: 3 },
|
||||
},
|
||||
},
|
||||
clicked: {
|
||||
background: background(theme.middle, "pressed"),
|
||||
|
||||
@@ -184,6 +184,7 @@ export default function editor(): any {
|
||||
theme.players[6],
|
||||
theme.players[7],
|
||||
],
|
||||
absent_selection: theme.players[7],
|
||||
autocomplete: {
|
||||
background: background(theme.middle),
|
||||
corner_radius: 8,
|
||||
@@ -309,7 +310,7 @@ export default function editor(): any {
|
||||
? with_opacity(theme.ramps.green(0.5).hex(), 0.8)
|
||||
: with_opacity(theme.ramps.green(0.4).hex(), 0.8),
|
||||
},
|
||||
selections: foreground(layer, "accent")
|
||||
selections: foreground(layer, "accent"),
|
||||
},
|
||||
composition_mark: {
|
||||
underline: {
|
||||
|
||||
@@ -37,7 +37,7 @@ export default function feedback(): any {
|
||||
...text(theme.highest, "mono", "on", "disabled"),
|
||||
background: background(theme.highest, "on", "disabled"),
|
||||
border: border(theme.highest, "on", "disabled"),
|
||||
}
|
||||
},
|
||||
},
|
||||
}),
|
||||
button_margin: 8,
|
||||
|
||||
@@ -152,7 +152,7 @@ export default function picker(): any {
|
||||
0.5
|
||||
),
|
||||
},
|
||||
}
|
||||
},
|
||||
}),
|
||||
}
|
||||
}
|
||||
|
||||
@@ -64,17 +64,17 @@ export default function project_panel(): any {
|
||||
const unselected_default_style = merge(
|
||||
base_properties,
|
||||
unselected?.default ?? {},
|
||||
{},
|
||||
{}
|
||||
)
|
||||
const unselected_hovered_style = merge(
|
||||
base_properties,
|
||||
{ background: background(theme.middle, "hovered") },
|
||||
unselected?.hovered ?? {},
|
||||
unselected?.hovered ?? {}
|
||||
)
|
||||
const unselected_clicked_style = merge(
|
||||
base_properties,
|
||||
{ background: background(theme.middle, "pressed") },
|
||||
unselected?.clicked ?? {},
|
||||
unselected?.clicked ?? {}
|
||||
)
|
||||
const selected_default_style = merge(
|
||||
base_properties,
|
||||
@@ -82,7 +82,7 @@ export default function project_panel(): any {
|
||||
background: background(theme.lowest),
|
||||
text: text(theme.lowest, "sans", { size: "sm" }),
|
||||
},
|
||||
selected_style?.default ?? {},
|
||||
selected_style?.default ?? {}
|
||||
)
|
||||
const selected_hovered_style = merge(
|
||||
base_properties,
|
||||
@@ -90,7 +90,7 @@ export default function project_panel(): any {
|
||||
background: background(theme.lowest, "hovered"),
|
||||
text: text(theme.lowest, "sans", { size: "sm" }),
|
||||
},
|
||||
selected_style?.hovered ?? {},
|
||||
selected_style?.hovered ?? {}
|
||||
)
|
||||
const selected_clicked_style = merge(
|
||||
base_properties,
|
||||
@@ -98,7 +98,7 @@ export default function project_panel(): any {
|
||||
background: background(theme.lowest, "pressed"),
|
||||
text: text(theme.lowest, "sans", { size: "sm" }),
|
||||
},
|
||||
selected_style?.clicked ?? {},
|
||||
selected_style?.clicked ?? {}
|
||||
)
|
||||
|
||||
return toggleable({
|
||||
@@ -175,7 +175,7 @@ export default function project_panel(): any {
|
||||
default: {
|
||||
icon_color: foreground(theme.middle, "variant"),
|
||||
},
|
||||
},
|
||||
}
|
||||
),
|
||||
cut_entry: entry(
|
||||
{
|
||||
@@ -190,7 +190,7 @@ export default function project_panel(): any {
|
||||
size: "sm",
|
||||
}),
|
||||
},
|
||||
},
|
||||
}
|
||||
),
|
||||
filename_editor: {
|
||||
background: background(theme.middle, "on"),
|
||||
|
||||
+304
-68
@@ -2,9 +2,23 @@ import { with_opacity } from "../theme/color"
|
||||
import { background, border, foreground, text } from "./components"
|
||||
import { interactive, toggleable } from "../element"
|
||||
import { useTheme } from "../theme"
|
||||
import { text_button } from "../component/text_button"
|
||||
|
||||
const search_results = () => {
|
||||
const theme = useTheme()
|
||||
|
||||
return {
|
||||
// TODO: Add an activeMatchBackground on the rust side to differentiate between active and inactive
|
||||
match_background: with_opacity(
|
||||
foreground(theme.highest, "accent"),
|
||||
0.4
|
||||
),
|
||||
}
|
||||
}
|
||||
|
||||
export default function search(): any {
|
||||
const theme = useTheme()
|
||||
const SEARCH_ROW_SPACING = 12
|
||||
|
||||
// Search input
|
||||
const editor = {
|
||||
@@ -17,13 +31,13 @@ export default function search(): any {
|
||||
text: text(theme.highest, "mono", "default"),
|
||||
border: border(theme.highest),
|
||||
margin: {
|
||||
right: 12,
|
||||
right: SEARCH_ROW_SPACING,
|
||||
},
|
||||
padding: {
|
||||
top: 3,
|
||||
bottom: 3,
|
||||
left: 12,
|
||||
right: 8,
|
||||
top: 4,
|
||||
bottom: 4,
|
||||
left: 10,
|
||||
right: 4,
|
||||
},
|
||||
}
|
||||
|
||||
@@ -34,82 +48,161 @@ export default function search(): any {
|
||||
}
|
||||
|
||||
return {
|
||||
// TODO: Add an activeMatchBackground on the rust side to differentiate between active and inactive
|
||||
match_background: with_opacity(
|
||||
foreground(theme.highest, "accent"),
|
||||
0.4
|
||||
),
|
||||
padding: { top: 0, bottom: 0 },
|
||||
|
||||
option_button: toggleable({
|
||||
base: interactive({
|
||||
base: {
|
||||
...text(theme.highest, "mono", "on"),
|
||||
icon_width: 14,
|
||||
button_width: 32,
|
||||
color: foreground(theme.highest, "variant"),
|
||||
background: background(theme.highest, "on"),
|
||||
corner_radius: 6,
|
||||
border: border(theme.highest, "on"),
|
||||
margin: {
|
||||
right: 4,
|
||||
corner_radius: 2,
|
||||
margin: { right: 2 },
|
||||
border: {
|
||||
width: 1,
|
||||
color: background(theme.highest, "on"),
|
||||
},
|
||||
padding: {
|
||||
bottom: 2,
|
||||
left: 10,
|
||||
right: 10,
|
||||
top: 2,
|
||||
left: 4,
|
||||
right: 4,
|
||||
top: 4,
|
||||
bottom: 4,
|
||||
},
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
...text(theme.highest, "mono", "on", "hovered"),
|
||||
...text(theme.highest, "mono", "variant", "hovered"),
|
||||
background: background(theme.highest, "on", "hovered"),
|
||||
border: border(theme.highest, "on", "hovered"),
|
||||
border: {
|
||||
width: 1,
|
||||
color: background(theme.highest, "on", "hovered"),
|
||||
},
|
||||
},
|
||||
clicked: {
|
||||
...text(theme.highest, "mono", "on", "pressed"),
|
||||
...text(theme.highest, "mono", "variant", "pressed"),
|
||||
background: background(theme.highest, "on", "pressed"),
|
||||
border: border(theme.highest, "on", "pressed"),
|
||||
border: {
|
||||
width: 1,
|
||||
color: background(theme.highest, "on", "pressed"),
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
state: {
|
||||
active: {
|
||||
default: {
|
||||
...text(theme.highest, "mono", "accent"),
|
||||
icon_width: 14,
|
||||
button_width: 32,
|
||||
color: foreground(theme.highest, "variant"),
|
||||
background: background(theme.highest, "accent"),
|
||||
border: border(theme.highest, "accent"),
|
||||
},
|
||||
hovered: {
|
||||
...text(theme.highest, "mono", "accent", "hovered"),
|
||||
background: background(
|
||||
theme.highest,
|
||||
"accent",
|
||||
"hovered"
|
||||
),
|
||||
border: border(theme.highest, "accent", "hovered"),
|
||||
},
|
||||
clicked: {
|
||||
...text(theme.highest, "mono", "accent", "pressed"),
|
||||
background: background(
|
||||
theme.highest,
|
||||
"accent",
|
||||
"pressed"
|
||||
),
|
||||
border: border(theme.highest, "accent", "pressed"),
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
action_button: interactive({
|
||||
base: {
|
||||
...text(theme.highest, "mono", "on"),
|
||||
background: background(theme.highest, "on"),
|
||||
corner_radius: 6,
|
||||
border: border(theme.highest, "on"),
|
||||
margin: {
|
||||
right: 4,
|
||||
option_button_component: toggleable({
|
||||
base: interactive({
|
||||
base: {
|
||||
icon_size: 14,
|
||||
color: foreground(theme.highest, "variant"),
|
||||
|
||||
button_width: 32,
|
||||
background: background(theme.highest, "on"),
|
||||
corner_radius: 2,
|
||||
margin: { right: 2 },
|
||||
border: {
|
||||
width: 1,
|
||||
color: background(theme.highest, "on"),
|
||||
},
|
||||
padding: {
|
||||
left: 4,
|
||||
right: 4,
|
||||
top: 4,
|
||||
bottom: 4,
|
||||
},
|
||||
},
|
||||
padding: {
|
||||
bottom: 2,
|
||||
left: 10,
|
||||
right: 10,
|
||||
top: 2,
|
||||
state: {
|
||||
hovered: {
|
||||
...text(theme.highest, "mono", "variant", "hovered"),
|
||||
background: background(theme.highest, "on", "hovered"),
|
||||
border: {
|
||||
width: 1,
|
||||
color: background(theme.highest, "on", "hovered"),
|
||||
},
|
||||
},
|
||||
clicked: {
|
||||
...text(theme.highest, "mono", "variant", "pressed"),
|
||||
background: background(theme.highest, "on", "pressed"),
|
||||
border: {
|
||||
width: 1,
|
||||
color: background(theme.highest, "on", "pressed"),
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
state: {
|
||||
active: {
|
||||
default: {
|
||||
icon_size: 14,
|
||||
button_width: 32,
|
||||
color: foreground(theme.highest, "variant"),
|
||||
background: background(theme.highest, "accent"),
|
||||
border: border(theme.highest, "accent"),
|
||||
},
|
||||
hovered: {
|
||||
background: background(
|
||||
theme.highest,
|
||||
"accent",
|
||||
"hovered"
|
||||
),
|
||||
border: border(theme.highest, "accent", "hovered"),
|
||||
},
|
||||
clicked: {
|
||||
background: background(
|
||||
theme.highest,
|
||||
"accent",
|
||||
"pressed"
|
||||
),
|
||||
border: border(theme.highest, "accent", "pressed"),
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
// Search tool buttons
|
||||
// HACK: This is not how disabled elements should be created
|
||||
// Disabled elements should use a disabled state of an interactive element, not a toggleable element with the inactive state being disabled
|
||||
action_button: toggleable({
|
||||
state: {
|
||||
hovered: {
|
||||
...text(theme.highest, "mono", "on", "hovered"),
|
||||
background: background(theme.highest, "on", "hovered"),
|
||||
border: border(theme.highest, "on", "hovered"),
|
||||
},
|
||||
clicked: {
|
||||
...text(theme.highest, "mono", "on", "pressed"),
|
||||
background: background(theme.highest, "on", "pressed"),
|
||||
border: border(theme.highest, "on", "pressed"),
|
||||
},
|
||||
inactive: text_button({
|
||||
variant: "ghost",
|
||||
layer: theme.highest,
|
||||
disabled: true,
|
||||
margin: { right: SEARCH_ROW_SPACING },
|
||||
text_properties: { size: "sm" },
|
||||
}),
|
||||
active: text_button({
|
||||
variant: "ghost",
|
||||
layer: theme.highest,
|
||||
margin: { right: SEARCH_ROW_SPACING },
|
||||
text_properties: { size: "sm" },
|
||||
}),
|
||||
},
|
||||
}),
|
||||
editor,
|
||||
@@ -123,15 +216,15 @@ export default function search(): any {
|
||||
border: border(theme.highest, "negative"),
|
||||
},
|
||||
match_index: {
|
||||
...text(theme.highest, "mono", "variant"),
|
||||
...text(theme.highest, "mono", { size: "sm" }),
|
||||
padding: {
|
||||
left: 6,
|
||||
right: SEARCH_ROW_SPACING,
|
||||
},
|
||||
},
|
||||
option_button_group: {
|
||||
padding: {
|
||||
left: 12,
|
||||
right: 12,
|
||||
left: SEARCH_ROW_SPACING,
|
||||
right: SEARCH_ROW_SPACING,
|
||||
},
|
||||
},
|
||||
include_exclude_inputs: {
|
||||
@@ -140,28 +233,171 @@ export default function search(): any {
|
||||
right: 6,
|
||||
},
|
||||
},
|
||||
results_status: {
|
||||
major_results_status: {
|
||||
...text(theme.highest, "mono", "on"),
|
||||
size: 18,
|
||||
size: 15,
|
||||
},
|
||||
dismiss_button: interactive({
|
||||
base: {
|
||||
color: foreground(theme.highest, "variant"),
|
||||
icon_width: 12,
|
||||
button_width: 14,
|
||||
padding: {
|
||||
left: 10,
|
||||
right: 10,
|
||||
minor_results_status: {
|
||||
...text(theme.highest, "mono", "variant"),
|
||||
size: 13,
|
||||
},
|
||||
// Input Icon
|
||||
editor_icon: {
|
||||
icon: {
|
||||
color: foreground(theme.highest, "disabled"),
|
||||
asset: "icons/magnifying_glass.svg",
|
||||
dimensions: {
|
||||
width: 14,
|
||||
height: 14,
|
||||
},
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
color: foreground(theme.highest, "hovered"),
|
||||
container: {
|
||||
margin: { right: 4 },
|
||||
padding: { left: 1, right: 1 },
|
||||
},
|
||||
},
|
||||
// Toggle group buttons - Text | Regex | Semantic
|
||||
mode_button: toggleable({
|
||||
base: interactive({
|
||||
base: {
|
||||
...text(theme.highest, "mono", "variant", { size: "sm" }),
|
||||
background: background(theme.highest, "variant"),
|
||||
|
||||
border: {
|
||||
...border(theme.highest, "on"),
|
||||
left: false,
|
||||
right: false,
|
||||
},
|
||||
margin: {
|
||||
top: 1,
|
||||
bottom: 1,
|
||||
},
|
||||
padding: {
|
||||
left: 10,
|
||||
right: 10,
|
||||
},
|
||||
corner_radius: 6,
|
||||
},
|
||||
clicked: {
|
||||
color: foreground(theme.highest, "pressed"),
|
||||
state: {
|
||||
hovered: {
|
||||
...text(theme.highest, "mono", "variant", "hovered", {
|
||||
size: "sm",
|
||||
}),
|
||||
background: background(
|
||||
theme.highest,
|
||||
"variant",
|
||||
"hovered"
|
||||
),
|
||||
border: border(theme.highest, "on", "hovered"),
|
||||
},
|
||||
clicked: {
|
||||
...text(theme.highest, "mono", "variant", "pressed", {
|
||||
size: "sm",
|
||||
}),
|
||||
background: background(
|
||||
theme.highest,
|
||||
"variant",
|
||||
"pressed"
|
||||
),
|
||||
border: border(theme.highest, "on", "pressed"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
state: {
|
||||
active: {
|
||||
default: {
|
||||
...text(theme.highest, "mono", "on", { size: "sm" }),
|
||||
background: background(theme.highest, "on"),
|
||||
},
|
||||
hovered: {
|
||||
...text(theme.highest, "mono", "on", "hovered", {
|
||||
size: "sm",
|
||||
}),
|
||||
background: background(theme.highest, "on", "hovered"),
|
||||
},
|
||||
clicked: {
|
||||
...text(theme.highest, "mono", "on", "pressed", {
|
||||
size: "sm",
|
||||
}),
|
||||
background: background(theme.highest, "on", "pressed"),
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
// Next/Previous Match buttons
|
||||
// HACK: This is not how disabled elements should be created
|
||||
// Disabled elements should use a disabled state of an interactive element, not a toggleable element with the inactive state being disabled
|
||||
nav_button: toggleable({
|
||||
state: {
|
||||
inactive: interactive({
|
||||
base: {
|
||||
background: background(theme.highest, "disabled"),
|
||||
text: text(theme.highest, "mono", "disabled"),
|
||||
corner_radius: 6,
|
||||
border: {
|
||||
...border(theme.highest, "disabled"),
|
||||
left: false,
|
||||
right: false,
|
||||
},
|
||||
margin: {
|
||||
top: 1,
|
||||
bottom: 1,
|
||||
},
|
||||
padding: {
|
||||
left: 10,
|
||||
right: 10,
|
||||
},
|
||||
},
|
||||
state: {
|
||||
hovered: {},
|
||||
},
|
||||
}),
|
||||
active: interactive({
|
||||
base: {
|
||||
text: text(theme.highest, "mono", "on"),
|
||||
background: background(theme.highest, "on"),
|
||||
corner_radius: 6,
|
||||
border: {
|
||||
...border(theme.highest, "on"),
|
||||
left: false,
|
||||
right: false,
|
||||
},
|
||||
margin: {
|
||||
top: 1,
|
||||
bottom: 1,
|
||||
},
|
||||
padding: {
|
||||
left: 10,
|
||||
right: 10,
|
||||
},
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
...text(theme.highest, "mono", "on", "hovered"),
|
||||
background: background(
|
||||
theme.highest,
|
||||
"on",
|
||||
"hovered"
|
||||
),
|
||||
border: border(theme.highest, "on", "hovered"),
|
||||
},
|
||||
clicked: {
|
||||
...text(theme.highest, "mono", "on", "pressed"),
|
||||
background: background(
|
||||
theme.highest,
|
||||
"on",
|
||||
"pressed"
|
||||
),
|
||||
border: border(theme.highest, "on", "pressed"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
},
|
||||
}),
|
||||
search_bar_row_height: 32,
|
||||
search_row_spacing: 8,
|
||||
option_button_height: 22,
|
||||
modes_container: {},
|
||||
...search_results(),
|
||||
}
|
||||
}
|
||||
|
||||
@@ -28,16 +28,18 @@ export default function status_bar(): any {
|
||||
right: 6,
|
||||
},
|
||||
border: border(layer, { top: true, overlay: true }),
|
||||
cursor_position: text(layer, "sans", "variant", { size: "xs" }),
|
||||
cursor_position: text(layer, "sans", "base", { size: "xs" }),
|
||||
vim_mode_indicator: {
|
||||
margin: { left: 6 },
|
||||
...text(layer, "mono", "variant", { size: "xs" }),
|
||||
...text(layer, "mono", "base", { size: "xs" }),
|
||||
},
|
||||
active_language: text_button({
|
||||
color: "variant"
|
||||
color: "base",
|
||||
}),
|
||||
auto_update_progress_message: text(layer, "sans", "variant", { size: "xs" }),
|
||||
auto_update_done_message: text(layer, "sans", "variant", { size: "xs" }),
|
||||
auto_update_progress_message: text(layer, "sans", "base", {
|
||||
size: "xs",
|
||||
}),
|
||||
auto_update_done_message: text(layer, "sans", "base", { size: "xs" }),
|
||||
lsp_status: interactive({
|
||||
base: {
|
||||
...diagnostic_status_container,
|
||||
@@ -64,43 +66,45 @@ export default function status_bar(): any {
|
||||
diagnostic_summary: interactive({
|
||||
base: {
|
||||
height: 20,
|
||||
icon_width: 16,
|
||||
icon_width: 14,
|
||||
icon_spacing: 2,
|
||||
summary_spacing: 6,
|
||||
text: text(layer, "sans", { size: "sm" }),
|
||||
icon_color_ok: foreground(layer, "variant"),
|
||||
icon_color_ok: foreground(layer, "base"),
|
||||
icon_color_warning: foreground(layer, "warning"),
|
||||
icon_color_error: foreground(layer, "negative"),
|
||||
container_ok: {
|
||||
corner_radius: 6,
|
||||
padding: { top: 3, bottom: 3, left: 7, right: 7 },
|
||||
},
|
||||
container_warning: {
|
||||
...diagnostic_status_container,
|
||||
background: background(layer, "warning"),
|
||||
border: border(layer, "warning"),
|
||||
},
|
||||
container_error: {
|
||||
...diagnostic_status_container,
|
||||
background: background(layer, "negative"),
|
||||
border: border(layer, "negative"),
|
||||
padding: { top: 2, bottom: 2, left: 6, right: 6 },
|
||||
},
|
||||
container_warning: diagnostic_status_container,
|
||||
container_error: diagnostic_status_container
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
icon_color_ok: foreground(layer, "on"),
|
||||
container_ok: {
|
||||
background: background(layer, "on", "hovered"),
|
||||
background: background(layer, "hovered")
|
||||
},
|
||||
container_warning: {
|
||||
background: background(layer, "warning", "hovered"),
|
||||
border: border(layer, "warning", "hovered"),
|
||||
background: background(layer, "hovered")
|
||||
},
|
||||
container_error: {
|
||||
background: background(layer, "negative", "hovered"),
|
||||
border: border(layer, "negative", "hovered"),
|
||||
background: background(layer, "hovered")
|
||||
},
|
||||
},
|
||||
clicked: {
|
||||
icon_color_ok: foreground(layer, "on"),
|
||||
container_ok: {
|
||||
background: background(layer, "pressed")
|
||||
},
|
||||
container_warning: {
|
||||
background: background(layer, "pressed")
|
||||
},
|
||||
container_error: {
|
||||
background: background(layer, "pressed")
|
||||
}
|
||||
}
|
||||
},
|
||||
}),
|
||||
panel_buttons: {
|
||||
@@ -111,8 +115,9 @@ export default function status_bar(): any {
|
||||
base: interactive({
|
||||
base: {
|
||||
...status_container,
|
||||
icon_size: 16,
|
||||
icon_color: foreground(layer, "variant"),
|
||||
icon_size: 14,
|
||||
icon_color: foreground(layer, "base"),
|
||||
background: background(layer, "default"),
|
||||
label: {
|
||||
margin: { left: 6 },
|
||||
...text(layer, "sans", { size: "xs" }),
|
||||
@@ -120,23 +125,25 @@ export default function status_bar(): any {
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
icon_color: foreground(layer, "hovered"),
|
||||
background: background(layer, "variant"),
|
||||
background: background(layer, "hovered"),
|
||||
},
|
||||
clicked: {
|
||||
background: background(layer, "pressed"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
state: {
|
||||
active: {
|
||||
default: {
|
||||
icon_color: foreground(layer, "active"),
|
||||
background: background(layer, "active"),
|
||||
icon_color: foreground(layer, "accent", "default"),
|
||||
background: background(layer, "default"),
|
||||
},
|
||||
hovered: {
|
||||
icon_color: foreground(layer, "hovered"),
|
||||
icon_color: foreground(layer, "accent", "hovered"),
|
||||
background: background(layer, "hovered"),
|
||||
},
|
||||
clicked: {
|
||||
icon_color: foreground(layer, "pressed"),
|
||||
icon_color: foreground(layer, "accent", "pressed"),
|
||||
background: background(layer, "pressed"),
|
||||
},
|
||||
},
|
||||
|
||||
@@ -84,6 +84,27 @@ export default function tab_bar(): any {
|
||||
bottom: false,
|
||||
},
|
||||
}
|
||||
const nav_button = interactive({
|
||||
base: {
|
||||
color: foreground(theme.highest, "on"),
|
||||
icon_width: 12,
|
||||
|
||||
button_width: active_pane_active_tab.height,
|
||||
border: border(theme.lowest, "on", {
|
||||
bottom: true,
|
||||
overlay: true,
|
||||
}),
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
color: foreground(theme.highest, "on", "hovered"),
|
||||
background: background(theme.highest, "on", "hovered"),
|
||||
},
|
||||
disabled: {
|
||||
color: foreground(theme.highest, "on", "disabled"),
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
const dragged_tab = {
|
||||
...active_pane_active_tab,
|
||||
@@ -141,5 +162,6 @@ export default function tab_bar(): any {
|
||||
right: false,
|
||||
},
|
||||
},
|
||||
nav_button: nav_button,
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,8 +1,6 @@
|
||||
import { icon_button, toggleable_icon_button } from "../component/icon_button"
|
||||
import { toggleable_text_button } from "../component/text_button"
|
||||
import { icon_button, toggleable_icon_button, toggleable_text_button } from "../component"
|
||||
import { interactive, toggleable } from "../element"
|
||||
import { useTheme } from "../theme"
|
||||
import { with_opacity } from "../theme/color"
|
||||
import { useTheme, with_opacity } from "../theme"
|
||||
import { background, border, foreground, text } from "./components"
|
||||
|
||||
const ITEM_SPACING = 8
|
||||
@@ -34,16 +32,17 @@ function call_controls() {
|
||||
}
|
||||
|
||||
return {
|
||||
toggle_microphone_button: toggleable_icon_button(theme, {
|
||||
toggle_microphone_button: toggleable_icon_button({
|
||||
margin: {
|
||||
...margin_y,
|
||||
left: space.group,
|
||||
right: space.half_item,
|
||||
},
|
||||
active_color: "negative",
|
||||
active_background_color: "negative",
|
||||
}),
|
||||
|
||||
toggle_speakers_button: toggleable_icon_button(theme, {
|
||||
toggle_speakers_button: toggleable_icon_button({
|
||||
margin: {
|
||||
...margin_y,
|
||||
left: space.half_item,
|
||||
@@ -51,13 +50,14 @@ function call_controls() {
|
||||
},
|
||||
}),
|
||||
|
||||
screen_share_button: toggleable_icon_button(theme, {
|
||||
screen_share_button: toggleable_icon_button({
|
||||
margin: {
|
||||
...margin_y,
|
||||
left: space.half_item,
|
||||
right: space.group,
|
||||
},
|
||||
active_color: "accent",
|
||||
active_background_color: "accent",
|
||||
}),
|
||||
|
||||
muted: foreground(theme.lowest, "negative"),
|
||||
@@ -178,15 +178,17 @@ export function titlebar(): any {
|
||||
left: 80,
|
||||
right: 0,
|
||||
},
|
||||
|
||||
// Project
|
||||
project_name_divider: text(theme.lowest, "sans", "variant"),
|
||||
menu: {
|
||||
width: 300,
|
||||
height: 400,
|
||||
},
|
||||
|
||||
project_menu_button: toggleable_text_button(theme, {
|
||||
color: 'base',
|
||||
color: "base"
|
||||
}),
|
||||
|
||||
git_menu_button: toggleable_text_button(theme, {
|
||||
color: 'variant',
|
||||
color: "variant",
|
||||
}),
|
||||
|
||||
// Collaborators
|
||||
@@ -259,7 +261,7 @@ export function titlebar(): any {
|
||||
|
||||
...call_controls(),
|
||||
|
||||
toggle_contacts_button: toggleable_icon_button(theme, {
|
||||
toggle_contacts_button: toggleable_icon_button({
|
||||
margin: {
|
||||
left: ITEM_SPACING,
|
||||
},
|
||||
|
||||
@@ -0,0 +1,38 @@
|
||||
import { useTheme } from "../common"
|
||||
import { toggleable_icon_button } from "../component/icon_button"
|
||||
import { interactive } from "../element"
|
||||
import { background, border, foreground, text } from "./components"
|
||||
|
||||
export const toolbar = () => {
|
||||
const theme = useTheme()
|
||||
|
||||
return {
|
||||
height: 32,
|
||||
padding: { left: 4, right: 4, top: 4, bottom: 4 },
|
||||
background: background(theme.highest),
|
||||
border: border(theme.highest, { bottom: true }),
|
||||
item_spacing: 4,
|
||||
toggleable_tool: toggleable_icon_button({
|
||||
margin: { left: 4 },
|
||||
variant: "ghost",
|
||||
active_color: "accent",
|
||||
}),
|
||||
breadcrumb_height: 24,
|
||||
breadcrumbs: interactive({
|
||||
base: {
|
||||
...text(theme.highest, "sans", "variant"),
|
||||
corner_radius: 6,
|
||||
padding: {
|
||||
left: 6,
|
||||
right: 6,
|
||||
},
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
color: foreground(theme.highest, "on", "hovered"),
|
||||
background: background(theme.highest, "on", "hovered"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
}
|
||||
}
|
||||
@@ -12,6 +12,7 @@ import tabBar from "./tab_bar"
|
||||
import { interactive } from "../element"
|
||||
import { titlebar } from "./titlebar"
|
||||
import { useTheme } from "../theme"
|
||||
import { toolbar } from "./toolbar"
|
||||
|
||||
export default function workspace(): any {
|
||||
const theme = useTheme()
|
||||
@@ -127,47 +128,7 @@ export default function workspace(): any {
|
||||
},
|
||||
status_bar: statusBar(),
|
||||
titlebar: titlebar(),
|
||||
toolbar: {
|
||||
height: 34,
|
||||
background: background(theme.highest),
|
||||
border: border(theme.highest, { bottom: true }),
|
||||
item_spacing: 8,
|
||||
nav_button: interactive({
|
||||
base: {
|
||||
color: foreground(theme.highest, "on"),
|
||||
icon_width: 12,
|
||||
button_width: 24,
|
||||
corner_radius: 6,
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
color: foreground(theme.highest, "on", "hovered"),
|
||||
background: background(theme.highest, "on", "hovered"),
|
||||
},
|
||||
disabled: {
|
||||
color: foreground(theme.highest, "on", "disabled"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
padding: { left: 8, right: 8, top: 4, bottom: 4 },
|
||||
},
|
||||
breadcrumb_height: 24,
|
||||
breadcrumbs: interactive({
|
||||
base: {
|
||||
...text(theme.highest, "sans", "variant"),
|
||||
corner_radius: 6,
|
||||
padding: {
|
||||
left: 6,
|
||||
right: 6,
|
||||
},
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
color: foreground(theme.highest, "on", "hovered"),
|
||||
background: background(theme.highest, "on", "hovered"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
toolbar: toolbar(),
|
||||
disconnected_overlay: {
|
||||
...text(theme.lowest, "sans"),
|
||||
background: with_opacity(background(theme.lowest), 0.8),
|
||||
|
||||
Reference in New Issue
Block a user