mirror of
https://github.com/kunkundi/crossdesk.git
synced 2026-10-17 01:13:19 +08:00
79 lines
3.2 KiB
Plaintext
79 lines
3.2 KiB
Plaintext
import { UiRadius } from "ui_radius.slint";
|
|
import { CompactComboBox, ToggleSwitch } from "common.slint";
|
|
import { WorkbenchStyle } from "workbench_controls.slint";
|
|
|
|
// Shared visual treatment for the global settings pages.
|
|
export component SettingsButton inherits Rectangle {
|
|
in property <string> text;
|
|
in property <bool> primary: false;
|
|
in property <bool> quiet: false;
|
|
in property <bool> align-left: false;
|
|
in property <bool> enabled: true;
|
|
callback clicked();
|
|
width: 88px; height: 32px; border-radius: UiRadius.control;
|
|
background: !root.enabled ? #f0f3f7
|
|
: root.primary ? (touch.pressed ? #1e4fa3 : touch.has-hover ? #2866c9 : #3275dc)
|
|
: touch.pressed ? #e9eef5 : touch.has-hover ? #f0f4fa : root.quiet ? transparent : white;
|
|
border-width: root.quiet || root.primary ? 0px : 1px;
|
|
border-color: !root.enabled ? WorkbenchStyle.border
|
|
: touch.has-hover ? WorkbenchStyle.hover-border : WorkbenchStyle.control-border;
|
|
accessible-role: button; accessible-label: root.text;
|
|
accessible-action-default => { if root.enabled { root.clicked(); } }
|
|
Text {
|
|
x: 12px; width: parent.width - 24px;
|
|
text: root.text; font-size: 12px; font-weight: root.primary ? 600 : 400;
|
|
color: !root.enabled ? #98a2b3 : root.primary ? white : root.quiet ? #65758b : #3c4d63;
|
|
horizontal-alignment: root.align-left ? left : center; vertical-alignment: center; overflow: elide;
|
|
}
|
|
touch := TouchArea { enabled: root.enabled; mouse-cursor: pointer; clicked => { root.clicked(); } }
|
|
}
|
|
|
|
export component SettingsSelect inherits CompactComboBox {
|
|
subtle: true;
|
|
show-arrow: false;
|
|
normal-border-color: WorkbenchStyle.control-border;
|
|
hover-border-color: WorkbenchStyle.hover-border;
|
|
height: 28px;
|
|
}
|
|
|
|
export component SettingsGroup inherits Rectangle {
|
|
in property <string> title;
|
|
in property <int> rows: 1;
|
|
height: 24px + root.rows * 36px;
|
|
Text {
|
|
x: 2px; y: 0px; width: parent.width - 4px; height: 18px; text: root.title;
|
|
font-size: 11px; font-weight: 600; color: #718096; vertical-alignment: center;
|
|
}
|
|
Rectangle {
|
|
y: 24px; width: parent.width; height: parent.height - self.y;
|
|
background: white; border-radius: UiRadius.surface; border-color: WorkbenchStyle.border; border-width: 1px;
|
|
VerticalLayout { padding: 0px; spacing: 0px; @children }
|
|
}
|
|
}
|
|
|
|
export component SettingsRow inherits Rectangle {
|
|
in property <string> label;
|
|
in property <bool> enabled: true;
|
|
in property <bool> divider: true;
|
|
in property <length> label-reserve: 128px;
|
|
height: 36px;
|
|
Text {
|
|
x: 12px; width: parent.width - root.label-reserve; height: parent.height;
|
|
text: root.label; color: root.enabled ? #34445a : #9ba5b3;
|
|
font-size: 12px; overflow: elide; vertical-alignment: center;
|
|
}
|
|
if root.divider: Rectangle {
|
|
x: 12px; y: parent.height - 1px; width: parent.width - 24px; height: 1px; background: #d9e1ec;
|
|
}
|
|
@children
|
|
}
|
|
|
|
export component SettingsToggleRow inherits SettingsRow {
|
|
in-out property <bool> checked;
|
|
label-reserve: 64px;
|
|
ToggleSwitch {
|
|
x: parent.width - self.width - 12px; y: (parent.height - self.height) / 2;
|
|
checked <=> root.checked; enabled: root.enabled;
|
|
}
|
|
}
|