Commit 268f78d4 authored by Nate Graham's avatar Nate Graham
Browse files

Un-hardcode slider appearance

Overriding and hardcoding the background and handle for the duration and
volume sliders resulted in a variety of issues, such as failure to
follow color schemes and fragile custom code. There were various reasons
why this was originally done, such as avoiding a harsh colored appearance
with the former Breeze slider style, and also increasing the size of the
hitbox. The former issue is largely improved by the new "Blue Ocean"
Breeze style in Plasma 5.23, and the latter issue is fixed with a simple
tweak to qqc2-desktop-style; see
https://bugs.kde.org/show_bug.cgi?id=410672.

Accordingly, this commit removes all the custom code and returns to using
a standard slider appearance.

Note that Frameworks 5.86 or current git master is required to avoid a
visual regression. I have noted this in the CMakeLists.txt file and will
formally bump the Frameworks dependency once 5.86 is tagged.

If the new appearance is judged to still be too colorful, we can always
go back to hardcoding just that.
parent ab4e4259
Pipeline #75953 passed with stage
in 8 minutes and 18 seconds
......@@ -22,7 +22,8 @@ find_package(Qt5 ${REQUIRED_QT_VERSION} CONFIG REQUIRED Core Network Qml Quick T
find_package(Qt5Core ${REQUIRED_QT_VERSION} CONFIG REQUIRED Private)
set(REQUIRED_KF5_VERSION "5.80.0")
# TODO: bump dependency to 5.86 once 5.86 is tagged
set(REQUIRED_KF5_VERSION "5.85.0")
find_package(ECM ${REQUIRED_KF5_VERSION} REQUIRED NO_MODULE)
set(CMAKE_MODULE_PATH "${CMAKE_CURRENT_SOURCE_DIR}/cmake" ${ECM_MODULE_PATH})
......
......@@ -18,15 +18,7 @@ RowLayout {
property bool seekable
property bool playEnabled
property color labelColor: "white"
property color sliderElapsedColor: "white"
property color sliderRemainingColor: "grey"
property color sliderHandleColor: "white"
property color sliderBorderInactiveColor: "white"
property color sliderBorderActiveColor: "grey"
property int sliderBackgroundHeight: Kirigami.Settings.isMobile ? Math.floor(Kirigami.Units.smallSpacing / 2) : 6
property int sliderHandleSize: Kirigami.Settings.isMobile ? Math.floor(Kirigami.Units.gridUnit * 0.75) : 18
property color labelColor
signal seek(int position)
......@@ -85,23 +77,12 @@ RowLayout {
}
}
// Synthesized slider background that's not actually a part of the
// slider. This is done so the slider's own background can be full
// height yet transparent, for easier clicking
Rectangle {
anchors.left: musicProgress.left
anchors.verticalCenter: musicProgress.verticalCenter
implicitWidth: seekWheelHandler.width
implicitHeight: sliderBackgroundHeight
color: sliderRemainingColor
radius: height / 2
}
Slider {
property bool seekStarted: false
property int seekValue
id: musicProgress
anchors.fill: parent
from: 0
......@@ -124,37 +105,6 @@ RowLayout {
seekStarted = false;
}
}
// This only provides a full-height area for clicking; see
// https://bugs.kde.org/show_bug.cgi?id=408703. The actual visual
// background is generated above ^^
background: Rectangle {
anchors.fill: parent
implicitWidth: seekWheelHandler.width
implicitHeight: seekWheelHandler.height
color: "transparent"
Rectangle {
anchors.verticalCenter: parent.verticalCenter
x: (LayoutMirroring.enabled ? musicProgress.visualPosition * parent.width : 0)
width: LayoutMirroring.enabled ? parent.width - musicProgress.visualPosition * parent.width: musicProgress.handle.x + radius
height: sliderBackgroundHeight
color: sliderElapsedColor
radius: height / 2
}
}
handle: Rectangle {
x: musicProgress.leftPadding + musicProgress.visualPosition * (musicProgress.availableWidth - width)
y: musicProgress.topPadding + musicProgress.availableHeight / 2 - height / 2
implicitWidth: sliderHandleSize
implicitHeight: sliderHandleSize
radius: width / 2
color: sliderHandleColor
border.width: elisaTheme.hairline
border.color: musicProgress.pressed ? sliderBorderActiveColor : sliderBorderInactiveColor
}
}
}
......
......@@ -86,11 +86,6 @@ BasePlayerControl {
onSeek: musicWidget.seek(position)
labelColor: myPalette.text
sliderElapsedColor: myPalette.text
sliderRemainingColor: myPalette.dark
sliderHandleColor: myPalette.base
sliderBorderInactiveColor: myPalette.dark
sliderBorderActiveColor: myPalette.text
}
FlatButtonWithToolTip {
......@@ -107,14 +102,7 @@ BasePlayerControl {
Layout.minimumWidth: elisaTheme.volumeSliderWidth
Layout.fillHeight: true
interactHeight: height
interactWidth: width
muted: muted
sliderElapsedColor: myPalette.text
sliderRemainingColor: myPalette.dark
sliderHandleColor: myPalette.base
sliderBorderInactiveColor: myPalette.dark
sliderBorderActiveColor: myPalette.text
}
Item { implicitWidth: Kirigami.Units.largeSpacing }
......
......@@ -14,22 +14,10 @@ import org.kde.elisa 1.0
MouseArea {
id: root
property alias interactHeight: interact.implicitHeight
property alias interactWidth: interact.implicitWidth
property alias sliderValue: volumeSlider.value
property alias slider: volumeSlider
property bool muted
// hardcode slider colours because theming doesn't really make sense on top of the blurred background
property color sliderElapsedColor
property color sliderRemainingColor
property color sliderHandleColor
property color sliderBorderActiveColor
property color sliderBorderInactiveColor
property int sliderHandleSize: Kirigami.Settings.isMobile ? Math.floor(Kirigami.Units.gridUnit * 0.75) : 18
property int sliderBackgroundHeight: Kirigami.Settings.isMobile ? Math.floor(Kirigami.Units.smallSpacing / 2) : 6
acceptedButtons: Qt.NoButton
onWheel: {
if (wheel.angleDelta.y > 0) {
......@@ -39,57 +27,13 @@ MouseArea {
}
}
// Synthesized slider background that's not actually a part of the
// slider. This is done so the slider's own background can be full
// height yet transparent, for easier clicking
Rectangle {
anchors.left: volumeSlider.left
anchors.verticalCenter: volumeSlider.verticalCenter
implicitWidth: volumeSlider.width
implicitHeight: sliderBackgroundHeight
color: sliderRemainingColor
radius: height / 2
opacity: muted ? 0.5 : 1
}
Slider {
id: volumeSlider
anchors.fill: parent
from: 0
to: 100
stepSize: 5
enabled: !root.muted
// This only provides a full-height area for clicking; see
// https://bugs.kde.org/show_bug.cgi?id=408703. The actual visual
// background is generated above ^^
background: Rectangle {
id: interact
anchors.fill: parent
color: "transparent"
Rectangle {
anchors.verticalCenter: parent.verticalCenter
x: (LayoutMirroring.enabled ? volumeSlider.visualPosition * parent.width : 0)
width: (LayoutMirroring.enabled ? parent.width - volumeSlider.visualPosition * parent.width : volumeSlider.visualPosition * parent.width)
height: sliderBackgroundHeight
color: sliderElapsedColor
radius: height / 2
opacity: root.muted ? 0.5 : 1
}
}
handle: Rectangle {
x: volumeSlider.leftPadding + volumeSlider.visualPosition * (volumeSlider.availableWidth - width)
y: volumeSlider.topPadding + volumeSlider.availableHeight / 2 - height / 2
implicitWidth: sliderHandleSize
implicitHeight: sliderHandleSize
radius: width / 2
color: sliderHandleColor
border.width: elisaTheme.hairline
border.color: volumeSlider.pressed ? sliderBorderActiveColor : (root.muted ? myPalette.mid : sliderBorderInactiveColor)
}
}
}
......@@ -198,13 +198,8 @@ BasePlayerControl {
playEnabled: musicWidget.playEnabled
onSeek: musicWidget.seek(position)
// these colours work over the blurred/darkened background
// this color works well over the blurred/darkened background
labelColor: "white"
sliderElapsedColor: "white"
sliderRemainingColor: "grey"
sliderHandleColor: "white"
sliderBorderInactiveColor: "white"
sliderBorderActiveColor: "grey"
}
}
......
......@@ -282,13 +282,8 @@ BasePlayerControl {
playEnabled: trackPlayer.playEnabled
onSeek: trackPlayer.seek(position)
// these colours work over the blurred/darkened background
// this color works well over the blurred/darkened background
labelColor: "white"
sliderElapsedColor: "white"
sliderRemainingColor: "grey"
sliderHandleColor: "white"
sliderBorderInactiveColor: "white"
sliderBorderActiveColor: "grey"
}
// bottom play controls
......
......@@ -51,14 +51,7 @@ FlatButtonWithToolTip {
id: slider
anchors.fill: parent
interactHeight: volumeSliderPopup.implicitHeight
interactWidth: volumeSliderPopup.implicitWidth
muted: volumeButton.muted
sliderElapsedColor: "white"
sliderRemainingColor: "grey"
sliderHandleColor: "white"
sliderBorderInactiveColor: "white"
sliderBorderActiveColor: "grey"
}
}
}
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment