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

osd: also have left center and right center options

Browse Source
This commit is contained in:
bbedward
2025-11-17 14:05:04 -05:00
parent ccb4da3cd8
commit d1472dfcba
6 changed files with 414 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
quickshell/Common/SettingsData.qml
View File

@@ -25,7 +25,9 @@ Singleton {
Left,
Right,
TopCenter,
BottomCenter
BottomCenter,
LeftCenter,
RightCenter
}
enum AnimationSpeed {

184
quickshell/Modules/OSD/BrightnessOSD.qml
View File

@@ -6,8 +6,10 @@ import qs.Widgets
DankOSD {
id: root
osdWidth: Math.min(260, Screen.width - Theme.spacingM * 2)
osdHeight: 40 + Theme.spacingS * 2
readonly property bool useVertical: isVerticalLayout
osdWidth: useVertical ? (40 + Theme.spacingS * 2) : Math.min(260, Screen.width - Theme.spacingM * 2)
osdHeight: useVertical ? Math.min(260, Screen.height - Theme.spacingM * 2) : (40 + Theme.spacingS * 2)
autoHideInterval: 3000
enableMouseInteraction: true
@@ -20,8 +22,13 @@ DankOSD {
}
}
content: Item {
content: Loader {
anchors.fill: parent
sourceComponent: useVertical ? verticalContent : horizontalContent
}
Component {
id: horizontalContent
Item {
property int gap: Theme.spacingS
@@ -135,4 +142,175 @@ DankOSD {
}
}
}
Component {
id: verticalContent
Item {
anchors.fill: parent
property int gap: Theme.spacingS
Rectangle {
width: Theme.iconSize
height: Theme.iconSize
radius: Theme.iconSize / 2
color: "transparent"
anchors.horizontalCenter: parent.horizontalCenter
y: gap
DankIcon {
anchors.centerIn: parent
name: {
const deviceInfo = DisplayService.getCurrentDeviceInfo()
if (!deviceInfo || deviceInfo.class === "backlight" || deviceInfo.class === "ddc") {
return "brightness_medium"
} else if (deviceInfo.name.includes("kbd")) {
return "keyboard"
} else {
return "lightbulb"
}
}
size: Theme.iconSize
color: Theme.primary
}
}
Item {
id: vertSlider
width: 12
height: parent.height - Theme.iconSize - gap * 3 - 24
anchors.horizontalCenter: parent.horizontalCenter
y: gap * 2 + Theme.iconSize
property bool dragging: false
property int value: DisplayService.brightnessAvailable ? DisplayService.brightnessLevel : 0
readonly property int minimum: {
const deviceInfo = DisplayService.getCurrentDeviceInfo()
if (!deviceInfo) return 1
const isExponential = SessionData.getBrightnessExponential(deviceInfo.id)
if (isExponential) return 1
return (deviceInfo.class === "backlight" || deviceInfo.class === "ddc") ? 1 : 0
}
readonly property int maximum: {
const deviceInfo = DisplayService.getCurrentDeviceInfo()
if (!deviceInfo) return 100
const isExponential = SessionData.getBrightnessExponential(deviceInfo.id)
if (isExponential) return 100
return deviceInfo.displayMax || 100
}
Rectangle {
id: vertTrack
width: parent.width
height: parent.height
anchors.centerIn: parent
color: Theme.outline
radius: Theme.cornerRadius
}
Rectangle {
id: vertFill
width: parent.width
height: {
const ratio = (vertSlider.value - vertSlider.minimum) / (vertSlider.maximum - vertSlider.minimum)
return ratio * parent.height
}
anchors.bottom: parent.bottom
anchors.horizontalCenter: parent.horizontalCenter
color: Theme.primary
radius: Theme.cornerRadius
}
Rectangle {
id: vertHandle
width: 24
height: 8
radius: Theme.cornerRadius
y: {
const ratio = (vertSlider.value - vertSlider.minimum) / (vertSlider.maximum - vertSlider.minimum)
const travel = parent.height - height
return Math.max(0, Math.min(travel, travel * (1 - ratio)))
}
anchors.horizontalCenter: parent.horizontalCenter
color: Theme.primary
border.width: 3
border.color: Theme.surfaceContainer
}
MouseArea {
id: vertSliderArea
anchors.fill: parent
anchors.margins: -12
enabled: DisplayService.brightnessAvailable
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onContainsMouseChanged: {
setChildHovered(containsMouse)
}
onPressed: mouse => {
vertSlider.dragging = true
updateBrightness(mouse)
}
onReleased: {
vertSlider.dragging = false
}
onPositionChanged: mouse => {
if (pressed) {
updateBrightness(mouse)
}
}
onClicked: mouse => {
updateBrightness(mouse)
}
function updateBrightness(mouse) {
if (DisplayService.brightnessAvailable) {
const ratio = 1.0 - (mouse.y / height)
const newValue = Math.round(vertSlider.minimum + ratio * (vertSlider.maximum - vertSlider.minimum))
DisplayService.setBrightness(newValue, DisplayService.lastIpcDevice, true)
resetHideTimer()
}
}
}
Connections {
target: DisplayService
function onBrightnessChanged(showOsd) {
if (!vertSlider.dragging && vertSlider.value !== DisplayService.brightnessLevel) {
vertSlider.value = DisplayService.brightnessLevel
}
}
function onDeviceSwitched() {
if (!vertSlider.dragging && vertSlider.value !== DisplayService.brightnessLevel) {
vertSlider.value = DisplayService.brightnessLevel
}
}
}
}
StyledText {
anchors.bottom: parent.bottom
anchors.horizontalCenter: parent.horizontalCenter
anchors.bottomMargin: gap
text: {
const deviceInfo = DisplayService.getCurrentDeviceInfo()
const isExponential = deviceInfo ? SessionData.getBrightnessExponential(deviceInfo.id) : false
const unit = (deviceInfo && deviceInfo.class === "ddc" && !isExponential) ? "" : "%"
return vertSlider.value + unit
}
font.pixelSize: Theme.fontSizeSmall
color: Theme.surfaceText
visible: SettingsData.osdAlwaysShowValue
}
}
}
}

171
quickshell/Modules/OSD/VolumeOSD.qml
View File

@@ -6,8 +6,10 @@ import qs.Widgets
DankOSD {
id: root
osdWidth: Math.min(260, Screen.width - Theme.spacingM * 2)
osdHeight: 40 + Theme.spacingS * 2
readonly property bool useVertical: isVerticalLayout
osdWidth: useVertical ? (40 + Theme.spacingS * 2) : Math.min(260, Screen.width - Theme.spacingM * 2)
osdHeight: useVertical ? Math.min(260, Screen.height - Theme.spacingM * 2) : (40 + Theme.spacingS * 2)
autoHideInterval: 3000
enableMouseInteraction: true
@@ -37,8 +39,13 @@ DankOSD {
}
}
content: Item {
content: Loader {
anchors.fill: parent
sourceComponent: useVertical ? verticalContent : horizontalContent
}
Component {
id: horizontalContent
Item {
property int gap: Theme.spacingS
@@ -128,11 +135,161 @@ DankOSD {
}
}
Component {
id: verticalContent
Item {
anchors.fill: parent
property int gap: Theme.spacingS
Rectangle {
width: Theme.iconSize
height: Theme.iconSize
radius: Theme.iconSize / 2
color: "transparent"
anchors.horizontalCenter: parent.horizontalCenter
y: gap
DankIcon {
anchors.centerIn: parent
name: AudioService.sink && AudioService.sink.audio && AudioService.sink.audio.muted ? "volume_off" : "volume_up"
size: Theme.iconSize
color: muteButtonVert.containsMouse ? Theme.primary : Theme.surfaceText
}
MouseArea {
id: muteButtonVert
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onClicked: {
AudioService.toggleMute()
}
onContainsMouseChanged: {
setChildHovered(containsMouse || vertSliderArea.containsMouse)
}
}
}
Item {
id: vertSlider
width: 12
height: parent.height - Theme.iconSize - gap * 3 - 24
anchors.horizontalCenter: parent.horizontalCenter
y: gap * 2 + Theme.iconSize
property bool dragging: false
property int value: AudioService.sink && AudioService.sink.audio ? Math.min(100, Math.round(AudioService.sink.audio.volume * 100)) : 0
Rectangle {
id: vertTrack
width: parent.width
height: parent.height
anchors.centerIn: parent
color: Theme.outline
radius: Theme.cornerRadius
}
Rectangle {
id: vertFill
width: parent.width
height: (vertSlider.value / 100) * parent.height
anchors.bottom: parent.bottom
anchors.horizontalCenter: parent.horizontalCenter
color: Theme.primary
radius: Theme.cornerRadius
}
Rectangle {
id: vertHandle
width: 24
height: 8
radius: Theme.cornerRadius
y: {
const ratio = vertSlider.value / 100
const travel = parent.height - height
return Math.max(0, Math.min(travel, travel * (1 - ratio)))
}
anchors.horizontalCenter: parent.horizontalCenter
color: Theme.primary
border.width: 3
border.color: Theme.surfaceContainer
}
MouseArea {
id: vertSliderArea
anchors.fill: parent
anchors.margins: -12
enabled: AudioService.sink && AudioService.sink.audio
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onContainsMouseChanged: {
setChildHovered(containsMouse || muteButtonVert.containsMouse)
}
onPressed: mouse => {
vertSlider.dragging = true
updateVolume(mouse)
}
onReleased: {
vertSlider.dragging = false
}
onPositionChanged: mouse => {
if (pressed) {
updateVolume(mouse)
}
}
onClicked: mouse => {
updateVolume(mouse)
}
function updateVolume(mouse) {
if (AudioService.sink && AudioService.sink.audio) {
const ratio = 1.0 - (mouse.y / height)
const volume = Math.max(0, Math.min(100, Math.round(ratio * 100)))
AudioService.suppressOSD = true
AudioService.sink.audio.volume = volume / 100
AudioService.suppressOSD = false
resetHideTimer()
}
}
}
Connections {
target: AudioService.sink && AudioService.sink.audio ? AudioService.sink.audio : null
function onVolumeChanged() {
if (!vertSlider.dragging) {
vertSlider.value = Math.min(100, Math.round(AudioService.sink.audio.volume * 100))
}
}
}
}
StyledText {
anchors.bottom: parent.bottom
anchors.horizontalCenter: parent.horizontalCenter
anchors.bottomMargin: gap
text: vertSlider.value + "%"
font.pixelSize: Theme.fontSizeSmall
color: Theme.surfaceText
visible: SettingsData.osdAlwaysShowValue
}
}
}
onOsdShown: {
if (AudioService.sink && AudioService.sink.audio && contentLoader.item) {
const slider = contentLoader.item.children[0].children[1]
if (slider) {
slider.value = Math.min(100, Math.round(AudioService.sink.audio.volume * 100))
if (AudioService.sink && AudioService.sink.audio && contentLoader.item && contentLoader.item.item) {
if (!useVertical) {
const slider = contentLoader.item.item.children[0].children[1]
if (slider && slider.value !== undefined) {
slider.value = Math.min(100, Math.round(AudioService.sink.audio.volume * 100))
}
}
}
}

12
quickshell/Modules/Settings/WidgetTweaksTab.qml
View File

@@ -760,11 +760,15 @@ Item {
return "Bottom Left"
case SettingsData.Position.BottomCenter:
return "Bottom Center"
case SettingsData.Position.LeftCenter:
return "Left Center"
case SettingsData.Position.RightCenter:
return "Right Center"
default:
return "Bottom Center"
}
}
options: ["Top Right", "Top Left", "Top Center", "Bottom Right", "Bottom Left", "Bottom Center"]
options: ["Top Right", "Top Left", "Top Center", "Bottom Right", "Bottom Left", "Bottom Center", "Left Center", "Right Center"]
onValueChanged: value => {
switch (value) {
case "Top Right":
@@ -785,6 +789,12 @@ Item {
case "Bottom Center":
SettingsData.set("osdPosition", SettingsData.Position.BottomCenter)
break
case "Left Center":
SettingsData.set("osdPosition", SettingsData.Position.LeftCenter)
break
case "Right Center":
SettingsData.set("osdPosition", SettingsData.Position.RightCenter)
break
}
}
}

19
quickshell/Services/DisplayService.qml
View File

@@ -78,10 +78,15 @@ Singleton {
}
}
const oldValue = deviceBrightness[device.id]
const newBrightness = Object.assign({}, deviceBrightness)
newBrightness[device.id] = displayValue
deviceBrightness = newBrightness
brightnessVersion++
if (oldValue !== undefined && oldValue !== displayValue && brightnessInitialized) {
brightnessChanged(true)
}
}
function updateFromBrightnessState(state) {
@@ -110,9 +115,12 @@ Singleton {
deviceMaxCache = newMaxCache
const newBrightness = {}
let anyDeviceBrightnessChanged = false
for (const device of state.devices) {
const isExponential = SessionData.getBrightnessExponential(device.id)
const userSetValue = deviceBrightnessUserSet[device.id]
const oldValue = deviceBrightness[device.id]
if (isExponential) {
if (userSetValue !== undefined) {
@@ -123,6 +131,11 @@ Singleton {
} else {
newBrightness[device.id] = device.currentPercent
}
const newValue = newBrightness[device.id]
if (oldValue !== undefined && oldValue !== newValue) {
anyDeviceBrightnessChanged = true
}
}
deviceBrightness = newBrightness
brightnessVersion++
@@ -142,9 +155,15 @@ Singleton {
}
}
const shouldShowOsd = brightnessInitialized && anyDeviceBrightnessChanged
if (!brightnessInitialized) {
brightnessInitialized = true
}
if (shouldShowOsd) {
brightnessChanged(true)
}
}
function setBrightness(percentage, device, suppressOsd) {

44
quickshell/Widgets/DankOSD.qml
View File

@@ -75,6 +75,8 @@ PanelWindow {
readonly property real alignedWidth: Theme.px(osdWidth, dpr)
readonly property real alignedHeight: Theme.px(osdHeight, dpr)
readonly property bool isVerticalLayout: SettingsData.osdPosition === SettingsData.Position.LeftCenter || SettingsData.osdPosition === SettingsData.Position.RightCenter
readonly property real barThickness: {
if (!SettingsData.dankBarVisible) return 0
const widgetThickness = Math.max(20, 26 + SettingsData.dankBarInnerPadding * 0.6)
@@ -86,6 +88,16 @@ PanelWindow {
return barThickness + SettingsData.dankBarSpacing + SettingsData.dankBarBottomGap
}
readonly property real dockThickness: {
if (!SettingsData.showDock) return 0
return SettingsData.dockIconSize + SettingsData.dockSpacing * 2 + 10
}
readonly property real dockOffset: {
if (!SettingsData.showDock || SettingsData.dockAutoHide) return 0
return dockThickness + SettingsData.dockSpacing + SettingsData.dockBottomGap + SettingsData.dockMargin
}
readonly property real alignedX: {
const margin = Theme.spacingM
const centerX = (screenWidth - alignedWidth) / 2
@@ -93,12 +105,22 @@ PanelWindow {
switch (SettingsData.osdPosition) {
case SettingsData.Position.Left:
case SettingsData.Position.Bottom:
const leftOffset = SettingsData.dankBarPosition === SettingsData.Position.Left ? barOffset : 0
return Theme.snap(margin + leftOffset, dpr)
const leftBarOffset = SettingsData.dankBarPosition === SettingsData.Position.Left ? barOffset : 0
const leftDockOffset = SettingsData.dockPosition === SettingsData.Position.Left ? dockOffset : 0
return Theme.snap(margin + Math.max(leftBarOffset, leftDockOffset), dpr)
case SettingsData.Position.Top:
case SettingsData.Position.Right:
const rightOffset = SettingsData.dankBarPosition === SettingsData.Position.Right ? barOffset : 0
return Theme.snap(screenWidth - alignedWidth - margin - rightOffset, dpr)
const rightBarOffset = SettingsData.dankBarPosition === SettingsData.Position.Right ? barOffset : 0
const rightDockOffset = SettingsData.dockPosition === SettingsData.Position.Right ? dockOffset : 0
return Theme.snap(screenWidth - alignedWidth - margin - Math.max(rightBarOffset, rightDockOffset), dpr)
case SettingsData.Position.LeftCenter:
const leftCenterBarOffset = SettingsData.dankBarPosition === SettingsData.Position.Left ? barOffset : 0
const leftCenterDockOffset = SettingsData.dockPosition === SettingsData.Position.Left ? dockOffset : 0
return Theme.snap(margin + Math.max(leftCenterBarOffset, leftCenterDockOffset), dpr)
case SettingsData.Position.RightCenter:
const rightCenterBarOffset = SettingsData.dankBarPosition === SettingsData.Position.Right ? barOffset : 0
const rightCenterDockOffset = SettingsData.dockPosition === SettingsData.Position.Right ? dockOffset : 0
return Theme.snap(screenWidth - alignedWidth - margin - Math.max(rightCenterBarOffset, rightCenterDockOffset), dpr)
case SettingsData.Position.TopCenter:
case SettingsData.Position.BottomCenter:
default:
@@ -108,19 +130,25 @@ PanelWindow {
readonly property real alignedY: {
const margin = Theme.spacingM
const centerY = (screenHeight - alignedHeight) / 2
switch (SettingsData.osdPosition) {
case SettingsData.Position.Top:
case SettingsData.Position.Left:
case SettingsData.Position.TopCenter:
const topOffset = SettingsData.dankBarPosition === SettingsData.Position.Top ? barOffset : 0
return Theme.snap(margin + topOffset, dpr)
const topBarOffset = SettingsData.dankBarPosition === SettingsData.Position.Top ? barOffset : 0
const topDockOffset = SettingsData.dockPosition === SettingsData.Position.Top ? dockOffset : 0
return Theme.snap(margin + Math.max(topBarOffset, topDockOffset), dpr)
case SettingsData.Position.Right:
case SettingsData.Position.Bottom:
case SettingsData.Position.BottomCenter:
const bottomBarOffset = SettingsData.dankBarPosition === SettingsData.Position.Bottom ? barOffset : 0
const bottomDockOffset = SettingsData.dockPosition === SettingsData.Position.Bottom ? dockOffset : 0
return Theme.snap(screenHeight - alignedHeight - margin - Math.max(bottomBarOffset, bottomDockOffset), dpr)
case SettingsData.Position.LeftCenter:
case SettingsData.Position.RightCenter:
default:
const bottomOffset = SettingsData.dankBarPosition === SettingsData.Position.Bottom ? barOffset : 0
return Theme.snap(screenHeight - alignedHeight - margin - bottomOffset, dpr)
return Theme.snap(centerY, dpr)
}
}