StatusScreen serves to show a result of operation, typically a checkmark with a circle around dismissed by swipe up gesture. PromptScreen serves to confirm action, typically by holding a button. Designs based on Figma. So far without animation.obrusvit/ui-t3t1-reset-device-apple-hotfix
obrusvit
3 weeks ago
parent
85c1c92918
commit
36e2c98013
@ -0,0 +1,141 @@
|
||||
use crate::{
|
||||
time::Duration,
|
||||
ui::{
|
||||
component::{Component, Event, EventCtx, PageMsg},
|
||||
display::Color,
|
||||
geometry::{Alignment2D, Offset, Rect},
|
||||
shape,
|
||||
shape::Renderer,
|
||||
},
|
||||
};
|
||||
|
||||
use super::{theme, Button, ButtonContent, ButtonMsg};
|
||||
|
||||
/// Component requesting an action from a user. Most typically embedded as a
|
||||
/// content of a Frame and promptin "Tap to confirm" or "Hold to XYZ".
|
||||
#[derive(Clone)]
|
||||
pub struct PromptScreen {
|
||||
area: Rect,
|
||||
button: Button,
|
||||
circle_color: Color,
|
||||
circle_pad_color: Color,
|
||||
circle_inner_color: Color,
|
||||
dismiss_type: DismissType,
|
||||
}
|
||||
|
||||
#[derive(Clone)]
|
||||
enum DismissType {
|
||||
Tap,
|
||||
Hold,
|
||||
}
|
||||
|
||||
impl PromptScreen {
|
||||
pub fn new_hold_to_confirm() -> Self {
|
||||
let icon = theme::ICON_SIGN;
|
||||
let button = Button::new(ButtonContent::Icon(icon))
|
||||
.styled(theme::button_default())
|
||||
.with_long_press(Duration::from_secs(2));
|
||||
Self {
|
||||
area: Rect::zero(),
|
||||
circle_color: theme::GREEN,
|
||||
circle_pad_color: theme::GREY_EXTRA_DARK,
|
||||
circle_inner_color: theme::GREEN_LIGHT,
|
||||
dismiss_type: DismissType::Hold,
|
||||
button,
|
||||
}
|
||||
}
|
||||
|
||||
pub fn new_tap_to_confirm() -> Self {
|
||||
let icon = theme::ICON_SIMPLE_CHECKMARK;
|
||||
let button = Button::new(ButtonContent::Icon(icon)).styled(theme::button_default());
|
||||
Self {
|
||||
area: Rect::zero(),
|
||||
circle_color: theme::GREEN,
|
||||
circle_inner_color: theme::GREEN,
|
||||
circle_pad_color: theme::GREY_EXTRA_DARK,
|
||||
dismiss_type: DismissType::Tap,
|
||||
button,
|
||||
}
|
||||
}
|
||||
|
||||
pub fn new_tap_to_cancel() -> Self {
|
||||
let icon = theme::ICON_SIMPLE_CHECKMARK;
|
||||
let button = Button::new(ButtonContent::Icon(icon)).styled(theme::button_default());
|
||||
Self {
|
||||
area: Rect::zero(),
|
||||
circle_color: theme::ORANGE_LIGHT,
|
||||
circle_inner_color: theme::ORANGE_LIGHT,
|
||||
circle_pad_color: theme::GREY_EXTRA_DARK,
|
||||
dismiss_type: DismissType::Tap,
|
||||
button,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
impl Component for PromptScreen {
|
||||
type Msg = PageMsg<()>;
|
||||
|
||||
fn place(&mut self, bounds: Rect) -> Rect {
|
||||
self.area = bounds;
|
||||
self.button.place(Rect::snap(
|
||||
self.area.center(),
|
||||
Offset::uniform(55),
|
||||
Alignment2D::CENTER,
|
||||
));
|
||||
bounds
|
||||
}
|
||||
|
||||
fn event(&mut self, ctx: &mut EventCtx, event: Event) -> Option<Self::Msg> {
|
||||
let btn_msg = self.button.event(ctx, event);
|
||||
match (&self.dismiss_type, btn_msg) {
|
||||
(DismissType::Tap, Some(ButtonMsg::Clicked)) => {
|
||||
return Some(PageMsg::Confirmed);
|
||||
}
|
||||
(DismissType::Hold, Some(ButtonMsg::LongPressed)) => {
|
||||
return Some(PageMsg::Confirmed);
|
||||
}
|
||||
_ => (),
|
||||
}
|
||||
None
|
||||
}
|
||||
|
||||
fn paint(&mut self) {
|
||||
todo!()
|
||||
}
|
||||
|
||||
fn render<'s>(&'s self, target: &mut impl Renderer<'s>) {
|
||||
shape::Circle::new(self.area.center(), 70)
|
||||
.with_fg(self.circle_pad_color)
|
||||
.with_bg(theme::BLACK)
|
||||
.with_thickness(20)
|
||||
.render(target);
|
||||
shape::Circle::new(self.area.center(), 50)
|
||||
.with_fg(self.circle_color)
|
||||
.with_bg(theme::BLACK)
|
||||
.with_thickness(2)
|
||||
.render(target);
|
||||
shape::Circle::new(self.area.center(), 48)
|
||||
.with_fg(self.circle_pad_color)
|
||||
.with_bg(theme::BLACK)
|
||||
.with_thickness(8)
|
||||
.render(target);
|
||||
matches!(self.dismiss_type, DismissType::Hold).then(|| {
|
||||
shape::Circle::new(self.area.center(), 40)
|
||||
.with_fg(self.circle_inner_color)
|
||||
.with_bg(theme::BLACK)
|
||||
.with_thickness(2)
|
||||
.render(target);
|
||||
});
|
||||
self.button.render(target);
|
||||
}
|
||||
}
|
||||
|
||||
impl crate::ui::flow::Swipable for PromptScreen {}
|
||||
|
||||
#[cfg(feature = "ui_debug")]
|
||||
impl crate::trace::Trace for PromptScreen {
|
||||
fn trace(&self, t: &mut dyn crate::trace::Tracer) {
|
||||
t.component("StatusScreen");
|
||||
t.child("button", &self.button);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,114 @@
|
||||
use crate::{
|
||||
time::Duration,
|
||||
ui::{
|
||||
component::{Component, Event, EventCtx, PageMsg},
|
||||
display::{Color, Icon},
|
||||
geometry::{Alignment2D, Rect},
|
||||
shape,
|
||||
shape::Renderer,
|
||||
},
|
||||
};
|
||||
|
||||
use super::{theme, Swipe, SwipeDirection};
|
||||
|
||||
/// Component showing status of an operation. Most typically embedded as a
|
||||
/// content of a Frame and showing success (checkmark with a circle around).
|
||||
pub struct StatusScreen {
|
||||
area: Rect,
|
||||
icon: Icon,
|
||||
icon_color: Color,
|
||||
circle_color: Color,
|
||||
dismiss_type: DismissType,
|
||||
}
|
||||
|
||||
enum DismissType {
|
||||
SwipeUp(Swipe),
|
||||
Timeout(Duration), // TODO: handle disappearing StatusScreen
|
||||
}
|
||||
|
||||
impl StatusScreen {
|
||||
fn new(icon: Icon, icon_color: Color, circle_color: Color, dismiss_style: DismissType) -> Self {
|
||||
Self {
|
||||
area: Rect::zero(),
|
||||
icon,
|
||||
icon_color,
|
||||
circle_color,
|
||||
dismiss_type: dismiss_style,
|
||||
}
|
||||
}
|
||||
|
||||
pub fn new_success() -> Self {
|
||||
Self::new(
|
||||
theme::ICON_SIMPLE_CHECKMARK,
|
||||
theme::GREEN_LIME,
|
||||
theme::GREEN_LIGHT,
|
||||
DismissType::SwipeUp(Swipe::new().up()),
|
||||
)
|
||||
}
|
||||
|
||||
pub fn new_neutral() -> Self {
|
||||
Self::new(
|
||||
theme::ICON_SIMPLE_CHECKMARK,
|
||||
theme::GREY_EXTRA_LIGHT,
|
||||
theme::GREY_DARK,
|
||||
DismissType::SwipeUp(Swipe::new().up()),
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
impl Component for StatusScreen {
|
||||
type Msg = PageMsg<()>;
|
||||
|
||||
fn place(&mut self, bounds: Rect) -> Rect {
|
||||
self.area = bounds;
|
||||
match self.dismiss_type {
|
||||
DismissType::SwipeUp(ref mut swipe) => {
|
||||
swipe.place(bounds);
|
||||
}
|
||||
DismissType::Timeout(_) => {
|
||||
// TODO: handle timeout or scrub the idea?
|
||||
();
|
||||
}
|
||||
}
|
||||
bounds
|
||||
}
|
||||
|
||||
fn event(&mut self, ctx: &mut EventCtx, event: Event) -> Option<Self::Msg> {
|
||||
match self.dismiss_type {
|
||||
DismissType::SwipeUp(ref mut swipe) => {
|
||||
let swipe_dir = swipe.event(ctx, event);
|
||||
match swipe_dir {
|
||||
Some(SwipeDirection::Up) => return Some(PageMsg::Confirmed),
|
||||
_ => (),
|
||||
}
|
||||
}
|
||||
// TODO: handle timeout or scrub the idea?
|
||||
_ => (),
|
||||
}
|
||||
|
||||
None
|
||||
}
|
||||
|
||||
fn paint(&mut self) {
|
||||
todo!()
|
||||
}
|
||||
|
||||
fn render<'s>(&'s self, target: &mut impl Renderer<'s>) {
|
||||
shape::Circle::new(self.area.center(), 40)
|
||||
.with_fg(self.circle_color)
|
||||
.with_bg(theme::BLACK)
|
||||
.with_thickness(2)
|
||||
.render(target);
|
||||
shape::ToifImage::new(self.area.center(), self.icon.toif)
|
||||
.with_align(Alignment2D::CENTER)
|
||||
.with_fg(self.icon_color)
|
||||
.render(target);
|
||||
}
|
||||
}
|
||||
|
||||
#[cfg(feature = "ui_debug")]
|
||||
impl crate::trace::Trace for StatusScreen {
|
||||
fn trace(&self, t: &mut dyn crate::trace::Tracer) {
|
||||
t.component("StatusScreen");
|
||||
}
|
||||
}
|
||||
Loading…
Reference in new issue