From e478d5606f5142660e456523198868a9dba26fa2 Mon Sep 17 00:00:00 2001 From: Jason Lee Date: Tue, 12 Nov 2024 11:17:16 +0800 Subject: [PATCH] chore: Add base ui attributes to Root and add change font size to story to test font adjust. (#409) --- assets/icons/a-large-small.svg | 1 + crates/app/src/story_workspace.rs | 53 ++++++++++++++++++++++++++++--- crates/ui/src/icon.rs | 2 ++ crates/ui/src/root.rs | 5 +++ crates/ui/src/theme.rs | 12 ++++++- 5 files changed, 68 insertions(+), 5 deletions(-) create mode 100644 assets/icons/a-large-small.svg diff --git a/assets/icons/a-large-small.svg b/assets/icons/a-large-small.svg new file mode 100644 index 00000000..cfba2deb --- /dev/null +++ b/assets/icons/a-large-small.svg @@ -0,0 +1 @@ + diff --git a/crates/app/src/story_workspace.rs b/crates/app/src/story_workspace.rs index 2bd2c383..755a0836 100644 --- a/crates/app/src/story_workspace.rs +++ b/crates/app/src/story_workspace.rs @@ -28,7 +28,10 @@ const MAIN_DOCK_AREA: DockAreaTab = DockAreaTab { #[derive(Clone, PartialEq, Eq, Deserialize)] struct SelectLocale(SharedString); -impl_actions!(locale_switcher, [SelectLocale]); +#[derive(Clone, PartialEq, Eq, Deserialize)] +struct SelectFont(usize); + +impl_actions!(story, [SelectLocale, SelectFont]); actions!(workspace, [Open, CloseWindow]); @@ -43,6 +46,7 @@ pub struct StoryWorkspace { theme_color: Option, dock_area: View, locale_selector: View, + font_size_selector: View, theme_color_picker: View, last_layout_state: Option, _save_layout_task: Option>, @@ -95,6 +99,7 @@ impl StoryWorkspace { .detach(); let locale_selector = cx.new_view(LocaleSelector::new); + let font_size_selector = cx.new_view(FontSizeSelector::new); let theme_color_picker = cx.new_view(|cx| { let mut picker = ColorPicker::new("theme-color-picker", cx) @@ -118,6 +123,7 @@ impl StoryWorkspace { theme_color: None, dock_area, locale_selector, + font_size_selector, theme_color_picker, last_layout_state: None, _save_layout_task: None, @@ -325,13 +331,10 @@ impl Render for StoryWorkspace { let notifications_count = cx.notifications().len(); div() - .font_family(".SystemUIFont") .relative() .size_full() .flex() .flex_col() - .bg(cx.theme().background) - .text_color(cx.theme().foreground) .child( TitleBar::new() // left side @@ -358,6 +361,7 @@ impl Render for StoryWorkspace { .on_click(cx.listener(Self::change_color_mode)), ) .child(self.locale_selector.clone()) + .child(self.font_size_selector.clone()) .child( Button::new("github") .icon(IconName::GitHub) @@ -451,3 +455,44 @@ impl Render for LocaleSelector { ) } } + +struct FontSizeSelector { + focus_handle: FocusHandle, +} + +impl FontSizeSelector { + pub fn new(cx: &mut ViewContext) -> Self { + Self { + focus_handle: cx.focus_handle(), + } + } + + fn on_select(&mut self, font_size: &SelectFont, cx: &mut ViewContext) { + Theme::global_mut(cx).font_size = font_size.0 as f32; + cx.refresh(); + } +} + +impl Render for FontSizeSelector { + fn render(&mut self, cx: &mut ViewContext) -> impl IntoElement { + let focus_handle = self.focus_handle.clone(); + let font_size = cx.theme().font_size as i32; + + div() + .id("font-size-selector") + .track_focus(&focus_handle) + .on_action(cx.listener(Self::on_select)) + .child( + Button::new("btn") + .small() + .ghost() + .icon(IconName::ALargeSmall) + .popup_menu(move |this, _| { + this.menu_with_check("Large", font_size == 18, Box::new(SelectFont(18))) + .menu_with_check("Default", font_size == 16, Box::new(SelectFont(16))) + .menu_with_check("Small", font_size == 14, Box::new(SelectFont(14))) + }) + .anchor(AnchorCorner::TopRight), + ) + } +} diff --git a/crates/ui/src/icon.rs b/crates/ui/src/icon.rs index 96d9cb4b..36975b31 100644 --- a/crates/ui/src/icon.rs +++ b/crates/ui/src/icon.rs @@ -6,6 +6,7 @@ use gpui::{ #[derive(IntoElement, Clone)] pub enum IconName { + ALargeSmall, ArrowDown, ArrowLeft, ArrowRight, @@ -68,6 +69,7 @@ pub enum IconName { impl IconName { pub fn path(self) -> SharedString { match self { + IconName::ALargeSmall => "icons/a-large-small.svg", IconName::ArrowDown => "icons/arrow-down.svg", IconName::ArrowLeft => "icons/arrow-left.svg", IconName::ArrowRight => "icons/arrow-right.svg", diff --git a/crates/ui/src/root.rs b/crates/ui/src/root.rs index 06786825..8f58eb7d 100644 --- a/crates/ui/src/root.rs +++ b/crates/ui/src/root.rs @@ -341,9 +341,14 @@ impl Root { impl Render for Root { fn render(&mut self, cx: &mut gpui::ViewContext) -> impl IntoElement { + let base_font_size = cx.theme().font_size; + cx.set_rem_size(base_font_size); + div() .id("root") .size_full() + .font_family(".SystemUIFont") + .bg(cx.theme().background) .text_color(cx.theme().foreground) .child(self.view.clone()) } diff --git a/crates/ui/src/theme.rs b/crates/ui/src/theme.rs index 5a8c6907..03985fa5 100644 --- a/crates/ui/src/theme.rs +++ b/crates/ui/src/theme.rs @@ -493,7 +493,7 @@ impl From for Theme { Theme { mode: ThemeMode::default(), transparent: Hsla::transparent_black(), - font_size: 14.0, + font_size: 16.0, font_family: if cfg!(target_os = "macos") { ".SystemUIFont".into() } else if cfg!(target_os = "windows") { @@ -607,4 +607,14 @@ impl Theme { cx.set_global(theme); cx.refresh(); } + + /// Returns the global theme reference + pub fn global(cx: &AppContext) -> &Theme { + cx.global::() + } + + /// Returns the global theme mutable reference + pub fn global_mut(cx: &mut AppContext) -> &mut Theme { + cx.global_mut::() + } }