Windows title bar rework

Margins, title alignment, button icons...
This commit is contained in:
Alice Gaudon 2020-01-30 03:57:17 +01:00
parent a4fd9ef389
commit 7d07722ec4
7 changed files with 99 additions and 35 deletions

View File

@ -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>

After

Width:  |  Height:  |  Size: 323 B

1
assets/icons/minus.svg Normal file
View File

@ -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>

After

Width:  |  Height:  |  Size: 253 B

View File

@ -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>

After

Width:  |  Height:  |  Size: 323 B

1
assets/icons/x.svg Normal file
View File

@ -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>

After

Width:  |  Height:  |  Size: 291 B

View File

@ -111,31 +111,32 @@ theme.menu_width = dpi(256)
--theme.bg_widget = "#cc0000" --theme.bg_widget = "#cc0000"
-- Define the image to load -- 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_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_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_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_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" theme.wallpaper = simple_awesome_path.."/assets/art/default_wallpaper.png"

View File

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

47
simple/titlebar.lua Normal file
View File

@ -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,
}
}