mirror of
https://github.com/slint-ui/slint.git
synced 2025-10-28 10:49:46 +00:00
d89f8cfe17
Updated the `width` and `height` properties of `DatePickerPopup` and `TimePickerPopup` components to use dynamic sizing based on `dialog` dimensions instead of fixed pixel values. Previously, the lack of `width` and `height` in `TimePickerPopup` caused inconsistent placement when displayed at a specific location: - `DatePickerPopup` was centered on the given (x, y) - `TimePickerPopup` used its top-left corner as the anchor point Now both components consistently render centered at the specified (x, y). Fixes #9262
105 lines
3.9 KiB
Text
105 lines
3.9 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 "../common/layout.slint";
|
|
import { TextButton } from "./button.slint";
|
|
import { MaterialPalette, MaterialFontSettings, Icons } from "styling.slint";
|
|
|
|
import { Date, DatePickerBase } from "../common/datepicker_base.slint";
|
|
export { Date }
|
|
|
|
export component DatePickerPopup inherits PopupWindow {
|
|
in property <string> title: "Select date";
|
|
in property <Date> date <=> base.date;
|
|
|
|
callback canceled();
|
|
callback accepted(date: Date);
|
|
|
|
width: dialog.width;
|
|
height: dialog.height;
|
|
|
|
close-policy: PopupClosePolicy.no-auto-close;
|
|
|
|
background-layer := Rectangle {
|
|
width: dialog.width;
|
|
height: dialog.height;
|
|
background: MaterialPalette.surface-container-high;
|
|
border-radius: 28px;
|
|
}
|
|
|
|
dialog := Dialog {
|
|
padding: 8px;
|
|
|
|
base := DatePickerBase {
|
|
title: root.title;
|
|
style: {
|
|
border-brush: MaterialPalette.border,
|
|
vertical-spacing: 8px,
|
|
horizontal-spacing: 4px,
|
|
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
|
|
}
|
|
};
|
|
}
|
|
|
|
TextButton {
|
|
text: @tr("Cancel");
|
|
dialog-button-role: reject;
|
|
|
|
clicked => {
|
|
root.close();
|
|
root.canceled();
|
|
}
|
|
}
|
|
|
|
TextButton {
|
|
text: @tr("OK");
|
|
enabled: base.ok-enabled();
|
|
dialog-button-role: accept;
|
|
|
|
clicked => {
|
|
root.close();
|
|
root.accepted(base.get-current-date());
|
|
}
|
|
}
|
|
}
|
|
}
|