Remove hard-coded sizes from date and time picker popups

Use the layout and position the popup centered relative to its parent.
This commit is contained in:
Simon Hausmann 2024-07-09 22:31:00 +02:00 committed by Simon Hausmann
parent 419042f476
commit c81ab5cd6d
6 changed files with 19 additions and 36 deletions

View file

@ -229,17 +229,12 @@ export component ControlsPage inherits Page {
}
time-picker := TimePickerPopup {
x: (root.width - 340px) / 2;
y: (root.height - 500px) / 2;
width: 340px;
height: 500px;
x: (root.width - self.width) / 2;
y: (root.height - self.height) / 2;
}
date-picker := DatePickerPopup {
x: (root.width - 360px) / 2;
y: (root.height - 360px) / 2;
width: 360px;
height: 524px;
x: (root.width - self.width) / 2;
y: (root.height - self.height) / 2;
}
}

View file

@ -18,12 +18,10 @@ export component TimePickerPopup inherits PopupWindow {
callback canceled();
callback accepted(/* current-time */ Time);
width: 340px;
height: 500px;
close-on-click: false;
background-layer := MenuBorder {
background-layer := MenuBorder {
width: dialog.width;
height: dialog.height;
}
@ -75,7 +73,7 @@ export component TimePickerPopup inherits PopupWindow {
},
};
}
Button {
icon: base.selection-mode ? Icons.keyboard : Icons.clock;
colorize-icon: true;
@ -86,7 +84,7 @@ export component TimePickerPopup inherits PopupWindow {
base.selection-mode = !base.selection-mode;
}
}
StandardButton {
kind: cancel;

View file

@ -17,12 +17,10 @@ export component TimePickerPopup inherits PopupWindow {
callback canceled();
callback accepted(/* current-time */ Time);
width: 340px;
height: 500px;
close-on-click: false;
background-layer := MenuBorder {
background-layer := MenuBorder {
width: dialog.width;
height: dialog.height;
}
@ -68,9 +66,9 @@ export component TimePickerPopup inherits PopupWindow {
}
},
title-style: {
font-size: CupertinoFontSettings.body.font-size,
font-weight: CupertinoFontSettings.body.font-weight,
foreground: CupertinoPalette.foreground,
font-size: CupertinoFontSettings.body.font-size,
font-weight: CupertinoFontSettings.body.font-weight,
foreground: CupertinoPalette.foreground,
},
};
}

View file

@ -18,18 +18,15 @@ export component TimePickerPopup inherits PopupWindow {
callback canceled();
callback accepted(/* current-time */ Time);
width: 340px;
height: 500px;
close-on-click: false;
background-layer := MenuBorder {
background-layer := MenuBorder {
width: dialog.width;
height: dialog.height;
}
dialog := Dialog {
padding: 8px;
base := TimePickerBase {
title: root.title;
style: {
@ -74,7 +71,7 @@ export component TimePickerPopup inherits PopupWindow {
},
};
}
Button {
icon: base.selection-mode ? Icons.keyboard : Icons.clock;
colorize-icon: true;
@ -85,7 +82,7 @@ export component TimePickerPopup inherits PopupWindow {
base.selection-mode = !base.selection-mode;
}
}
StandardButton {
kind: cancel;

View file

@ -17,10 +17,8 @@ export component TimePickerPopup inherits PopupWindow {
callback canceled();
callback accepted(/* current-time */ Time);
width: 340px;
height: 500px;
close-on-click: false;
background-layer := Rectangle {
width: dialog.width;
height: dialog.height;
@ -30,7 +28,7 @@ export component TimePickerPopup inherits PopupWindow {
dialog := Dialog {
padding: 8px;
base := TimePickerBase {
title: root.title;
style: {
@ -76,7 +74,6 @@ export component TimePickerPopup inherits PopupWindow {
};
}
IconButton {
icon: base.selection-mode ? Icons.keyboard : Icons.clock;
accessible-label: "Toggle input picker";
@ -86,7 +83,7 @@ export component TimePickerPopup inherits PopupWindow {
base.selection-mode = !base.selection-mode;
}
}
TextButton {
text: @tr("Cancel");
dialog-button-role: reject;

View file

@ -18,8 +18,6 @@ export component TimePickerPopup inherits PopupWindow {
callback canceled();
callback accepted(/* current-time */ Time);
width: 340px;
height: 500px;
close-on-click: false;
background-layer := Rectangle {