From 4db0350f060a6f6edca0b989466ea79c04533ba8 Mon Sep 17 00:00:00 2001 From: Antonio Scandurra Date: Tue, 17 Oct 2023 22:16:48 +0200 Subject: [PATCH] Checkpoint --- crates/gpui3/src/active.rs | 18 ++++++++++--- crates/gpui3/src/elements/div.rs | 32 ++++++++++++++--------- crates/gpui3/src/elements/img.rs | 10 +++---- crates/gpui3/src/elements/svg.rs | 8 +++--- crates/gpui3/src/hover.rs | 18 ++++++++++--- crates/gpui3/src/style.rs | 8 +++++- crates/gpui3/src/window.rs | 10 +++++-- crates/storybook2/src/collab_panel.rs | 22 ++++++++-------- crates/storybook2/src/stories/text.rs | 2 +- crates/storybook2/src/stories/z_index.rs | 2 +- crates/storybook2/src/workspace.rs | 10 +++---- crates/ui2/src/components/breadcrumb.rs | 15 ++++++++--- crates/ui2/src/components/collab_panel.rs | 6 ++--- crates/ui2/src/components/icon_button.rs | 3 +-- crates/ui2/src/components/list.rs | 3 +-- crates/ui2/src/components/notification.rs | 2 +- crates/ui2/src/components/palette.rs | 9 ++++--- crates/ui2/src/elements/input.rs | 5 ++-- 18 files changed, 117 insertions(+), 66 deletions(-) diff --git a/crates/gpui3/src/active.rs b/crates/gpui3/src/active.rs index 707e83e587092488305d5ece1957943a183e9959..93cdb9d8bbd858874c22b97e71a1f4f18f56ac11 100644 --- a/crates/gpui3/src/active.rs +++ b/crates/gpui3/src/active.rs @@ -1,13 +1,25 @@ -use crate::StyleRefinement; +use crate::{SharedString, StyleRefinement}; pub trait Active { - fn set_active_style(&mut self, style: StyleRefinement); + fn set_active_style(&mut self, group_name: Option, style: StyleRefinement); fn active(mut self, f: impl FnOnce(StyleRefinement) -> StyleRefinement) -> Self where Self: Sized, { - self.set_active_style(f(StyleRefinement::default())); + self.set_active_style(None, f(StyleRefinement::default())); + self + } + + fn group_active( + mut self, + group_name: impl Into, + f: impl FnOnce(StyleRefinement) -> StyleRefinement, + ) -> Self + where + Self: Sized, + { + self.set_active_style(Some(group_name.into()), f(StyleRefinement::default())); self } } diff --git a/crates/gpui3/src/elements/div.rs b/crates/gpui3/src/elements/div.rs index 09cf0ec96ba77a91e3a61fc50f3b2dac28679397..8b6785eddb230c5deefc7663c83298895693f59c 100644 --- a/crates/gpui3/src/elements/div.rs +++ b/crates/gpui3/src/elements/div.rs @@ -386,16 +386,16 @@ where ); this.paint_event_listeners(bounds, element_state.pending_click.clone(), cx); }); - }); - style.apply_text_style(cx, |cx| { - style.apply_overflow(bounds, cx, |cx| { - cx.stack(z_index + 1, |cx| { - for child in &mut this.children { - child.paint(view_state, None, cx); - } + cx.stack(1, |cx| { + style.apply_text_style(cx, |cx| { + style.apply_overflow(bounds, cx, |cx| { + for child in &mut this.children { + child.paint(view_state, None, cx); + } + }) }) - }) + }); }); if let Some(group) = this.group.as_ref() { @@ -454,8 +454,12 @@ where V: 'static + Send + Sync, K: ElementIdentity, { - fn set_hover_style(&mut self, style: StyleRefinement) { - self.hover_style = style; + fn set_hover_style(&mut self, group: Option, style: StyleRefinement) { + if let Some(group) = group { + self.group_hover = Some(GroupStyle { group, style }); + } else { + self.hover_style = style; + } } } @@ -465,8 +469,12 @@ impl Active for Div where V: 'static + Send + Sync, { - fn set_active_style(&mut self, style: StyleRefinement) { - self.active_style = style; + fn set_active_style(&mut self, group: Option, style: StyleRefinement) { + if let Some(group) = group { + self.group_active = Some(GroupStyle { group, style }); + } else { + self.active_style = style; + } } } diff --git a/crates/gpui3/src/elements/img.rs b/crates/gpui3/src/elements/img.rs index 7b1f374b9b996f677418d3864e84584a8a1df30f..e7775fc4347d1df49995af5affd06e7cecda4c08 100644 --- a/crates/gpui3/src/elements/img.rs +++ b/crates/gpui3/src/elements/img.rs @@ -90,7 +90,7 @@ where element_state: &mut Self::ElementState, cx: &mut ViewContext, ) { - cx.stack(1, |cx| { + cx.stack(0, |cx| { self.base.paint(bounds, view, element_state, cx); }); @@ -146,8 +146,8 @@ where V: 'static + Send + Sync, K: ElementIdentity, { - fn set_hover_style(&mut self, style: StyleRefinement) { - self.base.set_hover_style(style); + fn set_hover_style(&mut self, group: Option, style: StyleRefinement) { + self.base.set_hover_style(group, style); } } @@ -157,7 +157,7 @@ impl Active for Img where V: 'static + Send + Sync, { - fn set_active_style(&mut self, style: StyleRefinement) { - self.base.set_active_style(style) + fn set_active_style(&mut self, group: Option, style: StyleRefinement) { + self.base.set_active_style(group, style) } } diff --git a/crates/gpui3/src/elements/svg.rs b/crates/gpui3/src/elements/svg.rs index cc511c3fb7f1ee0497d63b5707324f521185a20b..7ccd2a2c68aed732ad16b30cdc36ba4f02f40089 100644 --- a/crates/gpui3/src/elements/svg.rs +++ b/crates/gpui3/src/elements/svg.rs @@ -121,8 +121,8 @@ where V: 'static + Send + Sync, K: ElementIdentity, { - fn set_hover_style(&mut self, style: StyleRefinement) { - self.base.set_hover_style(style); + fn set_hover_style(&mut self, group: Option, style: StyleRefinement) { + self.base.set_hover_style(group, style); } } @@ -132,7 +132,7 @@ impl Active for Svg where V: 'static + Send + Sync, { - fn set_active_style(&mut self, style: StyleRefinement) { - self.base.set_active_style(style) + fn set_active_style(&mut self, group: Option, style: StyleRefinement) { + self.base.set_active_style(group, style) } } diff --git a/crates/gpui3/src/hover.rs b/crates/gpui3/src/hover.rs index 7c47eda84d731efdf2c97966b284a8d6043cb67d..f69cd84f65fc432fe9cf0e97de5bf955db1212e4 100644 --- a/crates/gpui3/src/hover.rs +++ b/crates/gpui3/src/hover.rs @@ -1,13 +1,25 @@ -use crate::StyleRefinement; +use crate::{SharedString, StyleRefinement}; pub trait Hover { - fn set_hover_style(&mut self, style: StyleRefinement); + fn set_hover_style(&mut self, group_name: Option, style: StyleRefinement); fn hover(mut self, f: impl FnOnce(StyleRefinement) -> StyleRefinement) -> Self where Self: Sized, { - self.set_hover_style(f(StyleRefinement::default())); + self.set_hover_style(None, f(StyleRefinement::default())); + self + } + + fn group_hover( + mut self, + group_name: impl Into, + f: impl FnOnce(StyleRefinement) -> StyleRefinement, + ) -> Self + where + Self: Sized, + { + self.set_hover_style(Some(group_name.into()), f(StyleRefinement::default())); self } } diff --git a/crates/gpui3/src/style.rs b/crates/gpui3/src/style.rs index f472e05c91c3c36e49a1612a0250efdc639a7d69..eb2330fc16cd3c50ad02bc3dc19bb4f9b1f140fe 100644 --- a/crates/gpui3/src/style.rs +++ b/crates/gpui3/src/style.rs @@ -2,7 +2,7 @@ use crate::{ black, phi, point, rems, AbsoluteLength, BorrowAppContext, BorrowWindow, Bounds, ContentMask, Corners, CornersRefinement, DefiniteLength, Edges, EdgesRefinement, Font, FontFeatures, FontStyle, FontWeight, Hsla, Length, Pixels, Point, PointRefinement, Rems, Result, - SharedString, Size, SizeRefinement, TextRun, ViewContext, WindowContext, + SharedString, Size, SizeRefinement, Styled, TextRun, ViewContext, WindowContext, }; use refineable::{Cascade, Refineable}; use smallvec::SmallVec; @@ -101,6 +101,12 @@ pub struct Style { pub z_index: Option, } +impl Styled for StyleRefinement { + fn style(&mut self) -> &mut StyleRefinement { + self + } +} + #[derive(Clone, Debug)] pub struct BoxShadow { pub color: Hsla, diff --git a/crates/gpui3/src/window.rs b/crates/gpui3/src/window.rs index 42786c0033742f4df03b4d3ad3d54b751b445228..7ca09e3698887725b1312badaef9dcc570126c2b 100644 --- a/crates/gpui3/src/window.rs +++ b/crates/gpui3/src/window.rs @@ -1167,7 +1167,13 @@ impl From for ElementId { } impl From for ElementId { - fn from(id: SharedString) -> Self { - ElementId::Name(id) + fn from(name: SharedString) -> Self { + ElementId::Name(name) + } +} + +impl From<&'static str> for ElementId { + fn from(name: &'static str) -> Self { + ElementId::Name(name.into()) } } diff --git a/crates/storybook2/src/collab_panel.rs b/crates/storybook2/src/collab_panel.rs index ab1bd6a1575572b1eb4b1a78522849b9d4353863..8f2eb14a54e022cf6e03f051272ef276bbe9ed70 100644 --- a/crates/storybook2/src/collab_panel.rs +++ b/crates/storybook2/src/collab_panel.rs @@ -1,6 +1,6 @@ use gpui3::{ - div, svg, view, AppContext, Context, Element, ElementId, IntoAnyElement, ParentElement, - ScrollState, SharedString, StyleHelpers, Styled, View, ViewContext, WindowContext, + div, svg, view, Active, AppContext, Context, Element, ElementId, Hover, IntoAnyElement, + ParentElement, ScrollState, SharedString, Styled, View, ViewContext, WindowContext, }; use ui::{theme, Theme}; @@ -132,8 +132,7 @@ impl CollabPanel { .flex() .justify_between() .items_center() - .active() - .fill(theme.highest.accent.default.background) + .active(|style| style.fill(theme.highest.accent.default.background)) .child(div().flex().gap_1().text_sm().child(label)) .child( div().flex().h_full().gap_1().items_center().child( @@ -174,18 +173,19 @@ impl CollabPanel { .text_sm() .child( div() - .id(0) + .id("avatar") // .uri(avatar_uri) .size_3p5() .rounded_full() .fill(theme.middle.positive.default.foreground) .shadow() - .group_hover("") - .fill(theme.middle.negative.default.foreground) - .hover() - .fill(theme.middle.warning.default.foreground) - .group_active("") - .fill(theme.middle.accent.default.foreground), + .group_hover("", |style| { + style.fill(theme.middle.negative.default.foreground) + }) + .hover(|style| style.fill(theme.middle.warning.default.foreground)) + .group_active("", |style| { + style.fill(theme.middle.accent.default.foreground) + }), ) .child(label), ) diff --git a/crates/storybook2/src/stories/text.rs b/crates/storybook2/src/stories/text.rs index 1f35d6372598f0d52b820ec0151c29dc6660077e..1f461ed569d137e15f5b567147c81d02277c9ad4 100644 --- a/crates/storybook2/src/stories/text.rs +++ b/crates/storybook2/src/stories/text.rs @@ -1,4 +1,4 @@ -use gpui3::{div, view, white, Context, ParentElement, StyleHelpers, View, WindowContext}; +use gpui3::{div, view, white, Context, ParentElement, Styled, View, WindowContext}; pub struct TextStory { text: View<()>, diff --git a/crates/storybook2/src/stories/z_index.rs b/crates/storybook2/src/stories/z_index.rs index 074d523e25aa0254b9d0dc527e769d40dd07daff..fda3cf5d2802de05c42816b1c21c6173eb9394ab 100644 --- a/crates/storybook2/src/stories/z_index.rs +++ b/crates/storybook2/src/stories/z_index.rs @@ -59,7 +59,7 @@ impl ZIndexStory { } } -trait Styles: StyleHelpers { +trait Styles: Styled + Sized { // Trailing `_` is so we don't collide with `block` style `StyleHelpers`. fn block_(self) -> Self { self.absolute() diff --git a/crates/storybook2/src/workspace.rs b/crates/storybook2/src/workspace.rs index 29c098297ce9fe916c456d753a9207dfc6b7c18c..2d32c3b8c1d1b1143cd48f600f85616098d3cc5f 100644 --- a/crates/storybook2/src/workspace.rs +++ b/crates/storybook2/src/workspace.rs @@ -3,7 +3,7 @@ use crate::{ themes::rose_pine, }; use gpui3::{ - div, img, svg, view, Context, Element, ParentElement, StyleHelpers, Styled, View, ViewContext, + div, img, svg, view, Context, Element, Hover, ParentElement, Styled, View, ViewContext, WindowContext, }; use ui::{theme, themed}; @@ -42,10 +42,10 @@ impl Workspace { div() .size_5() .fill(theme.middle.negative.default.foreground) - .group_hover("") - .fill(theme.middle.positive.default.foreground) - .hover() - .fill(theme.middle.variant.default.foreground), + .group_hover("", |style| { + style.fill(theme.middle.positive.default.foreground) + }) + .hover(|style| style.fill(theme.middle.variant.default.foreground)), ), ) } diff --git a/crates/ui2/src/components/breadcrumb.rs b/crates/ui2/src/components/breadcrumb.rs index aa1327b7acd3d3d870da3af07d05472ced0f296a..58a9f7675985a4fad8c9a6e9ea4f915aca932039 100644 --- a/crates/ui2/src/components/breadcrumb.rs +++ b/crates/ui2/src/components/breadcrumb.rs @@ -31,7 +31,11 @@ impl Breadcrumb { .text_color(HighlightColor::Default.hsla(theme)) } - fn render(&mut self, view_state: &mut S, cx: &mut ViewContext) -> impl Element { + fn render( + &mut self, + view_state: &mut S, + cx: &mut ViewContext, + ) -> impl Element { let theme = theme(cx); let symbols_len = self.symbols.len(); @@ -43,8 +47,7 @@ impl Breadcrumb { .text_sm() .text_color(theme.middle.base.default.foreground) .rounded_md() - .hover() - .fill(theme.highest.base.hovered.background) + .hover(|style| style.fill(theme.highest.base.hovered.background)) .child(self.path.clone().to_str().unwrap().to_string()) .child(if !self.symbols.is_empty() { self.render_separator(&theme) @@ -99,7 +102,11 @@ mod stories { } } - fn render(&mut self, view_state: &mut S, cx: &mut ViewContext) -> impl Element { + fn render( + &mut self, + view_state: &mut S, + cx: &mut ViewContext, + ) -> impl Element { let theme = theme(cx); Story::container(cx) diff --git a/crates/ui2/src/components/collab_panel.rs b/crates/ui2/src/components/collab_panel.rs index 0e268664a920edd8b6d58c954c068ab162bfdbb8..7512707de75a60f3211537cc625dcdfdbfdde658 100644 --- a/crates/ui2/src/components/collab_panel.rs +++ b/crates/ui2/src/components/collab_panel.rs @@ -137,10 +137,8 @@ impl CollabPanel { .px_2() .flex() .items_center() - .hover() - .fill(theme.lowest.variant.hovered.background) - // .active() - // .fill(theme.lowest.variant.pressed.background) + .hover(|style| style.fill(theme.lowest.variant.hovered.background)) + // .active(|style| style.fill(theme.lowest.variant.pressed.background)) .child( div() .flex() diff --git a/crates/ui2/src/components/icon_button.rs b/crates/ui2/src/components/icon_button.rs index cf8110e1e451b4af52efa7274890666b0287760f..f7562cbeec0991c3377c17b43519fdc0e6c3d703 100644 --- a/crates/ui2/src/components/icon_button.rs +++ b/crates/ui2/src/components/icon_button.rs @@ -91,8 +91,7 @@ impl IconButton { .items_center() .justify_center() .rounded_md() - .hover() - .fill(theme.highest.base.hovered.background) + .hover(|style| style.fill(theme.highest.base.hovered.background)) // .active() // .fill(theme.highest.base.pressed.background) .child(IconElement::new(self.icon).color(icon_color)) diff --git a/crates/ui2/src/components/list.rs b/crates/ui2/src/components/list.rs index 5093097e6b7f799b9bb8c689f116ac92e206b0be..d02740aa55a65adedcc7db96e25333e14a3dec58 100644 --- a/crates/ui2/src/components/list.rs +++ b/crates/ui2/src/components/list.rs @@ -412,8 +412,7 @@ impl ListEntry { .h_full() .flex() .justify_center() - .group_hover("") - .fill(color.border_focused) + .group_hover("", |style| style.fill(color.border_focused)) .child( h_stack() .child(div().w_px().h_full()) diff --git a/crates/ui2/src/components/notification.rs b/crates/ui2/src/components/notification.rs index 97ceb714a3b2de210af0418fbf265f7ccd045495..724571496fe783a7108bd20ef2bd29823856c85f 100644 --- a/crates/ui2/src/components/notification.rs +++ b/crates/ui2/src/components/notification.rs @@ -1,6 +1,6 @@ use std::marker::PhantomData; -use gpui3::{Element, ParentElement, ViewContext}; +use gpui3::{Element, ParentElement, Styled, ViewContext}; use crate::{ h_stack, v_stack, Button, Icon, IconButton, IconElement, Label, ThemeColor, Toast, ToastOrigin, diff --git a/crates/ui2/src/components/palette.rs b/crates/ui2/src/components/palette.rs index dad7ef06c3c55f9d34b192f5eb7b1ff7f35461c2..08c8c93e98a38282cbaefd8eb07d9d325b1a0bf2 100644 --- a/crates/ui2/src/components/palette.rs +++ b/crates/ui2/src/components/palette.rs @@ -89,8 +89,7 @@ impl Palette { .px_2() .py_0p5() .rounded_lg() - .hover() - .fill(theme.lowest.base.hovered.background) + .hover(|style| style.fill(theme.lowest.base.hovered.background)) // .active() // .fill(theme.lowest.base.pressed.background) .child(item.clone()) @@ -172,7 +171,11 @@ mod stories { } } - fn render(&mut self, _view: &mut S, cx: &mut ViewContext) -> impl Element { + fn render( + &mut self, + _view: &mut S, + cx: &mut ViewContext, + ) -> impl Element { Story::container(cx) .child(Story::title_for::<_, Palette>(cx)) .child(Story::label(cx, "Default")) diff --git a/crates/ui2/src/elements/input.rs b/crates/ui2/src/elements/input.rs index ef144c201ec0a516528352bceb088cb6e37d1ebf..f80fdd9517c8b582dd15eb6f2244620ea29c761f 100644 --- a/crates/ui2/src/elements/input.rs +++ b/crates/ui2/src/elements/input.rs @@ -88,8 +88,9 @@ impl Input { .border() .border_color(border_color_default) .fill(background_color_default) - .hover(|h| { - h.border_color(border_color_hover) + .hover(|style| { + style + .border_color(border_color_hover) .fill(background_color_active) }) // .active(|a| .border_color(border_color_active))