Better responsiveness for the Navigation Bar
This commit is contained in:
parent
37f978d1b3
commit
ff2f3e574c
3 changed files with 91 additions and 122 deletions
|
|
@ -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()
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue