From 238c6c253678c3bc932bb3b0ae379162b3e6242b Mon Sep 17 00:00:00 2001 From: Jordan Doyle Date: Sat, 6 Jan 2024 18:21:00 +0000 Subject: [PATCH] Improve aesthetic of light overview --- assets/icons/dead.svg | 1 + shalom/src/pages/room.rs | 4 +++- shalom/src/pages/room/lights.rs | 11 +++++++++-- shalom/src/theme.rs | 10 +++++----- shalom/src/widgets/toggle_card.rs | 113 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++------------------------------------------- 5 files changed, 88 insertions(+), 51 deletions(-) create mode 100644 assets/icons/dead.svg diff --git a/assets/icons/dead.svg b/assets/icons/dead.svg new file mode 100644 index 0000000..8f993f8 --- /dev/null +++ b/assets/icons/dead.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/shalom/src/pages/room.rs b/shalom/src/pages/room.rs index e7d04c7..85366a9 100644 --- a/shalom/src/pages/room.rs +++ b/shalom/src/pages/room.rs @@ -76,7 +76,9 @@ impl Room { col = col.push(match self.current_page { Page::Climate => Element::from(row![]), Page::Listen => self.listen.view().map(Message::Listen), - Page::Lights => self.lights.view().map(Message::Lights), + Page::Lights => container(self.lights.view().map(Message::Lights)) + .padding([0, 40, 0, 40]) + .into(), }); let background = match self.current_page { diff --git a/shalom/src/pages/room/lights.rs b/shalom/src/pages/room/lights.rs index 4eebeb4..941918a 100644 --- a/shalom/src/pages/room/lights.rs +++ b/shalom/src/pages/room/lights.rs @@ -1,6 +1,8 @@ use std::{collections::BTreeMap, sync::Arc}; -use iced::{futures::StreamExt, subscription, widget::Row, Element, Renderer, Subscription}; +use iced::{ + futures::StreamExt, subscription, widget::Row, Element, Length, Renderer, Subscription, +}; use crate::{ oracle::{Light, Oracle, Room}, @@ -49,7 +51,12 @@ impl Lights { light.on.unwrap_or_default(), light.on.is_none(), ) - .icon(Icon::Bulb) + .icon(if light.on.is_none() { + Icon::Dead + } else { + Icon::Bulb + }) + .width(Length::Shrink) .active_icon_colour( light .hs_color diff --git a/shalom/src/theme.rs b/shalom/src/theme.rs index 89fb405..c5a3390 100644 --- a/shalom/src/theme.rs +++ b/shalom/src/theme.rs @@ -20,15 +20,13 @@ pub mod colours { }}; } + pub const SYSTEM_GRAY6: Color = colour!(28.0, 28.0, 30.0); + pub const ORANGE: Color = colour!(255.0, 149.0, 0.0); + pub const SLATE_200: Color = colour!(226.0, 232.0, 240.0); - pub const SLATE_300: Color = colour!(203.0, 213.0, 225.0); pub const SLATE_400: Color = colour!(148.0, 163.0, 184.0); - pub const SLATE_600: Color = colour!(71.0, 85.0, 105.0); - pub const SKY_400: Color = colour!(56.0, 189.0, 248.0); pub const SKY_500: Color = colour!(14.0, 165.0, 233.0); - - pub const AMBER_200: Color = colour!(253.0, 230.0, 138.0); } #[derive(Copy, Clone)] @@ -61,6 +59,7 @@ pub enum Icon { Hvac, Shuffle, SpeakerFull, + Dead, } impl Icon { @@ -102,6 +101,7 @@ impl Icon { Self::Wind => image!("wind"), Self::Shuffle => image!("shuffle"), Self::Repeat1 => image!("repeat-1"), + Self::Dead => image!("dead"), } } } diff --git a/shalom/src/widgets/toggle_card.rs b/shalom/src/widgets/toggle_card.rs index 23fc736..8b7d8ca 100644 --- a/shalom/src/widgets/toggle_card.rs +++ b/shalom/src/widgets/toggle_card.rs @@ -4,15 +4,15 @@ use std::time::{Duration, Instant}; use iced::{ alignment::Vertical, - font::{Stretch, Weight}, + font::Weight, theme::{Container, Svg}, - widget::{column, component, container, svg, text}, + widget::{component, container, row, svg, text}, Alignment, Background, Color, Element, Font, Length, Renderer, Theme, }; use crate::{ theme::{ - colours::{AMBER_200, SKY_400, SKY_500, SLATE_200, SLATE_300, SLATE_600}, + colours::{ORANGE, SYSTEM_GRAY6}, Icon, }, widgets::mouse_area::mouse_area, @@ -131,26 +131,26 @@ impl iced::widget::Component for ToggleCard { let icon = self.icon.map(|icon| { svg(icon) - .height(32) - .width(32) + .height(28) + .width(28) .style(Svg::Custom(Box::new(style))) }); - let name = text(&self.name).size(14).font(Font { + let name = text(&self.name).size(18).font(Font { weight: Weight::Bold, - stretch: Stretch::Condensed, + // stretch: Stretch::Condensed, ..Font::with_name("Helvetica Neue") }); - let col = if let Some(icon) = icon { - column![icon, name] + let row = if let Some(icon) = icon { + row![icon, name] } else { - column![name] + row![name] }; mouse_area( container( - col.spacing(5) + row.spacing(5) .width(self.width) .align_items(Alignment::Center), ) @@ -203,43 +203,63 @@ impl container::StyleSheet for Style { type Style = Theme; fn appearance(&self, _style: &Self::Style) -> container::Appearance { - let c = |c| Color { a: 0.8, ..c }; + let base = container::Appearance { + text_color: None, + background: None, + border_radius: 10.0.into(), + border_width: 0.0, + border_color: Color::TRANSPARENT, + }; match self { Style::Disabled => container::Appearance { - text_color: Some(Color::WHITE), - background: Some(Background::Color(c(SLATE_600))), - border_radius: 10.0.into(), - border_width: 0.0, - border_color: Color::default(), + text_color: Some(Color { + a: 0.6, + ..Color::WHITE + }), + background: Some(Background::Color(Color { + a: 0.9, + ..SYSTEM_GRAY6 + })), + ..base }, Style::Inactive => container::Appearance { - text_color: Some(Color::WHITE), - background: Some(Background::Color(c(SLATE_200))), - border_radius: 10.0.into(), - border_width: 0.0, - border_color: Color::default(), + text_color: Some(Color { + a: 0.7, + ..Color::WHITE + }), + background: Some(Background::Color(Color { + a: 0.7, + ..SYSTEM_GRAY6 + })), + ..base }, Style::InactiveHover => container::Appearance { - text_color: Some(Color::WHITE), - background: Some(Background::Color(c(SLATE_300))), - border_radius: 10.0.into(), - border_width: 0.0, - border_color: Color::default(), + text_color: Some(Color { + a: 0.7, + ..Color::WHITE + }), + background: Some(Background::Color(Color { + a: 0.9, + ..SYSTEM_GRAY6 + })), + ..base }, Style::Active(_) => container::Appearance { - text_color: Some(Color::WHITE), - background: Some(Background::Color(c(SKY_400))), - border_radius: 10.0.into(), - border_width: 0.0, - border_color: Color::default(), + text_color: Some(Color::BLACK), + background: Some(Background::Color(Color { + a: 0.8, + ..Color::WHITE + })), + ..base }, Style::ActiveHover(_) => container::Appearance { - text_color: Some(Color::WHITE), - background: Some(Background::Color(c(SKY_500))), - border_radius: 10.0.into(), - border_width: 0.0, - border_color: Color::default(), + text_color: Some(Color::BLACK), + background: Some(Background::Color(Color { + a: 0.6, + ..Color::WHITE + })), + ..base }, } } @@ -248,14 +268,21 @@ impl container::StyleSheet for Style { impl svg::StyleSheet for Style { type Style = Theme; - fn appearance(&self, _style: &Self::Style) -> svg::Appearance { + fn appearance(&self, style: &Self::Style) -> svg::Appearance { + let base = ::appearance(self, style) + .text_color + .unwrap_or(Color::WHITE); + match self { - Style::Active(c) | Style::ActiveHover(c) => svg::Appearance { - color: Some(c.unwrap_or(AMBER_200)), - }, - Style::Inactive | Style::InactiveHover | Style::Disabled => svg::Appearance { - color: Some(Color::BLACK), + Style::Active(_) | Style::ActiveHover(_) => svg::Appearance { + color: Some(Color { + a: base.a, + ..ORANGE + }), }, + Style::Inactive | Style::InactiveHover | Style::Disabled => { + svg::Appearance { color: Some(base) } + } } } } -- libgit2 1.7.2