Nate Butler created
Adds some of the UI components to allow us to visually render settings.
These are UI only and are not functional yet (@maxdeviant will be
working on these when he is back.)
You can see some examples by running `script/storybook setting`.
Release Notes:
- N/Aassets/icons/chevron_up_down.svg | 1
assets/icons/font.svg | 1
assets/icons/font_size.svg | 1
assets/icons/font_weight.svg | 1
assets/icons/line_height.svg | 6
assets/icons/visible.svg | 1
crates/storybook/src/story_selector.rs | 2
crates/ui/src/components.rs | 4
crates/ui/src/components/dropdown_menu.rs | 85 +++++
crates/ui/src/components/icon.rs | 22 +
crates/ui/src/components/setting.rs | 351 +++++++++++++++++++++++
crates/ui/src/components/stories.rs | 2
crates/ui/src/components/stories/setting.rs | 225 ++++++++++++++
crates/ui/src/selectable.rs | 20 +
14 files changed, 717 insertions(+), 5 deletions(-)
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevrons-up-down"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-type"><polyline points="4 7 4 4 20 4 20 7"/><line x1="9" x2="15" y1="20" y2="20"/><line x1="12" x2="12" y1="4" y2="20"/></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-a-large-small"><path d="M21 14h-5"/><path d="M16 16v-3.5a2.5 2.5 0 0 1 5 0V16"/><path d="M4.5 13h6"/><path d="m3 16 4.5-9 4.5 9"/></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-bold"><path d="M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8"/></svg>
@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 13.6667H12" stroke="#B3B3B3" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4 2.33333H12" stroke="#B3B3B3" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5 11L8 5L11 11" stroke="#B3B3B3" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6 9H10" stroke="#B3B3B3" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-eye"><path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></svg>
@@ -31,6 +31,7 @@ pub enum ComponentStory {
OverflowScroll,
Picker,
Scroll,
+ Setting,
Tab,
TabBar,
Text,
@@ -64,6 +65,7 @@ impl ComponentStory {
Self::ListItem => cx.new_view(|_| ui::ListItemStory).into(),
Self::OverflowScroll => cx.new_view(|_| crate::stories::OverflowScrollStory).into(),
Self::Scroll => ScrollStory::view(cx).into(),
+ Self::Setting => cx.new_view(|cx| ui::SettingStory::init(cx)).into(),
Self::Text => TextStory::view(cx).into(),
Self::Tab => cx.new_view(|_| ui::TabStory).into(),
Self::TabBar => cx.new_view(|_| ui::TabBarStory).into(),
@@ -4,6 +4,7 @@ mod checkbox;
mod context_menu;
mod disclosure;
mod divider;
+mod dropdown_menu;
mod icon;
mod indicator;
mod keybinding;
@@ -14,6 +15,7 @@ mod popover;
mod popover_menu;
mod radio;
mod right_click_menu;
+mod setting;
mod stack;
mod tab;
mod tab_bar;
@@ -30,6 +32,7 @@ pub use checkbox::*;
pub use context_menu::*;
pub use disclosure::*;
pub use divider::*;
+use dropdown_menu::*;
pub use icon::*;
pub use indicator::*;
pub use keybinding::*;
@@ -40,6 +43,7 @@ pub use popover::*;
pub use popover_menu::*;
pub use radio::*;
pub use right_click_menu::*;
+pub use setting::*;
pub use stack::*;
pub use tab::*;
pub use tab_bar::*;
@@ -0,0 +1,85 @@
+use crate::prelude::*;
+
+/// !!don't use this yet – it's not functional!!
+///
+/// pub crate until this is functional
+///
+/// just a placeholder for now for filling out the settings menu stories.
+#[derive(Debug, Clone, IntoElement)]
+pub(crate) struct DropdownMenu {
+ pub id: ElementId,
+ current_item: Option<SharedString>,
+ // items: Vec<SharedString>,
+ full_width: bool,
+ disabled: bool,
+}
+
+impl DropdownMenu {
+ pub fn new(id: impl Into<ElementId>, _cx: &WindowContext) -> Self {
+ Self {
+ id: id.into(),
+ current_item: None,
+ // items: Vec::new(),
+ full_width: false,
+ disabled: false,
+ }
+ }
+
+ pub fn current_item(mut self, current_item: Option<SharedString>) -> Self {
+ self.current_item = current_item;
+ self
+ }
+
+ pub fn full_width(mut self, full_width: bool) -> Self {
+ self.full_width = full_width;
+ self
+ }
+
+ pub fn disabled(mut self, disabled: bool) -> Self {
+ self.disabled = disabled;
+ self
+ }
+}
+
+impl RenderOnce for DropdownMenu {
+ fn render(self, cx: &mut WindowContext) -> impl IntoElement {
+ let disabled = self.disabled;
+
+ h_flex()
+ .id(self.id)
+ .justify_between()
+ .rounded_md()
+ .bg(cx.theme().colors().editor_background)
+ .pl_2()
+ .pr_1p5()
+ .py_0p5()
+ .gap_2()
+ .min_w_20()
+ .when_else(
+ self.full_width,
+ |full_width| full_width.w_full(),
+ |auto_width| auto_width.flex_none().w_auto(),
+ )
+ .when_else(
+ disabled,
+ |disabled| disabled.cursor_not_allowed(),
+ |enabled| enabled.cursor_pointer(),
+ )
+ .child(
+ Label::new(self.current_item.unwrap_or("".into())).color(if disabled {
+ Color::Disabled
+ } else {
+ Color::Default
+ }),
+ )
+ .child(
+ Icon::new(IconName::ChevronUpDown)
+ .size(IconSize::XSmall)
+ .color(if disabled {
+ Color::Disabled
+ } else {
+ Color::Muted
+ }),
+ )
+ }
+}
@@ -106,6 +106,7 @@ pub enum IconName {
ChevronLeft,
ChevronRight,
ChevronUp,
+ ChevronUpDown,
Close,
Code,
Collab,
@@ -141,6 +142,9 @@ pub enum IconName {
Folder,
FolderOpen,
FolderX,
+ Font,
+ FontSize,
+ FontWeight,
Github,
Hash,
HistoryRerun,
@@ -148,6 +152,7 @@ pub enum IconName {
IndicatorX,
InlayHint,
Library,
+ LineHeight,
Link,
ListTree,
MagicWand,
@@ -181,8 +186,8 @@ pub enum IconName {
RotateCw,
Save,
Screen,
- SelectAll,
SearchSelection,
+ SelectAll,
Server,
Settings,
Shift,
@@ -212,6 +217,7 @@ pub enum IconName {
ZedAssistant,
ZedAssistantFilled,
ZedXCopilot,
+ Visible,
}
impl IconName {
@@ -224,6 +230,7 @@ impl IconName {
IconName::ArrowLeft => "icons/arrow_left.svg",
IconName::ArrowRight => "icons/arrow_right.svg",
IconName::ArrowUp => "icons/arrow_up.svg",
+ IconName::ArrowUpFromLine => "icons/arrow_up_from_line.svg",
IconName::ArrowUpRight => "icons/arrow_up_right.svg",
IconName::AtSign => "icons/at_sign.svg",
IconName::AudioOff => "icons/speaker_off.svg",
@@ -243,6 +250,7 @@ impl IconName {
IconName::ChevronLeft => "icons/chevron_left.svg",
IconName::ChevronRight => "icons/chevron_right.svg",
IconName::ChevronUp => "icons/chevron_up.svg",
+ IconName::ChevronUpDown => "icons/chevron_up_down.svg",
IconName::Close => "icons/x.svg",
IconName::Code => "icons/code.svg",
IconName::Collab => "icons/user_group_16.svg",
@@ -278,6 +286,9 @@ impl IconName {
IconName::Folder => "icons/file_icons/folder.svg",
IconName::FolderOpen => "icons/file_icons/folder_open.svg",
IconName::FolderX => "icons/stop_sharing.svg",
+ IconName::Font => "icons/font.svg",
+ IconName::FontSize => "icons/font_size.svg",
+ IconName::FontWeight => "icons/font_weight.svg",
IconName::Github => "icons/github.svg",
IconName::Hash => "icons/hash.svg",
IconName::HistoryRerun => "icons/history_rerun.svg",
@@ -285,6 +296,7 @@ impl IconName {
IconName::IndicatorX => "icons/indicator_x.svg",
IconName::InlayHint => "icons/inlay_hint.svg",
IconName::Library => "icons/library.svg",
+ IconName::LineHeight => "icons/line_height.svg",
IconName::Link => "icons/link.svg",
IconName::ListTree => "icons/list_tree.svg",
IconName::MagicWand => "icons/magic_wand.svg",
@@ -308,18 +320,18 @@ impl IconName {
IconName::Quote => "icons/quote.svg",
IconName::Regex => "icons/regex.svg",
IconName::Replace => "icons/replace.svg",
- IconName::Reveal => "icons/reveal.svg",
IconName::ReplaceAll => "icons/replace_all.svg",
IconName::ReplaceNext => "icons/replace_next.svg",
IconName::ReplyArrowRight => "icons/reply_arrow_right.svg",
IconName::Rerun => "icons/rerun.svg",
IconName::Return => "icons/return.svg",
- IconName::RotateCw => "icons/rotate_cw.svg",
+ IconName::Reveal => "icons/reveal.svg",
IconName::RotateCcw => "icons/rotate_ccw.svg",
+ IconName::RotateCw => "icons/rotate_cw.svg",
IconName::Save => "icons/save.svg",
IconName::Screen => "icons/desktop.svg",
- IconName::SelectAll => "icons/select_all.svg",
IconName::SearchSelection => "icons/search_selection.svg",
+ IconName::SelectAll => "icons/select_all.svg",
IconName::Server => "icons/server.svg",
IconName::Settings => "icons/file_icons/settings.svg",
IconName::Shift => "icons/shift.svg",
@@ -349,7 +361,7 @@ impl IconName {
IconName::ZedAssistant => "icons/zed_assistant.svg",
IconName::ZedAssistantFilled => "icons/zed_assistant_filled.svg",
IconName::ZedXCopilot => "icons/zed_x_copilot.svg",
- IconName::ArrowUpFromLine => "icons/arrow_up_from_line.svg",
+ IconName::Visible => "icons/visible.svg",
}
}
}
@@ -0,0 +1,351 @@
+use crate::{prelude::*, Checkbox, ListHeader};
+
+use super::DropdownMenu;
+
+#[derive(PartialEq, Clone, Eq, Debug)]
+pub enum ToggleType {
+ Checkbox,
+ // Switch,
+}
+
+impl From<ToggleType> for SettingType {
+ fn from(toggle_type: ToggleType) -> Self {
+ SettingType::Toggle(toggle_type)
+ }
+}
+
+#[derive(Debug, Clone, PartialEq, Eq)]
+pub enum InputType {
+ Text,
+ Number,
+}
+
+impl From<InputType> for SettingType {
+ fn from(input_type: InputType) -> Self {
+ SettingType::Input(input_type)
+ }
+}
+
+#[derive(Debug, Clone, PartialEq, Eq)]
+pub enum SecondarySettingType {
+ Dropdown,
+}
+
+#[derive(Debug, Clone, PartialEq, Eq)]
+pub enum SettingType {
+ Toggle(ToggleType),
+ ToggleAnd(SecondarySettingType),
+ Input(InputType),
+ Dropdown,
+ Range,
+ Unsupported,
+}
+
+#[derive(Debug, Clone, IntoElement)]
+pub struct SettingsGroup {
+ pub name: String,
+ settings: Vec<SettingsItem>,
+}
+
+impl SettingsGroup {
+ pub fn new(name: impl Into<String>) -> Self {
+ Self {
+ name: name.into(),
+ settings: Vec::new(),
+ }
+ }
+
+ pub fn add_setting(mut self, setting: SettingsItem) -> Self {
+ self.settings.push(setting);
+ self
+ }
+}
+
+impl RenderOnce for SettingsGroup {
+ fn render(self, _cx: &mut WindowContext) -> impl IntoElement {
+ let empty_message = format!("No settings available for {}", self.name);
+
+ let header = ListHeader::new(self.name);
+
+ let settings = self.settings.clone().into_iter();
+
+ v_flex()
+ .p_1()
+ .gap_2()
+ .child(header)
+ .when(self.settings.len() == 0, |this| {
+ this.child(Label::new(empty_message))
+ })
+ .children(settings)
+ }
+}
+
+#[derive(Debug, Clone, PartialEq)]
+pub enum SettingLayout {
+ Stacked,
+ AutoWidth,
+ FullLine,
+ FullLineJustified,
+}
+
+#[derive(Debug, Clone, PartialEq)]
+pub struct SettingId(pub SharedString);
+
+impl From<SettingId> for ElementId {
+ fn from(id: SettingId) -> Self {
+ ElementId::Name(id.0)
+ }
+}
+
+impl From<&str> for SettingId {
+ fn from(id: &str) -> Self {
+ Self(id.to_string().into())
+ }
+}
+
+impl From<SharedString> for SettingId {
+ fn from(id: SharedString) -> Self {
+ Self(id)
+ }
+}
+
+#[derive(Debug, Clone, PartialEq)]
+pub struct SettingValue(pub SharedString);
+
+impl From<SharedString> for SettingValue {
+ fn from(value: SharedString) -> Self {
+ Self(value)
+ }
+}
+
+impl From<String> for SettingValue {
+ fn from(value: String) -> Self {
+ Self(value.into())
+ }
+}
+
+impl From<bool> for SettingValue {
+ fn from(value: bool) -> Self {
+ Self(value.to_string().into())
+ }
+}
+
+impl From<SettingValue> for bool {
+ fn from(value: SettingValue) -> Self {
+ value.0 == "true"
+ }
+}
+
+#[derive(Debug, Clone, IntoElement)]
+pub struct SettingsItem {
+ pub id: SettingId,
+ current_value: Option<SettingValue>,
+ disabled: bool,
+ hide_label: bool,
+ icon: Option<IconName>,
+ layout: SettingLayout,
+ name: SharedString,
+ // possible_values: Option<Vec<SettingValue>>,
+ setting_type: SettingType,
+ toggled: Option<bool>,
+}
+
+impl SettingsItem {
+ pub fn new(
+ id: impl Into<SettingId>,
+ name: SharedString,
+ setting_type: SettingType,
+ current_value: Option<SettingValue>,
+ ) -> Self {
+ let toggled = match setting_type {
+ SettingType::Toggle(_) | SettingType::ToggleAnd(_) => Some(false),
+ _ => None,
+ };
+
+ Self {
+ id: id.into(),
+ current_value,
+ disabled: false,
+ hide_label: false,
+ icon: None,
+ layout: SettingLayout::FullLine,
+ name,
+ // possible_values: None,
+ setting_type,
+ toggled,
+ }
+ }
+
+ pub fn layout(mut self, layout: SettingLayout) -> Self {
+ self.layout = layout;
+ self
+ }
+
+ pub fn toggled(mut self, toggled: bool) -> Self {
+ self.toggled = Some(toggled);
+ self
+ }
+
+ // pub fn hide_label(mut self, hide_label: bool) -> Self {
+ // self.hide_label = hide_label;
+ // self
+ // }
+
+ pub fn icon(mut self, icon: IconName) -> Self {
+ self.icon = Some(icon);
+ self
+ }
+
+ // pub fn disabled(mut self, disabled: bool) -> Self {
+ // self.disabled = disabled;
+ // self
+ // }
+}
+
+impl RenderOnce for SettingsItem {
+ fn render(self, cx: &mut WindowContext) -> impl IntoElement {
+ let id: ElementId = self.id.clone().into();
+
+ // When the setting is disabled or toggled off, we don't want any secondary elements to be interactable
+ let secondary_element_disabled = self.disabled || self.toggled == Some(false);
+
+ let full_width = match self.layout {
+ SettingLayout::FullLine | SettingLayout::FullLineJustified => true,
+ _ => false,
+ };
+
+ let hide_label = self.hide_label || self.icon.is_some();
+
+ let justified = match (self.layout.clone(), self.setting_type.clone()) {
+ (_, SettingType::ToggleAnd(_)) => true,
+ (SettingLayout::FullLineJustified, _) => true,
+ _ => false,
+ };
+
+ let (setting_type, current_value) = (self.setting_type.clone(), self.current_value.clone());
+ let current_string = if let Some(current_value) = current_value.clone() {
+ Some(current_value.0)
+ } else {
+ None
+ };
+
+ let toggleable = match setting_type {
+ SettingType::Toggle(_) => true,
+ SettingType::ToggleAnd(_) => true,
+ _ => false,
+ };
+
+ let setting_element = match setting_type {
+ SettingType::Toggle(_) => None,
+ SettingType::ToggleAnd(secondary_setting_type) => match secondary_setting_type {
+ SecondarySettingType::Dropdown => Some(
+ DropdownMenu::new(id.clone(), &cx)
+ .current_item(current_string)
+ .disabled(secondary_element_disabled)
+ .into_any_element(),
+ ),
+ },
+ SettingType::Input(input_type) => match input_type {
+ InputType::Text => Some(div().child("text").into_any_element()),
+ InputType::Number => Some(div().child("number").into_any_element()),
+ },
+ SettingType::Dropdown => Some(
+ DropdownMenu::new(id.clone(), &cx)
+ .current_item(current_string)
+ .full_width(true)
+ .into_any_element(),
+ ),
+ SettingType::Range => Some(div().child("range").into_any_element()),
+ SettingType::Unsupported => None,
+ };
+
+ let checkbox = Checkbox::new(
+ ElementId::Name(format!("toggle-{}", self.id.0).to_string().into()),
+ self.toggled.into(),
+ )
+ .disabled(self.disabled);
+
+ let toggle_element = match (toggleable, self.setting_type.clone()) {
+ (true, SettingType::Toggle(toggle_type)) => match toggle_type {
+ ToggleType::Checkbox => Some(checkbox.into_any_element()),
+ },
+ (true, SettingType::ToggleAnd(_)) => Some(checkbox.into_any_element()),
+ (_, _) => None,
+ };
+
+ let item = if self.layout == SettingLayout::Stacked {
+ v_flex()
+ } else {
+ h_flex()
+ };
+
+ item.id(id)
+ .gap_2()
+ .w_full()
+ .when_some(self.icon, |this, icon| {
+ this.child(div().px_0p5().child(Icon::new(icon).color(Color::Muted)))
+ })
+ .children(toggle_element)
+ .children(if hide_label {
+ None
+ } else {
+ Some(Label::new(self.name.clone()))
+ })
+ .when(justified, |this| this.child(div().flex_1().size_full()))
+ .child(
+ h_flex()
+ .when(full_width, |this| this.w_full())
+ .when(self.layout == SettingLayout::FullLineJustified, |this| {
+ this.justify_end()
+ })
+ .children(setting_element),
+ )
+ // help flex along when full width is disabled
+ //
+ // this probably isn't needed, but fighting with flex to
+ // get this right without inspection tools will be a pain
+ .when(!full_width, |this| this.child(div().size_full().flex_1()))
+ }
+}
+
+pub struct SettingsMenu {
+ name: SharedString,
+ groups: Vec<SettingsGroup>,
+}
+
+impl SettingsMenu {
+ pub fn new(name: impl Into<SharedString>) -> Self {
+ Self {
+ name: name.into(),
+ groups: Vec::new(),
+ }
+ }
+
+ pub fn add_group(mut self, group: SettingsGroup) -> Self {
+ self.groups.push(group);
+ self
+ }
+}
+
+impl Render for SettingsMenu {
+ fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
+ let is_empty = self.groups.is_empty();
+ v_flex()
+ .id(ElementId::Name(self.name.clone()))
+ .elevation_2(cx)
+ .min_w_56()
+ .max_w_96()
+ .max_h_2_3()
+ .px_2()
+ .when_else(
+ is_empty,
+ |empty| empty.py_1(),
+ |not_empty| not_empty.pt_0().pb_1(),
+ )
+ .gap_1()
+ .when(is_empty, |this| {
+ this.child(Label::new("No settings found").color(Color::Muted))
+ })
+ .children(self.groups.clone())
+ }
+}
@@ -10,6 +10,7 @@ mod label;
mod list;
mod list_header;
mod list_item;
+mod setting;
mod tab;
mod tab_bar;
mod title_bar;
@@ -28,6 +29,7 @@ pub use label::*;
pub use list::*;
pub use list_header::*;
pub use list_item::*;
+pub use setting::*;
pub use tab::*;
pub use tab_bar::*;
pub use title_bar::*;
@@ -0,0 +1,225 @@
+use gpui::View;
+
+use crate::prelude::*;
+
+use crate::{
+ SecondarySettingType, SettingLayout, SettingType, SettingsGroup, SettingsItem, SettingsMenu,
+ ToggleType,
+};
+
+pub struct SettingStory {
+ menus: Vec<(SharedString, View<SettingsMenu>)>,
+}
+
+impl SettingStory {
+ pub fn new() -> Self {
+ Self { menus: Vec::new() }
+ }
+
+ pub fn init(cx: &mut ViewContext<Self>) -> Self {
+ let mut story = Self::new();
+ story.empty_menu(cx);
+ story.editor_example(cx);
+ story.menu_single_group(cx);
+ story
+ }
+}
+
+impl SettingStory {
+ pub fn empty_menu(&mut self, cx: &mut ViewContext<Self>) {
+ let menu = cx.new_view(|_cx| SettingsMenu::new("Empty Menu"));
+
+ self.menus.push(("Empty Menu".into(), menu));
+ }
+
+ pub fn menu_single_group(&mut self, cx: &mut ViewContext<Self>) {
+ let theme_setting = SettingsItem::new(
+ "theme-setting",
+ "Theme".into(),
+ SettingType::Dropdown,
+ Some(cx.theme().name.clone().into()),
+ )
+ .layout(SettingLayout::Stacked);
+ let high_contrast_setting = SettingsItem::new(
+ "theme-contrast",
+ "Use high contrast theme".into(),
+ SettingType::Toggle(ToggleType::Checkbox),
+ None,
+ )
+ .toggled(false);
+ let appearance_setting = SettingsItem::new(
+ "switch-appearance",
+ "Match system appearance".into(),
+ SettingType::ToggleAnd(SecondarySettingType::Dropdown),
+ Some("When Dark".to_string().into()),
+ )
+ .layout(SettingLayout::FullLineJustified);
+
+ let group = SettingsGroup::new("Appearance")
+ .add_setting(theme_setting)
+ .add_setting(appearance_setting)
+ .add_setting(high_contrast_setting);
+
+ let menu = cx.new_view(|_cx| SettingsMenu::new("Appearance").add_group(group));
+
+ self.menus.push(("Single Group".into(), menu));
+ }
+
+ pub fn editor_example(&mut self, cx: &mut ViewContext<Self>) {
+ let font_group = SettingsGroup::new("Font")
+ .add_setting(
+ SettingsItem::new(
+ "font-family",
+ "Font".into(),
+ SettingType::Dropdown,
+ Some("Berkeley Mono".to_string().into()),
+ )
+ .icon(IconName::Font)
+ .layout(SettingLayout::AutoWidth),
+ )
+ .add_setting(
+ SettingsItem::new(
+ "font-weifht",
+ "Font Weight".into(),
+ SettingType::Dropdown,
+ Some("400".to_string().into()),
+ )
+ .icon(IconName::FontWeight)
+ .layout(SettingLayout::AutoWidth),
+ )
+ .add_setting(
+ SettingsItem::new(
+ "font-size",
+ "Font Size".into(),
+ SettingType::Dropdown,
+ Some("14".to_string().into()),
+ )
+ .icon(IconName::FontSize)
+ .layout(SettingLayout::AutoWidth),
+ )
+ .add_setting(
+ SettingsItem::new(
+ "line-height",
+ "Line Height".into(),
+ SettingType::Dropdown,
+ Some("1.35".to_string().into()),
+ )
+ .icon(IconName::LineHeight)
+ .layout(SettingLayout::AutoWidth),
+ )
+ .add_setting(
+ SettingsItem::new(
+ "enable-ligatures",
+ "Enable Ligatures".into(),
+ SettingType::Toggle(ToggleType::Checkbox),
+ None,
+ )
+ .toggled(true),
+ );
+
+ let editor_group = SettingsGroup::new("Editor")
+ .add_setting(
+ SettingsItem::new(
+ "show-indent-guides",
+ "Indent Guides".into(),
+ SettingType::Toggle(ToggleType::Checkbox),
+ None,
+ )
+ .toggled(true),
+ )
+ .add_setting(
+ SettingsItem::new(
+ "show-git-blame",
+ "Git Blame".into(),
+ SettingType::Toggle(ToggleType::Checkbox),
+ None,
+ )
+ .toggled(false),
+ );
+
+ let gutter_group = SettingsGroup::new("Gutter")
+ .add_setting(
+ SettingsItem::new(
+ "enable-git-hunks",
+ "Show Git Hunks".into(),
+ SettingType::Toggle(ToggleType::Checkbox),
+ None,
+ )
+ .toggled(true),
+ )
+ .add_setting(
+ SettingsItem::new(
+ "show-line-numbers",
+ "Line Numbers".into(),
+ SettingType::ToggleAnd(SecondarySettingType::Dropdown),
+ Some("Ascending".to_string().into()),
+ )
+ .toggled(true)
+ .layout(SettingLayout::FullLineJustified),
+ );
+
+ let scrollbar_group = SettingsGroup::new("Scrollbar")
+ .add_setting(
+ SettingsItem::new(
+ "scrollbar-visibility",
+ "Show scrollbar when:".into(),
+ SettingType::Dropdown,
+ Some("Always Visible".to_string().into()),
+ )
+ .layout(SettingLayout::AutoWidth)
+ .icon(IconName::Visible),
+ )
+ .add_setting(
+ SettingsItem::new(
+ "show-diagnostic-markers",
+ "Diagnostic Markers".into(),
+ SettingType::Toggle(ToggleType::Checkbox),
+ None,
+ )
+ .toggled(true),
+ )
+ .add_setting(
+ SettingsItem::new(
+ "show-git-markers",
+ "Git Status Markers".into(),
+ SettingType::Toggle(ToggleType::Checkbox),
+ None,
+ )
+ .toggled(false),
+ )
+ .add_setting(
+ SettingsItem::new(
+ "show-selection-markers",
+ "Selection & Match Markers".into(),
+ SettingType::Toggle(ToggleType::Checkbox),
+ None,
+ )
+ .toggled(true),
+ );
+
+ let menu = cx.new_view(|_cx| {
+ SettingsMenu::new("Editor")
+ .add_group(font_group)
+ .add_group(editor_group)
+ .add_group(gutter_group)
+ .add_group(scrollbar_group)
+ });
+
+ self.menus.push(("Editor Example".into(), menu));
+ }
+}
+
+impl Render for SettingStory {
+ fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
+ div()
+ .bg(cx.theme().colors().background)
+ .text_color(cx.theme().colors().text)
+ .children(self.menus.iter().map(|(name, menu)| {
+ v_flex()
+ .p_2()
+ .gap_2()
+ .child(Headline::new(name.clone()).size(HeadlineSize::Medium))
+ .child(menu.clone())
+ }))
+ }
+}
@@ -29,3 +29,23 @@ impl Selection {
}
}
}
+
+impl From<bool> for Selection {
+ fn from(selected: bool) -> Self {
+ if selected {
+ Self::Selected
+ } else {
+ Self::Unselected
+ }
+ }
+}
+
+impl From<Option<bool>> for Selection {
+ fn from(selected: Option<bool>) -> Self {
+ match selected {
+ Some(true) => Self::Selected,
+ Some(false) => Self::Unselected,
+ None => Self::Unselected,
+ }
+ }
+}