Value indicators in fullscreen

src/share/sleex/modules/common/Config.qml

@@ -76,6 +76,10 @@ Singleton {
                 ]
             }
 
+            property JsonObject overlay: JsonObject {
+                property bool fullscreenIndicator: false
+            }
+
             property JsonObject appearance: JsonObject {
                 property bool transparency: false
                 property int opacity: 50

src/share/sleex/modules/onScreenDisplay/OnScreenDisplayBrightness.qml

@@ -82,9 +82,9 @@ Scope {
                 anchors.horizontalCenter: parent.horizontalCenter
                 Item {
                     id: osdValuesWrapper
-                    // Extra space for shadow
+                    // Include extra space for shadow around all sides
+                    implicitWidth: osdValues.implicitWidth + Appearance.sizes.elevationMargin * 2
                     implicitHeight: osdValues.implicitHeight + Appearance.sizes.elevationMargin * 2
-                    implicitWidth: osdValues.implicitWidth
                     clip: true
 
                     MouseArea {
@@ -149,4 +149,4 @@ Scope {
         }
     }
 
-}
+}

src/share/sleex/modules/onScreenDisplay/OnScreenDisplayVolume.qml

@@ -81,7 +81,7 @@ Scope {
                 top: true
                 right: true
             }
-            
+
             mask: Region {
                 item: osdValuesWrapper
             }
@@ -95,9 +95,9 @@ Scope {
                 anchors.horizontalCenter: parent.horizontalCenter
                 Item {
                     id: osdValuesWrapper
-                    // Extra space for shadow
+                    // Include extra space for shadow around all sides
+                    implicitWidth: contentColumnLayout.implicitWidth + Appearance.sizes.elevationMargin * 2
                     implicitHeight: contentColumnLayout.implicitHeight + Appearance.sizes.elevationMargin * 2
-                    implicitWidth: contentColumnLayout.implicitWidth
                     clip: true
 
                     MouseArea {
@@ -147,6 +147,7 @@ Scope {
                                 RowLayout {
                                     id: protectionMessageRowLayout
                                     anchors.centerIn: parent
+                                    spacing: 5
                                     MaterialSymbol {
                                         id: protectionMessageIcon
                                         text: "dangerous"
@@ -184,21 +185,16 @@ Scope {
             showOsdValues = !showOsdValues
         }
 	}
+
     GlobalShortcut {
         name: "osdVolumeTrigger"
         description: qsTr("Triggers volume OSD on press")
-
-        onPressed: {
-            root.triggerOsd()
-        }
+        onPressed: root.triggerOsd()
     }
+
     GlobalShortcut {
         name: "osdVolumeHide"
         description: qsTr("Hides volume OSD on press")
-
-        onPressed: {
-            root.showOsdValues = false
-        }
+        onPressed: root.showOsdValues = false
     }
-
-}
+}

src/share/sleex/modules/onScreenDisplay/OsdValueIndicator.qml

@@ -8,6 +8,7 @@ import QtQuick.Layouts
 import Quickshell
 import Quickshell.Widgets
 // import Qt5Compat.GraphicalEffects
+import Quickshell.Hyprland
 
 Item {
     id: root
@@ -21,6 +22,8 @@ Item {
     property real valueIndicatorLeftPadding: 10
     property real valueIndicatorRightPadding: 20 // An icon is circle ish, a column isn't, hence the extra padding
 
+    visible: Hyprland.focusedWorkspace && Hyprland.focusedWorkspace.hasFullscreen
+
     Layout.margins: Appearance.sizes.elevationMargin
     implicitWidth: Appearance.sizes.osdWidth
     implicitHeight: valueIndicator.implicitHeight
@@ -86,6 +89,7 @@ Item {
                         color: Appearance.colors.colOnLayer0
                         font.pixelSize: Appearance.font.pixelSize.small
                         Layout.fillWidth: false
+                        Layout.leftMargin: 75
                         text: Math.round(root.value * 100)
                     }
                 }
@@ -98,4 +102,4 @@ Item {
             }
         }
     }
-}
+}

src/share/sleex/modules/settings/Interface.qml

@@ -19,6 +19,14 @@ ContentPage {
             onCheckedChanged: Config.options.appearance.transparency = checked;
         }
 
+        ConfigSwitch {
+            text: "Fullscreen Value Indicators"
+            checked: Config.options.appearance.fullscreenIndicator
+            onClicked: checked = !checked;
+            StyledToolTip { text: "Show brightness/volume indicators while in fullscreen." }
+            onCheckedChanged: Config.options.appearance.fullscreenIndicator = checked;
+        }
+
         ConfigSpinBox {
             text: "Opacity"
             value: Config.options.appearance.opacity
@@ -361,4 +369,4 @@ ContentPage {
             }
         }
     }
-}
+}

src/share/sleex/shell.qml

@@ -35,8 +35,8 @@ ShellRoot {
     property bool enableDock: true
     property bool enableMediaControls: true
     property bool enableNotificationPopup: true
-    property bool enableOnScreenDisplayBrightness: false
-    property bool enableOnScreenDisplayVolume: false
+    property bool enableOnScreenDisplayBrightness: true
+    property bool enableOnScreenDisplayVolume: true
     property bool enableOverview: true
     property bool enablePolkit: true
     property bool enableReloadPopup: true
@@ -60,8 +60,8 @@ ShellRoot {
     LazyLoader { active: enableDock && Config.options.dock.enabled; component: Dock {} }
     LazyLoader { active: enableMediaControls; component: MediaControls {} }
     LazyLoader { active: enableNotificationPopup; component: NotificationPopup {} }
-    LazyLoader { active: enableOnScreenDisplayBrightness; component: OnScreenDisplayBrightness {} }
-    LazyLoader { active: enableOnScreenDisplayVolume; component: OnScreenDisplayVolume {} }
+    LazyLoader { active: enableOnScreenDisplayBrightness && Config.options.overlay.fullscreenIndicator; component: OnScreenDisplayBrightness {} }
+    LazyLoader { active: enableOnScreenDisplayVolume && Config.options.overlay.fullscreenIndicator; component: OnScreenDisplayVolume {} }
     LazyLoader { active: enableOverview; component: Overview {} }
     LazyLoader { active: enablePolkit; component: Polkit {} }
     LazyLoader { active: enableReloadPopup; component: ReloadPopup {} }