mirrors/zed
1
0
Fork 0
mirror of https://github.com/zed-industries/zed.git synced 2025-01-11 05:00:16 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 9

Improve layout of contact panel rows

Browse source 
Co-authored-by: Nathan Sobo <nathan@zed.dev>
This commit is contained in:
Max Brunsfeld 2022-05-10 11:14:31 -07:00
parent 2cf9659f88
commit b33cbccc31
11 changed files with 137 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
assets/themes/cave-dark.json
View file

@ -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,

19
assets/themes/cave-light.json
View file

@ -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,

19
assets/themes/dark.json
View file

@ -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,

19
assets/themes/light.json
View file

@ -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,

19
assets/themes/solarized-dark.json
View file

@ -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,

19
assets/themes/solarized-light.json
View file

@ -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,

19
assets/themes/sulphurpool-dark.json
View file

@ -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,

19
assets/themes/sulphurpool-light.json
View file

@ -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,

19
crates/contacts_panel/src/contacts_panel.rs
View file

@ -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<Self>) {
@ -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())

2
crates/theme/src/theme.rs
View file

@ -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,

14
styles/src/styleTree/contactsPanel.ts
View file

@ -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: {