diff --git a/containments/taskpanel/package/contents/ui/Button.qml b/containments/taskpanel/package/contents/ui/Button.qml index aac2e3a5..9890faa3 100644 --- a/containments/taskpanel/package/contents/ui/Button.qml +++ b/containments/taskpanel/package/contents/ui/Button.qml @@ -16,7 +16,7 @@ * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 2.010-1301, USA. */ -import QtQuick 2.4 +import QtQuick 2.12 import QtQuick.Layouts 1.1 import org.kde.plasma.plasmoid 2.0 @@ -35,15 +35,42 @@ Item { signal clicked() Rectangle { + id: rect radius: height/2 anchors.fill: parent - opacity: button.pressed && button.enabled ? 0.1 : 0 + opacity: 0 color: PlasmaCore.ColorScope.textColor - Behavior on opacity { - //an OpacityAnimator causes stuttering in task switcher dragging - NumberAnimation { - duration: units.longDuration - easing.type: Easing.InOutQuad + + // this way of calculating animations lets the animation fully complete before switching back (tap runs the full animation) + property bool buttonHeld: button.pressed && button.enabled + + onButtonHeldChanged: showBackground(buttonHeld) + Component.onCompleted: showBackground(buttonHeld) + + function showBackground(show) { + if (show) { + if (!opacityAnimator.running && opacityAnimator.to !== 0.1) { + opacityAnimator.to = 0.1; + opacityAnimator.start(); + } + } else { + if (!opacityAnimator.running && opacityAnimator.to !== 0) { + opacityAnimator.to = 0; + opacityAnimator.start(); + } + } + } + NumberAnimation on opacity { + id: opacityAnimator + duration: units.shortDuration + easing.type: Easing.InOutQuad + onFinished: { + // animate the state back + if (rect.buttonHeld && opacityAnimator.to === 0) { + rect.showBackground(true); + } else if (!rect.buttonHeld && opacityAnimator.to === 0.1) { + rect.showBackground(false); + } } } } diff --git a/containments/taskpanel/package/contents/ui/main.qml b/containments/taskpanel/package/contents/ui/main.qml index ddf93fcb..f7dc232c 100644 --- a/containments/taskpanel/package/contents/ui/main.qml +++ b/containments/taskpanel/package/contents/ui/main.qml @@ -180,7 +180,18 @@ PlasmaCore.ColorScope { anchors.fill: parent visible: plasmoid.configuration.PanelButtonsVisible - + + PlasmaCore.Svg { + id: panelSvg + imagePath: "icons/mobile" + colorGroup: root.showingApp ? PlasmaCore.Theme.NormalColorGroup : PlasmaCore.Theme.ComplementaryColorGroup + } + PlasmaCore.Svg { + id: startSvg + imagePath: "icons/start" + colorGroup: root.showingApp ? PlasmaCore.Theme.NormalColorGroup : PlasmaCore.Theme.ComplementaryColorGroup + } + Rectangle { anchors.fill: parent gradient: Gradient { @@ -196,12 +207,15 @@ PlasmaCore.ColorScope { } Button { - anchors.left: parent.left + anchors { + verticalCenter: parent.verticalCenter + left: parent.left + leftMargin: parent.width * 0.1 + } height: parent.height - width: parent.width/3 + width: parent.width*0.8/3 mouseArea: mainMouseArea enabled: root.hasTasks - iconSource: "box" onClicked: { if (!enabled) { return; @@ -209,15 +223,29 @@ PlasmaCore.ColorScope { plasmoid.nativeInterface.showDesktop = false; taskSwitcher.visible ? taskSwitcher.hide() : taskSwitcher.show(); } + PlasmaCore.SvgItem { + anchors.centerIn: parent + implicitHeight: 0.75 * parent.height * 0.6 // 0.75 sizing adjustment fix needed + implicitWidth: implicitHeight + opacity: parent.enabled ? 1 : 0.5 + svg: panelSvg + elementId: "mobile-task-switcher" + + Behavior on opacity { + NumberAnimation { duration: units.shortDuration } + } + } } Button { id: showDesktopButton + anchors { + verticalCenter: parent.verticalCenter + horizontalCenter: parent.horizontalCenter + } height: parent.height - width: parent.width/3 - anchors.horizontalCenter: parent.horizontalCenter + width: parent.width*0.8/3 mouseArea: mainMouseArea - iconSource: "start-here-kde" enabled: !taskSwitcher.visible && (root.showingApp || MobileShell.HomeScreenControls.homeScreenPosition != 0) onClicked: { if (!enabled) { @@ -227,14 +255,29 @@ PlasmaCore.ColorScope { MobileShell.HomeScreenControls.resetHomeScreenPosition(); plasmoid.nativeInterface.allMinimizedChanged(); } + PlasmaCore.SvgItem { + anchors.centerIn: parent + implicitHeight: parent.height * 0.6 + implicitWidth: implicitHeight + opacity: parent.enabled ? 1 : 0.5 + svg: startSvg + elementId: "16-16-start-here-kde" + + Behavior on opacity { + NumberAnimation { duration: units.shortDuration } + } + } } Button { + anchors { + verticalCenter: parent.verticalCenter + right: parent.right + rightMargin: parent.width * 0.1 + } height: parent.height - width: parent.width/3 - anchors.right: parent.right + width: parent.width*0.8/3 mouseArea: mainMouseArea - iconSource: "paint-none" enabled: plasmoid.nativeInterface.hasCloseableActiveWindow && !taskSwitcher.visible onClicked: { if (!enabled) { @@ -248,6 +291,19 @@ PlasmaCore.ColorScope { taskSwitcher.model.requestClose(index); } } + + PlasmaCore.SvgItem { + anchors.centerIn: parent + implicitHeight: 0.75 * parent.height * 0.6 // 0.75 sizing adjustment fix needed + implicitWidth: implicitHeight + opacity: parent.enabled ? 1 : 0.5 + svg: panelSvg + elementId: "mobile-close-app" + + Behavior on opacity { + NumberAnimation { duration: units.shortDuration } + } + } } } }