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();
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)
}

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

@ -112,7 +112,7 @@ impl Application for Window {
fn view(&self) -> Element<Message> {
let mut header: Element<Message, _> = 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()

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

@ -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 {

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

@ -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<Self::Event, Renderer> {
if self.active {
let mut sections: 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() {
sections.push(
button(
column(vec![
icon(&section.icon, 20).into(),
text(&section.title).size(14).into(),
])
.width(Length::Units(100))
.height(Length::Units(50))
.align_items(Alignment::Center),
crate::nav_button!(
&section.title,
&section.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<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)),
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<Self::Event, Renderer> = 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();