From c2d6d2495267f4ba78a04e41c38e1dfb095b1f72 Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Thu, 16 Nov 2023 16:01:42 -0500 Subject: [PATCH 1/4] Ensure the titlebar stays large enough even with small ui sizes --- crates/collab_ui2/src/collab_titlebar_item.rs | 20 ++++++++++++------- 1 file changed, 13 insertions(+), 7 deletions(-) diff --git a/crates/collab_ui2/src/collab_titlebar_item.rs b/crates/collab_ui2/src/collab_titlebar_item.rs index c9d16c7a5d..ca5118cd8d 100644 --- a/crates/collab_ui2/src/collab_titlebar_item.rs +++ b/crates/collab_ui2/src/collab_titlebar_item.rs @@ -31,9 +31,9 @@ use std::sync::Arc; use call::ActiveCall; use client::{Client, UserStore}; use gpui::{ - div, rems, AppContext, Component, Div, InteractiveComponent, Model, ParentComponent, Render, - Stateful, StatefulInteractiveComponent, Styled, Subscription, ViewContext, VisualContext, - WeakView, WindowBounds, + div, px, rems, AppContext, Component, Div, InteractiveComponent, Model, ParentComponent, + Render, Stateful, StatefulInteractiveComponent, Styled, Subscription, ViewContext, + VisualContext, WeakView, WindowBounds, }; use project::Project; use theme::ActiveTheme; @@ -88,12 +88,17 @@ impl Render for CollabTitlebarItem { h_stack() .id("titlebar") .justify_between() - .when( - !matches!(cx.window_bounds(), WindowBounds::Fullscreen), - |s| s.pl_20(), - ) .w_full() .h(rems(1.75)) + // Set a non-scaling min-height here to ensure the titlebar is + // always at least the height of the traffic lights. + .min_h(px(32.)) + .when( + !matches!(cx.window_bounds(), WindowBounds::Fullscreen), + // Use pixels here instead of a rem-based size because the macOS traffic + // lights are a static size, and don't scale with the rest of the UI. + |s| s.pl(px(68.)), + ) .bg(cx.theme().colors().title_bar_background) .on_click(|_, event, cx| { if event.up.click_count == 2 { @@ -102,6 +107,7 @@ impl Render for CollabTitlebarItem { }) .child( h_stack() + .gap_1() // TODO - Add player menu .child( div() From 3d8e63b93bef7c0e79d0e389de81d70ddff1849c Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Thu, 16 Nov 2023 16:09:11 -0500 Subject: [PATCH 2/4] Buttons should always use `cursor_pointer` --- crates/ui2/src/components/button.rs | 1 + crates/ui2/src/components/icon_button.rs | 11 +++++------ 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/crates/ui2/src/components/button.rs b/crates/ui2/src/components/button.rs index 397ce4f4c4..de055bcd5c 100644 --- a/crates/ui2/src/components/button.rs +++ b/crates/ui2/src/components/button.rs @@ -178,6 +178,7 @@ impl Button { .text_ui() .rounded_md() .bg(self.variant.bg_color(cx)) + .cursor_pointer() .hover(|style| style.bg(self.variant.bg_color_hover(cx))) .active(|style| style.bg(self.variant.bg_color_active(cx))); diff --git a/crates/ui2/src/components/icon_button.rs b/crates/ui2/src/components/icon_button.rs index 4408c51f62..5dd7771161 100644 --- a/crates/ui2/src/components/icon_button.rs +++ b/crates/ui2/src/components/icon_button.rs @@ -95,17 +95,16 @@ impl IconButton { .rounded_md() .p_1() .bg(bg_color) + .cursor_pointer() .hover(|style| style.bg(bg_hover_color)) .active(|style| style.bg(bg_active_color)) .child(IconElement::new(self.icon).color(icon_color)); if let Some(click_handler) = self.handlers.click.clone() { - button = button - .on_mouse_down(MouseButton::Left, move |state, event, cx| { - cx.stop_propagation(); - click_handler(state, cx); - }) - .cursor_pointer(); + button = button.on_mouse_down(MouseButton::Left, move |state, event, cx| { + cx.stop_propagation(); + click_handler(state, cx); + }) } if let Some(tooltip) = self.tooltip.take() { From 9c5f580012820686c6789e64392760ac1ffb7c72 Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Thu, 16 Nov 2023 16:17:10 -0500 Subject: [PATCH 3/4] Use `Selected` for active IconButtons --- crates/ui2/src/components/icon_button.rs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/crates/ui2/src/components/icon_button.rs b/crates/ui2/src/components/icon_button.rs index 5dd7771161..5512da2b34 100644 --- a/crates/ui2/src/components/icon_button.rs +++ b/crates/ui2/src/components/icon_button.rs @@ -72,7 +72,7 @@ impl IconButton { fn render(mut self, _view: &mut V, cx: &mut ViewContext) -> impl Component { let icon_color = match (self.state, self.color) { (InteractionState::Disabled, _) => TextColor::Disabled, - (InteractionState::Active, _) => TextColor::Error, + (InteractionState::Active, _) => TextColor::Selected, _ => self.color, }; From 3223e21d9fcf12d8b22ae63c3d561a74177a4d5b Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Thu, 16 Nov 2023 16:17:17 -0500 Subject: [PATCH 4/4] Add dock borders --- crates/workspace2/src/dock.rs | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/crates/workspace2/src/dock.rs b/crates/workspace2/src/dock.rs index 8e7f08252c..ee45ca862c 100644 --- a/crates/workspace2/src/dock.rs +++ b/crates/workspace2/src/dock.rs @@ -7,6 +7,7 @@ use gpui::{ use schemars::JsonSchema; use serde::{Deserialize, Serialize}; use std::sync::Arc; +use theme2::ActiveTheme; use ui::{h_stack, IconButton, InteractionState, Tooltip}; pub enum PanelEvent { @@ -443,10 +444,16 @@ impl Render for Dock { let size = entry.panel.size(cx); div() + .border_color(cx.theme().colors().border) .map(|this| match self.position().axis() { Axis::Horizontal => this.w(px(size)).h_full(), Axis::Vertical => this.h(px(size)).w_full(), }) + .map(|this| match self.position() { + DockPosition::Left => this.border_r(), + DockPosition::Right => this.border_l(), + DockPosition::Bottom => this.border_t(), + }) .child(entry.panel.to_any()) } else { div() @@ -675,7 +682,7 @@ impl Render for PanelButtons { Some(button) }); - h_stack().children(buttons) + h_stack().gap_0p5().children(buttons) } }