aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorPaweł Gronowski <a4b8231fbf6d87ff4c04@woland.xyz>2020-03-06 19:33:07 +0100
committerPaweł Gronowski <a4b8231fbf6d87ff4c04@woland.xyz>2020-03-17 14:47:21 +0100
commit9bfe2ad59977e6bcde18e03d7cb32ac701d6e883 (patch)
treec9effe0d644f36eec14185cdc3b411200c11a386
parenta73b19daa8ef0e3feb2ee21f9d1e7bc77801636c (diff)
Material: Make Slider's track accent colored and semi-transparent
According to the Material Design guidelines Slider's track should be accent colored and semi-transparent. Additionally it should be a bit thicker. The original ticket in the bug tracker mentions it to be 2px 2px but I think that the 4px makes it look a lot more like the one presented in the guidelines (https://material.io/components/sliders/). Task-number: QTBUG-70768 Fixes: QTBUG-70768 Change-Id: I062c0938297ae877b37605b6d536e11b464d477f Reviewed-by: Mitch Curtis <mitch.curtis@qt.io>
-rw-r--r--src/imports/controls/material/Slider.qml11
1 files changed, 6 insertions, 5 deletions
diff --git a/src/imports/controls/material/Slider.qml b/src/imports/controls/material/Slider.qml
index 8c1ef12e..ac7a0c42 100644
--- a/src/imports/controls/material/Slider.qml
+++ b/src/imports/controls/material/Slider.qml
@@ -36,6 +36,7 @@
import QtQuick 2.12
import QtQuick.Templates 2.12 as T
+import QtQuick.Controls.impl 2.12
import QtQuick.Controls.Material 2.12
import QtQuick.Controls.Material.impl 2.12
@@ -63,16 +64,16 @@ T.Slider {
y: control.topPadding + (control.horizontal ? (control.availableHeight - height) / 2 : 0)
implicitWidth: control.horizontal ? 200 : 48
implicitHeight: control.horizontal ? 48 : 200
- width: control.horizontal ? control.availableWidth : 1
- height: control.horizontal ? 1 : control.availableHeight
+ width: control.horizontal ? control.availableWidth : 4
+ height: control.horizontal ? 4 : control.availableHeight
scale: control.horizontal && control.mirrored ? -1 : 1
- color: control.enabled ? control.Material.foreground : control.Material.sliderDisabledColor
+ color: control.enabled ? Color.transparent(control.Material.accentColor, 0.33) : control.Material.sliderDisabledColor
Rectangle {
x: control.horizontal ? 0 : (parent.width - width) / 2
y: control.horizontal ? (parent.height - height) / 2 : control.visualPosition * parent.height
- width: control.horizontal ? control.position * parent.width : 3
- height: control.horizontal ? 3 : control.position * parent.height
+ width: control.horizontal ? control.position * parent.width : 4
+ height: control.horizontal ? 4 : control.position * parent.height
color: control.enabled ? control.Material.accentColor : control.Material.sliderDisabledColor
}