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

3
.gitignore vendored
View file

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

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

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