[components] basic Slider and ProgressBar with reusable groove

src/styles/GrooveStyle.qml

+/*
+ * Copyright (C) 2013 Simonas Leleiva <simonas.leleiva@gmail.com>
+ *
+ * This library is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Library General Public
+ * License as published by the Free Software Foundation; either
+ * version 2 of the License, or (at your option) any later version.
+ *
+ * This library is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Library General Public License for more details.
+ *
+ * You should have received a copy of the GNU Library General Public License
+ * along with this library; see the file COPYING.LIB.  If not, write to
+ * the Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor,
+ * Boston, MA 02110-1301, USA.
+ */
+
+import QtQuick 2.1
+import QtQuick.Controls.Styles.Nemo 1.0
+
+Component {
+    Rectangle {
+        implicitHeight: 16
+        implicitWidth: 440
+        color: Theme.groove.backgroundColor
+        Rectangle {
+            antialiasing: true
+            radius: 1
+            color: Theme.groove.foregroundColor
+            height: parent.height
+            width: parent.width * control.value / control.maximumValue
+        }
+    }
+}
+

src/styles/ProgressBarStyle.qml

@@ -21,5 +21,9 @@ import QtQuick 2.1
 import QtQuick.Controls.Styles 1.0
 
 ProgressBarStyle {
+    GrooveStyle {
+        id: grooveStyle
+    }
 
+    panel: grooveStyle;
 }

src/styles/SliderStyle.qml

@@ -21,5 +21,11 @@ import QtQuick 2.1
 import QtQuick.Controls.Styles 1.0
 
 SliderStyle {
+    GrooveStyle {
+        id: grooveStyle
+    }
 
+    handle: Item { }
+
+    groove: grooveStyle;
 }

src/styles/private/ControlsStyleConfig.qml

@@ -70,7 +70,11 @@ QtObject {
                  edgeColor: themeConfig.primaryButton.pressedGradient.edgeColor
              }
          })
-}
-
 
+    property var groove:
+        ({
+             foregroundColor: themeConfig.groove.foreground,
+             backgroundColor: themeConfig.groove.background,
+         })
+}
 

src/styles/styles.pro

@@ -12,6 +12,7 @@ QML_FILES = \
     CheckBoxStyle.qml \
     ComboBoxStyle.qml \
     FocusFrameStyle.qml \
+    GrooveStyle.qml \
     GroupBoxStyle.qml \
     MenuBarStyle.qml \
     MenuStyle.qml \

src/styles/themes/Theme1.js

@@ -23,6 +23,7 @@ var themeName = "Glacier"
 var accentColor = "#0091e5"
 
 var fillColor = "#474747"
+var fillColorDark = "#313131"
 
 // BUTTON STYLING
 var button = {
@@ -42,3 +43,10 @@ var primaryButton = {
         edgeColor: accentColor
     }
 }
+
+// STYLE FOR SLIDER AND PROGRESS BAR GROOVES
+var groove = {
+    foreground: accentColor,
+    background: fillColorDark,
+}
+

src/styles/themes/Theme2.js

@@ -23,6 +23,7 @@ var themeName = "Ugly Test Theme"
 var accentColor = "#FF7F00"
 
 var fillColor = "#474747"
+var fillColorDark = "#202020"
 
 // BUTTON STYLING
 var button = {
@@ -42,3 +43,10 @@ var primaryButton = {
         edgeColor: accentColor
     }
 }
+
+// STYLE FOR SLIDER AND PROGRESS BAR GROOVES
+var groove = {
+    foreground: accentColor,
+    background: fillColorDark,
+}
+