Add new titlebar and toggle for top/left titlebar

awesome/src/assets/icons/titlebar/close.svg

@@ -1 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#00000000">
+  <path d="M0 0h24v24H0z" />
+  <path fill="#f5f5f5" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
+</svg>

awesome/src/assets/icons/titlebar/maximize.svg

@@ -1 +1,3 @@
-<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M10,21V19H6.41L10.91,14.5L9.5,13.09L5,17.59V14H3V21H10M14.5,10.91L19,6.41V10H21V3H14V5H17.59L13.09,9.5L14.5,10.91Z" /></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path fill="#f5f5f5" d="M18,18H6V6H18M18,4H6C4.9,4 4,4.9 4,6V18C4,19.1 4.9,20 6,20H18C19.1,20 20,19.1 20,18V6C20,4.89 19.1,4 18,4Z" />
+</svg>

awesome/src/assets/icons/titlebar/minimize.svg

@@ -1 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M6 19h12v2H6z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
+  <path d="M0 0h24v24H0V0z" fill="#00000000" />
+  <path fill=" #f5f5f5" d=" M6 19h12v2H6z" />
+</svg>

awesome/src/assets/icons/titlebar/stick.svg

@@ -1 +1,5 @@
-<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M4.08,11.92L12,4L19.92,11.92L18.5,13.33L13,7.83V22H11V7.83L5.5,13.33L4.08,11.92M12,4H22V2H2V4H12Z" /></svg>
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24">
+  <path fill="f5f5f5" d="M4.08,11.92L12,4L19.92,11.92L18.5,13.33L13,7.83V22H11V7.83L5.5,13.33L4.08,11.92M12,4H22V2H2V4H12Z" />
+</svg>

awesome/src/assets/icons/titlebar/unmaximize.svg

@@ -1 +1,5 @@
-<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M19.5,3.09L15,7.59V4H13V11H20V9H16.41L20.91,4.5L19.5,3.09M4,13V15H7.59L3.09,19.5L4.5,20.91L9,16.41V20H11V13H4Z" /></svg>
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24">
+  <path fill="f5f5f5" d="M19.5,3.09L15,7.59V4H13V11H20V9H16.41L20.91,4.5L19.5,3.09M4,13V15H7.59L3.09,19.5L4.5,20.91L9,16.41V20H11V13H4Z" />
+</svg>

awesome/src/assets/icons/titlebar/unstick.svg

@@ -1 +1,5 @@
-<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M19.92,12.08L12,20L4.08,12.08L5.5,10.67L11,16.17V2H13V16.17L18.5,10.66L19.92,12.08M12,20H2V22H22V20H12Z" /></svg>
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24">
+  <path fill="f5f5f5" d="M19.92,12.08L12,20L4.08,12.08L5.5,10.67L11,16.17V2H13V16.17L18.5,10.66L19.92,12.08M12,20H2V22H22V20H12Z" />
+</svg>

awesome/src/modules/titlebar.lua

@@ -23,36 +23,12 @@ Theme.titlebar_maximized_button_normal = icondir .. "maximize.svg"
 Theme.titlebar_maximized_button_active = icondir .. "maximize.svg"
 Theme.titlebar_maximized_button_inactive = icondir .. "maximize.svg"
 
-local double_click_event_handler = function(double_click_event)
+local create_buttons = function(c)
-  if double_click_timer then
-    double_click_timer:stop()
-    double_click_timer = nil
-    double_click_event()
-    return
-  end
-  double_click_timer = gears.timer.start_new(
-    0.20,
-    function()
-      double_click_timer = nil
-      return false
-    end
-  )
-end
-
-local create_click_events = function(c)
   local buttons = gears.table.join(
     awful.button(
       {},
       1,
       function()
-        double_click_event_handler(function()
-          if c.floating then
-            c.float = false
-            return
-          end
-          c.maximized = not c.maximized
-          c:raise()
-        end)
         c:activate { context = 'titlebar', action = 'mouse_move' }
       end
     ),
@@ -67,46 +43,50 @@ local create_click_events = function(c)
   return buttons
 end
 
-local create_titlebar = function(c, size)
+local create_titlebar = function(c, size, position)
+  local close_button = awful.titlebar.widget.closebutton(c)
+  local minimize_button = awful.titlebar.widget.minimizebutton(c)
+  local maximize_button = awful.titlebar.widget.maximizedbutton(c)
+
+  local tb
+
+  if position == "left" then
     local titlebar = awful.titlebar(c, {
       position = "left",
       bg = Theme_config.titlebar.bg,
       size = size
     })
 
-  titlebar:setup {
+    tb = wibox.widget {
       {
         {
           {
-          {
+            close_button,
-            widget = awful.titlebar.widget.closebutton(c),
-          },
             widget = wibox.container.background,
-          bg = Theme_config.titlebar.close_button_bg,
+            border_color = Theme_config.titlebar.close_button.border_color,
+            border_width = dpi(2),
             shape = function(cr, height, width)
-            gears.shape.rounded_rect(cr, width, height, dpi(4))
+              gears.shape.rounded_rect(cr, width, height, dpi(6))
             end,
             id = "closebutton"
           },
           {
-          {
+            maximize_button,
-            widget = awful.titlebar.widget.maximizedbutton(c),
-          },
             widget = wibox.container.background,
-          bg = Theme_config.titlebar.minimize_button_bg,
+            border_color = Theme_config.titlebar.maximize_button.border_color,
+            border_width = dpi(2),
             shape = function(cr, height, width)
-            gears.shape.rounded_rect(cr, width, height, dpi(4))
+              gears.shape.rounded_rect(cr, width, height, dpi(6))
             end,
             id = "maximizebutton"
           },
           {
-          {
+            minimize_button,
-            widget = awful.titlebar.widget.minimizebutton(c),
-          },
             widget = wibox.container.background,
-          bg = Theme_config.titlebar.maximize_button_bg,
+            border_color = Theme_config.titlebar.minimize_button.border_color,
+            border_width = dpi(2),
             shape = function(cr, height, width)
-            gears.shape.rounded_rect(cr, width, height, dpi(4))
+              gears.shape.rounded_rect(cr, width, height, dpi(6))
             end,
             id = "minimizebutton"
           },
@@ -114,98 +94,330 @@ local create_titlebar = function(c, size)
           layout  = wibox.layout.fixed.vertical,
           id      = "spacing"
         },
-      margins = dpi(8),
+        margins = dpi(5),
         widget = wibox.container.margin,
         id = "margin"
       },
       {
-      buttons = create_click_events(c),
+        buttons = create_buttons(c),
         layout = wibox.layout.flex.vertical
       },
       {
-      {
+        awful.titlebar.widget.iconwidget(c),
-        widget = awful.titlebar.widget.iconwidget(c),
-      },
         margins = dpi(5),
         widget = wibox.container.margin
       },
       layout = wibox.layout.align.vertical,
       id = "main"
     }
-  Hover_signal(titlebar.main.margin.spacing.closebutton)
+
-  Hover_signal(titlebar.main.margin.spacing.maximizebutton)
+    titlebar:setup { tb, layout = wibox.layout.fixed.horizontal }
-  Hover_signal(titlebar.main.margin.spacing.minimizebutton)
+
+  elseif position == "top" then
+    local titlebar = awful.titlebar(c, {
+      position = "top",
+      bg = Theme_config.titlebar.bg,
+      size = size
+    })
+
+    tb = wibox.widget {
+      {
+        awful.titlebar.widget.iconwidget(c),
+        margins = dpi(5),
+        widget = wibox.container.margin
+      },
+      {
+        {
+          awful.titlebar.widget.titlewidget(c),
+          valign = "center",
+          halign = "center",
+          layout = wibox.container.place,
+        },
+        buttons = create_buttons(c),
+        fill_space = true,
+        layout = wibox.layout.stack
+      },
+      {
+        {
+          {
+            minimize_button,
+            widget = wibox.container.background,
+            border_color = Theme_config.titlebar.minimize_button.border_color,
+            border_width = dpi(2),
+            shape = function(cr, height, width)
+              gears.shape.rounded_rect(cr, width, height, dpi(6))
+            end,
+            id = "minimizebutton"
+          },
+          {
+            maximize_button,
+            widget = wibox.container.background,
+            border_color = Theme_config.titlebar.maximize_button.border_color,
+            border_width = dpi(2),
+            shape = function(cr, height, width)
+              gears.shape.rounded_rect(cr, width, height, dpi(6))
+            end,
+            id = "maximizebutton"
+          },
+          {
+            close_button,
+            widget = wibox.container.background,
+            border_color = Theme_config.titlebar.close_button.border_color,
+            border_width = dpi(2),
+            shape = function(cr, height, width)
+              gears.shape.rounded_rect(cr, width, height, dpi(6))
+            end,
+            id = "closebutton"
+          },
+          spacing = dpi(10),
+          layout  = wibox.layout.fixed.horizontal,
+          id      = "spacing"
+        },
+        margins = dpi(5),
+        widget = wibox.container.margin,
+        id = "margin"
+      },
+      layout = wibox.layout.align.horizontal,
+      id = "main"
+    }
+
+    titlebar:setup { tb, layout = wibox.layout.fixed.vertical }
+  end
+
+  if not tb then return end
+
+  close_button:connect_signal(
+    "mouse::enter",
+    function()
+      c.border_color = Theme_config.titlebar.close_button.hover_border
+      local cb = tb:get_children_by_id("closebutton")[1]
+      cb.border_color = Theme_config.titlebar.close_button.hover_border
+      cb.bg = Theme_config.titlebar.close_button.hover_bg
+    end
+  )
+
+  close_button:connect_signal(
+    "mouse::leave",
+    function()
+      c.border_color = Theme_config.window.border_normal
+      local cb = tb:get_children_by_id("closebutton")[1]
+      cb.border_color = Theme_config.titlebar.close_button.border_color
+      cb.bg = Theme_config.titlebar.close_button.bg
+    end
+  )
+
+  minimize_button:connect_signal(
+    "mouse::enter",
+    function()
+      c.border_color = Theme_config.titlebar.minimize_button.hover_border
+      local mb = tb:get_children_by_id("minimizebutton")[1]
+      mb.border_color = Theme_config.titlebar.minimize_button.hover_border
+      mb.bg = Theme_config.titlebar.minimize_button.hover_bg
+    end
+  )
+
+  minimize_button:connect_signal(
+    "mouse::leave",
+    function()
+      c.border_color = Theme_config.window.border_normal
+      local mb = tb:get_children_by_id("minimizebutton")[1]
+      mb.border_color = Theme_config.titlebar.minimize_button.border_color
+      mb.bg = Theme_config.titlebar.minimize_button.bg
+    end
+  )
+
+  maximize_button:connect_signal(
+    "mouse::enter",
+    function()
+      c.border_color = Theme_config.titlebar.maximize_button.hover_border
+      local mb = tb:get_children_by_id("maximizebutton")[1]
+      mb.border_color = Theme_config.titlebar.maximize_button.hover_border
+      mb.bg = Theme_config.titlebar.maximize_button.hover_bg
+    end
+  )
+
+  maximize_button:connect_signal(
+    "mouse::leave",
+    function()
+      c.border_color = Theme_config.window.border_normal
+      local mb = tb:get_children_by_id("maximizebutton")[1]
+      mb.border_color = Theme_config.titlebar.maximize_button.border_color
+      mb.bg = Theme_config.titlebar.maximize_button.bg
+    end
+  )
 end
 
-local create_titlebar_dialog_modal = function(c, size)
+local create_titlebar_dialog_modal = function(c, size, position)
+  local close_button = awful.titlebar.widget.closebutton(c)
+  local minimize_button = awful.titlebar.widget.minimizebutton(c)
+  local maximize_button = awful.titlebar.widget.maximizedbutton(c)
+
+  local tb
+
+  if position == "left" then
     local titlebar = awful.titlebar(c, {
       position = "left",
       bg = Theme_config.titlebar.bg,
       size = size
     })
 
-  titlebar:setup {
+    tb = wibox.widget {
       {
         {
-        {
+          close_button,
-          awful.titlebar.widget.closebutton(c),
           widget = wibox.container.background,
-          bg = Theme_config.titlebar.close_button_bg,
+          border_color = Theme_config.titlebar.close_button.border_color,
+          border_width = dpi(2),
           shape = function(cr, height, width)
-            gears.shape.rounded_rect(cr, width, height, dpi(4))
+            gears.shape.rounded_rect(cr, width, height, dpi(6))
           end,
           id = "closebutton"
         },
-        {
+        margins = dpi(5),
-          awful.titlebar.widget.minimizebutton(c),
-          widget = wibox.container.background,
-          bg = Theme_config.titlebar.minimize_button_bg,
-          shape = function(cr, height, width)
-            gears.shape.rounded_rect(cr, width, height, dpi(4))
-          end,
-          id = "minimizebutton"
-        },
-        spacing = dpi(10),
-        layout  = wibox.layout.fixed.vertical,
-        id      = "spacing"
-      },
-      margins = dpi(8),
         widget = wibox.container.margin,
         id = "margin"
       },
       {
-      buttons = create_click_events(c),
+        buttons = create_buttons(c),
         layout = wibox.layout.flex.vertical
       },
       {
-      {
+        awful.titlebar.widget.iconwidget(c),
-        widget = awful.widget.clienticon(c)
-      },
         margins = dpi(5),
         widget = wibox.container.margin
       },
       layout = wibox.layout.align.vertical,
       id = "main"
     }
-  Hover_signal(titlebar.main.margin.spacing.closebutton)
+
-  Hover_signal(titlebar.main.margin.spacing.minimizebutton)
+    titlebar:setup { tb, layout = wibox.layout.fixed.horizontal }
+
+  elseif position == "top" then
+    local titlebar = awful.titlebar(c, {
+      position = "top",
+      bg = Theme_config.titlebar.bg,
+      size = size
+    })
+
+    tb = wibox.widget {
+      {
+        awful.titlebar.widget.iconwidget(c),
+        margins = dpi(5),
+        widget = wibox.container.margin
+      },
+      {
+        {
+          awful.titlebar.widget.titlewidget(c),
+          valign = "center",
+          halign = "center",
+          layout = wibox.container.place,
+        },
+        buttons = create_buttons(c),
+        fill_space = true,
+        layout = wibox.layout.stack
+      },
+      {
+        {
+          close_button,
+          widget = wibox.container.background,
+          border_color = Theme_config.titlebar.close_button.border_color,
+          border_width = dpi(2),
+          shape = function(cr, height, width)
+            gears.shape.rounded_rect(cr, width, height, dpi(6))
+          end,
+          id = "closebutton"
+        },
+        margins = dpi(5),
+        widget = wibox.container.margin,
+        id = "margin"
+      },
+      layout = wibox.layout.align.horizontal,
+      id = "main"
+    }
+
+    titlebar:setup { tb, layout = wibox.layout.fixed.vertical }
+  end
+
+  if not tb then return end
+
+  close_button:connect_signal(
+    "mouse::enter",
+    function()
+      c.border_color = Theme_config.titlebar.close_button.hover_border
+      local cb = tb:get_children_by_id("closebutton")[1]
+      cb.border_color = Theme_config.titlebar.close_button.hover_border
+      cb.bg = Theme_config.titlebar.close_button.hover_bg
+    end
+  )
+
+  close_button:connect_signal(
+    "mouse::leave",
+    function()
+      c.border_color = Theme_config.window.border_normal
+      local cb = tb:get_children_by_id("closebutton")[1]
+      cb.border_color = Theme_config.titlebar.close_button.border_color
+      cb.bg = Theme_config.titlebar.close_button.bg
+    end
+  )
+
+  minimize_button:connect_signal(
+    "mouse::enter",
+    function()
+      c.border_color = Theme_config.titlebar.minimize_button.hover_border
+      local mb = tb:get_children_by_id("minimizebutton")[1]
+      mb.border_color = Theme_config.titlebar.minimize_button.hover_border
+      mb.bg = Theme_config.titlebar.minimize_button.hover_bg
+    end
+  )
+
+  minimize_button:connect_signal(
+    "mouse::leave",
+    function()
+      c.border_color = Theme_config.window.border_normal
+      local mb = tb:get_children_by_id("minimizebutton")[1]
+      mb.border_color = Theme_config.titlebar.minimize_button.border_color
+      mb.bg = Theme_config.titlebar.minimize_button.bg
+    end
+  )
+
+  maximize_button:connect_signal(
+    "mouse::enter",
+    function()
+      c.border_color = Theme_config.titlebar.maximize_button.hover_border
+      local mb = tb:get_children_by_id("maximizebutton")[1]
+      mb.border_color = Theme_config.titlebar.maximize_button.hover_border
+      mb.bg = Theme_config.titlebar.maximize_button.hover_bg
+    end
+  )
+
+  maximize_button:connect_signal(
+    "mouse::leave",
+    function()
+      c.border_color = Theme_config.window.border_normal
+      local mb = tb:get_children_by_id("maximizebutton")[1]
+      mb.border_color = Theme_config.titlebar.maximize_button.border_color
+      mb.bg = Theme_config.titlebar.maximize_button.bg
+    end
+  )
 end
 
 client.connect_signal(
   "request::titlebars",
   function(c)
-    if c.type == "normal" then
+    if c.type == "dialog" then
-      create_titlebar(c, dpi(35))
+      create_titlebar_dialog_modal(c, dpi(35), User_config.titlebar_position)
-    elseif c.type == "dialog" then
-      create_titlebar_dialog_modal(c, dpi(35))
     elseif c.type == "modal" then
-      create_titlebar_dialog_modal(c, dpi(35))
+      create_titlebar_dialog_modal(c, dpi(35), User_config.titlebar_position)
     else
-      create_titlebar(c, dpi(35))
+      create_titlebar(c, dpi(35), User_config.titlebar_position)
     end
 
     if not c.floating or c.maximized or c.fullscreen then
+      if User_config.titlebar_position == "left" then
         awful.titlebar.hide(c, "left")
+      elseif User_config.titlebar_position == "top" then
+        awful.titlebar.hide(c, "top")
+      end
     end
   end
 )
@@ -214,9 +426,17 @@ client.connect_signal(
   "property::floating",
   function(c)
     if c.floating and not (c.maximized or c.fullscreen) then
+      if User_config.titlebar_position == "left" then
         awful.titlebar.show(c, "left")
+      elseif User_config.titlebar_position == "top" then
+        awful.titlebar.show(c, "top")
+      end
     else
+      if User_config.titlebar_position == "left" then
         awful.titlebar.hide(c, "left")
+      elseif User_config.titlebar_position == "top" then
+        awful.titlebar.hide(c, "top")
+      end
     end
   end
 )

awesome/src/theme/theme_config.lua

@@ -368,13 +368,30 @@ Theme_config.right_bar = {
 
 Theme_config.titlebar = {
   bg = "#121212AA",
-  close_button_bg = color["Red200"],
+  close_button = {
-  close_button_fg = color["Grey900"],
+    border_color = "#00000000",
-  minimize_button_bg = color["Yellow200"],
+    bg = "#00000000",
-  minimize_button_fg = color["Grey900"],
+    fg = color["Grey100"],
-  maximize_button_bg = color["Green200"],
+    hover_border = color["Red800"],
-  maximize_button_fg = color["Grey900"],
+    hover_bg = color["Red800"] .. "bb",
-
+    hover_fg = color["Red800"],
+  },
+  minimize_button = {
+    border_color = "#00000000",
+    fg = color["Grey100"],
+    bg = "#00000000",
+    hover_border = color["Orange800"],
+    hover_fg = color["Orange800"],
+    hover_bg = color["Orange800"] .. "bb",
+  },
+  maximize_button = {
+    border_color = "#00000000",
+    fg = color["Grey100"],
+    bg = "#00000000",
+    hover_border = color["Green800"],
+    hover_fg = color["Green800"],
+    hover_bg = color["Green800"] .. "bb",
+  },
 }
 
 Theme_config.volume_controller = {
@@ -505,7 +522,7 @@ Theme_config.context_menu = {
 --#region General Settings
 
 Theme_config.window = {
-  border_width = dpi(0),
+  border_width = dpi(2),
   border_normal = color["Grey800"],
   border_marked = color["Red200"],
   useless_gap = dpi(5)

awesome/src/theme/user_config.lua

@@ -215,6 +215,13 @@ User_config = {
   ]] --
   titlebar_exception = {},
 
+  --[[
+      The titlebar position can be "left" (default) or "top"
+      Example:
+        titlebar_position = "top"
+  ]] --
+  titlebar_position = "top",
+
   --[[
       This is the path to your wallpaper.
       home is $HOME, you can also use an absolute path.

awesome/src/tools/auto_starter.lua

@@ -2,6 +2,6 @@ local awful = require("awful")
 
 return function(table)
   for _, t in ipairs(table) do
-    --awful.spawn(t);
+    awful.spawn(t);
   end
 end