chore: examples of animated card usage

examples/cosmic-sctk/Cargo.toml

@@ -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"] }

examples/cosmic-sctk/src/window.rs

@@ -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) => {
+                RectangleUpdate::Rectangle(_) => {}
-                    dbg!(r);
-                }
                 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();

examples/cosmic/Cargo.toml

@@ -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"] }

examples/cosmic/src/window.rs

@@ -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
     }

examples/cosmic/src/window/demo.rs

@@ -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();
+    }
 }