From 1c872dfaee5162518554c374248b07aca72175c0 Mon Sep 17 00:00:00 2001 From: Eduardo Flores Date: Fri, 14 Oct 2022 11:20:54 -0700 Subject: [PATCH] Simplified the navbar events - Made padding smaller to mach mockups --- examples/cosmic/src/main.rs | 2 +- examples/cosmic/src/window.rs | 24 +++++-- src/widget/navigation/macros.rs | 38 +++++++--- src/widget/navigation/navbar.rs | 122 +++++++++----------------------- 4 files changed, 80 insertions(+), 106 deletions(-) diff --git a/examples/cosmic/src/main.rs b/examples/cosmic/src/main.rs index 46ff5844..da9d2811 100644 --- a/examples/cosmic/src/main.rs +++ b/examples/cosmic/src/main.rs @@ -7,6 +7,6 @@ pub fn main() -> cosmic::iced::Result { let mut settings = settings(); settings.window.min_size = Some((600, 300)); // TODO: Window resize handles not functioning yet - settings.window.decorations = false; + settings.window.decorations = true; Window::run(settings) } diff --git a/examples/cosmic/src/window.rs b/examples/cosmic/src/window.rs index 718d9796..42241953 100644 --- a/examples/cosmic/src/window.rs +++ b/examples/cosmic/src/window.rs @@ -112,7 +112,7 @@ impl Application for Window { fn view(&self) -> Element { let mut header: Element = header_bar() .title(self.title()) - .nav_title(String::from("Settings")) + // .nav_title(String::from("Settings")) .sidebar_active(self.sidebar_toggled) .show_minimize(self.show_minimize) .show_maximize(self.show_maximize) @@ -149,12 +149,22 @@ impl Application for Window { .title("Personalization") .icon("applications-system"), vec![ - nav_bar_item().title("Desktop Session").icon("desktop-panel"), - nav_bar_item().title("Wallpaper").icon("preferences-desktop-wallpaper"), + 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_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"), ], ), ( @@ -309,7 +319,7 @@ impl Application for Window { ); container(row(widgets)) - .padding([16, 16]) + .padding(12) .width(Length::Fill) .height(Length::Fill) .into() diff --git a/src/widget/navigation/macros.rs b/src/widget/navigation/macros.rs index e00f8784..260067bf 100644 --- a/src/widget/navigation/macros.rs +++ b/src/widget/navigation/macros.rs @@ -3,17 +3,39 @@ pub mod nav_bar { #[macro_export] macro_rules! nav_button { - ($icon: expr, $title:expr, $condensed:expr) => {{ + ($title:expr, $icon: expr, $condensed:expr, $active: expr) => { if $condensed { - $crate::iced::widget::Button::new($crate::widget::icon($icon, 22)).padding(8) - } else { - $crate::widget::button!( - $crate::widget::icon($icon, 22), - $crate::iced::widget::Text::new($title), - $crate::iced::widget::horizontal_space($crate::iced::Length::Fill), + $crate::iced::widget::Button::new( + $crate::iced::widget::Column::with_children(vec![ + $crate::widget::icon($icon, 26).into(), + $crate::iced::widget::text($title).size(14).into(), + ]) + .spacing(5) + .width($crate::iced::Length::Units(110)) + .height($crate::iced::Length::Units(60)) + .align_items($crate::iced::alignment::Alignment::Center), ) + .style(if $active { + $crate::iced::theme::Button::Primary.into() + } else { + $crate::iced::theme::Button::Text.into() + }) + } else { + $crate::iced::widget::Button::new( + $crate::iced::widget::row![ + $crate::widget::icon($icon, 20), + $crate::iced::widget::Text::new($title).size(16).width($crate::iced::Length::Fill) + ] + .spacing(10), + ) + .padding(10) + .style(if $active { + $crate::iced::theme::Button::Primary.into() + } else { + $crate::iced::theme::Button::Text.into() + }) } - }}; + }; } pub fn nav_bar_sections_style(theme: &Theme) -> widget::container::Appearance { diff --git a/src/widget/navigation/navbar.rs b/src/widget/navigation/navbar.rs index 3abda7ed..9f6a7111 100644 --- a/src/widget/navigation/navbar.rs +++ b/src/widget/navigation/navbar.rs @@ -1,6 +1,6 @@ use crate::scrollable; use crate::widget::nav_bar::{nav_bar_pages_style, nav_bar_sections_style}; -use crate::widget::{icon, Background}; +use crate::widget::Background; use derive_setters::Setters; use iced::Length; use iced_lazy::Component; @@ -101,110 +101,52 @@ where } } - fn view(&self, state: &Self::State) -> Element<'a, Self::Event, Renderer> { + fn view(&self, state: &Self::State) -> Element { if self.active { let mut sections: Vec> = vec![]; let mut pages: Vec> = vec![]; for (section_index, (section, section_pages)) in self.source.iter().enumerate() { sections.push( - button( - column(vec![ - icon(§ion.icon, 20).into(), - text(§ion.title).size(14).into(), - ]) - .width(Length::Units(100)) - .height(Length::Units(50)) - .align_items(Alignment::Center), + crate::nav_button!( + §ion.title, + §ion.icon, + true, + section_index == state.selected_section ) - .style(if section_index == state.selected_section { - theme::Button::Primary.into() - } else { - theme::Button::Text.into() - }) .on_press(NavBarEvent::SectionSelected(section_index)) .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 active = state.selected_page.is_some() + && page_index == state.selected_page.unwrap(); + pages.push( + crate::nav_button!(&page.title, &page.icon, self.condensed, active) + .on_press(NavBarEvent::PageSelected(section_index, page_index)) + .into(), + ); } } } - - let nav_bar: Element = container(if self.condensed { - 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(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)), - ] - }) + let width: u16 = if self.condensed { 100 } else { 200 }; + let nav_bar: Element = container(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(width.into()) + .align_items(Alignment::Center) + .width(Length::Units(width)) + .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();