leyoda/libcosmic
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Implemented a combined horizontal and vertical spin button implementation

Browse source
This commit is contained in:
Bryan Hyland 2024-11-16 13:46:49 -08:00
parent 3cf473c26b
commit 37f07c7154
4 changed files with 241 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

60
examples/vertical-spin-button/src/main.rs
View file

@ -1,4 +1,4 @@
use cosmic::widget::{button, container, text, spin_button::vertical_spin_button};
use cosmic::widget::{button, container, text, spin_button::vertical_spin_button, spin_button::spin_button};
use cosmic::{
app::{Core, Task},
iced::{
@ -14,21 +14,24 @@ pub struct VertSpinnerApp {
hours: i32,
mins: i16,
secs: i8,
spin_button_num: f32,
time_msg: String,
spin_btn_msg: String,
}
#[derive(Debug, Clone)]
pub enum VertSpinnerMessages {
pub enum SpinBtnMessages {
UpdateHours(i32),
UpdateMins(i16),
UpdateSecs(i8),
UpdateSpinBtnVal(f32),
UpdateTimeMessage,
}
impl Application for VertSpinnerApp {
type Executor = cosmic::executor::Default;
type Flags = ();
type Message = VertSpinnerMessages;
type Message = SpinBtnMessages;
const APP_ID: &'static str = "com.system76.VertSpinnerExample";
@ -47,7 +50,9 @@ impl Application for VertSpinnerApp {
hours: 0,
mins: 0,
secs: 0,
spin_button_num: 0.0,
time_msg: String::new(),
spin_btn_msg: String::new(),
},
Task::none(),
)
@ -55,10 +60,11 @@ impl Application for VertSpinnerApp {
fn update(&mut self, message: Self::Message) -> Task<Self::Message> {
match message {
VertSpinnerMessages::UpdateHours(hours) => self.hours = hours,
VertSpinnerMessages::UpdateMins(mins) => self.mins = mins,
VertSpinnerMessages::UpdateSecs(secs) => self.secs = secs,
VertSpinnerMessages::UpdateTimeMessage => {
SpinBtnMessages::UpdateHours(hours) => self.hours = hours,
SpinBtnMessages::UpdateMins(mins) => self.mins = mins,
SpinBtnMessages::UpdateSecs(secs) => self.secs = secs,
SpinBtnMessages::UpdateSpinBtnVal(spin_btn_val) => self.spin_button_num = spin_btn_val,
SpinBtnMessages::UpdateTimeMessage => {
self.time_msg = format!(
"{}:{}:{}",
self.hours,
@ -74,7 +80,9 @@ impl Application for VertSpinnerApp {
} else {
self.secs.to_string()
}
)
);
self.spin_btn_msg = format!("This came from the spin button: {}", self.spin_button_num);
}
}
@ -83,38 +91,56 @@ impl Application for VertSpinnerApp {
fn view(&self) -> Element<Self::Message> {
let spinner_row = row![
vertical_spin_button(
spin_button::spin_button(
"Hours",
1,
self.hours,
0,
12,
VertSpinnerMessages::UpdateHours
spin_button::Direction::Vertical,
SpinBtnMessages::UpdateHours
),
vertical_spin_button(
spin_button::spin_button(
"Minutes",
1,
self.mins,
0,
59,
VertSpinnerMessages::UpdateMins
spin_button::Direction::Vertical,
SpinBtnMessages::UpdateMins
),
vertical_spin_button(
spin_button::spin_button(
"Seconds",
1,
self.secs,
0,
59,
VertSpinnerMessages::UpdateSecs
spin_button::Direction::Vertical,
SpinBtnMessages::UpdateSecs
),
spin_button::spin_button(
"Spin Button Demo",
0.5,
self.spin_button_num,
0.0,
10.0,
spin_button::Direction::Horizontal,
SpinBtnMessages::UpdateSpinBtnVal
)
]
.align_y(Vertical::Center);
let status_row = row![
text(self.time_msg.clone()),
cosmic::widget::horizontal_space().width(10),
text(self.spin_btn_msg.clone())
];
let final_col = column![
spinner_row,
button::standard("Update Time").on_press(VertSpinnerMessages::UpdateTimeMessage),
button::standard("Update Time").on_press(SpinBtnMessages::UpdateTimeMessage),
vertical_space().height(10),
text(self.time_msg.clone()),
status_row,
]
.align_x(Alignment::Center);
@ -126,7 +152,7 @@ impl Application for VertSpinnerApp {
}
fn main() -> Result<(), Box<dyn std::error::Error>> {
let settings = cosmic::app::Settings::default().size(Size::new(260., 240.));
let settings = cosmic::app::Settings::default().size(Size::new(550., 300.));
cosmic::app::run::<VertSpinnerApp>(settings, ())?;
Ok(())

2
src/widget/mod.rs
View file

@ -311,7 +311,7 @@ pub mod settings;
pub mod spin_button;
#[doc(inline)]
pub use spin_button::{spin_button, SpinButton};
pub use spin_button::{spin_button::spin_button, SpinButton};
pub mod tab_bar;

1
src/widget/spin_button/mod.rs
View file

@ -4,6 +4,7 @@
//! A control for incremental adjustments of a value.
mod model;
pub mod spin_button;
use std::borrow::Cow;
pub use self::model::{Message, Model};

196
src/widget/spin_button/spin_button.rs Normal file
View file

@ -0,0 +1,196 @@
use std::borrow::{Borrow, Cow};
use std::fmt::Display;
use std::ops::{Add, Sub};
use std::marker::PhantomData;
use apply::Apply;
use iced::alignment::Horizontal;
use iced::{Alignment, Length};
use crate::{
Element,
widget::{
button,
column,
container,
icon,
row,
text,
},
};
pub enum Direction {
Horizontal,
Vertical,
}
pub struct SpinButton<'a, T, Message>
where
T: Add<Output = T> + Sub<Output = T> + PartialEq + PartialOrd + Display + Copy
{
label: String,
step: T,
value: T,
min: T,
max: T,
direction: Direction,
on_press: Box<dyn Fn(T) -> Message>,
phantom_data: PhantomData<&'a Message>,
}
impl<'a, T, Message> SpinButton<'a, T, Message>
where
T: Add<Output = T> + Sub<Output = T> + PartialEq + PartialOrd + Display + Copy
{
pub fn new(
label: impl Into<String>,
step: T,
value: T,
min: T,
max: T,
direction: Direction,
on_press: impl Fn(T) -> Message + 'static,
) -> Self {
Self {
label: label.into(),
step,
value,
min,
max,
direction,
on_press: Box::from(on_press),
phantom_data: PhantomData,
}
}
}
pub fn spin_button<'a, T, Message>(
label: impl Into<String>,
step: T,
value: T,
min: T,
max: T,
direction: Direction,
on_press: impl Fn(T) -> Message + 'static,
) -> SpinButton<'a, T, Message>
where
T: Add<Output = T> + Sub<Output = T> + PartialEq + PartialOrd + Display + Copy
{
SpinButton::new(label, step, value, min, max, direction, on_press)
}
fn increment<T>(step: T, value: T, min: T, max: T) -> T
where
T: Add<Output = T> + Sub<Output = T> + PartialEq + PartialOrd + Display + Copy
{
//! Make it roll over back to min if the increase is too high
if value + step > max {
min
} else {
value + step
}
}
fn decrement<T>(step: T, value: T, min: T, max: T) -> T
where
T: Add<Output = T> + Sub<Output = T> + PartialEq + PartialOrd + Display + Copy
{
//! Make it roll over back to max if the decrese is too low
if value - step < min {
max
} else {
value - step
}
}
impl<'a, T, Message> From<SpinButton<'a, T, Message>> for Element<'a, Message>
where
Message: Clone + 'static,
T: Add<Output = T> + Sub<Output = T> + PartialEq + PartialOrd + Display + Copy
{
fn from(this: SpinButton<'a, T, Message>) -> Self {
//! Matching on the direction enum given by the developer when the
//! widget is initially created in the application's view function.
// NOTE: I can add a bult-in function that can toggle the widget
// enabled or disabled if the feature is requested. However, for
// the first implementation, I didn't want to go into the complexity
// of doing so.
match this.direction {
Direction::Horizontal => {
// Create a spinner container variable that contains the row with all of
// the combined widgets that make up the widget.
let spinner_container = row::with_children(vec![
// Using the title4 variant of text, just like the original spin button did.
text::title4(this.label.clone())
.apply(container)
.center_x(Length::Fill)
.align_y(Alignment::Center)
.into(),
// Using an button instead of an icon for the decrement functionality.
button::icon(icon::from_name("list-remove-symbolic"))
.padding([0, 12])
.on_press((this.on_press)(decrement::<T>(
this.step, this.value, this.min, this.max,
)))
.into(),
// Using the title4 variant of text for consistency.
text::title4(format!("{}", this.value))
.apply(container)
.center_x(Length::Fixed(48.0))
.align_y(Alignment::Center)
.into(),
// Using another button for the increment functionality.
button::icon(icon::from_name("list-add-symbolic"))
.padding([0, 12])
.on_press((this.on_press)(increment::<T>(
this.step, this.value, this.min, this.max,
)))
.into(),
])
.align_y(Alignment::Center);
// Return the horizontal spin button from the match statement.
Self::new(spinner_container)
},
Direction::Vertical => {
// Create a text widget that holds the value
let val_text = text(format!("{}", this.value)).size(14);
// Create a spinner container variable that contains the column with all of
// the combined widgets that make up the widget.
let spinner_container = column::with_capacity(3)
.push(
// Use a button for the increment functionality
button::icon(icon::from_name("list-add-symbolic"))
.padding([0, 12])
.on_press((this.on_press)(increment::<T>(
this.step, this.value, this.min, this.max,
))),
)
// Add the text widget that holds the current value
.push(val_text)
.push(
// Use a button for the decrement functionality
button::icon(icon::from_name("list-remove-symbolic"))
.padding([0, 12])
.on_press((this.on_press)(decrement::<T>(
this.step, this.value, this.min, this.max,
))),
)
.align_x(Horizontal::Center);
// Create a column that contains two rows:
// First Row -> The label/title for the spin button.
// Second Row -> The spin button container from above.
let content_list = column::with_children(vec![
row::with_capacity(1).push(text(this.label)).into(),
row::with_children(vec![Element::from(spinner_container)]).into(),
])
.width(75)
.padding([8, 0])
.align_x(Alignment::Center);
// Return the vertical spin button from the match statement.
Self::new(content_list)
}
}
}
}