mirror of
https://github.com/slint-ui/slint.git
synced 2025-09-28 12:54:45 +00:00
113 lines
4.3 KiB
Text
113 lines
4.3 KiB
Text
// Copyright © SixtyFPS GmbH <info@slint.dev>
|
|
// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-2.0 OR LicenseRef-Slint-Software-3.0
|
|
|
|
import { VerticalBox } from "./layouts.slint";
|
|
import { Button } from "./button.slint";
|
|
import { MaterialPalette, MaterialFontSettings, Icons } from "styling.slint";
|
|
|
|
import { Date, DatePickerBase } from "../common/datepicker_base.slint";
|
|
export { Date }
|
|
|
|
export component DatePicker {
|
|
in property <string> title: "Select date";
|
|
in property <string> cancel-text: "Cancel";
|
|
in property <string> ok-text: "Ok";
|
|
in property <Date> date <=> base.date;
|
|
in property <string> input-title: "Enter date";
|
|
in property <string> input-placeholder-text: "mm/dd/yyyy";
|
|
in property <string> input-format: "%m/%d/%Y";
|
|
|
|
callback canceled();
|
|
callback accepted(/* current-date */ Date);
|
|
|
|
min-width: content-layer.min-width;
|
|
min-height: content-layer.min-height;
|
|
|
|
background-layer := Rectangle {
|
|
background: MaterialPalette.surface-container-high;
|
|
border-radius: 28px;
|
|
}
|
|
|
|
content-layer := VerticalBox {
|
|
padding-left: 0px;
|
|
padding-right: 0px;
|
|
|
|
base := DatePickerBase {
|
|
title: root.title;
|
|
input-title: root.input-title;
|
|
input-placeholder-text: root.input-placeholder-text;
|
|
input-format: root.input-format;
|
|
style: {
|
|
border-brush: MaterialPalette.border,
|
|
padding: 8px,
|
|
calendar-style: {
|
|
spacing: 8px,
|
|
delegate-style: {
|
|
font-size: MaterialFontSettings.body-large.font-size,
|
|
font-weight: MaterialFontSettings.body-large.font-weight,
|
|
foreground: MaterialPalette.foreground,
|
|
state-brush: MaterialPalette.state-default,
|
|
background-selected: MaterialPalette.accent-background,
|
|
foreground-selected: MaterialPalette.accent-foreground,
|
|
state-brush-selected: MaterialPalette.state-secondary,
|
|
border-color-today: MaterialPalette.accent-background,
|
|
foreground-today: MaterialPalette.accent-background,
|
|
state-brush-today: MaterialPalette.state-tertiary,
|
|
}
|
|
},
|
|
icon-button-style: {
|
|
foreground: MaterialPalette.foreground,
|
|
state-brush: MaterialPalette.state-default,
|
|
icon-size: 12px,
|
|
},
|
|
current-day-style: {
|
|
font-size: MaterialFontSettings.headline-large.font-size,
|
|
font-weight: MaterialFontSettings.headline-large.font-weight,
|
|
foreground: MaterialPalette.foreground,
|
|
},
|
|
title-style: {
|
|
font-size: MaterialFontSettings.label-medium.font-size,
|
|
font-weight: MaterialFontSettings.label-medium.font-weight,
|
|
foreground: MaterialPalette.foreground,
|
|
},
|
|
previous-icon: Icons.arrow-back,
|
|
next-icon: Icons.arrow-forward,
|
|
drop-down-icon: Icons.arrow-drop-down,
|
|
input-icon: Icons.edit,
|
|
calendar-icon: Icons.calendar,
|
|
selection-button-style: {
|
|
foreground: MaterialPalette.foreground,
|
|
state-brush: MaterialPalette.state-default,
|
|
icon-size: 10px,
|
|
font-size: MaterialFontSettings.label-large.font-size,
|
|
font-weight: MaterialFontSettings.label-large.font-weight
|
|
}
|
|
};
|
|
}
|
|
|
|
HorizontalLayout {
|
|
spacing: 8px;
|
|
padding-left: 8px;
|
|
padding-right: 8px;
|
|
|
|
Rectangle { }
|
|
|
|
Button {
|
|
text: root.cancel-text;
|
|
|
|
clicked => {
|
|
root.canceled();
|
|
}
|
|
}
|
|
|
|
Button {
|
|
text: root.ok-text;
|
|
enabled: base.ok-enabled();
|
|
|
|
clicked => {
|
|
root.accepted(base.get-current-date());
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|