chore: examples of animated card usage

This commit is contained in:
Ashley Wulber 2023-07-17 11:52:07 -04:00 committed by Ian Douglas Scott
parent 4895b0c9bd
commit 5745ed3ffe
5 changed files with 116 additions and 6 deletions

View file

@ -7,4 +7,5 @@ publish = false
[dependencies]
libcosmic = { path = "../..", default-features = false, features = ["wayland", "tokio", "a11y"] }
cosmic-time = { git = "https://github.com/pop-os/cosmic-time", rev="39c96ac", default-features = false, features = ["libcosmic", "once_cell"] }
cosmic-time = { git = "https://github.com/pop-os/cosmic-time", rev="8ab038b", default-features = false, features = ["libcosmic", "once_cell"] }
# cosmic-time = { path = "../../../cosmic-time", default-features = false, features = ["libcosmic", "once_cell"] }

View file

@ -10,9 +10,10 @@ use cosmic::{
},
iced_futures::Subscription,
iced_style::application,
iced_widget::text,
theme::{self, Theme},
widget::{
button, header_bar, nav_bar, nav_bar_toggle,
button, cosmic_container, header_bar, nav_bar, nav_bar_toggle,
rectangle_tracker::{rectangle_tracker_subscription, RectangleTracker, RectangleUpdate},
scrollable, segmented_button, segmented_selection, settings, toggler, IconSource,
},
@ -27,6 +28,7 @@ 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);
static CARDS: Lazy<id::Cards> = Lazy::new(id::Cards::unique);
#[derive(Clone, Copy, Debug, Eq, PartialEq)]
pub enum Page {
@ -114,6 +116,7 @@ pub struct Window {
slider_value: f32,
checkbox_value: bool,
toggler_value: bool,
cards_value: bool,
pick_list_selected: Option<&'static str>,
nav_bar_pages: segmented_button::SingleSelectModel,
nav_bar_toggled_condensed: bool,
@ -171,6 +174,7 @@ pub enum Message {
SliderChanged(f32),
CheckboxToggled(bool),
TogglerToggled(bool),
CardsToggled(bool),
PickListSelected(&'static str),
RowSelected(usize),
Close,
@ -207,6 +211,17 @@ impl Window {
timeline.start();
}
fn update_cards(&mut self) {
let timeline = &mut self.timeline;
let chain = if self.cards_value {
chain::Cards::on(CARDS.clone(), 1.)
} else {
chain::Cards::off(CARDS.clone(), 1.)
};
timeline.set_chain(chain);
timeline.start();
}
}
impl Application for Window {
@ -276,6 +291,10 @@ impl Application for Window {
self.toggler_value = value;
self.update_togglers();
}
Message::CardsToggled(value) => {
self.cards_value = value;
self.update_cards();
}
Message::PickListSelected(value) => self.pick_list_selected = Some(value),
Message::Close => self.exit = true,
Message::ToggleNavBar => self.nav_bar_toggled = !self.nav_bar_toggled,
@ -288,9 +307,7 @@ impl Application for Window {
Message::RowSelected(row) => println!("Selected row {row}"),
Message::InputChanged => {}
Message::Rectangle(r) => match r {
RectangleUpdate::Rectangle(r) => {
dbg!(r);
}
RectangleUpdate::Rectangle(_) => {}
RectangleUpdate::Init(t) => {
self.rectangle_tracker.replace(t);
}
@ -436,6 +453,30 @@ impl Application for Window {
segmented_selection::horizontal(&self.selection)
.on_activate(Message::Selection),
))
.add(settings::item(
"Cards",
cosmic_container::container(anim!(
//cards
CARDS,
&self.timeline,
vec![
text("Card 1").size(24).width(Length::Fill).into(),
text("Card 2").size(24).width(Length::Fill).into(),
text("Card 3").size(24).width(Length::Fill).into(),
text("Card 4").size(24).width(Length::Fill).into(),
],
Message::Ignore,
|_, e| Message::CardsToggled(e),
"Show More",
"Show Less",
"Clear All",
None,
self.cards_value,
))
.layer(cosmic::cosmic_theme::Layer::Secondary)
.padding(16)
.style(cosmic::theme::Container::Secondary),
))
.into(),
])
.into();

View file

@ -13,3 +13,4 @@ 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="8ab038b", default-features = false, features = ["libcosmic", "once_cell"] }

View file

@ -17,9 +17,12 @@ use cosmic::{
},
Element, ElementExt,
};
use cosmic_time::{Instant, Timeline};
use log::error;
use std::{
borrow::Cow,
cell::RefCell,
rc::Rc,
sync::{
atomic::{AtomicU32, Ordering},
Arc,
@ -161,6 +164,7 @@ pub struct Window {
scale_factor: f64,
scale_factor_string: String,
system_theme: Arc<CosmicTheme>,
timeline: Rc<RefCell<Timeline>>,
}
impl Window {
@ -206,6 +210,7 @@ pub enum Message {
ToggleWarning,
FontsLoaded,
SystemTheme(CosmicTheme),
Tick(Instant),
}
impl From<Page> for Message {
@ -352,6 +357,7 @@ impl Application for Window {
window.insert_page(Page::TimeAndLanguage(None));
window.insert_page(Page::Accessibility);
window.insert_page(Page::Applications);
window.demo.timeline = window.timeline.clone();
(window, load_fonts().map(|_| Message::FontsLoaded))
}
@ -393,6 +399,10 @@ impl Application for Window {
Message::SystemTheme(t.into_srgba())
}
}),
self.timeline
.borrow()
.as_subscription()
.map(|(_, instant)| Self::Message::Tick(instant)),
])
}
@ -452,6 +462,7 @@ impl Application for Window {
Message::SystemTheme(t) => {
self.system_theme = Arc::new(t);
}
Message::Tick(instant) => self.timeline.borrow_mut().now(instant),
}
ret
}

View file

@ -1,3 +1,5 @@
use std::{cell::RefCell, rc::Rc};
use apply::Apply;
use cosmic::{
cosmic_theme,
@ -10,11 +12,14 @@ use cosmic::{
},
Element,
};
use cosmic_time::{anim, chain, Timeline};
use fraction::{Decimal, ToPrimitive};
use once_cell::sync::Lazy;
use super::{Page, Window};
static CARDS: Lazy<cosmic_time::id::Cards> = Lazy::new(cosmic_time::id::Cards::unique);
#[derive(Clone, Copy, Debug, PartialEq, PartialOrd, Ord, Eq)]
pub enum ThemeVariant {
Light,
@ -76,6 +81,8 @@ pub enum Message {
TogglerToggled(bool),
ViewSwitcher(segmented_button::Entity),
InputChanged(String),
ClearAll,
CardsToggled(bool),
}
pub enum Output {
@ -98,6 +105,9 @@ pub struct State {
pub toggler_value: bool,
pub view_switcher: segmented_button::SingleSelectModel,
pub entry_value: String,
pub cards_value: bool,
cards: Vec<String>,
pub timeline: Rc<RefCell<Timeline>>,
}
impl Default for State {
@ -135,7 +145,15 @@ impl Default for State {
.insert(|b| b.text("Segmented Button").data(DemoView::TabB))
.insert(|b| b.text("Tab C").data(DemoView::TabC))
.build(),
cards_value: false,
entry_value: String::new(),
cards: vec![
"card 1".to_string(),
"card 2".to_string(),
"card 3".to_string(),
"card 4".to_string(),
],
timeline: Rc::new(RefCell::new(Default::default())),
}
}
}
@ -171,6 +189,13 @@ impl State {
Message::InputChanged(s) => {
self.entry_value = s;
}
Message::ClearAll => {
self.cards.clear();
}
Message::CardsToggled(v) => {
self.cards_value = v;
self.update_cards();
}
}
None
@ -203,7 +228,7 @@ impl State {
let choose_icon_theme =
segmented_selection::horizontal(&self.icon_themes).on_activate(Message::IconTheme);
let timeline = self.timeline.borrow();
settings::view_column(vec![
window.page_title(Page::Demo),
view_switcher::horizontal(&self.view_switcher)
@ -435,6 +460,26 @@ impl State {
.padding(8)
.width(Length::Fill)
.into(),
container(anim!(
//cards
CARDS,
&timeline,
self.cards
.iter()
.map(|c| text(c).size(24).width(Length::Fill).into())
.collect(),
Message::ClearAll,
|_, e| Message::CardsToggled(e),
"Show More",
"Show Less",
"Clear All",
None,
self.cards_value,
))
.layer(cosmic::cosmic_theme::Layer::Secondary)
.padding(16)
.style(cosmic::theme::Container::Secondary)
.into(),
text_input(
"Type to search apps or type “?” for more options...",
&self.entry_value,
@ -448,4 +493,15 @@ impl State {
])
.into()
}
fn update_cards(&mut self) {
let mut timeline = self.timeline.borrow_mut();
let chain = if self.cards_value {
chain::Cards::on(CARDS.clone(), 1.)
} else {
chain::Cards::off(CARDS.clone(), 1.)
};
timeline.set_chain(chain);
timeline.start();
}
}