mirror of
https://github.com/slint-ui/slint.git
synced 2025-10-26 09:58:04 +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
103 lines
3.8 KiB
Text
103 lines
3.8 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 { Button } from "./button.slint";
|
|
import { FluentPalette, FluentFontSettings, Icons } from "styling.slint";
|
|
import { MenuBorder } from "./components.slint";
|
|
import { StandardButton } from "../common/standardbutton.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 := MenuBorder {
|
|
width: dialog.width;
|
|
height: dialog.height;
|
|
}
|
|
|
|
dialog := Dialog {
|
|
padding: 8px;
|
|
|
|
base := DatePickerBase {
|
|
title: root.title;
|
|
style: {
|
|
border-brush: FluentPalette.border,
|
|
vertical-spacing: 8px,
|
|
horizontal-spacing: 4px,
|
|
calendar-style: {
|
|
spacing: 8px,
|
|
delegate-style: {
|
|
font-size: FluentFontSettings.body-strong.font-size,
|
|
font-weight: FluentFontSettings.body-strong.font-weight,
|
|
foreground: FluentPalette.foreground,
|
|
state-brush: FluentPalette.state,
|
|
background-selected: FluentPalette.accent-background,
|
|
foreground-selected: FluentPalette.accent-foreground,
|
|
state-brush-selected: FluentPalette.state-secondary,
|
|
border-color-today: FluentPalette.accent-background,
|
|
foreground-today: FluentPalette.accent-background,
|
|
state-brush-today: FluentPalette.state,
|
|
}
|
|
},
|
|
icon-button-style: {
|
|
foreground: FluentPalette.foreground,
|
|
state-brush: FluentPalette.state,
|
|
icon-size: 12px,
|
|
},
|
|
current-day-style: {
|
|
font-size: FluentFontSettings.title.font-size,
|
|
font-weight: FluentFontSettings.title.font-weight,
|
|
foreground: FluentPalette.foreground,
|
|
},
|
|
title-style: {
|
|
font-size: FluentFontSettings.body.font-size,
|
|
font-weight: FluentFontSettings.body.font-weight,
|
|
foreground: FluentPalette.foreground,
|
|
},
|
|
previous-icon: Icons.arrow-back,
|
|
next-icon: Icons.arrow-forward,
|
|
drop-down-icon: Icons.dropdown,
|
|
input-icon: Icons.edit,
|
|
calendar-icon: Icons.calendar,
|
|
selection-button-style: {
|
|
foreground: FluentPalette.foreground,
|
|
state-brush: FluentPalette.state,
|
|
icon-size: 8px,
|
|
font-size: FluentFontSettings.body.font-size,
|
|
font-weight: FluentFontSettings.body.font-weight
|
|
}
|
|
};
|
|
}
|
|
|
|
StandardButton {
|
|
kind: cancel;
|
|
|
|
clicked => {
|
|
root.close();
|
|
root.canceled();
|
|
}
|
|
}
|
|
|
|
StandardButton {
|
|
enabled: base.ok-enabled();
|
|
kind: ok;
|
|
|
|
clicked => {
|
|
root.close();
|
|
root.accepted(base.get-current-date());
|
|
}
|
|
}
|
|
}
|
|
}
|