326 lines
13 KiB
Rust
326 lines
13 KiB
Rust
|
// Copyright 2023 System76 <info@system76.com>
|
|||
|
|
// SPDX-License-Identifier: MPL-2.0
|
|||
|
|
|
|||
|
|
//! Controls: buttons, radio buttons, toggles, etc.
|
|||
|
|
|
|||
|
|
use cosmic::app::{Command, Core, Settings};
|
|||
|
|
use cosmic::widget::{button, column, container, icon, nav_bar, row, scrollable, text};
|
|||
|
|
use cosmic::{executor, iced, ApplicationExt, Apply, Element};
|
|||
|
|
|
|||
|
|
#[derive(Clone, Copy)]
|
|||
|
|
pub enum Page {
|
|||
|
|
Buttons,
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
impl Page {
|
|||
|
|
const fn as_str(self) -> &'static str {
|
|||
|
|
match self {
|
|||
|
|
Page::Buttons => "Buttons",
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/// Runs application with these settings
|
|||
|
|
#[rustfmt::skip]
|
|||
|
|
fn main() -> Result<(), Box<dyn std::error::Error>> {
|
|||
|
|
let settings = Settings::default()
|
|||
|
|
.antialiasing(true)
|
|||
|
|
.client_decorations(true)
|
|||
|
|
.debug(false)
|
|||
|
|
.size((1024, 768))
|
|||
|
|
.theme(cosmic::Theme::dark());
|
|||
|
|
|
|||
|
|
cosmic::app::run::<App>(settings, &[Page::Buttons])?;
|
|||
|
|
|
|||
|
|
Ok(())
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/// Messages that are used specifically by our [`App`].
|
|||
|
|
#[derive(Clone, Debug)]
|
|||
|
|
pub enum Message {
|
|||
|
|
Clicked,
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/// The [`App`] stores application-specific state.
|
|||
|
|
pub struct App {
|
|||
|
|
core: Core,
|
|||
|
|
nav_model: nav_bar::Model,
|
|||
|
|
app_icon: icon::Handle,
|
|||
|
|
bt_icon: icon::Handle,
|
|||
|
|
leading_icon: icon::Handle,
|
|||
|
|
trailing_icon: icon::Handle,
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/// Implement [`cosmic::Application`] to integrate with COSMIC.
|
|||
|
|
impl cosmic::Application for App {
|
|||
|
|
/// Default async executor to use with the app.
|
|||
|
|
type Executor = executor::Default;
|
|||
|
|
|
|||
|
|
/// Argument received [`cosmic::Application::new`].
|
|||
|
|
type Flags = &'static [Page];
|
|||
|
|
|
|||
|
|
/// Message type specific to our [`App`].
|
|||
|
|
type Message = Message;
|
|||
|
|
|
|||
|
|
const APP_ID: &'static str = "org.cosmic.DesignDemo";
|
|||
|
|
|
|||
|
|
fn core(&self) -> &Core {
|
|||
|
|
&self.core
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
fn core_mut(&mut self) -> &mut Core {
|
|||
|
|
&mut self.core
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/// Creates the application, and optionally emits command on initialize.
|
|||
|
|
fn init(core: Core, input: Self::Flags) -> (Self, Command<Self::Message>) {
|
|||
|
|
let mut nav_model = nav_bar::Model::default();
|
|||
|
|
|
|||
|
|
for &page in input {
|
|||
|
|
nav_model.insert().text(page.as_str()).data(page);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
nav_model.activate_position(0);
|
|||
|
|
|
|||
|
|
let mut app = App {
|
|||
|
|
core,
|
|||
|
|
app_icon: icon::handle::from_name("firefox").size(16).handle(),
|
|||
|
|
bt_icon: icon::handle::from_name("bluetooth-active-symbolic")
|
|||
|
|
.size(16)
|
|||
|
|
.handle(),
|
|||
|
|
leading_icon: icon::handle::from_name("document-save-symbolic")
|
|||
|
|
.size(16)
|
|||
|
|
.handle(),
|
|||
|
|
trailing_icon: button::hyperlink::icon(),
|
|||
|
|
nav_model,
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
let command = app.update_title();
|
|||
|
|
|
|||
|
|
(app, command)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/// Allows COSMIC to integrate with your application's [`nav_bar::Model`].
|
|||
|
|
fn nav_model(&self) -> Option<&nav_bar::Model> {
|
|||
|
|
Some(&self.nav_model)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/// Called when a navigation item is selected.
|
|||
|
|
fn on_nav_select(&mut self, id: nav_bar::Id) -> Command<Self::Message> {
|
|||
|
|
self.nav_model.activate(id);
|
|||
|
|
self.update_title()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/// Handle application events here.
|
|||
|
|
fn update(&mut self, _message: Self::Message) -> Command<Self::Message> {
|
|||
|
|
Command::none()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/// Creates a view after each update.
|
|||
|
|
fn view(&self) -> Element<Self::Message> {
|
|||
|
|
let page_content = match self.nav_model.active_data::<Page>() {
|
|||
|
|
Some(Page::Buttons) => self.view_buttons(),
|
|||
|
|
None => cosmic::widget::text("Unknown page selected").into(),
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
container(page_content)
|
|||
|
|
.width(iced::Length::Fill)
|
|||
|
|
.align_x(iced::alignment::Horizontal::Center)
|
|||
|
|
.apply(scrollable)
|
|||
|
|
.into()
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
impl App
|
|||
|
|
where
|
|||
|
|
Self: cosmic::Application,
|
|||
|
|
{
|
|||
|
|
fn active_page_title(&mut self) -> &str {
|
|||
|
|
self.nav_model
|
|||
|
|
.text(self.nav_model.active())
|
|||
|
|
.unwrap_or("Unknown Page")
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
fn update_title(&mut self) -> Command<Message> {
|
|||
|
|
let title = self.active_page_title().to_owned();
|
|||
|
|
self.set_title(title)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
fn view_buttons(&self) -> Element<Message> {
|
|||
|
|
column()
|
|||
|
|
.max_width(800)
|
|||
|
|
.spacing(24)
|
|||
|
|
.push(text::title1("Label Buttons"))
|
|||
|
|
// Suggested button header
|
|||
|
|
.push(
|
|||
|
|
column()
|
|||
|
|
.spacing(8)
|
|||
|
|
.push(text::title3("Suggested Button"))
|
|||
|
|
.push(text("Highest level of attention, there should only be one primary button used on the page.").size(14.0))
|
|||
|
|
)
|
|||
|
|
// Suggested button demo
|
|||
|
|
.push(
|
|||
|
|
row()
|
|||
|
|
.spacing(36)
|
|||
|
|
.push(button::suggested("Label").on_press(Message::Clicked))
|
|||
|
|
.push(button::suggested("Label").on_press(Message::Clicked).leading_icon(self.leading_icon.clone()))
|
|||
|
|
.push(button::suggested("Label").on_press(Message::Clicked).trailing_icon(self.trailing_icon.clone()))
|
|||
|
|
.push(button::suggested("Label").on_press(Message::Clicked).leading_icon(self.app_icon.clone()))
|
|||
|
|
.push(
|
|||
|
|
button::suggested("Label")
|
|||
|
|
.on_press(Message::Clicked)
|
|||
|
|
.leading_icon(self.app_icon.clone())
|
|||
|
|
.trailing_icon(self.trailing_icon.clone())
|
|||
|
|
)
|
|||
|
|
)
|
|||
|
|
// Destructive button header
|
|||
|
|
.push(
|
|||
|
|
column()
|
|||
|
|
.spacing(8)
|
|||
|
|
.push(text::title3("Destructive Button"))
|
|||
|
|
.push(text("Highest level of attention, there should only be one primary button used on the page.").size(14.0))
|
|||
|
|
)
|
|||
|
|
// Destructive button demo
|
|||
|
|
.push(
|
|||
|
|
row()
|
|||
|
|
.spacing(36)
|
|||
|
|
.push(button::destructive("Label").on_press(Message::Clicked))
|
|||
|
|
.push(button::destructive("Label").on_press(Message::Clicked).leading_icon(self.leading_icon.clone()))
|
|||
|
|
.push(button::destructive("Label").on_press(Message::Clicked).trailing_icon(self.trailing_icon.clone()))
|
|||
|
|
.push(button::destructive("Label").on_press(Message::Clicked).leading_icon(self.app_icon.clone()))
|
|||
|
|
.push(
|
|||
|
|
button::destructive("Label")
|
|||
|
|
.on_press(Message::Clicked)
|
|||
|
|
.leading_icon(self.app_icon.clone())
|
|||
|
|
.trailing_icon(self.trailing_icon.clone())
|
|||
|
|
)
|
|||
|
|
)
|
|||
|
|
// Standard button header
|
|||
|
|
.push(
|
|||
|
|
column()
|
|||
|
|
.spacing(8)
|
|||
|
|
.push(text::title3("Standard Button"))
|
|||
|
|
.push(
|
|||
|
|
text(
|
|||
|
|
"Requires less attention from the user. Could be more \
|
|||
|
|
than one button on the page, if necessary."
|
|||
|
|
)
|
|||
|
|
.size(14.0)
|
|||
|
|
)
|
|||
|
|
)
|
|||
|
|
// Standard button demo
|
|||
|
|
.push(
|
|||
|
|
row()
|
|||
|
|
.spacing(36)
|
|||
|
|
.push(button::standard("Label").on_press(Message::Clicked))
|
|||
|
|
.push(button::standard("Label").on_press(Message::Clicked).leading_icon(self.leading_icon.clone()))
|
|||
|
|
.push(button::standard("Label").on_press(Message::Clicked).trailing_icon(self.trailing_icon.clone()))
|
|||
|
|
.push(button::standard("Label").on_press(Message::Clicked).leading_icon(self.app_icon.clone()))
|
|||
|
|
.push(
|
|||
|
|
button::standard("Label")
|
|||
|
|
.on_press(Message::Clicked)
|
|||
|
|
.leading_icon(self.app_icon.clone())
|
|||
|
|
.trailing_icon(self.trailing_icon.clone())
|
|||
|
|
)
|
|||
|
|
)
|
|||
|
|
// Text button header
|
|||
|
|
.push(
|
|||
|
|
column()
|
|||
|
|
.spacing(8)
|
|||
|
|
.push(text::title3("Text Button"))
|
|||
|
|
.push(text(
|
|||
|
|
"Lowest priority actions, especially when presenting multiple options. Because text buttons \
|
|||
|
|
don’t have a visible container in their default state, they don’t distract from nearby \
|
|||
|
|
content. But they are also more difficult to recognize because of that."
|
|||
|
|
).size(14.0))
|
|||
|
|
)
|
|||
|
|
// Text button demo
|
|||
|
|
.push(
|
|||
|
|
row()
|
|||
|
|
.spacing(36)
|
|||
|
|
.push(button::text("Label").on_press(Message::Clicked))
|
|||
|
|
.push(button::text("Label").on_press(Message::Clicked).leading_icon(self.leading_icon.clone()))
|
|||
|
|
.push(button::text("Label").on_press(Message::Clicked).trailing_icon(self.trailing_icon.clone()))
|
|||
|
|
.push(button::text("Label").on_press(Message::Clicked).leading_icon(self.app_icon.clone()))
|
|||
|
|
.push(
|
|||
|
|
button::text("Label")
|
|||
|
|
.on_press(Message::Clicked)
|
|||
|
|
.leading_icon(self.app_icon.clone())
|
|||
|
|
.trailing_icon(self.trailing_icon.clone())
|
|||
|
|
)
|
|||
|
|
)
|
|||
|
|
// Icon buttons
|
|||
|
|
.push(text::title1("Icon Buttons"))
|
|||
|
|
// Extra small icon buttons
|
|||
|
|
.push(
|
|||
|
|
row()
|
|||
|
|
.spacing(36)
|
|||
|
|
.push(button::icon(self.bt_icon.clone()).on_press(Message::Clicked).extra_small())
|
|||
|
|
.push(button::icon(self.bt_icon.clone()).on_press(Message::Clicked).extra_small().selected(true))
|
|||
|
|
.push(button::icon(self.bt_icon.clone()).on_press(Message::Clicked).extra_small().label("Label"))
|
|||
|
|
.push(
|
|||
|
|
button::icon(self.bt_icon.clone())
|
|||
|
|
.on_press(Message::Clicked)
|
|||
|
|
.extra_small()
|
|||
|
|
.label("Label")
|
|||
|
|
.selected(true)
|
|||
|
|
)
|
|||
|
|
)
|
|||
|
|
// Small (default) icon buttons
|
|||
|
|
.push(
|
|||
|
|
row()
|
|||
|
|
.spacing(36)
|
|||
|
|
.push(button::icon(self.bt_icon.clone()).on_press(Message::Clicked))
|
|||
|
|
.push(button::icon(self.bt_icon.clone()).on_press(Message::Clicked).selected(true))
|
|||
|
|
.push(button::icon(self.bt_icon.clone()).on_press(Message::Clicked).label("Label"))
|
|||
|
|
.push(button::icon(self.bt_icon.clone()).on_press(Message::Clicked).label("Label").selected(true))
|
|||
|
|
)
|
|||
|
|
// Medium icon buttons
|
|||
|
|
.push(
|
|||
|
|
row()
|
|||
|
|
.spacing(36)
|
|||
|
|
.push(button::icon(self.bt_icon.clone()).on_press(Message::Clicked).medium())
|
|||
|
|
.push(button::icon(self.bt_icon.clone()).on_press(Message::Clicked).medium().selected(true))
|
|||
|
|
.push(button::icon(self.bt_icon.clone()).on_press(Message::Clicked).medium().label("Label"))
|
|||
|
|
.push(
|
|||
|
|
button::icon(self.bt_icon.clone())
|
|||
|
|
.on_press(Message::Clicked)
|
|||
|
|
.medium()
|
|||
|
|
.label("Label")
|
|||
|
|
.selected(true)
|
|||
|
|
)
|
|||
|
|
)
|
|||
|
|
// Large icon buttons
|
|||
|
|
.push(
|
|||
|
|
row()
|
|||
|
|
.spacing(36)
|
|||
|
|
.push(button::icon(self.bt_icon.clone()).on_press(Message::Clicked).large())
|
|||
|
|
.push(button::icon(self.bt_icon.clone()).on_press(Message::Clicked).large().selected(true))
|
|||
|
|
.push(button::icon(self.bt_icon.clone()).on_press(Message::Clicked).large().label("Label"))
|
|||
|
|
.push(
|
|||
|
|
button::icon(self.bt_icon.clone())
|
|||
|
|
.on_press(Message::Clicked)
|
|||
|
|
.large()
|
|||
|
|
.label("Label")
|
|||
|
|
.selected(true)
|
|||
|
|
)
|
|||
|
|
)
|
|||
|
|
// Extra large icon buttons
|
|||
|
|
.push(
|
|||
|
|
row()
|
|||
|
|
.spacing(36)
|
|||
|
|
.push(button::icon(self.bt_icon.clone()).on_press(Message::Clicked).extra_large())
|
|||
|
|
.push(button::icon(self.bt_icon.clone()).on_press(Message::Clicked).extra_large().selected(true))
|
|||
|
|
.push(button::icon(self.bt_icon.clone()).on_press(Message::Clicked).extra_large().label("Label"))
|
|||
|
|
.push(
|
|||
|
|
button::icon(self.bt_icon.clone())
|
|||
|
|
.on_press(Message::Clicked)
|
|||
|
|
.extra_large()
|
|||
|
|
.label("Label")
|
|||
|
|
.selected(true)
|
|||
|
|
)
|
|||
|
|
)
|
|||
|
|
.into()
|
|||
|
|
}
|
|||
|
|
}
|