| 1 | import QtQuick |
| 2 | import QtQuick.Layouts |
| 3 | |
| 4 | // label (+ optional hint) and an on/off box; the whole row is clickable (settings app) |
| 5 | Rectangle { |
| 6 | id: s |
| 7 | property string label: "" |
| 8 | property string hint: "" |
| 9 | property bool checked: false |
| 10 | signal toggled(bool on) |
| 11 | |
| 12 | Layout.fillWidth: true |
| 13 | implicitHeight: Math.max(30, txt.implicitHeight + 10) |
| 14 | color: m.containsMouse ? Theme.surface : "transparent" |
| 15 | |
| 16 | ColumnLayout { |
| 17 | id: txt |
| 18 | anchors.left: parent.left |
| 19 | anchors.right: box.left |
| 20 | anchors.rightMargin: 10 |
| 21 | anchors.verticalCenter: parent.verticalCenter |
| 22 | spacing: 0 |
| 23 | Text { |
| 24 | Layout.fillWidth: true |
| 25 | text: s.label |
| 26 | color: Theme.fg |
| 27 | elide: Text.ElideRight |
| 28 | font.family: Theme.font |
| 29 | font.pixelSize: Theme.fontSize |
| 30 | } |
| 31 | Text { |
| 32 | Layout.fillWidth: true |
| 33 | visible: s.hint !== "" |
| 34 | text: s.hint |
| 35 | color: Theme.dim |
| 36 | wrapMode: Text.WordWrap |
| 37 | font.family: Theme.font |
| 38 | font.pixelSize: Theme.fontSize - 2 |
| 39 | } |
| 40 | } |
| 41 | Rectangle { // the switch: square track, knob left (off) / right (on) |
| 42 | id: box |
| 43 | anchors.right: parent.right |
| 44 | anchors.verticalCenter: parent.verticalCenter |
| 45 | width: 36 |
| 46 | height: 18 |
| 47 | color: s.checked ? Theme.accent : Theme.surfaceHi |
| 48 | border.width: 1 |
| 49 | border.color: s.checked ? Theme.accent : Theme.line |
| 50 | Rectangle { |
| 51 | width: 12 |
| 52 | height: 12 |
| 53 | anchors.verticalCenter: parent.verticalCenter |
| 54 | x: s.checked ? parent.width - width - 3 : 3 |
| 55 | color: s.checked ? Theme.bg : Theme.dim |
| 56 | } |
| 57 | } |
| 58 | MouseArea { |
| 59 | id: m |
| 60 | anchors.fill: parent |
| 61 | hoverEnabled: true |
| 62 | cursorShape: Qt.PointingHandCursor |
| 63 | onClicked: s.toggled(!s.checked) |
| 64 | } |
| 65 | } |