mirror of
https://github.com/zed-industries/zed.git
synced 2024-09-20 02:47:34 +03:00
Organize design system under ui
This commit is contained in:
Nate Butler
parent
d6f24feb4a
commit
9f2a9d43b1
@ -4,22 +4,6 @@ use gpui2::{
|
||||
};
|
||||
use std::{marker::PhantomData, rc::Rc};
|
||||
|
||||
mod avatar;
|
||||
mod icon_button;
|
||||
mod tab;
|
||||
mod text_button;
|
||||
mod tool_divider;
|
||||
|
||||
pub use avatar::avatar;
|
||||
pub use avatar::Avatar;
|
||||
pub use icon_button::icon_button;
|
||||
pub use tab::tab;
|
||||
pub use tab::Tab;
|
||||
pub use text_button::text_button;
|
||||
pub use text_button::TextButton;
|
||||
pub use tool_divider::tool_divider;
|
||||
pub use tool_divider::ToolDivider;
|
||||
|
||||
struct ButtonHandlers<V, D> {
|
||||
click: Option<Rc<dyn Fn(&mut V, &D, &mut EventContext<V>)>>,
|
||||
}
|
||||
|
||||
@ -1,10 +0,0 @@
|
||||
mod chat_panel;
|
||||
mod status_bar;
|
||||
mod tab_bar;
|
||||
mod title_bar;
|
||||
|
||||
pub(crate) use chat_panel::chat_panel;
|
||||
pub use status_bar::status_bar;
|
||||
pub use status_bar::StatusBar;
|
||||
pub(crate) use tab_bar::tab_bar;
|
||||
pub(crate) use title_bar::title_bar;
|
||||
@ -12,9 +12,9 @@ use simplelog::SimpleLogger;
|
||||
mod collab_panel;
|
||||
mod components;
|
||||
mod element_ext;
|
||||
mod modules;
|
||||
mod prelude;
|
||||
mod theme;
|
||||
mod ui;
|
||||
mod workspace;
|
||||
|
||||
gpui2::actions! {
|
||||
|
||||
21
crates/storybook/src/ui.rs
Normal file
21
crates/storybook/src/ui.rs
Normal file
@ -0,0 +1,21 @@
|
||||
mod component;
|
||||
mod element;
|
||||
mod module;
|
||||
|
||||
pub use component::tab::tab;
|
||||
pub use component::tab::Tab;
|
||||
|
||||
pub use module::chat_panel::chat_panel;
|
||||
pub use module::status_bar::status_bar;
|
||||
pub use module::status_bar::StatusBar;
|
||||
pub use module::tab_bar::tab_bar;
|
||||
pub use module::title_bar::title_bar;
|
||||
|
||||
pub use element::avatar::avatar;
|
||||
pub use element::avatar::Avatar;
|
||||
pub use element::icon_button::icon_button;
|
||||
pub use element::icon_button::IconButton;
|
||||
pub use element::text_button::text_button;
|
||||
pub use element::text_button::TextButton;
|
||||
pub use element::tool_divider::tool_divider;
|
||||
pub use element::tool_divider::ToolDivider;
|
||||
1
crates/storybook/src/ui/component.rs
Normal file
1
crates/storybook/src/ui/component.rs
Normal file
@ -0,0 +1 @@
|
||||
pub(crate) mod tab;
|
||||
4
crates/storybook/src/ui/element.rs
Normal file
4
crates/storybook/src/ui/element.rs
Normal file
@ -0,0 +1,4 @@
|
||||
pub(crate) mod avatar;
|
||||
pub(crate) mod icon_button;
|
||||
pub(crate) mod text_button;
|
||||
pub(crate) mod tool_divider;
|
||||
@ -13,7 +13,7 @@ pub struct Avatar {
|
||||
shape: Shape,
|
||||
}
|
||||
|
||||
pub fn avatar<V: 'static>(src: impl Into<ArcCow<'static, str>>) -> Avatar {
|
||||
pub fn avatar(src: impl Into<ArcCow<'static, str>>) -> Avatar {
|
||||
Avatar {
|
||||
src: src.into(),
|
||||
shape: Shape::Circle,
|
||||
4
crates/storybook/src/ui/module.rs
Normal file
4
crates/storybook/src/ui/module.rs
Normal file
@ -0,0 +1,4 @@
|
||||
pub(crate) mod chat_panel;
|
||||
pub(crate) mod status_bar;
|
||||
pub(crate) mod tab_bar;
|
||||
pub(crate) mod title_bar;
|
||||
@ -1,7 +1,7 @@
|
||||
use std::marker::PhantomData;
|
||||
|
||||
use crate::components::icon_button;
|
||||
use crate::theme::theme;
|
||||
use crate::ui::icon_button;
|
||||
use gpui2::elements::div::ScrollState;
|
||||
use gpui2::style::StyleHelpers;
|
||||
use gpui2::{elements::div, IntoElement};
|
||||
@ -1,7 +1,7 @@
|
||||
use std::marker::PhantomData;
|
||||
|
||||
use crate::components::{icon_button, tool_divider};
|
||||
use crate::theme::{theme, Theme};
|
||||
use crate::ui::{icon_button, text_button, tool_divider};
|
||||
use gpui2::style::StyleHelpers;
|
||||
use gpui2::{elements::div, IntoElement};
|
||||
use gpui2::{Element, ParentElement, ViewContext};
|
||||
@ -120,8 +120,8 @@ impl<V: 'static> StatusBar<V> {
|
||||
.flex()
|
||||
.items_center()
|
||||
.gap_1()
|
||||
.child(div().px_1().text_xs().child("116:25"))
|
||||
.child(div().px_1().text_xs().child("Rust")),
|
||||
.child(text_button("116:25"))
|
||||
.child(text_button("Rust")),
|
||||
)
|
||||
.child(tool_divider())
|
||||
.child(
|
||||
@ -1,8 +1,8 @@
|
||||
use std::marker::PhantomData;
|
||||
|
||||
use crate::components::{icon_button, tab};
|
||||
use crate::prelude::InteractionState;
|
||||
use crate::theme::theme;
|
||||
use crate::ui::{icon_button, tab};
|
||||
use gpui2::elements::div::ScrollState;
|
||||
use gpui2::style::StyleHelpers;
|
||||
use gpui2::{elements::div, IntoElement};
|
||||
@ -1,8 +1,8 @@
|
||||
use std::marker::PhantomData;
|
||||
|
||||
use crate::components::{avatar, icon_button, text_button, tool_divider, Avatar, TextButton};
|
||||
use crate::prelude::Shape;
|
||||
use crate::theme::theme;
|
||||
use crate::ui::{avatar, icon_button, text_button, tool_divider};
|
||||
use gpui2::style::StyleHelpers;
|
||||
use gpui2::{elements::div, IntoElement};
|
||||
use gpui2::{Element, ParentElement, ViewContext};
|
||||
@ -100,7 +100,7 @@ impl<V: 'static> TitleBar<V> {
|
||||
)
|
||||
.child(
|
||||
div().px_2().flex().items_center().child(
|
||||
avatar::<Avatar>("https://avatars.githubusercontent.com/u/1714999?v=4")
|
||||
avatar("https://avatars.githubusercontent.com/u/1714999?v=4")
|
||||
.shape(Shape::RoundedRectangle),
|
||||
),
|
||||
),
|
||||
@ -1,11 +1,11 @@
|
||||
use crate::{
|
||||
collab_panel::collab_panel,
|
||||
modules::{chat_panel, status_bar, tab_bar, title_bar},
|
||||
theme::theme,
|
||||
ui::{chat_panel, status_bar, tab_bar, title_bar},
|
||||
};
|
||||
use gpui2::{
|
||||
elements::{div, div::ScrollState, img, svg},
|
||||
style::{StyleHelpers, Styleable},
|
||||
elements::{div, div::ScrollState},
|
||||
style::StyleHelpers,
|
||||
Element, IntoElement, ParentElement, ViewContext,
|
||||
};
|
||||
|
||||
@ -33,7 +33,7 @@ impl WorkspaceElement {
|
||||
.justify_start()
|
||||
.items_start()
|
||||
.text_color(theme.lowest.base.default.foreground)
|
||||
.fill(theme.middle.base.default.background)
|
||||
.fill(theme.lowest.base.default.background)
|
||||
.child(title_bar())
|
||||
.child(
|
||||
div()
|
||||
@ -58,396 +58,6 @@ impl WorkspaceElement {
|
||||
)
|
||||
.child(chat_panel(self.right_scroll_state.clone())),
|
||||
)
|
||||
.child(statusbar())
|
||||
.child(status_bar())
|
||||
}
|
||||
}
|
||||
|
||||
#[derive(Element)]
|
||||
struct TitleBar;
|
||||
|
||||
pub fn titlebar<V: 'static>() -> impl Element<V> {
|
||||
TitleBar
|
||||
}
|
||||
|
||||
impl TitleBar {
|
||||
fn render<V: 'static>(&mut self, _: &mut V, cx: &mut ViewContext<V>) -> impl IntoElement<V> {
|
||||
let theme = theme(cx);
|
||||
div()
|
||||
.flex()
|
||||
.items_center()
|
||||
.justify_between()
|
||||
.w_full()
|
||||
.h_8()
|
||||
.fill(theme.lowest.base.default.background)
|
||||
.child(self.left_group(cx))
|
||||
.child(self.right_group(cx))
|
||||
}
|
||||
|
||||
fn left_group<V: 'static>(&mut self, cx: &mut ViewContext<V>) -> impl IntoElement<V> {
|
||||
let theme = theme(cx);
|
||||
div()
|
||||
.flex()
|
||||
.items_center()
|
||||
.h_full()
|
||||
.gap_4()
|
||||
.px_2()
|
||||
// === Traffic Lights === //
|
||||
.child(
|
||||
div()
|
||||
.flex()
|
||||
.items_center()
|
||||
.gap_2()
|
||||
.child(
|
||||
div()
|
||||
.w_3()
|
||||
.h_3()
|
||||
.rounded_full()
|
||||
.fill(theme.lowest.positive.default.foreground),
|
||||
)
|
||||
.child(
|
||||
div()
|
||||
.w_3()
|
||||
.h_3()
|
||||
.rounded_full()
|
||||
.fill(theme.lowest.warning.default.foreground),
|
||||
)
|
||||
.child(
|
||||
div()
|
||||
.w_3()
|
||||
.h_3()
|
||||
.rounded_full()
|
||||
.fill(theme.lowest.negative.default.foreground),
|
||||
),
|
||||
)
|
||||
// === Project Info === //
|
||||
.child(
|
||||
div()
|
||||
.flex()
|
||||
.items_center()
|
||||
.gap_1()
|
||||
.child(
|
||||
div()
|
||||
.h_full()
|
||||
.flex()
|
||||
.items_center()
|
||||
.justify_center()
|
||||
.px_2()
|
||||
.rounded_md()
|
||||
.hover()
|
||||
.fill(theme.lowest.base.hovered.background)
|
||||
.active()
|
||||
.fill(theme.lowest.base.pressed.background)
|
||||
.child(div().text_sm().child("project")),
|
||||
)
|
||||
.child(
|
||||
div()
|
||||
.h_full()
|
||||
.flex()
|
||||
.items_center()
|
||||
.justify_center()
|
||||
.px_2()
|
||||
.rounded_md()
|
||||
.text_color(theme.lowest.variant.default.foreground)
|
||||
.hover()
|
||||
.fill(theme.lowest.base.hovered.background)
|
||||
.active()
|
||||
.fill(theme.lowest.base.pressed.background)
|
||||
.child(div().text_sm().child("branch")),
|
||||
),
|
||||
)
|
||||
}
|
||||
|
||||
fn right_group<V: 'static>(&mut self, cx: &mut ViewContext<V>) -> impl IntoElement<V> {
|
||||
let theme = theme(cx);
|
||||
div()
|
||||
.flex()
|
||||
.items_center()
|
||||
.h_full()
|
||||
.gap_3()
|
||||
.px_2()
|
||||
// === Actions === //
|
||||
.child(
|
||||
div().child(
|
||||
div().flex().items_center().gap_1().child(
|
||||
div().size_4().flex().items_center().justify_center().child(
|
||||
svg()
|
||||
.path("icons/exit.svg")
|
||||
.size_4()
|
||||
.fill(theme.lowest.base.default.foreground),
|
||||
),
|
||||
),
|
||||
),
|
||||
)
|
||||
.child(div().w_px().h_3().fill(theme.lowest.base.default.border))
|
||||
// === Comms === //
|
||||
.child(
|
||||
div().child(
|
||||
div()
|
||||
.flex()
|
||||
.items_center()
|
||||
.gap_px()
|
||||
.child(
|
||||
div()
|
||||
.px_2()
|
||||
.py_1()
|
||||
.rounded_md()
|
||||
.h_full()
|
||||
.flex()
|
||||
.items_center()
|
||||
.justify_center()
|
||||
.hover()
|
||||
.fill(theme.lowest.base.hovered.background)
|
||||
.active()
|
||||
.fill(theme.lowest.base.pressed.background)
|
||||
.child(
|
||||
svg()
|
||||
.path("icons/microphone.svg")
|
||||
.size_3p5()
|
||||
.fill(theme.lowest.base.default.foreground),
|
||||
),
|
||||
)
|
||||
.child(
|
||||
div()
|
||||
.px_2()
|
||||
.py_1()
|
||||
.rounded_md()
|
||||
.h_full()
|
||||
.flex()
|
||||
.items_center()
|
||||
.justify_center()
|
||||
.hover()
|
||||
.fill(theme.lowest.base.hovered.background)
|
||||
.active()
|
||||
.fill(theme.lowest.base.pressed.background)
|
||||
.child(
|
||||
svg()
|
||||
.path("icons/speaker-loud.svg")
|
||||
.size_3p5()
|
||||
.fill(theme.lowest.base.default.foreground),
|
||||
),
|
||||
)
|
||||
.child(
|
||||
div()
|
||||
.px_2()
|
||||
.py_1()
|
||||
.rounded_md()
|
||||
.h_full()
|
||||
.flex()
|
||||
.items_center()
|
||||
.justify_center()
|
||||
.hover()
|
||||
.fill(theme.lowest.base.hovered.background)
|
||||
.active()
|
||||
.fill(theme.lowest.base.pressed.background)
|
||||
.child(
|
||||
svg()
|
||||
.path("icons/desktop.svg")
|
||||
.size_3p5()
|
||||
.fill(theme.lowest.base.default.foreground),
|
||||
),
|
||||
),
|
||||
),
|
||||
)
|
||||
.child(div().w_px().h_3().fill(theme.lowest.base.default.border))
|
||||
// User Group
|
||||
.child(
|
||||
div().child(
|
||||
div()
|
||||
.px_1()
|
||||
.py_1()
|
||||
.flex()
|
||||
.items_center()
|
||||
.justify_center()
|
||||
.rounded_md()
|
||||
.gap_0p5()
|
||||
.hover()
|
||||
.fill(theme.lowest.base.hovered.background)
|
||||
.active()
|
||||
.fill(theme.lowest.base.pressed.background)
|
||||
.child(
|
||||
img()
|
||||
.uri("https://avatars.githubusercontent.com/u/1714999?v=4")
|
||||
.size_4()
|
||||
.rounded_md()
|
||||
.fill(theme.middle.on.default.foreground),
|
||||
)
|
||||
.child(
|
||||
svg()
|
||||
.path("icons/caret_down.svg")
|
||||
.w_2()
|
||||
.h_2()
|
||||
.fill(theme.lowest.variant.default.foreground),
|
||||
),
|
||||
),
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
// ================================================================================ //
|
||||
|
||||
#[derive(Element)]
|
||||
struct StatusBar;
|
||||
|
||||
pub fn statusbar<V: 'static>() -> impl Element<V> {
|
||||
StatusBar
|
||||
}
|
||||
|
||||
impl StatusBar {
|
||||
fn render<V: 'static>(&mut self, _: &mut V, cx: &mut ViewContext<V>) -> impl IntoElement<V> {
|
||||
let theme = theme(cx);
|
||||
div()
|
||||
.flex()
|
||||
.items_center()
|
||||
.justify_between()
|
||||
.w_full()
|
||||
.h_8()
|
||||
.fill(theme.lowest.base.default.background)
|
||||
.child(self.left_group(cx))
|
||||
.child(self.right_group(cx))
|
||||
}
|
||||
|
||||
fn left_group<V: 'static>(&mut self, cx: &mut ViewContext<V>) -> impl IntoElement<V> {
|
||||
let theme = theme(cx);
|
||||
div()
|
||||
.flex()
|
||||
.items_center()
|
||||
.h_full()
|
||||
.gap_4()
|
||||
.px_2()
|
||||
// === Tools === //
|
||||
.child(
|
||||
div()
|
||||
.flex()
|
||||
.items_center()
|
||||
.gap_1()
|
||||
.child(
|
||||
div()
|
||||
.w_6()
|
||||
.h_full()
|
||||
.flex()
|
||||
.items_center()
|
||||
.justify_center()
|
||||
.child(
|
||||
svg()
|
||||
.path("icons/project.svg")
|
||||
.w_4()
|
||||
.h_4()
|
||||
.fill(theme.lowest.base.default.foreground),
|
||||
),
|
||||
)
|
||||
.child(
|
||||
div()
|
||||
.w_6()
|
||||
.h_full()
|
||||
.flex()
|
||||
.items_center()
|
||||
.justify_center()
|
||||
.child(
|
||||
svg()
|
||||
.path("icons/conversations.svg")
|
||||
.w_4()
|
||||
.h_4()
|
||||
.fill(theme.lowest.base.default.foreground),
|
||||
),
|
||||
)
|
||||
.child(
|
||||
div()
|
||||
.w_6()
|
||||
.h_full()
|
||||
.flex()
|
||||
.items_center()
|
||||
.justify_center()
|
||||
.child(
|
||||
svg()
|
||||
.path("icons/file_icons/notebook.svg")
|
||||
.w_4()
|
||||
.h_4()
|
||||
.fill(theme.lowest.accent.default.foreground),
|
||||
),
|
||||
),
|
||||
)
|
||||
// === Diagnostics === //
|
||||
.child(
|
||||
div()
|
||||
.flex()
|
||||
.items_center()
|
||||
.gap_2()
|
||||
.child(
|
||||
div()
|
||||
.h_full()
|
||||
.flex()
|
||||
.items_center()
|
||||
.justify_center()
|
||||
.gap_0p5()
|
||||
.px_1()
|
||||
.text_color(theme.lowest.variant.default.foreground)
|
||||
.hover()
|
||||
.fill(theme.lowest.base.hovered.background)
|
||||
.active()
|
||||
.fill(theme.lowest.base.pressed.background)
|
||||
.child(
|
||||
svg()
|
||||
.path("icons/error.svg")
|
||||
.w_4()
|
||||
.h_4()
|
||||
.fill(theme.lowest.negative.default.foreground),
|
||||
)
|
||||
.child(div().text_sm().child("2")),
|
||||
)
|
||||
.child(
|
||||
div()
|
||||
.text_sm()
|
||||
.text_color(theme.lowest.variant.default.foreground)
|
||||
.child("Something is wrong"),
|
||||
),
|
||||
)
|
||||
}
|
||||
|
||||
fn right_group<V: 'static>(&mut self, cx: &mut ViewContext<V>) -> impl IntoElement<V> {
|
||||
let theme = theme(cx);
|
||||
div()
|
||||
.flex()
|
||||
.items_center()
|
||||
.h_full()
|
||||
.gap_4()
|
||||
.px_2()
|
||||
// === Tools === //
|
||||
.child(
|
||||
div()
|
||||
.flex()
|
||||
.items_center()
|
||||
.gap_1()
|
||||
.child(
|
||||
div()
|
||||
.w_6()
|
||||
.h_full()
|
||||
.flex()
|
||||
.items_center()
|
||||
.justify_center()
|
||||
.child(
|
||||
svg()
|
||||
.path("icons/check_circle.svg")
|
||||
.w_4()
|
||||
.h_4()
|
||||
.fill(theme.lowest.base.default.foreground),
|
||||
),
|
||||
)
|
||||
.child(
|
||||
div()
|
||||
.w_6()
|
||||
.h_full()
|
||||
.flex()
|
||||
.items_center()
|
||||
.justify_center()
|
||||
.child(
|
||||
svg()
|
||||
.path("icons/copilot.svg")
|
||||
.w_4()
|
||||
.h_4()
|
||||
.fill(theme.lowest.accent.default.foreground),
|
||||
),
|
||||
),
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user