Added option to change progress bar colors

EricKotato · May 31, 2018 · af82a81 · af82a81
1 parent 4e177f6
commit af82a81
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -36,6 +36,9 @@ Create file `theme.conf.user` in theme folder. See `slice/theme.conf` for refere
 * `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`.
+* `color_progress_bar` - progress bar color. Defaults to `#dddddd`.
+* `color_progress_bar_slider` - progress bar color. Defaults to `#dddddd`.
+* `color_progress_bar_bg` - progress bar background color. Defaults to `#888888`.
 
 ## License
 

diff --git a/slice/PageUsers.qml b/slice/PageUsers.qml
@@ -275,7 +275,17 @@ Item
             width: parent.width
             height: 2
             opacity: hasLoginShown ? 1 : 0
-            color: config.color_text
+            color: config.color_progress_bar
+        }
+
+        Rectangle
+        {
+            id: progressBarBg
+            y: progressBar.y
+            width: parent.width
+            height: 2
+            opacity: 0
+            color: config.color_progress_bar_bg
         }
 
         Rectangle
@@ -286,7 +296,7 @@ Item
             width: parent.width / 5
             height: 2
             opacity: 0
-            color: config.color_text
+            color: config.color_progress_bar_slider
         }
 
         Rectangle
@@ -297,7 +307,7 @@ Item
             width: 0
             height: 2
             opacity: 0
-            color: config.color_text
+            color: config.color_progress_bar_slider
         }
 
         SlicedButton
@@ -543,9 +553,10 @@ Item
             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: progressBar; property: "opacity"; to: 0; 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: progressBarBg; property: "opacity"; to: 1; duration: userListContainer.scrollDuration }
             NumberAnimation { target: middleItem; property: "y"; to: pageRoot.height / 2.3; duration: userListContainer.scrollDuration }
 
         }
@@ -562,6 +573,7 @@ Item
             NumberAnimation { target: progressBar; property: "opacity"; to: 1; duration: userListContainer.scrollDuration }
             NumberAnimation { target: progressBarSlider1; property: "opacity"; to: 0; duration: userListContainer.scrollDuration }
             NumberAnimation { target: progressBarSlider2; property: "opacity"; to: 0; duration: userListContainer.scrollDuration }
+            NumberAnimation { target: progressBarBg; property: "opacity"; to: 0; duration: userListContainer.scrollDuration }
             NumberAnimation { target: middleItem; property: "y"; to: pageRoot.height / 2.3 - 40; duration: userListContainer.scrollDuration }
 
             onStopped:

diff --git a/slice/theme.conf b/slice/theme.conf
@@ -16,4 +16,7 @@ color_selection_text=#dddddd
 color_text_bg=#22ffffff
 color_icon_bg=#11ffffff
 color_error_bg=#11ffffff
-color_error_text=#dddddd
+color_error_text=#dddddd
+color_progress_bar=#dddddd
+color_progress_bar_slider=#dddddd
+color_progress_bar_bg=#888888