kenji/illogical-impulse
1
0
Fork 0
forked from Shinonome/dots-hyprland
Code Pull Requests Activity

adjust slider design

Browse Source
This commit is contained in:
end-4
2025-05-24 22:42:12 +02:00
parent b80294181c
commit 929d3836fd
2 changed files with 23 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.config/quickshell/modules/common/widgets/StyledSlider.qml
+10 -8
View File
@@ -12,14 +12,16 @@ Slider {
property real scale: 0.85 property real scale: 0.85
property real backgroundDotSize: 4 * scale property real backgroundDotSize: 4 * scale
property real backgroundDotMargins: 4 * scale property real backgroundDotMargins: 4 * scale
property real handleMargins: (slider.pressed ? 3 : 6) * scale // property real handleMargins: 0 * scale
property real handleMargins: (slider.pressed ? 0 : 2) * scale
property real handleWidth: (slider.pressed ? 3 : 5) * scale property real handleWidth: (slider.pressed ? 3 : 5) * scale
property real handleHeight: 44 * scale property real handleHeight: 44 * scale
property real handleLimit: slider.backgroundDotMargins * scale property real handleLimit: slider.backgroundDotMargins * scale
property real trackHeight: 15 * scale property real trackHeight: 30 * scale
property color highlightColor: Appearance.m3colors.m3primary property color highlightColor: Appearance.m3colors.m3primary
property color trackColor: Appearance.m3colors.m3secondaryContainer property color trackColor: Appearance.m3colors.m3secondaryContainer
property color handleColor: Appearance.m3colors.m3onSecondaryContainer property color handleColor: Appearance.m3colors.m3onSecondaryContainer
property real trackRadius: Appearance.rounding.verysmall
property real limitedHandleRangeWidth: (slider.availableWidth - handleWidth - slider.handleLimit * 2) property real limitedHandleRangeWidth: (slider.availableWidth - handleWidth - slider.handleLimit * 2)
property string tooltipContent: `${Math.round(value * 100)}%` property string tooltipContent: `${Math.round(value * 100)}%`
@@ -55,11 +57,11 @@ Slider {
Rectangle { Rectangle {
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left anchors.left: parent.left
width: slider.handleLimit + slider.visualPosition * slider.limitedHandleRangeWidth - (slider.handleMargins + slider.handleWidth / 2) width: slider.handleLimit * 2 + slider.visualPosition * slider.limitedHandleRangeWidth - (slider.handleMargins + slider.handleWidth / 2)
height: trackHeight height: trackHeight
color: slider.highlightColor color: slider.highlightColor
topLeftRadius: Appearance.rounding.full topLeftRadius: slider.trackRadius
bottomLeftRadius: Appearance.rounding.full bottomLeftRadius: slider.trackRadius
topRightRadius: Appearance.rounding.unsharpen topRightRadius: Appearance.rounding.unsharpen
bottomRightRadius: Appearance.rounding.unsharpen bottomRightRadius: Appearance.rounding.unsharpen
} }
@@ -68,13 +70,13 @@ Slider {
Rectangle { Rectangle {
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
anchors.right: parent.right anchors.right: parent.right
width: slider.handleLimit + (1 - slider.visualPosition) * slider.limitedHandleRangeWidth - (slider.handleMargins + slider.handleWidth / 2) width: slider.handleLimit * 2 + (1 - slider.visualPosition) * slider.limitedHandleRangeWidth - (slider.handleMargins + slider.handleWidth / 2)
height: trackHeight height: trackHeight
color: slider.trackColor color: slider.trackColor
topLeftRadius: Appearance.rounding.unsharpen topLeftRadius: Appearance.rounding.unsharpen
bottomLeftRadius: Appearance.rounding.unsharpen bottomLeftRadius: Appearance.rounding.unsharpen
topRightRadius: Appearance.rounding.full topRightRadius: slider.trackRadius
bottomRightRadius: Appearance.rounding.full bottomRightRadius: slider.trackRadius
} }
// Dot at the end // Dot at the end
.config/quickshell/modules/sidebarRight/volumeMixer/VolumeMixerEntry.qml
+13 -11
View File
@@ -22,19 +22,10 @@ Item {
anchors.fill: parent anchors.fill: parent
spacing: 10 spacing: 10
Image {
Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
visible: source != ""
sourceSize.width: 38
sourceSize.height: 38
source: {
const icon = Icons.noKnowledgeIconGuess(root.node.properties["application.icon-name"]);
return Quickshell.iconPath(icon, "image-missing");
}
}
ColumnLayout { ColumnLayout {
Layout.fillWidth: true Layout.fillWidth: true
spacing: 0
RowLayout { RowLayout {
StyledText { StyledText {
Layout.fillWidth: true Layout.fillWidth: true
@@ -50,6 +41,17 @@ Item {
} }
RowLayout { RowLayout {
Image {
property real size: slider.trackHeight * 1.3
Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
visible: source != ""
sourceSize.width: size
sourceSize.height: size
source: {
const icon = Icons.noKnowledgeIconGuess(root.node.properties["application.icon-name"]);
return Quickshell.iconPath(icon, "image-missing");
}
}
StyledSlider { StyledSlider {
id: slider id: slider
value: root.node.audio.volume value: root.node.audio.volume