Better responsiveness for the Navigation Bar
This commit is contained in:
Eduardo Flores
parent
91f79dff95
commit
087b9c4b84
3 changed files with 128 additions and 159 deletions
|
|
@ -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:
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue