chore: examples of animated card usage
This commit is contained in:
parent
4895b0c9bd
commit
5745ed3ffe
5 changed files with 116 additions and 6 deletions
|
|
@ -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"] }
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -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"] }
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue