Skip to content
This repository has been archived by the owner on May 12, 2022. It is now read-only.

Commit

Permalink
feat(ui): support displaying custom label views in Slider
Browse files Browse the repository at this point in the history
  • Loading branch information
@yvt
yvt committed May 17, 2020
1 parent 7242678 commit cd89ad8
Show file tree
Hide file tree
Showing 4 changed files with 272 additions and 57 deletions.
32 changes: 29 additions & 3 deletions tcw3/examples/tcw3_widgets.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ use tcw3::{
pal,
pal::prelude::*,
ui::{
layouts::TableLayout,
layouts::{FillLayout, TableLayout},
theming,
views::{
scrollbar::ScrollbarDragListener, Button, Checkbox, Entry, Label, RadioButton,
Expand Down Expand Up @@ -123,9 +123,29 @@ fn main() {
});
}

let slider_labels = [
Label::new(style_manager),
Label::new(style_manager),
Label::new(style_manager),
Label::new(style_manager),
Label::new(style_manager),
];
slider_labels[0].set_text("Stop");
slider_labels[1].set_text("Trot");
slider_labels[2].set_text("Canter");
slider_labels[3].set_text("Gallop");
slider_labels[4].set_text("Warp");

let slider = Slider::new(style_manager, false);
let slider = Rc::new(slider);
slider.set_uniform_ticks(8);
slider.set_uniform_ticks(5);
slider.set_labels([
(0, Some((0.0, &slider_labels[0] as &dyn theming::Widget))),
(1, Some((0.2, &slider_labels[1] as &dyn theming::Widget))),
(2, Some((0.4, &slider_labels[2] as &dyn theming::Widget))),
(3, Some((0.6, &slider_labels[3] as &dyn theming::Widget))),
(4, Some((1.0, &slider_labels[4] as &dyn theming::Widget))),
]);
{
let slider_weak = Rc::downgrade(&slider);
slider.set_on_drag(move |_| {
Expand All @@ -138,6 +158,12 @@ fn main() {
// TODO
}

let slider = {
let view = HView::new(Default::default());
view.set_layout(FillLayout::new(slider.view()).with_margin([0.0, 10.0, 0.0, 10.0]));
view
};

let entry = Entry::new(style_manager);

let button = Button::new(style_manager);
Expand Down Expand Up @@ -214,7 +240,7 @@ fn main() {
TableLayout::stack_vert(vec![
(label.view(), AlignFlags::VERT_JUSTIFY),
(scrollbar.view(), AlignFlags::JUSTIFY),
(slider.view(), AlignFlags::JUSTIFY),
(slider, AlignFlags::JUSTIFY),
(entry.view(), AlignFlags::JUSTIFY),
(h_layout.clone(), AlignFlags::JUSTIFY),
])
Expand Down
7 changes: 4 additions & 3 deletions tcw3/src/ui/theming/style.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,6 +111,7 @@ pub mod elem_id {
, TEXT_SELECTION
, SLIDER_KNOB
, SLIDER_TICKS
, SLIDER_LABELS
}
}

Expand All @@ -135,10 +136,10 @@ pub mod roles {
pub const GENERIC: super::Role = iota;
, HORZ_SCROLLBAR
, VERT_SCROLLBAR
, SLIDER_KNOB
, SLIDER_TICKS
, SLIDER_LABELS
}

pub const SLIDER_KNOB: super::Role = super::Role::max_value();
pub const SLIDER_TICKS: super::Role = super::Role::max_value() - 1;
}

#[macro_use]
Expand Down
66 changes: 53 additions & 13 deletions tcw3/src/ui/theming/stylesheet.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -548,14 +548,18 @@ const SCROLLBAR_VISUAL_RADIUS: f32 = SCROLLBAR_VISUAL_WIDTH / 2.0;
const SCROLLBAR_MARGIN: f32 = 6.0;
const SCROLLBAR_LEN_MIN: f32 = 20.0;

/// The width of the slider. Does not include custom label views.
const SLIDER_WIDTH: f32 = 28.0;
const SLIDER_TROUGH_WIDTH: f32 = 1.0;
const SLIDER_KNOB_SIZE: f32 = 16.0;
const SLIDER_KNOB_RADIUS: f32 = SLIDER_KNOB_SIZE / 2.0;
const SLIDER_LEN_MARGIN: f32 = 10.0;
const SLIDER_LEN_MIN: f32 = SLIDER_LEN_MARGIN * 2.0 + 10.0;
const SLIDER_TICKS_DISTANCE: f32 = 4.0;
const SLIDER_TICKS_DISTANCE: f32 = SLIDER_KNOB_RADIUS + 4.0;
const SLIDER_TICKS_SIZE: f32 = 3.0;
const SLIDER_LABELS_DISTANCE: f32 = SLIDER_TICKS_DISTANCE + SLIDER_TICKS_SIZE + 3.0;
/// The margin between custom label views and the slider's frame.
const SLIDER_LABELS_MARGIN: f32 = 2.0;

const FIELD_HEIGHT: f32 = 20.0;

Expand Down Expand Up @@ -860,62 +864,98 @@ lazy_static! {
layer_opacity[0]: 1.0,
},
([.SLIDER:not(.VERTICAL)]) (priority = 100) {
// This subview metrics only determines its movable region. The
// final frame is decided by `*StyledBoxOverride` based on that.
subview_metrics[roles::SLIDER_KNOB]: Metrics {
margin: [NAN, SLIDER_LEN_MARGIN - SLIDER_KNOB_RADIUS, NAN, SLIDER_LEN_MARGIN - SLIDER_KNOB_RADIUS],
margin: [
SLIDER_WIDTH * 0.5 - SLIDER_KNOB_RADIUS,
SLIDER_LEN_MARGIN - SLIDER_KNOB_RADIUS,
NAN,
SLIDER_LEN_MARGIN - SLIDER_KNOB_RADIUS,
],
.. Metrics::default()
},
subview_metrics[roles::SLIDER_TICKS]: Metrics {
margin: [
SLIDER_WIDTH * 0.5 + SLIDER_KNOB_RADIUS +SLIDER_TICKS_DISTANCE,
SLIDER_WIDTH * 0.5 + SLIDER_TICKS_DISTANCE,
SLIDER_LEN_MARGIN,
NAN,
SLIDER_LEN_MARGIN,
],
size: Vector2::new(NAN, SLIDER_TICKS_SIZE),
},
subview_metrics[roles::SLIDER_LABELS]: Metrics {
margin: [
SLIDER_WIDTH * 0.5 + SLIDER_LABELS_DISTANCE,
SLIDER_LEN_MARGIN,
SLIDER_LABELS_MARGIN,
SLIDER_LEN_MARGIN,
],
size: Vector2::new(NAN, NAN),
},
allow_grow: [true, false],
min_size: Vector2::new(SLIDER_LEN_MIN, SLIDER_WIDTH),

layer_metrics[0]: Metrics {
margin: [NAN, SLIDER_LEN_MARGIN, NAN, SLIDER_LEN_MARGIN],
margin: [
SLIDER_WIDTH * 0.5 - SLIDER_TROUGH_WIDTH * 0.5,
SLIDER_LEN_MARGIN,
NAN,
SLIDER_LEN_MARGIN,
],
size: Vector2::new(NAN, SLIDER_TROUGH_WIDTH),
},
},
([.SLIDER.VERTICAL]) (priority = 100) {
subview_metrics[roles::SLIDER_KNOB]: Metrics {
margin: [SLIDER_LEN_MARGIN - SLIDER_KNOB_RADIUS, NAN, SLIDER_LEN_MARGIN - SLIDER_KNOB_RADIUS, NAN],
margin: [
SLIDER_LEN_MARGIN - SLIDER_KNOB_RADIUS,
NAN,
SLIDER_LEN_MARGIN - SLIDER_KNOB_RADIUS,
SLIDER_WIDTH * 0.5 - SLIDER_KNOB_RADIUS,
],
.. Metrics::default()
},
subview_metrics[roles::SLIDER_TICKS]: Metrics {
margin: [
SLIDER_LEN_MARGIN,
NAN,
SLIDER_LEN_MARGIN,
SLIDER_WIDTH * 0.5 + SLIDER_KNOB_RADIUS +SLIDER_TICKS_DISTANCE,
SLIDER_WIDTH * 0.5 + SLIDER_TICKS_DISTANCE,
],
size: Vector2::new(NAN, SLIDER_TICKS_SIZE),
},
subview_metrics[roles::SLIDER_LABELS]: Metrics {
margin: [
SLIDER_LEN_MARGIN,
SLIDER_LABELS_MARGIN,
SLIDER_LEN_MARGIN,
SLIDER_WIDTH * 0.5 + SLIDER_LABELS_DISTANCE,
],
size: Vector2::new(NAN, NAN),
},
allow_grow: [false, true],
min_size: Vector2::new(SLIDER_WIDTH, SLIDER_LEN_MIN),

layer_metrics[0]: Metrics {
margin: [SLIDER_LEN_MARGIN, NAN, SLIDER_LEN_MARGIN, NAN],
margin: [
SLIDER_LEN_MARGIN,
NAN,
SLIDER_LEN_MARGIN,
SLIDER_WIDTH * 0.5 - SLIDER_TROUGH_WIDTH * 0.5,
],
size: Vector2::new(SLIDER_TROUGH_WIDTH, NAN),
},
},

// Slider knob
([] < [.SLIDER]) (priority = 100) {
([#SLIDER_KNOB] < [.SLIDER]) (priority = 100) {
num_layers: 1,
#[dyn] layer_img[0]: Some(recolor_tint(&assets::SLIDER_KNOB)),
min_size: Vector2::new(SLIDER_KNOB_SIZE, SLIDER_KNOB_SIZE),
},
([] < [.SLIDER:not(.VERTICAL)]) (priority = 100) {
},
([] < [.SLIDER.VERTICAL]) (priority = 100) {
},

([] < [.SLIDER.ACTIVE]) (priority = 150) {
([#SLIDER_KNOB] < [.SLIDER.ACTIVE]) (priority = 150) {
#[dyn] layer_img[0]: Some(recolor_tint(&assets::SLIDER_KNOB_ACT)),
},

Expand Down
Loading

0 comments on commit cd89ad8

Please sign in to comment.