mirror of
https://invent.kde.org/marcoa/shift-shell.git
synced 2026-04-28 22:53:09 +00:00
new shutdown screen design
This commit is contained in:
Marco Martin
parent
b675eeb635
commit
b690c533d1
2 changed files with 219 additions and 49 deletions
128
look-and-feel/contents/components/ActionButton.qml
Normal file
128
look-and-feel/contents/components/ActionButton.qml
Normal file
|
|
@ -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
|
||||
}
|
||||
|
|
@ -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();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue