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 226db3d0aebfd1f38b7774805232402e2671637a..55e255aa0b10755efb236653fea6c9058ba4dde1 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 f0b72c37a7b771b532bdae0f7cd46cde69116862..626cc6f7541a6b77ef5121c45a02b40d6e2e8826 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 46871119cba46c740d4e6c9405a107595a66034d..877985f7dbd55a94dab3ffe40661222a5b2d87e2 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 2f7422ec9c20d034afd46893c1e48334b6421478..51a48642fe7385a04601122c10820d48bbfb2a92 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 d31d7368d89ded236a35bb0c031dd2349dc6d6fc..acf04db255ab2c6a60f655e79c83cef4ba94f2a8 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 8f0749a8e503ba009c37ff1fe00f9e0a68986419..a85463a0d9cda9236ee3450e674d9f2dc4118958 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 4eef98392411e36fd406cccd9b307ec056bf84e4..abf15762576f15aaa876775b527e5247df265cda 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 5f8badbf9144e98ca94bfa4ef3af1dbcb088ca2c..0a528438708c9eb837c1e3b5c48d7797a5f2d396 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 6de61fdc3b398c86fc3b332fbb7772fb7db031a6..5a480911d4a5ae3f6f2855da23bffdba29bf7216 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 c771ea7ffd7fa6e7b823aa162b4c2a9f76da4b8a..d33a2ed3ed516a37722c209b9604ea58fe67cbc4 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 427123e6294e283de3eaa7ef506ec7eed30f353d..7689205b2fdd7b1874d6bf47e70926981b1c90ac 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 f79f55a237f9a22314a50e4ab086902b9afbd5ab..853f87ca5e654d8824309158b0e97360e1ebc1fc 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 9aa9109964cb0aaf37eb6c4896da5ef410ebb823..6f7b96476041ac9470b5a4c303a87e7488d8fdec 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),