Windows title bar rework

Margins, title alignment, button icons...

assets/icons/maximize.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-maximize"><path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"></path></svg>

assets/icons/minus.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-minus"><line x1="5" y1="12" x2="19" y2="12"></line></svg>

assets/icons/unmaximize.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-minimize"><path d="M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3"></path></svg>

assets/icons/x.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>

default_theme.lua

@@ -111,31 +111,32 @@ theme.menu_width  = dpi(256)
 --theme.bg_widget = "#cc0000"
 
 -- Define the image to load
-theme.titlebar_close_button_normal = themes_path.."default/titlebar/close_normal.png"
+theme.titlebar_close_button_normal = simple_awesome_path .. "/assets/icons/x.svg"
-theme.titlebar_close_button_focus  = themes_path.."default/titlebar/close_focus.png"
+theme.titlebar_close_button_focus = theme.titlebar_close_button_normal
+theme.titlebar_close_button_hover_bg_color = '#800'
 
-theme.titlebar_minimize_button_normal = themes_path.."default/titlebar/minimize_normal.png"
+theme.titlebar_maximized_button_normal_inactive = simple_awesome_path .. "/assets/icons/maximize.svg"
-theme.titlebar_minimize_button_focus  = themes_path.."default/titlebar/minimize_focus.png"
+theme.titlebar_maximized_button_focus_inactive = theme.titlebar_maximized_button_normal_inactive
+theme.titlebar_maximized_button_normal_active = simple_awesome_path .. "/assets/icons/unmaximize.svg"
+theme.titlebar_maximized_button_focus_active = theme.titlebar_maximized_button_normal_active
+theme.titlebar_maximized_button_hover_bg_color = '#555'
+
+theme.titlebar_minimize_button_normal = simple_awesome_path .. "/assets/icons/minus.svg"
+theme.titlebar_minimize_button_focus = theme.titlebar_minimize_button_normal
+theme.titlebar_minimize_button_hover_bg_color = '#555'
 
 theme.titlebar_ontop_button_normal_inactive = themes_path.."default/titlebar/ontop_normal_inactive.png"
-theme.titlebar_ontop_button_focus_inactive  = themes_path.."default/titlebar/ontop_focus_inactive.png"
+theme.titlebar_ontop_button_focus_inactive = theme.titlebar_ontop_button_normal_inactive
 theme.titlebar_ontop_button_normal_active = themes_path.."default/titlebar/ontop_normal_active.png"
-theme.titlebar_ontop_button_focus_active  = themes_path.."default/titlebar/ontop_focus_active.png"
+theme.titlebar_ontop_button_focus_active = theme.titlebar_ontop_button_normal_active
-
+theme.titlebar_ontop_button_hover_bg_color = '#555'
-theme.titlebar_sticky_button_normal_inactive = themes_path.."default/titlebar/sticky_normal_inactive.png"
-theme.titlebar_sticky_button_focus_inactive  = themes_path.."default/titlebar/sticky_focus_inactive.png"
-theme.titlebar_sticky_button_normal_active = themes_path.."default/titlebar/sticky_normal_active.png"
-theme.titlebar_sticky_button_focus_active  = themes_path.."default/titlebar/sticky_focus_active.png"
 
 theme.titlebar_floating_button_normal_inactive = themes_path.."default/titlebar/floating_normal_inactive.png"
-theme.titlebar_floating_button_focus_inactive  = themes_path.."default/titlebar/floating_focus_inactive.png"
+theme.titlebar_floating_button_focus_inactive = theme.titlebar_floating_button_normal_inactive
 theme.titlebar_floating_button_normal_active = themes_path.."default/titlebar/floating_normal_active.png"
-theme.titlebar_floating_button_focus_active  = themes_path.."default/titlebar/floating_focus_active.png"
+theme.titlebar_floating_button_focus_active = theme.titlebar_floating_button_normal_active
+theme.titlebar_floating_button_hover_bg_color = '#555'
 
-theme.titlebar_maximized_button_normal_inactive = themes_path.."default/titlebar/maximized_normal_inactive.png"
-theme.titlebar_maximized_button_focus_inactive  = themes_path.."default/titlebar/maximized_focus_inactive.png"
-theme.titlebar_maximized_button_normal_active = themes_path.."default/titlebar/maximized_normal_active.png"
-theme.titlebar_maximized_button_focus_active  = themes_path.."default/titlebar/maximized_focus_active.png"
 
 theme.wallpaper = simple_awesome_path.."/assets/art/default_wallpaper.png"
 

simple/init.lua

@@ -15,6 +15,12 @@ local config = require("config")
 local hotkey = require("simple/core/hotkey")
 
 
+--
+-- Misc components
+--
+local titlebar = require("simple/titlebar")
+
+
 --
 -- Awesome WM
 --
@@ -670,28 +676,34 @@ client.connect_signal("request::titlebars", function(c)
 
     awful.titlebar(c):setup {
         {
-            -- Left
-            awful.titlebar.widget.iconwidget(c),
-            buttons = buttons,
-            layout = wibox.layout.fixed.horizontal
-        },
-        {
-            -- Middle
             {
-                -- Title
+                awful.titlebar.widget.iconwidget(c),
-                align = "center",
+                buttons = buttons,
-                widget = awful.titlebar.widget.titlewidget(c)
+                layout = wibox.layout.fixed.horizontal
             },
-            buttons = buttons,
+            margins = 2,
-            layout = wibox.layout.flex.horizontal
+            widget = wibox.container.margin,
         },
         {
-            -- Right
+            {
-            awful.titlebar.widget.floatingbutton(c),
+                {
-            awful.titlebar.widget.maximizedbutton(c),
+                    -- Title
-            awful.titlebar.widget.stickybutton(c),
+                    align = "left",
-            awful.titlebar.widget.ontopbutton(c),
+                    widget = awful.titlebar.widget.titlewidget(c)
-            awful.titlebar.widget.closebutton(c),
+                },
+                buttons = buttons,
+                layout = wibox.layout.flex.horizontal
+            },
+            left = 8,
+            right = 8,
+            widget = wibox.container.margin,
+        },
+        {
+            titlebar.widget.floatingbutton(c),
+            titlebar.widget.ontopbutton(c),
+            titlebar.widget.minimizebutton(c),
+            titlebar.widget.maximizedbutton(c),
+            titlebar.widget.closebutton(c),
             layout = wibox.layout.fixed.horizontal()
         },
         layout = wibox.layout.align.horizontal

simple/titlebar.lua

@@ -0,0 +1,47 @@
+local awful = require('awful')
+local beautiful = require('beautiful')
+local wibox = require('wibox')
+
+function button(c, image, hover_bg_color)
+    local background = wibox.container.background(image)
+
+    background:connect_signal('mouse::enter', function()
+        background.bg = hover_bg_color
+    end)
+
+    background:connect_signal('mouse::leave', function()
+        background.bg = nil
+    end)
+
+    return background
+end
+
+function closebutton(c)
+    return button(c, awful.titlebar.widget.closebutton(c), beautiful.titlebar_close_button_hover_bg_color)
+end
+
+function maximizedbutton(c)
+    return button(c, awful.titlebar.widget.maximizedbutton(c), beautiful.titlebar_maximized_button_hover_bg_color)
+end
+
+function minimizebutton(c)
+    return button(c, awful.titlebar.widget.minimizebutton(c), beautiful.titlebar_minimize_button_hover_bg_color)
+end
+
+function ontopbutton(c)
+    return button(c, awful.titlebar.widget.ontopbutton(c), beautiful.titlebar_ontop_button_hover_bg_color)
+end
+
+function floatingbutton(c)
+    return button(c, awful.titlebar.widget.floatingbutton(c), beautiful.titlebar_floating_button_hover_bg_color)
+end
+
+return {
+    widget = {
+        closebutton = closebutton,
+        maximizedbutton = maximizedbutton,
+        minimizebutton = minimizebutton,
+        ontopbutton = ontopbutton,
+        floatingbutton = floatingbutton,
+    }
+}