Add layered dawn wallpaper to shell background
Designs call for a radial-gradient dawn (cream base + pink upper-right glow + blue lower-left glow). GPUI 0.2.2 only supports linear gradients, so the wallpaper is composed of a cream base layer with two diagonal linear gradients that fade to transparent at ~60% — the perceived effect matches the design's softness without needing radial-gradient support. Wallpaper is isolated to chrome::wallpaper so future appearance themes (violet, mint, slate) extend the enum without touching the shell.
This commit is contained in:
@@ -0,0 +1,3 @@
|
|||||||
|
pub(crate) mod wallpaper;
|
||||||
|
|
||||||
|
pub(crate) use wallpaper::{WallpaperTheme, render_wallpaper};
|
||||||
@@ -0,0 +1,62 @@
|
|||||||
|
use gpui::{
|
||||||
|
Hsla, IntoElement, ParentElement, Styled, div, hsla, linear_color_stop, linear_gradient, rgb,
|
||||||
|
};
|
||||||
|
|
||||||
|
#[derive(Clone, Copy, Debug, Eq, PartialEq)]
|
||||||
|
pub(crate) enum WallpaperTheme {
|
||||||
|
Dawn,
|
||||||
|
}
|
||||||
|
|
||||||
|
impl WallpaperTheme {
|
||||||
|
fn base(self) -> u32 {
|
||||||
|
match self {
|
||||||
|
Self::Dawn => 0xefe8e1,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
fn upper_blob(self) -> Hsla {
|
||||||
|
match self {
|
||||||
|
Self::Dawn => hsla(351.0 / 360.0, 1.0, 0.91, 0.85),
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
fn lower_blob(self) -> Hsla {
|
||||||
|
match self {
|
||||||
|
Self::Dawn => hsla(228.0 / 360.0, 1.0, 0.86, 0.65),
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
pub(crate) fn render_wallpaper(theme: WallpaperTheme) -> impl IntoElement {
|
||||||
|
let upper = theme.upper_blob();
|
||||||
|
let lower = theme.lower_blob();
|
||||||
|
|
||||||
|
div()
|
||||||
|
.absolute()
|
||||||
|
.inset_0()
|
||||||
|
.bg(rgb(theme.base()))
|
||||||
|
.child(
|
||||||
|
div()
|
||||||
|
.absolute()
|
||||||
|
.inset_0()
|
||||||
|
.bg(linear_gradient(
|
||||||
|
225.0,
|
||||||
|
linear_color_stop(upper, 0.0),
|
||||||
|
linear_color_stop(transparent_like(upper), 0.55),
|
||||||
|
)),
|
||||||
|
)
|
||||||
|
.child(
|
||||||
|
div()
|
||||||
|
.absolute()
|
||||||
|
.inset_0()
|
||||||
|
.bg(linear_gradient(
|
||||||
|
45.0,
|
||||||
|
linear_color_stop(lower, 0.0),
|
||||||
|
linear_color_stop(transparent_like(lower), 0.62),
|
||||||
|
)),
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
fn transparent_like(color: Hsla) -> Hsla {
|
||||||
|
hsla(color.h, color.s, color.l, 0.0)
|
||||||
|
}
|
||||||
@@ -1,6 +1,7 @@
|
|||||||
mod archive_labels;
|
mod archive_labels;
|
||||||
mod bookmark_files;
|
mod bookmark_files;
|
||||||
mod bookmarks;
|
mod bookmarks;
|
||||||
|
pub(crate) mod chrome;
|
||||||
mod command_actions;
|
mod command_actions;
|
||||||
mod download_targets;
|
mod download_targets;
|
||||||
mod downloads;
|
mod downloads;
|
||||||
|
|||||||
@@ -13,6 +13,7 @@ use gpui_component::{
|
|||||||
scroll::ScrollableElement,
|
scroll::ScrollableElement,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
use super::chrome::{WallpaperTheme, render_wallpaper};
|
||||||
use super::sidebar::{collapsed_sidebar_active, render_command_bar_identity};
|
use super::sidebar::{collapsed_sidebar_active, render_command_bar_identity};
|
||||||
use super::{ElyShell, ShellState, archive_labels::archive_detail_label};
|
use super::{ElyShell, ShellState, archive_labels::archive_detail_label};
|
||||||
|
|
||||||
@@ -66,12 +67,8 @@ impl ElyShell {
|
|||||||
.on_action(cx.listener(Self::on_toggle_sidebar))
|
.on_action(cx.listener(Self::on_toggle_sidebar))
|
||||||
.on_action(cx.listener(Self::on_zoom_in))
|
.on_action(cx.listener(Self::on_zoom_in))
|
||||||
.on_action(cx.listener(Self::on_zoom_out))
|
.on_action(cx.listener(Self::on_zoom_out))
|
||||||
.bg(linear_gradient(
|
|
||||||
135.0,
|
|
||||||
linear_color_stop(hsla(20.0 / 360.0, 0.35, 0.92, 1.0), 0.0),
|
|
||||||
linear_color_stop(hsla(220.0 / 360.0, 0.25, 0.88, 1.0), 1.0),
|
|
||||||
))
|
|
||||||
.text_color(rgb(colors::INK))
|
.text_color(rgb(colors::INK))
|
||||||
|
.child(render_wallpaper(WallpaperTheme::Dawn))
|
||||||
.child(
|
.child(
|
||||||
div()
|
div()
|
||||||
.absolute()
|
.absolute()
|
||||||
|
|||||||
Reference in New Issue
Block a user