mirror of
https://invent.kde.org/marcoa/shift-shell.git
synced 2026-04-29 15:03:09 +00:00
Add colour scheme
This commit is contained in:
Devin Lin
parent
7dbb9fd46a
commit
1727d88e9a
2 changed files with 96 additions and 67 deletions
|
|
@ -22,10 +22,16 @@ import QtGraphicalEffects 1.12
|
|||
import org.kde.plasma.components 2.0 as PlasmaComponents
|
||||
import org.kde.plasma.core 2.0 as PlasmaCore
|
||||
import org.kde.plasma.workspace.keyboardlayout 1.0
|
||||
import org.kde.kirigami 2.12 as Kirigami
|
||||
|
||||
Rectangle {
|
||||
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")
|
||||
|
||||
// for displaying temporary number in pin dot display
|
||||
|
|
@ -35,6 +41,17 @@ Rectangle {
|
|||
// if waiting for result of auth
|
||||
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() {
|
||||
waitingForAuth = false;
|
||||
root.password = "";
|
||||
|
|
@ -127,71 +144,80 @@ Rectangle {
|
|||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
id: topTextDisplay
|
||||
anchors.top: parent.top
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
color: keypadRoot.headerBackgroundColor
|
||||
implicitHeight: units.gridUnit * 2.5
|
||||
opacity: (Math.sin(2*((Math.PI / 2) * keypadRoot.swipeProgress + 1.5 * Math.PI)) + 1)
|
||||
}
|
||||
|
||||
DropShadow {
|
||||
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
|
||||
Item {
|
||||
anchors.verticalCenter: topTextDisplay.verticalCenter
|
||||
anchors.horizontalCenter: topTextDisplay.horizontalCenter
|
||||
|
||||
// label ("wrong pin", "enter pin")
|
||||
Label {
|
||||
visible: root.password.length === 0
|
||||
anchors.centerIn: parent
|
||||
text: keypadRoot.pinLabel
|
||||
font.pointSize: 12
|
||||
color: keypadRoot.headerTextColor //Kirigami.ColorUtils.adjustColor(PlasmaCore.Theme.textColor, {"alpha": 0.7*255})
|
||||
}
|
||||
|
||||
// dot display and letter
|
||||
RowLayout {
|
||||
id: dotDisplay
|
||||
anchors.centerIn: parent
|
||||
height: units.gridUnit * 1.5 // maintain height when letter is shown
|
||||
spacing: 6
|
||||
|
||||
Repeater {
|
||||
model: root.password.length
|
||||
delegate: Rectangle { // dot
|
||||
visible: index !== indexWithNumber // hide dot if number is shown
|
||||
Layout.preferredWidth: units.gridUnit * 0.35
|
||||
Layout.preferredHeight: Layout.preferredWidth
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
radius: width
|
||||
color: keypadRoot.waitingForAuth ? keypadRoot.headerTextInactiveColor : keypadRoot.headerTextColor // dim when waiting for auth
|
||||
}
|
||||
}
|
||||
Label { // number/letter
|
||||
visible: root.password.length-1 === indexWithNumber // hide label if no label needed
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
color: keypadRoot.waitingForAuth ? keypadRoot.headerTextInactiveColor : keypadRoot.headerTextColor // dim when waiting for auth
|
||||
text: lastKeyPressValue
|
||||
font.pointSize: 12
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ColumnLayout {
|
||||
anchors {
|
||||
left: parent.left
|
||||
right: parent.right
|
||||
top: parent.top
|
||||
top: topTextDisplay.bottom
|
||||
bottom: parent.bottom
|
||||
topMargin: units.gridUnit
|
||||
bottomMargin: units.gridUnit
|
||||
}
|
||||
spacing: units.gridUnit
|
||||
|
||||
Item {
|
||||
Layout.alignment: Qt.AlignCenter
|
||||
}
|
||||
|
||||
// pin dot display
|
||||
Item {
|
||||
Layout.alignment: Qt.AlignCenter
|
||||
Layout.minimumHeight: units.gridUnit * 0.5
|
||||
Layout.maximumWidth: parent.width
|
||||
|
||||
// label ("wrong pin", "enter pin")
|
||||
Label {
|
||||
visible: root.password.length === 0
|
||||
anchors.centerIn: parent
|
||||
text: keypadRoot.pinLabel
|
||||
font.pointSize: 12
|
||||
color: "#616161"
|
||||
}
|
||||
|
||||
// dot display and letter
|
||||
RowLayout {
|
||||
id: dotDisplay
|
||||
anchors.centerIn: parent
|
||||
height: units.gridUnit * 1.5 // maintain height when letter is shown
|
||||
spacing: 6
|
||||
|
||||
Repeater {
|
||||
model: root.password.length
|
||||
delegate: Rectangle { // dot
|
||||
visible: index !== indexWithNumber // hide dot if number is shown
|
||||
Layout.preferredWidth: units.gridUnit * 0.35
|
||||
Layout.preferredHeight: Layout.preferredWidth
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
radius: width
|
||||
color: keypadRoot.waitingForAuth ? "#969696" : "#424242" // dim when waiting for auth
|
||||
}
|
||||
}
|
||||
Label { // number/letter
|
||||
visible: root.password.length-1 === indexWithNumber // hide label if no label needed
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
color: keypadRoot.waitingForAuth ? "#969696" : "#424242"
|
||||
text: lastKeyPressValue
|
||||
font.pointSize: 12
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// separator
|
||||
Rectangle {
|
||||
Layout.fillWidth: true
|
||||
height: 1
|
||||
color: "#eeeeee"
|
||||
}
|
||||
|
||||
// number keys
|
||||
GridLayout {
|
||||
|
|
@ -217,16 +243,19 @@ Rectangle {
|
|||
width: parent.width
|
||||
height: parent.height
|
||||
radius: 5
|
||||
color: PlasmaCore.Theme.buttonBackgroundColor
|
||||
color: keypadRoot.buttonColor
|
||||
|
||||
visible: modelData.length > 0
|
||||
opacity: (Math.sin(2*((Math.PI / 2) * keypadRoot.swipeProgress + 1.5 * Math.PI)) + 1)
|
||||
|
||||
AbstractButton {
|
||||
anchors.fill: parent
|
||||
onPressedChanged: {
|
||||
if(pressed)
|
||||
parent.color = PlasmaCore.Theme.buttonFocusColor
|
||||
else
|
||||
parent.color = PlasmaCore.Theme.buttonBackgroundColor
|
||||
if (pressed) {
|
||||
parent.color = keypadRoot.buttonPressedColor;
|
||||
} else {
|
||||
parent.color = keypadRoot.buttonColor;
|
||||
}
|
||||
}
|
||||
|
||||
onClicked: {
|
||||
|
|
@ -254,7 +283,8 @@ Rectangle {
|
|||
verticalOffset: 1
|
||||
radius: 4
|
||||
samples: 6
|
||||
color: "#e0e0e0"
|
||||
color: keypadRoot.dropShadowColor
|
||||
opacity: (Math.sin(2*((Math.PI / 2) * keypadRoot.swipeProgress + 1.5 * Math.PI)) + 1)
|
||||
}
|
||||
|
||||
PlasmaComponents.Label {
|
||||
|
|
@ -262,20 +292,18 @@ Rectangle {
|
|||
text: modelData
|
||||
anchors.centerIn: parent
|
||||
font.pointSize: 18
|
||||
color: PlasmaCore.Theme.textColor
|
||||
color: keypadRoot.buttonTextColor
|
||||
}
|
||||
|
||||
PlasmaCore.IconItem {
|
||||
visible: modelData === "R"
|
||||
anchors.centerIn: parent
|
||||
// colorGroup: PlasmaCore.ColorScope.backgroundColor
|
||||
source: "edit-clear"
|
||||
}
|
||||
|
||||
PlasmaCore.IconItem {
|
||||
visible: modelData === "E"
|
||||
anchors.centerIn: parent
|
||||
// colorGroup: PlasmaCore.ColorScope.backgroundColor
|
||||
source: "go-next"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -250,18 +250,19 @@ PlasmaCore.ColorScope {
|
|||
|
||||
width: parent.width
|
||||
spacing: units.gridUnit
|
||||
opacity: Math.sin((Math.PI / 2) * (passwordFlickable.contentY / passwordFlickable.columnHeight) + 1.5 * Math.PI) + 1
|
||||
|
||||
// scroll down icon
|
||||
PlasmaCore.IconItem {
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
colorGroup: PlasmaCore.Theme.ComplementaryColorGroup
|
||||
source: "arrow-down"
|
||||
opacity: Math.sin((Math.PI / 2) * (passwordFlickable.contentY / passwordFlickable.columnHeight) + 1.5 * Math.PI) + 1
|
||||
}
|
||||
|
||||
Keypad {
|
||||
id: keypad
|
||||
focus: passwordFlickable.contentY === passwordFlickable.columnHeight
|
||||
swipeProgress: passwordFlickable.contentY / passwordFlickable.columnHeight
|
||||
Layout.fillWidth: true
|
||||
Layout.minimumHeight: units.gridUnit * 17
|
||||
Layout.maximumWidth: root.width
|
||||
|
|
|
|||
Loading…
Reference in a new issue