language-servers/slint
1
0
Fork 0
mirror of https://github.com/slint-ui/slint.git synced 2025-08-04 18:58:36 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

DatePicker: Logic in C++

Browse source 
Had to simplify a bit the rust logic to make it work
This commit is contained in:
Olivier Goffart 2024-06-05 15:48:16 +02:00
parent 973ecac989
commit 3da0ee5bb9
11 changed files with 152 additions and 228 deletions
Download patch file Download diff file Expand all files Collapse all files

76
internal/compiler/widgets/common/datepicker_base.slint
View file

@ -24,14 +24,14 @@ export struct CalendarDelegateStyle {
}
component CalendarHeaderDelegate {
in property <string> text <=> text-label.text;
in property <string> text <=> text-label.text;
in property <length> font-size;
in property <float> font-weight;
in property <brush> foreground;
min-width: max(40px, content-layer.min-width);
min-height: max(40px, content-layer.min-height);
content-layer := VerticalLayout {
text-label := Text {
vertical-alignment: center;
@ -69,7 +69,7 @@ component CalendarDelegate {
focus-scope := FocusScope {
width: 0px;
enabled: root.enabled;
key-pressed(event) => {
if (event.text == " " || event.text == "\n") {
touch-area.clicked();
@ -79,7 +79,7 @@ component CalendarDelegate {
return reject;
}
}
background-layer := Rectangle {
border-radius: self.height / 2;
}
@ -116,7 +116,7 @@ component CalendarDelegate {
background-layer.border-color: root.style.border-color-today;
background-layer.border-width: 1px;
state-layer.state-brush: root.style.state-brush-today;
}
}
]
}
@ -132,7 +132,7 @@ export component Calendar {
in property <CalendarStyle> style;
in property <int> start-column;
in property <[string]> header-model;
in property <[[int]]> model;
in property <int> month-count;
in property <Date> today;
in property <Date> selected-date;
@ -149,14 +149,14 @@ export component Calendar {
}
// items
for date[index] in root.model : CalendarDelegate {
property <Date> d: { day: date[0], month: date[1], year: date[2] };
for index in root.month-count : CalendarDelegate {
property <Date> d: { day: index + 1, month: today.month, year: today.year };
x: root.delegate-x(root.index-on-calendar(index));
y: root.delegate-y(root.index-on-calendar(index));
width: root.delegate-size;
height: root.delegate-size;
text: date[0];
text: index + 1;
style: root.style.delegate-style;
selected: root.selected-date == self.d;
today: root.today == self.d;
@ -262,7 +262,7 @@ export struct DatePickerStyle {
}
export component DatePickerBase {
in property <Date> date;
in property <Date> date : { day: today[0], month: today[1], year: today[2] };
in property <DatePickerStyle> style;
in property <string> title;
in property <string> input-title;
@ -283,9 +283,17 @@ export component DatePickerBase {
property <bool> year-selection;
property <bool> selection-mode: true;
property <string> current-input;
property <[[int]]> calendar-model: SlintInternal.month_for_date(root.display-date.month, root.display-date.year);
property <[string]> calendar-header-model: SlintInternal.week_days_short();
property <int> calendar-month-count: SlintInternal.month_day_count(root.display-date.month, root.display-date.year);
property <[string]> calendar-header-model: [
@tr("One-letter abbrev for Sunday" => "S"),
@tr("One-letter abbrev for Monday" => "M"),
@tr("One-letter abbrev for Tuesday" => "T"),
@tr("One-letter abbrev for Wednesday" => "W"),
@tr("One-letter abbrev for Thursday" => "T"),
@tr("One-letter abbrev for Friday" => "F"),
@tr("One-letter abbrev for Saturday" => "S"),
];
property <[int]> today: SlintInternal.date_now();
property <int> start-column: SlintInternal.month_offset(root.display-date.month, root.display-date.year);
property <string> current-month: SlintInternal.format_date("%B %Y", root.display-date.day, root.display-date.month, root.display-date.year);
@ -298,13 +306,13 @@ export component DatePickerBase {
min-width: content-layer.min-width;
min-height: content-layer.min-height;
content-layer := VerticalLayout {
content-layer := VerticalLayout {
spacing: root.style.padding;
HorizontalLayout {
HorizontalLayout {
padding-left: root.style.padding;
padding-right: root.style.padding;
Text {
text: root.title;
horizontal-alignment: left;
@ -313,12 +321,12 @@ export component DatePickerBase {
font-weight: root.style.title-style.font-weight;
color: root.style.title-style.foreground;
}
}
}
header := HorizontalLayout {
padding-left: root.style.padding;
padding-right: root.style.padding;
Text {
text: root.selection-mode ? root.current-day : root.input-title;
horizontal-alignment: left;
@ -338,7 +346,7 @@ export component DatePickerBase {
}
}
}
Rectangle {
width: 100%;
height: 1px;
@ -348,7 +356,7 @@ export component DatePickerBase {
if root.selection-mode : HorizontalLayout {
padding-left: root.style.padding;
padding-right: root.style.padding;
VerticalLayout {
horizontal-stretch: 0;
alignment: center;
@ -362,7 +370,7 @@ export component DatePickerBase {
}
Rectangle {}
IconButton {
icon: root.style.previous-icon;
style: root.style.icon-button-style;
@ -372,7 +380,7 @@ export component DatePickerBase {
root.show-previous();
}
}
IconButton {
icon: root.style.next-icon;
style: root.style.icon-button-style;
@ -381,13 +389,13 @@ export component DatePickerBase {
clicked => {
root.show-next();
}
}
}
}
}
if root.selection-mode : VerticalLayout {
padding-left: root.style.padding;
padding-right: root.style.padding;
if !root.year-selection : Calendar {
min-width: root.calendar-min-width;
min-height: root.calendar-min-height;
@ -396,7 +404,7 @@ export component DatePickerBase {
delegate-size: root.delegate-size;
style: root.style.calendar-style;
header-model: root.calendar-header-model;
model: root.calendar-model;
month-count: root.calendar-month-count;
today: { day: root.today[0], month: root.today[1], year: root.today[2] };
selected-date <=> root.current-date;
start-column: root.start-column;
@ -423,8 +431,8 @@ export component DatePickerBase {
root.select-year(year);
}
}
}
}
Rectangle {
width: 100%;
height: 1px;
@ -432,7 +440,7 @@ export component DatePickerBase {
visible: root.year-selection;
}
if !root.selection-mode : HorizontalLayout {
padding-left: root.style.padding;
padding-right: root.style.padding;
@ -470,7 +478,7 @@ export component DatePickerBase {
}
pure function input-as-date() -> Date {
{ day: root.input-formatted[0], month: root.input-formatted[1], year: root.input-formatted[2] }
}
@ -493,7 +501,7 @@ export component DatePickerBase {
root.display-date = { day: 1, month: root.display-date.month + 1, year: root.display-date.year };
}
function show-previous() {
function show-previous() {
if root.display-date.month <= 1 {
root.display-date = { day: 1, month: 12, year: root.display-date.year - 1 };
return;