zed-industries/zed
1
1
Fork 0
mirror of https://github.com/zed-industries/zed.git synced 2025-01-03 00:55:39 +03:00
Code Issues Packages Projects Releases Wiki Activity

Use icon_button for leave call

Browse Source
This commit is contained in:
Nate Butler 2023-06-27 11:34:12 -04:00
parent 3104275d87
commit 331800c14d
5 changed files with 65 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
styles/src/component/icon_button.ts Normal file
View File

@ -0,0 +1,54 @@
import { ColorScheme } from "../common";
import { interactive } from "../element";
import { background, foreground } from "../styleTree/components";
import { Margin } from "../types/zed";
interface IconButtonOptions {
color?: keyof ColorScheme['lowest'];
margin?: Partial<Margin>;
}
export function icon_button(theme: ColorScheme, { color, margin }: IconButtonOptions) {
if (!color)
color = "base";
const m = {
top: margin?.top ?? 0,
bottom: margin?.bottom ?? 0,
left: margin?.left ?? 0,
right: margin?.right ?? 0,
}
return interactive({
base: {
corner_radius: 4,
padding: {
top: 2,
bottom: 2,
left: 4,
right: 4,
},
margin: m,
icon_width: 15,
icon_height: 15,
button_width: 23,
button_height: 19,
},
state: {
default: {
background: background(theme.lowest, color),
color: foreground(theme.lowest, color),
},
hovered: {
background: background(theme.lowest, color, "hovered"),
color: foreground(theme.lowest, color, "hovered"),
},
clicked: {
background: background(theme.lowest, color, "pressed"),
color: foreground(theme.lowest, color, "pressed"),
},
},
});
}

4
styles/src/element/index.ts
View File

@ -1,4 +1,4 @@
import { interactive } from "./interactive"
import { interactive, Interactive } from "./interactive"
import { toggleable } from "./toggle"
export { interactive, toggleable }
export { interactive, Interactive, toggleable }

2
styles/src/element/interactive.ts
View File

@ -8,7 +8,7 @@ type InteractiveState =
| "selected"
| "disabled"
type Interactive<T> = {
export type Interactive<T> = {
default: T
hovered?: T
clicked?: T

4
styles/src/styleTree/titlebar.ts
View File

@ -58,11 +58,13 @@ const titlebarButton = (theme: ColorScheme) => toggleable({
*/
function userMenuButton(theme: ColorScheme) {
return {
userMenu: titlebarButton(theme),
user_menu: titlebarButton(theme),
avatar: {
icon_width: 16,
icon_height: 16,
cornerRadius: 4,
outer_corner_radius: 0,
outer_width: 0,
outerWidth: 10,
outerCornerRadius: 10
},

22
styles/src/styleTree/workspace.ts
View File

@ -13,6 +13,7 @@ import statusBar from "./statusBar"
import tabBar from "./tabBar"
import { interactive } from "../element"
import merge from "ts-deepmerge"
import { icon_button } from "../component/icon_button"
export default function workspace(colorScheme: ColorScheme) {
const layer = colorScheme.lowest
const isLight = colorScheme.isLight
@ -252,7 +253,7 @@ export default function workspace(colorScheme: ColorScheme) {
},
avatarRibbon: {
height: 3,
width: 12,
width: 11,
// TODO: Chore: Make avatarRibbon colors driven by the theme rather than being hard coded.
},
@ -407,22 +408,9 @@ export default function workspace(colorScheme: ColorScheme) {
},
},
}),
leaveCallButton: 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"),
},
},
leaveCallButton: icon_button(colorScheme, {
margin: { left: itemSpacing },
}),
userMenuButton: merge(titlebarButton, {