skill-example/ui/exampleMenu.qml

0001 import QtQuick.Layouts 1.4
0002 import QtQuick 2.4
0003 import QtQuick.Controls 2.0
0004 import org.kde.kirigami 2.5 as Kirigami
0005 import org.kde.plasma.core 2.0 as PlasmaCore
0006 import Mycroft 1.0 as Mycroft
0007
0008 Mycroft.Delegate {
0009     id: exampleMenuView
0010     property var exampleModel: sessionData.menuBlob.menuItems
0011
0012     Component.onCompleted: {
0013         console.log(sessionData.menuBlob)
0014     }
0015
0016     Item {
0017         id: topArea
0018         anchors.left: parent.left
0019         anchors.right: parent.right
0020         anchors.top: parent.top
0021         height: Kirigami.Units.gridUnit * 2
0022
0023         Kirigami.Heading {
0024             id: examplePageTextHeading
0025             level: 1
0026             wrapMode: Text.WordWrap
0027             anchors.centerIn: parent
0028             font.bold: true
0029             text: "GUI Examples"
0030             color: Kirigami.Theme.linkColor
0031         }
0032     }
0033
0034     Item {
0035         anchors.top: topArea.bottom
0036         anchors.topMargin: Kirigami.Units.largeSpacing
0037         anchors.left: parent.left
0038         anchors.right: parent.right
0039         anchors.bottom: areaSep.top
0040         anchors.bottomMargin: Kirigami.Units.largeSpacing
0041
0042         ListView {
0043             anchors.fill: parent
0044             clip: true
0045             model: exampleModel
0046             boundsBehavior: Flickable.StopAtBounds
0047             delegate: Kirigami.AbstractListItem {
0048                 contentItem: Item {
0049                 implicitWidth: delegateLayout.implicitWidth;
0050                 implicitHeight: delegateLayout.implicitHeight;
0051
0052                     ColumnLayout {
0053                         id: delegateLayout
0054                         anchors {
0055                             left: parent.left;
0056                             top: parent.top;
0057                             right: parent.right;
0058                         }
0059
0060                         RowLayout {
0061                             Layout.fillWidth: true
0062                             spacing: Math.round(units.gridUnit / 2)
0063
0064                             Kirigami.Icon {
0065                                 id: exampleMenuItemIcon
0066                                 Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
0067                                 Layout.preferredHeight: units.iconSizes.medium
0068                                 Layout.preferredWidth: units.iconSizes.medium
0069                                 source: modelData.exampleIcon
0070                             }
0071
0072
0073                             Kirigami.Heading {
0074                                 id: exampleMenuItemLabel
0075                                 Layout.fillWidth: true
0076                                 Layout.alignment: Qt.AlignHCenter
0077                                 height: paintedHeight
0078                                 elide: Text.ElideRight
0079                                 font.weight: Font.DemiBold
0080                                 text: modelData.exampleLabel
0081                                 textFormat: Text.PlainText
0082                                 level: 2
0083                             }
0084                         }
0085                     }
0086                 }
0087
0088                 onClicked: {
0089                         triggerEvent(modelData.exampleEvent, {})
0090                 }
0091             }
0092         }
0093     }
0094
0095     Kirigami.Separator {
0096         id: areaSep
0097         anchors.bottom: bottomArea.top
0098         anchors.left: parent.left
0099         anchors.right: parent.right
0100         height: 1
0101     }
0102
0103     Item {
0104         id: bottomArea
0105         anchors.left: parent.left
0106         anchors.right: parent.right
0107         anchors.bottom: parent.bottom
0108         anchors.bottomMargin: Kirigami.Units.largeSpacing * 1.15
0109         height: backIcon.implicitHeight + Kirigami.Units.largeSpacing * 1.15
0110
0111         RowLayout {
0112             anchors.fill: parent
0113
0114             Kirigami.Icon {
0115                 id: backIcon
0116                 source: "go-previous"
0117                 Layout.preferredHeight: Kirigami.Units.iconSizes.medium
0118                 Layout.preferredWidth: Kirigami.Units.iconSizes.medium
0119             }
0120
0121             Kirigami.Heading {
0122                 level: 2
0123                 wrapMode: Text.WordWrap
0124                 font.bold: true
0125                 text: "Home"
0126                 Layout.fillWidth: true
0127                 Layout.preferredHeight: Kirigami.Units.gridUnit * 2
0128             }
0129         }
0130
0131         MouseArea {
0132             anchors.fill: parent
0133             onClicked: {
0134                 triggerEvent("mycroft.device.show.idle", {})
0135             }
0136         }
0137     }
0138 }