ui/components/ModeRocker.qml

0001 /*
0002  * Copyright 2019 Eike Hein <hein@kde.org>
0003  *
0004  * This program is free software; you can redistribute it and/or
0005  * modify it under the terms of the GNU General Public License as
0006  * published by the Free Software Foundation; either version 2 of
0007  * the License or (at your option) version 3 or any later version
0008  * accepted by the membership of KDE e.V. (or its successor approved
0009  * by the membership of KDE e.V.), which shall act as a proxy
0010  * defined in Section 14 of version 3 of the license.
0011  *
0012  * This program is distributed in the hope that it will be useful,
0013  * but WITHOUT ANY WARRANTY; without even the implied warranty of
0014  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
0015  * GNU General Public License for more details.
0016  *
0017  * You should have received a copy of the GNU General Public License
0018  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
0019  */
0020
0021 import QtQuick 2.12
0022 import QtQuick.Window 2.12
0023 import QtQuick.Controls 2.12 as QQC2
0024
0025 import org.kde.kirigami 2.6 as Kirigami
0026
0027 PillBox {
0028     id: modeRocker
0029
0030     signal modeTapped(int mode)
0031
0032     property int selectedMode: -1
0033     property bool showLabels: true
0034     property bool showIcons: false
0035
0036     property string firstToolTipText: ""
0037     property string secondToolTipText: ""
0038
0039     property alias firstLabelText: firstLabel.text
0040     property alias firstIconSource: firstIcon.source
0041
0042     property alias secondLabelText: secondLabel.text
0043     property alias secondIconSource: secondIcon.source
0044
0045     property alias firstModeEnabled: firstRow.enabled
0046     property alias secondModeEnabled: secondRow.enabled
0047
0048     property Item foo: foo
0049
0050     implicitWidth: contents.implicitWidth + Kirigami.Units.largeSpacing * 4
0051     height: Math.max(Kirigami.Units.iconSizes.small, fontMetrics.height) + Kirigami.Units.largeSpacing * 2
0052
0053     Kirigami.Theme.colorSet: Kirigami.Theme.Button
0054
0055     Row {
0056         id: contents
0057
0058         x: Kirigami.Units.largeSpacing * 2
0059
0060         height: parent.height
0061
0062         spacing: Kirigami.Units.largeSpacing
0063
0064         Item {
0065             id: foo
0066
0067             width: childrenRect.width
0068             height: childrenRect.height
0069         }
0070
0071         Row {
0072             id: firstRow
0073
0074             height: parent.height
0075
0076             property alias hovered: firstHoverHandler.hovered
0077
0078             spacing: Kirigami.Units.largeSpacing
0079
0080             Kirigami.Icon {
0081                 id: firstIcon
0082
0083                 visible: modeRocker.showIcons && source
0084
0085                 anchors.verticalCenter: parent.verticalCenter
0086
0087                 width: visible ? Kirigami.Units.iconSizes.small : 0
0088                 height: width
0089
0090                 color: (firstHoverHandler.hovered ? Kirigami.Theme.hoverColor
0091                     : ((modeRocker.selectedMode == 0) ? Kirigami.Theme.highlightColor : "white"))
0092                 smooth: true
0093                 isMask: true
0094
0095                 Behavior on color { ColorAnimation { duration: Kirigami.Units.shortDuration } }
0096             }
0097
0098             QQC2.Label {
0099                 id: firstLabel
0100
0101                 visible: modeRocker.showLabels && text
0102
0103                 anchors.verticalCenter: parent.verticalCenter
0104
0105                 width: visible ? Math.max(Math.round(firstLabel.paintedWidth), Math.round(secondLabel.paintedWidth)) : 0
0106
0107                 font.bold: true
0108                 color: (firstHoverHandler.hovered ? Kirigami.Theme.hoverColor
0109                     : ((modeRocker.selectedMode == 0) ? Kirigami.Theme.highlightColor : "white"))
0110
0111                 horizontalAlignment: Text.AlignHCenter
0112
0113                 Behavior on color { ColorAnimation { duration: Kirigami.Units.shortDuration } }
0114             }
0115
0116             HoverHandler {
0117                 id: firstHoverHandler
0118             }
0119
0120             TapHandler {
0121                 id: firstTapHandler
0122
0123                 enabled: !page.touched
0124
0125                 gesturePolicy: TapHandler.ReleaseWithinBounds
0126
0127                 onTapped: modeRocker.modeTapped(0)
0128             }
0129
0130             QQC2.ToolTip.visible: modeRocker.visible && firstHoverHandler.hovered && !firstTapHandler.pressed
0131             QQC2.ToolTip.delay: Kirigami.Units.toolTipDelay
0132             QQC2.ToolTip.text: firstToolTipText
0133         }
0134
0135         PillBoxSeparator {}
0136
0137         Row {
0138             id: secondRow
0139
0140             height: parent.height
0141
0142             property alias hovered: secondHoverHandler.hovered
0143
0144             spacing: Kirigami.Units.largeSpacing
0145
0146             Kirigami.Icon {
0147                 id: secondIcon
0148
0149                 visible: firstIcon.visible
0150
0151                 anchors.verticalCenter: parent.verticalCenter
0152
0153                 width: firstIcon.width
0154                 height: width
0155
0156                 color: (secondHoverHandler.hovered ? Kirigami.Theme.hoverColor
0157                     : ((modeRocker.selectedMode == 1) ? Kirigami.Theme.highlightColor : "white"))
0158                 smooth: true
0159                 isMask: true
0160
0161                 Behavior on color { ColorAnimation { duration: Kirigami.Units.shortDuration } }
0162             }
0163
0164             QQC2.Label {
0165                 id: secondLabel
0166
0167                 visible: firstLabel.visible
0168
0169                 anchors.verticalCenter: parent.verticalCenter
0170
0171                 width: firstLabel.width
0172
0173                 font.bold: true
0174                 color: (secondHoverHandler.hovered ? Kirigami.Theme.hoverColor
0175                     : ((modeRocker.selectedMode == 1) ? Kirigami.Theme.highlightColor : "white"))
0176
0177                 horizontalAlignment: Text.AlignHCenter
0178
0179                 Behavior on color { ColorAnimation { duration: Kirigami.Units.shortDuration } }
0180             }
0181
0182             HoverHandler {
0183                 id: secondHoverHandler
0184             }
0185
0186             TapHandler {
0187                 id: secondTapHandler
0188
0189                 enabled: !page.touched
0190
0191                 gesturePolicy: TapHandler.ReleaseWithinBounds
0192
0193                 onTapped: modeRocker.modeTapped(1)
0194             }
0195
0196             QQC2.ToolTip.visible: modeRocker.visible && secondHoverHandler.hovered && !secondTapHandler.pressed
0197             QQC2.ToolTip.delay: Kirigami.Units.toolTipDelay
0198             QQC2.ToolTip.text: secondToolTipText
0199         }
0200     }
0201
0202     Component.onCompleted: (x = globalDrawer.modal
0203         ? (globalDrawer.handle.x + globalDrawer.handle.width + leftPillBox.y) : leftPillBox.y)
0204 }