From e1cb8a66f047d2ab260c8b3c5963c17dce90b9b0 Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Mon, 4 Nov 2024 12:57:36 -0500 Subject: [PATCH] Add pages to theme_preview (#20185) Added some simple logic + an example of adding pages to the theme preview. Will be used for organizing theme preview sections. Release Notes: - N/A --- Cargo.lock | 1 + crates/workspace/Cargo.toml | 1 + crates/workspace/src/theme_preview.rs | 95 +++++++++++++++++++++++++-- 3 files changed, 91 insertions(+), 6 deletions(-) diff --git a/Cargo.lock b/Cargo.lock index 5c127f1f8d2223c8ac22aa948bf90e3b3d99ac88..7ed690f6c147a4e6025da5a6afcc2e9e85790040 100644 --- a/Cargo.lock +++ b/Cargo.lock @@ -14776,6 +14776,7 @@ dependencies = [ "settings", "smallvec", "sqlez", + "strum 0.25.0", "task", "tempfile", "theme", diff --git a/crates/workspace/Cargo.toml b/crates/workspace/Cargo.toml index 94a976dcd13d5b5ed1c1828be503db6747fa291f..1fa4db2af8a744580d990606845d7651e7c720dd 100644 --- a/crates/workspace/Cargo.toml +++ b/crates/workspace/Cargo.toml @@ -61,6 +61,7 @@ theme.workspace = true ui.workspace = true util.workspace = true uuid.workspace = true +strum.workspace = true [dev-dependencies] call = { workspace = true, features = ["test-support"] } diff --git a/crates/workspace/src/theme_preview.rs b/crates/workspace/src/theme_preview.rs index 620b66d7021dc17384b70e8f7ab785e6d0c33bf8..e65264137216239a7af7800db5fdb275b6d607c5 100644 --- a/crates/workspace/src/theme_preview.rs +++ b/crates/workspace/src/theme_preview.rs @@ -1,5 +1,6 @@ #![allow(unused, dead_code)] use gpui::{actions, AppContext, EventEmitter, FocusHandle, FocusableView, Hsla}; +use strum::IntoEnumIterator; use theme::all_theme_colors; use ui::{ prelude::*, utils::calculate_contrast_ratio, AudioStatus, Availability, Avatar, @@ -21,16 +22,44 @@ pub fn init(cx: &mut AppContext) { .detach(); } +#[derive(Debug, Clone, Copy, PartialEq, PartialOrd, strum::EnumIter)] +enum ThemePreviewPage { + Overview, + Typography, +} + +impl ThemePreviewPage { + pub fn name(&self) -> &'static str { + match self { + Self::Overview => "Overview", + Self::Typography => "Typography", + } + } +} + struct ThemePreview { + current_page: ThemePreviewPage, focus_handle: FocusHandle, } impl ThemePreview { pub fn new(cx: &mut ViewContext) -> Self { Self { + current_page: ThemePreviewPage::Overview, focus_handle: cx.focus_handle(), } } + + pub fn view( + &self, + page: ThemePreviewPage, + cx: &mut ViewContext, + ) -> impl IntoElement { + match page { + ThemePreviewPage::Overview => self.render_overview_page(cx).into_any_element(), + ThemePreviewPage::Typography => self.render_typography_page(cx).into_any_element(), + } + } } impl EventEmitter<()> for ThemePreview {} @@ -432,23 +461,77 @@ impl ThemePreview { .child(self.render_text(layer, cx)) .child(self.render_colors(layer, cx)) } + + fn render_overview_page(&self, cx: &ViewContext) -> impl IntoElement { + v_flex() + .id("theme-preview-overview") + .overflow_scroll() + .size_full() + .child( + v_flex() + .child(Headline::new("Theme Preview").size(HeadlineSize::Large)) + .child(div().w_full().text_color(cx.theme().colors().text_muted).child("This view lets you preview a range of UI elements across a theme. Use it for testing out changes to the theme.")) + ) + .child(self.render_theme_layer(ElevationIndex::Background, cx)) + .child(self.render_theme_layer(ElevationIndex::Surface, cx)) + .child(self.render_theme_layer(ElevationIndex::EditorSurface, cx)) + .child(self.render_theme_layer(ElevationIndex::ElevatedSurface, cx)) + } + + fn render_typography_page(&self, cx: &ViewContext) -> impl IntoElement { + v_flex() + .id("theme-preview-typography") + .overflow_scroll() + .size_full() + .child(v_flex() + .gap_4() + .child(Headline::new("Headline 1").size(HeadlineSize::XLarge)) + .child(Label::new("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.")) + .child(Headline::new("Headline 2").size(HeadlineSize::Large)) + .child(Label::new("Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.")) + .child(Headline::new("Headline 3").size(HeadlineSize::Medium)) + .child(Label::new("Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.")) + .child(Headline::new("Headline 4").size(HeadlineSize::Small)) + .child(Label::new("Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")) + .child(Headline::new("Headline 5").size(HeadlineSize::XSmall)) + .child(Label::new("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.")) + .child(Headline::new("Body Text").size(HeadlineSize::Small)) + .child(Label::new("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")) + ) + } } impl Render for ThemePreview { fn render(&mut self, cx: &mut ViewContext) -> impl ui::IntoElement { - v_flex() + h_flex() .id("theme-preview") .key_context("ThemePreview") - .overflow_scroll() + .items_start() + .overflow_hidden() .size_full() .max_h_full() .p_4() .track_focus(&self.focus_handle) .bg(Self::preview_bg(cx)) .gap_4() - .child(self.render_theme_layer(ElevationIndex::Background, cx)) - .child(self.render_theme_layer(ElevationIndex::Surface, cx)) - .child(self.render_theme_layer(ElevationIndex::EditorSurface, cx)) - .child(self.render_theme_layer(ElevationIndex::ElevatedSurface, cx)) + .child( + v_flex() + .items_start() + .gap_1() + .w(px(240.)) + .child( + v_flex() + .gap_px() + .children(ThemePreviewPage::iter().map(|p| { + Button::new(ElementId::Name(p.name().into()), p.name()) + .on_click(cx.listener(move |this, _, cx| { + this.current_page = p; + cx.notify(); + })) + .selected(p == self.current_page) + })), + ), + ) + .child(self.view(self.current_page, cx)) } }