power menu: New power menu design

This MR introduces a redesigned power menu ("logout" look-and-feel). The design has been changed to (imo) be more inline with the rest of the recent Plasma Mobile design changes, and a bit more professional (ex. removing the scale animation in favor of just a fade). 

Design suggestions are greatly appreciated!

<img src="/uploads/8534b89984ca24abb163ac04cfff6d8d/image.png" alt="New Power Menu Design" width="40%"/>


Comparison (left is new design, right is the current one):

<img src="/uploads/5fa75374e2b01ca5bb90e2c44ef86510/image.png" width="40%"/>

look-and-feel/contents/logout/ActionButton.qml

@@ -1,5 +1,6 @@
 /*
  *   SPDX-FileCopyrightText: 2016 David Edmundson <davidedmundson@kde.org>
+ *   SPDX-FileCopyrightText: 2022 Seshan Ravikumar <seshan10@me.com>
  *
  *   SPDX-License-Identifier: LGPL-2.0-or-later
  */
@@ -16,81 +17,51 @@ Item {
     property alias containsMouse: mouseArea.containsMouse
     property alias font: label.font
     property alias labelRendering: label.renderType
-    property alias circleOpacity: iconCircle.opacity
+    property alias circleOpacity: buttonRect.opacity
-    property alias circleVisiblity: iconCircle.visible
+    property alias circleVisiblity: buttonRect.visible
     property int fontSize: config.fontSize
     readonly property bool softwareRendering: GraphicsInfo.api === GraphicsInfo.Software
-    
+
     signal clicked
 
     activeFocusOnTab: true
 
-    property int iconSize: PlasmaCore.Units.gridUnit * 3
+    property int iconSize: PlasmaCore.Units.gridUnit
 
-    implicitWidth: Math.max(iconSize + PlasmaCore.Units.largeSpacing * 2, label.contentWidth)
+    implicitWidth: PlasmaCore.Units.gridUnit * 14
     implicitHeight: iconSize + PlasmaCore.Units.smallSpacing + label.implicitHeight
 
-    opacity: activeFocus || containsMouse ? 1 : 0.85
-        Behavior on opacity {
-            PropertyAnimation { // OpacityAnimator makes it turn black at random intervals
-                duration: PlasmaCore.Units.longDuration
-                easing.type: Easing.InOutQuad
-            }
-    }
-
     Rectangle {
-        id: iconCircle
+        id: buttonRect
-        anchors.centerIn: icon
+        width: root.width
-        width: iconSize + PlasmaCore.Units.smallSpacing
+        height: iconSize * 2.2
-        height: width
+        radius: PlasmaCore.Units.smallSpacing
-        radius: width / 2
+        color: PlasmaCore.ColorScope.backgroundColor
-        color: softwareRendering ?  PlasmaCore.ColorScope.backgroundColor : PlasmaCore.ColorScope.textColor
+        opacity: mouseArea.containsPress ? 0.8 : 0.3
-        opacity: activeFocus || containsMouse ? (softwareRendering ? 0.8 : 0.15) : (softwareRendering ? 0.6 : 0)
+        border {
-        Behavior on opacity {
+            color: Qt.rgba(255, 255, 255, 0.8)
-                PropertyAnimation { // OpacityAnimator makes it turn black at random intervals
+            width: 1
-                    duration: PlasmaCore.Units.longDuration
-                    easing.type: Easing.InOutQuad
-                }
-        }
-    }
-
-    Rectangle {
-        anchors.centerIn: iconCircle
-        width: iconCircle.width
-        height: width
-        radius: width / 2
-        scale: mouseArea.containsPress ? 1 : 0
-        color: PlasmaCore.ColorScope.textColor
-        opacity: 0.15
-        Behavior on scale {
-                PropertyAnimation {
-                    duration: PlasmaCore.Units.shortDuration
-                    easing.type: Easing.InOutQuart
-                }
         }
     }
 
     PlasmaCore.IconItem {
         id: icon
         anchors {
-            top: parent.top
+            verticalCenter: buttonRect.verticalCenter
-            horizontalCenter: parent.horizontalCenter
+            left: buttonRect.left
+            leftMargin: PlasmaCore.Units.mediumSpacing
         }
         width: iconSize
         height: iconSize
 
         colorGroup: PlasmaCore.ColorScope.colorGroup
-        active: mouseArea.containsMouse || root.activeFocus
     }
 
     PlasmaComponents3.Label {
         id: label
         font.pointSize: Math.max(fontSize + 1,PlasmaCore.Theme.defaultFont.pointSize + 1)
         anchors {
-            top: icon.bottom
+            centerIn: buttonRect
-            topMargin: (softwareRendering ? 1.5 : 1) * PlasmaCore.Units.smallSpacing
-            left: parent.left
-            right: parent.right
         }
         style: softwareRendering ? Text.Outline : Text.Normal
         styleColor: softwareRendering ? PlasmaCore.ColorScope.backgroundColor : "transparent" //no outline, doesn't matter

look-and-feel/contents/logout/Logout.qml

@@ -2,6 +2,7 @@
  *   SPDX-FileCopyrightText: 2014 Aleix Pol Gonzalez <aleixpol@blue-systems.com>
  *   SPDX-FileCopyrightText: 2020 Linus Jahn <lnj@kaidan.im>
  *   SPDX-FileCopyrightText: 2020 Marco Martin <mart@kde.org
+ *   SPDX-FileCopyrightText: 2022 Seshan Ravikumar <seshan10@me.com>
  *
  *   SPDX-License-Identifier: GPL-2.0-or-later
  */
@@ -56,13 +57,6 @@ PlasmaCore.ColorScope {
     ParallelAnimation {
         id: openAnim
         running: true
-        ScaleAnimator {
-            target: lay
-            from: 10
-            to: 1
-            duration: PlasmaCore.Units.longDuration
-            easing.type: Easing.InOutQuad
-        }
         OpacityAnimator {
             target: lay
             from: 0
@@ -82,20 +76,13 @@ PlasmaCore.ColorScope {
     SequentialAnimation {
         id: closeAnim
         running: false
-        
+
         property var callback
         function execute(call) {
             callback = call;
             closeAnim.restart();
         }
         ParallelAnimation {
-            ScaleAnimator {
-                target: lay
-                from: 1
-                to: 10
-                duration: PlasmaCore.Units.longDuration
-                easing.type: Easing.InOutQuad
-            }
             OpacityAnimator {
                 target: lay
                 from: 1
@@ -122,13 +109,15 @@ PlasmaCore.ColorScope {
             }
         }
     }
-    GridLayout {
+    ColumnLayout {
         id: lay
-        anchors.centerIn: parent
+        anchors {
-        columns: 2
+            //top: root.top
-        rowSpacing: PlasmaCore.Units.gridUnit * 2
+            //horizontalCenter: root.horizontalCenter
-        columnSpacing: PlasmaCore.Units.gridUnit * 2
+            centerIn: root
-        scale: 2
+        }
+
+        spacing: PlasmaCore.Units.gridUnit
         opacity: 0
         ActionButton {
             iconSource: "system-reboot"
@@ -147,14 +136,24 @@ PlasmaCore.ColorScope {
         }
 
         ActionButton {
-            //Remove this when we have more buttons
+            iconSource: "system-log-out"
-            Layout.columnSpan: 2
+            text: i18nd("plasma_lookandfeel_org.kde.lookandfeel", "Log Out")
-            Layout.alignment: Qt.AlignCenter
+            onClicked: {
+                closeAnim.execute(root.logoutRequested);
+            }
+        }
+    }
+    ActionButton {
+            anchors {
+                bottom: root.bottom
+                bottomMargin: PlasmaCore.Units.largeSpacing
+                horizontalCenter: parent.horizontalCenter
+            }
             iconSource: "dialog-cancel"
             text: i18nd("plasma_lookandfeel_org.kde.lookandfeel", "Cancel")
             onClicked: {
                 closeAnim.execute(root.cancelRequested);
             }
-        }
     }
+
 }