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

Better responsiveness for the Navigation Bar

Browse source
This commit is contained in:
Eduardo Flores 2022-10-13 16:01:21 -07:00
parent 91f79dff95
commit 087b9c4b84
3 changed files with 128 additions and 159 deletions
Download patch file Download diff file Expand all files Collapse all files

1
.gitignore vendored
View file

@ -1,3 +1,4 @@
/target /target
Cargo.lock Cargo.lock
/.idea /.idea
/.fleet

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

@ -1,4 +1,4 @@
use cosmic::widget::{expander, nav_bar, nav_bar_page, nav_bar_section}; use cosmic::widget::{expander, nav_bar, nav_bar_item};
use cosmic::{ use cosmic::{
iced::widget::{ iced::widget::{
checkbox, column, container, horizontal_space, pick_list, progress_bar, radio, row, slider, checkbox, column, container, horizontal_space, pick_list, progress_bar, radio, row, slider,
@ -14,7 +14,8 @@ use std::collections::BTreeMap;
#[derive(Default)] #[derive(Default)]
pub struct Window { pub struct Window {
page: u8, page: usize,
section: usize,
debug: bool, debug: bool,
theme: Theme, theme: Theme,
slider_value: f32, slider_value: f32,
@ -47,7 +48,7 @@ impl Window {
#[allow(dead_code)] #[allow(dead_code)]
#[derive(Clone, Copy, Debug)] #[derive(Clone, Copy, Debug)]
pub enum Message { pub enum Message {
Page(u8), Page(usize, usize),
Debug(bool), Debug(bool),
ThemeChanged(Theme), ThemeChanged(Theme),
ButtonPressed, ButtonPressed,
@ -86,7 +87,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(section, page) => {
self.page = page;
self.section = section;
}
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 => {}
@ -128,79 +132,49 @@ impl Application for Window {
// responsive and leave the content to be sized normally. // responsive and leave the content to be sized normally.
let content = responsive(|size| { let content = responsive(|size| {
let condensed = size.width < 900.0; let condensed = size.width < 900.0;
// cosmic::navbar![
// nav_button!("network-wireless", "Network & Wireless", condensed)
// .on_press(Message::Page(0))
// .style(if self.page == 0 {
// theme::Button::Primary
// } else {
// theme::Button::Text
// }),
// nav_button!("preferences-desktop", "Bluetooth", condensed)
// .on_press(Message::Page(1))
// .style(if self.page == 1 {
// theme::Button::Primary
// } else {
// theme::Button::Text
// }),
// nav_button!("system-software-update", "Personalization", condensed)
// .on_press(Message::Page(2))
// .style(if self.page == 2 {
// theme::Button::Primary
// } else {
// theme::Button::Text
// }),
// ]
let sidebar: Element<_> = nav_bar() let sidebar: Element<_> = nav_bar()
.source(BTreeMap::from([ .source(BTreeMap::from([
( (
nav_bar_section() nav_bar_item()
.title("Network & Wireless") .title("Network & Wireless")
.icon("network-wireless"), .icon("nm-device-wired"),
vec![nav_bar_page("Wi-Fi")], vec![nav_bar_item().title("Wi-Fi").icon("network-wireless")],
), ),
( (
nav_bar_section() nav_bar_item().title("Bluetooth").icon("cs-bluetooth"),
.title("Bluetooth") vec![nav_bar_item().title("Devices").icon("computer")],
.icon("cs-bluetooth"),
vec![nav_bar_page("Devices")],
), ),
( (
nav_bar_section() nav_bar_item()
.title("Personalization") .title("Personalization")
.icon("applications-system"), .icon("applications-system"),
vec![ vec![
nav_bar_page("Desktop Session"), nav_bar_item().title("Desktop Session").icon("desktop-panel"),
nav_bar_page("Wallpaper"), nav_bar_item().title("Wallpaper").icon("preferences-desktop-wallpaper"),
nav_bar_page("Appearance"), nav_bar_item().title("Appearance").icon("cs-color"),
nav_bar_page("Dock & Top Panel"), nav_bar_item().title("Dock & Top Panel").icon("desktop-panel"),
nav_bar_page("Workspaces"), nav_bar_item().title("Workspaces").icon("preferences-system-windows"),
nav_bar_page("Notifications"), nav_bar_item().title("Notifications").icon("cs-notifications"),
], ],
), ),
( (
nav_bar_section() nav_bar_item().title("Input Devices").icon("input-keyboard"),
.title("Input Devices") vec![nav_bar_item().title("Keyboard").icon("computer")],
.icon("input-keyboard"),
vec![nav_bar_page("Keyboard")],
), ),
( (
nav_bar_section().title("Displays").icon("cs-display"), nav_bar_item().title("Displays").icon("cs-display"),
vec![nav_bar_page("Keyboard")], vec![nav_bar_item().title("External Monitors").icon("computer")],
), ),
( (
nav_bar_section() nav_bar_item().title("Power & Battery").icon("battery"),
.title("Power & Battery") vec![nav_bar_item().title("Status").icon("computer")],
.icon("battery"),
vec![nav_bar_page("Status")],
), ),
( (
nav_bar_section().title("Sound").icon("sound"), nav_bar_item().title("Sound").icon("sound"),
vec![nav_bar_page("Volume")], vec![nav_bar_item().title("Volume").icon("computer")],
), ),
])) ]))
.on_page_selected(Box::new(Message::Page))
.active(self.sidebar_toggled) .active(self.sidebar_toggled)
.condensed(condensed) .condensed(condensed)
.into(); .into();

200
src/widget/navigation/navbar.rs
View file

@ -12,10 +12,11 @@ use std::collections::BTreeMap;
#[derive(Setters, Default)] #[derive(Setters, Default)]
pub struct NavBar<'a, Message> { pub struct NavBar<'a, Message> {
source: BTreeMap<NavBarSection, Vec<NavBarPage>>, source: BTreeMap<NavBarItem, Vec<NavBarItem>>,
active: bool, active: bool,
condensed: bool, condensed: bool,
on_page_selected: Option<Box<dyn Fn(NavBarSection, NavBarPage) -> Message + 'a>>, #[setters(strip_option)]
on_page_selected: Option<Box<dyn Fn(usize, usize) -> Message + 'a>>,
} }
impl<'a, Message> NavBar<'a, Message> { impl<'a, Message> NavBar<'a, Message> {
@ -34,14 +35,14 @@ pub fn nav_bar<'a, Message>() -> NavBar<'a, Message> {
} }
#[derive(Setters, Clone, Default, PartialOrd, Ord, PartialEq, Eq, Hash)] #[derive(Setters, Clone, Default, PartialOrd, Ord, PartialEq, Eq, Hash)]
pub struct NavBarSection { pub struct NavBarItem {
#[setters(into)] #[setters(into)]
title: String, title: String,
#[setters(into)] #[setters(into)]
icon: String, icon: String,
} }
impl NavBarSection { impl NavBarItem {
pub fn new() -> Self { pub fn new() -> Self {
Self { Self {
title: String::new(), title: String::new(),
@ -50,42 +51,21 @@ impl NavBarSection {
} }
} }
pub fn nav_bar_section() -> NavBarSection { pub fn nav_bar_item() -> NavBarItem {
NavBarSection::new() NavBarItem::new()
}
#[derive(Default, Clone, Setters, PartialOrd, Ord, PartialEq, Eq)]
pub struct NavBarPage {
#[setters(into)]
title: String,
}
impl NavBarPage {
pub fn new() -> Self {
Self {
title: String::new(),
}
}
}
pub fn nav_bar_page(title: &str) -> NavBarPage {
let mut page = NavBarPage::new();
page.title = title.to_string();
page
} }
#[derive(Clone)] #[derive(Clone)]
pub enum NavBarEvent { pub enum NavBarEvent {
SectionSelected(NavBarSection), SectionSelected(usize),
PageSelected(NavBarSection, NavBarPage), PageSelected(usize, usize),
RevealSections,
} }
#[derive(Default)] #[derive(Default)]
pub struct NavBarState { pub struct NavBarState {
selected_section: NavBarSection, selected_section: usize,
section_active: bool, selected_page: Option<usize>,
selected_page: Option<NavBarPage>,
page_active: bool,
} }
impl<'a, Message, Renderer> Component<Message, Renderer> for NavBar<'a, Message> impl<'a, Message, Renderer> Component<Message, Renderer> for NavBar<'a, Message>
@ -104,27 +84,20 @@ where
fn update(&mut self, state: &mut Self::State, event: Self::Event) -> Option<Message> { fn update(&mut self, state: &mut Self::State, event: Self::Event) -> Option<Message> {
match event { match event {
NavBarEvent::SectionSelected(section) => { NavBarEvent::SectionSelected(section) => {
if state.selected_section == section { state.selected_section = section;
state.section_active = !state.section_active;
} else {
state.selected_section = section;
state.section_active = true;
}
state.selected_page = None; state.selected_page = None;
state.page_active = false;
None None
} }
NavBarEvent::PageSelected(section, page) => { NavBarEvent::PageSelected(section, page) => {
if state.selected_page.is_some() && &page == state.selected_page.as_ref().unwrap() { state.selected_page = Some(page);
state.page_active = !state.page_active;
} else {
state.selected_page = Some(page.clone());
state.page_active = true;
}
self.on_page_selected self.on_page_selected
.as_ref() .as_ref()
.map(|on_page_selected| (on_page_selected)(section, page)) .map(|on_page_selected| (on_page_selected)(section, page))
} }
NavBarEvent::RevealSections => {
state.selected_page = None;
None
}
} }
} }
@ -133,7 +106,7 @@ where
let mut sections: Vec<Element<Self::Event, Renderer>> = vec![]; let mut sections: Vec<Element<Self::Event, Renderer>> = vec![];
let mut pages: Vec<Element<Self::Event, Renderer>> = vec![]; let mut pages: Vec<Element<Self::Event, Renderer>> = vec![];
for (section, section_pages) in &self.source { for (section_index, (section, section_pages)) in self.source.iter().enumerate() {
sections.push( sections.push(
button( button(
column(vec![ column(vec![
@ -144,75 +117,97 @@ where
.height(Length::Units(50)) .height(Length::Units(50))
.align_items(Alignment::Center), .align_items(Alignment::Center),
) )
.style(if *section == state.selected_section && state.section_active { .style(if section_index == state.selected_section {
theme::Button::Primary.into() theme::Button::Primary.into()
} else { } else {
theme::Button::Text.into() theme::Button::Text.into()
}) })
.on_press(NavBarEvent::SectionSelected(section.clone())) .on_press(NavBarEvent::SectionSelected(section_index))
.into(), .into(),
); );
if *section == state.selected_section { if section_index == state.selected_section {
for page in section_pages { for (page_index, page) in section_pages.iter().enumerate() {
pages.push( pages.push(if self.condensed {
button(row![text(&page.title).size(16).width(Length::Fill)]) button(
.padding(10) column(vec![
.style( icon(&page.icon, 20).into(),
if let Some(selected_page) = &state.selected_page { text(&page.title).size(14).into(),
if state.page_active && page == selected_page { ])
theme::Button::Primary.into() .width(Length::Units(100))
} else { .height(Length::Units(50))
theme::Button::Text.into() .align_items(Alignment::Center),
} )
} else { .style(if let Some(selected_page) = state.selected_page {
theme::Button::Text.into() if page_index == selected_page {
} theme::Button::Primary.into()
) } else {
.on_press(NavBarEvent::PageSelected(section.clone(), page.clone())) theme::Button::Text.into()
.into(), }
); } else {
theme::Button::Text.into()
}).on_press(NavBarEvent::PageSelected(section_index, page_index))
.into()
} else {
button(row![
icon(&page.icon, 20),
text(&page.title).size(16).width(Length::Fill)
].spacing(10))
.padding(10)
.style(if let Some(selected_page) = state.selected_page {
if page_index == selected_page {
theme::Button::Primary.into()
} else {
theme::Button::Text.into()
}
} else {
theme::Button::Text.into()
})
.on_press(NavBarEvent::PageSelected(section_index, page_index))
.into()
});
} }
} }
} }
let nav_bar: Element<Self::Event, Renderer> = let nav_bar: Element<Self::Event, Renderer> = container(if self.condensed {
container(if self.condensed && state.selected_page.is_some() { row![
row![container(scrollable!(column(pages) scrollable!(column(sections)
.spacing(10)
.padding(10)
.max_width(200)
.width(Length::Units(200))
.height(Length::Shrink)))
.height(Length::Fill)
.style(theme::Container::Custom(nav_bar_pages_style))]
} else if !state.section_active || self.condensed && state.selected_page.is_none() {
row![scrollable!(column(sections)
.spacing(10) .spacing(10)
.padding(10) .padding(10)
.max_width(100) .max_width(100)
.align_items(Alignment::Center) .align_items(Alignment::Center)
.height(Length::Shrink))] .height(Length::Shrink)),
} else { container(scrollable!(column(pages)
row![ .spacing(10)
scrollable!(column(sections) .padding(10)
.spacing(10) .max_width(100)
.padding(10) .align_items(Alignment::Center)
.max_width(100) .width(Length::Units(100))
.align_items(Alignment::Center) .height(Length::Shrink)))
.height(Length::Shrink)), .height(Length::Fill)
container(scrollable!(column(pages) .style(theme::Container::Custom(nav_bar_pages_style)),
.spacing(10) ]
.padding(10) } else {
.max_width(200) row![
.width(Length::Units(200)) scrollable!(column(sections)
.height(Length::Shrink))) .spacing(10)
.height(Length::Fill) .padding(10)
.style(theme::Container::Custom(nav_bar_pages_style)), .max_width(100)
] .align_items(Alignment::Center)
}) .height(Length::Shrink)),
.height(Length::Fill) container(scrollable!(column(pages)
.style(theme::Container::Custom(nav_bar_sections_style)) .spacing(10)
.into(); .padding(10)
.max_width(200)
.width(Length::Units(200))
.height(Length::Shrink)))
.height(Length::Fill)
.style(theme::Container::Custom(nav_bar_pages_style)),
]
})
.height(Length::Fill)
.style(theme::Container::Custom(nav_bar_sections_style))
.into();
nav_bar nav_bar
} else { } else {
row![].into() row![].into()
@ -220,8 +215,7 @@ where
} }
} }
impl<'a, Message: 'a, Renderer> From<NavBar<'a, Message>> impl<'a, Message: 'a, Renderer> From<NavBar<'a, Message>> for Element<'a, Message, Renderer>
for Element<'a, Message, Renderer>
where where
Renderer: iced_native::text::Renderer + iced_native::svg::Renderer + 'a, Renderer: iced_native::text::Renderer + iced_native::svg::Renderer + 'a,
<Renderer as iced_native::Renderer>::Theme: <Renderer as iced_native::Renderer>::Theme: