From b00e024107fd51c43d12407d625cc1290b26d6f0 Mon Sep 17 00:00:00 2001 From: Matti Viljanen Date: Fri, 20 Mar 2020 22:57:59 +0200 Subject: [PATCH] Implement "right-to-left" Slider --- harbour-batterybuddy.pro | 1 + qml/components/MySlider.qml | 107 ++++++++++++++++++++++++++++++++++++ qml/pages/SettingsPage.qml | 13 +++-- 3 files changed, 116 insertions(+), 5 deletions(-) create mode 100644 qml/components/MySlider.qml diff --git a/harbour-batterybuddy.pro b/harbour-batterybuddy.pro index 2fe9355..7682bd5 100644 --- a/harbour-batterybuddy.pro +++ b/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 \ diff --git a/qml/components/MySlider.qml b/qml/components/MySlider.qml new file mode 100644 index 0000000..76180c6 --- /dev/null +++ b/qml/components/MySlider.qml @@ -0,0 +1,107 @@ +/**************************************************************************************** +** +** Copyright (C) 2013 Jolla Ltd. +** Contact: Martin Jones +** 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 + } +} diff --git a/qml/pages/SettingsPage.qml b/qml/pages/SettingsPage.qml index 1e93f44..61bf759 100644 --- a/qml/pages/SettingsPage.qml +++ b/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