From 7b5974e8e9f0ef912cafce81ce87a59aa7351137 Mon Sep 17 00:00:00 2001 From: Kirill Bulatov Date: Wed, 30 Aug 2023 13:04:25 +0300 Subject: [PATCH 1/2] Add LSP logs clear button --- crates/language_tools/src/lsp_log.rs | 52 ++++++++++++++++++++++++---- crates/theme/src/theme.rs | 1 + styles/src/style_tree/toolbar.ts | 9 ++++- styles/src/style_tree/workspace.ts | 2 ++ 4 files changed, 56 insertions(+), 8 deletions(-) diff --git a/crates/language_tools/src/lsp_log.rs b/crates/language_tools/src/lsp_log.rs index 60c4e41666bc4a05e5a1f08bb9ae74f80984c702..3275b3ee0113e0c5ec6780a9fda6ed3bd631c720 100644 --- a/crates/language_tools/src/lsp_log.rs +++ b/crates/language_tools/src/lsp_log.rs @@ -570,10 +570,12 @@ impl View for LspLogToolbarItemView { let Some(log_view) = self.log_view.as_ref() else { return Empty::new().into_any(); }; - let log_view = log_view.read(cx); - let menu_rows = log_view.menu_items(cx).unwrap_or_default(); + let (menu_rows, current_server_id) = log_view.update(cx, |log_view, cx| { + let menu_rows = log_view.menu_items(cx).unwrap_or_default(); + let current_server_id = log_view.current_server_id; + (menu_rows, current_server_id) + }); - let current_server_id = log_view.current_server_id; let current_server = current_server_id.and_then(|current_server_id| { if let Ok(ix) = menu_rows.binary_search_by_key(¤t_server_id, |e| e.server_id) { Some(menu_rows[ix].clone()) @@ -583,8 +585,7 @@ impl View for LspLogToolbarItemView { }); enum Menu {} - - Stack::new() + let lsp_menu = Stack::new() .with_child(Self::render_language_server_menu_header( current_server, &theme, @@ -631,8 +632,45 @@ impl View for LspLogToolbarItemView { }) .aligned() .left() - .clipped() - .into_any() + .clipped(); + + enum LspCleanupButton {} + let log_cleanup_button = + MouseEventHandler::new::(1, cx, |state, cx| { + let theme = theme::current(cx).clone(); + let style = theme + .workspace + .toolbar + .toggleable_text_tool + .active_state() + .style_for(state); + Label::new("Clear", style.text.clone()) + .aligned() + .contained() + .with_style(style.container) + }) + .on_click(MouseButton::Left, move |_, this, cx| { + if let Some(log_view) = this.log_view.as_ref() { + log_view.update(cx, |log_view, cx| { + log_view.editor.update(cx, |editor, cx| { + editor.set_read_only(false); + editor.clear(cx); + editor.set_read_only(true); + }); + }) + } + }) + .with_cursor_style(CursorStyle::PointingHand) + .aligned() + .right(); + + Flex::row() + .with_child(lsp_menu) + .with_child(log_cleanup_button) + .contained() + .aligned() + .left() + .into_any_named("lsp log controls") } } diff --git a/crates/theme/src/theme.rs b/crates/theme/src/theme.rs index a51f18c4dbea004645a443bf57c523f47da0b75b..a54224978841ba6568e2008c5aacb6a36010f9aa 100644 --- a/crates/theme/src/theme.rs +++ b/crates/theme/src/theme.rs @@ -408,6 +408,7 @@ pub struct Toolbar { pub height: f32, pub item_spacing: f32, pub toggleable_tool: Toggleable>, + pub toggleable_text_tool: Toggleable>, pub breadcrumb_height: f32, pub breadcrumbs: Interactive, } diff --git a/styles/src/style_tree/toolbar.ts b/styles/src/style_tree/toolbar.ts index 7292a220a838ae441e6520e806408f6b3ad69d59..0145ee2785cdc020441d310fecef6201de9e83cf 100644 --- a/styles/src/style_tree/toolbar.ts +++ b/styles/src/style_tree/toolbar.ts @@ -1,7 +1,8 @@ import { useTheme } from "../common" import { toggleable_icon_button } from "../component/icon_button" -import { interactive } from "../element" +import { interactive, toggleable } from "../element" import { background, border, foreground, text } from "./components" +import { text_button } from "../component"; export const toolbar = () => { const theme = useTheme() @@ -34,5 +35,11 @@ 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" } }) + } + }), } } diff --git a/styles/src/style_tree/workspace.ts b/styles/src/style_tree/workspace.ts index ba89c7b05ffe12e617c0570ef458c18f6a99d286..8fda5e0117e2a98f26fc14d85f65ea9c090aac31 100644 --- a/styles/src/style_tree/workspace.ts +++ b/styles/src/style_tree/workspace.ts @@ -19,6 +19,8 @@ export default function workspace(): any { const { is_light } = theme + const TOOLBAR_ITEM_SPACING = 8; + return { background: background(theme.lowest), blank_pane: { From fe2300fdaa59f12df58736f0f4cf61db2b8ee8c3 Mon Sep 17 00:00:00 2001 From: Kirill Bulatov Date: Wed, 30 Aug 2023 14:49:33 +0300 Subject: [PATCH 2/2] Style the clear button better, add border to button constructor options --- 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(-) diff --git a/crates/language_tools/src/lsp_log.rs b/crates/language_tools/src/lsp_log.rs index 3275b3ee0113e0c5ec6780a9fda6ed3bd631c720..a918e3d151aaa8e6f53bde31350e554550cf783f 100644 --- a/crates/language_tools/src/lsp_log.rs +++ b/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() { diff --git a/styles/src/component/text_button.ts b/styles/src/component/text_button.ts index 8333d9e81a9188b0752f0fde433c9346e7b6e341..0e293e403ae4766bc188d78a91782521c3f866ac 100644 --- a/styles/src/component/text_button.ts +++ b/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 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, diff --git a/styles/src/style_tree/toolbar.ts b/styles/src/style_tree/toolbar.ts index 0145ee2785cdc020441d310fecef6201de9e83cf..01a09a0616d49f45bad7d75d9e61743226bb8c7c 100644 --- a/styles/src/style_tree/toolbar.ts +++ b/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), + }), } }), } diff --git a/styles/src/style_tree/workspace.ts b/styles/src/style_tree/workspace.ts index 8fda5e0117e2a98f26fc14d85f65ea9c090aac31..ba89c7b05ffe12e617c0570ef458c18f6a99d286 100644 --- a/styles/src/style_tree/workspace.ts +++ b/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: {