Implement "right-to-left" Slider

harbour-batterybuddy.pro

@@ -24,6 +24,7 @@ SOURCES += src/harbour-batterybuddy.cpp \
 
 DISTFILES += qml/harbour-batterybuddy.qml \
     qml/components/AboutLabel.qml \
+    qml/components/MySlider.qml \
     qml/pages\LicensePage.qml \
     qml/cover/CoverPage.qml \
     rpm/harbour-batterybuddy.spec \

qml/components/MySlider.qml

@@ -0,0 +1,107 @@
+/****************************************************************************************
+**
+** Copyright (C) 2013 Jolla Ltd.
+** Contact: Martin Jones <martin.jones@jollamobile.com>
+** All rights reserved.
+**
+** This file is part of Sailfish Silica UI component package.
+**
+** You may use this file under the terms of BSD license as follows:
+**
+** Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are met:
+**     * Redistributions of source code must retain the above copyright
+**       notice, this list of conditions and the following disclaimer.
+**     * Redistributions in binary form must reproduce the above copyright
+**       notice, this list of conditions and the following disclaimer in the
+**       documentation and/or other materials provided with the distribution.
+**     * Neither the name of the Jolla Ltd nor the
+**       names of its contributors may be used to endorse or promote products
+**       derived from this software without specific prior written permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
+** ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+** WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+** DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDERS OR CONTRIBUTORS BE LIABLE FOR
+** ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+** (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+** LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+** ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
+** SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+**
+****************************************************************************************/
+
+import QtQuick 2.4
+import Sailfish.Silica 1.0
+import Sailfish.Silica.private 1.0
+
+SliderBase {
+    id: slider
+
+    property color backgroundGlowColor: slider.colorScheme === Theme.DarkOnLight ? palette.highlightDimmerColor : "transparent"
+
+    readonly property real _glassItemPadding: Theme.paddingMedium
+
+    // Left-to-right/right-to-left support by Matti Viljanen aka direc85 2020
+    property int highlightDirection: Qt.LeftToRight
+
+    // compensate the existence of glow effect on light ambiences
+    _highlightPadding: (slider.colorScheme === Theme.LightOnDark ? 1 : 2) * _glassItemPadding
+
+    _highlightItem: highlight
+    _backgroundItem: background
+    _progressBarItem: progressBar
+
+
+    GlassItem {
+        id: background
+
+        // extra painting margins (Theme.paddingMedium on both sides) are needed,
+        // because glass item doesn't visibly paint across the full width of the item
+        x: slider.leftMargin-_glassItemPadding
+        width: slider._grooveWidth + 2*_glassItemPadding
+        y: slider._extraPadding + _backgroundTopPadding
+        height: (slider.colorScheme === Theme.DarkOnLight ? 1.0 : 0.5) * Theme.itemSizeExtraSmall
+
+        dimmed: true
+        radius: slider.colorScheme === Theme.DarkOnLight ? 0.06 : 0.05
+        falloffRadius: slider.colorScheme === Theme.DarkOnLight ? 0.09 : 0.05
+        ratio: 0.0
+        color: slider.highlighted ? slider.secondaryHighlightColor : slider.backgroundColor
+    }
+
+    GlassItem {
+        id: progressBar
+
+        anchors {
+            verticalCenter: background.verticalCenter
+            left: highlightDirection === Qt.LeftToRight ? background.left : highlight.horizontalCenter
+            right: highlightDirection === Qt.LeftToRight ? highlight.horizontalCenter : background.right
+            leftMargin: highlightDirection === Qt.LeftToRight ? 0 : -_glassItemPadding
+            rightMargin: highlightDirection === Qt.LeftToRight ? -_glassItemPadding : 0
+        }
+        height: background.height
+        visible: sliderValue >= minimumValue && sliderValue <= maximumValue
+        dimmed: false
+        radius: slider.colorScheme === Theme.DarkOnLight ? 0.05 : 0.04
+        falloffRadius: slider.colorScheme === Theme.DarkOnLight ? 0.14 : 0.10
+        ratio: 0.0
+        color: slider.highlighted ? slider.highlightColor : slider.color
+        backgroundColor: slider.backgroundGlowColor
+    }
+
+    GlassItem {
+        id: highlight
+
+        x: slider._highlightX
+        width: Theme.itemSizeMedium
+        height: Theme.itemSizeMedium
+        radius: 0.17
+        falloffRadius: 0.17
+        anchors.verticalCenter: background.verticalCenter
+        visible: handleVisible
+        color: slider.highlighted ? slider.highlightColor : slider.color
+        backgroundColor: slider.backgroundGlowColor
+    }
+}

qml/pages/SettingsPage.qml

@@ -17,6 +17,7 @@
  */
 import QtQuick 2.0
 import Sailfish.Silica 1.0
+import "../components"
 
 Page {
     id: settingsPage
@@ -45,7 +46,7 @@ Page {
                 text: qsTr("Alert settings")
                 color: Theme.highlightColor
             }
-            Slider {
+            MySlider {
                 width: parent.width
                 label: qsTr("Alert interval")
                 minimumValue: 60
@@ -63,7 +64,7 @@ Page {
                 color: Theme.primaryColor
                 font.pixelSize: Theme.fontSizeSmall
             }
-            Slider {
+            MySlider {
                 id: highAlertSlider
                 width: parent.width
                 label: qsTr("Charging limit")
@@ -72,13 +73,14 @@ Page {
                 stepSize: 1
                 value: settings.highAlert
                 valueText: value + "%"
+                highlightDirection: Qt.RightToLeft
                 onValueChanged: {
                     settings.highLimit = value
                     if(lowAlertSlider.value >= value)
                         lowAlertSlider.value = value - 1
                 }
             }
-            Slider {
+            MySlider {
                 id: lowAlertSlider
                 width: parent.width
                 label: qsTr("Discharging limit")
@@ -101,7 +103,7 @@ Page {
                 onCheckedChanged: settings.limitEnabled = checked
             }
 
-            Slider {
+            MySlider {
                 id: highLimitSlider
                 handleVisible: enabled
                 width: parent.width
@@ -111,13 +113,14 @@ Page {
                 stepSize: 1
                 value: settings.lowLimit
                 valueText: value + "%"
+                highlightDirection: Qt.RightToLeft
                 onValueChanged: {
                     settings.lowLimit = value
                     if(lowLimitSlider.value >= value)
                         lowLimitSlider.value = value - 1
                 }
             }
-            Slider {
+            MySlider {
                 id: lowLimitSlider
                 handleVisible: enabled
                 width: parent.width