| 1 | import QtQuick |
| 2 | |
| 3 | // Wide pill toggle (Wi-Fi, Bluetooth). On = white with black text, icon in a circle, name over a caps sub line. |
| 4 | // Click = toggle (`clicked`); the chevron or a right click = details (`menu`). |
| 5 | // Parts from glyph-rice (GPL-3.0), quick/Quick.qml (Pill). |
| 6 | Rectangle { |
| 7 | id: pill |
| 8 | |
| 9 | property bool on: false |
| 10 | property string icon |
| 11 | property string name |
| 12 | property string sub |
| 13 | property bool alert: false // sub line needs attention (captive portal): accent dot in front of it |
| 14 | signal clicked() |
| 15 | signal menu() |
| 16 | |
| 17 | implicitHeight: 76 |
| 18 | radius: height / 2 |
| 19 | color: on ? Theme.fill : body.containsMouse ? Theme.s3 : Theme.s2 |
| 20 | Behavior on color { enabled: Theme.motion; ColorAnimation { duration: Theme.t } } |
| 21 | |
| 22 | MouseArea { |
| 23 | id: body |
| 24 | anchors.fill: parent |
| 25 | hoverEnabled: true |
| 26 | cursorShape: Qt.PointingHandCursor |
| 27 | acceptedButtons: Qt.LeftButton | Qt.RightButton |
| 28 | onClicked: mouse => { if (mouse.button === Qt.RightButton) pill.menu(); else pill.clicked() } |
| 29 | } |
| 30 | |
| 31 | Rectangle { |
| 32 | id: ic |
| 33 | x: 12 |
| 34 | anchors.verticalCenter: parent.verticalCenter |
| 35 | width: 52 |
| 36 | height: 52 |
| 37 | radius: 26 |
| 38 | color: pill.on ? Theme.fillFg : Theme.s3 |
| 39 | Icon { anchors.centerIn: parent; text: pill.icon; font.pixelSize: 22; color: pill.on ? Theme.fill : Theme.fg } |
| 40 | } |
| 41 | Column { |
| 42 | anchors.left: ic.right |
| 43 | anchors.leftMargin: 12 |
| 44 | anchors.right: chev.left |
| 45 | anchors.verticalCenter: parent.verticalCenter |
| 46 | Text { |
| 47 | width: parent.width |
| 48 | elide: Text.ElideRight |
| 49 | text: pill.name |
| 50 | font.family: Theme.ui |
| 51 | font.pixelSize: 16 |
| 52 | font.weight: Font.DemiBold |
| 53 | color: pill.on ? Theme.fillFg : Theme.fg |
| 54 | } |
| 55 | Row { |
| 56 | width: parent.width |
| 57 | spacing: 6 |
| 58 | Rectangle { |
| 59 | visible: pill.alert |
| 60 | anchors.verticalCenter: parent.verticalCenter |
| 61 | width: 6 |
| 62 | height: 6 |
| 63 | radius: 3 |
| 64 | color: Theme.live |
| 65 | } |
| 66 | Text { |
| 67 | width: parent.width - (pill.alert ? 12 : 0) |
| 68 | elide: Text.ElideRight |
| 69 | text: pill.sub |
| 70 | font.family: Theme.mono |
| 71 | font.pixelSize: 11 |
| 72 | font.letterSpacing: 0.9 |
| 73 | font.capitalization: Font.AllUppercase |
| 74 | color: pill.on ? Theme.fillFg : Theme.fg |
| 75 | opacity: 0.6 |
| 76 | } |
| 77 | } |
| 78 | } |
| 79 | // the chevron has its own hit area on top: details without toggling the radio |
| 80 | Item { |
| 81 | id: chev |
| 82 | anchors.right: parent.right |
| 83 | width: 46 |
| 84 | height: parent.height |
| 85 | Icon { |
| 86 | anchors.centerIn: parent |
| 87 | anchors.horizontalCenterOffset: -6 |
| 88 | text: Theme.iChevron |
| 89 | font.pixelSize: 18 |
| 90 | color: pill.on ? Theme.fillFg : Theme.fg |
| 91 | opacity: cm.containsMouse ? 1 : 0.4 |
| 92 | } |
| 93 | MouseArea { |
| 94 | id: cm |
| 95 | anchors.fill: parent |
| 96 | hoverEnabled: true |
| 97 | cursorShape: Qt.PointingHandCursor |
| 98 | onClicked: pill.menu() |
| 99 | } |
| 100 | } |
| 101 | } |