UI size + other theme refinements (#3347)

Nate Butler created 2 years ago

[[PR Description]]

- Fixes bad titlebar states when the ui scale is set very low
- Tidies up a number of workspace styles

Release Notes:

- N/A

Change summary

crates/collab_ui2/src/collab_titlebar_item.rs | 18 ++++++++++++------
crates/ui2/src/components/button.rs           |  1 +
crates/ui2/src/components/icon_button.rs      | 13 ++++++-------
crates/workspace2/src/dock.rs                 |  9 ++++++++-
4 files changed, 27 insertions(+), 14 deletions(-)

Detailed changes

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()
+            .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),
-                |s| s.pl_20(),
+                // 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.)),
             )
-            .w_full()
-            .h(rems(1.75))
             .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()

crates/ui2/src/components/button.rs

@@ -178,6 +178,7 @@ impl<V: 'static> Button<V> {
             .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)));
 

crates/ui2/src/components/icon_button.rs

@@ -72,7 +72,7 @@ impl<V: 'static> IconButton<V> {
     fn render(mut self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
         let icon_color = match (self.state, self.color) {
             (InteractionState::Disabled, _) => TextColor::Disabled,
-            (InteractionState::Active, _) => TextColor::Error,
+            (InteractionState::Active, _) => TextColor::Selected,
             _ => self.color,
         };
 
@@ -95,17 +95,16 @@ impl<V: 'static> IconButton<V> {
             .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() {

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)
     }
 }