EricKotato/sddm-slice
1
0
Fork 0
Code Issues Releases 7 Wiki Activity

Added backgrounds to text and image elements

Browse source
This commit is contained in:
Eric Kotato 2018-05-31 02:26:51 +03:00
parent 56608764af
commit b34e5d9570
7 changed files with 108 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
README.md
View file

@ -29,6 +29,10 @@ Create file `theme.conf.user` in theme folder. See `slice/theme.conf` for refere
* `color_placeholder_text` - placeholder text color (in password field). Defaults to `#888888`.
* `color_selection_bg` - selected text background color. Defaults to `#555555`.
* `color_selection_text` - selected text color. Defaults to `#dddddd`.
* `color_text_bg` - text elements background color. Defaults to `#22ffffff`.
* `color_icon_bg` - image elements background color. Defaults to `#11ffffff`.
* `color_error_bg` - error message background color. Defaults to `#11ffffff`.
* `color_error_text` - error message text color. Defaults to `#dddddd`.
## License

23
slice/LoopListPowerItem.qml
View file

@ -1,12 +1,12 @@
import QtQuick 2.7
import QtGraphicalEffects 1.0
import SddmComponents 2.0
Item
{
id: itemRoot
opacity: distance
property int duration: 100
width: parent.width
signal clicked()
signal entered()
@ -34,6 +34,8 @@ Item
source: icon
sourceSize.width: 48
sourceSize.height: 48
x: 2
y: 2
}
ColorOverlay
@ -44,6 +46,13 @@ Item
color: config.color_text
}
Rectangle
{
width: 52
height: 52
color: config.color_icon_bg
}
Text
{
id: descriptionLabel
@ -57,14 +66,22 @@ Item
bold: true
}
x: 54
x: 64
y: 5
}
Rectangle
{
x: 54
width: parent.width - 54
height: 52
color: config.color_text_bg
}
MouseArea
{
width: descriptionLabel.x + descriptionLabel.width
height: 48
height: 52
hoverEnabled: true
onClicked: itemRoot.clicked()

13
slice/LoopListSessionItem.qml
View file

@ -25,7 +25,16 @@ Item
bold: true
}
x: parent.x
y: 0
x: parent.x + 10
y: 5
}
Rectangle
{
x: sessionNameLabel.x - 10
y: sessionNameLabel.y - 5
width: sessionNameLabel.width + 20
height: sessionNameLabel.height + 10
color: config.color_text_bg
}
}

26
slice/LoopListUserItem.qml
View file

@ -6,6 +6,7 @@ Item
{
id: itemRoot
opacity: distance
width: parent.width
transform: Scale
{
@ -23,10 +24,20 @@ Item
{
id: profilePicture
source: userAvatar
sourceSize.width: 64
sourceSize.height: 64
sourceSize.width: 60
sourceSize.height: 60
x: 4
y: 4
}
Rectangle
{
width: 68
height: 68
color: config.color_icon_bg
}
Text
{
text: userName
@ -47,7 +58,7 @@ Item
{
text: userLogin
color: config.color_text
y: userName == "" ? 5 : 36
y: userName == "" ? 8 : 36
font
{
family: config.font
@ -56,4 +67,13 @@ Item
}
x: 80
}
Rectangle
{
x: 70
y: 0
width: parent.width - 70
height: 68
color: config.color_text_bg
}
}

11
slice/PagePower.qml
View file

@ -48,7 +48,7 @@ Item
{
id: powerListContainer
anchors.horizontalCenter: parent.horizontalCenter
width: 350
width: 370
height: pageRoot.height
property int scrollDuration: 100
@ -56,12 +56,10 @@ Item
LoopListPowerItem
{
id: powerShutdownButton
//y: pageRoot.height / 10
title: localeText.shutdown
distance: selectedIndex == 0 ? 1.0 : 0.6
icon: "icons/power-off.svg"
//Layout.fillHeight: true
Layout.alignment: Qt.AlignVCenter
Layout.minimumHeight: 48
@ -73,12 +71,10 @@ Item
LoopListPowerItem
{
id: powerRebootButton
//y: pageRoot.height / 3.7
title: localeText.reboot
distance: selectedIndex == 1 ? 1.0 : 0.6
icon: "icons/reboot.svg"
//Layout.fillHeight: true
Layout.alignment: Qt.AlignVCenter
Layout.minimumHeight: 48
@ -92,12 +88,10 @@ Item
LoopListPowerItem
{
id: powerSuspendButton
//y: pageRoot.height / 2.2
title: qsTr("Suspend")
distance: selectedIndex == 2 ? 1.0 : 0.6
icon: "icons/suspend.svg"
//Layout.fillHeight: true
Layout.alignment: Qt.AlignVCenter
Layout.minimumHeight: 48
@ -110,12 +104,10 @@ Item
LoopListPowerItem
{
id: powerHibernateButton
//y: pageRoot.height / 1.58
title: qsTr("Hibernate")
distance: selectedIndex == 3 ? 1.0 : 0.6
icon: "icons/hibernate.svg"
//Layout.fillHeight: true
Layout.alignment: Qt.AlignVCenter
Layout.minimumHeight: 48
@ -128,7 +120,6 @@ Item
LoopListPowerItem
{
id: powerHybridSleepButton
//y: pageRoot.height / 1.25
title: qsTr("Hybrid Sleep")
distance: selectedIndex == 4 ? 1.0 : 0.6
icon: "icons/hybrid-sleep.svg"

53
slice/PageUsers.qml
View file

@ -57,6 +57,7 @@ Item
onLoginFailed:
{
errorMessage.opacity = 1
errorMessageBg.opacity = 1
pageRoot.enabled = true
pageRoot.unlockNav()
loginExitAnimation.start()
@ -181,8 +182,6 @@ Item
userAvatar: get_avatar(0)
}
LoopListUserItem
{
id: botMidItem
@ -216,8 +215,9 @@ Item
TextInput
{
id: passwordField
y: hasLoginShown ? pageRoot.height / 2.3 + 35 : pageRoot.height / 2.3 + 60
width: parent.width
x: 10
y: hasLoginShown ? pageRoot.height / 2.3 + 37 : pageRoot.height / 2.3 + 62
width: parent.width - 20
height: 25
opacity: hasLoginShown ? 1 : 0
color: config.color_text
@ -244,7 +244,8 @@ Item
x: passwordField.x
y: passwordField.y
width: passwordField.width
opacity: passwordField.text.length > 0 || !hasLoginShown ? 0 : 1
opacity: hasLoginShown ? 1 : 0
visible: passwordField.text.length <= 0
color: config.color_placeholder_text
@ -258,6 +259,15 @@ Item
text: localeText.password
}
Rectangle {
id: passwordFieldBg
y: hasLoginShown ? pageRoot.height / 2.3 + 30 : pageRoot.height / 2.3 + 55
width: parent.width
height: 40
color: config.color_text_bg
opacity: hasLoginShown ? 1 : 0
}
Rectangle
{
id: progressBar
@ -325,7 +335,7 @@ Item
y: pageRoot.height / 4.7
opacity: 0
color: config.color_text
color: config.color_error_text
font
{
@ -338,6 +348,19 @@ Item
}
Rectangle
{
id: errorMessageBg
x: errorMessage.x - 10
y: errorMessage.y - 5
width: errorMessage.width + 20
height: errorMessage.height + 10
color: config.color_error_bg
opacity: 0
Behavior on opacity { NumberAnimation { duration: userListContainer.scrollDuration } }
}
ParallelAnimation
{
id: progressBarLoop
@ -387,11 +410,13 @@ Item
NumberAnimation { target: passwordField; property: "opacity"; to: 1; duration: userListContainer.scrollDuration }
NumberAnimation { target: passwordFieldPlaceholder; property: "opacity"; to: 1; duration: userListContainer.scrollDuration }
NumberAnimation { target: passwordFieldBg; property: "opacity"; to: 1; duration: userListContainer.scrollDuration }
NumberAnimation { target: progressBar; property: "opacity"; to: 1; duration: userListContainer.scrollDuration }
NumberAnimation { target: buttonUserBack; property: "opacity"; to: 1; duration: userListContainer.scrollDuration }
NumberAnimation { target: buttonUserLogin; property: "opacity"; to: 1; duration: userListContainer.scrollDuration }
NumberAnimation { target: passwordField; property: "y"; to: pageRoot.height / 2.3 + 35; duration: userListContainer.scrollDuration }
NumberAnimation { target: passwordField; property: "y"; to: pageRoot.height / 2.3 + 37; duration: userListContainer.scrollDuration }
NumberAnimation { target: passwordFieldBg; property: "y"; to: pageRoot.height / 2.3 + 30; duration: userListContainer.scrollDuration }
NumberAnimation { target: progressBar; property: "y"; to: pageRoot.height / 2.3 + 70; duration: userListContainer.scrollDuration }
NumberAnimation { target: buttonUserBack; property: "y"; to: pageRoot.height / 2.3 + 74; duration: userListContainer.scrollDuration }
NumberAnimation { target: buttonUserLogin; property: "y"; to: pageRoot.height / 2.3 + 74; duration: userListContainer.scrollDuration }
@ -415,11 +440,13 @@ Item
NumberAnimation { target: passwordField; property: "opacity"; to: 0; duration: userListContainer.scrollDuration }
NumberAnimation { target: passwordFieldPlaceholder; property: "opacity"; to: 0; duration: userListContainer.scrollDuration }
NumberAnimation { target: passwordFieldBg; property: "opacity"; to: 0; duration: userListContainer.scrollDuration }
NumberAnimation { target: progressBar; property: "opacity"; to: 0; duration: userListContainer.scrollDuration }
NumberAnimation { target: buttonUserBack; property: "opacity"; to: 0; duration: userListContainer.scrollDuration }
NumberAnimation { target: buttonUserLogin; property: "opacity"; to: 0; duration: userListContainer.scrollDuration }
NumberAnimation { target: passwordField; property: "y"; to: pageRoot.height / 2.3 + 60; duration: userListContainer.scrollDuration }
NumberAnimation { target: passwordField; property: "y"; to: pageRoot.height / 2.3 + 62; duration: userListContainer.scrollDuration }
NumberAnimation { target: passwordFieldBg; property: "y"; to: pageRoot.height / 2.3 + 55; duration: userListContainer.scrollDuration }
NumberAnimation { target: progressBar; property: "y"; to: pageRoot.height / 2.3 + 105; duration: userListContainer.scrollDuration }
NumberAnimation { target: buttonUserBack; property: "y"; to: pageRoot.height / 2.3 + 109; duration: userListContainer.scrollDuration }
NumberAnimation { target: buttonUserLogin; property: "y"; to: pageRoot.height / 2.3 + 109; duration: userListContainer.scrollDuration }
@ -511,12 +538,15 @@ Item
{
id: loginEnterAnimation
NumberAnimation { target: passwordField; property: "opacity"; to: 0; duration: userListContainer.scrollDuration }
NumberAnimation { target: passwordFieldBg; property: "height"; to: 0; duration: userListContainer.scrollDuration }
NumberAnimation { target: passwordFieldBg; property: "y"; to: pageRoot.height / 2.3 + 70; duration: userListContainer.scrollDuration }
NumberAnimation { target: passwordFieldPlaceholder; property: "opacity"; to: 0; duration: userListContainer.scrollDuration }
NumberAnimation { target: buttonUserBack; property: "opacity"; to: 0; duration: userListContainer.scrollDuration }
NumberAnimation { target: buttonUserLogin; property: "opacity"; to: 0; duration: userListContainer.scrollDuration }
NumberAnimation { target: progressBar; property: "opacity"; to: 0.5; duration: userListContainer.scrollDuration }
NumberAnimation { target: progressBarSlider1; property: "opacity"; to: 1; duration: userListContainer.scrollDuration }
NumberAnimation { target: progressBarSlider2; property: "opacity"; to: 1; duration: userListContainer.scrollDuration }
NumberAnimation { target: middleItem; property: "y"; to: pageRoot.height / 2.3 - 15; duration: userListContainer.scrollDuration }
NumberAnimation { target: middleItem; property: "y"; to: pageRoot.height / 2.3; duration: userListContainer.scrollDuration }
}
@ -524,6 +554,9 @@ Item
{
id: loginExitAnimation
NumberAnimation { target: passwordField; property: "opacity"; to: 1; duration: userListContainer.scrollDuration }
NumberAnimation { target: passwordFieldBg; property: "height"; to: 40; duration: userListContainer.scrollDuration }
NumberAnimation { target: passwordFieldBg; property: "y"; to: pageRoot.height / 2.3 + 30; duration: userListContainer.scrollDuration }
NumberAnimation { target: passwordFieldPlaceholder; property: "opacity"; to: 1; duration: userListContainer.scrollDuration }
NumberAnimation { target: buttonUserBack; property: "opacity"; to: 1; duration: userListContainer.scrollDuration }
NumberAnimation { target: buttonUserLogin; property: "opacity"; to: 1; duration: userListContainer.scrollDuration }
NumberAnimation { target: progressBar; property: "opacity"; to: 1; duration: userListContainer.scrollDuration }
@ -579,6 +612,7 @@ Item
if (hasLoginShown)
{
errorMessage.opacity = 0
errorMessageBg.opacity = 0
pageRoot.lockNav()
pageRoot.enabled = false
progressBarLoop.start()
@ -597,6 +631,7 @@ Item
{
userListShowOther.start()
errorMessage.opacity = 0
errorMessageBg.opacity = 0
}
}

4
slice/theme.conf
View file

@ -10,3 +10,7 @@ color_text=#dddddd
color_placeholder_text=#888888
color_selection_bg=#555555
color_selection_text=#dddddd
color_text_bg=#22ffffff
color_icon_bg=#11ffffff
color_error_bg=#11ffffff
color_error_text=#dddddd