Responsive nav bar
This commit is contained in:
Jeremy Soller
parent
9f8767a1c0
commit
a6bf04ea33
4 changed files with 153 additions and 129 deletions
|
|
@ -19,6 +19,10 @@ git = "https://github.com/pop-os/iced.git"
|
||||||
branch = "cosmic-design-system"
|
branch = "cosmic-design-system"
|
||||||
features = ["cosmic_theme"]
|
features = ["cosmic_theme"]
|
||||||
|
|
||||||
|
[dependencies.iced_lazy]
|
||||||
|
git = "https://github.com/pop-os/iced.git"
|
||||||
|
branch = "cosmic-design-system"
|
||||||
|
|
||||||
[workspace]
|
[workspace]
|
||||||
members = [
|
members = [
|
||||||
"examples/cosmic",
|
"examples/cosmic",
|
||||||
|
|
|
||||||
|
|
@ -22,6 +22,7 @@ use cosmic::{
|
||||||
slider,
|
slider,
|
||||||
text,
|
text,
|
||||||
},
|
},
|
||||||
|
iced_lazy::responsive,
|
||||||
};
|
};
|
||||||
|
|
||||||
pub fn main() -> cosmic::iced::Result {
|
pub fn main() -> cosmic::iced::Result {
|
||||||
|
|
@ -40,7 +41,7 @@ struct Window {
|
||||||
pick_list_selected: Option<&'static str>,
|
pick_list_selected: Option<&'static str>,
|
||||||
}
|
}
|
||||||
|
|
||||||
#[derive(Debug, Clone)]
|
#[derive(Clone, Copy, Debug)]
|
||||||
enum Message {
|
enum Message {
|
||||||
Page(u8),
|
Page(u8),
|
||||||
Debug(bool),
|
Debug(bool),
|
||||||
|
|
@ -79,127 +80,138 @@ impl Sandbox for Window {
|
||||||
}
|
}
|
||||||
|
|
||||||
fn view(&self) -> Element<Message> {
|
fn view(&self) -> Element<Message> {
|
||||||
let sidebar: Element<_> = nav_bar!(
|
// TODO: Adding responsive makes this regenerate on every size change, and regeneration
|
||||||
//TODO: Support symbolic icons
|
// involves allocations for many different items. Ideally, we could only make the nav bar
|
||||||
nav_button!("network-wireless", "Wi-Fi")
|
// responsive and leave the content to be sized normally.
|
||||||
.on_press(Message::Page(0))
|
responsive(|size| {
|
||||||
.style(if self.page == 0 { theme::Button::Primary } else { theme::Button::Text })
|
let condensed = size.width < 800.0;
|
||||||
,
|
let sidebar: Element<_> = nav_bar!(
|
||||||
nav_button!("preferences-desktop", "Desktop")
|
//TODO: Support symbolic icons
|
||||||
.on_press(Message::Page(1))
|
nav_button!("network-wireless", "Wi-Fi", condensed)
|
||||||
.style(if self.page == 1 { theme::Button::Primary } else { theme::Button::Text })
|
.on_press(Message::Page(0))
|
||||||
,
|
.style(if self.page == 0 { theme::Button::Primary } else { theme::Button::Text })
|
||||||
nav_button!("system-software-update", "OS Upgrade & Recovery")
|
,
|
||||||
.on_press(Message::Page(2))
|
nav_button!("preferences-desktop", "Desktop", condensed)
|
||||||
.style(if self.page == 2 { theme::Button::Primary } else { theme::Button::Text })
|
.on_press(Message::Page(1))
|
||||||
)
|
.style(if self.page == 1 { theme::Button::Primary } else { theme::Button::Text })
|
||||||
.into();
|
,
|
||||||
|
nav_button!("system-software-update", "OS Upgrade & Recovery", condensed)
|
||||||
let choose_theme = [Theme::Light, Theme::Dark].iter().fold(
|
.on_press(Message::Page(2))
|
||||||
row![text("Debug theme:")].spacing(10).align_items(Alignment::Center),
|
.style(if self.page == 2 { theme::Button::Primary } else { theme::Button::Text })
|
||||||
|row, theme| {
|
|
||||||
row.push(radio(
|
|
||||||
format!("{:?}", theme),
|
|
||||||
*theme,
|
|
||||||
Some(self.theme),
|
|
||||||
Message::ThemeChanged,
|
|
||||||
))
|
|
||||||
},
|
|
||||||
);
|
|
||||||
|
|
||||||
let content: Element<_> = list_view!(
|
|
||||||
list_section!(
|
|
||||||
"Debug",
|
|
||||||
choose_theme,
|
|
||||||
toggler(
|
|
||||||
String::from("Debug layout"),
|
|
||||||
self.debug,
|
|
||||||
Message::Debug,
|
|
||||||
)
|
|
||||||
),
|
|
||||||
list_section!(
|
|
||||||
"Buttons",
|
|
||||||
list_row!(
|
|
||||||
button!("Primary")
|
|
||||||
.style(theme::Button::Primary)
|
|
||||||
.on_press(Message::ButtonPressed)
|
|
||||||
,
|
|
||||||
button!("Secondary")
|
|
||||||
.style(theme::Button::Secondary)
|
|
||||||
.on_press(Message::ButtonPressed)
|
|
||||||
,
|
|
||||||
button!("Positive")
|
|
||||||
.style(theme::Button::Positive)
|
|
||||||
.on_press(Message::ButtonPressed)
|
|
||||||
,
|
|
||||||
button!("Destructive")
|
|
||||||
.style(theme::Button::Destructive)
|
|
||||||
.on_press(Message::ButtonPressed)
|
|
||||||
,
|
|
||||||
button!("Text")
|
|
||||||
.style(theme::Button::Text)
|
|
||||||
.on_press(Message::ButtonPressed)
|
|
||||||
,
|
|
||||||
),
|
|
||||||
list_row!(
|
|
||||||
button!("Primary")
|
|
||||||
.style(theme::Button::Primary)
|
|
||||||
,
|
|
||||||
button!("Secondary")
|
|
||||||
.style(theme::Button::Secondary)
|
|
||||||
,
|
|
||||||
button!("Positive")
|
|
||||||
.style(theme::Button::Positive)
|
|
||||||
,
|
|
||||||
button!("Destructive")
|
|
||||||
.style(theme::Button::Destructive)
|
|
||||||
,
|
|
||||||
button!("Text")
|
|
||||||
.style(theme::Button::Text)
|
|
||||||
,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
list_section!(
|
|
||||||
"Controls",
|
|
||||||
list_item!(
|
|
||||||
"Toggler",
|
|
||||||
toggler(None, self.toggler_value, Message::TogglerToggled)
|
|
||||||
),
|
|
||||||
list_item!(
|
|
||||||
"Pick List (TODO)",
|
|
||||||
pick_list(vec![
|
|
||||||
"Option 1",
|
|
||||||
"Option 2",
|
|
||||||
"Option 3",
|
|
||||||
"Option 4",
|
|
||||||
], self.pick_list_selected, Message::PickListSelected)
|
|
||||||
),
|
|
||||||
list_item!(
|
|
||||||
"Slider",
|
|
||||||
slider(0.0..=100.0, self.slider_value, Message::SliderChanged)
|
|
||||||
.width(Length::Units(250))
|
|
||||||
),
|
|
||||||
list_item!(
|
|
||||||
"Progress",
|
|
||||||
progress_bar(0.0..=100.0, self.slider_value)
|
|
||||||
.width(Length::Units(250))
|
|
||||||
.height(Length::Units(4))
|
|
||||||
),
|
|
||||||
checkbox("Checkbox", self.checkbox_value, Message::CheckboxToggled),
|
|
||||||
)
|
)
|
||||||
)
|
.max_width(if condensed {
|
||||||
.into();
|
56
|
||||||
|
} else {
|
||||||
|
300
|
||||||
|
})
|
||||||
|
.into();
|
||||||
|
|
||||||
container(row![
|
let choose_theme = [Theme::Light, Theme::Dark].iter().fold(
|
||||||
if self.debug { sidebar.explain(Color::WHITE) } else { sidebar },
|
row![text("Debug theme:")].spacing(10).align_items(Alignment::Center),
|
||||||
horizontal_space(Length::Fill),
|
|row, theme| {
|
||||||
if self.debug { content.explain(Color::WHITE) } else { content },
|
row.push(radio(
|
||||||
horizontal_space(Length::Fill),
|
format!("{:?}", theme),
|
||||||
])
|
*theme,
|
||||||
.padding([16, 8])
|
Some(self.theme),
|
||||||
.width(Length::Fill)
|
Message::ThemeChanged,
|
||||||
.height(Length::Fill)
|
))
|
||||||
.into()
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
let content: Element<_> = list_view!(
|
||||||
|
list_section!(
|
||||||
|
"Debug",
|
||||||
|
choose_theme,
|
||||||
|
toggler(
|
||||||
|
String::from("Debug layout"),
|
||||||
|
self.debug,
|
||||||
|
Message::Debug,
|
||||||
|
)
|
||||||
|
),
|
||||||
|
list_section!(
|
||||||
|
"Buttons",
|
||||||
|
list_row!(
|
||||||
|
button!("Primary")
|
||||||
|
.style(theme::Button::Primary)
|
||||||
|
.on_press(Message::ButtonPressed)
|
||||||
|
,
|
||||||
|
button!("Secondary")
|
||||||
|
.style(theme::Button::Secondary)
|
||||||
|
.on_press(Message::ButtonPressed)
|
||||||
|
,
|
||||||
|
button!("Positive")
|
||||||
|
.style(theme::Button::Positive)
|
||||||
|
.on_press(Message::ButtonPressed)
|
||||||
|
,
|
||||||
|
button!("Destructive")
|
||||||
|
.style(theme::Button::Destructive)
|
||||||
|
.on_press(Message::ButtonPressed)
|
||||||
|
,
|
||||||
|
button!("Text")
|
||||||
|
.style(theme::Button::Text)
|
||||||
|
.on_press(Message::ButtonPressed)
|
||||||
|
,
|
||||||
|
),
|
||||||
|
list_row!(
|
||||||
|
button!("Primary")
|
||||||
|
.style(theme::Button::Primary)
|
||||||
|
,
|
||||||
|
button!("Secondary")
|
||||||
|
.style(theme::Button::Secondary)
|
||||||
|
,
|
||||||
|
button!("Positive")
|
||||||
|
.style(theme::Button::Positive)
|
||||||
|
,
|
||||||
|
button!("Destructive")
|
||||||
|
.style(theme::Button::Destructive)
|
||||||
|
,
|
||||||
|
button!("Text")
|
||||||
|
.style(theme::Button::Text)
|
||||||
|
,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
list_section!(
|
||||||
|
"Controls",
|
||||||
|
list_item!(
|
||||||
|
"Toggler",
|
||||||
|
toggler(None, self.toggler_value, Message::TogglerToggled)
|
||||||
|
),
|
||||||
|
list_item!(
|
||||||
|
"Pick List (TODO)",
|
||||||
|
pick_list(vec![
|
||||||
|
"Option 1",
|
||||||
|
"Option 2",
|
||||||
|
"Option 3",
|
||||||
|
"Option 4",
|
||||||
|
], self.pick_list_selected, Message::PickListSelected)
|
||||||
|
),
|
||||||
|
list_item!(
|
||||||
|
"Slider",
|
||||||
|
slider(0.0..=100.0, self.slider_value, Message::SliderChanged)
|
||||||
|
.width(Length::Units(250))
|
||||||
|
),
|
||||||
|
list_item!(
|
||||||
|
"Progress",
|
||||||
|
progress_bar(0.0..=100.0, self.slider_value)
|
||||||
|
.width(Length::Units(250))
|
||||||
|
.height(Length::Units(4))
|
||||||
|
),
|
||||||
|
checkbox("Checkbox", self.checkbox_value, Message::CheckboxToggled),
|
||||||
|
)
|
||||||
|
)
|
||||||
|
.into();
|
||||||
|
|
||||||
|
container(row![
|
||||||
|
if self.debug { sidebar.explain(Color::WHITE) } else { sidebar },
|
||||||
|
horizontal_space(Length::Fill),
|
||||||
|
if self.debug { content.explain(Color::WHITE) } else { content },
|
||||||
|
horizontal_space(Length::Fill),
|
||||||
|
])
|
||||||
|
.padding([16, 8])
|
||||||
|
.width(Length::Fill)
|
||||||
|
.height(Length::Fill)
|
||||||
|
.into()
|
||||||
|
}).into()
|
||||||
}
|
}
|
||||||
|
|
||||||
fn theme(&self) -> Theme {
|
fn theme(&self) -> Theme {
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,5 @@
|
||||||
pub use iced;
|
pub use iced;
|
||||||
|
pub use iced_lazy;
|
||||||
|
|
||||||
pub mod font;
|
pub mod font;
|
||||||
pub mod widget;
|
pub mod widget;
|
||||||
|
|
|
||||||
|
|
@ -43,14 +43,21 @@ pub fn nav_bar_style(theme: &Theme) -> widget::container::Appearance {
|
||||||
|
|
||||||
#[macro_export]
|
#[macro_export]
|
||||||
macro_rules! nav_button {
|
macro_rules! nav_button {
|
||||||
($icon: expr, $title:expr) => (
|
($icon: expr, $title:expr, $condensed:expr) => ({
|
||||||
$crate::widget::button!(
|
if $condensed {
|
||||||
$crate::widget::icon($icon, 16),
|
$crate::iced::widget::Button::new(
|
||||||
$crate::iced::widget::Text::new($title),
|
$crate::widget::icon($icon, 16)
|
||||||
$crate::iced::widget::horizontal_space(
|
)
|
||||||
$crate::iced::Length::Fill
|
.padding(8)
|
||||||
),
|
} else {
|
||||||
)
|
$crate::widget::button!(
|
||||||
);
|
$crate::widget::icon($icon, 16),
|
||||||
|
$crate::iced::widget::Text::new($title),
|
||||||
|
$crate::iced::widget::horizontal_space(
|
||||||
|
$crate::iced::Length::Fill
|
||||||
|
),
|
||||||
|
)
|
||||||
|
}
|
||||||
|
});
|
||||||
}
|
}
|
||||||
pub use nav_button;
|
pub use nav_button;
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue