ui: Mass layout refactor
- Replaced TabWidget mode selection with ComboBox - Moved Timeline out of record/review widgets - Added TimelineState struct - Set slint style to cosmic
This commit is contained in:
parent
365f77056e
commit
1a1f6dde83
7 changed files with 190 additions and 160 deletions
|
|
@ -1,61 +1,104 @@
|
|||
import { TabWidget } from "std-widgets.slint";
|
||||
import { TabWidget, VerticalBox, ComboBox } from "std-widgets.slint";
|
||||
import { RecordWidget } from "record.slint";
|
||||
import { ReviewWidget } from "review.slint";
|
||||
import { TimelineEvent } from "timeline.slint";
|
||||
import { TimelineEvent, Timeline, TimelineState } from "timeline.slint";
|
||||
import { Const } from "global.slint";
|
||||
export { Palette } from "theme.slint";
|
||||
|
||||
export component AppWindow inherits Window {
|
||||
callback update-record-offset(int);
|
||||
callback save-log;
|
||||
callback new-day-started();
|
||||
|
||||
update-record-offset(new-offset) => {
|
||||
record-state.offset = new-offset;
|
||||
}
|
||||
|
||||
preferred-width: 800px;
|
||||
preferred-height: 600px;
|
||||
max-width: 2147483647px;
|
||||
|
||||
callback start-new-event <=> record.start-new-event;
|
||||
callback stop-event <=> record.stop-event;
|
||||
callback chain-event <=> record.chain-event;
|
||||
callback new-day-started <=> record.new-day-started;
|
||||
callback get-previous-event <=> record.get-previous-event;
|
||||
callback update-record-offset(int);
|
||||
callback update-window-size(length, length);
|
||||
callback save-log;
|
||||
|
||||
callback fetch-log <=> review.fetch-log;
|
||||
|
||||
callback update-visible-time(bool, string);
|
||||
|
||||
update-record-offset(new-offset) => {
|
||||
record.offset = new-offset;
|
||||
}
|
||||
|
||||
update-window-size(width, height) => {
|
||||
self.width = width;
|
||||
self.height = height;
|
||||
}
|
||||
|
||||
in-out property record-events <=> record.events;
|
||||
in-out property record-offset <=> record.offset;
|
||||
in-out property record-visible-time <=> record.visible-time;
|
||||
in-out property in-progress <=> record.in-progress;
|
||||
in property previous-event-name <=> record.previous-event-name;
|
||||
|
||||
in-out property review-events <=> review.events;
|
||||
in-out property review-offset <=> review.offset;
|
||||
in-out property review-visible-time <=> review.visible-time;
|
||||
in-out property record-state <=> record.state;
|
||||
|
||||
in-out property review-state <=> review.state;
|
||||
|
||||
in-out property in-progress <=> record.in-progress;
|
||||
|
||||
in property previous-event-name <=> record.previous-event-name;
|
||||
|
||||
property<[string]> combo-spans: ["1 Hour", "4 Hours", "8 Hours", "24 Hours"];
|
||||
property<bool> minimized: false;
|
||||
property<bool> in-record-mode: true;
|
||||
|
||||
init => {
|
||||
record-state.visible-time = 3600;
|
||||
review-state.visible-time = 3600;
|
||||
}
|
||||
|
||||
Timer {
|
||||
interval: 1s;
|
||||
running: true;
|
||||
triggered => {
|
||||
if (record-state.offset >= Const.max-offset) {
|
||||
root.new-day-started();
|
||||
record-state.offset = 0;
|
||||
return;
|
||||
}
|
||||
record-state.offset += 1;
|
||||
}
|
||||
}
|
||||
|
||||
title: "Aliveline";
|
||||
TabWidget {
|
||||
Tab {
|
||||
title: "Record";
|
||||
record := RecordWidget {
|
||||
combo-spans: combo-spans;
|
||||
update-visible-time(time) => {
|
||||
root.update-visible-time(true, time);
|
||||
}
|
||||
VerticalLayout {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
tl := Timeline {
|
||||
preferred-height: 100%;
|
||||
state: in-record-mode ? record-state : review-state;
|
||||
clicked => {
|
||||
minimized = !minimized;
|
||||
}
|
||||
}
|
||||
Tab {
|
||||
title: "Review";
|
||||
review := ReviewWidget {
|
||||
combo-spans: combo-spans;
|
||||
update-visible-time(time) => {
|
||||
root.update-visible-time(false, time)
|
||||
spacing: minimized ? 0 : 8px;
|
||||
record := RecordWidget {
|
||||
combo-spans: combo-spans;
|
||||
update-visible-time(time) => {
|
||||
root.update-visible-time(true, time);
|
||||
}
|
||||
minimized: minimized || !in-record-mode;
|
||||
}
|
||||
review := ReviewWidget {
|
||||
combo-spans: combo-spans;
|
||||
update-visible-time(time) => {
|
||||
root.update-visible-time(false, time)
|
||||
}
|
||||
minimized: minimized;
|
||||
is-active: !in-record-mode;
|
||||
}
|
||||
if !minimized: HorizontalLayout {
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
padding-bottom: 8px;
|
||||
spacing: 16px;
|
||||
Text {
|
||||
text: "Mode:";
|
||||
font-size: 24px;
|
||||
horizontal-alignment: right;
|
||||
}
|
||||
ComboBox {
|
||||
model: ["Record", "Review"];
|
||||
current-index: in-record-mode ? 0 : 1;
|
||||
selected(current-value) => {
|
||||
in-record-mode = current-value == "Record";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
21
ui/global.slint
Normal file
21
ui/global.slint
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
export global TimeString {
|
||||
pure function pad-mh(seconds: int, param: int) -> string {
|
||||
if seconds / param < 10 {
|
||||
return "0\{floor(seconds / param)}";
|
||||
}
|
||||
return "\{floor(seconds / param)}";
|
||||
}
|
||||
pure function pad-s(seconds: int) -> string {
|
||||
if mod(seconds, 60) < 10 {
|
||||
return "0\{mod(seconds, 60)}";
|
||||
}
|
||||
return "\{mod(seconds, 60)}";
|
||||
}
|
||||
public pure function from(seconds: int) -> string {
|
||||
return "\{pad-mh(seconds, 3600)}:\{pad-mh(mod(seconds, 3600), 60)}:\{pad-s(seconds)}";
|
||||
}
|
||||
}
|
||||
|
||||
export global Const {
|
||||
out property <int> max-offset: 24 * 3600 - 1;
|
||||
}
|
||||
|
|
@ -1,33 +1,25 @@
|
|||
import { VerticalBox, LineEdit, Button, ComboBox } from "std-widgets.slint";
|
||||
import { Timeline } from "timeline.slint";
|
||||
import { Timeline, TimelineState } from "timeline.slint";
|
||||
|
||||
export component RecordWidget inherits VerticalBox {
|
||||
callback new-day-started <=> tl.new-day-started;
|
||||
export component RecordWidget inherits VerticalLayout {
|
||||
callback update-visible-time(string);
|
||||
callback start-new-event(string);
|
||||
callback chain-event(string);
|
||||
callback stop-event;
|
||||
callback get-previous-event();
|
||||
in-out property visible-time <=> tl.visible-time;
|
||||
in-out property updating <=> tl.updating;
|
||||
in-out property offset <=> tl.offset;
|
||||
in-out property events <=> tl.events;
|
||||
|
||||
in-out property<TimelineState> state;
|
||||
in property<[string]> combo-spans: [];
|
||||
in-out property<bool> in-progress: false;
|
||||
property<string> event-name: "";
|
||||
in property<string> previous-event-name: "";
|
||||
property<bool> minimized: false;
|
||||
property<int> combo-index: 0;
|
||||
tl := Timeline {
|
||||
preferred-height: 100%;
|
||||
updating: true;
|
||||
clicked => {
|
||||
minimized = !minimized;
|
||||
}
|
||||
}
|
||||
in-out property <bool> minimized;
|
||||
|
||||
if !minimized: GridLayout {
|
||||
spacing-vertical: 8px;
|
||||
spacing-horizontal: 16px;
|
||||
padding: 8px;
|
||||
le := LineEdit {
|
||||
placeholder-text: "Event name";
|
||||
text: event-name;
|
||||
|
|
@ -56,7 +48,7 @@ export component RecordWidget inherits VerticalBox {
|
|||
Button {
|
||||
text: "Chain";
|
||||
enabled: in-progress;
|
||||
col: 3;
|
||||
col: 2;
|
||||
row: 1;
|
||||
colspan: 2;
|
||||
clicked => {
|
||||
|
|
@ -67,7 +59,7 @@ export component RecordWidget inherits VerticalBox {
|
|||
Button {
|
||||
text: previous-event-name == "" ? "Chain previous event (None)" : "Chain previous event (\{previous-event-name})";
|
||||
enabled: in-progress && previous-event-name != "";
|
||||
col: 5;
|
||||
col: 4;
|
||||
row: 1;
|
||||
colspan: 2;
|
||||
clicked => {
|
||||
|
|
@ -77,7 +69,7 @@ export component RecordWidget inherits VerticalBox {
|
|||
}
|
||||
}
|
||||
Text {
|
||||
text: "Span:";
|
||||
text: "Span: ";
|
||||
font-size: 24px;
|
||||
row: 2;
|
||||
colspan: 3;
|
||||
|
|
|
|||
|
|
@ -1,62 +1,58 @@
|
|||
import { VerticalBox, LineEdit, Button, DatePickerPopup, ComboBox, Slider } from "std-widgets.slint";
|
||||
import { Timeline } from "timeline.slint";
|
||||
import { Timeline, TimelineState } from "timeline.slint";
|
||||
import { Const } from "global.slint";
|
||||
|
||||
export component ReviewWidget inherits VerticalBox {
|
||||
export component ReviewWidget inherits VerticalLayout {
|
||||
callback update-visible-time(string);
|
||||
callback fetch-log(int, int, int);
|
||||
|
||||
property<int> max-offset: 24 * 3600;
|
||||
property<int> current-year;
|
||||
property<int> current-month;
|
||||
property<int> current-day;
|
||||
in property<[string]> combo-spans: [];
|
||||
in-out property visible-time <=> tl.visible-time;
|
||||
in-out property offset <=> tl.offset;
|
||||
in-out property events <=> tl.events;
|
||||
in-out property<TimelineState> state;
|
||||
in-out property<bool> minimized;
|
||||
in-out property<bool> is-active;
|
||||
|
||||
tl := Timeline {
|
||||
updating: false;
|
||||
}
|
||||
GridLayout {
|
||||
spacing-vertical: 8px;
|
||||
spacing-horizontal: 16px;
|
||||
if is-active: VerticalLayout {
|
||||
spacing: 8px;
|
||||
Slider {
|
||||
minimum: visible-time;
|
||||
maximum: tl.max-offset;
|
||||
value: offset;
|
||||
row: 0;
|
||||
colspan: 2;
|
||||
minimum: state.visible-time;
|
||||
maximum: Const.max-offset;
|
||||
value: state.offset;
|
||||
changed(value) => {
|
||||
offset = value;
|
||||
state.offset = value;
|
||||
}
|
||||
}
|
||||
Text {
|
||||
text: "Day: \{current-day}/\{current-month}/\{current-year}";
|
||||
font-size: 32px;
|
||||
horizontal-alignment: right;
|
||||
row: 1;
|
||||
}
|
||||
Button {
|
||||
text: "Select";
|
||||
clicked => {
|
||||
date-picker.show()
|
||||
if !minimized: GridLayout {
|
||||
spacing-horizontal: 16px;
|
||||
padding: 8px;
|
||||
Text {
|
||||
text: "Day: \{current-day}/\{current-month}/\{current-year}";
|
||||
font-size: 24px;
|
||||
horizontal-alignment: right;
|
||||
}
|
||||
row: 1;
|
||||
col: 1;
|
||||
}
|
||||
Text {
|
||||
text: "Span: ";
|
||||
font-size: 24px;
|
||||
row: 2;
|
||||
horizontal-alignment: right;
|
||||
}
|
||||
ComboBox {
|
||||
model: combo-spans;
|
||||
current-index: 0;
|
||||
row: 2;
|
||||
col: 1;
|
||||
selected(current-value) => {
|
||||
root.update-visible-time(current-value);
|
||||
Button {
|
||||
text: "Select";
|
||||
clicked => {
|
||||
date-picker.show()
|
||||
}
|
||||
col: 1;
|
||||
}
|
||||
Text {
|
||||
text: "Span: ";
|
||||
font-size: 24px;
|
||||
row: 1;
|
||||
horizontal-alignment: right;
|
||||
}
|
||||
ComboBox {
|
||||
model: combo-spans;
|
||||
current-index: 0;
|
||||
row: 1;
|
||||
col: 1;
|
||||
selected(current-value) => {
|
||||
root.update-visible-time(current-value);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,55 +1,28 @@
|
|||
import { Palette } from "theme.slint";
|
||||
import { TimeString, Const } from "global.slint";
|
||||
|
||||
export struct TimelineEvent {
|
||||
start: int,
|
||||
duration: int,
|
||||
finished: bool,
|
||||
label: string,
|
||||
color-id: int
|
||||
color-id: int,
|
||||
}
|
||||
|
||||
global TimeString {
|
||||
pure function pad-mh(seconds: int, param: int) -> string {
|
||||
if seconds / param < 10 {
|
||||
return "0\{floor(seconds / param)}";
|
||||
}
|
||||
return "\{floor(seconds / param)}";
|
||||
}
|
||||
pure function pad-s(seconds: int) -> string {
|
||||
if mod(seconds, 60) < 10 {
|
||||
return "0\{mod(seconds, 60)}";
|
||||
}
|
||||
return "\{mod(seconds, 60)}";
|
||||
}
|
||||
public pure function from(seconds: int) -> string {
|
||||
return "\{pad-mh(seconds, 3600)}:\{pad-mh(mod(seconds, 3600), 60)}:\{pad-s(seconds)}";
|
||||
}
|
||||
export struct TimelineState {
|
||||
visible-time: int,
|
||||
offset: int,
|
||||
events: [TimelineEvent],
|
||||
}
|
||||
|
||||
export component Timeline inherits Rectangle {
|
||||
callback new-day-started;
|
||||
callback clicked <=> ta.clicked;
|
||||
|
||||
background: Palette.background;
|
||||
|
||||
in-out property<bool> updating: true;
|
||||
in-out property<[TimelineEvent]> events: [];
|
||||
in-out property<int> visible-time: 3600;
|
||||
property<int> visible-offset: max(offset, visible-time);
|
||||
in-out property<int> offset: 0;
|
||||
out property<int> max-offset: 24 * 3600 - 1;
|
||||
|
||||
timer := Timer {
|
||||
interval: 1s;
|
||||
running: updating;
|
||||
triggered => {
|
||||
if (offset >= max-offset) {
|
||||
root.new-day-started();
|
||||
offset = 0;
|
||||
return;
|
||||
}
|
||||
offset += 1;
|
||||
}
|
||||
}
|
||||
|
||||
in-out property<TimelineState> state;
|
||||
property<int> visible-offset: max(state.offset, state.visible-time);
|
||||
out property<int> max-offset: Const.max-offset;
|
||||
|
||||
ta := TouchArea {
|
||||
preferred-width: 100%;
|
||||
|
|
@ -72,7 +45,7 @@ export component Timeline inherits Rectangle {
|
|||
Text {
|
||||
x: 0;
|
||||
y: parent.height - self.height;
|
||||
text: TimeString.from(visible-offset - visible-time);
|
||||
text: TimeString.from(visible-offset - state.visible-time);
|
||||
color: Palette.background-text;
|
||||
}
|
||||
|
||||
|
|
@ -83,9 +56,9 @@ export component Timeline inherits Rectangle {
|
|||
color: Palette.background-text;
|
||||
}
|
||||
|
||||
for event in events: timeline-event := Rectangle {
|
||||
property<length> real-x: ((visible-time - (visible-offset - event.start)) / visible-time) * parent.width;
|
||||
property<length> real-width: event.duration / visible-time * parent.width + min(real-x, 0);
|
||||
for event in state.events: timeline-event := Rectangle {
|
||||
property<length> real-x: ((state.visible-time - (visible-offset - event.start)) / state.visible-time) * parent.width;
|
||||
property<length> real-width: event.duration / state.visible-time * parent.width + min(real-x, 0);
|
||||
x: max(real-x, 0);
|
||||
y: parent.height / 4;
|
||||
z: 1;
|
||||
|
|
@ -110,7 +83,7 @@ export component Timeline inherits Rectangle {
|
|||
y: root.height - self.height - timeline-event.height;
|
||||
text: timeline-event.x == timeline-event.real-x ?
|
||||
TimeString.from(event.start) :
|
||||
TimeString.from(visible-offset - visible-time);
|
||||
TimeString.from(visible-offset - state.visible-time);
|
||||
visible: timeline-event.visible &&
|
||||
(self.width * 2 < timeline-event.width ||
|
||||
(!end-txt.visible && self.width < timeline-event.width));
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue