Salastil/DankMaterialShell
1
0
Fork 0
mirror of https://github.com/AvengeMedia/DankMaterialShell.git synced 2025-12-07 05:55:37 -05:00
Code Packages Releases Activity

dankslider: tooltip with value

Browse Source
This commit is contained in:
bbedward
2025-07-24 16:29:31 -04:00
parent 0e968d910d
commit 0208f1e840
4 changed files with 210 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
Modules/ControlCenter/ControlCenterPopout.qml
View File

@@ -671,6 +671,55 @@ PanelWindow {
visible: root.currentTab === "display" visible: root.currentTab === "display"
spacing: Theme.spacingL spacing: Theme.spacingL
property var brightnessDebounceTimer: Timer {
interval: BrightnessService.ddcAvailable ? 500 : 50
repeat: false
property int pendingValue: 0
onTriggered: {
BrightnessService.setBrightness(pendingValue);
}
}
// Brightness Control
Column {
width: parent.width
spacing: Theme.spacingS
visible: BrightnessService.brightnessAvailable
StyledText {
text: "Brightness"
font.pixelSize: Theme.fontSizeMedium
color: Theme.surfaceText
font.weight: Font.Medium
}
DankSlider {
width: parent.width
height: 24
value: BrightnessService.brightnessLevel
leftIcon: "brightness_low"
rightIcon: "brightness_high"
enabled: BrightnessService.brightnessAvailable
showValue: true
onSliderValueChanged: function(newValue) {
parent.parent.brightnessDebounceTimer.pendingValue = newValue;
parent.parent.brightnessDebounceTimer.restart();
}
onSliderDragFinished: function(finalValue) {
parent.parent.brightnessDebounceTimer.stop();
BrightnessService.setBrightness(finalValue);
}
}
StyledText {
text: "ddc changes can be slow to respond"
font.pixelSize: Theme.fontSizeSmall
color: Theme.surfaceVariantText
visible: BrightnessService.ddcAvailable && !BrightnessService.laptopBacklightAvailable
anchors.horizontalCenter: parent.horizontalCenter
}
}
DankToggle { DankToggle {
width: parent.width width: parent.width
text: "Night Mode" text: "Night Mode"

4
Modules/Settings/AppearanceTab.qml
View File

@@ -145,7 +145,7 @@ ScrollView {
minimum: 0 minimum: 0
maximum: 100 maximum: 100
unit: "" unit: ""
showValue: false showValue: true
onSliderValueChanged: (newValue) => { onSliderValueChanged: (newValue) => {
Prefs.setTopBarTransparency(newValue / 100); Prefs.setTopBarTransparency(newValue / 100);
} }
@@ -170,7 +170,7 @@ ScrollView {
minimum: 0 minimum: 0
maximum: 100 maximum: 100
unit: "" unit: ""
showValue: false showValue: true
onSliderValueChanged: (newValue) => { onSliderValueChanged: (newValue) => {
Prefs.setPopupTransparency(newValue / 100); Prefs.setPopupTransparency(newValue / 100);
} }

4
Modules/Settings/WidgetsTab.qml
View File

@@ -288,7 +288,7 @@ ScrollView {
maximum: 100 maximum: 100
value: Math.round(Prefs.osLogoBrightness * 100) value: Math.round(Prefs.osLogoBrightness * 100)
unit: "" unit: ""
showValue: false showValue: true
onSliderValueChanged: (newValue) => { onSliderValueChanged: (newValue) => {
Prefs.setOSLogoBrightness(newValue / 100); Prefs.setOSLogoBrightness(newValue / 100);
} }
@@ -313,7 +313,7 @@ ScrollView {
maximum: 200 maximum: 200
value: Math.round(Prefs.osLogoContrast * 100) value: Math.round(Prefs.osLogoContrast * 100)
unit: "" unit: ""
showValue: false showValue: true
onSliderValueChanged: (newValue) => { onSliderValueChanged: (newValue) => {
Prefs.setOSLogoContrast(newValue / 100); Prefs.setOSLogoContrast(newValue / 100);
} }

306
Widgets/DankSlider.qml
View File

@@ -18,195 +18,199 @@ Item {
signal sliderValueChanged(int newValue) signal sliderValueChanged(int newValue)
signal sliderDragFinished(int finalValue) signal sliderDragFinished(int finalValue)
height: 80 height: 40
Column { Row {
anchors.fill: parent anchors.centerIn: parent
width: parent.width
spacing: Theme.spacingM spacing: Theme.spacingM
// Value display DankIcon {
StyledText { name: slider.leftIcon
text: slider.value + slider.unit size: Theme.iconSize
font.pixelSize: Theme.fontSizeMedium
color: slider.enabled ? Theme.surfaceText : Theme.surfaceVariantText color: slider.enabled ? Theme.surfaceText : Theme.surfaceVariantText
font.weight: Font.Medium anchors.verticalCenter: parent.verticalCenter
visible: slider.showValue visible: slider.leftIcon.length > 0
anchors.horizontalCenter: parent.horizontalCenter
} }
// Slider row StyledRect {
Row { id: sliderTrack
width: parent.width
spacing: Theme.spacingM
// Left icon property int leftIconWidth: slider.leftIcon.length > 0 ? Theme.iconSize : 0
DankIcon { property int rightIconWidth: slider.rightIcon.length > 0 ? Theme.iconSize : 0
name: slider.leftIcon
size: Theme.iconSize width: parent.width - (leftIconWidth + rightIconWidth + (slider.leftIcon.length > 0 ? Theme.spacingM : 0) + (slider.rightIcon.length > 0 ? Theme.spacingM : 0))
color: slider.enabled ? Theme.surfaceText : Theme.surfaceVariantText height: 6
anchors.verticalCenter: parent.verticalCenter radius: 3
visible: slider.leftIcon.length > 0 color: slider.enabled ? Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.3) : Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.1)
anchors.verticalCenter: parent.verticalCenter
StyledRect {
id: sliderFill
width: parent.width * ((slider.value - slider.minimum) / (slider.maximum - slider.minimum))
height: parent.height
radius: parent.radius
color: slider.enabled ? Theme.primary : Theme.surfaceVariantText
Behavior on width {
NumberAnimation {
duration: Theme.shortDuration
easing.type: Theme.standardEasing
}
}
} }
// Slider track
StyledRect { StyledRect {
id: sliderTrack id: sliderHandle
property int leftIconWidth: slider.leftIcon.length > 0 ? Theme.iconSize : 0 width: 18
property int rightIconWidth: slider.rightIcon.length > 0 ? Theme.iconSize : 0 height: 18
radius: 9
width: parent.width - (leftIconWidth + rightIconWidth + (slider.leftIcon.length > 0 ? Theme.spacingM : 0) + (slider.rightIcon.length > 0 ? Theme.spacingM : 0)) color: slider.enabled ? Theme.primary : Theme.surfaceVariantText
height: 6 border.color: slider.enabled ? Qt.lighter(Theme.primary, 1.3) : Qt.lighter(Theme.surfaceVariantText, 1.3)
radius: 3 border.width: 2
color: slider.enabled ? Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.3) : Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.1) x: Math.max(0, Math.min(parent.width - width, sliderFill.width - width / 2))
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
scale: sliderMouseArea.containsMouse || sliderMouseArea.pressed ? 1.2 : 1
// Fill
StyledRect { StyledRect {
id: sliderFill anchors.centerIn: parent
width: parent.width + 4
width: parent.width * ((slider.value - slider.minimum) / (slider.maximum - slider.minimum)) height: parent.height + 4
height: parent.height radius: width / 2
radius: parent.radius color: "transparent"
color: slider.enabled ? Theme.primary : Theme.surfaceVariantText border.color: Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.3)
Behavior on width {
NumberAnimation {
duration: Theme.shortDuration
easing.type: Theme.standardEasing
}
}
}
// Draggable handle
StyledRect {
id: sliderHandle
width: 18
height: 18
radius: 9
color: slider.enabled ? Theme.primary : Theme.surfaceVariantText
border.color: slider.enabled ? Qt.lighter(Theme.primary, 1.3) : Qt.lighter(Theme.surfaceVariantText, 1.3)
border.width: 2 border.width: 2
x: Math.max(0, Math.min(parent.width - width, sliderFill.width - width / 2)) visible: sliderMouseArea.containsMouse && slider.enabled
anchors.verticalCenter: parent.verticalCenter }
scale: sliderMouseArea.containsMouse || sliderMouseArea.pressed ? 1.2 : 1
// Handle glow effect when active Behavior on scale {
StyledRect { NumberAnimation {
duration: Theme.shortDuration
easing.type: Theme.standardEasing
}
}
StyledRect {
id: valueTooltip
width: tooltipText.contentWidth + Theme.spacingS * 2
height: tooltipText.contentHeight + Theme.spacingXS * 2
radius: Theme.cornerRadiusSmall
color: Theme.surfaceContainer
border.color: Theme.outline
border.width: 1
anchors.bottom: parent.top
anchors.bottomMargin: Theme.spacingS
anchors.horizontalCenter: parent.horizontalCenter
visible: (sliderMouseArea.containsMouse && slider.showValue) || (slider.isDragging && slider.showValue)
opacity: visible ? 1 : 0
Text {
id: tooltipText
text: slider.value + slider.unit
font.pixelSize: Theme.fontSizeSmall
color: Theme.surfaceText
font.weight: Font.Medium
anchors.centerIn: parent anchors.centerIn: parent
width: parent.width + 4 font.hintingPreference: Font.PreferFullHinting
height: parent.height + 4
radius: width / 2
color: "transparent"
border.color: Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.3)
border.width: 2
visible: sliderMouseArea.containsMouse && slider.enabled
} }
Behavior on scale { Behavior on opacity {
NumberAnimation { NumberAnimation {
duration: Theme.shortDuration duration: Theme.shortDuration
easing.type: Theme.standardEasing easing.type: Theme.standardEasing
} }
} }
} }
}
Item { Item {
id: sliderContainer id: sliderContainer
anchors.fill: parent
MouseArea {
id: sliderMouseArea
property bool isDragging: false
anchors.fill: parent anchors.fill: parent
anchors.topMargin: -10
MouseArea { anchors.bottomMargin: -10
id: sliderMouseArea hoverEnabled: true
cursorShape: slider.enabled ? Qt.PointingHandCursor : Qt.ArrowCursor
property bool isDragging: false enabled: slider.enabled
preventStealing: true
anchors.fill: parent onPressed: (mouse) => {
hoverEnabled: true if (slider.enabled) {
cursorShape: slider.enabled ? Qt.PointingHandCursor : Qt.ArrowCursor slider.isDragging = true;
enabled: slider.enabled sliderMouseArea.isDragging = true;
preventStealing: true let ratio = Math.max(0, Math.min(1, mouse.x / width));
onPressed: (mouse) => { let newValue = Math.round(slider.minimum + ratio * (slider.maximum - slider.minimum));
if (slider.enabled) { slider.value = newValue;
slider.isDragging = true; slider.sliderValueChanged(newValue);
sliderMouseArea.isDragging = true;
let ratio = Math.max(0, Math.min(1, mouse.x / width));
let newValue = Math.round(slider.minimum + ratio * (slider.maximum - slider.minimum));
slider.value = newValue;
slider.sliderValueChanged(newValue);
}
}
onReleased: {
if (slider.enabled) {
slider.isDragging = false;
sliderMouseArea.isDragging = false;
slider.sliderDragFinished(slider.value);
}
}
onPositionChanged: (mouse) => {
if (pressed && slider.isDragging && slider.enabled) {
let ratio = Math.max(0, Math.min(1, mouse.x / width));
let newValue = Math.round(slider.minimum + ratio * (slider.maximum - slider.minimum));
slider.value = newValue;
slider.sliderValueChanged(newValue);
}
}
onClicked: (mouse) => {
if (slider.enabled && !slider.isDragging) {
let ratio = Math.max(0, Math.min(1, mouse.x / width));
let newValue = Math.round(slider.minimum + ratio * (slider.maximum - slider.minimum));
slider.value = newValue;
slider.sliderValueChanged(newValue);
}
} }
} }
onReleased: {
// Global mouse area for drag tracking if (slider.enabled) {
MouseArea { slider.isDragging = false;
id: sliderGlobalMouseArea sliderMouseArea.isDragging = false;
slider.sliderDragFinished(slider.value);
anchors.fill: sliderContainer }
enabled: slider.isDragging }
visible: false onPositionChanged: (mouse) => {
preventStealing: true if (pressed && slider.isDragging && slider.enabled) {
onPositionChanged: (mouse) => { let ratio = Math.max(0, Math.min(1, mouse.x / width));
if (slider.isDragging && slider.enabled) { let newValue = Math.round(slider.minimum + ratio * (slider.maximum - slider.minimum));
let globalPos = mapToItem(sliderTrack, mouse.x, mouse.y); slider.value = newValue;
let ratio = Math.max(0, Math.min(1, globalPos.x / sliderTrack.width)); slider.sliderValueChanged(newValue);
let newValue = Math.round(slider.minimum + ratio * (slider.maximum - slider.minimum)); }
slider.value = newValue; }
slider.sliderValueChanged(newValue); onClicked: (mouse) => {
} if (slider.enabled && !slider.isDragging) {
} let ratio = Math.max(0, Math.min(1, mouse.x / width));
onReleased: { let newValue = Math.round(slider.minimum + ratio * (slider.maximum - slider.minimum));
if (slider.isDragging && slider.enabled) { slider.value = newValue;
slider.isDragging = false; slider.sliderValueChanged(newValue);
sliderMouseArea.isDragging = false;
slider.sliderDragFinished(slider.value);
}
} }
} }
} }
} MouseArea {
id: sliderGlobalMouseArea
// Right icon anchors.fill: sliderContainer
DankIcon { enabled: slider.isDragging
name: slider.rightIcon visible: false
size: Theme.iconSize preventStealing: true
color: slider.enabled ? Theme.surfaceText : Theme.surfaceVariantText onPositionChanged: (mouse) => {
anchors.verticalCenter: parent.verticalCenter if (slider.isDragging && slider.enabled) {
visible: slider.rightIcon.length > 0 let globalPos = mapToItem(sliderTrack, mouse.x, mouse.y);
let ratio = Math.max(0, Math.min(1, globalPos.x / sliderTrack.width));
let newValue = Math.round(slider.minimum + ratio * (slider.maximum - slider.minimum));
slider.value = newValue;
slider.sliderValueChanged(newValue);
}
}
onReleased: {
if (slider.isDragging && slider.enabled) {
slider.isDragging = false;
sliderMouseArea.isDragging = false;
slider.sliderDragFinished(slider.value);
}
}
}
} }
} }
DankIcon {
name: slider.rightIcon
size: Theme.iconSize
color: slider.enabled ? Theme.surfaceText : Theme.surfaceVariantText
anchors.verticalCenter: parent.verticalCenter
visible: slider.rightIcon.length > 0
}
} }
} }