new shutdown screen design

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

@@ -0,0 +1,128 @@
+/*
+ *   Copyright 2016 David Edmundson <davidedmundson@kde.org>
+ *
+ *   This program is free software; you can redistribute it and/or modify
+ *   it under the terms of the GNU Library General Public License as
+ *   published by the Free Software Foundation; either version 2 or
+ *   (at your option) any later version.
+ *
+ *   This program is distributed in the hope that it will be useful,
+ *   but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *   GNU General Public License for more details
+ *
+ *   You should have received a copy of the GNU Library General Public
+ *   License along with this program; if not, write to the
+ *   Free Software Foundation, Inc.,
+ *   51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+
+import QtQuick 2.8
+import org.kde.plasma.core 2.0 as PlasmaCore
+import org.kde.plasma.components 3.0 as PlasmaComponents3
+
+Item {
+    id: root
+    property alias text: label.text
+    property alias iconSource: icon.source
+    property alias containsMouse: mouseArea.containsMouse
+    property alias font: label.font
+    property alias labelRendering: label.renderType
+    property alias circleOpacity: iconCircle.opacity
+    property alias circleVisiblity: iconCircle.visible
+    property int fontSize: config.fontSize
+    readonly property bool softwareRendering: GraphicsInfo.api === GraphicsInfo.Software
+    signal clicked
+
+    activeFocusOnTab: true
+
+    property int iconSize: units.gridUnit * 3
+
+    implicitWidth: Math.max(iconSize + units.largeSpacing * 2, label.contentWidth)
+    implicitHeight: iconSize + units.smallSpacing + label.implicitHeight
+
+    opacity: activeFocus || containsMouse ? 1 : 0.85
+        Behavior on opacity {
+            PropertyAnimation { // OpacityAnimator makes it turn black at random intervals
+                duration: units.longDuration
+                easing.type: Easing.InOutQuad
+            }
+    }
+
+    Rectangle {
+        id: iconCircle
+        anchors.centerIn: icon
+        width: iconSize + units.smallSpacing
+        height: width
+        radius: width / 2
+        color: softwareRendering ?  PlasmaCore.ColorScope.backgroundColor : PlasmaCore.ColorScope.textColor
+        opacity: activeFocus || containsMouse ? (softwareRendering ? 0.8 : 0.15) : (softwareRendering ? 0.6 : 0)
+        Behavior on opacity {
+                PropertyAnimation { // OpacityAnimator makes it turn black at random intervals
+                    duration: 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: units.shortDuration
+                    easing.type: Easing.InOutQuart
+                }
+        }
+    }
+
+    PlasmaCore.IconItem {
+        id: icon
+        anchors {
+            top: parent.top
+            horizontalCenter: parent.horizontalCenter
+        }
+        width: iconSize
+        height: iconSize
+
+        colorGroup: PlasmaCore.ColorScope.colorGroup
+        active: mouseArea.containsMouse || root.activeFocus
+    }
+
+    PlasmaComponents3.Label {
+        id: label
+        font.pointSize: Math.max(fontSize + 1,theme.defaultFont.pointSize + 1)
+        anchors {
+            top: icon.bottom
+            topMargin: (softwareRendering ? 1.5 : 1) * 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
+        horizontalAlignment: Text.AlignHCenter
+        verticalAlignment: Text.AlignTop
+        wrapMode: Text.WordWrap
+        font.underline: root.activeFocus
+    }
+
+    MouseArea {
+        id: mouseArea
+        hoverEnabled: true
+        onClicked: root.clicked()
+        anchors.fill: parent
+    }
+
+    Keys.onEnterPressed: clicked()
+    Keys.onReturnPressed: clicked()
+    Keys.onSpacePressed: clicked()
+
+    Accessible.onPressAction: clicked()
+    Accessible.role: Accessible.Button
+    Accessible.name: label.text
+}

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

@@ -32,6 +32,7 @@ import org.kde.plasma.private.sessions 2.0
 PlasmaCore.ColorScope {
     id: root
 
+    colorGroup: PlasmaCore.Theme.ComplementaryColorGroup
     signal logoutRequested()
     signal haltRequested()
     signal suspendRequested(int spdMethod)
@@ -46,69 +47,110 @@ PlasmaCore.ColorScope {
     }
 
     Rectangle {
+        id: background
         anchors.fill: parent
         color: PlasmaCore.ColorScope.backgroundColor
-        opacity: 0.5
+        opacity: 0
     }
 
     MouseArea {
         anchors.fill: parent
-        onClicked: root.cancelRequested()
+        onClicked: {
+            closeAnim.restart();
+            root.cancelRequested();
+        }
     }
 
-    KCoreAddons.KUser {
+    Component.onCompleted: openAnim.restart()
-        id: kuser
+    onVisibleChanged: {
+        if (visible) {
+            openAnim.restart()
+        }
     }
 
-    Controls.Popup {
+    ParallelAnimation {
-        visible: true
+        id: openAnim
+        ScaleAnimator {
+            target: lay
+            from: 10
+            to: 1
+            duration: units.longDuration
+            easing.type: Easing.InOutQuad
+        }
+        OpacityAnimator {
+            target: lay
+            from: 0
+            to: 1
+            duration: units.longDuration
+            easing.type: Easing.InOutQuad
+        }
+        OpacityAnimator {
+            target: background
+            from: 0
+            to: 0.5
+            duration: units.longDuration
+            easing.type: Easing.InOutQuad
+        }
+    }
+    ParallelAnimation {
+        id: closeAnim
+        ScaleAnimator {
+            target: lay
+            from: 1
+            to: 10
+            duration: units.longDuration
+            easing.type: Easing.InOutQuad
+        }
+        OpacityAnimator {
+            target: lay
+            from: 1
+            to: 0
+            duration: units.longDuration
+            easing.type: Easing.InOutQuad
+        }
+        OpacityAnimator {
+            target: background
+            from: 0.5
+            to: 0
+            duration: units.longDuration
+            easing.type: Easing.InOutQuad
+        }
+    }
+    GridLayout {
+        id: lay
         anchors.centerIn: parent
-        width: Math.min(units.gridUnit * 20, root.width * 0.8)
+        columns: 2
-        height: Math.min(units.gridUnit * 25, root.height * 0.7)
+        rowSpacing: units.gridUnit * 2
-        Component.onCompleted: open()
+        columnSpacing: units.gridUnit * 2
-
+        scale: 2
-        ColumnLayout {
+        opacity: 0
-            id: contents
+        ActionButton {
-            spacing: units.largeSpacing
+            iconSource: "system-reboot"
-            anchors.fill: parent
+            text: i18nd("plasma_lookandfeel_org.kde.lookandfeel", "Restart")
-
+            onClicked: {
-            UserDelegate {
+                closeAnim.restart();
-                Layout.fillWidth: true
+                root.rebootRequested();
-                width: units.gridUnit * 7
-                height: width
-                nameFontSize: theme.defaultFont.pointSize + 4
-                constrainText: false
-                avatarPath: kuser.faceIconUrl
-                iconSource: "user-identity"
-                isCurrent: true
-                name: kuser.fullName
             }
+        }
 
-            ColumnLayout {
+        ActionButton {
-                Layout.margins: 10
+            iconSource: "system-shutdown"
-                Controls.Button {
+            text: i18nd("plasma_lookandfeel_org.kde.lookandfeel", "Shut Down")
-                    Layout.fillWidth: true
+            onClicked: {
-                    display: Controls.Button.TextUnderIcon
+                closeAnim.restart();
-                    icon.name: "system-shutdown"
+                root.haltRequested();
-                    text: i18nd("plasma_lookandfeel_org.kde.lookandfeel", "Shut Down")
+            }
-                    onClicked: root.haltRequested()
+        }
-                }
 
-                Controls.Button {
+        ActionButton {
-                    Layout.fillWidth: true
+            //Remove this when we have more buttons
-                    display: Controls.Button.TextUnderIcon
+            Layout.columnSpan: 2
-                    icon.name: "system-reboot"
+            Layout.alignment: Qt.AlignCenter
-                    text: i18nd("plasma_lookandfeel_org.kde.lookandfeel", "Restart")
+            iconSource: "dialog-cancel"
-                    onClicked: root.rebootRequested()
+            text: i18nd("plasma_lookandfeel_org.kde.lookandfeel", "Cancel")
-                }
+            onClicked: {
-
+                closeAnim.restart();
-                Controls.Button {
+                root.cancelRequested();
-                    Layout.fillWidth: true
-                    display: Controls.Button.TextUnderIcon
-                    icon.name: "dialog-cancel"
-                    text: i18nd("plasma_lookandfeel_org.kde.lookandfeel", "Cancel")
-                    onClicked: root.cancelRequested()
-                }
             }
         }
     }