Scaffold Toolbar and Breadcrumb components (#3020)

This PR scaffolds the `Toolbar` and `Breadcrumb` components.

Right now they both just consist of hardcoded data.

<img width="846" alt="Screenshot 2023-09-22 at 4 54 00 PM"
src="https://github.com/zed-industries/zed/assets/1486634/70578df2-7216-42d2-97ef-d38b83fb4a25">

<img width="799" alt="Screenshot 2023-09-22 at 4 46 04 PM"
src="https://github.com/zed-industries/zed/assets/1486634/73ca3d8a-baf9-4ed4-b4c4-279c674672a3">

Release Notes:

- N/A
This commit is contained in:
Marshall Bowers 2023-09-22 16:57:33 -04:00 committed by GitHub
parent 27e3e09bb9
commit fe4248cf34
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 122 additions and 2 deletions

View file

@ -1,2 +1,4 @@
pub mod breadcrumb;
pub mod facepile;
pub mod toolbar;
pub mod traffic_lights;

View file

@ -0,0 +1,16 @@
use gpui2::{Element, IntoElement, ParentElement, ViewContext};
use ui::breadcrumb;
use crate::story::Story;
#[derive(Element, Default)]
pub struct BreadcrumbStory {}
impl BreadcrumbStory {
fn render<V: 'static>(&mut self, _: &mut V, cx: &mut ViewContext<V>) -> impl IntoElement<V> {
Story::container()
.child(Story::title_for::<_, ui::Breadcrumb>())
.child(Story::label("Default"))
.child(breadcrumb())
}
}

View file

@ -0,0 +1,16 @@
use gpui2::{Element, IntoElement, ParentElement, ViewContext};
use ui::toolbar;
use crate::story::Story;
#[derive(Element, Default)]
pub struct ToolbarStory {}
impl ToolbarStory {
fn render<V: 'static>(&mut self, _: &mut V, cx: &mut ViewContext<V>) -> impl IntoElement<V> {
Story::container()
.child(Story::title_for::<_, ui::Toolbar>())
.child(Story::label("Default"))
.child(toolbar())
}
}

View file

@ -14,7 +14,9 @@ use legacy_theme::ThemeSettings;
use log::LevelFilter;
use settings::{default_settings, SettingsStore};
use simplelog::SimpleLogger;
use stories::components::breadcrumb::BreadcrumbStory;
use stories::components::facepile::FacepileStory;
use stories::components::toolbar::ToolbarStory;
use stories::components::traffic_lights::TrafficLightsStory;
use stories::elements::avatar::AvatarStory;
use strum::EnumString;
@ -64,7 +66,9 @@ enum ElementStory {
#[derive(Debug, Clone, Copy, EnumString)]
#[strum(serialize_all = "snake_case")]
enum ComponentStory {
Breadcrumb,
Facepile,
Toolbar,
TrafficLights,
}
@ -97,9 +101,15 @@ fn main() {
Some(StorySelector::Element(ElementStory::Avatar)) => {
view(|cx| render_story(&mut ViewContext::new(cx), AvatarStory::default()))
}
Some(StorySelector::Component(ComponentStory::Breadcrumb)) => {
view(|cx| render_story(&mut ViewContext::new(cx), BreadcrumbStory::default()))
}
Some(StorySelector::Component(ComponentStory::Facepile)) => {
view(|cx| render_story(&mut ViewContext::new(cx), FacepileStory::default()))
}
Some(StorySelector::Component(ComponentStory::Toolbar)) => {
view(|cx| render_story(&mut ViewContext::new(cx), ToolbarStory::default()))
}
Some(StorySelector::Component(ComponentStory::TrafficLights)) => view(|cx| {
render_story(&mut ViewContext::new(cx), TrafficLightsStory::default())
}),

View file

@ -3,7 +3,7 @@ use gpui2::{
style::StyleHelpers,
Element, IntoElement, ParentElement, ViewContext,
};
use ui::{chat_panel, project_panel, status_bar, tab_bar, theme, title_bar};
use ui::{chat_panel, project_panel, status_bar, tab_bar, theme, title_bar, toolbar};
#[derive(Element, Default)]
pub struct WorkspaceElement {
@ -45,7 +45,8 @@ impl WorkspaceElement {
.flex()
.flex_col()
.flex_1()
.child(tab_bar(self.tab_bar_scroll_state.clone())),
.child(tab_bar(self.tab_bar_scroll_state.clone()))
.child(toolbar()),
),
)
.child(chat_panel(self.right_scroll_state.clone())),

View file

@ -1,17 +1,21 @@
mod breadcrumb;
mod facepile;
mod follow_group;
mod list_item;
mod list_section_header;
mod palette_item;
mod tab;
mod toolbar;
mod traffic_lights;
pub use breadcrumb::*;
pub use facepile::*;
pub use follow_group::*;
pub use list_item::*;
pub use list_section_header::*;
pub use palette_item::*;
pub use tab::*;
pub use toolbar::*;
pub use traffic_lights::*;
use std::marker::PhantomData;

View file

@ -0,0 +1,36 @@
use gpui2::elements::div;
use gpui2::style::{StyleHelpers, Styleable};
use gpui2::{Element, IntoElement, ParentElement, ViewContext};
use crate::theme;
#[derive(Element)]
pub struct Breadcrumb {}
pub fn breadcrumb() -> Breadcrumb {
Breadcrumb {}
}
impl Breadcrumb {
fn render<V: 'static>(&mut self, _: &mut V, cx: &mut ViewContext<V>) -> impl IntoElement<V> {
let theme = theme(cx);
div()
.px_1()
.flex()
.flex_row()
// TODO: Read font from theme (or settings?).
.font("Zed Mono Extended")
.text_sm()
.text_color(theme.middle.base.default.foreground)
.rounded_md()
.hover()
.fill(theme.highest.base.hovered.background)
// TODO: Replace hardcoded breadcrumbs.
.child("crates/ui/src/components/toolbar.rs")
.child(" ")
.child("impl Breadcrumb")
.child(" ")
.child("fn render")
}
}

View file

@ -0,0 +1,35 @@
use gpui2::elements::div;
use gpui2::style::StyleHelpers;
use gpui2::{Element, IntoElement, ParentElement, ViewContext};
use crate::{breadcrumb, icon_button, theme};
pub struct ToolbarItem {}
#[derive(Element)]
pub struct Toolbar {
items: Vec<ToolbarItem>,
}
pub fn toolbar() -> Toolbar {
Toolbar { items: Vec::new() }
}
impl Toolbar {
fn render<V: 'static>(&mut self, _: &mut V, cx: &mut ViewContext<V>) -> impl IntoElement<V> {
let theme = theme(cx);
div()
.p_2()
.flex()
.justify_between()
.child(breadcrumb())
.child(
div()
.flex()
.child(icon_button("icons/inlay_hint.svg"))
.child(icon_button("icons/magnifying_glass.svg"))
.child(icon_button("icons/magic-wand.svg")),
)
}
}