Add styles to git menu

Piotr Osiewicz created 2 years ago

Change summary

crates/collab_ui/src/branch_list.rs     | 40 ++++++++++++--------------
crates/theme/src/theme.rs               |  2 +
styles/src/style_tree/contact_finder.ts |  2 +
styles/src/style_tree/picker.ts         | 29 +++++++++++++++++++
4 files changed, 51 insertions(+), 22 deletions(-)

Detailed changes

crates/collab_ui/src/branch_list.rs

@@ -2,7 +2,7 @@ use anyhow::{anyhow, bail};
 use fuzzy::{StringMatch, StringMatchCandidate};
 use gpui::{elements::*, AppContext, MouseState, Task, ViewContext, ViewHandle};
 use picker::{Picker, PickerDelegate, PickerEvent};
-use std::sync::Arc;
+use std::{ops::Not, sync::Arc};
 use util::ResultExt;
 use workspace::{Toast, Workspace};
 
@@ -212,7 +212,7 @@ impl PickerDelegate for BranchListDelegate {
     }
     fn render_header(&self, cx: &AppContext) -> Option<AnyElement<Picker<Self>>> {
         let theme = &theme::current(cx);
-        let style = theme.picker.no_matches.label.clone();
+        let style = theme.picker.header.clone();
         if self.last_query.is_empty() {
             Some(
                 Flex::row()
@@ -221,28 +221,24 @@ impl PickerDelegate for BranchListDelegate {
             )
         } else {
             Some(
-                Flex::row()
-                    .with_child(Label::new("Branches", style))
-                    .into_any(),
-            )
-        }
-    }
-    fn render_footer(&self, cx: &AppContext) -> Option<AnyElement<Picker<Self>>> {
-        if !self.last_query.is_empty() && !self.matches.is_empty() {
-            let theme = &theme::current(cx);
-            let style = theme.picker.no_matches.label.clone();
-            // Render "1 match" and "0 matches", "42 matches"etc.
-            let suffix = if self.matches.len() == 1 { "" } else { "es" };
-            Some(
-                Flex::row()
-                    .with_child(Label::new(
-                        format!("{} match{}", self.matches.len(), suffix),
-                        style,
-                    ))
+                Stack::new()
+                    .with_child(
+                        Flex::row()
+                            .with_child(Label::new("Branches", style.clone()).aligned().left()),
+                    )
+                    .with_children(self.matches.is_empty().not().then(|| {
+                        let suffix = if self.matches.len() == 1 { "" } else { "es" };
+                        Flex::row()
+                            .align_children_center()
+                            .with_child(Label::new(
+                                format!("{} match{}", self.matches.len(), suffix),
+                                style,
+                            ))
+                            .aligned()
+                            .right()
+                    }))
                     .into_any(),
             )
-        } else {
-            None
         }
     }
 }

crates/theme/src/theme.rs

@@ -585,6 +585,8 @@ pub struct Picker {
     pub empty_input_editor: FieldEditor,
     pub no_matches: ContainedLabel,
     pub item: Toggleable<Interactive<ContainedLabel>>,
+    pub header: LabelStyle,
+    pub footer: LabelStyle,
 }
 
 #[derive(Clone, Debug, Deserialize, Default, JsonSchema)]

styles/src/style_tree/contact_finder.ts

@@ -44,6 +44,8 @@ export default function contact_finder(theme: ColorScheme): any {
             no_matches: picker_style.no_matches,
             input_editor: picker_input,
             empty_input_editor: picker_input,
+            header: picker_style.header,
+            footer: picker_style.footer,
         },
         row_height: 28,
         contact_avatar: {

styles/src/style_tree/picker.ts

@@ -108,5 +108,34 @@ export default function picker(theme: ColorScheme): any {
                 top: 8,
             },
         },
+        header: {
+            text: text(theme.lowest, "sans", "variant", { size: "xs" }),
+            padding: {
+                bottom: 4,
+                left: 12,
+                right: 12,
+                top: 4,
+            },
+            margin: {
+                top: 1,
+                left: 4,
+                right: 4,
+            },
+        },
+        footer: {
+            text: text(theme.lowest, "sans", "variant", { size: "xs" }),
+            padding: {
+                bottom: 4,
+                left: 12,
+                right: 12,
+                top: 4,
+            },
+            margin: {
+                top: 1,
+                left: 4,
+                right: 4,
+            },
+
+        }
     }
 }