feat!(widget): rewrite button & icon widget APIs

This commit is contained in:
Michael Aaron Murphy 2023-09-01 07:29:19 +02:00 committed by Michael Murphy
parent 18debe546d
commit 4e4eeaac12
60 changed files with 2191 additions and 1113 deletions

View file

@ -125,9 +125,9 @@ impl cosmic::Application for App {
let text = cosmic::widget::text(page_content);
let centered = iced::widget::container(text)
let centered = cosmic::widget::container(text)
.width(iced::Length::Fill)
.height(iced::Length::Fill)
.height(iced::Length::Shrink)
.align_x(iced::alignment::Horizontal::Center)
.align_y(iced::alignment::Vertical::Center);

View file

@ -6,5 +6,6 @@ edition = "2021"
publish = false
[dependencies]
libcosmic = { path = "../..", default-features = false, features = ["wayland", "tokio"] }
cosmic-time = { git = "https://github.com/pop-os/cosmic-time", rev="c4895f6", default-features = false, features = ["libcosmic", "once_cell"] }
libcosmic = { path = "../..", features = ["wayland", "tokio"] }
cosmic-time = { git = "https://github.com/pop-os/cosmic-time", branch = "icon-color", default-features = false, features = ["libcosmic", "once_cell"] }
# cosmic-time = { path = "../../../cosmic-time", default-features = false, features = ["libcosmic", "once_cell"]}

View file

@ -1,9 +1,3 @@
# COSMIC
An example of the COSMIC design system.
# Deprecated
All the example code is located in the __[`main`](src/main.rs)__ file.
You can run it with `cargo run`:
```
cargo run --package cosmic --release
```
This example will be removed once its contents are migrated to the design demo.

View file

@ -10,22 +10,21 @@ use cosmic::{
},
iced_futures::Subscription,
iced_style::application,
iced_widget::text,
prelude::*,
theme::{self, Theme},
widget::{
button, cosmic_container, header_bar, icon, inline_input, nav_bar, nav_bar_toggle,
rectangle_tracker::{rectangle_tracker_subscription, RectangleTracker, RectangleUpdate},
scrollable, search_input, secure_input, segmented_button, segmented_selection, settings,
text_input, IconSource,
text, text_input,
},
Element, ElementExt,
Element,
};
use cosmic_time::{anim, chain, id, once_cell::sync::Lazy, Instant, Timeline};
use std::{
sync::atomic::{AtomicU32, Ordering},
vec,
};
use theme::Button as ButtonTheme;
static DEBUG_TOGGLER: Lazy<id::Toggler> = Lazy::new(id::Toggler::unique);
static TOGGLER: Lazy<id::Toggler> = Lazy::new(id::Toggler::unique);
@ -138,7 +137,7 @@ impl Window {
self.nav_bar_pages
.insert()
.text(page.title())
.icon(IconSource::from(page.icon_name()))
.icon(icon::handle::from_name(page.icon_name()).icon())
.data(page)
}
@ -373,15 +372,6 @@ impl Application for Window {
}
if !nav_bar_toggled {
let secondary = button(ButtonTheme::Secondary)
.text("Secondary")
.on_press(Message::ButtonPressed);
let secondary = if let Some(tracker) = self.rectangle_tracker.as_ref() {
tracker.container(0, secondary).into()
} else {
secondary.into()
};
let content: Element<_> = settings::view_column(vec![
settings::view_section("Debug")
.add(settings::item(
@ -396,34 +386,6 @@ impl Application for Window {
)),
))
.into(),
settings::view_section("Buttons")
.add(settings::item_row(vec![
button(ButtonTheme::Primary)
.text("Primary")
.on_press(Message::ButtonPressed)
.into(),
secondary,
button(ButtonTheme::Positive)
.text("Positive")
.on_press(Message::ButtonPressed)
.into(),
button(ButtonTheme::Destructive)
.text("Destructive")
.on_press(Message::ButtonPressed)
.into(),
button(ButtonTheme::Text)
.text("Text")
.on_press(Message::ButtonPressed)
.into(),
]))
.add(settings::item_row(vec![
button(ButtonTheme::Primary).text("Primary").into(),
button(ButtonTheme::Secondary).text("Secondary").into(),
button(ButtonTheme::Positive).text("Positive").into(),
button(ButtonTheme::Destructive).text("Destructive").into(),
button(ButtonTheme::Text).text("Text").into(),
]))
.into(),
settings::view_section("Controls")
.add(settings::item(
"Toggler",
@ -567,6 +529,7 @@ impl Application for Window {
fn style(&self) -> <Self::Theme as cosmic::iced_style::application::StyleSheet>::Style {
cosmic::theme::Application::Custom(Box::new(|theme| application::Appearance {
background_color: Color::TRANSPARENT,
icon_color: theme.cosmic().on_bg_color().into(),
text_color: theme.cosmic().on_bg_color().into(),
}))
}

View file

@ -8,9 +8,9 @@ publish = false
[dependencies]
apply = "0.3.0"
fraction = "0.13.0"
libcosmic = { path = "../..", default-features = false, features = ["debug", "winit"] }
libcosmic = { path = "../..", features = ["debug", "winit", "tokio"] }
once_cell = "1.18"
slotmap = "1.0.6"
env_logger = "0.10"
log = "0.4.17"
cosmic-time = { git = "https://github.com/pop-os/cosmic-time", rev="c4895f6", default-features = false, features = ["libcosmic", "once_cell"] }
cosmic-time = { git = "https://github.com/pop-os/cosmic-time", branch="icon-color", default-features = false, features = ["libcosmic", "once_cell"] }

View file

@ -1,9 +1,3 @@
# COSMIC
An example of the COSMIC design system.
# Deprecated
All the example code is located in the __[`main`](src/main.rs)__ file.
You can run it with `cargo run`:
```
cargo run --package cosmic --release
```
This example will be removed once its contents are migrated to the design demo.

View file

@ -13,12 +13,13 @@ use cosmic::{
window::{self, close, drag, minimize, toggle_maximize},
},
keyboard_nav,
prelude::*,
theme::{self, Theme},
widget::{
header_bar, icon, list, nav_bar, nav_bar_toggle, scrollable, segmented_button, settings,
warning, IconSource,
button, header_bar, icon, list, nav_bar, nav_bar_toggle, scrollable, segmented_button,
settings, warning,
},
Element, ElementExt,
Element,
};
use cosmic_time::{Instant, Timeline};
use std::{
@ -224,7 +225,7 @@ impl Window {
self.nav_bar
.insert()
.text(page.title())
.icon(IconSource::from(page.icon_name()))
.icon(icon::handle::from_name(page.icon_name()).icon())
.secondary(&mut self.nav_id_to_page, page)
}
@ -247,14 +248,10 @@ impl Window {
) -> Element<Message> {
let page = sub_page.parent_page();
column!(
iced::widget::Button::new(row!(
icon("go-previous-symbolic", 16).style(theme::Svg::SymbolicLink),
text(page.title()).size(14),
))
.padding(0)
.style(theme::Button::Link)
// .id(BTN.clone())
.on_press(Message::from(page)),
button::icon(icon::handle::from_name("go-previous-symbolic").size(16))
.label(page.title())
.padding(0)
.on_press(Message::from(page)),
row!(
text(sub_page.title()).size(28),
horizontal_space(Length::Fill),
@ -276,8 +273,9 @@ impl Window {
iced::widget::Button::new(
container(
settings::item_row(vec![
icon(sub_page.icon_name(), 20)
.style(theme::Svg::Symbolic)
icon::handle::from_name(sub_page.icon_name())
.size(20)
.icon()
.into(),
column!(
text(sub_page.title()).size(14),
@ -286,8 +284,9 @@ impl Window {
.spacing(2)
.into(),
horizontal_space(iced::Length::Fill).into(),
icon("go-next-symbolic", 20)
.style(theme::Svg::Symbolic)
icon::handle::from_name("go-next-symbolic")
.size(20)
.icon()
.into(),
])
.spacing(16),
@ -296,7 +295,7 @@ impl Window {
.style(theme::Container::custom(list::column::style)),
)
.padding(0)
.style(theme::Button::Transparent)
.style(theme::IcedButton::Transparent)
.on_press(Message::from(sub_page.into_page()))
// .id(BTN.clone())
.into()

View file

@ -7,8 +7,8 @@ use cosmic::{
iced::{id, Alignment, Length},
theme::{self, Button as ButtonTheme, ThemeType},
widget::{
button, container, icon, segmented_button, segmented_selection, settings, spin_button,
toggler, view_switcher,
button, cosmic_container::container, icon, segmented_button, segmented_selection, settings,
spin_button, toggler, view_switcher,
},
Element,
};
@ -186,7 +186,7 @@ impl State {
Message::IconTheme(key) => {
self.icon_themes.activate(key);
if let Some(theme) = self.icon_themes.text(key) {
cosmic::icon_theme::set_default(theme);
cosmic::icon_theme::set_default(theme.to_owned());
}
}
Message::InputChanged(s) => {
@ -255,45 +255,13 @@ impl State {
"Scaling Factor",
spin_button(&window.scale_factor_string, Message::ScalingFactor),
))
.add(settings::item_row(vec![button(ButtonTheme::Destructive)
.on_press(Message::ToggleWarning)
.custom(vec![
icon("dialog-warning-symbolic", 16)
.style(theme::Svg::SymbolicPrimary)
.into(),
text("Do Not Touch").into(),
])
.into()]))
.into(),
settings::view_section("Buttons")
.add(settings::item_row(vec![
button(ButtonTheme::Primary)
.text("Primary")
.on_press(Message::ButtonPressed)
cosmic::widget::button::destructive("Do not Touch")
.trailing_icon(
icon::handle::from_name("dialog-warning-symbolic").size(16),
)
.on_press(Message::ToggleWarning)
.into(),
button(ButtonTheme::Secondary)
.text("Secondary")
.on_press(Message::ButtonPressed)
.into(),
button(ButtonTheme::Positive)
.text("Positive")
.on_press(Message::ButtonPressed)
.into(),
button(ButtonTheme::Destructive)
.text("Destructive")
.on_press(Message::ButtonPressed)
.into(),
button(ButtonTheme::Text)
.text("Text")
.on_press(Message::ButtonPressed)
.into(),
]))
.add(settings::item_row(vec![
button(ButtonTheme::Primary).text("Primary").into(),
button(ButtonTheme::Secondary).text("Secondary").into(),
button(ButtonTheme::Positive).text("Positive").into(),
button(ButtonTheme::Destructive).text("Destructive").into(),
button(ButtonTheme::Text).text("Text").into(),
]))
.into(),
settings::view_section("Controls")
@ -454,9 +422,13 @@ impl State {
"Primary container with some text and a couple icons testing default fallbacks"
)
.size(24),
icon("microphone-sensitivity-high-symbolic-test", 24)
.style(cosmic::theme::Svg::SymbolicActive),
icon("microphone-sensitivity-high-symbolic-test", 16).default_fallbacks(false)
icon::handle::from_name("microphone-sensitivity-high-symbolic-test")
.size(24)
.icon(),
icon::handle::from_name("microphone-sensitivity-high-symbolic-test")
.size(24)
.fallback(false)
.icon(),
])
.layer(cosmic_theme::Layer::Primary)
.padding(8)
@ -475,9 +447,7 @@ impl State {
.iter()
.enumerate()
.map(|(i, c)| column![
button(cosmic::theme::Button::Text)
.text("Delete me")
.on_press(Message::DeleteCard(i)),
button::text("Delete me").on_press(Message::DeleteCard(i)),
text(c).size(24).width(Length::Fill)
]
.into())

View file

@ -1,7 +1,7 @@
use cosmic::iced::widget::{horizontal_space, row};
use cosmic::iced::{Alignment, Length};
use cosmic::widget::{button, segmented_button, view_switcher};
use cosmic::{theme, Element};
use cosmic::widget::{button, icon, segmented_button, view_switcher};
use cosmic::{theme, Apply, Element};
use slotmap::Key;
#[derive(Clone, Copy, Debug)]
@ -66,8 +66,9 @@ impl State {
.on_close(Message::Close)
.width(Length::Shrink);
let new_tab_button = button(theme::Button::Text)
.icon(theme::Svg::Symbolic, "tab-new-symbolic", 20)
let new_tab_button = icon::handle::from_name("tab-new-symbolic")
.size(20)
.apply(button::icon)
.on_press(Message::AddNew);
let tab_header = row!(tabs, new_tab_button).align_items(Alignment::Center);

View file

@ -62,7 +62,7 @@ impl State {
window.parent_page_button(SystemAndAccountsPage::About),
row!(
horizontal_space(Length::Fill),
icon("distributor-logo", 78),
icon::handle::from_name("distributor-logo").size(78).icon(),
horizontal_space(Length::Fill),
)
.into(),

View file

@ -7,6 +7,7 @@ use apply::Apply;
use cosmic::app::{Command, Core, Settings};
use cosmic::dialog::file_chooser::{self, FileFilter};
use cosmic::iced_core::Length;
use cosmic::widget::button;
use cosmic::{executor, iced, ApplicationExt, Element};
use tokio::io::AsyncReadExt;
use url::Url;
@ -82,10 +83,7 @@ impl cosmic::Application for App {
fn header_end(&self) -> Vec<Element<Self::Message>> {
// Places a button the header to create open dialogs.
vec![cosmic::widget::button(cosmic::theme::Button::Primary)
.text("Open")
.on_press(Message::OpenFile)
.into()]
vec![button::suggested("Open").on_press(Message::OpenFile).into()]
}
fn subscription(&self) -> cosmic::iced_futures::Subscription<Self::Message> {