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

Improve responsive layout

Browse source
This commit is contained in:
Jeremy Soller 2022-12-21 08:58:17 -07:00
parent dd13b8300c
commit 0681c1edea
No known key found for this signature in database
GPG key ID: 87F211AF2BE4C2FE
2 changed files with 119 additions and 116 deletions
Download patch file Download diff file Expand all files Collapse all files

90
examples/cosmic/src/window.rs
View file

@ -66,6 +66,7 @@ pub struct Window {
toggler_value: bool, toggler_value: bool,
pick_list_selected: Option<&'static str>, pick_list_selected: Option<&'static str>,
sidebar_toggled: bool, sidebar_toggled: bool,
sidebar_toggled_condensed: bool,
show_minimize: bool, show_minimize: bool,
show_maximize: bool, show_maximize: bool,
} }
@ -101,6 +102,7 @@ pub enum Message {
RowSelected(usize), RowSelected(usize),
Close, Close,
ToggleSidebar, ToggleSidebar,
ToggleSidebarCondensed,
Drag, Drag,
Minimize, Minimize,
Maximize, Maximize,
@ -348,7 +350,10 @@ impl Application for Window {
fn update(&mut self, message: Message) -> iced::Command<Self::Message> { fn update(&mut self, message: Message) -> iced::Command<Self::Message> {
match message { match message {
Message::Page(page) => self.page = page, Message::Page(page) => {
self.sidebar_toggled_condensed = false;
self.page = page;
},
Message::Debug(debug) => self.debug = debug, Message::Debug(debug) => self.debug = debug,
Message::ThemeChanged(theme) => self.theme = theme, Message::ThemeChanged(theme) => self.theme = theme,
Message::ButtonPressed => {} Message::ButtonPressed => {}
@ -359,6 +364,7 @@ impl Application for Window {
Message::TogglerToggled(value) => self.toggler_value = value, Message::TogglerToggled(value) => self.toggler_value = value,
Message::PickListSelected(value) => self.pick_list_selected = Some(value), Message::PickListSelected(value) => self.pick_list_selected = Some(value),
Message::ToggleSidebar => self.sidebar_toggled = !self.sidebar_toggled, Message::ToggleSidebar => self.sidebar_toggled = !self.sidebar_toggled,
Message::ToggleSidebarCondensed => self.sidebar_toggled_condensed = !self.sidebar_toggled_condensed,
Message::Drag => return drag(window::Id::new(0)), Message::Drag => return drag(window::Id::new(0)),
Message::Close => return close(window::Id::new(0)), Message::Close => return close(window::Id::new(0)),
Message::Minimize => return minimize(window::Id::new(0), true), Message::Minimize => return minimize(window::Id::new(0), true),
@ -373,14 +379,27 @@ impl Application for Window {
} }
fn view(&self) -> Element<Message> { fn view(&self) -> Element<Message> {
// TODO: Adding responsive makes this regenerate on every size change, and regeneration
// involves allocations for many different items. Ideally, we could only make the nav bar
// responsive and leave the content to be sized normally.
responsive(|size| {
//TODO: send a message when this happens instead of having everything be recalculated on resize
let condensed = size.width < 900.0;
let (sidebar_message, sidebar_toggled) = if condensed {
(Message::ToggleSidebarCondensed, self.sidebar_toggled_condensed)
} else {
(Message::ToggleSidebar, self.sidebar_toggled)
};
let mut header = header_bar() let mut header = header_bar()
.title("COSMIC Design System - Iced") .title("COSMIC Design System - Iced")
.on_close(Message::Close) .on_close(Message::Close)
.on_drag(Message::Drag) .on_drag(Message::Drag)
.start( .start(
nav_button("Settings") nav_button("Settings")
.on_sidebar_toggled(Message::ToggleSidebar) .on_sidebar_toggled(sidebar_message)
.sidebar_active(self.sidebar_toggled) .sidebar_active(sidebar_toggled)
.into() .into()
); );
@ -394,52 +413,56 @@ impl Application for Window {
let header = Into::<Element<Message>>::into(header).debug(self.debug); let header = Into::<Element<Message>>::into(header).debug(self.debug);
// TODO: Adding responsive makes this regenerate on every size change, and regeneration let mut widgets = Vec::with_capacity(2);
// involves allocations for many different items. Ideally, we could only make the nav bar
// responsive and leave the content to be sized normally.
let content = responsive(|size| {
let condensed = size.width < 900.0;
let sidebar: Element<_> = container(scrollable(column!( if sidebar_toggled {
cosmic::nav_button!("document-properties-symbolic", "Demo", condensed, self.page == Page::Demo) let mut sidebar = container(scrollable(column!(
cosmic::nav_button!("document-properties-symbolic", "Demo", self.page == Page::Demo)
.on_press(Message::Page(Page::Demo)), .on_press(Message::Page(Page::Demo)),
cosmic::nav_button!("network-wireless-symbolic", "Wi-Fi", condensed, self.page == Page::WiFi) cosmic::nav_button!("network-wireless-symbolic", "Wi-Fi", self.page == Page::WiFi)
.on_press(Message::Page(Page::WiFi)), .on_press(Message::Page(Page::WiFi)),
cosmic::nav_button!("network-workgroup-symbolic", "Networking", condensed, self.page == Page::Networking) cosmic::nav_button!("network-workgroup-symbolic", "Networking", self.page == Page::Networking)
.on_press(Message::Page(Page::Networking)), .on_press(Message::Page(Page::Networking)),
cosmic::nav_button!("bluetooth-active-symbolic", "Bluetooth", condensed, self.page == Page::Bluetooth) cosmic::nav_button!("bluetooth-active-symbolic", "Bluetooth", self.page == Page::Bluetooth)
.on_press(Message::Page(Page::Bluetooth)), .on_press(Message::Page(Page::Bluetooth)),
cosmic::nav_button!("video-display-symbolic", "Desktop", condensed, matches!(self.page, Page::Desktop(_))) cosmic::nav_button!("video-display-symbolic", "Desktop", matches!(self.page, Page::Desktop(_)))
.on_press(Message::Page(Page::Desktop(DesktopPage::Root))), .on_press(Message::Page(Page::Desktop(DesktopPage::Root))),
cosmic::nav_button!("input-keyboard-symbolic", "Input Devices", condensed, self.page == Page::InputDevices) cosmic::nav_button!("input-keyboard-symbolic", "Input Devices", self.page == Page::InputDevices)
.on_press(Message::Page(Page::InputDevices)), .on_press(Message::Page(Page::InputDevices)),
cosmic::nav_button!("preferences-desktop-display-symbolic", "Displays", condensed, self.page == Page::Displays) cosmic::nav_button!("preferences-desktop-display-symbolic", "Displays", self.page == Page::Displays)
.on_press(Message::Page(Page::Displays)), .on_press(Message::Page(Page::Displays)),
cosmic::nav_button!("battery-full-charged-symbolic", "Power & Battery", condensed, self.page == Page::PowerAndBattery) cosmic::nav_button!("battery-full-charged-symbolic", "Power & Battery", self.page == Page::PowerAndBattery)
.on_press(Message::Page(Page::PowerAndBattery)), .on_press(Message::Page(Page::PowerAndBattery)),
cosmic::nav_button!("multimedia-volume-control-symbolic", "Sound", condensed, self.page == Page::Sound) cosmic::nav_button!("multimedia-volume-control-symbolic", "Sound", self.page == Page::Sound)
.on_press(Message::Page(Page::Sound)), .on_press(Message::Page(Page::Sound)),
cosmic::nav_button!("printer-symbolic", "Printers & Scanners", condensed, self.page == Page::PrintersAndScanners) cosmic::nav_button!("printer-symbolic", "Printers & Scanners", self.page == Page::PrintersAndScanners)
.on_press(Message::Page(Page::PrintersAndScanners)), .on_press(Message::Page(Page::PrintersAndScanners)),
cosmic::nav_button!("preferences-system-privacy-symbolic", "Privacy & Security", condensed, self.page == Page::PrivacyAndSecurity) cosmic::nav_button!("preferences-system-privacy-symbolic", "Privacy & Security", self.page == Page::PrivacyAndSecurity)
.on_press(Message::Page(Page::PrivacyAndSecurity)), .on_press(Message::Page(Page::PrivacyAndSecurity)),
cosmic::nav_button!("system-users-symbolic", "System & Accounts", condensed, self.page == Page::SystemAndAccounts) cosmic::nav_button!("system-users-symbolic", "System & Accounts", self.page == Page::SystemAndAccounts)
.on_press(Message::Page(Page::SystemAndAccounts)), .on_press(Message::Page(Page::SystemAndAccounts)),
cosmic::nav_button!("software-update-available-symbolic", "Updates & Recovery", condensed, self.page == Page::UpdatesAndRecovery) cosmic::nav_button!("software-update-available-symbolic", "Updates & Recovery", self.page == Page::UpdatesAndRecovery)
.on_press(Message::Page(Page::UpdatesAndRecovery)), .on_press(Message::Page(Page::UpdatesAndRecovery)),
cosmic::nav_button!("preferences-system-time-symbolic", "Time & Language", condensed, self.page == Page::TimeAndLanguage) cosmic::nav_button!("preferences-system-time-symbolic", "Time & Language", self.page == Page::TimeAndLanguage)
.on_press(Message::Page(Page::TimeAndLanguage)), .on_press(Message::Page(Page::TimeAndLanguage)),
cosmic::nav_button!("preferences-desktop-accessibility-symbolic", "Accessibility", condensed, self.page == Page::Accessibility) cosmic::nav_button!("preferences-desktop-accessibility-symbolic", "Accessibility", self.page == Page::Accessibility)
.on_press(Message::Page(Page::Accessibility)), .on_press(Message::Page(Page::Accessibility)),
cosmic::nav_button!("preferences-desktop-apps-symbolic", "Applications", condensed, self.page == Page::Applications) cosmic::nav_button!("preferences-desktop-apps-symbolic", "Applications", self.page == Page::Applications)
.on_press(Message::Page(Page::Applications)), .on_press(Message::Page(Page::Applications)),
).spacing(14))) ).spacing(14)))
.height(Length::Fill) .height(Length::Fill)
.padding(11) .padding(11)
.max_width(300) .style(theme::Container::Custom(nav_bar::nav_bar_sections_style));
.style(theme::Container::Custom(nav_bar::nav_bar_sections_style))
.into();
if ! condensed {
sidebar = sidebar.max_width(300)
}
let sidebar: Element<_> = sidebar.into();
widgets.push(sidebar.debug(self.debug));
}
if ! (condensed && sidebar_toggled) {
let content: Element<_> = match self.page { let content: Element<_> = match self.page {
Page::Demo => self.view_demo(), Page::Demo => self.view_demo(),
Page::Desktop(DesktopPage::Root) => self.view_desktop_root(), Page::Desktop(DesktopPage::Root) => self.view_desktop_root(),
@ -449,10 +472,6 @@ impl Application for Window {
]).into(), ]).into(),
}; };
let mut widgets = Vec::with_capacity(2);
widgets.push(sidebar.debug(self.debug));
widgets.push( widgets.push(
scrollable(row![ scrollable(row![
horizontal_space(Length::Fill), horizontal_space(Length::Fill),
@ -461,16 +480,17 @@ impl Application for Window {
]) ])
.into(), .into(),
); );
}
container(row(widgets)) let content = container(row(widgets))
.padding([0, 8, 8, 8]) .padding([0, 8, 8, 8])
.width(Length::Fill) .width(Length::Fill)
.height(Length::Fill) .height(Length::Fill)
.into()
})
.into(); .into();
column(vec![header, content]).into() column(vec![header, content]).into()
})
.into()
} }
fn theme(&self) -> Theme { fn theme(&self) -> Theme {

19
src/widget/navigation/macros.rs
View file

@ -7,23 +7,7 @@ pub mod nav_bar {
#[macro_export] #[macro_export]
macro_rules! nav_button { macro_rules! nav_button {
($icon: expr, $title:expr, $condensed:expr, $active:expr) => {{ ($icon: expr, $title:expr, $active:expr) => {{
if $condensed {
$crate::iced::widget::Button::new(
$crate::widget::icon($icon, 22)
.style(if $active {
$crate::theme::Svg::SymbolicLink
} else {
$crate::theme::Svg::Symbolic
})
)
.padding(8)
.style(if $active {
$crate::theme::Button::LinkActive
} else {
$crate::theme::Button::Text
})
} else {
$crate::iced::widget::Button::new( $crate::iced::widget::Button::new(
$crate::iced::widget::row!( $crate::iced::widget::row!(
$crate::widget::icon($icon, 16) $crate::widget::icon($icon, 16)
@ -44,7 +28,6 @@ pub mod nav_bar {
} else { } else {
$crate::theme::Button::Text $crate::theme::Button::Text
}) })
}
}}; }};
} }