From b690c533d14f158d8241dd6f24033a02ec3018a3 Mon Sep 17 00:00:00 2001 From: Marco Martin Date: Thu, 20 Aug 2020 13:04:02 +0200 Subject: [PATCH] new shutdown screen design --- .../contents/components/ActionButton.qml | 128 ++++++++++++++++ look-and-feel/contents/logout/Logout.qml | 140 ++++++++++++------ 2 files changed, 219 insertions(+), 49 deletions(-) create mode 100644 look-and-feel/contents/components/ActionButton.qml diff --git a/look-and-feel/contents/components/ActionButton.qml b/look-and-feel/contents/components/ActionButton.qml new file mode 100644 index 00000000..87e5c72f --- /dev/null +++ b/look-and-feel/contents/components/ActionButton.qml @@ -0,0 +1,128 @@ +/* + * Copyright 2016 David Edmundson + * + * 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 +} diff --git a/look-and-feel/contents/logout/Logout.qml b/look-and-feel/contents/logout/Logout.qml index de24e641..58fbd895 100644 --- a/look-and-feel/contents/logout/Logout.qml +++ b/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 { - id: kuser + Component.onCompleted: openAnim.restart() + onVisibleChanged: { + if (visible) { + openAnim.restart() + } } - Controls.Popup { - visible: true + ParallelAnimation { + 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) - height: Math.min(units.gridUnit * 25, root.height * 0.7) - Component.onCompleted: open() - - ColumnLayout { - id: contents - spacing: units.largeSpacing - anchors.fill: parent - - UserDelegate { - Layout.fillWidth: true - width: units.gridUnit * 7 - height: width - nameFontSize: theme.defaultFont.pointSize + 4 - constrainText: false - avatarPath: kuser.faceIconUrl - iconSource: "user-identity" - isCurrent: true - name: kuser.fullName + columns: 2 + rowSpacing: units.gridUnit * 2 + columnSpacing: units.gridUnit * 2 + scale: 2 + opacity: 0 + ActionButton { + iconSource: "system-reboot" + text: i18nd("plasma_lookandfeel_org.kde.lookandfeel", "Restart") + onClicked: { + closeAnim.restart(); + root.rebootRequested(); } + } - ColumnLayout { - Layout.margins: 10 - Controls.Button { - Layout.fillWidth: true - display: Controls.Button.TextUnderIcon - icon.name: "system-shutdown" - text: i18nd("plasma_lookandfeel_org.kde.lookandfeel", "Shut Down") - onClicked: root.haltRequested() - } + ActionButton { + iconSource: "system-shutdown" + text: i18nd("plasma_lookandfeel_org.kde.lookandfeel", "Shut Down") + onClicked: { + closeAnim.restart(); + root.haltRequested(); + } + } - Controls.Button { - Layout.fillWidth: true - display: Controls.Button.TextUnderIcon - icon.name: "system-reboot" - text: i18nd("plasma_lookandfeel_org.kde.lookandfeel", "Restart") - onClicked: root.rebootRequested() - } - - Controls.Button { - Layout.fillWidth: true - display: Controls.Button.TextUnderIcon - icon.name: "dialog-cancel" - text: i18nd("plasma_lookandfeel_org.kde.lookandfeel", "Cancel") - onClicked: root.cancelRequested() - } + ActionButton { + //Remove this when we have more buttons + Layout.columnSpan: 2 + Layout.alignment: Qt.AlignCenter + iconSource: "dialog-cancel" + text: i18nd("plasma_lookandfeel_org.kde.lookandfeel", "Cancel") + onClicked: { + closeAnim.restart(); + root.cancelRequested(); } } }