oak-team/oak-gpui
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update share, call control buttons

Browse Source
This commit is contained in:
Nate Butler
2023-06-27 12:24:19 -04:00
parent 5af33407f0
commit b4f9faee3b
3 changed files with 134 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files
styles/src/component/icon_button.ts
+24 -9
View File
@@ -1,14 +1,17 @@
import { ColorScheme } from "../common";
import { interactive } from "../element";
import { interactive, toggleable } from "../element";
import { background, foreground } from "../styleTree/components";
import { Margin } from "../types/zed";
interface IconButtonOptions {
layer?: ColorScheme['lowest'] | ColorScheme['middle'] | ColorScheme['highest'];
color?: keyof ColorScheme['lowest'];
margin?: Partial<Margin>;
}
export function icon_button(theme: ColorScheme, { color, margin }: IconButtonOptions) {
type ToggleableIconButtonOptions = IconButtonOptions & { active_color?: keyof ColorScheme['lowest'] };
export function icon_button(theme: ColorScheme, { color, margin, layer }: IconButtonOptions) {
if (!color)
color = "base";
@@ -21,7 +24,7 @@ export function icon_button(theme: ColorScheme, { color, margin }: IconButtonOpt
return interactive({
base: {
corner_radius: 4,
corner_radius: 6,
padding: {
top: 2,
bottom: 2,
@@ -36,19 +39,31 @@ export function icon_button(theme: ColorScheme, { color, margin }: IconButtonOpt
},
state: {
default: {
background: background(theme.lowest, color),
color: foreground(theme.lowest, color),
background: background(layer ?? theme.lowest, color),
color: foreground(layer ?? theme.lowest, color),
},
hovered: {
background: background(theme.lowest, color, "hovered"),
color: foreground(theme.lowest, color, "hovered"),
background: background(layer ?? theme.lowest, color, "hovered"),
color: foreground(layer ?? theme.lowest, color, "hovered"),
},
clicked: {
background: background(theme.lowest, color, "pressed"),
color: foreground(theme.lowest, color, "pressed"),
background: background(layer ?? theme.lowest, color, "pressed"),
color: foreground(layer ?? theme.lowest, color, "pressed"),
},
},
});
}
export function toggleable_icon_button(theme: ColorScheme, { color, active_color, margin }: ToggleableIconButtonOptions) {
if (!color)
color = "base";
return toggleable({
state: {
inactive: icon_button(theme, { color, margin }),
active: icon_button(theme, { color: active_color ? active_color : color, margin, layer: theme.middle }),
}
})
}
styles/src/component/text_button.ts
+74
View File
@@ -0,0 +1,74 @@
import { ColorScheme } from "../common";
import { interactive, toggleable } from "../element";
import { TextProperties, background, foreground, text } from "../styleTree/components";
import { Margin } from "../types/zed";
interface TextButtonOptions {
layer?: ColorScheme['lowest'] | ColorScheme['middle'] | ColorScheme['highest'];
color?: keyof ColorScheme['lowest'];
margin?: Partial<Margin>;
text_properties?: TextProperties;
}
type ToggleableTextButtonOptions = TextButtonOptions & { active_color?: keyof ColorScheme['lowest'] };
export function text_button(theme: ColorScheme, { color, layer, margin, text_properties }: TextButtonOptions) {
if (!color)
color = "base";
const text_options: TextProperties = {
size: "xs",
weight: "normal",
...text_properties
}
const m = {
top: margin?.top ?? 0,
bottom: margin?.bottom ?? 0,
left: margin?.left ?? 0,
right: margin?.right ?? 0,
}
return interactive({
base: {
corner_radius: 6,
padding: {
top: 1,
bottom: 1,
left: 6,
right: 6,
},
margin: m,
button_height: 22,
...text(layer ?? theme.lowest, "sans", color, text_options)
},
state: {
default: {
background: background(layer ?? theme.lowest, color),
color: foreground(layer ?? theme.lowest, color),
},
hovered: {
background: background(layer ?? theme.lowest, color, "hovered"),
color: foreground(layer ?? theme.lowest, color, "hovered"),
},
clicked: {
background: background(layer ?? theme.lowest, color, "pressed"),
color: foreground(layer ?? theme.lowest, color, "pressed"),
},
},
});
}
export function toggleable_text_button(theme: ColorScheme, { color, active_color, margin }: ToggleableTextButtonOptions) {
if (!color)
color = "base";
return toggleable({
state: {
inactive: text_button(theme, { color, margin }),
active: text_button(theme, { color: active_color ? active_color : color, margin, layer: theme.middle }),
}
})
}