marcoallegretti/shift-shell
1
0
Fork 0
mirror of https://invent.kde.org/marcoa/shift-shell.git synced 2026-08-03 10:14:45 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add colour scheme

Browse source
This commit is contained in:
Devin Lin 2020-11-21 14:49:08 -05:00
parent 7dbb9fd46a
commit 1727d88e9a
2 changed files with 96 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

94
look-and-feel/contents/lockscreen/Keypad.qml
View file

@ -22,10 +22,16 @@ import QtGraphicalEffects 1.12
import org.kde.plasma.components 2.0 as PlasmaComponents import org.kde.plasma.components 2.0 as PlasmaComponents
import org.kde.plasma.core 2.0 as PlasmaCore import org.kde.plasma.core 2.0 as PlasmaCore
import org.kde.plasma.workspace.keyboardlayout 1.0 import org.kde.plasma.workspace.keyboardlayout 1.0
import org.kde.kirigami 2.12 as Kirigami
Rectangle { Rectangle {
id: keypadRoot id: keypadRoot
color: Qt.rgba(250, 250, 250, 0.85) // slightly translucent background, for key contrast
// 0 - keypad is not shown, 1 - keypad is shown
property double swipeProgress
// slightly translucent background, for key contrast
color: Kirigami.ColorUtils.adjustColor(PlasmaCore.Theme.backgroundColor, {"alpha": 0.9*255})
property string pinLabel: qsTr("Enter PIN") property string pinLabel: qsTr("Enter PIN")
// for displaying temporary number in pin dot display // for displaying temporary number in pin dot display
@ -35,6 +41,17 @@ Rectangle {
// if waiting for result of auth // if waiting for result of auth
property bool waitingForAuth: false property bool waitingForAuth: false
// colour calculations
property color buttonColor: Qt.lighter(PlasmaCore.Theme.backgroundColor, 1.3)
property color buttonPressedColor: Qt.darker(PlasmaCore.Theme.backgroundColor, 1.08)
property color buttonTextColor: PlasmaCore.Theme.textColor
property color dropShadowColor: Kirigami.ColorUtils.adjustColor(PlasmaCore.Theme.textColor, {"alpha": 0.1*255})
property color headerBackgroundColor: Qt.lighter(PlasmaCore.Theme.backgroundColor, 1.3)
property color headerTextColor: Kirigami.ColorUtils.adjustColor(PlasmaCore.Theme.textColor, {"alpha": 0.75*255})
property color headerTextInactiveColor: Kirigami.ColorUtils.adjustColor(PlasmaCore.Theme.textColor, {"alpha": 0.4*255})
opacity: Math.sin((Math.PI / 2) * swipeProgress + 1.5 * Math.PI) + 1
function reset() { function reset() {
waitingForAuth = false; waitingForAuth = false;
root.password = ""; root.password = "";
@ -127,26 +144,32 @@ Rectangle {
} }
} }
ColumnLayout { Rectangle {
anchors { id: topTextDisplay
left: parent.left anchors.top: parent.top
right: parent.right anchors.left: parent.left
top: parent.top anchors.right: parent.right
bottom: parent.bottom color: keypadRoot.headerBackgroundColor
topMargin: units.gridUnit implicitHeight: units.gridUnit * 2.5
bottomMargin: units.gridUnit opacity: (Math.sin(2*((Math.PI / 2) * keypadRoot.swipeProgress + 1.5 * Math.PI)) + 1)
} }
spacing: units.gridUnit
Item { DropShadow {
Layout.alignment: Qt.AlignCenter anchors.fill: topTextDisplay
source: topTextDisplay
cached: true
horizontalOffset: 0
verticalOffset: 1
radius: 4
samples: 6
color: keypadRoot.dropShadowColor
opacity: (Math.sin(2*((Math.PI / 2) * keypadRoot.swipeProgress + 1.5 * Math.PI)) + 1)
} }
// pin dot display // pin dot display
Item { Item {
Layout.alignment: Qt.AlignCenter anchors.verticalCenter: topTextDisplay.verticalCenter
Layout.minimumHeight: units.gridUnit * 0.5 anchors.horizontalCenter: topTextDisplay.horizontalCenter
Layout.maximumWidth: parent.width
// label ("wrong pin", "enter pin") // label ("wrong pin", "enter pin")
Label { Label {
@ -154,7 +177,7 @@ Rectangle {
anchors.centerIn: parent anchors.centerIn: parent
text: keypadRoot.pinLabel text: keypadRoot.pinLabel
font.pointSize: 12 font.pointSize: 12
color: "#616161" color: keypadRoot.headerTextColor //Kirigami.ColorUtils.adjustColor(PlasmaCore.Theme.textColor, {"alpha": 0.7*255})
} }
// dot display and letter // dot display and letter
@ -172,26 +195,29 @@ Rectangle {
Layout.preferredHeight: Layout.preferredWidth Layout.preferredHeight: Layout.preferredWidth
Layout.alignment: Qt.AlignVCenter Layout.alignment: Qt.AlignVCenter
radius: width radius: width
color: keypadRoot.waitingForAuth ? "#969696" : "#424242" // dim when waiting for auth color: keypadRoot.waitingForAuth ? keypadRoot.headerTextInactiveColor : keypadRoot.headerTextColor // dim when waiting for auth
} }
} }
Label { // number/letter Label { // number/letter
visible: root.password.length-1 === indexWithNumber // hide label if no label needed visible: root.password.length-1 === indexWithNumber // hide label if no label needed
Layout.alignment: Qt.AlignHCenter Layout.alignment: Qt.AlignHCenter
color: keypadRoot.waitingForAuth ? "#969696" : "#424242" color: keypadRoot.waitingForAuth ? keypadRoot.headerTextInactiveColor : keypadRoot.headerTextColor // dim when waiting for auth
text: lastKeyPressValue text: lastKeyPressValue
font.pointSize: 12 font.pointSize: 12
} }
} }
} }
ColumnLayout {
// separator anchors {
Rectangle { left: parent.left
Layout.fillWidth: true right: parent.right
height: 1 top: topTextDisplay.bottom
color: "#eeeeee" bottom: parent.bottom
topMargin: units.gridUnit
bottomMargin: units.gridUnit
} }
spacing: units.gridUnit
// number keys // number keys
GridLayout { GridLayout {
@ -217,16 +243,19 @@ Rectangle {
width: parent.width width: parent.width
height: parent.height height: parent.height
radius: 5 radius: 5
color: PlasmaCore.Theme.buttonBackgroundColor color: keypadRoot.buttonColor
visible: modelData.length > 0 visible: modelData.length > 0
opacity: (Math.sin(2*((Math.PI / 2) * keypadRoot.swipeProgress + 1.5 * Math.PI)) + 1)
AbstractButton { AbstractButton {
anchors.fill: parent anchors.fill: parent
onPressedChanged: { onPressedChanged: {
if(pressed) if (pressed) {
parent.color = PlasmaCore.Theme.buttonFocusColor parent.color = keypadRoot.buttonPressedColor;
else } else {
parent.color = PlasmaCore.Theme.buttonBackgroundColor parent.color = keypadRoot.buttonColor;
}
} }
onClicked: { onClicked: {
@ -254,7 +283,8 @@ Rectangle {
verticalOffset: 1 verticalOffset: 1
radius: 4 radius: 4
samples: 6 samples: 6
color: "#e0e0e0" color: keypadRoot.dropShadowColor
opacity: (Math.sin(2*((Math.PI / 2) * keypadRoot.swipeProgress + 1.5 * Math.PI)) + 1)
} }
PlasmaComponents.Label { PlasmaComponents.Label {
@ -262,20 +292,18 @@ Rectangle {
text: modelData text: modelData
anchors.centerIn: parent anchors.centerIn: parent
font.pointSize: 18 font.pointSize: 18
color: PlasmaCore.Theme.textColor color: keypadRoot.buttonTextColor
} }
PlasmaCore.IconItem { PlasmaCore.IconItem {
visible: modelData === "R" visible: modelData === "R"
anchors.centerIn: parent anchors.centerIn: parent
// colorGroup: PlasmaCore.ColorScope.backgroundColor
source: "edit-clear" source: "edit-clear"
} }
PlasmaCore.IconItem { PlasmaCore.IconItem {
visible: modelData === "E" visible: modelData === "E"
anchors.centerIn: parent anchors.centerIn: parent
// colorGroup: PlasmaCore.ColorScope.backgroundColor
source: "go-next" source: "go-next"
} }
} }

3
look-and-feel/contents/lockscreen/LockScreen.qml
View file

@ -250,18 +250,19 @@ PlasmaCore.ColorScope {
width: parent.width width: parent.width
spacing: units.gridUnit spacing: units.gridUnit
opacity: Math.sin((Math.PI / 2) * (passwordFlickable.contentY / passwordFlickable.columnHeight) + 1.5 * Math.PI) + 1
// scroll down icon // scroll down icon
PlasmaCore.IconItem { PlasmaCore.IconItem {
Layout.alignment: Qt.AlignHCenter Layout.alignment: Qt.AlignHCenter
colorGroup: PlasmaCore.Theme.ComplementaryColorGroup colorGroup: PlasmaCore.Theme.ComplementaryColorGroup
source: "arrow-down" source: "arrow-down"
opacity: Math.sin((Math.PI / 2) * (passwordFlickable.contentY / passwordFlickable.columnHeight) + 1.5 * Math.PI) + 1
} }
Keypad { Keypad {
id: keypad id: keypad
focus: passwordFlickable.contentY === passwordFlickable.columnHeight focus: passwordFlickable.contentY === passwordFlickable.columnHeight
swipeProgress: passwordFlickable.contentY / passwordFlickable.columnHeight
Layout.fillWidth: true Layout.fillWidth: true
Layout.minimumHeight: units.gridUnit * 17 Layout.minimumHeight: units.gridUnit * 17
Layout.maximumWidth: root.width Layout.maximumWidth: root.width