Style the clear button better, add border to button constructor options

Kirill Bulatov created 2 years ago

Change summary

crates/language_tools/src/lsp_log.rs |  5 ++++-
styles/src/component/text_button.ts  |  6 ++++++
styles/src/style_tree/toolbar.ts     | 17 +++++++++++++++--
styles/src/style_tree/workspace.ts   |  2 --
4 files changed, 25 insertions(+), 5 deletions(-)

Detailed changes

crates/language_tools/src/lsp_log.rs

@@ -583,6 +583,7 @@ impl View for LspLogToolbarItemView {
                 None
             }
         });
+        let server_selected = current_server.is_some();
 
         enum Menu {}
         let lsp_menu = Stack::new()
@@ -642,12 +643,14 @@ impl View for LspLogToolbarItemView {
                     .workspace
                     .toolbar
                     .toggleable_text_tool
-                    .active_state()
+                    .in_state(server_selected)
                     .style_for(state);
                 Label::new("Clear", style.text.clone())
                     .aligned()
                     .contained()
                     .with_style(style.container)
+                    .constrained()
+                    .with_height(theme.toolbar_dropdown_menu.row_height / 6.0 * 5.0)
             })
             .on_click(MouseButton::Left, move |_, this, cx| {
                 if let Some(log_view) = this.log_view.as_ref() {

styles/src/component/text_button.ts

@@ -1,5 +1,6 @@
 import { interactive, toggleable } from "../element"
 import {
+    Border,
     TextProperties,
     background,
     foreground,
@@ -16,6 +17,7 @@ interface TextButtonOptions {
     margin?: Partial<Margin>
     disabled?: boolean
     text_properties?: TextProperties
+    border?: Border
 }
 
 type ToggleableTextButtonOptions = TextButtonOptions & {
@@ -29,6 +31,7 @@ export function text_button({
     margin,
     disabled,
     text_properties,
+    border,
 }: TextButtonOptions = {}) {
     const theme = useTheme()
     if (!color) color = "base"
@@ -66,6 +69,7 @@ export function text_button({
         },
         state: {
             default: {
+                border,
                 background: background_color,
                 color: disabled
                     ? foreground(layer ?? theme.lowest, "disabled")
@@ -74,6 +78,7 @@ export function text_button({
             hovered: disabled
                 ? {}
                 : {
+                    border,
                     background: background(
                         layer ?? theme.lowest,
                         color,
@@ -88,6 +93,7 @@ export function text_button({
             clicked: disabled
                 ? {}
                 : {
+                    border,
                     background: background(
                         layer ?? theme.lowest,
                         color,

styles/src/style_tree/toolbar.ts

@@ -37,8 +37,21 @@ export const toolbar = () => {
         }),
         toggleable_text_tool: toggleable({
             state: {
-                inactive: text_button({ variant: "ghost", layer: theme.highest, disabled: true, margin: { right: 4 }, text_properties: { size: "sm" } }),
-                active: text_button({ variant: "ghost", layer: theme.highest, margin: { right: 4 }, text_properties: { size: "sm" } })
+                inactive: text_button({
+                    disabled: true,
+                    variant: "ghost",
+                    layer: theme.highest,
+                    margin: { left: 4 },
+                    text_properties: { size: "sm" },
+                    border: border(theme.middle),
+                }),
+                active: text_button({
+                    variant: "ghost",
+                    layer: theme.highest,
+                    margin: { left: 4 },
+                    text_properties: { size: "sm" },
+                    border: border(theme.middle),
+                }),
             }
         }),
     }

styles/src/style_tree/workspace.ts

@@ -19,8 +19,6 @@ export default function workspace(): any {
 
     const { is_light } = theme
 
-    const TOOLBAR_ITEM_SPACING = 8;
-
     return {
         background: background(theme.lowest),
         blank_pane: {