Add styles for branch create button

Piotr Osiewicz created 2 years ago

Change summary

crates/collab_ui/src/branch_list.rs |  7 ++--
crates/theme/src/theme.rs           |  2 
styles/src/style_tree/picker.ts     | 42 +++++++++++++++++++++++++-----
3 files changed, 38 insertions(+), 13 deletions(-)

Detailed changes

crates/collab_ui/src/branch_list.rs

@@ -253,12 +253,11 @@ impl PickerDelegate for BranchListDelegate {
             let style = theme.picker.footer.clone();
             enum BranchCreateButton {}
             Some(
-                Flex::row().with_child(MouseEventHandler::<BranchCreateButton, _>::new(0, cx, |_, _| {
+                Flex::row().with_child(MouseEventHandler::<BranchCreateButton, _>::new(0, cx, |state, _| {
+                    let style = style.style_for(state);
                     Label::new("Create branch", style.label.clone())
                         .contained()
                         .with_style(style.container)
-                        .aligned()
-                        .right()
                 })
                 .on_down(MouseButton::Left, |_, _, cx| {
                     cx.spawn(|picker, mut cx| async move {
@@ -294,7 +293,7 @@ impl PickerDelegate for BranchListDelegate {
                             Ok::<(), anyhow::Error>(())
                 })
                     }).detach();
-                }))
+                })).aligned().right()
                 .into_any(),
             )
         } else {

crates/theme/src/theme.rs

@@ -586,7 +586,7 @@ pub struct Picker {
     pub no_matches: ContainedLabel,
     pub item: Toggleable<Interactive<ContainedLabel>>,
     pub header: ContainedLabel,
-    pub footer: ContainedLabel,
+    pub footer: Interactive<ContainedLabel>,
 }
 
 #[derive(Clone, Debug, Deserialize, Default, JsonSchema)]

styles/src/style_tree/picker.ts

@@ -119,14 +119,40 @@ export default function picker(): any {
                 right: 8,
             },
         },
-        footer: {
-            text: text(theme.lowest, "sans", "variant", { size: "xs" }),
-            margin: {
-                top: 1,
-                left: 8,
-                right: 8,
+        footer: interactive({
+            base: {
+                text: text(theme.lowest, "sans", "variant", { size: "xs" }),
+                padding: {
+                    bottom: 4,
+                    left: 12,
+                    right: 12,
+                    top: 4,
+                },
+                margin: {
+                    top: 1,
+                    left: 4,
+                    right: 4,
+                },
+                corner_radius: 8,
+                background: with_opacity(
+                    background(theme.lowest, "active"),
+                    0.5
+                ),
             },
-
-        }
+            state: {
+                hovered: {
+                    background: with_opacity(
+                        background(theme.lowest, "hovered"),
+                        0.5
+                    ),
+                },
+                clicked: {
+                    background: with_opacity(
+                        background(theme.lowest, "pressed"),
+                        0.5
+                    ),
+                },
+            }
+        }),
     }
 }