Update Zed UI for 0.2 release
* changes to padding, spacings and borders * Fix incorrect borders on titlebar and sidebars * QA pass on all themes, base font size -> 15 * Changed the max size of the file_finder * Hid file_finder icons * Modified the size of tab status indicators * Made the default sidebar size bigger
This commit is contained in:
Nate
@@ -1,18 +1,18 @@
|
||||
[text]
|
||||
base = { family = "Inconsolata", size = 14 }
|
||||
base = { family = "Inconsolata", size = 15 }
|
||||
|
||||
[workspace]
|
||||
background = "$surface.0"
|
||||
pane_divider = { width = 3, color = "$border.0" }
|
||||
|
||||
[workspace.titlebar]
|
||||
border = { width = 1, bottom = true, color = "$surface.1" }
|
||||
border = { width = 1, bottom = true, color = "$border.0" }
|
||||
|
||||
[workspace.tab]
|
||||
text = "$text.2"
|
||||
padding = { left = 10, right = 10 }
|
||||
icon_width = 12
|
||||
spacing = 6
|
||||
padding = { left = 8, right = 8 }
|
||||
icon_width = 16
|
||||
spacing = 7
|
||||
icon_close = "$text.2.color"
|
||||
icon_close_active = "$text.0.color"
|
||||
icon_dirty = "$status.info"
|
||||
@@ -25,12 +25,12 @@ background = "$surface.1"
|
||||
text = "$text.0"
|
||||
|
||||
[workspace.sidebar]
|
||||
padding = { left = 10, right = 10 }
|
||||
padding = { left = 12, right = 12 }
|
||||
border = { right = true, width = 1, color = "$border.0" }
|
||||
|
||||
[workspace.sidebar.resize_handle]
|
||||
padding = { left = 1 }
|
||||
background = "$surface.1"
|
||||
background = "$border.0"
|
||||
|
||||
[workspace.sidebar.icon]
|
||||
color = "$text.2.color"
|
||||
@@ -42,32 +42,31 @@ color = "$text.0.color"
|
||||
|
||||
[workspace.left_sidebar]
|
||||
extends = "$workspace.sidebar"
|
||||
border = { width = 1, color = "$surface.1", right = true }
|
||||
border = { width = 1, color = "$border.0", right = true }
|
||||
|
||||
[workspace.right_sidebar]
|
||||
extends = "$workspace.sidebar"
|
||||
border = { width = 1, color = "$surface.1", left = true }
|
||||
border = { width = 1, color = "$border.0", left = true }
|
||||
|
||||
[chat_panel]
|
||||
channel_name = { extends = "$text.0", weight = "bold" }
|
||||
channel_name_hash = { text = "$text.2", padding.right = 5 }
|
||||
border = { left = true, width = 1, color = "$border.0" }
|
||||
padding = 10
|
||||
channel_name_hash = { text = "$text.2", padding.right = 8 }
|
||||
padding = 12
|
||||
|
||||
[chat_panel.message]
|
||||
body = "$text.1"
|
||||
sender = { extends = "$text.0", weight = "bold", margin.right = 10 }
|
||||
sender = { extends = "$text.0", weight = "bold", margin.right = 8 }
|
||||
timestamp = "$text.2"
|
||||
padding.bottom = 10
|
||||
padding.bottom = 6
|
||||
|
||||
[chat_panel.channel_select.item]
|
||||
padding = 4
|
||||
name = "$text.1"
|
||||
hash = { extends = "$text.2", margin.right = 5 }
|
||||
hash = { extends = "$text.2", margin.right = 8 }
|
||||
|
||||
[chat_panel.channel_select.hovered_item]
|
||||
extends = "$chat_panel.channel_select.item"
|
||||
background = "$surface.2"
|
||||
background = "$state.hover"
|
||||
corner_radius = 6
|
||||
|
||||
[chat_panel.channel_select.active_item]
|
||||
@@ -80,7 +79,7 @@ name = "$text.0"
|
||||
|
||||
[chat_panel.channel_select.header]
|
||||
extends = "$chat_panel.channel_select.active_item"
|
||||
padding.bottom = 0
|
||||
padding.bottom = 4
|
||||
padding.left = 0
|
||||
|
||||
[chat_panel.channel_select.menu]
|
||||
@@ -92,10 +91,11 @@ background = "$surface.0"
|
||||
[chat_panel.input_editor]
|
||||
background = "$surface.1"
|
||||
corner_radius = 6
|
||||
padding = 6
|
||||
text = "$text.1.color"
|
||||
padding = { left = 8, right = 8, top = 7, bottom = 7 }
|
||||
text = "$text.0.color"
|
||||
placeholder_text = "$text.2.color"
|
||||
selection = "$selection.host"
|
||||
border = { width = 1, color = "$border.0" }
|
||||
|
||||
[chat_panel.sign_in_prompt]
|
||||
extends = "$text.0"
|
||||
@@ -108,20 +108,20 @@ color = "$text.1.color"
|
||||
[selector]
|
||||
background = "$surface.0"
|
||||
padding = 8
|
||||
margin.top = 12
|
||||
margin.top = 52
|
||||
corner_radius = 6
|
||||
shadow = { offset = [0, 2], blur = 16, color = "$shadow.0" }
|
||||
input_editor = "$chat_panel.input_editor"
|
||||
border = { width = 1, color = "$border.0" }
|
||||
|
||||
[selector.empty]
|
||||
text = "$text.0"
|
||||
padding = { left = 16, right = 16, top = 4, bottom = 4 }
|
||||
text = "$text.2"
|
||||
padding = { left = 8, right = 8, top = 8, bottom = 4 }
|
||||
|
||||
[selector.item]
|
||||
text = "$text.1"
|
||||
highlight_text = { extends = "$text.base", color = "$syntax.keyword.color", weight = "$syntax.keyword.weight" }
|
||||
padding = { left = 16, right = 16, top = 4, bottom = 4 }
|
||||
padding = { left = 8, right = 8, top = 4, bottom = 4 }
|
||||
corner_radius = 6
|
||||
|
||||
[selector.active_item]
|
||||
|
||||
@@ -9,7 +9,7 @@ extends = "_base"
|
||||
0 = "#0F1011"
|
||||
|
||||
[text]
|
||||
base = { family = "Inconsolata", size = 14 }
|
||||
base = { family = "Inconsolata", size = 15 }
|
||||
0 = { extends = "$text.base", color = "#ffffff" }
|
||||
1 = { extends = "$text.base", color = "#b3b3b3" }
|
||||
2 = { extends = "$text.base", color = "#7b7d80" }
|
||||
@@ -34,7 +34,7 @@ hover = "#00000033"
|
||||
|
||||
[syntax]
|
||||
keyword = { color = "#0086c0", weight = "bold" }
|
||||
function = "#dcdcaa"
|
||||
function = { color = "#dcdcaa", underline = true }
|
||||
string = "#cb8f77"
|
||||
type = "#4ec9b0"
|
||||
number = "#b5cea8"
|
||||
|
||||
@@ -9,7 +9,7 @@ extends = "_base"
|
||||
0 = "#1B222B"
|
||||
|
||||
[text]
|
||||
base = { family = "Inconsolata", size = 14 }
|
||||
base = { family = "Inconsolata", size = 15 }
|
||||
0 = { extends = "$text.base", color = "#FFFFFF" }
|
||||
1 = { extends = "$text.base", color = "#CDD1E2" }
|
||||
2 = { extends = "$text.base", color = "#9BA8BE" }
|
||||
|
||||
@@ -6,10 +6,10 @@ extends = "_base"
|
||||
2 = "#FFFFFF"
|
||||
|
||||
[border]
|
||||
0 = "#DBDBDC"
|
||||
0 = "#DDDDDC"
|
||||
|
||||
[text]
|
||||
base = { family = "Inconsolata", size = 14 }
|
||||
base = { family = "Inconsolata", size = 15 }
|
||||
0 = { extends = "$text.base", color = "#000000" }
|
||||
1 = { extends = "$text.base", color = "#29292B" }
|
||||
2 = { extends = "$text.base", color = "#7E7E83" }
|
||||
@@ -34,7 +34,7 @@ hover = "#0000000D"
|
||||
|
||||
[syntax]
|
||||
keyword = { color = "#0000fa", weight = "bold" }
|
||||
function = "#795e26"
|
||||
function = { color = "#795e26", underline = true }
|
||||
string = "#a82121"
|
||||
type = "#267f29"
|
||||
number = "#b5cea8"
|
||||
|
||||
@@ -97,8 +97,8 @@ impl View for FileFinder {
|
||||
.with_style(&settings.theme.selector.container)
|
||||
.boxed(),
|
||||
)
|
||||
.with_max_width(600.0)
|
||||
.with_max_height(400.0)
|
||||
.with_max_width(500.0)
|
||||
.with_max_height(420.0)
|
||||
.boxed(),
|
||||
)
|
||||
.top()
|
||||
@@ -167,19 +167,19 @@ impl FileFinder {
|
||||
self.labels_for_match(path_match);
|
||||
let container = Container::new(
|
||||
Flex::row()
|
||||
.with_child(
|
||||
Container::new(
|
||||
LineBox::new(
|
||||
Svg::new("icons/file-16.svg")
|
||||
.with_color(style.label.text.color)
|
||||
.boxed(),
|
||||
style.label.text.clone(),
|
||||
)
|
||||
.boxed(),
|
||||
)
|
||||
.with_padding_right(6.0)
|
||||
.boxed(),
|
||||
)
|
||||
// .with_child(
|
||||
// Container::new(
|
||||
// LineBox::new(
|
||||
// Svg::new("icons/file-16.svg")
|
||||
// .with_color(style.label.text.color)
|
||||
// .boxed(),
|
||||
// style.label.text.clone(),
|
||||
// )
|
||||
// .boxed(),
|
||||
// )
|
||||
// .with_padding_right(6.0)
|
||||
// .boxed(),
|
||||
// )
|
||||
.with_child(
|
||||
Flexible::new(
|
||||
1.0,
|
||||
|
||||
@@ -216,7 +216,7 @@ impl Pane {
|
||||
Flex::row()
|
||||
.with_child(
|
||||
Align::new({
|
||||
let diameter = 6.0;
|
||||
let diameter = 7.0;
|
||||
let icon_color = if item.has_conflict(cx) {
|
||||
Some(style.icon_conflict)
|
||||
} else if item.is_dirty(cx) {
|
||||
|
||||
@@ -37,7 +37,7 @@ impl Sidebar {
|
||||
side,
|
||||
items: Default::default(),
|
||||
active_item_ix: None,
|
||||
width: Rc::new(RefCell::new(220.)),
|
||||
width: Rc::new(RefCell::new(260.)),
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user