Added backgrounds to text and image elements

README.md

@@ -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
 

slice/LoopListPowerItem.qml

@@ -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()

slice/LoopListSessionItem.qml

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

slice/LoopListUserItem.qml

@@ -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.width: 60
-        sourceSize.height: 64
+        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
+    }
 }

slice/PagePower.qml

@@ -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"

slice/PageUsers.qml

@@ -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
+            x: 10
-            width: parent.width
+            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
         }
     }
 

slice/theme.conf

@@ -9,4 +9,8 @@ color_button_text=#1f1f1f
 color_text=#dddddd
 color_placeholder_text=#888888
 color_selection_bg=#555555
-color_selection_text=#dddddd
+color_selection_text=#dddddd
+color_text_bg=#22ffffff
+color_icon_bg=#11ffffff
+color_error_bg=#11ffffff
+color_error_text=#dddddd