From b33cbccc31cb3efa7321c939f1ab5dffc087b786 Mon Sep 17 00:00:00 2001 From: Max Brunsfeld Date: Tue, 10 May 2022 11:14:31 -0700 Subject: [PATCH] Improve layout of contact panel rows Co-authored-by: Nathan Sobo --- assets/themes/cave-dark.json | 19 ++++++++++++++----- assets/themes/cave-light.json | 19 ++++++++++++++----- assets/themes/dark.json | 19 ++++++++++++++----- assets/themes/light.json | 19 ++++++++++++++----- assets/themes/solarized-dark.json | 19 ++++++++++++++----- assets/themes/solarized-light.json | 19 ++++++++++++++----- assets/themes/sulphurpool-dark.json | 19 ++++++++++++++----- assets/themes/sulphurpool-light.json | 19 ++++++++++++++----- crates/contacts_panel/src/contacts_panel.rs | 19 +++++++++++++++---- crates/theme/src/theme.rs | 2 ++ styles/src/styleTree/contactsPanel.ts | 14 ++++++++------ 11 files changed, 137 insertions(+), 50 deletions(-) diff --git a/assets/themes/cave-dark.json b/assets/themes/cave-dark.json index 55e255aa0b..cb1208a1db 100644 --- a/assets/themes/cave-dark.json +++ b/assets/themes/cave-dark.json @@ -1240,6 +1240,7 @@ "top": 4 } }, + "user_query_editor_height": 32, "add_contact_button": { "margin": { "left": 6 @@ -1248,7 +1249,20 @@ "button_width": 8, "icon_width": 8 }, + "row": { + "padding": { + "left": 8 + } + }, "row_height": 28, + "header": { + "family": "Zed Mono", + "color": "#8b8792", + "size": 14, + "margin": { + "top": 8 + } + }, "tree_branch_color": "#655f6d", "tree_branch_width": 1, "contact_avatar": { @@ -1280,11 +1294,6 @@ "button_width": 16, "corner_radius": 8 }, - "header": { - "family": "Zed Mono", - "color": "#8b8792", - "size": 14 - }, "project": { "guest_avatar_spacing": 4, "height": 24, diff --git a/assets/themes/cave-light.json b/assets/themes/cave-light.json index 626cc6f754..f0b3f5bd43 100644 --- a/assets/themes/cave-light.json +++ b/assets/themes/cave-light.json @@ -1240,6 +1240,7 @@ "top": 4 } }, + "user_query_editor_height": 32, "add_contact_button": { "margin": { "left": 6 @@ -1248,7 +1249,20 @@ "button_width": 8, "icon_width": 8 }, + "row": { + "padding": { + "left": 8 + } + }, "row_height": 28, + "header": { + "family": "Zed Mono", + "color": "#585260", + "size": 14, + "margin": { + "top": 8 + } + }, "tree_branch_color": "#7e7887", "tree_branch_width": 1, "contact_avatar": { @@ -1280,11 +1294,6 @@ "button_width": 16, "corner_radius": 8 }, - "header": { - "family": "Zed Mono", - "color": "#585260", - "size": 14 - }, "project": { "guest_avatar_spacing": 4, "height": 24, diff --git a/assets/themes/dark.json b/assets/themes/dark.json index 877985f7db..9cc3badc81 100644 --- a/assets/themes/dark.json +++ b/assets/themes/dark.json @@ -1240,6 +1240,7 @@ "top": 4 } }, + "user_query_editor_height": 32, "add_contact_button": { "margin": { "left": 6 @@ -1248,7 +1249,20 @@ "button_width": 8, "icon_width": 8 }, + "row": { + "padding": { + "left": 8 + } + }, "row_height": 28, + "header": { + "family": "Zed Mono", + "color": "#9c9c9c", + "size": 14, + "margin": { + "top": 8 + } + }, "tree_branch_color": "#404040", "tree_branch_width": 1, "contact_avatar": { @@ -1280,11 +1294,6 @@ "button_width": 16, "corner_radius": 8 }, - "header": { - "family": "Zed Mono", - "color": "#9c9c9c", - "size": 14 - }, "project": { "guest_avatar_spacing": 4, "height": 24, diff --git a/assets/themes/light.json b/assets/themes/light.json index 51a48642fe..e2563fadad 100644 --- a/assets/themes/light.json +++ b/assets/themes/light.json @@ -1240,6 +1240,7 @@ "top": 4 } }, + "user_query_editor_height": 32, "add_contact_button": { "margin": { "left": 6 @@ -1248,7 +1249,20 @@ "button_width": 8, "icon_width": 8 }, + "row": { + "padding": { + "left": 8 + } + }, "row_height": 28, + "header": { + "family": "Zed Mono", + "color": "#474747", + "size": 14, + "margin": { + "top": 8 + } + }, "tree_branch_color": "#e3e3e3", "tree_branch_width": 1, "contact_avatar": { @@ -1280,11 +1294,6 @@ "button_width": 16, "corner_radius": 8 }, - "header": { - "family": "Zed Mono", - "color": "#474747", - "size": 14 - }, "project": { "guest_avatar_spacing": 4, "height": 24, diff --git a/assets/themes/solarized-dark.json b/assets/themes/solarized-dark.json index acf04db255..6e8c405b6c 100644 --- a/assets/themes/solarized-dark.json +++ b/assets/themes/solarized-dark.json @@ -1240,6 +1240,7 @@ "top": 4 } }, + "user_query_editor_height": 32, "add_contact_button": { "margin": { "left": 6 @@ -1248,7 +1249,20 @@ "button_width": 8, "icon_width": 8 }, + "row": { + "padding": { + "left": 8 + } + }, "row_height": 28, + "header": { + "family": "Zed Mono", + "color": "#93a1a1", + "size": 14, + "margin": { + "top": 8 + } + }, "tree_branch_color": "#657b83", "tree_branch_width": 1, "contact_avatar": { @@ -1280,11 +1294,6 @@ "button_width": 16, "corner_radius": 8 }, - "header": { - "family": "Zed Mono", - "color": "#93a1a1", - "size": 14 - }, "project": { "guest_avatar_spacing": 4, "height": 24, diff --git a/assets/themes/solarized-light.json b/assets/themes/solarized-light.json index a85463a0d9..3f5b26ee56 100644 --- a/assets/themes/solarized-light.json +++ b/assets/themes/solarized-light.json @@ -1240,6 +1240,7 @@ "top": 4 } }, + "user_query_editor_height": 32, "add_contact_button": { "margin": { "left": 6 @@ -1248,7 +1249,20 @@ "button_width": 8, "icon_width": 8 }, + "row": { + "padding": { + "left": 8 + } + }, "row_height": 28, + "header": { + "family": "Zed Mono", + "color": "#586e75", + "size": 14, + "margin": { + "top": 8 + } + }, "tree_branch_color": "#839496", "tree_branch_width": 1, "contact_avatar": { @@ -1280,11 +1294,6 @@ "button_width": 16, "corner_radius": 8 }, - "header": { - "family": "Zed Mono", - "color": "#586e75", - "size": 14 - }, "project": { "guest_avatar_spacing": 4, "height": 24, diff --git a/assets/themes/sulphurpool-dark.json b/assets/themes/sulphurpool-dark.json index abf1576257..0f2a868f24 100644 --- a/assets/themes/sulphurpool-dark.json +++ b/assets/themes/sulphurpool-dark.json @@ -1240,6 +1240,7 @@ "top": 4 } }, + "user_query_editor_height": 32, "add_contact_button": { "margin": { "left": 6 @@ -1248,7 +1249,20 @@ "button_width": 8, "icon_width": 8 }, + "row": { + "padding": { + "left": 8 + } + }, "row_height": 28, + "header": { + "family": "Zed Mono", + "color": "#979db4", + "size": 14, + "margin": { + "top": 8 + } + }, "tree_branch_color": "#6b7394", "tree_branch_width": 1, "contact_avatar": { @@ -1280,11 +1294,6 @@ "button_width": 16, "corner_radius": 8 }, - "header": { - "family": "Zed Mono", - "color": "#979db4", - "size": 14 - }, "project": { "guest_avatar_spacing": 4, "height": 24, diff --git a/assets/themes/sulphurpool-light.json b/assets/themes/sulphurpool-light.json index 0a52843870..b9106c62f3 100644 --- a/assets/themes/sulphurpool-light.json +++ b/assets/themes/sulphurpool-light.json @@ -1240,6 +1240,7 @@ "top": 4 } }, + "user_query_editor_height": 32, "add_contact_button": { "margin": { "left": 6 @@ -1248,7 +1249,20 @@ "button_width": 8, "icon_width": 8 }, + "row": { + "padding": { + "left": 8 + } + }, "row_height": 28, + "header": { + "family": "Zed Mono", + "color": "#5e6687", + "size": 14, + "margin": { + "top": 8 + } + }, "tree_branch_color": "#898ea4", "tree_branch_width": 1, "contact_avatar": { @@ -1280,11 +1294,6 @@ "button_width": 16, "corner_radius": 8 }, - "header": { - "family": "Zed Mono", - "color": "#5e6687", - "size": 14 - }, "project": { "guest_avatar_spacing": 4, "height": 24, diff --git a/crates/contacts_panel/src/contacts_panel.rs b/crates/contacts_panel/src/contacts_panel.rs index d33a2ed3ed..9150c966e5 100644 --- a/crates/contacts_panel/src/contacts_panel.rs +++ b/crates/contacts_panel/src/contacts_panel.rs @@ -90,11 +90,12 @@ impl ContactsPanel { ContactEntry::Header(text) => { Label::new(text.to_string(), theme.header.text.clone()) .contained() - .with_style(theme.header.container) .aligned() .left() .constrained() .with_height(theme.row_height) + .contained() + .with_style(theme.header.container) .boxed() } ContactEntry::IncomingRequest(user) => { @@ -302,6 +303,8 @@ impl ContactsPanel { .boxed() }), ) + .contained() + .with_style(theme.row.clone()) .boxed() } @@ -380,7 +383,11 @@ impl ContactsPanel { .boxed(), ]); - row.constrained().with_height(theme.row_height).boxed() + row.constrained() + .with_height(theme.row_height) + .contained() + .with_style(theme.row.clone()) + .boxed() } fn render_outgoing_contact_request( @@ -434,7 +441,11 @@ impl ContactsPanel { .boxed(), ); - row.constrained().with_height(theme.row_height).boxed() + row.constrained() + .with_height(theme.row_height) + .contained() + .with_style(theme.row) + .boxed() } fn update_entries(&mut self, cx: &mut ViewContext) { @@ -643,7 +654,7 @@ impl View for ContactsPanel { .boxed(), ) .constrained() - .with_height(32.) + .with_height(theme.user_query_editor_height) .boxed(), ) .with_child(List::new(self.list_state.clone()).flex(1., false).boxed()) diff --git a/crates/theme/src/theme.rs b/crates/theme/src/theme.rs index 7689205b2f..72db11c493 100644 --- a/crates/theme/src/theme.rs +++ b/crates/theme/src/theme.rs @@ -237,7 +237,9 @@ pub struct ContactsPanel { pub container: ContainerStyle, pub header: ContainedText, pub user_query_editor: FieldEditor, + pub user_query_editor_height: f32, pub add_contact_button: IconButton, + pub row: ContainerStyle, pub row_height: f32, pub contact_avatar: ImageStyle, pub contact_username: ContainedText, diff --git a/styles/src/styleTree/contactsPanel.ts b/styles/src/styleTree/contactsPanel.ts index 6f7b964760..3cc0f35c3e 100644 --- a/styles/src/styleTree/contactsPanel.ts +++ b/styles/src/styleTree/contactsPanel.ts @@ -55,13 +55,21 @@ export default function contactsPanel(theme: Theme) { top: 4, }, }, + userQueryEditorHeight: 32, addContactButton: { margin: { left: 6 }, color: iconColor(theme, "primary"), buttonWidth: 8, iconWidth: 8, }, + row: { + padding: { left: 8 }, + }, rowHeight: 28, + header: { + ...text(theme, "mono", "secondary", { size: "sm" }), + margin: { top: 8 }, + }, treeBranchColor: borderColor(theme, "muted"), treeBranchWidth: 1, contactAvatar: { @@ -85,12 +93,6 @@ export default function contactsPanel(theme: Theme) { background: backgroundColor(theme, 100), color: iconColor(theme, "muted"), }, - header: { - ...text(theme, "mono", "secondary", { size: "sm" }), - // padding: { - // left: 8, - // } - }, project, sharedProject, hoveredSharedProject: {