mirrors/zed
1
0
Fork 0
mirror of https://github.com/zed-industries/zed.git synced 2024-10-27 16:57:08 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

Add Icon element

Browse source
This commit is contained in:
Marshall Bowers 2023-10-04 13:46:45 -04:00
parent e84b8747a1
commit 249e6fe637
7 changed files with 231 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
crates/storybook2/src/collab_panel.rs
View file

@ -51,12 +51,12 @@ impl CollabPanel {
//:: 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))
.child(self.list_section_header("#CRDB 🗃️", true, &theme))
// List Item Large
.child(self.list_item(
"http://github.com/maxbrunsfeld.png?s=50",
"maxbrunsfeld",
theme,
&theme,
)),
)
.child(
@ -64,31 +64,31 @@ impl CollabPanel {
.py_2()
.flex()
.flex_col()
.child(self.list_section_header("CHANNELS", true, theme)),
.child(self.list_section_header("CHANNELS", true, &theme)),
)
.child(
div()
.py_2()
.flex()
.flex_col()
.child(self.list_section_header("CONTACTS", true, theme))
.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,
&theme,
),
self.list_item(
"http://github.com/nathansobo.png?s=50",
"nathansobo",
theme,
&theme,
),
self.list_item(
"http://github.com/maxbrunsfeld.png?s=50",
"maxbrunsfeld",
theme,
&theme,
),
]
})

1
crates/storybook2/src/stories/elements.rs
View file

@ -1 +1,2 @@
pub mod icon;
pub mod label;

30
crates/storybook2/src/stories/elements/icon.rs Normal file
View file

@ -0,0 +1,30 @@
use std::marker::PhantomData;
use strum::IntoEnumIterator;
use crate::ui::prelude::*;
use crate::ui::{Icon, IconElement};
use crate::story::Story;
#[derive(Element, Default)]
pub struct IconStory<S: 'static + Send + Sync> {
state_type: PhantomData<S>,
}
impl<S: 'static + Send + Sync> IconStory<S> {
pub fn new() -> Self {
Self {
state_type: PhantomData,
}
}
fn render(&mut self, cx: &mut ViewContext<S>) -> impl Element<State = S> {
let icons = Icon::iter();
Story::container(cx)
.child(Story::title_for::<_, IconElement<S>>(cx))
.child(Story::label(cx, "All Icons"))
.child(div().flex().gap_3().children(icons.map(IconElement::new)))
}
}

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

@ -12,6 +12,7 @@ use crate::ui::prelude::*;
#[derive(Debug, PartialEq, Eq, Clone, Copy, strum::Display, EnumString, EnumIter)]
#[strum(serialize_all = "snake_case")]
pub enum ElementStory {
Icon,
Label,
}
@ -20,6 +21,7 @@ impl ElementStory {
use crate::stories::elements;
match self {
Self::Icon => elements::icon::IconStory::new().into_any(),
Self::Label => elements::label::LabelStory::new().into_any(),
}
}

8
crates/storybook2/src/theme.rs
View file

@ -1,8 +1,10 @@
use std::sync::Arc;
use std::{collections::HashMap, fmt};
use gpui3::{
BorrowAppContext, Element, Hsla, Layout, LayoutId, Result, ViewContext, WindowContext,
};
use serde::{de::Visitor, Deserialize, Deserializer};
use std::{collections::HashMap, fmt};
#[derive(Deserialize, Clone, Default, Debug)]
pub struct Theme {
@ -190,6 +192,6 @@ impl<E: Element> Element for Themed<E> {
// .clone()
// }
pub fn theme<'a>(cx: &'a WindowContext) -> &'a Theme {
cx.state()
pub fn theme(cx: &WindowContext) -> Arc<Theme> {
Arc::new(cx.state::<Theme>().clone())
}

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

@ -1,5 +1,7 @@
mod icon;
mod label;
mod stack;
pub use icon::*;
pub use label::*;
pub use stack::*;

184
crates/storybook2/src/ui/elements/icon.rs Normal file
View file

@ -0,0 +1,184 @@
use std::marker::PhantomData;
use std::sync::Arc;
use gpui3::{svg, Hsla};
use strum::EnumIter;
use crate::theme::{theme, Theme};
use crate::ui::prelude::*;
#[derive(Default, PartialEq, Copy, Clone)]
pub enum IconSize {
Small,
#[default]
Large,
}
#[derive(Default, PartialEq, Copy, Clone)]
pub enum IconColor {
#[default]
Default,
Muted,
Disabled,
Placeholder,
Accent,
Error,
Warning,
Success,
Info,
}
impl IconColor {
pub fn color(self, theme: Arc<Theme>) -> Hsla {
match self {
IconColor::Default => theme.lowest.base.default.foreground,
IconColor::Muted => theme.lowest.variant.default.foreground,
IconColor::Disabled => theme.lowest.base.disabled.foreground,
IconColor::Placeholder => theme.lowest.base.disabled.foreground,
IconColor::Accent => theme.lowest.accent.default.foreground,
IconColor::Error => theme.lowest.negative.default.foreground,
IconColor::Warning => theme.lowest.warning.default.foreground,
IconColor::Success => theme.lowest.positive.default.foreground,
IconColor::Info => theme.lowest.accent.default.foreground,
}
}
}
#[derive(Default, PartialEq, Copy, Clone, EnumIter)]
pub enum Icon {
Ai,
ArrowLeft,
ArrowRight,
ArrowUpRight,
AudioOff,
AudioOn,
Bolt,
ChevronDown,
ChevronLeft,
ChevronRight,
ChevronUp,
Close,
ExclamationTriangle,
File,
FileGeneric,
FileDoc,
FileGit,
FileLock,
FileRust,
FileToml,
FileTree,
Folder,
FolderOpen,
FolderX,
#[default]
Hash,
InlayHint,
MagicWand,
MagnifyingGlass,
Maximize,
Menu,
MessageBubbles,
Mic,
MicMute,
Plus,
Quote,
Screen,
SelectAll,
Split,
SplitMessage,
Terminal,
XCircle,
Copilot,
Envelope,
}
impl Icon {
pub fn path(self) -> &'static str {
match self {
Icon::Ai => "icons/ai.svg",
Icon::ArrowLeft => "icons/arrow_left.svg",
Icon::ArrowRight => "icons/arrow_right.svg",
Icon::ArrowUpRight => "icons/arrow_up_right.svg",
Icon::AudioOff => "icons/speaker-off.svg",
Icon::AudioOn => "icons/speaker-loud.svg",
Icon::Bolt => "icons/bolt.svg",
Icon::ChevronDown => "icons/chevron_down.svg",
Icon::ChevronLeft => "icons/chevron_left.svg",
Icon::ChevronRight => "icons/chevron_right.svg",
Icon::ChevronUp => "icons/chevron_up.svg",
Icon::Close => "icons/x.svg",
Icon::ExclamationTriangle => "icons/warning.svg",
Icon::File => "icons/file.svg",
Icon::FileGeneric => "icons/file_icons/file.svg",
Icon::FileDoc => "icons/file_icons/book.svg",
Icon::FileGit => "icons/file_icons/git.svg",
Icon::FileLock => "icons/file_icons/lock.svg",
Icon::FileRust => "icons/file_icons/rust.svg",
Icon::FileToml => "icons/file_icons/toml.svg",
Icon::FileTree => "icons/project.svg",
Icon::Folder => "icons/file_icons/folder.svg",
Icon::FolderOpen => "icons/file_icons/folder_open.svg",
Icon::FolderX => "icons/stop_sharing.svg",
Icon::Hash => "icons/hash.svg",
Icon::InlayHint => "icons/inlay_hint.svg",
Icon::MagicWand => "icons/magic-wand.svg",
Icon::MagnifyingGlass => "icons/magnifying_glass.svg",
Icon::Maximize => "icons/maximize.svg",
Icon::Menu => "icons/menu.svg",
Icon::MessageBubbles => "icons/conversations.svg",
Icon::Mic => "icons/mic.svg",
Icon::MicMute => "icons/mic-mute.svg",
Icon::Plus => "icons/plus.svg",
Icon::Quote => "icons/quote.svg",
Icon::Screen => "icons/desktop.svg",
Icon::SelectAll => "icons/select-all.svg",
Icon::Split => "icons/split.svg",
Icon::SplitMessage => "icons/split_message.svg",
Icon::Terminal => "icons/terminal.svg",
Icon::XCircle => "icons/error.svg",
Icon::Copilot => "icons/copilot.svg",
Icon::Envelope => "icons/feedback.svg",
}
}
}
#[derive(Element, Clone)]
pub struct IconElement<S: 'static + Send + Sync> {
state_type: PhantomData<S>,
icon: Icon,
color: IconColor,
size: IconSize,
}
impl<S: 'static + Send + Sync> IconElement<S> {
pub fn new(icon: Icon) -> Self {
Self {
state_type: PhantomData,
icon,
color: IconColor::default(),
size: IconSize::default(),
}
}
pub fn color(mut self, color: IconColor) -> Self {
self.color = color;
self
}
pub fn size(mut self, size: IconSize) -> Self {
self.size = size;
self
}
fn render(&mut self, cx: &mut ViewContext<S>) -> impl Element<State = S> {
let theme = theme(cx);
let fill = self.color.color(theme);
let sized_svg = match self.size {
IconSize::Small => svg().size_3p5(),
IconSize::Large => svg().size_4(),
};
sized_svg.flex_none().path(self.icon.path()).fill(fill)
}
}