Yehowshua/ZIm
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Continue refining theme, update tabs & tab bar

Browse source
This commit is contained in:
Nate Butler 2023-11-01 01:41:33 -04:00
parent 0efd69c60f
commit bfb1f5ecf0
7 changed files with 52 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -77,7 +77,7 @@ fn main() {
WindowOptions { WindowOptions {
bounds: WindowBounds::Fixed(Bounds { bounds: WindowBounds::Fixed(Bounds {
origin: Default::default(), origin: Default::default(),
size: size(px(1700.), px(980.)).into(), size: size(px(1500.), px(780.)).into(),
}), }),
..Default::default() ..Default::default()
}, },

3
crates/theme2/src/colors.rs
View file

@ -64,6 +64,7 @@ pub struct ThemeColors {
pub element_selected: Hsla, pub element_selected: Hsla,
pub element_disabled: Hsla, pub element_disabled: Hsla,
pub element_placeholder: Hsla, pub element_placeholder: Hsla,
pub element_drop_target: Hsla,
pub ghost_element: Hsla, pub ghost_element: Hsla,
pub ghost_element_hover: Hsla, pub ghost_element_hover: Hsla,
pub ghost_element_active: Hsla, pub ghost_element_active: Hsla,
@ -83,6 +84,8 @@ pub struct ThemeColors {
pub title_bar: Hsla, pub title_bar: Hsla,
pub toolbar: Hsla, pub toolbar: Hsla,
pub tab_bar: Hsla, pub tab_bar: Hsla,
pub tab_inactive: Hsla,
pub tab_active: Hsla,
pub editor: Hsla, pub editor: Hsla,
pub editor_subheader: Hsla, pub editor_subheader: Hsla,
pub editor_active_line: Hsla, pub editor_active_line: Hsla,

42
crates/theme2/src/default_colors.rs
View file

@ -25,7 +25,7 @@ impl Default for StatusColors {
fn default() -> Self { fn default() -> Self {
Self { Self {
conflict: red().dark(11).into(), conflict: red().dark(11).into(),
created: green().dark(11).into(), created: grass().dark(11).into(),
deleted: red().dark(11).into(), deleted: red().dark(11).into(),
error: red().dark(11).into(), error: red().dark(11).into(),
hidden: neutral().dark(11).into(), hidden: neutral().dark(11).into(),
@ -33,7 +33,7 @@ impl Default for StatusColors {
info: blue().dark(11).into(), info: blue().dark(11).into(),
modified: yellow().dark(11).into(), modified: yellow().dark(11).into(),
renamed: blue().dark(11).into(), renamed: blue().dark(11).into(),
success: green().dark(11).into(), success: grass().dark(11).into(),
warning: yellow().dark(11).into(), warning: yellow().dark(11).into(),
} }
} }
@ -43,9 +43,9 @@ impl Default for GitStatusColors {
fn default() -> Self { fn default() -> Self {
Self { Self {
conflict: orange().dark(11), conflict: orange().dark(11),
created: green().dark(11), created: grass().dark(11),
deleted: red().dark(11), deleted: red().dark(11),
ignored: green().dark(11), ignored: neutral().dark(11),
modified: yellow().dark(11), modified: yellow().dark(11),
renamed: blue().dark(11), renamed: blue().dark(11),
} }
@ -209,6 +209,7 @@ impl ThemeColors {
element_selected: neutral().light(5).into(), element_selected: neutral().light(5).into(),
element_disabled: neutral().light_alpha(3).into(), element_disabled: neutral().light_alpha(3).into(),
element_placeholder: neutral().light(11).into(), element_placeholder: neutral().light(11).into(),
element_drop_target: blue().light_alpha(2).into(),
ghost_element: system.transparent, ghost_element: system.transparent,
ghost_element_hover: neutral().light(4).into(), ghost_element_hover: neutral().light(4).into(),
ghost_element_active: neutral().light(5).into(), ghost_element_active: neutral().light(5).into(),
@ -218,16 +219,18 @@ impl ThemeColors {
text_muted: neutral().light(11).into(), text_muted: neutral().light(11).into(),
text_placeholder: neutral().light(11).into(), text_placeholder: neutral().light(11).into(),
text_disabled: neutral().light(10).into(), text_disabled: neutral().light(10).into(),
text_accent: blue().light(12).into(), text_accent: blue().light(11).into(),
icon: neutral().light(12).into(), icon: neutral().light(11).into(),
icon_muted: neutral().light(11).into(), icon_muted: neutral().light(10).into(),
icon_disabled: neutral().light(10).into(), icon_disabled: neutral().light(9).into(),
icon_placeholder: neutral().light(11).into(), icon_placeholder: neutral().light(10).into(),
icon_accent: blue().light(12).into(), icon_accent: blue().light(11).into(),
status_bar: neutral().light(2).into(), status_bar: neutral().light(2).into(),
title_bar: neutral().light(2).into(), title_bar: neutral().light(2).into(),
toolbar: neutral().light(2).into(), toolbar: neutral().light(1).into(),
tab_bar: neutral().light(2).into(), tab_bar: neutral().light(2).into(),
tab_active: neutral().light(1).into(),
tab_inactive: neutral().light(2).into(),
editor: neutral().light(1).into(), editor: neutral().light(1).into(),
editor_subheader: neutral().light(2).into(), editor_subheader: neutral().light(2).into(),
editor_active_line: neutral().light_alpha(3).into(), editor_active_line: neutral().light_alpha(3).into(),
@ -251,6 +254,7 @@ impl ThemeColors {
element_selected: neutral().dark(5).into(), element_selected: neutral().dark(5).into(),
element_disabled: neutral().dark_alpha(3).into(), element_disabled: neutral().dark_alpha(3).into(),
element_placeholder: neutral().dark(11).into(), element_placeholder: neutral().dark(11).into(),
element_drop_target: blue().dark_alpha(2).into(),
ghost_element: system.transparent, ghost_element: system.transparent,
ghost_element_hover: neutral().dark(4).into(), ghost_element_hover: neutral().dark(4).into(),
ghost_element_active: neutral().dark(5).into(), ghost_element_active: neutral().dark(5).into(),
@ -260,16 +264,18 @@ impl ThemeColors {
text_muted: neutral().dark(11).into(), text_muted: neutral().dark(11).into(),
text_placeholder: neutral().dark(11).into(), text_placeholder: neutral().dark(11).into(),
text_disabled: neutral().dark(10).into(), text_disabled: neutral().dark(10).into(),
text_accent: blue().dark(12).into(), text_accent: blue().dark(11).into(),
icon: neutral().dark(12).into(), icon: neutral().dark(11).into(),
icon_muted: neutral().dark(11).into(), icon_muted: neutral().dark(10).into(),
icon_disabled: neutral().dark(10).into(), icon_disabled: neutral().dark(9).into(),
icon_placeholder: neutral().dark(11).into(), icon_placeholder: neutral().dark(10).into(),
icon_accent: blue().dark(12).into(), icon_accent: blue().dark(11).into(),
status_bar: neutral().dark(2).into(), status_bar: neutral().dark(2).into(),
title_bar: neutral().dark(2).into(), title_bar: neutral().dark(2).into(),
toolbar: neutral().dark(2).into(), toolbar: neutral().dark(1).into(),
tab_bar: neutral().dark(2).into(), tab_bar: neutral().dark(2).into(),
tab_active: neutral().dark(1).into(),
tab_inactive: neutral().dark(2).into(),
editor: neutral().dark(1).into(), editor: neutral().dark(1).into(),
editor_subheader: neutral().dark(2).into(), editor_subheader: neutral().dark(2).into(),
editor_active_line: neutral().dark_alpha(3).into(), editor_active_line: neutral().dark_alpha(3).into(),

12
crates/ui2/src/components/tab.rs
View file

@ -108,13 +108,13 @@ impl Tab {
let close_icon = || IconElement::new(Icon::Close).color(IconColor::Muted); let close_icon = || IconElement::new(Icon::Close).color(IconColor::Muted);
let (tab_bg, tab_hover_bg, tab_active_bg) = match self.current { let (tab_bg, tab_hover_bg, tab_active_bg) = match self.current {
true => ( false => (
cx.theme().colors().ghost_element, cx.theme().colors().tab_inactive,
cx.theme().colors().ghost_element_hover, cx.theme().colors().ghost_element_hover,
cx.theme().colors().ghost_element_active, cx.theme().colors().ghost_element_active,
), ),
false => ( true => (
cx.theme().colors().element, cx.theme().colors().tab_active,
cx.theme().colors().element_hover, cx.theme().colors().element_hover,
cx.theme().colors().element_active, cx.theme().colors().element_active,
), ),
@ -127,7 +127,7 @@ impl Tab {
div() div()
.id(self.id.clone()) .id(self.id.clone())
.on_drag(move |_view, cx| cx.build_view(|cx| drag_state.clone())) .on_drag(move |_view, cx| cx.build_view(|cx| drag_state.clone()))
.drag_over::<TabDragState>(|d| d.bg(black())) .drag_over::<TabDragState>(|d| d.bg(cx.theme().colors().element_drop_target))
.on_drop(|_view, state: View<TabDragState>, cx| { .on_drop(|_view, state: View<TabDragState>, cx| {
dbg!(state.read(cx)); dbg!(state.read(cx));
}) })
@ -144,7 +144,7 @@ impl Tab {
.px_1() .px_1()
.flex() .flex()
.items_center() .items_center()
.gap_1() .gap_1p5()
.children(has_fs_conflict.then(|| { .children(has_fs_conflict.then(|| {
IconElement::new(Icon::ExclamationTriangle) IconElement::new(Icon::ExclamationTriangle)
.size(crate::IconSize::Small) .size(crate::IconSize::Small)

8
crates/ui2/src/components/tab_bar.rs
View file

@ -27,6 +27,7 @@ impl TabBar {
let (can_navigate_back, can_navigate_forward) = self.can_navigate; let (can_navigate_back, can_navigate_forward) = self.can_navigate;
div() div()
.group("tab_bar")
.id(self.id.clone()) .id(self.id.clone())
.w_full() .w_full()
.flex() .flex()
@ -34,6 +35,7 @@ impl TabBar {
// Left Side // Left Side
.child( .child(
div() div()
.relative()
.px_1() .px_1()
.flex() .flex()
.flex_none() .flex_none()
@ -41,6 +43,7 @@ impl TabBar {
// Nav Buttons // Nav Buttons
.child( .child(
div() div()
.right_0()
.flex() .flex()
.items_center() .items_center()
.gap_px() .gap_px()
@ -67,10 +70,15 @@ impl TabBar {
// Right Side // Right Side
.child( .child(
div() div()
// We only use absolute here since we don't
// have opacity or `hidden()` yet
.absolute()
.neg_top_7()
.px_1() .px_1()
.flex() .flex()
.flex_none() .flex_none()
.gap_2() .gap_2()
.group_hover("tab_bar", |this| this.top_0())
// Nav Buttons // Nav Buttons
.child( .child(
div() div()

20
crates/ui2/src/elements/icon.rs
View file

@ -26,18 +26,16 @@ pub enum IconColor {
impl IconColor { impl IconColor {
pub fn color(self, cx: &WindowContext) -> Hsla { pub fn color(self, cx: &WindowContext) -> Hsla {
let theme_colors = cx.theme().colors();
match self { match self {
IconColor::Default => theme_colors.icon, IconColor::Default => cx.theme().colors().icon,
IconColor::Muted => theme_colors.icon_muted, IconColor::Muted => cx.theme().colors().icon_muted,
IconColor::Disabled => theme_colors.icon_disabled, IconColor::Disabled => cx.theme().colors().icon_disabled,
IconColor::Placeholder => theme_colors.icon_placeholder, IconColor::Placeholder => cx.theme().colors().icon_placeholder,
IconColor::Accent => theme_colors.icon_accent, IconColor::Accent => cx.theme().colors().icon_accent,
IconColor::Error => gpui2::red(), IconColor::Error => cx.theme().status().error,
IconColor::Warning => gpui2::red(), IconColor::Warning => cx.theme().status().warning,
IconColor::Success => gpui2::red(), IconColor::Success => cx.theme().status().success,
IconColor::Info => gpui2::red(), IconColor::Info => cx.theme().status().info,
} }
} }
} }

3
crates/ui2/src/elements/label.rs
View file

@ -79,8 +79,7 @@ impl Label {
this.relative().child( this.relative().child(
div() div()
.absolute() .absolute()
.top_px() .top_1_2()
.my_auto()
.w_full() .w_full()
.h_px() .h_px()
.bg(LabelColor::Hidden.hsla(cx)), .bg(LabelColor::Hidden.hsla(cx)),