Restructure ui into just elements and components (#3023)
This PR restructures the `ui` crate into just `elements` and `components`. This was already done on the `gpui2-ui` branch, just getting it onto `main`. Release Notes: - N/A --------- Co-authored-by: Nate Butler <nate@zed.dev>
This commit is contained in:
Marshall Bowers
GitHub
parent
895386cfaf
commit
0697d08e54
16 changed files with 22 additions and 28 deletions
66
crates/ui/src/components/chat_panel.rs
Normal file
66
crates/ui/src/components/chat_panel.rs
Normal file
|
|
@ -0,0 +1,66 @@
|
|||
use std::marker::PhantomData;
|
||||
|
||||
use gpui2::elements::div::ScrollState;
|
||||
use gpui2::style::StyleHelpers;
|
||||
use gpui2::{elements::div, IntoElement};
|
||||
use gpui2::{Element, ParentElement, ViewContext};
|
||||
|
||||
use crate::theme::theme;
|
||||
use crate::{icon_button, IconAsset};
|
||||
|
||||
#[derive(Element)]
|
||||
pub struct ChatPanel<V: 'static> {
|
||||
view_type: PhantomData<V>,
|
||||
scroll_state: ScrollState,
|
||||
}
|
||||
|
||||
pub fn chat_panel<V: 'static>(scroll_state: ScrollState) -> ChatPanel<V> {
|
||||
ChatPanel {
|
||||
view_type: PhantomData,
|
||||
scroll_state,
|
||||
}
|
||||
}
|
||||
|
||||
impl<V: 'static> ChatPanel<V> {
|
||||
fn render(&mut self, _: &mut V, cx: &mut ViewContext<V>) -> impl IntoElement<V> {
|
||||
let theme = theme(cx);
|
||||
|
||||
div()
|
||||
.h_full()
|
||||
.flex()
|
||||
// Header
|
||||
.child(
|
||||
div()
|
||||
.px_2()
|
||||
.flex()
|
||||
.gap_2()
|
||||
// Nav Buttons
|
||||
.child("#gpui2"),
|
||||
)
|
||||
// Chat Body
|
||||
.child(
|
||||
div()
|
||||
.w_full()
|
||||
.flex()
|
||||
.flex_col()
|
||||
.overflow_y_scroll(self.scroll_state.clone())
|
||||
.child("body"),
|
||||
)
|
||||
// Composer
|
||||
.child(
|
||||
div()
|
||||
.px_2()
|
||||
.flex()
|
||||
.gap_2()
|
||||
// Nav Buttons
|
||||
.child(
|
||||
div()
|
||||
.flex()
|
||||
.items_center()
|
||||
.gap_px()
|
||||
.child(icon_button().icon(IconAsset::Plus))
|
||||
.child(icon_button().icon(IconAsset::Split)),
|
||||
),
|
||||
)
|
||||
}
|
||||
}
|
||||
177
crates/ui/src/components/collab_panel.rs
Normal file
177
crates/ui/src/components/collab_panel.rs
Normal file
|
|
@ -0,0 +1,177 @@
|
|||
use crate::theme::{theme, Theme};
|
||||
use gpui2::{
|
||||
elements::{div, div::ScrollState, img, svg},
|
||||
style::{StyleHelpers, Styleable},
|
||||
ArcCow, Element, IntoElement, ParentElement, ViewContext,
|
||||
};
|
||||
use std::marker::PhantomData;
|
||||
|
||||
#[derive(Element)]
|
||||
pub struct CollabPanelElement<V: 'static> {
|
||||
view_type: PhantomData<V>,
|
||||
scroll_state: ScrollState,
|
||||
}
|
||||
|
||||
// When I improve child view rendering, I'd like to have V implement a trait that
|
||||
// provides the scroll state, among other things.
|
||||
pub fn collab_panel<V: 'static>(scroll_state: ScrollState) -> CollabPanelElement<V> {
|
||||
CollabPanelElement {
|
||||
view_type: PhantomData,
|
||||
scroll_state,
|
||||
}
|
||||
}
|
||||
|
||||
impl<V: 'static> CollabPanelElement<V> {
|
||||
fn render(&mut self, _: &mut V, cx: &mut ViewContext<V>) -> impl IntoElement<V> {
|
||||
let theme = theme(cx);
|
||||
|
||||
// Panel
|
||||
div()
|
||||
.w_64()
|
||||
.h_full()
|
||||
.flex()
|
||||
.flex_col()
|
||||
.font("Zed Sans Extended")
|
||||
.text_color(theme.middle.base.default.foreground)
|
||||
.border_color(theme.middle.base.default.border)
|
||||
.border()
|
||||
.fill(theme.middle.base.default.background)
|
||||
.child(
|
||||
div()
|
||||
.w_full()
|
||||
.flex()
|
||||
.flex_col()
|
||||
.overflow_y_scroll(self.scroll_state.clone())
|
||||
// List Container
|
||||
.child(
|
||||
div()
|
||||
.fill(theme.lowest.base.default.background)
|
||||
.pb_1()
|
||||
.border_color(theme.lowest.base.default.border)
|
||||
.border_b()
|
||||
//:: https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-parent-state
|
||||
// .group()
|
||||
// List Section Header
|
||||
.child(self.list_section_header("#CRDB", true, &theme))
|
||||
// List Item Large
|
||||
.child(self.list_item(
|
||||
"http://github.com/maxbrunsfeld.png?s=50",
|
||||
"maxbrunsfeld",
|
||||
&theme,
|
||||
)),
|
||||
)
|
||||
.child(
|
||||
div()
|
||||
.py_2()
|
||||
.flex()
|
||||
.flex_col()
|
||||
.child(self.list_section_header("CHANNELS", true, &theme)),
|
||||
)
|
||||
.child(
|
||||
div()
|
||||
.py_2()
|
||||
.flex()
|
||||
.flex_col()
|
||||
.child(self.list_section_header("CONTACTS", true, &theme))
|
||||
.children(
|
||||
std::iter::repeat_with(|| {
|
||||
vec![
|
||||
self.list_item(
|
||||
"http://github.com/as-cii.png?s=50",
|
||||
"as-cii",
|
||||
&theme,
|
||||
),
|
||||
self.list_item(
|
||||
"http://github.com/nathansobo.png?s=50",
|
||||
"nathansobo",
|
||||
&theme,
|
||||
),
|
||||
self.list_item(
|
||||
"http://github.com/maxbrunsfeld.png?s=50",
|
||||
"maxbrunsfeld",
|
||||
&theme,
|
||||
),
|
||||
]
|
||||
})
|
||||
.take(3)
|
||||
.flatten(),
|
||||
),
|
||||
),
|
||||
)
|
||||
.child(
|
||||
div()
|
||||
.h_7()
|
||||
.px_2()
|
||||
.border_t()
|
||||
.border_color(theme.middle.variant.default.border)
|
||||
.flex()
|
||||
.items_center()
|
||||
.child(
|
||||
div()
|
||||
.text_sm()
|
||||
.text_color(theme.middle.variant.default.foreground)
|
||||
.child("Find..."),
|
||||
),
|
||||
)
|
||||
}
|
||||
|
||||
fn list_section_header(
|
||||
&self,
|
||||
label: impl Into<ArcCow<'static, str>>,
|
||||
expanded: bool,
|
||||
theme: &Theme,
|
||||
) -> impl Element<V> {
|
||||
div()
|
||||
.h_7()
|
||||
.px_2()
|
||||
.flex()
|
||||
.justify_between()
|
||||
.items_center()
|
||||
.child(div().flex().gap_1().text_sm().child(label))
|
||||
.child(
|
||||
div().flex().h_full().gap_1().items_center().child(
|
||||
svg()
|
||||
.path(if expanded {
|
||||
"icons/caret_down.svg"
|
||||
} else {
|
||||
"icons/caret_up.svg"
|
||||
})
|
||||
.w_3p5()
|
||||
.h_3p5()
|
||||
.fill(theme.middle.variant.default.foreground),
|
||||
),
|
||||
)
|
||||
}
|
||||
|
||||
fn list_item(
|
||||
&self,
|
||||
avatar_uri: impl Into<ArcCow<'static, str>>,
|
||||
label: impl Into<ArcCow<'static, str>>,
|
||||
theme: &Theme,
|
||||
) -> impl Element<V> {
|
||||
div()
|
||||
.h_7()
|
||||
.px_2()
|
||||
.flex()
|
||||
.items_center()
|
||||
.hover()
|
||||
.fill(theme.lowest.variant.hovered.background)
|
||||
.active()
|
||||
.fill(theme.lowest.variant.pressed.background)
|
||||
.child(
|
||||
div()
|
||||
.flex()
|
||||
.items_center()
|
||||
.gap_1()
|
||||
.text_sm()
|
||||
.child(
|
||||
img()
|
||||
.uri(avatar_uri)
|
||||
.size_3p5()
|
||||
.rounded_full()
|
||||
.fill(theme.middle.positive.default.foreground),
|
||||
)
|
||||
.child(label),
|
||||
)
|
||||
}
|
||||
}
|
||||
31
crates/ui/src/components/command_palette.rs
Normal file
31
crates/ui/src/components/command_palette.rs
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
use gpui2::elements::div;
|
||||
use gpui2::{elements::div::ScrollState, ViewContext};
|
||||
use gpui2::{Element, IntoElement, ParentElement};
|
||||
use std::marker::PhantomData;
|
||||
|
||||
use crate::{example_editor_actions, palette, OrderMethod};
|
||||
|
||||
#[derive(Element)]
|
||||
pub struct CommandPalette<V: 'static> {
|
||||
view_type: PhantomData<V>,
|
||||
scroll_state: ScrollState,
|
||||
}
|
||||
|
||||
pub fn command_palette<V: 'static>(scroll_state: ScrollState) -> CommandPalette<V> {
|
||||
CommandPalette {
|
||||
view_type: PhantomData,
|
||||
scroll_state,
|
||||
}
|
||||
}
|
||||
|
||||
impl<V: 'static> CommandPalette<V> {
|
||||
fn render(&mut self, _: &mut V, cx: &mut ViewContext<V>) -> impl IntoElement<V> {
|
||||
div().child(
|
||||
palette(self.scroll_state.clone())
|
||||
.items(example_editor_actions())
|
||||
.placeholder("Execute a command...")
|
||||
.empty_string("No items found.")
|
||||
.default_order(OrderMethod::Ascending),
|
||||
)
|
||||
}
|
||||
}
|
||||
80
crates/ui/src/components/icon_button.rs
Normal file
80
crates/ui/src/components/icon_button.rs
Normal file
|
|
@ -0,0 +1,80 @@
|
|||
use gpui2::elements::div;
|
||||
use gpui2::style::{StyleHelpers, Styleable};
|
||||
use gpui2::{Element, IntoElement, ParentElement, ViewContext};
|
||||
|
||||
use crate::{icon, theme, IconColor};
|
||||
use crate::{prelude::*, IconAsset};
|
||||
|
||||
#[derive(Element)]
|
||||
pub struct IconButton {
|
||||
icon: IconAsset,
|
||||
color: IconColor,
|
||||
variant: ButtonVariant,
|
||||
state: InteractionState,
|
||||
}
|
||||
|
||||
pub fn icon_button() -> IconButton {
|
||||
IconButton {
|
||||
icon: IconAsset::default(),
|
||||
color: IconColor::default(),
|
||||
variant: ButtonVariant::default(),
|
||||
state: InteractionState::default(),
|
||||
}
|
||||
}
|
||||
|
||||
impl IconButton {
|
||||
pub fn new(icon: IconAsset) -> Self {
|
||||
Self {
|
||||
icon,
|
||||
color: IconColor::default(),
|
||||
variant: ButtonVariant::default(),
|
||||
state: InteractionState::default(),
|
||||
}
|
||||
}
|
||||
|
||||
pub fn icon(mut self, icon: IconAsset) -> Self {
|
||||
self.icon = icon;
|
||||
self
|
||||
}
|
||||
|
||||
pub fn color(mut self, color: IconColor) -> Self {
|
||||
self.color = color;
|
||||
self
|
||||
}
|
||||
|
||||
pub fn variant(mut self, variant: ButtonVariant) -> Self {
|
||||
self.variant = variant;
|
||||
self
|
||||
}
|
||||
|
||||
pub fn state(mut self, state: InteractionState) -> Self {
|
||||
self.state = state;
|
||||
self
|
||||
}
|
||||
|
||||
fn render<V: 'static>(&mut self, _: &mut V, cx: &mut ViewContext<V>) -> impl IntoElement<V> {
|
||||
let theme = theme(cx);
|
||||
|
||||
let icon_color = match (self.state, self.color) {
|
||||
(InteractionState::Disabled, _) => IconColor::Disabled,
|
||||
_ => self.color,
|
||||
};
|
||||
|
||||
let mut div = div();
|
||||
if self.variant == ButtonVariant::Filled {
|
||||
div = div.fill(theme.highest.on.default.background);
|
||||
}
|
||||
|
||||
div.w_7()
|
||||
.h_6()
|
||||
.flex()
|
||||
.items_center()
|
||||
.justify_center()
|
||||
.rounded_md()
|
||||
.hover()
|
||||
.fill(theme.highest.base.hovered.background)
|
||||
.active()
|
||||
.fill(theme.highest.base.pressed.background)
|
||||
.child(icon(self.icon).color(icon_color))
|
||||
}
|
||||
}
|
||||
64
crates/ui/src/components/list.rs
Normal file
64
crates/ui/src/components/list.rs
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
use crate::theme::theme;
|
||||
use crate::tokens::token;
|
||||
use crate::{icon, label, prelude::*, IconAsset, LabelColor, ListItem, ListSectionHeader};
|
||||
use gpui2::style::StyleHelpers;
|
||||
use gpui2::{elements::div, IntoElement};
|
||||
use gpui2::{Element, ParentElement, ViewContext};
|
||||
|
||||
#[derive(Element)]
|
||||
pub struct List {
|
||||
header: Option<ListSectionHeader>,
|
||||
items: Vec<ListItem>,
|
||||
empty_message: &'static str,
|
||||
toggle: Option<ToggleState>,
|
||||
// footer: Option<ListSectionFooter>,
|
||||
}
|
||||
|
||||
pub fn list(items: Vec<ListItem>) -> List {
|
||||
List {
|
||||
header: None,
|
||||
items,
|
||||
empty_message: "No items",
|
||||
toggle: None,
|
||||
}
|
||||
}
|
||||
|
||||
impl List {
|
||||
pub fn header(mut self, header: ListSectionHeader) -> Self {
|
||||
self.header = Some(header);
|
||||
self
|
||||
}
|
||||
|
||||
pub fn empty_message(mut self, empty_message: &'static str) -> Self {
|
||||
self.empty_message = empty_message;
|
||||
self
|
||||
}
|
||||
|
||||
pub fn set_toggle(mut self, toggle: ToggleState) -> Self {
|
||||
self.toggle = Some(toggle);
|
||||
self
|
||||
}
|
||||
|
||||
fn render<V: 'static>(&mut self, _: &mut V, cx: &mut ViewContext<V>) -> impl IntoElement<V> {
|
||||
let theme = theme(cx);
|
||||
let token = token();
|
||||
|
||||
let disclosure_control = match self.toggle {
|
||||
Some(ToggleState::NotToggled) => Some(icon(IconAsset::ChevronRight)),
|
||||
Some(ToggleState::Toggled) => Some(icon(IconAsset::ChevronDown)),
|
||||
None => None,
|
||||
};
|
||||
|
||||
div()
|
||||
.py_1()
|
||||
.flex()
|
||||
.flex_col()
|
||||
.children(self.header.map(|h| h))
|
||||
.children(
|
||||
self.items
|
||||
.is_empty()
|
||||
.then(|| label(self.empty_message).color(LabelColor::Muted)),
|
||||
)
|
||||
.children(self.items.iter().cloned())
|
||||
}
|
||||
}
|
||||
124
crates/ui/src/components/palette.rs
Normal file
124
crates/ui/src/components/palette.rs
Normal file
|
|
@ -0,0 +1,124 @@
|
|||
use std::marker::PhantomData;
|
||||
|
||||
use crate::prelude::OrderMethod;
|
||||
use crate::theme::theme;
|
||||
use crate::{label, palette_item, LabelColor, PaletteItem};
|
||||
use gpui2::elements::div::ScrollState;
|
||||
use gpui2::style::{StyleHelpers, Styleable};
|
||||
use gpui2::{elements::div, IntoElement};
|
||||
use gpui2::{Element, ParentElement, ViewContext};
|
||||
|
||||
#[derive(Element)]
|
||||
pub struct Palette<V: 'static> {
|
||||
view_type: PhantomData<V>,
|
||||
scroll_state: ScrollState,
|
||||
input_placeholder: &'static str,
|
||||
empty_string: &'static str,
|
||||
items: Vec<PaletteItem>,
|
||||
default_order: OrderMethod,
|
||||
}
|
||||
|
||||
pub fn palette<V: 'static>(scroll_state: ScrollState) -> Palette<V> {
|
||||
Palette {
|
||||
view_type: PhantomData,
|
||||
scroll_state,
|
||||
input_placeholder: "Find something...",
|
||||
empty_string: "No items found.",
|
||||
items: vec![],
|
||||
default_order: OrderMethod::default(),
|
||||
}
|
||||
}
|
||||
|
||||
impl<V: 'static> Palette<V> {
|
||||
pub fn items(mut self, mut items: Vec<PaletteItem>) -> Self {
|
||||
items.sort_by_key(|item| item.label);
|
||||
self.items = items;
|
||||
self
|
||||
}
|
||||
|
||||
pub fn placeholder(mut self, input_placeholder: &'static str) -> Self {
|
||||
self.input_placeholder = input_placeholder;
|
||||
self
|
||||
}
|
||||
|
||||
pub fn empty_string(mut self, empty_string: &'static str) -> Self {
|
||||
self.empty_string = empty_string;
|
||||
self
|
||||
}
|
||||
|
||||
// TODO: Hook up sort order
|
||||
pub fn default_order(mut self, default_order: OrderMethod) -> Self {
|
||||
self.default_order = default_order;
|
||||
self
|
||||
}
|
||||
|
||||
fn render(&mut self, _: &mut V, cx: &mut ViewContext<V>) -> impl IntoElement<V> {
|
||||
let theme = theme(cx);
|
||||
|
||||
div()
|
||||
.w_96()
|
||||
.rounded_lg()
|
||||
.fill(theme.lowest.base.default.background)
|
||||
.border()
|
||||
.border_color(theme.lowest.base.default.border)
|
||||
.flex()
|
||||
.flex_col()
|
||||
.child(
|
||||
div()
|
||||
.flex()
|
||||
.flex_col()
|
||||
.gap_px()
|
||||
.child(
|
||||
div().py_0p5().px_1().flex().flex_col().child(
|
||||
div().px_2().py_0p5().child(
|
||||
label(self.input_placeholder).color(LabelColor::Placeholder),
|
||||
),
|
||||
),
|
||||
)
|
||||
.child(div().h_px().w_full().fill(theme.lowest.base.default.border))
|
||||
.child(
|
||||
div()
|
||||
.py_0p5()
|
||||
.px_1()
|
||||
.flex()
|
||||
.flex_col()
|
||||
.grow()
|
||||
.max_h_96()
|
||||
.overflow_y_scroll(self.scroll_state.clone())
|
||||
.children(
|
||||
vec![if self.items.is_empty() {
|
||||
Some(
|
||||
div()
|
||||
.flex()
|
||||
.flex_row()
|
||||
.justify_between()
|
||||
.px_2()
|
||||
.py_1()
|
||||
.child(
|
||||
label(self.empty_string).color(LabelColor::Muted),
|
||||
),
|
||||
)
|
||||
} else {
|
||||
None
|
||||
}]
|
||||
.into_iter()
|
||||
.flatten(),
|
||||
)
|
||||
.children(self.items.iter().map(|item| {
|
||||
div()
|
||||
.flex()
|
||||
.flex_row()
|
||||
.justify_between()
|
||||
.px_2()
|
||||
.py_0p5()
|
||||
.rounded_lg()
|
||||
.hover()
|
||||
.fill(theme.lowest.base.hovered.background)
|
||||
.active()
|
||||
.fill(theme.lowest.base.pressed.background)
|
||||
.child(palette_item(item.label, item.keybinding))
|
||||
})),
|
||||
),
|
||||
)
|
||||
}
|
||||
}
|
||||
62
crates/ui/src/components/project_panel.rs
Normal file
62
crates/ui/src/components/project_panel.rs
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
use crate::{
|
||||
input, list, list_section_header, prelude::*, static_project_panel_project_items,
|
||||
static_project_panel_single_items, theme,
|
||||
};
|
||||
|
||||
use gpui2::{
|
||||
elements::{div, div::ScrollState},
|
||||
style::StyleHelpers,
|
||||
ParentElement, ViewContext,
|
||||
};
|
||||
use gpui2::{Element, IntoElement};
|
||||
use std::marker::PhantomData;
|
||||
|
||||
#[derive(Element)]
|
||||
pub struct ProjectPanel<V: 'static> {
|
||||
view_type: PhantomData<V>,
|
||||
scroll_state: ScrollState,
|
||||
}
|
||||
|
||||
pub fn project_panel<V: 'static>(scroll_state: ScrollState) -> ProjectPanel<V> {
|
||||
ProjectPanel {
|
||||
view_type: PhantomData,
|
||||
scroll_state,
|
||||
}
|
||||
}
|
||||
|
||||
impl<V: 'static> ProjectPanel<V> {
|
||||
fn render(&mut self, _: &mut V, cx: &mut ViewContext<V>) -> impl IntoElement<V> {
|
||||
let theme = theme(cx);
|
||||
|
||||
div()
|
||||
.w_56()
|
||||
.h_full()
|
||||
.flex()
|
||||
.flex_col()
|
||||
.fill(theme.middle.base.default.background)
|
||||
.child(
|
||||
div()
|
||||
.w_56()
|
||||
.flex()
|
||||
.flex_col()
|
||||
.overflow_y_scroll(self.scroll_state.clone())
|
||||
.child(
|
||||
list(static_project_panel_single_items())
|
||||
.header(list_section_header("FILES").set_toggle(ToggleState::Toggled))
|
||||
.empty_message("No files in directory")
|
||||
.set_toggle(ToggleState::Toggled),
|
||||
)
|
||||
.child(
|
||||
list(static_project_panel_project_items())
|
||||
.header(list_section_header("PROJECT").set_toggle(ToggleState::Toggled))
|
||||
.empty_message("No folders in directory")
|
||||
.set_toggle(ToggleState::Toggled),
|
||||
),
|
||||
)
|
||||
.child(
|
||||
input("Find something...")
|
||||
.value("buffe".to_string())
|
||||
.state(InteractionState::Focused),
|
||||
)
|
||||
}
|
||||
}
|
||||
147
crates/ui/src/components/status_bar.rs
Normal file
147
crates/ui/src/components/status_bar.rs
Normal file
|
|
@ -0,0 +1,147 @@
|
|||
use std::marker::PhantomData;
|
||||
|
||||
use gpui2::style::StyleHelpers;
|
||||
use gpui2::{elements::div, IntoElement};
|
||||
use gpui2::{Element, ParentElement, ViewContext};
|
||||
|
||||
use crate::theme::{theme, Theme};
|
||||
use crate::{icon_button, text_button, tool_divider, IconAsset};
|
||||
|
||||
#[derive(Default, PartialEq)]
|
||||
pub enum Tool {
|
||||
#[default]
|
||||
ProjectPanel,
|
||||
CollaborationPanel,
|
||||
Terminal,
|
||||
Assistant,
|
||||
Feedback,
|
||||
Diagnostics,
|
||||
}
|
||||
|
||||
struct ToolGroup {
|
||||
active_index: Option<usize>,
|
||||
tools: Vec<Tool>,
|
||||
}
|
||||
|
||||
impl Default for ToolGroup {
|
||||
fn default() -> Self {
|
||||
ToolGroup {
|
||||
active_index: None,
|
||||
tools: vec![],
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#[derive(Element)]
|
||||
pub struct StatusBar<V: 'static> {
|
||||
view_type: PhantomData<V>,
|
||||
left_tools: Option<ToolGroup>,
|
||||
right_tools: Option<ToolGroup>,
|
||||
bottom_tools: Option<ToolGroup>,
|
||||
}
|
||||
|
||||
pub fn status_bar<V: 'static>() -> StatusBar<V> {
|
||||
StatusBar {
|
||||
view_type: PhantomData,
|
||||
left_tools: None,
|
||||
right_tools: None,
|
||||
bottom_tools: None,
|
||||
}
|
||||
}
|
||||
|
||||
impl<V: 'static> StatusBar<V> {
|
||||
pub fn left_tool(mut self, tool: Tool, active_index: Option<usize>) -> Self {
|
||||
self.left_tools = {
|
||||
let mut tools = vec![tool];
|
||||
tools.extend(self.left_tools.take().unwrap_or_default().tools);
|
||||
Some(ToolGroup {
|
||||
active_index,
|
||||
tools,
|
||||
})
|
||||
};
|
||||
self
|
||||
}
|
||||
|
||||
pub fn right_tool(mut self, tool: Tool, active_index: Option<usize>) -> Self {
|
||||
self.right_tools = {
|
||||
let mut tools = vec![tool];
|
||||
tools.extend(self.left_tools.take().unwrap_or_default().tools);
|
||||
Some(ToolGroup {
|
||||
active_index,
|
||||
tools,
|
||||
})
|
||||
};
|
||||
self
|
||||
}
|
||||
|
||||
pub fn bottom_tool(mut self, tool: Tool, active_index: Option<usize>) -> Self {
|
||||
self.bottom_tools = {
|
||||
let mut tools = vec![tool];
|
||||
tools.extend(self.left_tools.take().unwrap_or_default().tools);
|
||||
Some(ToolGroup {
|
||||
active_index,
|
||||
tools,
|
||||
})
|
||||
};
|
||||
self
|
||||
}
|
||||
|
||||
fn render(&mut self, _: &mut V, cx: &mut ViewContext<V>) -> impl IntoElement<V> {
|
||||
let theme = theme(cx);
|
||||
|
||||
div()
|
||||
.py_0p5()
|
||||
.px_1()
|
||||
.flex()
|
||||
.items_center()
|
||||
.justify_between()
|
||||
.w_full()
|
||||
.fill(theme.lowest.base.default.background)
|
||||
.child(self.left_tools(&theme))
|
||||
.child(self.right_tools(&theme))
|
||||
}
|
||||
|
||||
fn left_tools(&self, theme: &Theme) -> impl Element<V> {
|
||||
div()
|
||||
.flex()
|
||||
.items_center()
|
||||
.gap_1()
|
||||
.child(icon_button().icon(IconAsset::FileTree))
|
||||
.child(icon_button().icon(IconAsset::Hash))
|
||||
.child(tool_divider())
|
||||
.child(icon_button().icon(IconAsset::XCircle))
|
||||
}
|
||||
fn right_tools(&self, theme: &Theme) -> impl Element<V> {
|
||||
div()
|
||||
.flex()
|
||||
.items_center()
|
||||
.gap_2()
|
||||
.child(
|
||||
div()
|
||||
.flex()
|
||||
.items_center()
|
||||
.gap_1()
|
||||
.child(text_button("116:25"))
|
||||
.child(text_button("Rust")),
|
||||
)
|
||||
.child(tool_divider())
|
||||
.child(
|
||||
div()
|
||||
.flex()
|
||||
.items_center()
|
||||
.gap_1()
|
||||
.child(icon_button().icon(IconAsset::Copilot))
|
||||
.child(icon_button().icon(IconAsset::Envelope)),
|
||||
)
|
||||
.child(tool_divider())
|
||||
.child(
|
||||
div()
|
||||
.flex()
|
||||
.items_center()
|
||||
.gap_1()
|
||||
.child(icon_button().icon(IconAsset::Terminal))
|
||||
.child(icon_button().icon(IconAsset::MessageBubbles))
|
||||
.child(icon_button().icon(IconAsset::Ai)),
|
||||
)
|
||||
}
|
||||
}
|
||||
93
crates/ui/src/components/tab_bar.rs
Normal file
93
crates/ui/src/components/tab_bar.rs
Normal file
|
|
@ -0,0 +1,93 @@
|
|||
use std::marker::PhantomData;
|
||||
|
||||
use gpui2::elements::div::ScrollState;
|
||||
use gpui2::style::StyleHelpers;
|
||||
use gpui2::{elements::div, IntoElement};
|
||||
use gpui2::{Element, ParentElement, ViewContext};
|
||||
|
||||
use crate::prelude::InteractionState;
|
||||
use crate::theme::theme;
|
||||
use crate::{icon_button, tab, IconAsset};
|
||||
|
||||
#[derive(Element)]
|
||||
pub struct TabBar<V: 'static> {
|
||||
view_type: PhantomData<V>,
|
||||
scroll_state: ScrollState,
|
||||
}
|
||||
|
||||
pub fn tab_bar<V: 'static>(scroll_state: ScrollState) -> TabBar<V> {
|
||||
TabBar {
|
||||
view_type: PhantomData,
|
||||
scroll_state,
|
||||
}
|
||||
}
|
||||
|
||||
impl<V: 'static> TabBar<V> {
|
||||
fn render(&mut self, _: &mut V, cx: &mut ViewContext<V>) -> impl IntoElement<V> {
|
||||
let theme = theme(cx);
|
||||
let can_navigate_back = true;
|
||||
let can_navigate_forward = false;
|
||||
div()
|
||||
.w_full()
|
||||
.flex()
|
||||
// Left Side
|
||||
.child(
|
||||
div()
|
||||
.px_1()
|
||||
.flex()
|
||||
.flex_none()
|
||||
.gap_2()
|
||||
// Nav Buttons
|
||||
.child(
|
||||
div()
|
||||
.flex()
|
||||
.items_center()
|
||||
.gap_px()
|
||||
.child(
|
||||
icon_button()
|
||||
.icon(IconAsset::ArrowLeft)
|
||||
.state(InteractionState::Enabled.if_enabled(can_navigate_back)),
|
||||
)
|
||||
.child(
|
||||
icon_button().icon(IconAsset::ArrowRight).state(
|
||||
InteractionState::Enabled.if_enabled(can_navigate_forward),
|
||||
),
|
||||
),
|
||||
),
|
||||
)
|
||||
.child(
|
||||
div().w_0().flex_1().h_full().child(
|
||||
div()
|
||||
.flex()
|
||||
.gap_1()
|
||||
.overflow_x_scroll(self.scroll_state.clone())
|
||||
.child(tab("Cargo.toml", false))
|
||||
.child(tab("Channels Panel", true))
|
||||
.child(tab("channels_panel.rs", false))
|
||||
.child(tab("workspace.rs", false))
|
||||
.child(tab("icon_button.rs", false))
|
||||
.child(tab("storybook.rs", false))
|
||||
.child(tab("theme.rs", false))
|
||||
.child(tab("theme_registry.rs", false))
|
||||
.child(tab("styleable_helpers.rs", false)),
|
||||
),
|
||||
)
|
||||
// Right Side
|
||||
.child(
|
||||
div()
|
||||
.px_1()
|
||||
.flex()
|
||||
.flex_none()
|
||||
.gap_2()
|
||||
// Nav Buttons
|
||||
.child(
|
||||
div()
|
||||
.flex()
|
||||
.items_center()
|
||||
.gap_px()
|
||||
.child(icon_button().icon(IconAsset::Plus))
|
||||
.child(icon_button().icon(IconAsset::Split)),
|
||||
),
|
||||
)
|
||||
}
|
||||
}
|
||||
97
crates/ui/src/components/title_bar.rs
Normal file
97
crates/ui/src/components/title_bar.rs
Normal file
|
|
@ -0,0 +1,97 @@
|
|||
use std::marker::PhantomData;
|
||||
|
||||
use gpui2::elements::div;
|
||||
use gpui2::style::StyleHelpers;
|
||||
use gpui2::{Element, IntoElement, ParentElement, ViewContext};
|
||||
|
||||
use crate::prelude::Shape;
|
||||
use crate::{
|
||||
avatar, follow_group, icon_button, text_button, theme, tool_divider, traffic_lights, IconAsset,
|
||||
IconColor,
|
||||
};
|
||||
|
||||
#[derive(Element)]
|
||||
pub struct TitleBar<V: 'static> {
|
||||
view_type: PhantomData<V>,
|
||||
}
|
||||
|
||||
pub fn title_bar<V: 'static>() -> TitleBar<V> {
|
||||
TitleBar {
|
||||
view_type: PhantomData,
|
||||
}
|
||||
}
|
||||
|
||||
impl<V: 'static> TitleBar<V> {
|
||||
fn render(&mut self, _: &mut V, cx: &mut ViewContext<V>) -> impl IntoElement<V> {
|
||||
let theme = theme(cx);
|
||||
let player_list = vec![
|
||||
avatar("https://avatars.githubusercontent.com/u/1714999?v=4"),
|
||||
avatar("https://avatars.githubusercontent.com/u/1714999?v=4"),
|
||||
];
|
||||
|
||||
div()
|
||||
.flex()
|
||||
.items_center()
|
||||
.justify_between()
|
||||
.w_full()
|
||||
.h_8()
|
||||
.fill(theme.lowest.base.default.background)
|
||||
.child(
|
||||
div()
|
||||
.flex()
|
||||
.items_center()
|
||||
.h_full()
|
||||
.gap_4()
|
||||
.px_2()
|
||||
.child(traffic_lights())
|
||||
// === Project Info === //
|
||||
.child(
|
||||
div()
|
||||
.flex()
|
||||
.items_center()
|
||||
.gap_1()
|
||||
.child(text_button("maxbrunsfeld"))
|
||||
.child(text_button("zed"))
|
||||
.child(text_button("nate/gpui2-ui-components")),
|
||||
)
|
||||
.child(follow_group(player_list.clone()).player(0))
|
||||
.child(follow_group(player_list.clone()).player(1))
|
||||
.child(follow_group(player_list.clone()).player(2)),
|
||||
)
|
||||
.child(
|
||||
div()
|
||||
.flex()
|
||||
.items_center()
|
||||
.child(
|
||||
div()
|
||||
.px_2()
|
||||
.flex()
|
||||
.items_center()
|
||||
.gap_1()
|
||||
.child(icon_button().icon(IconAsset::FolderX))
|
||||
.child(icon_button().icon(IconAsset::Close)),
|
||||
)
|
||||
.child(tool_divider())
|
||||
.child(
|
||||
div()
|
||||
.px_2()
|
||||
.flex()
|
||||
.items_center()
|
||||
.gap_1()
|
||||
.child(icon_button().icon(IconAsset::Mic))
|
||||
.child(icon_button().icon(IconAsset::AudioOn))
|
||||
.child(
|
||||
icon_button()
|
||||
.icon(IconAsset::Screen)
|
||||
.color(IconColor::Accent),
|
||||
),
|
||||
)
|
||||
.child(
|
||||
div().px_2().flex().items_center().child(
|
||||
avatar("https://avatars.githubusercontent.com/u/1714999?v=4")
|
||||
.shape(Shape::RoundedRectangle),
|
||||
),
|
||||
),
|
||||
)
|
||||
}
|
||||
}
|
||||
80
crates/ui/src/components/workspace.rs
Normal file
80
crates/ui/src/components/workspace.rs
Normal file
|
|
@ -0,0 +1,80 @@
|
|||
use crate::{chat_panel, collab_panel, project_panel, status_bar, tab_bar, theme, title_bar};
|
||||
|
||||
use gpui2::{
|
||||
elements::{div, div::ScrollState},
|
||||
style::StyleHelpers,
|
||||
Element, IntoElement, ParentElement, ViewContext,
|
||||
};
|
||||
|
||||
#[derive(Element, Default)]
|
||||
struct WorkspaceElement {
|
||||
project_panel_scroll_state: ScrollState,
|
||||
collab_panel_scroll_state: ScrollState,
|
||||
right_scroll_state: ScrollState,
|
||||
tab_bar_scroll_state: ScrollState,
|
||||
palette_scroll_state: ScrollState,
|
||||
}
|
||||
|
||||
pub fn workspace<V: 'static>() -> impl Element<V> {
|
||||
WorkspaceElement::default()
|
||||
}
|
||||
|
||||
impl WorkspaceElement {
|
||||
fn render<V: 'static>(&mut self, _: &mut V, cx: &mut ViewContext<V>) -> impl IntoElement<V> {
|
||||
let theme = theme(cx);
|
||||
|
||||
div()
|
||||
// Elevation Level 0
|
||||
.size_full()
|
||||
.flex()
|
||||
.flex_col()
|
||||
.font("Zed Sans Extended")
|
||||
.gap_0()
|
||||
.justify_start()
|
||||
.items_start()
|
||||
.text_color(theme.lowest.base.default.foreground)
|
||||
.fill(theme.lowest.base.default.background)
|
||||
.relative()
|
||||
// Elevation Level 1
|
||||
.child(title_bar())
|
||||
.child(
|
||||
div()
|
||||
.flex_1()
|
||||
.w_full()
|
||||
.flex()
|
||||
.flex_row()
|
||||
.overflow_hidden()
|
||||
.child(project_panel(self.project_panel_scroll_state.clone()))
|
||||
.child(collab_panel(self.collab_panel_scroll_state.clone()))
|
||||
.child(
|
||||
div()
|
||||
.h_full()
|
||||
.flex_1()
|
||||
.fill(theme.highest.base.default.background)
|
||||
.child(
|
||||
div()
|
||||
.flex()
|
||||
.flex_col()
|
||||
.flex_1()
|
||||
.child(tab_bar(self.tab_bar_scroll_state.clone())),
|
||||
),
|
||||
)
|
||||
.child(chat_panel(self.right_scroll_state.clone())),
|
||||
)
|
||||
.child(status_bar())
|
||||
// Elevation Level 3
|
||||
// .child(
|
||||
// div()
|
||||
// .absolute()
|
||||
// .top_0()
|
||||
// .left_0()
|
||||
// .size_full()
|
||||
// .flex()
|
||||
// .justify_center()
|
||||
// .items_center()
|
||||
// // .fill(theme.lowest.base.default.background)
|
||||
// // Elevation Level 4
|
||||
// .child(command_palette(self.palette_scroll_state.clone())),
|
||||
// )
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue