contents/ui/PulleyItem.qml

0001 /* Copyright 2016 Aditya Mehra <aix.m@outlook.com>
0002
0003     This library is free software; you can redistribute it and/or
0004     modify it under the terms of the GNU Lesser General Public
0005     License as published by the Free Software Foundation; either
0006     version 2.1 of the License, or (at your option) version 3, or any
0007     later version accepted by the membership of KDE e.V. (or its
0008     successor approved by the membership of KDE e.V.), which shall
0009     act as a proxy defined in Section 6 of version 3 of the license.
0010
0011     This library is distributed in the hope that it will be useful,
0012     but WITHOUT ANY WARRANTY; without even the implied warranty of
0013     MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
0014     Lesser General Public License for more details.
0015
0016     You should have received a copy of the GNU Lesser General Public
0017     License along with this library.  If not, see <http://www.gnu.org/licenses/>.
0018 */
0019
0020
0021 import QtQuick 2.9
0022 import org.kde.plasma.core 2.0 as PlasmaCore
0023 import org.kde.plasma.components 2.0 as PlasmaComponents
0024 import org.kde.plasma.extras 2.0 as PlasmaExtras
0025 import QtGraphicalEffects 1.0
0026
0027 Item {
0028  id: pulleyFrame
0029  anchors.fill: parent
0030  anchors.topMargin: units.gridUnit * 0.05
0031  anchors.bottomMargin: units.gridUnit * 0.02
0032  property bool opened: state === "PulleyExpanded"
0033  property bool closed: state === "PulleyClosed"
0034  property bool _isVisible
0035  property var barColor
0036  signal pulleyExpanded()
0037  signal pulleyClosed()
0038
0039  function open() {
0040      pulleyFrame.state = "PulleyExpanded";
0041      pulleyExpanded();
0042  }
0043
0044  function close() {
0045      pulleyFrame.state = "PulleyClosed";
0046      pulleyListView.positionViewAtBeginning()
0047      pulleyClosed();
0048  }
0049
0050  states: [
0051      State {
0052          name: "PulleyExpanded"
0053          PropertyChanges { target: pulleyMenu; height: pulleyFrame.height - pulleyIconBar.height; }
0054          PropertyChanges { target: pulleyListView; interactive: true; }
0055          PropertyChanges { target: menudrawIcon; source: "go-down";}
0056      },
0057      State {
0058          name: "PulleyClosed"
0059          PropertyChanges { target: pulleyMenu; height: 0; }
0060          PropertyChanges { target: pulleyListView; interactive: false; }
0061          PropertyChanges { target: menudrawIcon; source: "go-up";}
0062      }
0063     ]
0064
0065
0066  transitions: [
0067      Transition {
0068          to: "*"
0069          NumberAnimation { target: pulleyMenu; properties: "height"; duration: 450; easing.type: Easing.OutCubic; }
0070      }
0071     ]
0072
0073     Rectangle {
0074       id: pulleyIconBar
0075       anchors.bottom: pulleyMenu.top
0076       anchors.bottomMargin: 4
0077       height: units.gridUnit * 0.40
0078       color: barColor
0079       width: cbwidth
0080         PlasmaCore.IconItem {
0081                 id: menudrawIcon
0082                 visible: _isVisible
0083                 anchors.centerIn: parent
0084                 source: "go-up"
0085                 width: units.gridUnit * 1.25
0086                 height: units.gridUnit * 1.25
0087             }
0088
0089         MouseArea{
0090             anchors.fill: parent
0091             propagateComposedEvents: true
0092             onClicked: {
0093                 if (pulleyFrame.opened) {
0094                     pulleyFrame.close();
0095                 } else {
0096                     pulleyFrame.open();
0097                 }
0098             }
0099         }
0100     }
0101
0102     Rectangle {
0103         id: pulleyMenu
0104         width: parent.width
0105         color: PlasmaCore.ColorScope.backgroundColor
0106         anchors.bottom: parent.bottom
0107         height: 0
0108
0109         ListView {
0110             id: pulleyListView
0111             width: parent.width
0112             anchors.top: parent.top
0113             anchors.bottom: pulleyEndArea.bottom
0114             model: SkillModel{}
0115             clip: true
0116             interactive: false;
0117             spacing: 5
0118             delegate:
0119                 Rectangle {
0120                 id: pulleyDelegateListBg
0121                 height: units.gridUnit * 2.5
0122                 color: Qt.darker(PlasmaCore.ColorScope.backgroundColor, 1.2)
0123                 radius: 4
0124                 anchors.left: parent.left
0125                 anchors.right: parent.right
0126                 anchors.leftMargin: units.gridUnit * 0.50
0127                 anchors.rightMargin: units.gridUnit * 0.50
0128                 layer.enabled: true
0129                 layer.effect: DropShadow {
0130                     horizontalOffset: 0
0131                     verticalOffset: 1
0132                     radius: 10
0133                     samples: 32
0134                     spread: 0.1
0135                     color: Qt.rgba(0, 0, 0, 0.3)
0136                 }
0137
0138                 MouseArea {
0139                     anchors.fill: parent
0140                     hoverEnabled: true
0141                     propagateComposedEvents: true
0142
0143                     onEntered: {
0144                         removeItemButton.visible = true
0145                         pulleyDelegateListBg.color = theme.linkColor
0146                     }
0147                     onExited: {
0148                         removeItemButton.visible = false
0149                         pulleyDelegateListBg.color = Qt.darker(PlasmaCore.ColorScope.backgroundColor, 1.2)
0150                     }
0151                     onClicked: {
0152                         pulleyFrame.close();
0153                         var genExampleQuery = CommandList.get(0).Commands;
0154                         var exampleQuery = genExampleQuery.toString().split(",");
0155                         var socketmessage = {};
0156                         socketmessage.type = "recognizer_loop:utterance";
0157                         socketmessage.data = {};
0158                         socketmessage.data.utterances = [exampleQuery[1].toLowerCase()];
0159                         socket.sendTextMessage(JSON.stringify(socketmessage));
0160                         qinput.text = "";
0161                         }
0162                 }
0163
0164             PlasmaCore.IconItem {
0165                 id: removeItemButton
0166                 source: "window-close"
0167                 width: units.gridUnit * 1.5
0168                 height: units.gridUnit * 1.5
0169                 anchors.verticalCenter: parent.verticalCenter
0170                 anchors.right: parent.right
0171                 anchors.rightMargin: units.gridUnit * 0.50
0172                 visible: false
0173
0174                 MouseArea {
0175                     anchors.fill: parent
0176                     hoverEnabled: true
0177                     propagateComposedEvents: true
0178                     onEntered: {
0179                         removeItemButton.visible = true
0180                     }
0181                     onClicked: {
0182                         SkillModel.remove(index)
0183                     }
0184                 }
0185             }
0186
0187                 PlasmaComponents.Label {
0188                 id: pulleyDelegateListLabel
0189                 anchors.centerIn: parent
0190                     text: CommandList.get(0).Commands
0191                     color: PlasmaCore.ColorScope.textColor
0192
0193                     }
0194                 }
0195             }
0196
0197          Item {
0198                 id: pulleyEndArea
0199                 anchors.bottom: parent.bottom
0200                 anchors.bottomMargin: units.gridUnit * 1.22
0201                 width: parent.width
0202                 height: units.gridUnit * 2.5
0203             }
0204         }
0205     }