90 lines
3.2 KiB
Plaintext
90 lines
3.2 KiB
Plaintext
|
|
struct ButtonColors {
|
|
base: color,
|
|
pressed: color,
|
|
hovered: color,
|
|
}
|
|
export global DemoPalette {
|
|
// Color of the home/settings/ink buttons on the left side bar
|
|
out property <color> active-page-icon-color: root.night-mode ? #6284FF : #122F7B;
|
|
out property <color> inactive-page-icon-color: #BDC0D1;
|
|
|
|
out property <color> main-background: #0E133F;
|
|
out property <color> neutral-box: #BDC0D1;
|
|
|
|
out property <color> page-background-color: root.night-mode ? #122F7B : white;
|
|
|
|
out property <color> text-foreground-color: root.night-mode ? #F4F6FF : black;
|
|
out property <color> secondary-foreground-color: root.night-mode ? #C1C3CA : #6C6E7A;
|
|
|
|
out property <color> printer-action-background-color: root.night-mode ? root.main-background : white;
|
|
out property <color> printer-queue-item-background-color: root.page-background-color;
|
|
|
|
out property <color> status-label-text-color: root.night-mode ? #F1FF98 : #6284FF;
|
|
|
|
// Color used for the border / outline of items that can be clicked on, such as the
|
|
// "Print"/"Scan" buttons, the printer queue items (for expansion) or controls such
|
|
// as the combo box or spin box.
|
|
out property <color> control-outline-color: #FFBF63;
|
|
out property <color> control-secondary: #6284FF;
|
|
out property <color> control-foreground: root.night-mode ? white : #122F7B; // FIXME: the night mode color was not part of the design
|
|
|
|
out property <color> primary-push-button-base: #6284FF;
|
|
out property <ButtonColors> primary-push-button-colors: {
|
|
base: root.primary-push-button-base,
|
|
pressed: root.primary-push-button-base.darker(40%),
|
|
hovered: root.primary-push-button-base.darker(20%),
|
|
};
|
|
|
|
out property <color> secondary-push-button-base: #FFBF63;
|
|
out property <ButtonColors> secondary-push-button-colors: {
|
|
base: root.secondary-push-button-base,
|
|
pressed: root.secondary-push-button-base.darker(40%),
|
|
hovered: root.secondary-push-button-base.darker(20%),
|
|
};
|
|
|
|
|
|
out property <color> push-button-text-color: white;
|
|
|
|
out property <length> base-font-size: 16px;
|
|
|
|
in property <bool> night-mode: false;
|
|
}
|
|
|
|
export component Page inherits Rectangle {
|
|
in property<string> header <=> h.text;
|
|
// background: DemoPalette.page-background-color;
|
|
in property <bool> has-back-button: false;
|
|
callback back;
|
|
|
|
TouchArea {} // protect underneath controls
|
|
|
|
if (root.has-back-button) : Image {
|
|
x:0;
|
|
source: @image-url("images/back.svg");
|
|
image-fit: contain;
|
|
colorize: DemoPalette.control-secondary;
|
|
y: h.y + (h.height - self.height) / 2;
|
|
width: 14px;
|
|
height: 24px;
|
|
TouchArea {
|
|
x:0;
|
|
clicked => { root.back() }
|
|
width: 150%;
|
|
}
|
|
}
|
|
|
|
h := Text {
|
|
font-weight: 900;
|
|
font-size: DemoPalette.base-font-size * 2;
|
|
color: DemoPalette.text-foreground-color;
|
|
y: 46px - self.font-size;
|
|
x: root.has-back-button ? 24px + 16px : 0px;
|
|
// Allow clicking on the title as well to get back easier when just
|
|
// using fingers on a small screen.
|
|
if (root.has-back-button) : TouchArea {
|
|
clicked => { root.back() }
|
|
}
|
|
}
|
|
}
|