refactor: styling improvements

This commit is contained in:
Ashley Wulber 2023-10-19 17:05:13 -04:00 committed by Ashley Wulber
parent d80a801fe5
commit 3338cb74b6
10 changed files with 349 additions and 452 deletions

View file

@ -922,7 +922,7 @@ impl cosmic::Application for CosmicAppList {
Length::Fill, Length::Fill,
dnd_listener(column(favorites)), dnd_listener(column(favorites)),
column(active).into(), column(active).into(),
container(divider::horizontal::light()) container(divider::horizontal::default())
.width(self.core.applet.suggested_size().1) .width(self.core.applet.suggested_size().1)
.into(), .into(),
) )
@ -1045,9 +1045,9 @@ impl cosmic::Application for CosmicAppList {
.on_press(Message::Activate(handle.clone())), .on_press(Message::Activate(handle.clone())),
); );
} }
content = content.push(divider::horizontal::light()); content = content.push(divider::horizontal::default());
content = content.push(list_col); content = content.push(list_col);
content = content.push(divider::horizontal::light()); content = content.push(divider::horizontal::default());
} }
content = content.push(if is_favorite { content = content.push(if is_favorite {
cosmic::widget::button(iced::widget::text(fl!("unfavorite"))) cosmic::widget::button(iced::widget::text(fl!("unfavorite")))

View file

@ -2,11 +2,12 @@ mod localize;
use cosmic::app::Command; use cosmic::app::Command;
use cosmic::applet::menu_button; use cosmic::applet::menu_button;
use cosmic::applet::padded_control;
use cosmic::iced::widget; use cosmic::iced::widget;
use cosmic::iced::Limits; use cosmic::iced::Limits;
use cosmic::iced_runtime::core::alignment::Horizontal; use cosmic::iced_runtime::core::alignment::Horizontal;
use cosmic::widget::{button, divider, icon}; use cosmic::widget::{divider, icon};
use cosmic::Renderer; use cosmic::Renderer;
use cosmic::iced::{ use cosmic::iced::{
@ -362,43 +363,45 @@ impl cosmic::Application for Audio {
.0 * 100.0; .0 * 100.0;
let audio_content = if audio_disabled { let audio_content = if audio_disabled {
column![text(fl!("disconnected")) column![padded_control(
.width(Length::Fill) text(fl!("disconnected"))
.horizontal_alignment(Horizontal::Center) .width(Length::Fill)
.size(24),] .horizontal_alignment(Horizontal::Center)
.size(24)
)]
} else { } else {
column![ column![
row![ padded_control(
icon::from_name(self.icon_name.as_str()) row![
.size(24) icon::from_name(self.icon_name.as_str())
.symbolic(true), .size(24)
slider(0.0..=100.0, out_f64, Message::SetOutputVolume) .symbolic(true),
.width(Length::FillPortion(5)), slider(0.0..=100.0, out_f64, Message::SetOutputVolume)
text(format!("{}%", out_f64.round())) .width(Length::FillPortion(5)),
.size(16) text(format!("{}%", out_f64.round()))
.width(Length::FillPortion(1)) .size(16)
.horizontal_alignment(Horizontal::Right) .width(Length::FillPortion(1))
] .horizontal_alignment(Horizontal::Right)
.spacing(12) ]
.align_items(Alignment::Center) .spacing(12)
.padding([8, 24]), .align_items(Alignment::Center)
row![ ),
icon::from_name(self.input_icon_name.as_str()) padded_control(
.size(24) row![
.symbolic(true), icon::from_name(self.input_icon_name.as_str())
slider(0.0..=100.0, in_f64, Message::SetInputVolume) .size(24)
.width(Length::FillPortion(5)), .symbolic(true),
text(format!("{}%", in_f64.round())) slider(0.0..=100.0, in_f64, Message::SetInputVolume)
.size(16) .width(Length::FillPortion(5)),
.width(Length::FillPortion(1)) text(format!("{}%", in_f64.round()))
.horizontal_alignment(Horizontal::Right) .size(16)
] .width(Length::FillPortion(1))
.spacing(12) .horizontal_alignment(Horizontal::Right)
.align_items(Alignment::Center) ]
.padding([8, 24]), .spacing(12)
container(divider::horizontal::light()) .align_items(Alignment::Center)
.padding([12, 24]) ),
.width(Length::Fill), padded_control(divider::horizontal::default()),
revealer( revealer(
self.is_open == IsOpen::Output, self.is_open == IsOpen::Output,
fl!("output"), fl!("output"),
@ -440,9 +443,7 @@ impl cosmic::Application for Audio {
}; };
let content = column![ let content = column![
audio_content, audio_content,
container(divider::horizontal::light()) padded_control(divider::horizontal::default()),
.padding([12, 24])
.width(Length::Fill),
container( container(
anim!( anim!(
// toggler // toggler
@ -455,9 +456,7 @@ impl cosmic::Application for Audio {
.text_size(14) .text_size(14)
) )
.padding([0, 24]), .padding([0, 24]),
container(divider::horizontal::light()) padded_control(divider::horizontal::default()),
.padding([12, 24])
.width(Length::Fill),
menu_button(text(fl!("sound-settings")).size(14)) menu_button(text(fl!("sound-settings")).size(14))
] ]
.align_items(Alignment::Start) .align_items(Alignment::Start)

View file

@ -10,7 +10,7 @@ use crate::upower_device::{device_subscription, DeviceDbusEvent};
use crate::upower_kbdbacklight::{ use crate::upower_kbdbacklight::{
kbd_backlight_subscription, KeyboardBacklightRequest, KeyboardBacklightUpdate, kbd_backlight_subscription, KeyboardBacklightRequest, KeyboardBacklightUpdate,
}; };
use cosmic::applet::menu_button; use cosmic::applet::{menu_button, padded_control};
use cosmic::iced::alignment::Horizontal; use cosmic::iced::alignment::Horizontal;
use cosmic::iced::wayland::popup::{destroy_popup, get_popup}; use cosmic::iced::wayland::popup::{destroy_popup, get_popup};
use cosmic::iced::{ use cosmic::iced::{
@ -19,7 +19,7 @@ use cosmic::iced::{
}; };
use cosmic::iced_runtime::core::layout::Limits; use cosmic::iced_runtime::core::layout::Limits;
use cosmic::iced_style::application; use cosmic::iced_style::application;
use cosmic::widget::{button, divider, horizontal_space, icon}; use cosmic::widget::{divider, horizontal_space, icon};
use cosmic::Command; use cosmic::Command;
use cosmic::{Element, Theme}; use cosmic::{Element, Theme};
use cosmic_time::{anim, chain, id, once_cell::sync::Lazy, Instant, Timeline}; use cosmic_time::{anim, chain, id, once_cell::sync::Lazy, Instant, Timeline};
@ -317,16 +317,15 @@ impl cosmic::Application for CosmicBatteryApplet {
.applet .applet
.popup_container( .popup_container(
column![ column![
row![ padded_control(
icon::from_name(&*self.icon_name).size(24).symbolic(true), row![
column![name, description] icon::from_name(&*self.icon_name).size(24).symbolic(true),
] column![name, description]
.padding([0, 24]) ]
.spacing(8) .spacing(8)
.align_items(Alignment::Center), .align_items(Alignment::Center)
container(divider::horizontal::light()) ),
.width(Length::Fill) padded_control(divider::horizontal::default()),
.padding([0, 12]),
menu_button( menu_button(
row![ row![
column![ column![
@ -387,10 +386,8 @@ impl cosmic::Application for CosmicBatteryApplet {
.align_items(Alignment::Center) .align_items(Alignment::Center)
) )
.on_press(Message::SelectProfile(Power::Performance)), .on_press(Message::SelectProfile(Power::Performance)),
container(divider::horizontal::light()) padded_control(divider::horizontal::default()),
.width(Length::Fill) padded_control(
.padding([0, 12]),
container(
anim!( anim!(
//toggler //toggler
MAX_CHARGE, MAX_CHARGE,
@ -401,47 +398,43 @@ impl cosmic::Application for CosmicBatteryApplet {
) )
.text_size(14) .text_size(14)
.width(Length::Fill) .width(Length::Fill)
) ),
.padding([0, 24]) padded_control(divider::horizontal::default()),
.width(Length::Fill), padded_control(
container(divider::horizontal::light()) row![
.width(Length::Fill) icon::from_name(self.display_icon_name.as_str())
.padding([0, 12]), .size(24)
row![ .symbolic(true),
icon::from_name(self.display_icon_name.as_str()) slider(
.size(24) 1..=100,
.symbolic(true), (self.screen_brightness * 100.0) as i32,
slider( Message::SetScreenBrightness
1..=100, ),
(self.screen_brightness * 100.0) as i32, text(format!("{:.0}%", self.screen_brightness * 100.0))
Message::SetScreenBrightness .size(16)
), .width(Length::Fixed(40.0))
text(format!("{:.0}%", self.screen_brightness * 100.0)) .horizontal_alignment(Horizontal::Right)
.size(16) ]
.width(Length::Fixed(40.0)) .spacing(12)
.horizontal_alignment(Horizontal::Right) ),
] padded_control(
.padding([0, 24]) row![
.spacing(12), icon::from_name("keyboard-brightness-symbolic")
row![ .size(24)
icon::from_name("keyboard-brightness-symbolic") .symbolic(true),
.size(24) slider(
.symbolic(true), 0..=100,
slider( (self.kbd_brightness * 100.0) as i32,
0..=100, Message::SetKbdBrightness
(self.kbd_brightness * 100.0) as i32, ),
Message::SetKbdBrightness text(format!("{:.0}%", self.kbd_brightness * 100.0))
), .size(16)
text(format!("{:.0}%", self.kbd_brightness * 100.0)) .width(Length::Fixed(40.0))
.size(16) .horizontal_alignment(Horizontal::Right)
.width(Length::Fixed(40.0)) ]
.horizontal_alignment(Horizontal::Right) .spacing(12)
] ),
.padding([0, 24]) padded_control(divider::horizontal::default()),
.spacing(12),
container(divider::horizontal::light())
.width(Length::Fill)
.padding([0, 12]),
menu_button(text(fl!("power-settings")).size(14).width(Length::Fill)) menu_button(text(fl!("power-settings")).size(14).width(Length::Fill))
.on_press(Message::OpenBatterySettings) .on_press(Message::OpenBatterySettings)
] ]

View file

@ -1,6 +1,5 @@
use crate::bluetooth::{BluerDeviceStatus, BluerRequest, BluerState}; use crate::bluetooth::{BluerDeviceStatus, BluerRequest, BluerState};
use cosmic::applet::menu_button; use cosmic::applet::{menu_button, padded_control};
use cosmic::widget::button::StyleSheet;
use cosmic::Command; use cosmic::Command;
use cosmic::{ use cosmic::{
iced::{ iced::{
@ -15,7 +14,6 @@ use cosmic::{
window, window,
}, },
iced_style::application, iced_style::application,
theme::Button,
widget::{button, divider, icon, toggler}, widget::{button, divider, icon, toggler},
Element, Theme, Element, Theme,
}; };
@ -297,24 +295,6 @@ impl cosmic::Application for CosmicBluetoothApplet {
} }
fn view_window(&self, _id: window::Id) -> Element<Message> { fn view_window(&self, _id: window::Id) -> Element<Message> {
let button_style = || Button::Custom {
active: Box::new(|active, t| button::Appearance {
border_radius: 0.0.into(),
..t.active(active, &Button::Text)
}),
disabled: Box::new(|t| button::Appearance {
border_radius: 0.0.into(),
..t.disabled(&Button::Text)
}),
hovered: Box::new(|hovered, t| button::Appearance {
border_radius: 0.0.into(),
..t.hovered(hovered, &Button::Text)
}),
pressed: Box::new(|pressed, t| button::Appearance {
border_radius: 0.0.into(),
..t.pressed(pressed, &Button::Text)
}),
};
let mut known_bluetooth = column![]; let mut known_bluetooth = column![];
for dev in self.bluer_state.devices.iter().filter(|d| { for dev in self.bluer_state.devices.iter().filter(|d| {
!self !self
@ -373,26 +353,30 @@ impl cosmic::Application for CosmicBluetoothApplet {
let mut content = column![ let mut content = column![
column![ column![
toggler(fl!("bluetooth"), self.bluer_state.bluetooth_enabled, |m| { padded_control(
Message::Request(BluerRequest::SetBluetoothEnabled(m)) toggler(fl!("bluetooth"), self.bluer_state.bluetooth_enabled, |m| {
},) Message::Request(BluerRequest::SetBluetoothEnabled(m))
.text_size(14) },)
.width(Length::Fill), .text_size(14)
.width(Length::Fill)
),
// these are not in the UX mockup, but they are useful imo // these are not in the UX mockup, but they are useful imo
toggler(fl!("discoverable"), self.bluer_state.discoverable, |m| { padded_control(
Message::Request(BluerRequest::SetDiscoverable(m)) toggler(fl!("discoverable"), self.bluer_state.discoverable, |m| {
},) Message::Request(BluerRequest::SetDiscoverable(m))
.text_size(14) },)
.width(Length::Fill), .text_size(14)
toggler(fl!("pairable"), self.bluer_state.pairable, |m| { .width(Length::Fill)
Message::Request(BluerRequest::SetPairable(m)) ),
},) padded_control(
.text_size(14) toggler(fl!("pairable"), self.bluer_state.pairable, |m| {
.width(Length::Fill) Message::Request(BluerRequest::SetPairable(m))
] },)
.spacing(8) .text_size(14)
.padding([0, 12]), .width(Length::Fill)
divider::horizontal::light(), )
],
padded_control(divider::horizontal::default()),
known_bluetooth, known_bluetooth,
] ]
.align_items(Alignment::Center) .align_items(Alignment::Center)
@ -415,7 +399,6 @@ impl cosmic::Application for CosmicBluetoothApplet {
.width(Length::Fixed(24.0)) .width(Length::Fixed(24.0))
.height(Length::Fixed(24.0)) .height(Length::Fixed(24.0))
]) ])
.padding([8, 24])
.on_press(Message::ToggleVisibleDevices(!self.show_visible_devices)); .on_press(Message::ToggleVisibleDevices(!self.show_visible_devices));
content = content.push(available_connections_btn); content = content.push(available_connections_btn);
let mut list_column: Vec<Element<'_, Message>> = let mut list_column: Vec<Element<'_, Message>> =
@ -423,54 +406,60 @@ impl cosmic::Application for CosmicBluetoothApplet {
if let Some((device, pin, _)) = self.request_confirmation.as_ref() { if let Some((device, pin, _)) = self.request_confirmation.as_ref() {
let row = column![ let row = column![
icon::from_name(device.icon.as_str()) padded_control(row![
.size(16) icon::from_name(device.icon.as_str())
.symbolic(true), .size(16)
text(&device.name) .symbolic(true),
.size(14) text(&device.name)
.size(14)
.horizontal_alignment(Horizontal::Left)
.vertical_alignment(Vertical::Center)
.width(Length::Fill)
]),
padded_control(
text(fl!(
"confirm-pin",
HashMap::from_iter(vec![("deviceName", device.name.clone())])
))
.horizontal_alignment(Horizontal::Left) .horizontal_alignment(Horizontal::Left)
.vertical_alignment(Vertical::Center) .vertical_alignment(Vertical::Center)
.width(Length::Fill),
text(fl!(
"confirm-pin",
HashMap::from_iter(vec![("deviceName", device.name.clone())])
))
.horizontal_alignment(Horizontal::Left)
.vertical_alignment(Vertical::Center)
.width(Length::Fill)
.size(14),
text(pin)
.horizontal_alignment(Horizontal::Center)
.vertical_alignment(Vertical::Center)
.width(Length::Fill) .width(Length::Fill)
.size(22), .size(14)
row![ ),
button( padded_control(
text(fl!("cancel")) text(pin)
.size(14) .horizontal_alignment(Horizontal::Center)
.width(Length::Fill) .vertical_alignment(Vertical::Center)
.height(Length::Fixed(24.0)) .width(Length::Fixed(280.0))
.vertical_alignment(Vertical::Center) .size(22)
) )
.padding([8, 24]) .align_x(Horizontal::Center),
.style(button_style()) padded_control(
.on_press(Message::Cancel) row![
.width(Length::Fill), button(
button( text(fl!("cancel"))
text(fl!("confirm")) .size(14)
.size(14) .width(Length::Fill)
.width(Length::Fill) .height(Length::Fixed(24.0))
.height(Length::Fixed(24.0)) .vertical_alignment(Vertical::Center)
.vertical_alignment(Vertical::Center) )
) .padding([8, 24])
.padding([8, 24]) .on_press(Message::Cancel),
.style(button_style()) button(
.on_press(Message::Confirm) text(fl!("confirm"))
.width(Length::Fill), .size(14)
] .width(Length::Fill)
] .height(Length::Fixed(24.0))
.padding([0, 24]) .vertical_alignment(Vertical::Center)
.spacing(12); )
.padding([8, 24])
.on_press(Message::Confirm),
]
.align_items(Alignment::Center)
.spacing(8)
)
.align_x(Horizontal::Center)
];
list_column.push(row.into()); list_column.push(row.into());
} }
let mut visible_devices_count = 0; let mut visible_devices_count = 0;
@ -491,7 +480,6 @@ impl cosmic::Application for CosmicBluetoothApplet {
.horizontal_alignment(Horizontal::Left) .horizontal_alignment(Horizontal::Left)
.size(14), .size(14),
] ]
.width(Length::Fill)
.align_items(Alignment::Center) .align_items(Alignment::Center)
.spacing(12); .spacing(12);
visible_devices = visible_devices =

View file

@ -1,18 +1,15 @@
use crate::dbus::{self, PowerDaemonProxy}; use crate::dbus::{self, PowerDaemonProxy};
use crate::fl; use crate::fl;
use crate::graphics::{get_current_graphics, set_graphics, Graphics}; use crate::graphics::{get_current_graphics, set_graphics, Graphics};
use cosmic::app::command::message::cosmic; use cosmic::applet::{menu_button, padded_control};
use cosmic::applet::menu_button;
use cosmic::iced::wayland::popup::{destroy_popup, get_popup}; use cosmic::iced::wayland::popup::{destroy_popup, get_popup};
use cosmic::iced_runtime::core::alignment::Horizontal; use cosmic::iced_runtime::core::alignment::Horizontal;
use cosmic::iced_runtime::core::Alignment; use cosmic::iced_runtime::core::Alignment;
use cosmic::iced_style::application; use cosmic::iced_style::application;
use cosmic::theme::Button;
use cosmic::widget::divider::horizontal;
use cosmic::widget::{horizontal_space, icon, Container, Icon}; use cosmic::widget::{horizontal_space, icon, Container, Icon};
use cosmic::{applet::cosmic_panel_config::PanelAnchor, Command}; use cosmic::{applet::cosmic_panel_config::PanelAnchor, Command};
use cosmic::{ use cosmic::{
iced::widget::{column, container, row, text}, iced::widget::{column, row, text},
iced::{self, Length}, iced::{self, Length},
iced_runtime::core::window, iced_runtime::core::window,
theme::Theme, theme::Theme,
@ -254,6 +251,7 @@ impl cosmic::Application for Window {
.padding(8) .padding(8)
.width(Length::Shrink) .width(Length::Shrink)
.height(Length::Shrink) .height(Length::Shrink)
.style(cosmic::theme::Button::AppletIcon)
.into(), .into(),
} }
} }
@ -313,22 +311,17 @@ impl cosmic::Application for Window {
self.core self.core
.applet .applet
.popup_container( .popup_container(column(vec![
column(vec![ padded_control(
text(fl!("graphics-mode")) text(fl!("graphics-mode"))
.width(Length::Fill) .width(Length::Fill)
.horizontal_alignment(Horizontal::Center) .horizontal_alignment(Horizontal::Center)
.size(14) .size(14),
.into(), )
container(divider::horizontal::light()) .into(),
.padding([0, 12]) padded_control(divider::horizontal::default()).into(),
.width(Length::Fill) column(content_list).padding([8, 0]).into(),
.into(), ]))
column(content_list).into(),
])
.padding([8, 0])
.spacing(12),
)
.into() .into()
} }

View file

@ -1,6 +1,6 @@
use cosmic::app::Command; use cosmic::app::Command;
use cosmic::applet::{menu_button, padded_control};
use cosmic::iced_widget::Row; use cosmic::iced_widget::Row;
use cosmic::widget::button::StyleSheet;
use cosmic::{ use cosmic::{
iced::{ iced::{
wayland::popup::{destroy_popup, get_popup}, wayland::popup::{destroy_popup, get_popup},
@ -405,24 +405,6 @@ impl cosmic::Application for CosmicNetworkApplet {
} }
fn view_window(&self, _id: window::Id) -> Element<Message> { fn view_window(&self, _id: window::Id) -> Element<Message> {
let button_style = || Button::Custom {
active: Box::new(|active, t| button::Appearance {
border_radius: 0.0.into(),
..t.active(active, &Button::Text)
}),
disabled: Box::new(|t| button::Appearance {
border_radius: 0.0.into(),
..t.disabled(&Button::Text)
}),
hovered: Box::new(|hovered, t| button::Appearance {
border_radius: 0.0.into(),
..t.hovered(hovered, &Button::Text)
}),
pressed: Box::new(|pressed, t| button::Appearance {
border_radius: 0.0.into(),
..t.pressed(pressed, &Button::Text)
}),
};
let mut vpn_ethernet_col = column![]; let mut vpn_ethernet_col = column![];
let mut known_wifi = column![]; let mut known_wifi = column![];
for conn in &self.nm_state.active_conns { for conn in &self.nm_state.active_conns {
@ -508,13 +490,11 @@ impl cosmic::Application for CosmicNetworkApplet {
_ => {} _ => {}
}; };
known_wifi = known_wifi.push( known_wifi = known_wifi.push(
column![button( column![menu_button(
Row::with_children(btn_content) Row::with_children(btn_content)
.align_items(Alignment::Center) .align_items(Alignment::Center)
.spacing(8) .spacing(8)
) )
.padding([8, 24])
.style(button_style())
.on_press(Message::Disconnect(name.clone()))] .on_press(Message::Disconnect(name.clone()))]
.align_items(Alignment::Center), .align_items(Alignment::Center),
); );
@ -524,7 +504,7 @@ impl cosmic::Application for CosmicNetworkApplet {
let mut content = column![ let mut content = column![
vpn_ethernet_col, vpn_ethernet_col,
container( padded_control(
anim!( anim!(
//toggler //toggler
AIRPLANE_MODE, AIRPLANE_MODE,
@ -535,10 +515,9 @@ impl cosmic::Application for CosmicNetworkApplet {
) )
.text_size(14) .text_size(14)
.width(Length::Fill) .width(Length::Fill)
) ),
.padding([0, 12]), padded_control(divider::horizontal::default()),
divider::horizontal::light(), padded_control(
container(
anim!( anim!(
//toggler //toggler
WIFI, WIFI,
@ -549,12 +528,10 @@ impl cosmic::Application for CosmicNetworkApplet {
) )
.text_size(14) .text_size(14)
.width(Length::Fill) .width(Length::Fill)
) ),
.padding([0, 24]), padded_control(divider::horizontal::default()),
divider::horizontal::light(),
] ]
.align_items(Alignment::Center) .align_items(Alignment::Center)
.spacing(8)
.padding([8, 0]); .padding([8, 0]);
if self.nm_state.airplane_mode { if self.nm_state.airplane_mode {
content = content.push( content = content.push(
@ -606,14 +583,11 @@ impl cosmic::Application for CosmicNetworkApplet {
btn_content.push(ssid.into()); btn_content.push(ssid.into());
} }
let mut btn = button( let mut btn = menu_button(
Row::with_children(btn_content) Row::with_children(btn_content)
.align_items(Alignment::Center) .align_items(Alignment::Center)
.spacing(8), .spacing(8),
) );
.padding([8, 24])
.width(Length::Fill)
.style(button_style());
btn = match known.state { btn = match known.state {
DeviceState::Failed DeviceState::Failed
| DeviceState::Unknown | DeviceState::Unknown
@ -633,7 +607,7 @@ impl cosmic::Application for CosmicNetworkApplet {
} else { } else {
"go-next-symbolic" "go-next-symbolic"
}; };
let available_connections_btn = button(row![ let available_connections_btn = menu_button(row![
text(fl!("visible-wireless-networks")) text(fl!("visible-wireless-networks"))
.size(14) .size(14)
.width(Length::Fill) .width(Length::Fill)
@ -645,8 +619,6 @@ impl cosmic::Application for CosmicNetworkApplet {
.width(Length::Fixed(24.0)) .width(Length::Fixed(24.0))
.height(Length::Fixed(24.0)), .height(Length::Fixed(24.0)),
]) ])
.padding([8, 24])
.style(button_style())
.on_press(Message::ToggleVisibleNetworks); .on_press(Message::ToggleVisibleNetworks);
content = content.push(available_connections_btn); content = content.push(available_connections_btn);
} }
@ -657,38 +629,39 @@ impl cosmic::Application for CosmicNetworkApplet {
access_point, access_point,
password, password,
} => { } => {
let id = row![ let id = padded_control(
icon::from_name("network-wireless-acquiring-symbolic")
.size(24)
.symbolic(true),
text(&access_point.ssid).size(14),
]
.align_items(Alignment::Center)
.width(Length::Fill)
.padding([0, 24])
.spacing(12);
content = content.push(id);
let col = column![
text(fl!("enter-password")),
text_input("", password)
.on_input(Message::Password)
.on_paste(Message::Password)
.on_submit(Message::SubmitPassword)
.password(),
container(text(fl!("router-wps-button"))).padding(8),
row![ row![
button(container(text(fl!("cancel"))).padding([0, 24])) icon::from_name("network-wireless-acquiring-symbolic")
.style(Button::Destructive) .size(24)
.on_press(Message::CancelNewConnection), .symbolic(true),
button(container(text(fl!("connect"))).padding([0, 24])) text(&access_point.ssid).size(14),
.style(Button::Suggested)
.on_press(Message::SubmitPassword)
] ]
.spacing(24) .align_items(Alignment::Center)
] .spacing(12),
.spacing(8) );
.padding([0, 48]) content = content.push(id);
.align_items(Alignment::Center); let col = padded_control(
column![
text(fl!("enter-password")),
text_input("", password)
.on_input(Message::Password)
.on_paste(Message::Password)
.on_submit(Message::SubmitPassword)
.password(),
container(text(fl!("router-wps-button"))).padding(8),
row![
button(container(text(fl!("cancel"))).padding([0, 24]))
.on_press(Message::CancelNewConnection),
button(container(text(fl!("connect"))).padding([0, 24]))
.style(Button::Suggested)
.on_press(Message::SubmitPassword)
]
.spacing(24)
]
.spacing(8)
.align_items(Alignment::Center),
)
.align_x(Horizontal::Center);
content = content.push(col); content = content.push(col);
} }
NewConnectionState::Waiting(access_point) => { NewConnectionState::Waiting(access_point) => {
@ -701,46 +674,49 @@ impl cosmic::Application for CosmicNetworkApplet {
.align_items(Alignment::Center) .align_items(Alignment::Center)
.width(Length::Fill) .width(Length::Fill)
.spacing(12); .spacing(12);
let connecting = row![ let connecting = padded_control(
id, row![
icon::from_name("process-working-symbolic") id,
.size(24) icon::from_name("process-working-symbolic")
.symbolic(true), .size(24)
] .symbolic(true),
.spacing(8) ]
.padding([0, 24]); .spacing(8),
);
content = content.push(connecting); content = content.push(connecting);
} }
NewConnectionState::Failure(access_point) => { NewConnectionState::Failure(access_point) => {
let id = row![ let id = padded_control(
icon::from_name("network-wireless-error-symbolic")
.size(24)
.symbolic(true),
text(&access_point.ssid).size(14),
]
.align_items(Alignment::Center)
.width(Length::Fill)
.padding([0, 24])
.spacing(12);
content = content.push(id);
let col = column![
text(fl!("unable-to-connect")),
text(fl!("check-wifi-connection")),
row![ row![
button(container(text("Cancel")).padding([0, 24])) icon::from_name("network-wireless-error-symbolic")
.style(Button::Destructive) .size(24)
.on_press(Message::CancelNewConnection), .symbolic(true),
button(container(text("Connect")).padding([0, 24])) text(&access_point.ssid).size(14),
.style(Button::Suggested)
.on_press(Message::SelectWirelessAccessPoint(
access_point.clone()
))
] ]
.spacing(24) .align_items(Alignment::Center)
] .spacing(12),
.spacing(16) )
.padding([0, 48]) .align_x(Horizontal::Center);
.align_items(Alignment::Center); content = content.push(id);
let col = padded_control(
column![
text(fl!("unable-to-connect")),
text(fl!("check-wifi-connection")),
row![
button(container(text("Cancel")).padding([0, 24]))
.on_press(Message::CancelNewConnection),
button(container(text("Connect")).padding([0, 24]))
.style(Button::Suggested)
.on_press(Message::SelectWirelessAccessPoint(
access_point.clone()
))
]
.spacing(24)
]
.spacing(16)
.align_items(Alignment::Center),
)
.align_x(Horizontal::Center);
content = content.push(col); content = content.push(col);
} }
} }
@ -755,7 +731,7 @@ impl cosmic::Application for CosmicNetworkApplet {
{ {
continue; continue;
} }
let button = button( let button = menu_button(
row![ row![
icon::from_name(wifi_icon(ap.strength)) icon::from_name(wifi_icon(ap.strength))
.size(16) .size(16)
@ -768,10 +744,7 @@ impl cosmic::Application for CosmicNetworkApplet {
.align_items(Alignment::Center) .align_items(Alignment::Center)
.spacing(12), .spacing(12),
) )
.style(button_style()) .on_press(Message::SelectWirelessAccessPoint(ap.clone()));
.on_press(Message::SelectWirelessAccessPoint(ap.clone()))
.width(Length::Fill)
.padding([8, 24]);
list_col.push(button.into()); list_col.push(button.into());
} }
content = content content = content

View file

@ -1,12 +1,12 @@
mod localize; mod localize;
mod subscriptions; mod subscriptions;
use cosmic::applet::menu_button; use cosmic::applet::{menu_button, padded_control};
use cosmic::cosmic_config::{config_subscription, Config, CosmicConfigEntry}; use cosmic::cosmic_config::{config_subscription, Config, CosmicConfigEntry};
use cosmic::iced::wayland::popup::{destroy_popup, get_popup}; use cosmic::iced::wayland::popup::{destroy_popup, get_popup};
use cosmic::iced::Limits; use cosmic::iced::Limits;
use cosmic::iced::{ use cosmic::iced::{
widget::{column, row, text, Row}, widget::{column, row, text},
window, Alignment, Length, Subscription, window, Alignment, Length, Subscription,
}; };
use cosmic::iced_core::alignment::Horizontal; use cosmic::iced_core::alignment::Horizontal;
@ -14,9 +14,8 @@ use cosmic::Command;
use cosmic::iced_style::application; use cosmic::iced_style::application;
use cosmic::iced_widget::{horizontal_rule, scrollable, Column}; use cosmic::iced_widget::{scrollable, Column};
use cosmic::widget::{button, container, icon}; use cosmic::widget::{button, container, divider, icon};
use cosmic::Renderer;
use cosmic::{Element, Theme}; use cosmic::{Element, Theme};
use cosmic_notifications_config::NotificationsConfig; use cosmic_notifications_config::NotificationsConfig;
use cosmic_notifications_util::{Image, Notification}; use cosmic_notifications_util::{Image, Notification};
@ -323,18 +322,16 @@ impl cosmic::Application for Notifications {
} }
fn view_window(&self, _id: window::Id) -> Element<Message> { fn view_window(&self, _id: window::Id) -> Element<Message> {
let do_not_disturb = row![anim!( let do_not_disturb = padded_control(row![anim!(
DO_NOT_DISTURB, DO_NOT_DISTURB,
&self.timeline, &self.timeline,
String::from(fl!("do-not-disturb")), String::from(fl!("do-not-disturb")),
self.config.do_not_disturb, self.config.do_not_disturb,
Message::DoNotDisturb Message::DoNotDisturb
) )
.width(Length::Fill)] .width(Length::Fill)]);
.padding([0, 24]);
let settings = let settings = menu_button(text(fl!("notification-settings"))).on_press(Message::Settings);
row_button(vec![text(fl!("notification-settings")).into()]).on_press(Message::Settings);
let notifications = if self.cards.is_empty() { let notifications = if self.cards.is_empty() {
row![container( row![container(
@ -489,14 +486,17 @@ impl cosmic::Application for Notifications {
.height(Length::Shrink)) .height(Length::Shrink))
}; };
let main_content = column![horizontal_rule(4), notifications, horizontal_rule(4)] let main_content = column![
.padding([0, 24]) padded_control(divider::horizontal::default()),
.spacing(12); notifications,
padded_control(divider::horizontal::default())
]
.spacing(12);
let content = column![do_not_disturb, main_content, settings] let content = column![do_not_disturb, main_content, settings]
.align_items(Alignment::Start) .align_items(Alignment::Start)
.spacing(12) .spacing(12)
.padding([16, 0]); .padding([8, 0]);
self.core.applet.popup_container(content).into() self.core.applet.popup_container(content).into()
} }
@ -506,15 +506,6 @@ impl cosmic::Application for Notifications {
} }
} }
fn row_button(content: Vec<Element<Message>>) -> cosmic::widget::Button<Message, Renderer> {
menu_button(
Row::with_children(content)
.spacing(4)
.align_items(Alignment::Center),
)
.height(Length::Fixed(36.0))
}
fn text_icon(name: &str, size: u16) -> cosmic::widget::Icon { fn text_icon(name: &str, size: u16) -> cosmic::widget::Icon {
icon::from_name(name).size(size).symbolic(true).icon() icon::from_name(name).size(size).symbolic(true).icon()
} }

View file

@ -2,7 +2,7 @@ use std::collections::HashMap;
use std::process; use std::process;
use std::time::Duration; use std::time::Duration;
use cosmic::applet::menu_button; use cosmic::applet::{menu_button, padded_control};
use cosmic::iced; use cosmic::iced;
use cosmic::iced::alignment::{Horizontal, Vertical}; use cosmic::iced::alignment::{Horizontal, Vertical};
use cosmic::iced::event::wayland::{self, LayerEvent}; use cosmic::iced::event::wayland::{self, LayerEvent};
@ -20,7 +20,7 @@ use cosmic::Renderer;
use cosmic::iced::Color; use cosmic::iced::Color;
use cosmic::iced::{ use cosmic::iced::{
widget::{self, column, container, row, space::Space, text, Row}, widget::{self, column, container, row, space::Space, text},
window, Alignment, Length, Subscription, window, Alignment, Length, Subscription,
}; };
use cosmic::iced_style::application; use cosmic::iced_style::application;
@ -233,23 +233,28 @@ impl cosmic::Application for Power {
fn view_window(&self, id: window::Id) -> Element<Message> { fn view_window(&self, id: window::Id) -> Element<Message> {
if matches!(self.popup, Some(p) if p == id) { if matches!(self.popup, Some(p) if p == id) {
let settings = let settings = menu_button(text(fl!("settings")).size(14)).on_press(Message::Settings);
row_button(vec![text(fl!("settings")).size(14).into()]).on_press(Message::Settings);
let session = column![ let session = column![
row_button(vec![ menu_button(
text_icon("system-lock-screen-symbolic", 24).into(), row![
text(fl!("lock-screen")).size(14).into(), text_icon("system-lock-screen-symbolic", 24),
Space::with_width(Length::Fill).into(), text(fl!("lock-screen")).size(14),
text(fl!("lock-screen-shortcut")).size(14).into(), Space::with_width(Length::Fill),
]) text(fl!("lock-screen-shortcut")).size(14),
]
.spacing(8)
)
.on_press(Message::Action(PowerAction::Lock)), .on_press(Message::Action(PowerAction::Lock)),
row_button(vec![ menu_button(
text_icon("system-log-out-symbolic", 24).into(), row![
text(fl!("log-out")).size(14).into(), text_icon("system-log-out-symbolic", 24),
Space::with_width(Length::Fill).into(), text(fl!("log-out")).size(14),
text(fl!("log-out-shortcut")).size(14).into(), Space::with_width(Length::Fill),
]) text(fl!("log-out-shortcut")).size(14),
]
.spacing(8)
)
.on_press(Message::Action(PowerAction::LogOut)), .on_press(Message::Action(PowerAction::LogOut)),
]; ];
@ -266,13 +271,9 @@ impl cosmic::Application for Power {
let content = column![ let content = column![
settings, settings,
container(divider::horizontal::light()) padded_control(divider::horizontal::default()),
.padding([0, 12])
.width(Length::Fill),
session, session,
container(divider::horizontal::light()) padded_control(divider::horizontal::default()),
.padding([0, 12])
.width(Length::Fill),
power power
] ]
.align_items(Alignment::Start) .align_items(Alignment::Start)
@ -348,16 +349,6 @@ impl cosmic::Application for Power {
} }
} }
// ### UI Helplers
fn row_button(content: Vec<Element<Message>>) -> cosmic::widget::Button<Message, Renderer> {
menu_button(
Row::with_children(content)
.spacing(4)
.align_items(Alignment::Center),
)
}
fn power_buttons(name: &str, msg: String) -> cosmic::widget::Button<Message, Renderer> { fn power_buttons(name: &str, msg: String) -> cosmic::widget::Button<Message, Renderer> {
cosmic::widget::button( cosmic::widget::button(
column![text_icon(name, 40), text(msg).size(14)] column![text_icon(name, 40), text(msg).size(14)]

View file

@ -1,15 +1,14 @@
use crate::fl; use crate::fl;
use cosmic::app::Core; use cosmic::app::Core;
use cosmic::applet::menu_button; use cosmic::applet::{menu_button, padded_control};
use cosmic::cosmic_config::{ConfigGet, ConfigSet, CosmicConfigEntry}; use cosmic::cosmic_config::{ConfigGet, ConfigSet};
use cosmic::cosmic_theme::ThemeBuilder;
use cosmic::iced::wayland::popup::{destroy_popup, get_popup}; use cosmic::iced::wayland::popup::{destroy_popup, get_popup};
use cosmic::iced::window::Id; use cosmic::iced::window::Id;
use cosmic::iced::{Command, Length, Limits, Subscription}; use cosmic::iced::{Command, Length, Limits, Subscription};
use cosmic::iced_core::Alignment; use cosmic::iced_core::Alignment;
use cosmic::iced_style::application; use cosmic::iced_style::application;
use cosmic::iced_widget::row; use cosmic::iced_widget::{column, row};
use cosmic::widget::{button, container, spin_button, text}; use cosmic::widget::{container, divider, spin_button, text};
use cosmic::{Element, Theme}; use cosmic::{Element, Theme};
use cosmic_time::{anim, chain, id, Timeline}; use cosmic_time::{anim, chain, id, Timeline};
use once_cell::sync::Lazy; use once_cell::sync::Lazy;
@ -232,92 +231,62 @@ impl cosmic::Application for Window {
let cosmic = self.core.system_theme().cosmic(); let cosmic = self.core.system_theme().cosmic();
let active_hint = cosmic.active_hint; let active_hint = cosmic.active_hint;
let gaps = cosmic.gaps.1; let gaps = cosmic.gaps.1;
let content_list = cosmic::widget::column() let content_list = column![
.padding([8, 0]) padded_control(container(
.spacing(4) anim!(
.push( TILE_WINDOWS,
container( &self.timeline,
anim!( fl!("tile-windows"),
TILE_WINDOWS, self.tile_windows,
&self.timeline, |chain, enable| { Message::ToggleTileWindows(chain, enable) },
fl!("tile-windows"), )
self.tile_windows, .text_size(14)
|chain, enable| { Message::ToggleTileWindows(chain, enable) }, .width(Length::Fill),
) )),
.text_size(14) padded_control(row!(
text(fl!("navigate-windows")).size(14).width(Length::Fill),
text(format!("{} + {}", fl!("super"), fl!("arrow-keys"))).size(14),
)),
padded_control(row!(
text(fl!("move-window")).size(14).width(Length::Fill),
text(format!(
"{} + {} + {}",
fl!("shift"),
fl!("super"),
fl!("arrow-keys")
))
.size(14),
)),
padded_control(row!(
text(fl!("toggle-floating-window"))
.size(14)
.width(Length::Fill), .width(Length::Fill),
) text(format!("{} + G", fl!("super"))).size(14),
.padding([0, 16, 4, 16]), )),
) padded_control(divider::horizontal::default()),
.push( padded_control(
row!(
text(fl!("navigate-windows")).size(14).width(Length::Fill),
text(format!("{} + {}", fl!("super"), fl!("arrow-keys"))).size(14),
)
.padding([4, 16, 4, 16]),
)
.push(
row!(
text(fl!("move-window")).size(14).width(Length::Fill),
text(format!(
"{} + {} + {}",
fl!("shift"),
fl!("super"),
fl!("arrow-keys")
))
.size(14),
)
.padding([4, 16, 4, 16]),
)
.push(
row!(
text(fl!("toggle-floating-window"))
.size(14)
.width(Length::Fill),
text(format!("{} + G", fl!("super"))).size(14),
)
.padding([4, 16, 4, 16]),
)
.push(
container(
menu_button(text(fl!("view-all-shortcuts")).size(14))
.on_press(Message::ViewAllShortcuts),
)
.width(Length::Fill)
.padding(0),
)
.push(
row!( row!(
text(fl!("active-hint")).size(14).width(Length::Fill), text(fl!("active-hint")).size(14).width(Length::Fill),
spin_button(active_hint.to_string(), Message::HandleActiveHint), spin_button(active_hint.to_string(), Message::HandleActiveHint),
) )
.padding([0, 16, 0, 16])
.align_items(Alignment::Center), .align_items(Alignment::Center),
) ),
.push( padded_control(
row!( row!(
text(fl!("gaps")).size(14).width(Length::Fill), text(fl!("gaps")).size(14).width(Length::Fill),
spin_button(gaps.to_string(), Message::HandleGaps), spin_button(gaps.to_string(), Message::HandleGaps),
) )
.padding([0, 16, 0, 16])
.align_items(Alignment::Center), .align_items(Alignment::Center),
) ),
.push( padded_control(divider::horizontal::default()),
container( menu_button(text(fl!("view-all-shortcuts")).size(14))
menu_button(text(fl!("floating-window-exceptions")).size(14)) .on_press(Message::ViewAllShortcuts),
.on_press(Message::OpenFloatingWindowExceptions), menu_button(text(fl!("floating-window-exceptions")).size(14))
) .on_press(Message::OpenFloatingWindowExceptions),
.width(Length::Fill) menu_button(text(fl!("window-management-settings")).size(14))
.padding(0), .on_press(Message::OpenWindowManagementSettings)
) ]
.push( .padding([8, 0]);
container(
menu_button(text(fl!("window-management-settings")).size(14))
.on_press(Message::OpenWindowManagementSettings),
)
.width(Length::Fill)
.padding(0),
);
self.core.applet.popup_container(content_list).into() self.core.applet.popup_container(content_list).into()
} }

View file

@ -5,7 +5,6 @@ use cosmic::iced::{
window, Alignment, Length, Rectangle, Subscription, window, Alignment, Length, Rectangle, Subscription,
}; };
use cosmic::iced_style::application; use cosmic::iced_style::application;
use cosmic::theme;
use cosmic::{app, applet::cosmic_panel_config::PanelAnchor, Command}; use cosmic::{app, applet::cosmic_panel_config::PanelAnchor, Command};
use cosmic::{ use cosmic::{
widget::{icon, rectangle_tracker::*}, widget::{icon, rectangle_tracker::*},
@ -210,6 +209,7 @@ impl cosmic::Application for Time {
date_time_col date_time_col
}, },
) )
.style(cosmic::theme::Button::AppletIcon)
.on_press(Message::TogglePopup); .on_press(Message::TogglePopup);
if let Some(tracker) = self.rectangle_tracker.as_ref() { if let Some(tracker) = self.rectangle_tracker.as_ref() {