example: Integrate HeaderBar into COSMIC example
This commit is contained in:
parent
b848931920
commit
5d201fb102
1 changed files with 87 additions and 31 deletions
|
|
@ -8,11 +8,13 @@ use cosmic::{
|
|||
nav_bar,
|
||||
nav_button,
|
||||
toggler,
|
||||
HeaderBar,
|
||||
},
|
||||
settings,
|
||||
iced::{theme, Alignment, Color, Element, Length, Sandbox, Theme},
|
||||
iced::{self, theme, Alignment, Application, Color, Command, Element, Length, Theme},
|
||||
iced::widget::{
|
||||
checkbox,
|
||||
column,
|
||||
container,
|
||||
horizontal_space,
|
||||
pick_list,
|
||||
|
|
@ -24,17 +26,22 @@ use cosmic::{
|
|||
scrollable,
|
||||
},
|
||||
iced_lazy::responsive,
|
||||
iced_winit::window::drag,
|
||||
WindowMsg
|
||||
};
|
||||
|
||||
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;
|
||||
Window::run(settings)
|
||||
}
|
||||
|
||||
|
||||
#[derive(Default)]
|
||||
struct Window {
|
||||
headerbar: HeaderBar,
|
||||
page: u8,
|
||||
debug: bool,
|
||||
theme: Theme,
|
||||
|
|
@ -42,6 +49,7 @@ struct Window {
|
|||
checkbox_value: bool,
|
||||
toggler_value: bool,
|
||||
pick_list_selected: Option<&'static str>,
|
||||
exit: bool,
|
||||
}
|
||||
|
||||
#[derive(Clone, Copy, Debug)]
|
||||
|
|
@ -54,23 +62,38 @@ enum Message {
|
|||
CheckboxToggled(bool),
|
||||
TogglerToggled(bool),
|
||||
PickListSelected(&'static str),
|
||||
Window(WindowMsg)
|
||||
}
|
||||
|
||||
impl Sandbox for Window {
|
||||
type Message = Message;
|
||||
impl From<WindowMsg> for Message {
|
||||
fn from(message: WindowMsg) -> Self {
|
||||
Self::Window(message)
|
||||
}
|
||||
}
|
||||
|
||||
fn new() -> Self {
|
||||
impl Application for Window {
|
||||
type Executor = iced::executor::Default;
|
||||
type Flags = ();
|
||||
type Message = Message;
|
||||
type Theme = Theme;
|
||||
|
||||
fn new(_flags: ()) -> (Self, Command<Self::Message>) {
|
||||
let mut window = Window::default();
|
||||
window.headerbar.title = String::from("COSMIC Design System - Iced");
|
||||
window.headerbar.nav_title = String::from("WiFi Settings");
|
||||
window.headerbar.sidebar_active = true;
|
||||
window.headerbar.show_minimize = true;
|
||||
window.headerbar.show_maximize = true;
|
||||
window.slider_value = 50.0;
|
||||
window.pick_list_selected = Some("Option 1");
|
||||
window
|
||||
(window, Command::none())
|
||||
}
|
||||
|
||||
fn title(&self) -> String {
|
||||
String::from("COSMIC Design System - Iced")
|
||||
self.headerbar.title.clone()
|
||||
}
|
||||
|
||||
fn update(&mut self, message: Message) {
|
||||
fn update(&mut self, message: Message) -> iced::Command<Self::Message> {
|
||||
match message {
|
||||
Message::Page(page) => self.page = page,
|
||||
Message::Debug(debug) => self.debug = debug,
|
||||
|
|
@ -80,35 +103,54 @@ impl Sandbox for Window {
|
|||
Message::CheckboxToggled(value) => self.checkbox_value = value,
|
||||
Message::TogglerToggled(value) => self.toggler_value = value,
|
||||
Message::PickListSelected(value) => self.pick_list_selected = Some(value),
|
||||
Message::Window(msg) => match msg {
|
||||
WindowMsg::Close => self.exit = true,
|
||||
WindowMsg::ToggleSidebar => self.headerbar.sidebar_active = !self.headerbar.sidebar_active,
|
||||
WindowMsg::Drag => return drag(),
|
||||
WindowMsg::Minimize => {}
|
||||
WindowMsg::Maximize => {}
|
||||
}
|
||||
}
|
||||
|
||||
iced::Command::none()
|
||||
}
|
||||
|
||||
fn view(&self) -> Element<Message> {
|
||||
let mut header = self.headerbar.render();
|
||||
if self.debug {
|
||||
header = header.explain(Color::WHITE);
|
||||
}
|
||||
|
||||
// TODO: Adding responsive makes this regenerate on every size change, and regeneration
|
||||
// involves allocations for many different items. Ideally, we could only make the nav bar
|
||||
// responsive and leave the content to be sized normally.
|
||||
responsive(|size| {
|
||||
let content = responsive(|size| {
|
||||
let condensed = size.width < 900.0;
|
||||
let sidebar: Element<_> = nav_bar!(
|
||||
//TODO: Support symbolic icons
|
||||
nav_button!("network-wireless", "Wi-Fi", condensed)
|
||||
.on_press(Message::Page(0))
|
||||
.style(if self.page == 0 { theme::Button::Primary } else { theme::Button::Text })
|
||||
,
|
||||
nav_button!("preferences-desktop", "Desktop", condensed)
|
||||
.on_press(Message::Page(1))
|
||||
.style(if self.page == 1 { theme::Button::Primary } else { theme::Button::Text })
|
||||
,
|
||||
nav_button!("system-software-update", "OS Upgrade & Recovery", condensed)
|
||||
.on_press(Message::Page(2))
|
||||
.style(if self.page == 2 { theme::Button::Primary } else { theme::Button::Text })
|
||||
)
|
||||
.max_width(if condensed {
|
||||
56
|
||||
|
||||
let sidebar: Option<Element<_>> = if self.headerbar.sidebar_active {
|
||||
Some(nav_bar!(
|
||||
//TODO: Support symbolic icons
|
||||
nav_button!("network-wireless", "Wi-Fi", condensed)
|
||||
.on_press(Message::Page(0))
|
||||
.style(if self.page == 0 { theme::Button::Primary } else { theme::Button::Text })
|
||||
,
|
||||
nav_button!("preferences-desktop", "Desktop", condensed)
|
||||
.on_press(Message::Page(1))
|
||||
.style(if self.page == 1 { theme::Button::Primary } else { theme::Button::Text })
|
||||
,
|
||||
nav_button!("system-software-update", "OS Upgrade & Recovery", condensed)
|
||||
.on_press(Message::Page(2))
|
||||
.style(if self.page == 2 { theme::Button::Primary } else { theme::Button::Text })
|
||||
)
|
||||
.max_width(if condensed {
|
||||
56
|
||||
} else {
|
||||
300
|
||||
})
|
||||
.into())
|
||||
} else {
|
||||
300
|
||||
})
|
||||
.into();
|
||||
None
|
||||
};
|
||||
|
||||
let choose_theme = [Theme::Light, Theme::Dark].iter().fold(
|
||||
row![text("Debug theme:")].spacing(10).align_items(Alignment::Center),
|
||||
|
|
@ -210,8 +252,13 @@ impl Sandbox for Window {
|
|||
)
|
||||
.into();
|
||||
|
||||
container(row![
|
||||
if self.debug { sidebar.explain(Color::WHITE) } else { sidebar },
|
||||
let mut widgets = Vec::with_capacity(2);
|
||||
|
||||
if let Some(sidebar) = sidebar {
|
||||
widgets.push(if self.debug { sidebar.explain(Color::WHITE) } else { sidebar });
|
||||
}
|
||||
|
||||
widgets.push(
|
||||
scrollable(row![
|
||||
horizontal_space(Length::Fill),
|
||||
if self.debug { content.explain(Color::WHITE) } else { content },
|
||||
|
|
@ -219,12 +266,21 @@ impl Sandbox for Window {
|
|||
])
|
||||
.scrollbar_width(12)
|
||||
.scroller_width(6)
|
||||
])
|
||||
.into()
|
||||
);
|
||||
|
||||
container(row(widgets))
|
||||
.padding([16, 8])
|
||||
.width(Length::Fill)
|
||||
.height(Length::Fill)
|
||||
.into()
|
||||
}).into()
|
||||
}).into();
|
||||
|
||||
column(vec![header, content]).into()
|
||||
}
|
||||
|
||||
fn should_exit(&self) -> bool {
|
||||
self.exit
|
||||
}
|
||||
|
||||
fn theme(&self) -> Theme {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue