Improve aesthetic of light overview
Diff
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(-)
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M480-420q-68 0-123.5 38.5T276-280h408q-25-63-80.5-101.5T480-420Zm-168-60 44-42 42 42 42-42-42-42 42-44-42-42-42 42-44-42-42 42 42 44-42 42 42 42Zm250 0 42-42 44 42 42-42-42-42 42-44-42-42-44 42-42-42-42 42 42 44-42 42 42 42ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z"/></svg>
\ No newline at end of file
@@ -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 {
@@ -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
@@ -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"),
}
}
}
@@ -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<M: Clone> iced::widget::Component<M, Renderer> for ToggleCard<M> {
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,
..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 = <Self as container::StyleSheet>::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) }
}
}
}
}