leyoda/libcosmic
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Simplified the navbar events

Browse source 
- Made padding smaller to mach mockups
This commit is contained in:
Eduardo Flores 2022-10-14 11:20:54 -07:00
parent 087b9c4b84
commit 1c872dfaee
4 changed files with 80 additions and 106 deletions
Download patch file Download diff file Expand all files Collapse all files

2
examples/cosmic/src/main.rs
View file

@ -7,6 +7,6 @@ pub fn main() -> cosmic::iced::Result {
let mut settings = settings(); let mut settings = settings();
settings.window.min_size = Some((600, 300)); settings.window.min_size = Some((600, 300));
// TODO: Window resize handles not functioning yet // TODO: Window resize handles not functioning yet
settings.window.decorations = false; settings.window.decorations = true;
Window::run(settings) Window::run(settings)
} }

24
examples/cosmic/src/window.rs
View file

@ -112,7 +112,7 @@ impl Application for Window {
fn view(&self) -> Element<Message> { fn view(&self) -> Element<Message> {
let mut header: Element<Message, _> = header_bar() let mut header: Element<Message, _> = header_bar()
.title(self.title()) .title(self.title())
.nav_title(String::from("Settings")) // .nav_title(String::from("Settings"))
.sidebar_active(self.sidebar_toggled) .sidebar_active(self.sidebar_toggled)
.show_minimize(self.show_minimize) .show_minimize(self.show_minimize)
.show_maximize(self.show_maximize) .show_maximize(self.show_maximize)
@ -149,12 +149,22 @@ impl Application for Window {
.title("Personalization") .title("Personalization")
.icon("applications-system"), .icon("applications-system"),
vec![ vec![
nav_bar_item().title("Desktop Session").icon("desktop-panel"), nav_bar_item()
nav_bar_item().title("Wallpaper").icon("preferences-desktop-wallpaper"), .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("Appearance").icon("cs-color"),
nav_bar_item().title("Dock & Top Panel").icon("desktop-panel"), nav_bar_item()
nav_bar_item().title("Workspaces").icon("preferences-system-windows"), .title("Dock & Top Panel")
nav_bar_item().title("Notifications").icon("cs-notifications"), .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)) container(row(widgets))
.padding([16, 16]) .padding(12)
.width(Length::Fill) .width(Length::Fill)
.height(Length::Fill) .height(Length::Fill)
.into() .into()

38
src/widget/navigation/macros.rs
View file

@ -3,17 +3,39 @@ pub mod nav_bar {
#[macro_export] #[macro_export]
macro_rules! nav_button { macro_rules! nav_button {
($icon: expr, $title:expr, $condensed:expr) => {{ ($title:expr, $icon: expr, $condensed:expr, $active: expr) => {
if $condensed { if $condensed {
$crate::iced::widget::Button::new($crate::widget::icon($icon, 22)).padding(8) $crate::iced::widget::Button::new(
} else { $crate::iced::widget::Column::with_children(vec![
$crate::widget::button!( $crate::widget::icon($icon, 26).into(),
$crate::widget::icon($icon, 22), $crate::iced::widget::text($title).size(14).into(),
$crate::iced::widget::Text::new($title), ])
$crate::iced::widget::horizontal_space($crate::iced::Length::Fill), .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 { pub fn nav_bar_sections_style(theme: &Theme) -> widget::container::Appearance {

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

@ -1,6 +1,6 @@
use crate::scrollable; use crate::scrollable;
use crate::widget::nav_bar::{nav_bar_pages_style, nav_bar_sections_style}; 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 derive_setters::Setters;
use iced::Length; use iced::Length;
use iced_lazy::Component; 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<Self::Event, Renderer> {
if self.active { if self.active {
let mut sections: Vec<Element<Self::Event, Renderer>> = vec![]; let mut sections: Vec<Element<Self::Event, Renderer>> = vec![];
let mut pages: Vec<Element<Self::Event, Renderer>> = vec![]; let mut pages: Vec<Element<Self::Event, Renderer>> = vec![];
for (section_index, (section, section_pages)) in self.source.iter().enumerate() { for (section_index, (section, section_pages)) in self.source.iter().enumerate() {
sections.push( sections.push(
button( crate::nav_button!(
column(vec![ &section.title,
icon(&section.icon, 20).into(), &section.icon,
text(&section.title).size(14).into(), true,
]) section_index == state.selected_section
.width(Length::Units(100))
.height(Length::Units(50))
.align_items(Alignment::Center),
) )
.style(if section_index == state.selected_section {
theme::Button::Primary.into()
} else {
theme::Button::Text.into()
})
.on_press(NavBarEvent::SectionSelected(section_index)) .on_press(NavBarEvent::SectionSelected(section_index))
.into(), .into(),
); );
if section_index == state.selected_section { if section_index == state.selected_section {
for (page_index, page) in section_pages.iter().enumerate() { for (page_index, page) in section_pages.iter().enumerate() {
pages.push(if self.condensed { let active = state.selected_page.is_some()
button( && page_index == state.selected_page.unwrap();
column(vec![ pages.push(
icon(&page.icon, 20).into(), crate::nav_button!(&page.title, &page.icon, self.condensed, active)
text(&page.title).size(14).into(), .on_press(NavBarEvent::PageSelected(section_index, page_index))
]) .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 width: u16 = if self.condensed { 100 } else { 200 };
let nav_bar: Element<Self::Event, Renderer> = container(if self.condensed { let nav_bar: Element<Self::Event, Renderer> = container(row![
row![ scrollable!(column(sections)
scrollable!(column(sections) .spacing(10)
.spacing(10) .padding(10)
.padding(10) .max_width(100)
.max_width(100) .align_items(Alignment::Center)
.align_items(Alignment::Center) .height(Length::Shrink)),
.height(Length::Shrink)), container(scrollable!(column(pages)
container(scrollable!(column(pages) .spacing(10)
.spacing(10) .padding(10)
.padding(10) .max_width(width.into())
.max_width(100) .align_items(Alignment::Center)
.align_items(Alignment::Center) .width(Length::Units(width))
.width(Length::Units(100)) .height(Length::Shrink)))
.height(Length::Shrink))) .height(Length::Fill)
.height(Length::Fill) .style(theme::Container::Custom(nav_bar_pages_style)),
.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) .height(Length::Fill)
.style(theme::Container::Custom(nav_bar_sections_style)) .style(theme::Container::Custom(nav_bar_sections_style))
.into(); .into();