feat!(widget): rewrite button & icon widget APIs
This commit is contained in:
parent
18debe546d
commit
4e4eeaac12
60 changed files with 2191 additions and 1113 deletions
|
|
@ -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);
|
||||
|
||||
|
|
|
|||
|
|
@ -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"]}
|
||||
|
|
@ -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.
|
||||
|
|
@ -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(),
|
||||
}))
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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"] }
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
@ -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()
|
||||
|
|
|
|||
|
|
@ -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())
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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(),
|
||||
|
|
|
|||
|
|
@ -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> {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue