Better responsiveness for the Navigation Bar

This commit is contained in:
Eduardo Flores 2022-10-13 16:01:21 -07:00
parent 37f978d1b3
commit ff2f3e574c
3 changed files with 91 additions and 122 deletions

View file

@ -14,10 +14,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> {
@ -36,55 +37,34 @@ 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::default()
}
}
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> Component<Message, Renderer> for NavBar<'a, Message> {
@ -94,27 +74,20 @@ impl<'a, Message> Component<Message, Renderer> for NavBar<'a, Message> {
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
}
}
}
@ -123,7 +96,7 @@ impl<'a, Message> Component<Message, Renderer> for NavBar<'a, Message> {
let mut sections: Vec<Element<'a, Self::Event, Renderer>> = vec![];
let mut pages: Vec<Element<'a, 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![
@ -134,33 +107,54 @@ impl<'a, Message> Component<Message, Renderer> for NavBar<'a, Message> {
.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()
});
}
}
}