Nate Butler and Marshall Bowers created
Co-Authored-By: Marshall Bowers <1486634+maxdeviant@users.noreply.github.com>crates/ui2/src/components/elevated_surface.rs | 2
crates/ui2/src/elevation.md | 4
crates/ui2/src/elevation.rs | 38 ++++++++-----
crates/ui2/src/styled_ext.rs | 57 ++++++++++++++++++++
4 files changed, 82 insertions(+), 19 deletions(-)
@@ -24,5 +24,5 @@ pub fn elevated_surface<V: 'static>(level: ElevationIndex, cx: &mut ViewContext<
}
pub fn modal<V>(cx: &mut ViewContext<V>) -> Div<V> {
- elevated_surface(ElevationIndex::ModalSurfaces, cx)
+ elevated_surface(ElevationIndex::ModalSurface, cx)
}
@@ -34,9 +34,9 @@ Material Design 3 has a some great visualizations of elevation that may be helpf
The app background constitutes the lowest elevation layer, appearing behind all other surfaces and components. It is predominantly used for the background color of the app.
-### UI Surface
+### Surface
-The UI Surface, located above the app background, is the standard level for all elements
+The Surface elevation level, located above the app background, is the standard level for all elements
Example Elements: Title Bar, Panel, Tab Bar, Editor
@@ -11,43 +11,53 @@ pub enum Elevation {
#[derive(Debug, Clone, Copy, PartialEq, Eq)]
pub enum ElevationIndex {
- AppBackground,
- UISurface,
+ Background,
+ Surface,
ElevatedSurface,
Wash,
- ModalSurfaces,
+ ModalSurface,
DraggedElement,
}
impl ElevationIndex {
pub fn z_index(self) -> u32 {
match self {
- ElevationIndex::AppBackground => 0,
- ElevationIndex::UISurface => 100,
+ ElevationIndex::Background => 0,
+ ElevationIndex::Surface => 100,
ElevationIndex::ElevatedSurface => 200,
ElevationIndex::Wash => 300,
- ElevationIndex::ModalSurfaces => 400,
+ ElevationIndex::ModalSurface => 400,
ElevationIndex::DraggedElement => 900,
}
}
pub fn shadow(self) -> SmallVec<[BoxShadow; 2]> {
match self {
- ElevationIndex::AppBackground => smallvec![],
+ ElevationIndex::Surface => smallvec![],
- ElevationIndex::UISurface => smallvec![BoxShadow {
+ ElevationIndex::ElevatedSurface => smallvec![BoxShadow {
color: hsla(0., 0., 0., 0.12),
offset: point(px(0.), px(1.)),
blur_radius: px(3.),
spread_radius: px(0.),
}],
- _ => smallvec![BoxShadow {
- color: hsla(0., 0., 0., 0.32),
- offset: point(px(1.), px(3.)),
- blur_radius: px(12.),
- spread_radius: px(0.),
- }],
+ ElevationIndex::ModalSurface => smallvec![
+ BoxShadow {
+ color: hsla(0., 0., 0., 0.12),
+ offset: point(px(0.), px(1.)),
+ blur_radius: px(3.),
+ spread_radius: px(0.),
+ },
+ BoxShadow {
+ color: hsla(0., 0., 0., 0.16),
+ offset: point(px(3.), px(1.)),
+ blur_radius: px(12.),
+ spread_radius: px(0.),
+ },
+ ],
+
+ _ => smallvec![],
}
}
}
@@ -1,6 +1,15 @@
-use gpui::{Div, ElementFocus, ElementInteractivity, Styled};
+use gpui::{Div, ElementFocus, ElementInteractivity, Styled, UniformList, ViewContext};
+use theme2::ActiveTheme;
-use crate::UITextSize;
+use crate::{ElevationIndex, UITextSize};
+
+fn elevated<E: Styled, V: 'static>(this: E, cx: &mut ViewContext<V>, index: ElevationIndex) -> E {
+ this.bg(cx.theme().colors().elevated_surface_background)
+ .rounded_lg()
+ .border()
+ .border_color(cx.theme().colors().border_variant)
+ .shadow(index.shadow())
+}
/// Extends [`Styled`](gpui::Styled) with Zed specific styling methods.
pub trait StyledExt: Styled {
@@ -64,6 +73,48 @@ pub trait StyledExt: Styled {
self.text_size(size)
}
+
+ /// The [`Surface`](ui2::ElevationIndex::Surface) elevation level, located above the app background, is the standard level for all elements
+ ///
+ /// Sets `bg()`, `rounded_lg()`, `border()`, `border_color()`, `shadow()`
+ ///
+ /// Example Elements: Title Bar, Panel, Tab Bar, Editor
+ fn elevation_1<V: 'static>(self, cx: &mut ViewContext<V>) -> Self
+ where
+ Self: Styled + Sized,
+ {
+ elevated(self, cx, ElevationIndex::Surface)
+ }
+
+ /// Non-Modal Elevated Surfaces appear above the [`Surface`](ui2::ElevationIndex::Surface) layer and is used for things that should appear above most UI elements like an editor or panel, but not elements like popovers, context menus, modals, etc.
+ ///
+ /// Sets `bg()`, `rounded_lg()`, `border()`, `border_color()`, `shadow()`
+ ///
+ /// Examples: Notifications, Palettes, Detached/Floating Windows, Detached/Floating Panels
+ fn elevation_2<V: 'static>(self, cx: &mut ViewContext<V>) -> Self
+ where
+ Self: Styled + Sized,
+ {
+ elevated(self, cx, ElevationIndex::ElevatedSurface)
+ }
+
+ // There is no elevation 3, as the third elevation level is reserved for wash layers. See [`Elevation`](ui2::Elevation).
+
+ /// Modal Surfaces are used for elements that should appear above all other UI elements and are located above the wash layer. This is the maximum elevation at which UI elements can be rendered in their default state.
+ ///
+ /// Elements rendered at this layer should have an enforced behavior: Any interaction outside of the modal will either dismiss the modal or prompt an action (Save your progress, etc) then dismiss the modal.
+ ///
+ /// If the element does not have this behavior, it should be rendered at the [`Elevated Surface`](ui2::ElevationIndex::ElevatedSurface) layer.
+ ///
+ /// Sets `bg()`, `rounded_lg()`, `border()`, `border_color()`, `shadow()`
+ ///
+ /// Examples: Settings Modal, Channel Management, Wizards/Setup UI, Dialogs
+ fn elevation_4<V: 'static>(self, cx: &mut ViewContext<V>) -> Self
+ where
+ Self: Styled + Sized,
+ {
+ elevated(self, cx, ElevationIndex::ModalSurface)
+ }
}
impl<V, I, F> StyledExt for Div<V, I, F>
@@ -72,3 +123,5 @@ where
F: ElementFocus<V>,
{
}
+
+impl<V> StyledExt for UniformList<V> {}