From 2cf9659f889356c01e13cdca976fc4a044791b30 Mon Sep 17 00:00:00 2001 From: Max Brunsfeld Date: Tue, 10 May 2022 10:47:25 -0700 Subject: [PATCH] Style the buttons in the contact panel and contact finder Co-authored-by: Nathan Sobo Co-authored-by: Antonio Scandurra --- assets/themes/cave-dark.json | 33 ++++--- assets/themes/cave-light.json | 33 ++++--- assets/themes/dark.json | 33 ++++--- assets/themes/light.json | 33 ++++--- assets/themes/solarized-dark.json | 33 ++++--- assets/themes/solarized-light.json | 33 ++++--- assets/themes/sulphurpool-dark.json | 33 ++++--- assets/themes/sulphurpool-light.json | 33 ++++--- crates/contacts_panel/src/contact_finder.rs | 13 +-- crates/contacts_panel/src/contacts_panel.rs | 99 +++++++++++---------- crates/theme/src/theme.rs | 2 +- styles/src/styleTree/contactFinder.ts | 7 +- styles/src/styleTree/contactsPanel.ts | 10 ++- 13 files changed, 230 insertions(+), 165 deletions(-) diff --git a/assets/themes/cave-dark.json b/assets/themes/cave-dark.json index 226db3d0ae..55e255aa0b 100644 --- a/assets/themes/cave-dark.json +++ b/assets/themes/cave-dark.json @@ -1245,7 +1245,8 @@ "left": 6 }, "color": "#e2dfe7", - "width": 8 + "button_width": 8, + "icon_width": 8 }, "row_height": 28, "tree_branch_color": "#655f6d", @@ -1264,17 +1265,20 @@ }, "contact_button": { "background": "#26232a", - "corner_radius": 8, - "padding": 4, "color": "#e2dfe7", - "width": 8 + "icon_width": 8, + "button_width": 16, + "corner_radius": 8, + "hover": { + "background": "#5852603d" + } }, "disabled_contact_button": { "background": "#26232a", - "corner_radius": 8, - "padding": 4, "color": "#8b8792", - "width": 8 + "icon_width": 8, + "button_width": 16, + "corner_radius": 8 }, "header": { "family": "Zed Mono", @@ -1482,17 +1486,20 @@ }, "contact_button": { "background": "#26232a", - "corner_radius": 9, - "padding": 4, "color": "#e2dfe7", - "width": 10 + "icon_width": 8, + "button_width": 16, + "corner_radius": 8, + "hover": { + "background": "#5852603d" + } }, "disabled_contact_button": { "background": "#26232a", - "corner_radius": 9, - "padding": 4, "color": "#8b8792", - "width": 10 + "icon_width": 8, + "button_width": 16, + "corner_radius": 8 } }, "search": { diff --git a/assets/themes/cave-light.json b/assets/themes/cave-light.json index f0b72c37a7..626cc6f754 100644 --- a/assets/themes/cave-light.json +++ b/assets/themes/cave-light.json @@ -1245,7 +1245,8 @@ "left": 6 }, "color": "#26232a", - "width": 8 + "button_width": 8, + "icon_width": 8 }, "row_height": 28, "tree_branch_color": "#7e7887", @@ -1264,17 +1265,20 @@ }, "contact_button": { "background": "#e2dfe7", - "corner_radius": 8, - "padding": 4, "color": "#26232a", - "width": 8 + "icon_width": 8, + "button_width": 16, + "corner_radius": 8, + "hover": { + "background": "#8b87921f" + } }, "disabled_contact_button": { "background": "#e2dfe7", - "corner_radius": 8, - "padding": 4, "color": "#585260", - "width": 8 + "icon_width": 8, + "button_width": 16, + "corner_radius": 8 }, "header": { "family": "Zed Mono", @@ -1482,17 +1486,20 @@ }, "contact_button": { "background": "#e2dfe7", - "corner_radius": 9, - "padding": 4, "color": "#26232a", - "width": 10 + "icon_width": 8, + "button_width": 16, + "corner_radius": 8, + "hover": { + "background": "#8b87921f" + } }, "disabled_contact_button": { "background": "#e2dfe7", - "corner_radius": 9, - "padding": 4, "color": "#585260", - "width": 10 + "icon_width": 8, + "button_width": 16, + "corner_radius": 8 } }, "search": { diff --git a/assets/themes/dark.json b/assets/themes/dark.json index 46871119cb..877985f7db 100644 --- a/assets/themes/dark.json +++ b/assets/themes/dark.json @@ -1245,7 +1245,8 @@ "left": 6 }, "color": "#c6c6c6", - "width": 8 + "button_width": 8, + "icon_width": 8 }, "row_height": 28, "tree_branch_color": "#404040", @@ -1264,17 +1265,20 @@ }, "contact_button": { "background": "#2b2b2b", - "corner_radius": 8, - "padding": 4, "color": "#c6c6c6", - "width": 8 + "icon_width": 8, + "button_width": 16, + "corner_radius": 8, + "hover": { + "background": "#323232" + } }, "disabled_contact_button": { "background": "#2b2b2b", - "corner_radius": 8, - "padding": 4, "color": "#555555", - "width": 8 + "icon_width": 8, + "button_width": 16, + "corner_radius": 8 }, "header": { "family": "Zed Mono", @@ -1482,17 +1486,20 @@ }, "contact_button": { "background": "#2b2b2b", - "corner_radius": 9, - "padding": 4, "color": "#c6c6c6", - "width": 10 + "icon_width": 8, + "button_width": 16, + "corner_radius": 8, + "hover": { + "background": "#323232" + } }, "disabled_contact_button": { "background": "#2b2b2b", - "corner_radius": 9, - "padding": 4, "color": "#555555", - "width": 10 + "icon_width": 8, + "button_width": 16, + "corner_radius": 8 } }, "search": { diff --git a/assets/themes/light.json b/assets/themes/light.json index 2f7422ec9c..51a48642fe 100644 --- a/assets/themes/light.json +++ b/assets/themes/light.json @@ -1245,7 +1245,8 @@ "left": 6 }, "color": "#393939", - "width": 8 + "button_width": 8, + "icon_width": 8 }, "row_height": 28, "tree_branch_color": "#e3e3e3", @@ -1264,17 +1265,20 @@ }, "contact_button": { "background": "#eaeaea", - "corner_radius": 8, - "padding": 4, "color": "#393939", - "width": 8 + "icon_width": 8, + "button_width": 16, + "corner_radius": 8, + "hover": { + "background": "#e3e3e3" + } }, "disabled_contact_button": { "background": "#eaeaea", - "corner_radius": 8, - "padding": 4, "color": "#9c9c9c", - "width": 8 + "icon_width": 8, + "button_width": 16, + "corner_radius": 8 }, "header": { "family": "Zed Mono", @@ -1482,17 +1486,20 @@ }, "contact_button": { "background": "#eaeaea", - "corner_radius": 9, - "padding": 4, "color": "#393939", - "width": 10 + "icon_width": 8, + "button_width": 16, + "corner_radius": 8, + "hover": { + "background": "#e3e3e3" + } }, "disabled_contact_button": { "background": "#eaeaea", - "corner_radius": 9, - "padding": 4, "color": "#9c9c9c", - "width": 10 + "icon_width": 8, + "button_width": 16, + "corner_radius": 8 } }, "search": { diff --git a/assets/themes/solarized-dark.json b/assets/themes/solarized-dark.json index d31d7368d8..acf04db255 100644 --- a/assets/themes/solarized-dark.json +++ b/assets/themes/solarized-dark.json @@ -1245,7 +1245,8 @@ "left": 6 }, "color": "#eee8d5", - "width": 8 + "button_width": 8, + "icon_width": 8 }, "row_height": 28, "tree_branch_color": "#657b83", @@ -1264,17 +1265,20 @@ }, "contact_button": { "background": "#073642", - "corner_radius": 8, - "padding": 4, "color": "#eee8d5", - "width": 8 + "icon_width": 8, + "button_width": 16, + "corner_radius": 8, + "hover": { + "background": "#586e753d" + } }, "disabled_contact_button": { "background": "#073642", - "corner_radius": 8, - "padding": 4, "color": "#93a1a1", - "width": 8 + "icon_width": 8, + "button_width": 16, + "corner_radius": 8 }, "header": { "family": "Zed Mono", @@ -1482,17 +1486,20 @@ }, "contact_button": { "background": "#073642", - "corner_radius": 9, - "padding": 4, "color": "#eee8d5", - "width": 10 + "icon_width": 8, + "button_width": 16, + "corner_radius": 8, + "hover": { + "background": "#586e753d" + } }, "disabled_contact_button": { "background": "#073642", - "corner_radius": 9, - "padding": 4, "color": "#93a1a1", - "width": 10 + "icon_width": 8, + "button_width": 16, + "corner_radius": 8 } }, "search": { diff --git a/assets/themes/solarized-light.json b/assets/themes/solarized-light.json index 8f0749a8e5..a85463a0d9 100644 --- a/assets/themes/solarized-light.json +++ b/assets/themes/solarized-light.json @@ -1245,7 +1245,8 @@ "left": 6 }, "color": "#073642", - "width": 8 + "button_width": 8, + "icon_width": 8 }, "row_height": 28, "tree_branch_color": "#839496", @@ -1264,17 +1265,20 @@ }, "contact_button": { "background": "#eee8d5", - "corner_radius": 8, - "padding": 4, "color": "#073642", - "width": 8 + "icon_width": 8, + "button_width": 16, + "corner_radius": 8, + "hover": { + "background": "#93a1a11f" + } }, "disabled_contact_button": { "background": "#eee8d5", - "corner_radius": 8, - "padding": 4, "color": "#586e75", - "width": 8 + "icon_width": 8, + "button_width": 16, + "corner_radius": 8 }, "header": { "family": "Zed Mono", @@ -1482,17 +1486,20 @@ }, "contact_button": { "background": "#eee8d5", - "corner_radius": 9, - "padding": 4, "color": "#073642", - "width": 10 + "icon_width": 8, + "button_width": 16, + "corner_radius": 8, + "hover": { + "background": "#93a1a11f" + } }, "disabled_contact_button": { "background": "#eee8d5", - "corner_radius": 9, - "padding": 4, "color": "#586e75", - "width": 10 + "icon_width": 8, + "button_width": 16, + "corner_radius": 8 } }, "search": { diff --git a/assets/themes/sulphurpool-dark.json b/assets/themes/sulphurpool-dark.json index 4eef983924..abf1576257 100644 --- a/assets/themes/sulphurpool-dark.json +++ b/assets/themes/sulphurpool-dark.json @@ -1245,7 +1245,8 @@ "left": 6 }, "color": "#dfe2f1", - "width": 8 + "button_width": 8, + "icon_width": 8 }, "row_height": 28, "tree_branch_color": "#6b7394", @@ -1264,17 +1265,20 @@ }, "contact_button": { "background": "#293256", - "corner_radius": 8, - "padding": 4, "color": "#dfe2f1", - "width": 8 + "icon_width": 8, + "button_width": 16, + "corner_radius": 8, + "hover": { + "background": "#5e66873d" + } }, "disabled_contact_button": { "background": "#293256", - "corner_radius": 8, - "padding": 4, "color": "#979db4", - "width": 8 + "icon_width": 8, + "button_width": 16, + "corner_radius": 8 }, "header": { "family": "Zed Mono", @@ -1482,17 +1486,20 @@ }, "contact_button": { "background": "#293256", - "corner_radius": 9, - "padding": 4, "color": "#dfe2f1", - "width": 10 + "icon_width": 8, + "button_width": 16, + "corner_radius": 8, + "hover": { + "background": "#5e66873d" + } }, "disabled_contact_button": { "background": "#293256", - "corner_radius": 9, - "padding": 4, "color": "#979db4", - "width": 10 + "icon_width": 8, + "button_width": 16, + "corner_radius": 8 } }, "search": { diff --git a/assets/themes/sulphurpool-light.json b/assets/themes/sulphurpool-light.json index 5f8badbf91..0a52843870 100644 --- a/assets/themes/sulphurpool-light.json +++ b/assets/themes/sulphurpool-light.json @@ -1245,7 +1245,8 @@ "left": 6 }, "color": "#293256", - "width": 8 + "button_width": 8, + "icon_width": 8 }, "row_height": 28, "tree_branch_color": "#898ea4", @@ -1264,17 +1265,20 @@ }, "contact_button": { "background": "#dfe2f1", - "corner_radius": 8, - "padding": 4, "color": "#293256", - "width": 8 + "icon_width": 8, + "button_width": 16, + "corner_radius": 8, + "hover": { + "background": "#979db41f" + } }, "disabled_contact_button": { "background": "#dfe2f1", - "corner_radius": 8, - "padding": 4, "color": "#5e6687", - "width": 8 + "icon_width": 8, + "button_width": 16, + "corner_radius": 8 }, "header": { "family": "Zed Mono", @@ -1482,17 +1486,20 @@ }, "contact_button": { "background": "#dfe2f1", - "corner_radius": 9, - "padding": 4, "color": "#293256", - "width": 10 + "icon_width": 8, + "button_width": 16, + "corner_radius": 8, + "hover": { + "background": "#979db41f" + } }, "disabled_contact_button": { "background": "#dfe2f1", - "corner_radius": 9, - "padding": 4, "color": "#5e6687", - "width": 10 + "icon_width": 8, + "button_width": 16, + "corner_radius": 8 } }, "search": { diff --git a/crates/contacts_panel/src/contact_finder.rs b/crates/contacts_panel/src/contact_finder.rs index 6de61fdc3b..5a480911d4 100644 --- a/crates/contacts_panel/src/contact_finder.rs +++ b/crates/contacts_panel/src/contact_finder.rs @@ -9,6 +9,8 @@ use std::sync::Arc; use util::TryFutureExt; use workspace::Workspace; +use crate::render_icon_button; + actions!(contact_finder, [Toggle]); pub fn init(cx: &mut MutableAppContext) { @@ -142,16 +144,7 @@ impl PickerDelegate for ContactFinder { .boxed(), ) .with_child( - Svg::new(icon_path) - .with_color(button_style.color) - .constrained() - .with_width(button_style.icon_width) - .aligned() - .constrained() - .with_width(button_style.button_width) - .with_height(button_style.button_width) - .contained() - .with_style(button_style.container) + render_icon_button(button_style, icon_path) .aligned() .flex_float() .boxed(), diff --git a/crates/contacts_panel/src/contacts_panel.rs b/crates/contacts_panel/src/contacts_panel.rs index c771ea7ffd..d33a2ed3ed 100644 --- a/crates/contacts_panel/src/contacts_panel.rs +++ b/crates/contacts_panel/src/contacts_panel.rs @@ -14,6 +14,7 @@ use gpui::{ use serde::Deserialize; use settings::Settings; use std::sync::Arc; +use theme::IconButton; use workspace::{AppState, JoinProject}; impl_actions!( @@ -335,49 +336,38 @@ impl ContactsPanel { .boxed(), ); - let button_style = if user_store.read(cx).is_contact_request_pending(&user) { - &theme.disabled_contact_button - } else { - &theme.contact_button - }; + let is_contact_request_pending = user_store.read(cx).is_contact_request_pending(&user); row.add_children([ - MouseEventHandler::new::(user.id as usize, cx, |_, _| { - Svg::new("icons/reject.svg") - .with_color(button_style.color) - .constrained() - .with_width(button_style.icon_width) - .aligned() - .constrained() - .with_width(button_style.button_width) - .with_height(button_style.button_width) - .contained() - .with_style(button_style.container) + MouseEventHandler::new::(user.id as usize, cx, |mouse_state, _| { + let button_style = if is_contact_request_pending { + &theme.disabled_contact_button + } else { + &theme.contact_button.style_for(mouse_state, false) + }; + render_icon_button(button_style, "icons/reject.svg") .aligned() + .flex_float() .boxed() }) + .with_cursor_style(CursorStyle::PointingHand) .on_click(move |_, cx| { cx.dispatch_action(RespondToContactRequest { user_id, accept: false, }) }) - .with_cursor_style(CursorStyle::PointingHand) .flex_float() .boxed(), - MouseEventHandler::new::(user.id as usize, cx, |_, _| { - Svg::new("icons/accept.svg") - .with_color(button_style.color) - .constrained() - .with_width(button_style.icon_width) - .with_height(button_style.icon_width) - .aligned() - .constrained() - .with_width(button_style.button_width) - .with_height(button_style.button_width) - .contained() - .with_style(button_style.container) + MouseEventHandler::new::(user.id as usize, cx, |mouse_state, _| { + let button_style = if is_contact_request_pending { + &theme.disabled_contact_button + } else { + &theme.contact_button.style_for(mouse_state, false) + }; + render_icon_button(button_style, "icons/accept.svg") .aligned() + .flex_float() .boxed() }) .on_click(move |_, cx| { @@ -402,11 +392,7 @@ impl ContactsPanel { enum Cancel {} let user_id = user.id; - let button_style = if user_store.read(cx).is_contact_request_pending(&user) { - &theme.disabled_contact_button - } else { - &theme.contact_button - }; + let is_contact_request_pending = user_store.read(cx).is_contact_request_pending(&user); let mut row = Flex::row() .with_children(user.avatar.clone().map(|avatar| { @@ -429,19 +415,21 @@ impl ContactsPanel { ); row.add_child( - MouseEventHandler::new::(user.id as usize, cx, |_, _| { - Svg::new("icons/reject.svg") - .with_color(button_style.color) - .constrained() - .with_width(button_style.icon_width) - .with_height(button_style.icon_width) - .contained() - .with_style(button_style.container) + MouseEventHandler::new::(user.id as usize, cx, |mouse_state, _| { + let button_style = if is_contact_request_pending { + &theme.disabled_contact_button + } else { + &theme.contact_button.style_for(mouse_state, false) + }; + + render_icon_button(button_style, "icons/reject.svg") .aligned() + .flex_float() .boxed() }) - .on_click(move |_, cx| cx.dispatch_action(RemoveContact(user_id))) + .with_padding(Padding::uniform(2.)) .with_cursor_style(CursorStyle::PointingHand) + .on_click(move |_, cx| cx.dispatch_action(RemoveContact(user_id))) .flex_float() .boxed(), ); @@ -546,17 +534,21 @@ impl ContactsPanel { &Default::default(), executor.clone(), )); - if !matches.is_empty() { - let (online_contacts, offline_contacts) = matches - .iter() - .partition::, _>(|mat| contacts[mat.candidate_id].online); + let (online_contacts, offline_contacts) = matches + .iter() + .partition::, _>(|mat| contacts[mat.candidate_id].online); + + if !online_contacts.is_empty() { self.entries.push(ContactEntry::Header("Online")); self.entries.extend( online_contacts .into_iter() .map(|mat| ContactEntry::Contact(contacts[mat.candidate_id].clone())), ); + } + + if !offline_contacts.is_empty() { self.entries.push(ContactEntry::Header("Offline")); self.entries.extend( offline_contacts @@ -595,6 +587,19 @@ impl ContactsPanel { } } +fn render_icon_button(style: &IconButton, svg_path: &'static str) -> impl Element { + Svg::new(svg_path) + .with_color(style.color) + .constrained() + .with_width(style.icon_width) + .aligned() + .contained() + .with_style(style.container) + .constrained() + .with_width(style.button_width) + .with_height(style.button_width) +} + pub enum Event {} impl Entity for ContactsPanel { diff --git a/crates/theme/src/theme.rs b/crates/theme/src/theme.rs index 427123e629..7689205b2f 100644 --- a/crates/theme/src/theme.rs +++ b/crates/theme/src/theme.rs @@ -241,7 +241,7 @@ pub struct ContactsPanel { pub row_height: f32, pub contact_avatar: ImageStyle, pub contact_username: ContainedText, - pub contact_button: IconButton, + pub contact_button: Interactive, pub disabled_contact_button: IconButton, pub tree_branch_width: f32, pub tree_branch_color: Color, diff --git a/styles/src/styleTree/contactFinder.ts b/styles/src/styleTree/contactFinder.ts index f79f55a237..853f87ca5e 100644 --- a/styles/src/styleTree/contactFinder.ts +++ b/styles/src/styleTree/contactFinder.ts @@ -23,7 +23,12 @@ export default function contactFinder(theme: Theme) { left: 8, }, }, - contactButton, + contactButton: { + ...contactButton, + hover: { + background: backgroundColor(theme, 100, "hovered") + } + }, disabledContactButton: { ...contactButton, background: backgroundColor(theme, 100), diff --git a/styles/src/styleTree/contactsPanel.ts b/styles/src/styleTree/contactsPanel.ts index 9aa9109964..6f7b964760 100644 --- a/styles/src/styleTree/contactsPanel.ts +++ b/styles/src/styleTree/contactsPanel.ts @@ -58,7 +58,8 @@ export default function contactsPanel(theme: Theme) { addContactButton: { margin: { left: 6 }, color: iconColor(theme, "primary"), - width: 8, + buttonWidth: 8, + iconWidth: 8, }, rowHeight: 28, treeBranchColor: borderColor(theme, "muted"), @@ -73,7 +74,12 @@ export default function contactsPanel(theme: Theme) { left: 8, }, }, - contactButton, + contactButton: { + ...contactButton, + hover: { + background: backgroundColor(theme, 100, "hovered"), + }, + }, disabledContactButton: { ...contactButton, background: backgroundColor(theme, 100),