leyoda/libcosmic
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: icon styling and headerbar icon styling

Browse source 
Headerbar icons are transparent when their window is not focused, but otherwise share the same style as icons with selection. This updates the icon styles to match figma when selected.
This commit is contained in:
Ashley Wulber 2024-03-11 15:21:48 -04:00 • committed by Ashley Wulber
parent 6f6eeec0e7
commit e47684ffdb
11 changed files with 121 additions and 115 deletions
Download patch file Download diff file Expand all files Collapse all files

11
src/app/core.rs
View file

@ -6,6 +6,7 @@ use std::collections::HashMap;
use crate::config::CosmicTk;
use cosmic_config::CosmicConfigEntry;
use cosmic_theme::ThemeMode;
use iced::window;
use iced_core::window::Id;
use palette::Srgba;
@ -57,6 +58,9 @@ pub struct Core {
/// Scaling factor used by the application
scale_factor: f32,
/// Window focus state
pub(super) focused_window: Option<window::Id>,
pub(super) theme_sub_counter: u64,
/// Last known system theme
pub(super) system_theme: Theme,
@ -136,6 +140,7 @@ impl Default for Core {
height: 0,
width: 0,
},
focused_window: None,
#[cfg(feature = "applet")]
applet: crate::applet::Context::default(),
#[cfg(feature = "single-instance")]
@ -285,6 +290,12 @@ impl Core {
)
}
/// Get the current focused window if it exists
#[must_use]
pub fn focused_window(&self) -> Option<window::Id> {
self.focused_window.clone()
}
/// Whether the application should use a dark theme, according to the system
#[must_use]
pub fn system_is_dark(&self) -> bool {

24
src/app/cosmic.rs
View file

@ -78,6 +78,10 @@ pub enum Message {
ShowWindowMenu,
#[cfg(feature = "xdg-portal")]
DesktopSettings(crate::theme::portal::Desktop),
/// Window focus changed
Focus(window::Id),
/// Window focus lost
Unfocus(window::Id),
}
#[derive(Default)]
@ -159,6 +163,10 @@ where
iced::Event::Window(id, window::Event::Closed) => {
return Some(Message::SurfaceClosed(id))
}
iced::Event::Window(id, window::Event::Focused) => return Some(Message::Focus(id)),
iced::Event::Window(id, window::Event::Unfocused) => {
return Some(Message::Unfocus(id))
}
#[cfg(feature = "wayland")]
iced::Event::PlatformSpecific(PlatformSpecific::Wayland(event)) => match event {
wayland::Event::Window(WindowEvent::State(state), _surface, id) => {
@ -557,6 +565,22 @@ impl<T: Application> Cosmic<T> {
Message::ToolkitConfig(config) => {
self.app.core_mut().toolkit_config = config;
}
Message::Focus(f) => {
self.app.core_mut().focused_window = Some(f);
}
Message::Unfocus(id) => {
let core = self.app.core_mut();
if core
.focused_window
.as_ref()
.map(|cur| *cur == id)
.unwrap_or_default()
{
core.focused_window = None;
}
}
}
iced::Command::none()

6
src/app/mod.rs
View file

@ -642,6 +642,10 @@ impl<App: Application> ApplicationExt for App {
fn view_main(&self) -> Element<Message<Self::Message>> {
let core = self.core();
let is_condensed = core.is_condensed();
let focused = core
.focused_window()
.map(|i| i == self.main_window_id())
.unwrap_or_default();
let content_row = crate::widget::row::with_children({
let mut widgets = Vec::with_capacity(2);
@ -686,7 +690,7 @@ impl<App: Application> ApplicationExt for App {
.push_maybe(if core.window.show_headerbar {
Some({
let mut header = crate::widget::header_bar()
.window_id(self.main_window_id())
.focused(focused)
.title(&core.window.header_title)
.on_drag(Message::Cosmic(cosmic::Message::Drag))
.on_close(Message::Cosmic(cosmic::Message::Close))

66
src/theme/style/button.rs
View file

@ -22,6 +22,7 @@ pub enum Button {
Destructive,
Link,
Icon,
HeaderBar,
IconVertical,
Image,
#[default]
@ -66,7 +67,7 @@ pub fn appearance(
appearance.icon_color = icon;
}
Button::Icon | Button::IconVertical => {
Button::Icon | Button::IconVertical | Button::HeaderBar => {
if matches!(style, Button::IconVertical) {
corner_radii = &cosmic.corner_radii.radius_m;
}
@ -146,14 +147,23 @@ pub fn appearance(
impl StyleSheet for crate::Theme {
type Style = Button;
fn active(&self, focused: bool, style: &Self::Style) -> Appearance {
fn active(&self, focused: bool, selected: bool, style: &Self::Style) -> Appearance {
if let Button::Custom { active, .. } = style {
return active(focused, self);
}
let accent = self.cosmic().accent_color();
appearance(self, focused, style, |component| {
let text_color = if let Button::Icon | Button::IconVertical = style {
None
let text_color = if matches!(
style,
Button::Icon | Button::IconVertical | Button::HeaderBar
) && selected
{
Some(accent.into())
} else if matches!(style, Button::HeaderBar) && !selected {
let mut c = Color::from(component.on);
c.a = 0.8;
Some(c)
} else {
Some(component.on.into())
};
@ -179,39 +189,61 @@ impl StyleSheet for crate::Theme {
}
fn drop_target(&self, style: &Self::Style) -> Appearance {
self.active(false, style)
self.active(false, false, style)
}
fn hovered(&self, focused: bool, style: &Self::Style) -> Appearance {
fn hovered(&self, focused: bool, selected: bool, style: &Self::Style) -> Appearance {
if let Button::Custom { hovered, .. } = style {
return hovered(focused, self);
}
let accent = self.cosmic().accent_button.hover;
appearance(
self,
focused || matches!(style, Button::Image),
style,
|component| {
(
component.hover.into(),
Some(component.on.into()),
Some(component.on.into()),
)
let text_color = if matches!(
style,
Button::Icon | Button::IconVertical | Button::HeaderBar
) && selected
{
Some(accent.into())
} else if matches!(style, Button::HeaderBar) && !selected {
let mut c = Color::from(component.on);
c.a = 0.8;
Some(c)
} else {
Some(component.on.into())
};
(component.hover.into(), text_color, text_color)
},
)
}
fn pressed(&self, focused: bool, style: &Self::Style) -> Appearance {
fn pressed(&self, focused: bool, selected: bool, style: &Self::Style) -> Appearance {
if let Button::Custom { pressed, .. } = style {
return pressed(focused, self);
}
let accent = self.cosmic().accent_button.pressed;
appearance(self, focused, style, |component| {
(
component.pressed.into(),
Some(component.on.into()),
Some(component.on.into()),
)
let text_color = if matches!(
style,
Button::Icon | Button::IconVertical | Button::HeaderBar
) && selected
{
Some(accent.into())
} else if matches!(style, Button::HeaderBar) && !selected {
let mut c = Color::from(component.on);
c.a = 0.8;
Some(c)
} else {
Some(component.on.into())
};
(component.pressed.into(), text_color, text_color)
})
}

8
src/widget/button/icon.rs
View file

@ -16,12 +16,14 @@ pub type Button<'a, Message> = Builder<'a, Message, Icon>;
pub struct Icon {
handle: Handle,
vertical: bool,
selected: bool,
}
pub fn icon<'a, Message>(handle: impl Into<Handle>) -> Button<'a, Message> {
Button::new(Icon {
handle: handle.into(),
vertical: false,
selected: false,
})
}
@ -124,6 +126,11 @@ impl<'a, Message> Button<'a, Message> {
self
}
pub fn selected(mut self, selected: bool) -> Self {
self.variant.selected = selected;
self
}
pub fn vertical(mut self, vertical: bool) -> Self {
self.variant.vertical = vertical;
self.style = Style::IconVertical;
@ -179,6 +186,7 @@ impl<'a, Message: Clone + 'static> From<Button<'a, Message>> for Element<'a, Mes
.padding(0)
.id(builder.id)
.on_press_maybe(builder.on_press)
.selected(builder.variant.selected)
.style(builder.style);
if builder.tooltip.is_empty() {

8
src/widget/button/style.rs
View file

@ -68,21 +68,21 @@ pub trait StyleSheet {
type Style: Default;
/// Produces the active [`Appearance`] of a button.
fn active(&self, focused: bool, style: &Self::Style) -> Appearance;
fn active(&self, focused: bool, selected: bool, style: &Self::Style) -> Appearance;
/// Produces the disabled [`Appearance`] of a button.
fn disabled(&self, style: &Self::Style) -> Appearance;
/// [`Appearance`] when the button is the target of a DND operation.
fn drop_target(&self, style: &Self::Style) -> Appearance {
self.hovered(false, style)
self.hovered(false, false, style)
}
/// Produces the hovered [`Appearance`] of a button.
fn hovered(&self, focused: bool, style: &Self::Style) -> Appearance;
fn hovered(&self, focused: bool, selected: bool, style: &Self::Style) -> Appearance;
/// Produces the pressed [`Appearance`] of a button.
fn pressed(&self, focused: bool, style: &Self::Style) -> Appearance;
fn pressed(&self, focused: bool, selected: bool, style: &Self::Style) -> Appearance;
/// Background color of the selection indicator
fn selection_background(&self) -> Background;

10
src/widget/button/widget.rs
View file

@ -528,10 +528,10 @@ where
}
if self.on_press.is_none() {
node.set_disabled()
node.set_disabled();
}
if is_hovered {
node.set_hovered()
node.set_hovered();
}
node.set_default_action_verb(DefaultActionVerb::Click);
@ -696,12 +696,12 @@ where
style_sheet.disabled(style)
} else if is_mouse_over {
if state.is_pressed {
style_sheet.pressed(state.is_focused || is_selected, style)
style_sheet.pressed(state.is_focused, is_selected, style)
} else {
style_sheet.hovered(state.is_focused || is_selected, style)
style_sheet.hovered(state.is_focused, is_selected, style)
}
} else {
style_sheet.active(state.is_focused || is_selected, style)
style_sheet.active(state.is_focused, is_selected, style)
};
let doubled_border_width = styling.border_width * 2.0;

6
src/widget/color_picker/mod.rs
View file

@ -799,7 +799,7 @@ pub fn color_button<'a, Message: 'static>(
} else {
(0.0, Color::TRANSPARENT)
};
let standard = theme.active(focused, &Button::Standard);
let standard = theme.active(focused, false, &Button::Standard);
button::Appearance {
shadow_offset: Vector::default(),
background: color.map(Background::from).or(standard.background),
@ -837,7 +837,7 @@ pub fn color_button<'a, Message: 'static>(
(0.0, Color::TRANSPARENT)
};
let standard = theme.hovered(focused, &Button::Standard);
let standard = theme.hovered(focused, false, &Button::Standard);
button::Appearance {
shadow_offset: Vector::default(),
background: color.map(Background::from).or(standard.background),
@ -859,7 +859,7 @@ pub fn color_button<'a, Message: 'static>(
(0.0, Color::TRANSPARENT)
};
let standard = theme.pressed(focused, &Button::Standard);
let standard = theme.pressed(focused, false, &Button::Standard);
button::Appearance {
shadow_offset: Vector::default(),
background: color.map(Background::from).or(standard.background),

88
src/widget/header_bar.rs
View file

@ -5,7 +5,7 @@ use crate::{ext::CollectionWidget, widget, Element};
use apply::Apply;
use derive_setters::Setters;
use iced::{window, Length};
use iced_core::{renderer::Quad, widget::tree, Background, Renderer, Widget};
use iced_core::{widget::tree, Widget};
use std::borrow::Cow;
#[must_use]
@ -20,7 +20,7 @@ pub fn header_bar<'a, Message>() -> HeaderBar<'a, Message> {
start: Vec::new(),
center: Vec::new(),
end: Vec::new(),
window_id: None,
focused: false,
}
}
@ -50,9 +50,8 @@ pub struct HeaderBar<'a, Message> {
#[setters(strip_option)]
on_right_click: Option<Message>,
/// The window id for the headerbar.
#[setters(strip_option)]
window_id: Option<iced::window::Id>,
/// Focused state of the window
focused: bool,
/// Elements packed at the start of the headerbar.
#[setters(skip)]
@ -100,7 +99,6 @@ impl<'a, Message: Clone + 'static> HeaderBar<'a, Message> {
#[must_use]
pub fn build(self) -> HeaderBarWidget<'a, Message> {
HeaderBarWidget {
window_id: self.window_id,
header_bar_inner: self.into_element(),
}
}
@ -108,7 +106,6 @@ impl<'a, Message: Clone + 'static> HeaderBar<'a, Message> {
pub struct HeaderBarWidget<'a, Message> {
header_bar_inner: Element<'a, Message>,
window_id: Option<iced::window::Id>,
}
impl<'a, Message: Clone + 'static> Widget<Message, crate::Theme, crate::Renderer>
@ -122,23 +119,6 @@ impl<'a, Message: Clone + 'static> Widget<Message, crate::Theme, crate::Renderer
self.header_bar_inner.as_widget().size()
}
fn tag(&self) -> tree::Tag {
tree::Tag::of::<MyState>()
}
fn diff(&mut self, tree: &mut tree::Tree) {
tree.diff_children(&mut [&mut self.header_bar_inner]);
let prev = tree.state.downcast_mut::<MyState>();
if prev.window_id != self.window_id {
*prev = MyState::new(self.window_id);
}
}
fn state(&self) -> tree::State {
let state = MyState::new(self.window_id);
tree::State::new(state)
}
fn layout(
&self,
tree: &mut tree::Tree,
@ -174,28 +154,6 @@ impl<'a, Message: Clone + 'static> Widget<Message, crate::Theme, crate::Renderer
cursor,
viewport,
);
let state = tree.state.downcast_ref::<MyState>();
if !state.window_has_focus {
let header_bar_appearance =
<crate::Theme as crate::iced_style::container::StyleSheet>::appearance(
theme,
&crate::theme::Container::HeaderBar,
);
let cosmic = theme.cosmic();
let mut neutral_0 = cosmic.palette.neutral_0;
neutral_0.alpha = 0.3;
// draw overlay rectangle
renderer.fill_quad(
Quad {
bounds: layout.bounds(),
border: header_bar_appearance.border,
shadow: header_bar_appearance.shadow,
},
Background::Color(neutral_0.into()),
);
}
}
fn on_event(
@ -209,14 +167,6 @@ impl<'a, Message: Clone + 'static> Widget<Message, crate::Theme, crate::Renderer
shell: &mut iced_core::Shell<'_, Message>,
viewport: &iced_core::Rectangle,
) -> iced_core::event::Status {
if let iced_core::Event::Window(id, iced_core::window::Event::Focused) = event {
let state = state.state.downcast_mut::<MyState>();
state.focus_window(id);
} else if let iced_core::Event::Window(id, iced_core::window::Event::Unfocused) = event {
let state = state.state.downcast_mut::<MyState>();
state.unfocus_window(id);
}
let child_state = &mut state.children[0];
let child_layout = layout.children().next().unwrap();
self.header_bar_inner.as_widget_mut().on_event(
@ -370,6 +320,8 @@ impl<'a, Message: Clone + 'static> HeaderBar<'a, Message> {
widget::icon::from_svg_bytes(icon_bytes)
.symbolic(true)
.apply(widget::button::icon)
.style(crate::theme::Button::HeaderBar)
.selected(self.focused)
.icon_size(size)
.on_press(on_press)
};
@ -415,31 +367,3 @@ impl<'a, Message: Clone + 'static> From<HeaderBarWidget<'a, Message>> for Elemen
Element::new(headerbar)
}
}
pub struct MyState {
pub window_id: Option<window::Id>,
pub window_has_focus: bool,
}
impl MyState {
pub fn new(id: Option<window::Id>) -> Self {
Self {
window_id: id,
window_has_focus: id.is_none(),
}
}
pub fn focus_window(&mut self, id: window::Id) {
if self.window_id != Some(id) {
return;
}
self.window_has_focus = true;
}
pub fn unfocus_window(&mut self, id: window::Id) {
if self.window_id != Some(id) {
return;
}
self.window_has_focus = false;
}
}