mirrors/zed
1
0
Fork 0
mirror of https://github.com/zed-industries/zed.git synced 2025-02-11 21:00:35 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 9

Extract assistant tool buttons into tab_bar_button

Browse source
This commit is contained in:
Nate Butler 2023-06-29 18:13:31 -04:00
parent 77b120323b
commit 530561e4eb
2 changed files with 65 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

55
styles/src/component/tab_bar_button.ts Normal file
View file

@ -0,0 +1,55 @@
import { ColorScheme, StyleSets } from "../common"
import { interactive } from "../element"
import { InteractiveState } from "../element/interactive"
import { background, foreground } from "../style_tree/components"
interface TabBarButtonOptions {
icon: string
color?: StyleSets
}
type TabBarButtonProps = TabBarButtonOptions & {
state?: Partial<Record<InteractiveState, Partial<TabBarButtonOptions>>>
}
export function tab_bar_button(theme: ColorScheme, { icon, color = "base" }: TabBarButtonProps) {
const button_spacing = 8
return (
interactive({
base: {
icon: {
color: foreground(theme.middle, color),
asset: icon,
dimensions: {
width: 15,
height: 15,
},
},
container: {
corner_radius: 4,
padding: {
top: 4, bottom: 4, left: 4, right: 4
},
margin: {
left: button_spacing / 2,
right: button_spacing / 2,
},
},
},
state: {
hovered: {
container: {
background: background(theme.middle, color, "hovered"),
}
},
clicked: {
container: {
background: background(theme.middle, color, "pressed"),
}
},
},
})
)
}

47
styles/src/style_tree/assistant.ts
View file

@ -1,6 +1,7 @@
import { ColorScheme, StyleSets } from "../theme/color_scheme"
import { text, border, background, foreground, TextStyle } from "./components"
import { Interactive, interactive } from "../element"
import { tab_bar_button } from "../component/tab_bar_button"
interface ToolbarButtonOptions {
icon: string
@ -23,34 +24,6 @@ type RemainingTokens = TextStyle & {
}
export default function assistant(theme: ColorScheme): any {
const TOOLBAR_SPACING = 8
const toolbar_button = ({ icon }: ToolbarButtonOptions) => {
return (
interactive({
base: {
icon: {
color: foreground(theme.highest, "variant"),
asset: icon,
dimensions: {
width: 15,
height: 15,
},
},
container: {
padding: { left: TOOLBAR_SPACING, right: TOOLBAR_SPACING },
},
},
state: {
hovered: {
icon: {
color: foreground(theme.highest, "hovered"),
},
},
},
})
)
}
const interactive_role = (color: StyleSets): Interactive<RoleCycleButton> => {
return (
@ -93,26 +66,26 @@ export default function assistant(theme: ColorScheme): any {
margin: { bottom: 4, top: 4 },
background: background(theme.highest),
},
hamburger_button: toolbar_button({
hamburger_button: tab_bar_button(theme, {
icon: "icons/hamburger_15.svg",
}),
split_button: toolbar_button({
split_button: tab_bar_button(theme, {
icon: "icons/split_message_15.svg",
}),
quote_button: toolbar_button({
quote_button: tab_bar_button(theme, {
icon: "icons/radix/quote.svg",
}),
assist_button: toolbar_button({
assist_button: tab_bar_button(theme, {
icon: "icons/radix/magic-wand.svg",
}),
zoom_in_button: toolbar_button({
zoom_in_button: tab_bar_button(theme, {
icon: "icons/radix/enter-full-screen.svg",
}),
zoom_out_button: toolbar_button({
zoom_out_button: tab_bar_button(theme, {
icon: "icons/radix/exit-full-screen.svg",
}),
plus_button: toolbar_button({
plus_button: tab_bar_button(theme, {
icon: "icons/radix/plus.svg",
}),
title: {
@ -158,7 +131,7 @@ export default function assistant(theme: ColorScheme): any {
background: background(theme.highest),
margin: { left: 12, right: 4, top: 12 },
padding: { right: 4, left: 4, top: 1, bottom: 1 },
corner_radius: 6,
corner_radius: 4,
...text(theme.highest, "sans", "default", { size: "xs" }),
},
state: {
@ -178,7 +151,7 @@ export default function assistant(theme: ColorScheme): any {
},
api_key_editor: {
background: background(theme.highest, "on"),
corner_radius: 6,
corner_radius: 4,
text: text(theme.highest, "mono", "on"),
placeholder_text: text(theme.highest, "mono", "on", "disabled", {
size: "xs",