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

Make list_item toggleable, improve optional left_icon on list item

Browse source 
Co-Authored-By: Julia <30666851+ForLoveOfCats@users.noreply.github.com>
This commit is contained in:
Nate Butler 2023-09-19 11:52:35 -04:00
parent 7e300079ce
commit 748ad5f05a
4 changed files with 73 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

6
crates/storybook/src/prelude.rs
View file

@ -47,3 +47,9 @@ pub enum SelectedState {
PartiallySelected,
Selected,
}
#[derive(Debug, Copy, Clone, PartialEq, Eq)]
pub enum ToggleState {
Toggled,
NotToggled,
}

30
crates/storybook/src/ui/component/list_item.rs
View file

@ -1,4 +1,4 @@
use crate::prelude::InteractionState;
use crate::prelude::{InteractionState, ToggleState};
use crate::theme::theme;
use crate::ui::{icon, IconAsset, Label};
use gpui2::geometry::rems;
@ -12,6 +12,7 @@ pub struct ListItem {
left_icon: Option<IconAsset>,
indent_level: f32,
state: InteractionState,
toggle: Option<ToggleState>,
}
pub fn list_item(label: Label) -> ListItem {
@ -20,6 +21,7 @@ pub fn list_item(label: Label) -> ListItem {
indent_level: 0.0,
left_icon: None,
state: InteractionState::default(),
toggle: None,
}
}
@ -28,10 +30,17 @@ impl ListItem {
self.indent_level = indent_level;
self
}
pub fn set_toggle(mut self, toggle: ToggleState) -> Self {
self.toggle = Some(toggle);
self
}
pub fn left_icon(mut self, left_icon: Option<IconAsset>) -> Self {
self.left_icon = left_icon;
self
}
pub fn state(mut self, state: InteractionState) -> Self {
self.state = state;
self
@ -40,7 +49,7 @@ impl ListItem {
fn render<V: 'static>(&mut self, _: &mut V, cx: &mut ViewContext<V>) -> impl IntoElement<V> {
let theme = theme(cx);
let mut el = div()
div()
.fill(theme.middle.base.default.background)
.hover()
.fill(theme.middle.base.hovered.background)
@ -53,13 +62,14 @@ impl ListItem {
.ml(rems(0.75 * self.indent_level.clone()))
.flex()
.gap_2()
.items_center(),
);
if self.left_icon.is_some() {
el = el.child(icon(self.left_icon.clone().unwrap()))
}
el.child(self.label.clone())
.items_center()
.children(match self.toggle {
Some(ToggleState::NotToggled) => Some(icon(IconAsset::ChevronRight)),
Some(ToggleState::Toggled) => Some(icon(IconAsset::ChevronDown)),
None => None,
})
.children(self.left_icon.map(|i| icon(i)))
.child(self.label.clone()),
)
}
}

46
crates/storybook/src/ui/element/icon.rs
View file

@ -1,11 +1,13 @@
use std::borrow::Cow;
use crate::theme::theme;
use gpui2::elements::svg;
use gpui2::style::StyleHelpers;
use gpui2::IntoElement;
use gpui2::{Element, ViewContext};
// Icon::Hash
// icon(IconAsset::Hash).color(IconColor::Warning)
// Icon::new(IconAsset::Hash).color(IconColor::Warning)
#[derive(Default, PartialEq, Copy, Clone)]
pub enum IconAsset {
Ai,
@ -18,19 +20,29 @@ pub enum IconAsset {
File,
Folder,
FolderOpen,
ChevronDown,
ChevronUp,
ChevronLeft,
ChevronRight,
}
pub fn icon_asset(asset: IconAsset) -> impl Into<Cow<'static, str>> {
match asset {
IconAsset::Ai => "icons/ai.svg",
IconAsset::ArrowLeft => "icons/arrow_left.svg",
IconAsset::ArrowRight => "icons/arrow_right.svg",
IconAsset::ArrowUpRight => "icons/arrow_up_right.svg",
IconAsset::Bolt => "icons/bolt.svg",
IconAsset::Hash => "icons/hash.svg",
IconAsset::File => "icons/file_icons/file.svg",
IconAsset::Folder => "icons/file_icons/folder.svg",
IconAsset::FolderOpen => "icons/file_icons/folder_open.svg",
impl IconAsset {
pub fn path(self) -> &'static str {
match self {
IconAsset::Ai => "icons/ai.svg",
IconAsset::ArrowLeft => "icons/arrow_left.svg",
IconAsset::ArrowRight => "icons/arrow_right.svg",
IconAsset::ArrowUpRight => "icons/arrow_up_right.svg",
IconAsset::Bolt => "icons/bolt.svg",
IconAsset::Hash => "icons/hash.svg",
IconAsset::ChevronDown => "icons/chevron_down.svg",
IconAsset::ChevronUp => "icons/chevron_up.svg",
IconAsset::ChevronLeft => "icons/chevron_left.svg",
IconAsset::ChevronRight => "icons/chevron_right.svg",
IconAsset::File => "icons/file_icons/file.svg",
IconAsset::Folder => "icons/file_icons/folder.svg",
IconAsset::FolderOpen => "icons/file_icons/folder_open.svg",
}
}
}
@ -43,12 +55,18 @@ pub fn icon(asset: IconAsset) -> Icon {
Icon { asset }
}
// impl Icon {
// pub fn new(asset: IconAsset) -> Icon {
// Icon { asset }
// }
// }
impl Icon {
fn render<V: 'static>(&mut self, _: &mut V, cx: &mut ViewContext<V>) -> impl IntoElement<V> {
let theme = theme(cx);
svg()
.path(icon_asset(self.asset))
.path(self.asset.path())
.size_4()
.fill(theme.lowest.base.default.foreground)
}

21
crates/storybook/src/ui/module/project_panel.rs
View file

@ -1,5 +1,5 @@
use crate::{
prelude::InteractionState,
prelude::{InteractionState, ToggleState},
theme::theme,
ui::{input, label, list_item, IconAsset, LabelColor},
};
@ -44,21 +44,30 @@ impl<V: 'static> ProjectPanel<V> {
div().flex().flex_col().children(
std::iter::repeat_with(|| {
vec![
list_item(label("sqlez").color(LabelColor::Modified))
.left_icon(IconAsset::FolderOpen.into())
.indent_level(0.0)
.set_toggle(ToggleState::NotToggled),
list_item(label("storybook").color(LabelColor::Modified))
.left_icon(IconAsset::FolderOpen.into())
.indent_level(0.0),
.indent_level(0.0)
.set_toggle(ToggleState::Toggled),
list_item(label("docs").color(LabelColor::Default))
.left_icon(IconAsset::Folder.into())
.indent_level(1.0),
.indent_level(1.0)
.set_toggle(ToggleState::Toggled),
list_item(label("src").color(LabelColor::Modified))
.left_icon(IconAsset::FolderOpen.into())
.indent_level(2.0),
.indent_level(2.0)
.set_toggle(ToggleState::Toggled),
list_item(label("ui").color(LabelColor::Modified))
.left_icon(IconAsset::FolderOpen.into())
.indent_level(3.0),
.indent_level(3.0)
.set_toggle(ToggleState::Toggled),
list_item(label("component").color(LabelColor::Created))
.left_icon(IconAsset::FolderOpen.into())
.indent_level(4.0),
.indent_level(4.0)
.set_toggle(ToggleState::Toggled),
list_item(label("facepile.rs").color(LabelColor::Default))
.left_icon(IconAsset::File.into())
.indent_level(5.0),