mirror of
https://github.com/zed-industries/zed.git
synced 2024-12-29 08:02:12 +03:00
Update share, call control buttons
This commit is contained in:
Nate Butler
parent
5af33407f0
commit
b4f9faee3b
@ -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 }),
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
74
styles/src/component/text_button.ts
Normal file
74
styles/src/component/text_button.ts
Normal 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 }),
|
||||
}
|
||||
})
|
||||
}
|
||||
@ -13,7 +13,8 @@ import statusBar from "./statusBar"
|
||||
import tabBar from "./tabBar"
|
||||
import { interactive } from "../element"
|
||||
import merge from "ts-deepmerge"
|
||||
import { icon_button } from "../component/icon_button"
|
||||
import { icon_button, toggleable_icon_button } from "../component/icon_button"
|
||||
import { text_button, toggleable_text_button } from "../component/text_button"
|
||||
export default function workspace(colorScheme: ColorScheme) {
|
||||
const layer = colorScheme.lowest
|
||||
const isLight = colorScheme.isLight
|
||||
@ -298,137 +299,45 @@ export default function workspace(colorScheme: ColorScheme) {
|
||||
},
|
||||
cornerRadius: 6,
|
||||
},
|
||||
callControl: interactive({
|
||||
base: {
|
||||
cornerRadius: 6,
|
||||
color: foreground(layer, "variant"),
|
||||
iconWidth: 12,
|
||||
buttonWidth: 20,
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
background: background(layer, "variant", "hovered"),
|
||||
color: foreground(layer, "variant", "hovered"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
toggleContactsButton: toggleable({
|
||||
base: interactive({
|
||||
base: {
|
||||
margin: { left: itemSpacing },
|
||||
cornerRadius: 6,
|
||||
color: foreground(layer, "variant"),
|
||||
iconWidth: 14,
|
||||
buttonWidth: 20,
|
||||
},
|
||||
state: {
|
||||
clicked: {
|
||||
background: background(layer, "variant", "pressed"),
|
||||
},
|
||||
hovered: {
|
||||
background: background(layer, "variant", "hovered"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
state: {
|
||||
active: {
|
||||
default: {
|
||||
background: background(layer, "on", "default"),
|
||||
},
|
||||
hovered: {
|
||||
background: background(layer, "on", "hovered"),
|
||||
},
|
||||
clicked: {
|
||||
background: background(layer, "on", "pressed"),
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
toggleMicrophoneButton: toggleable({
|
||||
base: interactive({
|
||||
base: {
|
||||
margin: { left: itemSpacing },
|
||||
cornerRadius: 6,
|
||||
color: foreground(layer, "variant"),
|
||||
iconWidth: 14,
|
||||
buttonWidth: 20,
|
||||
},
|
||||
state: {
|
||||
clicked: {
|
||||
background: background(layer, "variant", "pressed"),
|
||||
},
|
||||
hovered: {
|
||||
background: background(layer, "variant", "hovered"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
state: {
|
||||
active: {
|
||||
default: {
|
||||
background: background(layer, "on", "default"),
|
||||
},
|
||||
hovered: {
|
||||
background: background(layer, "on", "hovered"),
|
||||
},
|
||||
clicked: {
|
||||
background: background(layer, "on", "pressed"),
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
toggleSpeakersButton: toggleable({
|
||||
base: interactive({
|
||||
base: {
|
||||
margin: { left: itemSpacing },
|
||||
cornerRadius: 6,
|
||||
color: foreground(layer, "variant"),
|
||||
iconWidth: 14,
|
||||
buttonWidth: 20,
|
||||
},
|
||||
state: {
|
||||
clicked: {
|
||||
background: background(layer, "variant", "pressed"),
|
||||
},
|
||||
hovered: {
|
||||
background: background(layer, "variant", "hovered"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
state: {
|
||||
active: {
|
||||
default: {
|
||||
background: background(layer, "on", "default"),
|
||||
},
|
||||
hovered: {
|
||||
background: background(layer, "on", "hovered"),
|
||||
},
|
||||
clicked: {
|
||||
background: background(layer, "on", "pressed"),
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
call_control: icon_button(colorScheme, {
|
||||
margin: { left: itemSpacing / 2 },
|
||||
}),
|
||||
|
||||
leaveCallButton: icon_button(colorScheme, {
|
||||
toggle_contacts_button: toggleable_icon_button(colorScheme, {
|
||||
margin: { left: itemSpacing }
|
||||
}),
|
||||
|
||||
toggle_microphone_button: toggleable_icon_button(colorScheme, {
|
||||
margin: { left: itemSpacing },
|
||||
active_color: 'negative'
|
||||
}),
|
||||
|
||||
toggle_speakers_button: toggleable_icon_button(colorScheme, {
|
||||
margin: { left: itemSpacing / 2 },
|
||||
}),
|
||||
|
||||
leave_call_button: icon_button(colorScheme, {
|
||||
margin: { left: itemSpacing },
|
||||
}),
|
||||
|
||||
userMenuButton: merge(titlebarButton, {
|
||||
inactive: {
|
||||
default: {
|
||||
buttonWidth: 20,
|
||||
iconWidth: 12,
|
||||
user_menu_button:
|
||||
merge(titlebarButton, {
|
||||
inactive: {
|
||||
default: {
|
||||
buttonWidth: 20,
|
||||
iconWidth: 12,
|
||||
},
|
||||
},
|
||||
},
|
||||
active: {
|
||||
default: {
|
||||
iconWidth: 12,
|
||||
button_width: 20,
|
||||
background: background(layer, "variant", "active"),
|
||||
color: foreground(layer, "variant", "active"),
|
||||
}
|
||||
},
|
||||
}),
|
||||
active: {
|
||||
default: {
|
||||
iconWidth: 12,
|
||||
button_width: 20,
|
||||
background: background(layer, "variant", "active"),
|
||||
color: foreground(layer, "variant", "active"),
|
||||
}
|
||||
},
|
||||
}),
|
||||
|
||||
toggleContactsBadge: {
|
||||
cornerRadius: 3,
|
||||
@ -437,9 +346,7 @@ export default function workspace(colorScheme: ColorScheme) {
|
||||
border: border(layer),
|
||||
background: foreground(layer, "accent"),
|
||||
},
|
||||
shareButton: {
|
||||
...titlebarButton,
|
||||
},
|
||||
shareButton: toggleable_text_button(colorScheme, {}),
|
||||
},
|
||||
|
||||
toolbar: {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user