Change the volume osd design to something less invasive

default_theme.lua

@@ -58,25 +58,6 @@ theme.notification_fg = theme.fg_focus
 -- Hotkeys (awesome help menu)
 theme.hotkeys_border_color = theme.border_normal
 
--- Volume OSD
-theme.volume_osd_bg = theme.bg_normal
-theme.volume_osd_border_color = theme.border_normal
-theme.volume_osd_border_width = dpi(0)
-theme.volume_osd_progress_bg = theme.bg_minimize
-theme.volume_osd_progress_color = "#ffffff"
-theme.volume_osd_progress_border_color = theme.volume_osd_border_color
-theme.volume_osd_progress_border_width = dpi(0)
-theme.volume_osd_shape = function(cr, width, height)
-    return gears.shape.rounded_rect(cr, width, height, 5)
-end
-theme.volume_osd_width = dpi(128)
-theme.volume_osd_height = dpi(128)
-theme.volume_osd_image_color = "#ffffff"
-theme.volume_osd_icon_0 = simple_awesome_path .. "/assets/icons/volume-x.svg"
-theme.volume_osd_icon_1 = simple_awesome_path .. "/assets/icons/volume.svg"
-theme.volume_osd_icon_2 = simple_awesome_path .. "/assets/icons/volume-1.svg"
-theme.volume_osd_icon_3 = simple_awesome_path .. "/assets/icons/volume-2.svg"
-
 -- System resources widget
 theme.system_resources_widget_bar_bg = theme.bg_focus
 theme.system_resources_widget_bar_color = "#ffffff"
@@ -184,6 +165,33 @@ theme.awesome_icon = theme_assets.awesome_icon(
 -- from /usr/share/icons and /usr/share/icons/hicolor will be used.
 theme.icon_theme = nil
 
+-- Volume OSD
+theme.volume_osd_width = dpi(48)
+theme.volume_osd_bar_height = dpi(196)
+theme.volume_osd_padding = dpi(8)
+theme.volume_osd_shape = function(cr, width, height)
+    return gears.shape.rounded_rect(cr, width, height, 5)
+end
+theme.volume_osd_position = function(screen_width, screen_height, osd_width, osd_height)
+    return {
+        dpi(8),
+        theme.menu_height + dpi(8)
+    }
+end
+
+theme.volume_osd_bg = theme.bg_normal
+theme.volume_osd_border_color = theme.border_normal
+theme.volume_osd_border_width = dpi(0)
+theme.volume_osd_progress_bg = theme.bg_minimize
+theme.volume_osd_progress_color = "#ffffff"
+theme.volume_osd_progress_border_color = theme.volume_osd_border_color
+theme.volume_osd_progress_border_width = dpi(0)
+theme.volume_osd_image_color = "#ffffff"
+theme.volume_osd_icon_0 = simple_awesome_path .. "/assets/icons/volume-x.svg"
+theme.volume_osd_icon_1 = simple_awesome_path .. "/assets/icons/volume.svg"
+theme.volume_osd_icon_2 = simple_awesome_path .. "/assets/icons/volume-1.svg"
+theme.volume_osd_icon_3 = simple_awesome_path .. "/assets/icons/volume-2.svg"
+
 return theme
 
 -- vim: filetype=lua:expandtab:shiftwidth=4:tabstop=8:softtabstop=4:textwidth=80

simple/media_control.lua

@@ -69,41 +69,50 @@ local volumeWibox = wibox({
     border_color = beautiful.volume_osd_border_color,
     shape = beautiful.volume_osd_shape,
     width = beautiful.volume_osd_width,
-    height = beautiful.volume_osd_height,
+    height = beautiful.volume_osd_bar_height + beautiful.volume_osd_padding * 3,
     widget = wibox.widget {
         {
             {
                 image = getVolumeImage(1),
                 widget = wibox.widget.imagebox
             },
-            forced_height = beautiful.volume_osd_height - 42,
+            left = beautiful.volume_osd_padding,
-            left = 38,
+            right = beautiful.volume_osd_padding,
-            right = 16,
+            top = beautiful.volume_osd_padding,
-            top = 24,
+            bottom = 0,
-            bottom = 16,
+            widget = wibox.container.margin,
-            widget = wibox.container.margin
         },
+        {
+            {
                 {
                     max_value = 1,
                     value = 0.33,
                     shape = gears.shape.rounded_bar,
                     bar_shape = gears.shape.rounded_bar,
-            forced_height = 38,
+                    margins = beautiful.volume_osd_padding + 4,
-            margins = 18,
                     color = beautiful.volume_osd_progress_color,
                     background_color = beautiful.volume_osd_progress_bg,
                     border_color = beautiful.volume_osd_progress_border_color,
                     border_width = beautiful.volume_osd_progress_border_width,
                     widget = wibox.widget.progressbar
                 },
-        margins = 8,
+                forced_width = 80,
+                forced_height = 80,
+                direction = "east",
+                layout = wibox.container.rotate,
+            },
+            left = beautiful.volume_osd_padding,
+            right = beautiful.volume_osd_padding,
+            top = 0,
+            bottom = beautiful.volume_osd_padding,
             widget = wibox.container.margin,
+        },
         layout = wibox.layout.align.vertical
-    }
+    },
 })
 
 local imagebox = volumeWibox.widget:get_children()[1]:get_children()[1]
-local progressbar = volumeWibox.widget:get_children()[2]
+local progressbar = volumeWibox.widget:get_children()[2]:get_children()[1]:get_children()[1]
 
 local timer = nil
 
@@ -138,9 +147,10 @@ local displayVolume = function()
     volumeWibox.screen = screen
 
     -- Position
+    local position = beautiful.volume_osd_position(screen.geometry.width, screen.geometry.height, beautiful.volume_osd_width, beautiful.volume_osd_height)
     volumeWibox:geometry({
-        x = (screen.geometry.x + screen.geometry.width / 2 - beautiful.volume_osd_width / 2),
+        x = (screen.geometry.x + position[1]),
-        y = (screen.geometry.y + screen.geometry.height / 2 - beautiful.volume_osd_height / 2)
+        y = (screen.geometry.y + position[2])
     })
 
     -- Get volume