Use `icon_button` for leave call

Nate Butler created 2 years ago

Change summary

styles/src/component/icon_button.ts | 54 +++++++++++++++++++++++++++++++
styles/src/element/index.ts         |  4 +-
styles/src/element/interactive.ts   |  2 
styles/src/styleTree/titlebar.ts    |  4 +
styles/src/styleTree/workspace.ts   | 22 ++---------
5 files changed, 65 insertions(+), 21 deletions(-)

Detailed changes

styles/src/component/icon_button.ts

@@ -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"),
+
+            },
+        },
+    });
+}

styles/src/element/index.ts

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

styles/src/element/interactive.ts

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

styles/src/styleTree/titlebar.ts

@@ -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
         },

styles/src/styleTree/workspace.ts

@@ -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, {