From 2aadd0d57ae72b1d1cd84dd3b5d8df3ed6d2e382 Mon Sep 17 00:00:00 2001 From: mars Date: Fri, 18 Nov 2022 12:43:10 -0700 Subject: [PATCH 01/17] Make Color alpha functions const --- crates/script/src/lib.rs | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/crates/script/src/lib.rs b/crates/script/src/lib.rs index c2ada0e..58c0266 100644 --- a/crates/script/src/lib.rs +++ b/crates/script/src/lib.rs @@ -173,13 +173,13 @@ impl Color { ) } - pub fn alpha_multiply(&self, mul: u8) -> Self { + pub const fn alpha_multiply(&self, mul: u8) -> Self { let a = self.0 as u8 as u16; let multiplied = ((a * (mul as u16)) >> 8) as u8; self.with_alpha(multiplied) } - pub fn with_alpha(&self, alpha: u8) -> Self { + pub const fn with_alpha(&self, alpha: u8) -> Self { Self(self.0 & 0xffffff00 | alpha as u32) } -- 2.30.2 From f33100cfa8cede12cc3542f751ea01093259e89a Mon Sep 17 00:00:00 2001 From: mars Date: Fri, 18 Nov 2022 12:43:23 -0700 Subject: [PATCH 02/17] Add SAO UI style module --- scripts/sao-ui/src/lib.rs | 1 + scripts/sao-ui/src/style.rs | 28 ++++++++++++++++++++++++++++ 2 files changed, 29 insertions(+) create mode 100644 scripts/sao-ui/src/style.rs diff --git a/scripts/sao-ui/src/lib.rs b/scripts/sao-ui/src/lib.rs index b558d3f..3293e8e 100644 --- a/scripts/sao-ui/src/lib.rs +++ b/scripts/sao-ui/src/lib.rs @@ -7,6 +7,7 @@ static ALLOC: wee_alloc::WeeAlloc = wee_alloc::WeeAlloc::INIT; pub mod anim; pub mod main_menu; pub mod music_player; +pub mod style; pub mod widgets; use api::*; diff --git a/scripts/sao-ui/src/style.rs b/scripts/sao-ui/src/style.rs new file mode 100644 index 0000000..9318ae9 --- /dev/null +++ b/scripts/sao-ui/src/style.rs @@ -0,0 +1,28 @@ +use canary_script::Color; + +/// A reusable set of colors. Used by default widget styles. +pub struct Palette { + pub base: Color, + pub surface: Color, + pub overlay: Color, + pub text: Color, +} + +/// Sword Art Online color palette. +pub const SAO_PALETTE: Palette = Palette { + base: Color::WHITE.with_alpha(0xc0), + surface: Color::WHITE, + overlay: Color::WHITE, + text: Color::BLACK, +}; + +/// Rose Pine color palette. +pub const ROSE_PINE_PALETTE: Palette = Palette { + base: Color(0x191724ff), + surface: Color(0x1f1d2eff), + overlay: Color(0x26233aff), + text: Color(0xe0def4ff), +}; + +/// The global palette. +pub const PALETTE: Palette = ROSE_PINE_PALETTE; -- 2.30.2 From 218e2fde741a520548ee3c5a3a56ab188b2d61a8 Mon Sep 17 00:00:00 2001 From: mars Date: Fri, 18 Nov 2022 13:07:37 -0700 Subject: [PATCH 03/17] Add wip-dialog protocol to display ConfirmationDialogPanel --- scripts/sao-ui/src/lib.rs | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/scripts/sao-ui/src/lib.rs b/scripts/sao-ui/src/lib.rs index 3293e8e..948c2e9 100644 --- a/scripts/sao-ui/src/lib.rs +++ b/scripts/sao-ui/src/lib.rs @@ -24,6 +24,7 @@ fn bind_panel_impl(panel: Panel, protocol: Message, msg: Message) -> Box MusicPlayerPanel::bind(panel, msg), + "wip-dialog" => ConfirmationDialogPanel::bind(panel, msg), _ => MainMenuPanel::bind(panel, msg), } } @@ -51,15 +52,23 @@ impl PanelImpl for ConfirmationDialogPanel { self.dialog.on_cursor_event(kind, at.into()); } - fn on_resize(&mut self, _size: Vec2) {} + fn on_resize(&mut self, size: Vec2) { + self.dialog.resize(size); + } fn on_message(&mut self, _msg: Message) {} } impl ConfirmationDialogPanel { pub fn bind(panel: Panel, msg: Message) -> Box { - let msg = msg.to_vec(); - let info: DialogInfo = serde_json::from_slice(&msg).unwrap(); + // let msg = msg.to_vec(); + // let info: DialogInfo = serde_json::from_slice(&msg).unwrap(); + + let info = DialogInfo { + title: "Hello world!".to_string(), + content: "Testing, testing...".to_string(), + responses: vec![DialogResponse::Yes, DialogResponse::No], + }; use widgets::dialog::*; let style = DialogStyle::default(); -- 2.30.2 From 2f5d25a3f4fa46c002d580edb66fcf050aee4643 Mon Sep 17 00:00:00 2001 From: mars Date: Fri, 18 Nov 2022 13:08:01 -0700 Subject: [PATCH 04/17] Add Metrics and Theme consts --- scripts/sao-ui/src/style.rs | 24 ++++++++++++++++++++---- 1 file changed, 20 insertions(+), 4 deletions(-) diff --git a/scripts/sao-ui/src/style.rs b/scripts/sao-ui/src/style.rs index 9318ae9..f6deea5 100644 --- a/scripts/sao-ui/src/style.rs +++ b/scripts/sao-ui/src/style.rs @@ -1,4 +1,4 @@ -use canary_script::Color; +use canary_script::{api::Font, Color}; /// A reusable set of colors. Used by default widget styles. pub struct Palette { @@ -10,7 +10,7 @@ pub struct Palette { /// Sword Art Online color palette. pub const SAO_PALETTE: Palette = Palette { - base: Color::WHITE.with_alpha(0xc0), + base: Color::WHITE.with_alpha(0xa0), surface: Color::WHITE, overlay: Color::WHITE, text: Color::BLACK, @@ -24,5 +24,21 @@ pub const ROSE_PINE_PALETTE: Palette = Palette { text: Color(0xe0def4ff), }; -/// The global palette. -pub const PALETTE: Palette = ROSE_PINE_PALETTE; +/// Common measurements for widget shapes. +pub struct Metrics { + pub surface_rounding: f32, +} + +/// Common default parameters for widget styles. +pub struct Theme { + pub palette: Palette, + pub metrics: Metrics, +} + +/// The global theme. +pub const THEME: Theme = Theme { + palette: ROSE_PINE_PALETTE, + metrics: Metrics { + surface_rounding: 5.0, + }, +}; -- 2.30.2 From 948dfa77c4b6b43090b09b4cb69118d299d852e7 Mon Sep 17 00:00:00 2001 From: mars Date: Fri, 18 Nov 2022 13:08:17 -0700 Subject: [PATCH 05/17] Add style and THEME to widget prelude --- scripts/sao-ui/src/widgets/mod.rs | 1 + 1 file changed, 1 insertion(+) diff --git a/scripts/sao-ui/src/widgets/mod.rs b/scripts/sao-ui/src/widgets/mod.rs index a9968df..fee8899 100644 --- a/scripts/sao-ui/src/widgets/mod.rs +++ b/scripts/sao-ui/src/widgets/mod.rs @@ -75,6 +75,7 @@ impl Widget for T { pub mod prelude { pub use super::*; pub use crate::anim::Animation; + pub use crate::style::{self, THEME}; pub use canary_script::{*, api::*}; pub use keyframe::functions::*; } -- 2.30.2 From 1ac70e653b0bffb1516beb435e282591b0ddb420 Mon Sep 17 00:00:00 2001 From: mars Date: Fri, 18 Nov 2022 13:08:28 -0700 Subject: [PATCH 06/17] Use THEME in dialog style defaults --- scripts/sao-ui/src/widgets/dialog.rs | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/scripts/sao-ui/src/widgets/dialog.rs b/scripts/sao-ui/src/widgets/dialog.rs index f8dea23..6f7aabb 100644 --- a/scripts/sao-ui/src/widgets/dialog.rs +++ b/scripts/sao-ui/src/widgets/dialog.rs @@ -40,7 +40,7 @@ pub struct DialogStyle { impl Default for DialogStyle { fn default() -> Self { Self { - rounding: 5.0, + rounding: THEME.metrics.surface_rounding, header: Default::default(), body: Default::default(), footer: Default::default(), @@ -61,10 +61,10 @@ pub struct DialogHeaderStyle { impl Default for DialogHeaderStyle { fn default() -> Self { Self { - color: Color::WHITE, + color: THEME.palette.surface, height: 20.0, text_font: Font::new(crate::DISPLAY_FONT), - text_color: Color::BLACK, + text_color: THEME.palette.text, text_scale_factor: 0.65, text_baseline: 0.25, } @@ -82,9 +82,9 @@ pub struct DialogBodyStyle { impl Default for DialogBodyStyle { fn default() -> Self { Self { - color: Color::WHITE.with_alpha(0xb0), + color: THEME.palette.base, text_font: Font::new(crate::CONTENT_FONT), - text_color: Color::BLACK, + text_color: THEME.palette.text, text_size: 5.0, } } @@ -103,7 +103,7 @@ impl Default for DialogFooterStyle { Self { icon_font: Font::new(crate::ICON_FONT), button_radius: 7.5, - color: Color::WHITE, + color: THEME.palette.surface, height: 15.0, } } -- 2.30.2 From 6db0c72f4d752d11e74fe56506e5d5415b2615d9 Mon Sep 17 00:00:00 2001 From: mars Date: Fri, 18 Nov 2022 13:15:22 -0700 Subject: [PATCH 07/17] Add terminal colors to style --- scripts/sao-ui/src/style.rs | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/scripts/sao-ui/src/style.rs b/scripts/sao-ui/src/style.rs index f6deea5..7a410ca 100644 --- a/scripts/sao-ui/src/style.rs +++ b/scripts/sao-ui/src/style.rs @@ -6,6 +6,14 @@ pub struct Palette { pub surface: Color, pub overlay: Color, pub text: Color, + pub black: Color, + pub red: Color, + pub green: Color, + pub yellow: Color, + pub blue: Color, + pub magenta: Color, + pub cyan: Color, + pub white: Color, } /// Sword Art Online color palette. @@ -14,6 +22,14 @@ pub const SAO_PALETTE: Palette = Palette { surface: Color::WHITE, overlay: Color::WHITE, text: Color::BLACK, + black: Color::BLACK, + red: Color::RED, + green: Color::GREEN, + yellow: Color::YELLOW, + blue: Color::BLUE, + magenta: Color::MAGENTA, + cyan: Color::CYAN, + white: Color::WHITE, }; /// Rose Pine color palette. @@ -22,6 +38,14 @@ pub const ROSE_PINE_PALETTE: Palette = Palette { surface: Color(0x1f1d2eff), overlay: Color(0x26233aff), text: Color(0xe0def4ff), + black: Color(0x6e6a86ff), + red: Color(0xeb6f92ff), + green: Color(0x7fb59fff), + yellow: Color(0xf6c177ff), + blue: Color(0x31748fff), + magenta: Color(0xc4a7e7ff), + cyan: Color(0x9ccfd8ff), + white: Color(0xe0def4ff), }; /// Common measurements for widget shapes. -- 2.30.2 From 85e1fbd6b6bbb771551232fb1daf2a606a200ab2 Mon Sep 17 00:00:00 2001 From: mars Date: Fri, 18 Nov 2022 13:15:34 -0700 Subject: [PATCH 08/17] Use terminal colors for dialog buttons --- scripts/sao-ui/src/widgets/dialog.rs | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/scripts/sao-ui/src/widgets/dialog.rs b/scripts/sao-ui/src/widgets/dialog.rs index 6f7aabb..f954984 100644 --- a/scripts/sao-ui/src/widgets/dialog.rs +++ b/scripts/sao-ui/src/widgets/dialog.rs @@ -23,8 +23,8 @@ impl DialogResponse { pub fn get_color(&self) -> Color { match self { - DialogResponse::Yes => Color::BLUE, - DialogResponse::No => Color::RED, + DialogResponse::Yes => THEME.palette.blue, + DialogResponse::No => THEME.palette.red, } } } @@ -95,6 +95,7 @@ pub struct DialogFooterStyle { pub icon_font: Font, pub button_radius: f32, pub color: Color, + pub button_fg: Color, pub height: f32, } @@ -104,6 +105,7 @@ impl Default for DialogFooterStyle { icon_font: Font::new(crate::ICON_FONT), button_radius: 7.5, color: THEME.palette.surface, + button_fg: THEME.palette.white, height: 15.0, } } @@ -136,7 +138,7 @@ impl Dialog { thickness: radius * 0.05, body_color: color, ring_color: color, - icon_color: Color::WHITE, + icon_color: style.footer.button_fg, }; let text = LabelText { -- 2.30.2 From a477c3c385bedaf7eea6fe248e69f7f20641d807 Mon Sep 17 00:00:00 2001 From: mars Date: Fri, 18 Nov 2022 13:33:21 -0700 Subject: [PATCH 09/17] Add panel background color edit in sandbox --- apps/sandbox/src/main.rs | 154 +++++++++++++++++++++------------------ 1 file changed, 85 insertions(+), 69 deletions(-) diff --git a/apps/sandbox/src/main.rs b/apps/sandbox/src/main.rs index 9ec1f57..5b54f7b 100644 --- a/apps/sandbox/src/main.rs +++ b/apps/sandbox/src/main.rs @@ -33,6 +33,7 @@ struct App { last_update: Instant, protocol_buf: String, bind_message_buf: String, + panel_bg: egui::Color32, } impl App { @@ -49,6 +50,7 @@ impl App { last_update: Instant::now(), protocol_buf: String::new(), bind_message_buf: String::new(), + panel_bg: egui::Color32::TRANSPARENT, } } } @@ -58,6 +60,8 @@ impl eframe::App for App { ctx.request_repaint(); egui::SidePanel::left("left_panel").show(ctx, |ui| { + ui.heading("New Panel"); + ui.label("Protocol name:"); ui.text_edit_singleline(&mut self.protocol_buf); @@ -81,6 +85,14 @@ impl eframe::App for App { self.panels.push(panel); } + + ui.separator(); + ui.heading("Global Settings"); + + ui.horizontal(|ui| { + ui.label("Panel background color: "); + ui.color_edit_button_srgba(&mut self.panel_bg); + }); }); let dt = self.last_update.elapsed().as_secs_f32(); @@ -88,7 +100,7 @@ impl eframe::App for App { for panel in self.panels.iter_mut() { panel.panel.update(dt); - panel.show(ctx); + panel.show(self.panel_bg, ctx); } } } @@ -102,83 +114,87 @@ pub struct PanelWindow { } impl PanelWindow { - pub fn show(&mut self, ctx: &egui::Context) { + pub fn show(&mut self, bg: egui::Color32, ctx: &egui::Context) { + let frame = egui::Frame::window(&ctx.style()).fill(bg); let window_id = egui::Id::new(format!("panel_{}", self.index)); - egui::Window::new("Panel").id(window_id).show(ctx, |ui| { - egui::menu::bar(ui, |ui| { - ui.checkbox(&mut self.show_msg, "Show Message Editor"); - }); + egui::Window::new("Panel") + .frame(frame) + .id(window_id) + .show(ctx, |ui| { + egui::menu::bar(ui, |ui| { + ui.checkbox(&mut self.show_msg, "Show Message Editor"); + }); - let sense = egui::Sense { - click: true, - drag: true, - focusable: true, - }; - - let desired_size = ui.available_size(); - let response = ui.allocate_response(desired_size, sense); - let rect = response.rect; - - if rect.size() != self.current_size { - let size = rect.size(); - self.current_size = size; - - let size = canary::Vec2::new(size.x, size.y); - self.panel.on_resize(size * PX_PER_MM); - } - - if let Some(hover_pos) = response.hover_pos() { - let local = (hover_pos - rect.left_top()) * PX_PER_MM; - let pos = canary::Vec2::new(local.x, local.y); - - let kind = if response.drag_started() { - CursorEventKind::Select - } else if response.drag_released() { - CursorEventKind::Deselect - } else if response.dragged() { - CursorEventKind::Drag - } else { - CursorEventKind::Hover + let sense = egui::Sense { + click: true, + drag: true, + focusable: true, }; - self.panel.on_cursor_event(kind, pos); - } + let desired_size = ui.available_size(); + let response = ui.allocate_response(desired_size, sense); + let rect = response.rect; - let texture = egui::TextureId::Managed(0); - let uv = egui::pos2(0.0, 0.0); - let mut mesh = egui::Mesh::with_texture(texture); + if rect.size() != self.current_size { + let size = rect.size(); + self.current_size = size; - let commands = self.panel.draw(); - for command in commands.into_iter() { - let voff = mesh.vertices.len() as u32; - - match command { - canary::DrawCommand::Mesh { vertices, indices } => { - for v in vertices.iter() { - use egui::epaint::Vertex; - let pos = v.position / PX_PER_MM; - let pos = egui::pos2(pos.x, pos.y); - let pos = pos + rect.left_top().to_vec2(); - let (r, g, b, a) = v.color.to_rgba_unmultiplied(); - let color = egui::Color32::from_rgba_unmultiplied(r, g, b, a); - let v = Vertex { pos, uv, color }; - mesh.vertices.push(v); - } - - for i in indices.iter() { - mesh.indices.push(i + voff); - } - } - _ => unimplemented!(), + let size = canary::Vec2::new(size.x, size.y); + self.panel.on_resize(size * PX_PER_MM); } - } - let painter = ui.painter_at(rect); - let shape = egui::Shape::mesh(mesh); - painter.add(shape); + if let Some(hover_pos) = response.hover_pos() { + let local = (hover_pos - rect.left_top()) * PX_PER_MM; + let pos = canary::Vec2::new(local.x, local.y); - response - }); + let kind = if response.drag_started() { + CursorEventKind::Select + } else if response.drag_released() { + CursorEventKind::Deselect + } else if response.dragged() { + CursorEventKind::Drag + } else { + CursorEventKind::Hover + }; + + self.panel.on_cursor_event(kind, pos); + } + + let texture = egui::TextureId::Managed(0); + let uv = egui::pos2(0.0, 0.0); + let mut mesh = egui::Mesh::with_texture(texture); + + let commands = self.panel.draw(); + for command in commands.into_iter() { + let voff = mesh.vertices.len() as u32; + + match command { + canary::DrawCommand::Mesh { vertices, indices } => { + for v in vertices.iter() { + use egui::epaint::Vertex; + let pos = v.position / PX_PER_MM; + let pos = egui::pos2(pos.x, pos.y); + let pos = pos + rect.left_top().to_vec2(); + let (r, g, b, a) = v.color.to_rgba_unmultiplied(); + let color = egui::Color32::from_rgba_unmultiplied(r, g, b, a); + let v = Vertex { pos, uv, color }; + mesh.vertices.push(v); + } + + for i in indices.iter() { + mesh.indices.push(i + voff); + } + } + _ => unimplemented!(), + } + } + + let painter = ui.painter_at(rect); + let shape = egui::Shape::mesh(mesh); + painter.add(shape); + + response + }); let msg_edit_id = egui::Id::new(format!("msg_edit_{}", self.index)); egui::Window::new("Message Editor") -- 2.30.2 From 3f7ebeaf7e5cfe9c9be37be036fae7f4a0eb7f79 Mon Sep 17 00:00:00 2001 From: mars Date: Fri, 18 Nov 2022 13:42:06 -0700 Subject: [PATCH 10/17] Use theme in main menu --- scripts/sao-ui/src/main_menu.rs | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/scripts/sao-ui/src/main_menu.rs b/scripts/sao-ui/src/main_menu.rs index 87bbbb0..8ae2206 100644 --- a/scripts/sao-ui/src/main_menu.rs +++ b/scripts/sao-ui/src/main_menu.rs @@ -64,9 +64,9 @@ impl Default for MainMenu { radius: 7.5, spacing: 1.5, thickness: 0.4, - body_color: Color::WHITE, - ring_color: Color::WHITE, - icon_color: Color::BLACK, + body_color: THEME.palette.surface, + ring_color: THEME.palette.surface, + icon_color: THEME.palette.text, }; let mut buttons = Vec::new(); @@ -150,6 +150,7 @@ pub struct PlayerInfo { width: f32, height: f32, rounding: f32, + color: Color, } impl PlayerInfo { @@ -158,6 +159,7 @@ impl PlayerInfo { width: 70.0, height: 120.0, rounding: 5.0, + color: THEME.palette.surface, } } } @@ -170,7 +172,7 @@ impl RectBounds for PlayerInfo { impl Widget for PlayerInfo { fn draw(&mut self, ctx: &DrawContext) { - ctx.draw_rounded_rect(self.get_bounds(), self.rounding, Color::WHITE); + ctx.draw_rounded_rect(self.get_bounds(), self.rounding, self.color); } } -- 2.30.2 From ce7d641795b10b643007bb8ccc760e13c851c479 Mon Sep 17 00:00:00 2001 From: mars Date: Fri, 18 Nov 2022 13:42:18 -0700 Subject: [PATCH 11/17] Use theme in TabMenu --- scripts/sao-ui/src/widgets/menu.rs | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/scripts/sao-ui/src/widgets/menu.rs b/scripts/sao-ui/src/widgets/menu.rs index 5c0a022..36f0ba7 100644 --- a/scripts/sao-ui/src/widgets/menu.rs +++ b/scripts/sao-ui/src/widgets/menu.rs @@ -224,6 +224,7 @@ pub struct TabMenu { impl TabMenu { const HEAD_RADIUS: f32 = 5.0; const HEAD_HEIGHT: f32 = 15.0; + const HEAD_COLOR: Color = THEME.palette.surface; const TAB_WIDTH: f32 = 15.0; const TAB_HEIGHT: f32 = 25.0; const TAB_NUM: usize = 6; @@ -235,9 +236,9 @@ impl TabMenu { radius: Self::HEAD_HEIGHT * 0.25, spacing: Self::HEAD_HEIGHT * 0.1, thickness: Self::HEAD_HEIGHT * 0.05, - body_color: Color::WHITE, - ring_color: Color::BLACK, - icon_color: Color::BLACK, + body_color: Self::HEAD_COLOR, + ring_color: THEME.palette.black, + icon_color: THEME.palette.black, }; const HEAD_BUTTON_MARGIN: f32 = Self::HEAD_HEIGHT / 2.0; @@ -348,20 +349,18 @@ impl Container for TabMenu { } fn draw(&mut self, ctx: &DrawContext) { - let head_color = Color::WHITE; - ctx.draw_partially_rounded_rect( CornerFlags::BOTTOM_RIGHT, self.separator_rect, Self::INNER_RADIUS, - head_color, + Self::HEAD_COLOR, ); ctx.draw_partially_rounded_rect( CornerFlags::TOP, self.head_rect, Self::HEAD_RADIUS, - head_color, + Self::HEAD_COLOR, ); } } -- 2.30.2 From 59a673128ccdae9fb175770115881346fc82b43c Mon Sep 17 00:00:00 2001 From: mars Date: Fri, 18 Nov 2022 14:00:16 -0700 Subject: [PATCH 12/17] Add base_hover and base_active colors --- scripts/sao-ui/src/style.rs | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/scripts/sao-ui/src/style.rs b/scripts/sao-ui/src/style.rs index 7a410ca..01d6f56 100644 --- a/scripts/sao-ui/src/style.rs +++ b/scripts/sao-ui/src/style.rs @@ -1,8 +1,10 @@ -use canary_script::{api::Font, Color}; +use canary_script::Color; /// A reusable set of colors. Used by default widget styles. pub struct Palette { pub base: Color, + pub base_hover: Color, + pub base_active: Color, pub surface: Color, pub overlay: Color, pub text: Color, @@ -19,6 +21,8 @@ pub struct Palette { /// Sword Art Online color palette. pub const SAO_PALETTE: Palette = Palette { base: Color::WHITE.with_alpha(0xa0), + base_hover: Color::WHITE.with_alpha(0xd0), + base_active: Color::YELLOW, surface: Color::WHITE, overlay: Color::WHITE, text: Color::BLACK, @@ -35,6 +39,8 @@ pub const SAO_PALETTE: Palette = Palette { /// Rose Pine color palette. pub const ROSE_PINE_PALETTE: Palette = Palette { base: Color(0x191724ff), + base_hover: Color(0x21202eff), // Rose Pine Highlight Low + base_active: Color(0x403d52ff), // Rose Pine Highlight Med surface: Color(0x1f1d2eff), overlay: Color(0x26233aff), text: Color(0xe0def4ff), -- 2.30.2 From e8c908832799f4143a73bafe122379157944047f Mon Sep 17 00:00:00 2001 From: mars Date: Fri, 18 Nov 2022 14:01:20 -0700 Subject: [PATCH 13/17] Use THEME in RectButtonStyle --- scripts/sao-ui/src/widgets/button.rs | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/scripts/sao-ui/src/widgets/button.rs b/scripts/sao-ui/src/widgets/button.rs index d2b8859..846eae5 100644 --- a/scripts/sao-ui/src/widgets/button.rs +++ b/scripts/sao-ui/src/widgets/button.rs @@ -118,6 +118,8 @@ pub struct RectButtonStyle { pub inactive_color: Color, pub hover_color: Color, pub selected_color: Color, + pub icon_color: Color, + pub label_color: Color, } impl Default for RectButtonStyle { @@ -129,9 +131,11 @@ impl Default for RectButtonStyle { label_baseline: 0.25, icon_scale_factor: 0.8, icon_margin_factor: 1.1, - inactive_color: Color::WHITE.with_alpha(0x40), - hover_color: Color::WHITE.with_alpha(0xb0), - selected_color: Color::YELLOW, + inactive_color: THEME.palette.base, + hover_color: THEME.palette.base_hover, + selected_color: THEME.palette.base_active, + icon_color: THEME.palette.black, + label_color: THEME.palette.text, } } } @@ -168,7 +172,7 @@ impl RectButton { label_left += margin; alignment = HorizontalAlignment::Left; let scale = rect.height() * style.icon_scale_factor; - let color = Color::BLACK; + let color = style.icon_color; let cx = rect.tl.x + margin / 2.0; let cy = rect.tl.y + rect.height() / 2.0; let center = Vec2::new(cx, cy); @@ -182,7 +186,7 @@ impl RectButton { let right = rect.br.x; let baseline = rect.tl.y; let baseline = (rect.height() * (1.0 - style.label_baseline)) + baseline; - let color = Color::BLACK; + let color = style.label_color; Label::new(text, alignment, scale, color, left, right, baseline) }); -- 2.30.2 From bc8032aaaffadaad04b8a93b9fbb2758c1c469c7 Mon Sep 17 00:00:00 2001 From: mars Date: Fri, 18 Nov 2022 14:01:31 -0700 Subject: [PATCH 14/17] Use THEME in ScrollBarStyle --- scripts/sao-ui/src/widgets/scroll.rs | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/scripts/sao-ui/src/widgets/scroll.rs b/scripts/sao-ui/src/widgets/scroll.rs index 130cbc5..0925313 100644 --- a/scripts/sao-ui/src/widgets/scroll.rs +++ b/scripts/sao-ui/src/widgets/scroll.rs @@ -21,11 +21,11 @@ impl Default for ScrollBarStyle { margin: Vec2::splat(2.0), body_radius: 1.0, body_width: 3.0, - body_idle_color: Color(0x7f7f7fff), - body_hover_color: Color(0xb0b0b0ff), - body_selected_color: Color::WHITE, + body_idle_color: THEME.palette.base, + body_hover_color: THEME.palette.base_hover, + body_selected_color: THEME.palette.base_active, rail_width: 1.0, - rail_color: Color(0xa0a0a07f), + rail_color: THEME.palette.base, } } } -- 2.30.2 From ef6a81e1420df977765b4a8ba2ad88dcfb2d86ed Mon Sep 17 00:00:00 2001 From: mars Date: Fri, 18 Nov 2022 14:13:50 -0700 Subject: [PATCH 15/17] Add Rose Pine Moon color palette --- scripts/sao-ui/src/style.rs | 40 +++++++++++++++++++++++++++---------- 1 file changed, 29 insertions(+), 11 deletions(-) diff --git a/scripts/sao-ui/src/style.rs b/scripts/sao-ui/src/style.rs index 01d6f56..b111dad 100644 --- a/scripts/sao-ui/src/style.rs +++ b/scripts/sao-ui/src/style.rs @@ -39,19 +39,37 @@ pub const SAO_PALETTE: Palette = Palette { /// Rose Pine color palette. pub const ROSE_PINE_PALETTE: Palette = Palette { base: Color(0x191724ff), - base_hover: Color(0x21202eff), // Rose Pine Highlight Low - base_active: Color(0x403d52ff), // Rose Pine Highlight Med + base_hover: Color(0x21202eff), // Highlight Low + base_active: Color(0x403d52ff), // Highlight Med surface: Color(0x1f1d2eff), overlay: Color(0x26233aff), text: Color(0xe0def4ff), - black: Color(0x6e6a86ff), - red: Color(0xeb6f92ff), - green: Color(0x7fb59fff), - yellow: Color(0xf6c177ff), - blue: Color(0x31748fff), - magenta: Color(0xc4a7e7ff), - cyan: Color(0x9ccfd8ff), - white: Color(0xe0def4ff), + black: Color(0x6e6a86ff), // Muted + red: Color(0xeb6f92ff), // Love + green: Color(0x7fb59fff), // ??? (not in Rose Pine?) + yellow: Color(0xf6c177ff), // Gold + blue: Color(0x31748fff), // Pine + magenta: Color(0xc4a7e7ff), // Iris + cyan: Color(0x9ccfd8ff), // Foam + white: Color(0xe0def4ff), // Text +}; + +/// Rose Pine Moon color palette. +pub const ROSE_PINE_MOON_PALETTE: Palette = Palette { + base: Color(0x232136ff), + base_hover: Color(0x2a283eff), // Highlight Low + base_active: Color(0x44415aff), // Highlight Med + surface: Color(0x2a273fff), + overlay: Color(0x393552), + text: Color(0xe0def4ff), + black: Color(0x6e6a86ff), // Muted + red: Color(0xeb6f92ff), // Love + green: Color(0x7fb59fff), // ??? (not in Rose Pine?) + yellow: Color(0xf6c177ff), // Gold + blue: Color(0x3e8fb0ff), // Pine + magenta: Color(0xc4a7e7ff), // Iris + cyan: Color(0x9ccfd8ff), // Foam + white: Color(0xe0def4ff), // Text }; /// Common measurements for widget shapes. @@ -67,7 +85,7 @@ pub struct Theme { /// The global theme. pub const THEME: Theme = Theme { - palette: ROSE_PINE_PALETTE, + palette: ROSE_PINE_MOON_PALETTE, metrics: Metrics { surface_rounding: 5.0, }, -- 2.30.2 From 25532f4f9e87623e399418a6acf6737f08e6eafd Mon Sep 17 00:00:00 2001 From: mars Date: Fri, 18 Nov 2022 14:30:26 -0700 Subject: [PATCH 16/17] Use theme in MusicPlayerWidget --- scripts/sao-ui/src/music_player.rs | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/scripts/sao-ui/src/music_player.rs b/scripts/sao-ui/src/music_player.rs index 9eab50e..f0e190c 100644 --- a/scripts/sao-ui/src/music_player.rs +++ b/scripts/sao-ui/src/music_player.rs @@ -179,7 +179,8 @@ impl MusicPlayerWidget { text: content.to_string(), }; - let label = Label::new_centered(text, 10.0, Color::BLACK); + let color = style.body.text_color; + let label = Label::new_centered(text, 10.0, color); Offset::new(label, Vec2::ZERO) }; @@ -196,7 +197,7 @@ impl MusicPlayerWidget { text, HorizontalAlignment::Center, scale, - Color::BLACK, + THEME.palette.text, 0.0, 0.0, baseline, @@ -225,18 +226,18 @@ impl MusicPlayerWidget { radius: style.footer.height * 0.3, spacing: style.footer.height * 0.1, thickness: style.footer.height * 0.025, - body_color: Color(0xf1b841ff), - ring_color: Color(0xf1b841ff), - icon_color: Color::BLACK, + body_color: THEME.palette.yellow, + ring_color: THEME.palette.yellow, + icon_color: THEME.palette.black, }; let secondary_button = RoundButtonStyle { radius: style.footer.height * 0.25, spacing: style.footer.height * 0.05, thickness: style.footer.height * 0.025, - body_color: Color::WHITE, - ring_color: Color::BLACK, - icon_color: Color::BLACK, + body_color: style.footer.color, + ring_color: THEME.palette.black, + icon_color: THEME.palette.black, }; let prev = RoundButton::new(secondary_button.clone(), Some(prev_text)); -- 2.30.2 From e924a170736359b3eeab07853f7bbc7286271807 Mon Sep 17 00:00:00 2001 From: mars Date: Fri, 18 Nov 2022 16:48:17 -0700 Subject: [PATCH 17/17] Disable Magpie glium gamma-correction --- apps/magpie/src/service/gl.rs | 20 ++++++++++++++++---- 1 file changed, 16 insertions(+), 4 deletions(-) diff --git a/apps/magpie/src/service/gl.rs b/apps/magpie/src/service/gl.rs index 689b340..38396ec 100644 --- a/apps/magpie/src/service/gl.rs +++ b/apps/magpie/src/service/gl.rs @@ -2,7 +2,7 @@ // SPDX-License-Identifier: AGPL-3.0-or-later use canary::{DrawCommand, Vec2, PX_PER_MM}; -use glium::Surface; +use glium::{program::ProgramCreationInput, Surface}; #[derive(Copy, Clone)] pub struct Vertex { @@ -59,9 +59,21 @@ pub struct Graphics { impl Graphics { pub fn new(display: glium::Display) -> Self { - let program = - glium::Program::from_source(&display, VERTEX_SHADER_SRC, FRAGMENT_SHADER_SRC, None) - .unwrap(); + let program = glium::Program::new( + &display, + ProgramCreationInput::SourceCode { + vertex_shader: VERTEX_SHADER_SRC, + tessellation_control_shader: None, + tessellation_evaluation_shader: None, + geometry_shader: None, + fragment_shader: FRAGMENT_SHADER_SRC, + transform_feedback_varyings: None, + outputs_srgb: true, // don't automatically apply gamma correction + uses_point_size: false, + }, + ) + .unwrap(); + Self { display, program } } -- 2.30.2