From b34e5d9570802572f85f324d7811edf0e206283b Mon Sep 17 00:00:00 2001 From: RadRussianRus Date: Thu, 31 May 2018 02:26:51 +0300 Subject: [PATCH] Added backgrounds to text and image elements --- README.md | 4 +++ slice/LoopListPowerItem.qml | 23 +++++++++++++-- slice/LoopListSessionItem.qml | 13 +++++++-- slice/LoopListUserItem.qml | 26 +++++++++++++++-- slice/PagePower.qml | 11 +------- slice/PageUsers.qml | 53 +++++++++++++++++++++++++++++------ slice/theme.conf | 6 +++- 7 files changed, 108 insertions(+), 28 deletions(-) diff --git a/README.md b/README.md index 5b0b74b..f6508d4 100644 --- a/README.md +++ b/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 diff --git a/slice/LoopListPowerItem.qml b/slice/LoopListPowerItem.qml index 93e3f0e..c8be061 100644 --- a/slice/LoopListPowerItem.qml +++ b/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() diff --git a/slice/LoopListSessionItem.qml b/slice/LoopListSessionItem.qml index 0b7fbed..21ba5a6 100644 --- a/slice/LoopListSessionItem.qml +++ b/slice/LoopListSessionItem.qml @@ -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 } } \ No newline at end of file diff --git a/slice/LoopListUserItem.qml b/slice/LoopListUserItem.qml index e2e67d2..8bfdb48 100644 --- a/slice/LoopListUserItem.qml +++ b/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.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 + } } \ No newline at end of file diff --git a/slice/PagePower.qml b/slice/PagePower.qml index 2465117..f22f7c5 100644 --- a/slice/PagePower.qml +++ b/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" diff --git a/slice/PageUsers.qml b/slice/PageUsers.qml index 908a4e2..20b923e 100644 --- a/slice/PageUsers.qml +++ b/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 - 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 } } diff --git a/slice/theme.conf b/slice/theme.conf index 012c6cf..866dac5 100644 --- a/slice/theme.conf +++ b/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 \ No newline at end of file +color_selection_text=#dddddd +color_text_bg=#22ffffff +color_icon_bg=#11ffffff +color_error_bg=#11ffffff +color_error_text=#dddddd \ No newline at end of file