95 lines
3.1 KiB
QML
95 lines
3.1 KiB
QML
// A setting whose value is chosen from far more options than belong on screen.
|
|
//
|
|
// PickerRow {
|
|
// label: "Language"
|
|
// value: SystemLocale.currentLabel
|
|
// SearchPicker { items: SystemLocale.locales; onPicked: ... }
|
|
// }
|
|
//
|
|
// Three pages rendered an entire dataset as rows -- every installed locale, the
|
|
// whole tz database, every mode a monitor advertises -- so the one line telling
|
|
// you what is currently set was buried under hundreds that were not. The chooser
|
|
// itself was never the problem and is unchanged: this only collapses it behind
|
|
// the current value, which is what a person came to the page to read.
|
|
//
|
|
// Collapsed by default, and closes again once something is picked, so the page
|
|
// returns to being readable rather than staying open on a list nobody needs any
|
|
// more.
|
|
|
|
import QtQuick
|
|
import qs.config
|
|
|
|
Column {
|
|
id: root
|
|
|
|
property string label: ""
|
|
property string detail: ""
|
|
// What is set right now. Shown on the collapsed row, so the common case --
|
|
// looking rather than changing -- needs no interaction at all.
|
|
property string value: ""
|
|
property bool enabled: true
|
|
property bool divider: true
|
|
property bool expanded: false
|
|
|
|
default property alias content: body.data
|
|
|
|
// Pages call this from their picker's onPicked, so choosing something puts
|
|
// the list away instead of leaving it open over the rest of the page.
|
|
function collapse(): void { root.expanded = false; }
|
|
|
|
width: parent ? parent.width : 620
|
|
spacing: 0
|
|
|
|
SettingRow {
|
|
width: parent.width
|
|
label: root.label
|
|
detail: root.detail
|
|
activatable: root.enabled
|
|
divider: root.divider && !root.expanded
|
|
opacity: root.enabled ? 1 : 0.5
|
|
controlWidth: 210
|
|
onActivated: root.expanded = !root.expanded
|
|
|
|
// The collapsed row is already a Tab stop and already activates on
|
|
// Space through SettingRow; what it cannot say for itself is that it
|
|
// opens a list, and which value that list is currently sitting on.
|
|
activeFocusOnTab: root.enabled
|
|
|
|
Accessible.role: Accessible.ComboBox
|
|
Accessible.name: root.label
|
|
Accessible.description: root.detail === ""
|
|
? root.value
|
|
: `${root.detail} — ${root.value}`
|
|
|
|
Row {
|
|
anchors.right: parent.right
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
spacing: 9
|
|
|
|
Text {
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
text: root.value
|
|
color: Theme.fgDim
|
|
font.family: Theme.fontFamily
|
|
font.features: Theme.tabularFigures
|
|
font.pixelSize: Theme.fontSize
|
|
elide: Text.ElideRight
|
|
}
|
|
|
|
Text {
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
text: root.expanded ? "▴" : "▾"
|
|
color: Theme.fgMuted
|
|
font.family: Theme.fontFamily
|
|
font.pixelSize: Theme.fontSizeSmall
|
|
}
|
|
}
|
|
}
|
|
|
|
Column {
|
|
id: body
|
|
width: parent.width
|
|
visible: root.expanded
|
|
}
|
|
}
|