update: theme, configuration & ui

.github/README.md

@@ -49,7 +49,7 @@ Fyi, I use night colorscheme, and it's so beautiful.
          *Assuming your AUR helper is* `yay`
 
          ```shell
-         $ yay -S awesome-git picom-jonaburg-fix alacritty rofi todo-bin \
+         yay -S awesome-git picom-jonaburg-fix alacritty rofi todo-bin \
          acpi acpid acpi_call jq inotify-tools polkit-gnome xdotool xclip maim colord \
          brightnessctl alsa-utils alsa-tools pulseaudio pulseaudio-alsa playerctl --needed 
          ```
@@ -71,16 +71,16 @@ Fyi, I use night colorscheme, and it's so beautiful.
     > Clone this repository
 
    ```shell
-   $ git clone https://github.com/rxyhn/AwesomeWM-Dotfiles.git
-   $ cd AwesomeWM-Dotfiles
+   git clone https://github.com/rxyhn/AwesomeWM-Dotfiles.git
+   cd AwesomeWM-Dotfiles
    ```
 
     > Copy config and binaries files
 
    ```shell
-    $ mkdir -p $HOME/.config/ && cp -r ./config/* $HOME/.config/
-    $ mkdir -p $HOME/.local/bin/ && cp -r ./bin/* $HOME/.local/bin/
-    $ cp -r ./misc/. $HOME/
+    cp -r ./config/* ~/.config/
+    cp -r ./bin/* ~/.local/bin/
+    cp -r ./misc/. ~/
    ```
 
 4. Lastly, log out from your current desktop session and log in into AwesomeWM.

config/awesome/configuration/bling.lua

@@ -5,17 +5,17 @@ local bling = require("module.bling")
 
 bling.module.flash_focus.enable()
 
--- Set Wallpaper
-bling.module.tiled_wallpaper("", s, {
-    fg = beautiful.lighter_bg,
-    bg = beautiful.xbackground,
-    offset_y = 6,
-    offset_x = 18,
-    font = "Iosevka",
-    font_size = 17,
-    padding = 70,
-    zickzack = true
-})
+-- Set Tile Wallpaper
+-- bling.module.tiled_wallpaper("", s, {
+--     fg = beautiful.lighter_bg,
+--     bg = beautiful.xbackground,
+--     offset_y = 6,
+--     offset_x = 18,
+--     font = "Iosevka",
+--     font_size = 17,
+--     padding = 70,
+--     zickzack = true
+-- })
 
 -- Enable Tag Preview Module from Bling
 bling.widget.tag_preview.enable {

config/awesome/configuration/desktop.lua

@@ -1,8 +1,12 @@
 -- Standard awesome library
+local gears = require("gears")
+local naughty = require("naughty")
 local awful = require("awful")
 require("awful.autofocus")
 
-local naughty = require("naughty")
+-- Theme handling library
+local beautiful = require("beautiful")
+local dpi = beautiful.xresources.apply_dpi
 
 -- Check if awesome encountered an error during startup and fell back to
 -- another config (This code will only ever execute for the fallback config)
@@ -15,6 +19,12 @@ naughty.connect_signal("request::display_error", function(message, startup)
     }
 end)
 
+-- set wallpapers
+awful.screen.connect_for_each_screen(function(s)
+    gears.wallpaper.maximized(beautiful.wallpaper, s, false, nil)
+
+end)
+
 -- Screen Padding and Tags
 screen.connect_signal("request::desktop_decoration", function(s)
     -- Screen padding

config/awesome/theme/assets/icons/titlebar/close.svg

@@ -1,3 +0,0 @@
-<svg width="48" height="64" viewBox="0 0 48 64" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="32.4492" y="20" width="8" height="28" rx="2" transform="rotate(50 32.4492 20)" fill="#DF5B61"/>
-</svg>

config/awesome/theme/assets/icons/titlebar/default.svg

@@ -1,3 +0,0 @@
-<svg width="48" height="64" viewBox="0 0 48 64" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="32.4492" y="20" width="8" height="28" rx="2" transform="rotate(50 32.4492 20)" fill="#1C252C"/>
-</svg>

config/awesome/theme/assets/icons/titlebar/maximized.svg

@@ -1,3 +0,0 @@
-<svg width="48" height="64" viewBox="0 0 48 64" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="32.4492" y="20" width="8" height="28" rx="2" transform="rotate(50 32.4492 20)" fill="#BC83E3"/>
-</svg>

config/awesome/theme/assets/icons/titlebar/minimize.svg

@@ -1,3 +0,0 @@
-<svg width="48" height="64" viewBox="0 0 48 64" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="32.4492" y="20" width="8" height="28" rx="2" transform="rotate(50 32.4492 20)" fill="#6791C9"/>
-</svg>

config/awesome/theme/theme.lua

@@ -39,10 +39,6 @@ theme.lighter_bg = "#162026"
 theme.dash_fg = "#666c79"
 theme.transparent = "#00000000"
 
--- Titlebar
-local icon_path = gfs.get_configuration_dir() .. "theme/assets/icons/"
-local titlebar_icon_dir = icon_path .. "titlebar/"
-
 -- PFP
 theme.pfp = gears.surface.load_uncached(gfs.get_configuration_dir() .. "theme/assets/pfp.png")
 
@@ -77,13 +73,13 @@ theme.fg_minimize = theme.xcolor8
 theme.button_close = theme.xcolor1
 
 -- Borders
-theme.border_width = dpi(5)
-theme.oof_border_width = dpi(0)
+theme.border_width = dpi(0)
+theme.oof_border_width = theme.border_width
 theme.border_normal = theme.darker_bg
 theme.border_focus = theme.darker_bg
-theme.border_radius = dpi(3)
-theme.client_radius = dpi(3)
-theme.widget_border_width = dpi(3)
+theme.border_radius = dpi(10)
+theme.client_radius = dpi(12)
+theme.widget_border_width = dpi(2)
 theme.widget_border_color = theme.lighter_bg
 
 -- Taglist
@@ -105,12 +101,11 @@ theme.taglist_bg_volatile = transparent
 theme.taglist_fg_volatile = theme.xcolor11
 theme.taglist_disable_icon = true
 
-theme.taglist_shape_focus = helpers.rrect(theme.border_radius)
-theme.taglist_shape_empty = helpers.rrect(theme.border_radius)
-theme.taglist_shape = helpers.rrect(theme.border_radius)
-theme.taglist_shape_urgent = helpers.rrect(theme.border_radius)
-theme.taglist_shape_volatile = helpers.rrect(theme.border_radius)
-
+theme.taglist_shape_focus = helpers.rrect(theme.border_radius / 2)
+theme.taglist_shape_empty = helpers.rrect(theme.border_radius / 2)
+theme.taglist_shape = helpers.rrect(theme.border_radius / 2)
+theme.taglist_shape_urgent = helpers.rrect(theme.border_radius / 2)
+theme.taglist_shape_volatile = helpers.rrect(theme.border_radius / 2)
 
 -- Tasklist
 theme.tasklist_font = theme.font
@@ -129,21 +124,8 @@ theme.tasklist_align = "center"
 
 -- Titlebars
 theme.titlebars_enabled = true
-theme.titlebar_bg_focus = theme.darker_bg
-theme.titlebar_bg_normal = theme.darker_bg
-theme.titlebar_fg_focus = theme.xbackground
-theme.titlebar_fg_normal = theme.xbackground
-theme.titlebar_size = dpi(30)
-theme.titlebar_position = "left"
-
-theme.titlebar_close_button_normal = titlebar_icon_dir .. "default.svg"
-theme.titlebar_close_button_focus  = titlebar_icon_dir .. "close.svg"
-theme.titlebar_minimize_button_normal = titlebar_icon_dir .. "default.svg"
-theme.titlebar_minimize_button_focus  = titlebar_icon_dir .. "minimize.svg"
-theme.titlebar_maximized_button_normal_inactive = titlebar_icon_dir .. "default.svg"
-theme.titlebar_maximized_button_focus_inactive  = titlebar_icon_dir .. "maximized.svg"
-theme.titlebar_maximized_button_normal_active = titlebar_icon_dir .. "default.svg"
-theme.titlebar_maximized_button_focus_active  = titlebar_icon_dir .. "maximized.svg"
+theme.titlebar_size = dpi(45)
+theme.titlebar_unfocused = theme.xcolor0
 
 -- Pop up notifications
 theme.pop_size = dpi(180)
@@ -263,8 +245,8 @@ theme.machi_editor_border_opacity = 0.25
 theme.machi_editor_active_opacity = 0.25
 
 -- Tag Preview
-theme.tag_preview_widget_border_radius = theme.border_radius
-theme.tag_preview_client_border_radius = theme.border_radius
+theme.tag_preview_widget_border_radius = theme.border_radius / 2
+theme.tag_preview_client_border_radius = theme.border_radius / 2
 theme.tag_preview_client_opacity = 0.1
 theme.tag_preview_client_bg = theme.xbackground
 theme.tag_preview_client_border_color = theme.lighter_bg
@@ -275,7 +257,7 @@ theme.tag_preview_widget_border_width = theme.widget_border_width * 0
 theme.tag_preview_widget_margin = dpi(10)
 
 -- Task Preview
-theme.task_preview_widget_border_radius = theme.border_radius
+theme.task_preview_widget_border_radius = theme.border_radius / 2
 theme.task_preview_widget_bg = theme.xbackground
 theme.task_preview_widget_border_color = theme.widget_border_color
 theme.task_preview_widget_border_width = theme.widget_border_width * 0

config/awesome/ui/bar/init.lua

@@ -80,7 +80,7 @@ screen.connect_signal("request::desktop_decoration", function(s)
             margins = dpi(4),
             widget = wibox.container.margin
         },
-        shape = helpers.rrect(beautiful.border_radius),
+        shape = helpers.rrect(beautiful.border_radius / 2),
         bg = beautiful.wibar_bg,
         widget = wibox.container.background
     }
@@ -278,7 +278,7 @@ screen.connect_signal("request::desktop_decoration", function(s)
         bg = beautiful.wibar_bg,
         style = {
             bg = beautiful.xcolor0,
-            shape = helpers.rrect(beautiful.border_radius)
+            shape = helpers.rrect(beautiful.border_radius / 2)
         },
         layout = {spacing = dpi(10), layout = wibox.layout.fixed.vertical},
         widget_template = {

config/awesome/ui/decorations/titlebar.lua

@@ -1,67 +1,166 @@
--- Standard awesome library
-local gears = require("gears")
 local awful = require("awful")
-
--- Theme library
-local beautiful = require("beautiful")
-local dpi = beautiful.xresources.apply_dpi
-
--- Widget library
+local gears = require("gears")
 local wibox = require("wibox")
-
--- Helpers
+local beautiful = require("beautiful")
+local xresources = require("beautiful.xresources")
+local dpi = xresources.apply_dpi
+local bling = require("module.bling")
 local helpers = require("helpers")
 
--- Titlebar
--------------
-
-awful.titlebar.enable_tooltip = false
-client.connect_signal("request::titlebars", function(c)
-
-
-    -- Hide default titlebar
-    awful.titlebar.hide(c, beautiful.titlebar_pos)
-
-    -- Buttons for the titlebar
-    local buttons = gears.table.join(
-        -- Left click
-        awful.button({}, 1, function()
-            c:emit_signal("request::activate", "titlebar", {raise = true})
-            awful.mouse.client.move(c)
-        end),
-
-        -- Middle click
-        awful.button({}, 2, nil, function(c) 
-            c:kill() 
-        end),
-
-        -- Right click
-        awful.button({}, 3, function()
-            c:emit_signal("request::activate", "titlebar", {raise = true})
-            awful.mouse.client.resize(c)
-        end)
-    )
-
-
-    -- Side titlebar setup
-    awful.titlebar(c, {position = beautiful.titlebar_position, size = beautiful.titlebar_size}):setup {
-        {
-            {
-                awful.titlebar.widget.closebutton(c),
-                awful.titlebar.widget.minimizebutton(c),
-                awful.titlebar.widget.maximizedbutton(c),
-                layout = wibox.layout.fixed.vertical
-            },
-            {
-                buttons = buttons,
-                widget = wibox.widget.textbox("")
-            },
-            layout = wibox.layout.align.vertical
-        },
-        top = dpi(5),
-        bottom = dpi(5),
-        right = dpi(5),
-        widget = wibox.container.margin
+-- Shape buttons
+local function create_title_button(c, color_focus, color_unfocus, shp)
+    local tb = wibox.widget {
+        forced_width = dpi(20),
+        forced_height = dpi(20),
+        bg = color_focus .. 90,
+        shape = shp,
+        border_color = beautiful.border_color,
+        widget = wibox.container.background
     }
 
+    local function update()
+        if client.focus == c then
+            tb.bg = color_focus
+        else
+            tb.bg = color_unfocus
+        end
+    end
+    update()
+
+    c:connect_signal("focus", update)
+    c:connect_signal("unfocus", update)
+
+    tb:connect_signal("mouse::enter", function() tb.bg = color_focus .. 55 end)
+    tb:connect_signal("mouse::leave", function() tb.bg = color_focus end)
+
+    tb.visible = true
+    return tb
+end
+
+-- Text buttons
+local function create_text_title_button(c, symbol, font, color_focus, color_unfocus)
+    local tb = wibox.widget {
+        align = "center",
+        valign = "center",
+        font = font,
+        -- Initialize with the "unfocused" color
+        markup = symbol,
+        -- Increase the width of the textbox in order to make it easier to click. It does not affect the size of the symbol itself.
+        forced_width = dpi(20),
+        widget = wibox.widget.textbox
+    }
+
+    local function update()
+        if client.focus == c then
+            tb.markup = helpers.colorize_text(symbol, color_focus)
+        else
+            tb.markup = helpers.colorize_text(symbol, color_unfocus)
+        end
+    end
+    update()
+
+    c:connect_signal("focus", update)
+    c:connect_signal("unfocus", update)
+
+    tb:connect_signal("mouse::enter", function() tb.markup = helpers.colorize_text(symbol, color_focus .. 55) end)
+    tb:connect_signal("mouse::leave", function() tb.markup = helpers.colorize_text(symbol, color_focus) end)
+
+    tb.visible = true
+    return tb
+end
+
+-- Add a titlebar if titlebars_enabled is set to true in the rules.
+client.connect_signal("request::titlebars", function(c)
+    -- buttons for the titlebar
+
+    local buttons = gears.table.join(awful.button({}, 1, function()
+        c:emit_signal("request::activate", "titlebar", {raise = true})
+        if c.maximized == true then c.maximized = false end
+        awful.mouse.client.move(c)
+    end), awful.button({}, 3, function()
+        c:emit_signal("request::activate", "titlebar", {raise = true})
+        awful.mouse.client.resize(c)
+    end))
+    local borderbuttons = gears.table.join( awful.button({}, 3, function()
+        c:emit_signal("request::activate", "titlebar", {raise = true})
+        awful.mouse.client.resize(c)
+    end), awful.button({}, 1, function()
+        c:emit_signal("request::activate", "titlebar", {raise = true})
+        awful.mouse.client.resize(c)
+    end))
+
+    -- Shapes
+
+        local circle = function(width, height)
+            return function(cr) gears.shape.circle(cr, width, height) end
+        end
+
+    -- Buttons
+
+        local love = create_text_title_button(c, "", "Material Icons 11", beautiful.xcolor1, beautiful.titlebar_unfocused)
+        love:connect_signal("button::press", function() c:kill() end)
+
+        local float = create_title_button(c, beautiful.xcolor4, beautiful.titlebar_unfocused, circle(dpi(11), dpi(11)))
+        float:connect_signal("button::press", function() awful.client.floating.toggle(c) end)
+
+        local max = create_title_button(c, beautiful.xcolor5, beautiful.titlebar_unfocused, circle(dpi(11), dpi(11)))
+        max:connect_signal("button::press", function() c.maximized = not c.maximized end)
+
+    local wrap_widget = function(w)
+        return {
+            w,
+            top = dpi(20),
+            widget = wibox.container.margin
+        }
+    end
+
+    local wrap_text_widget = function(w)
+        return {
+            w,
+            top = dpi(5),
+            right = dpi(5),
+            widget = wibox.container.margin
+        }
+    end
+
+    -- Titlebar setup
+
+    awful.titlebar(c, {
+        position = "top",
+        size = beautiful.titlebar_size,
+        bg = "#00000000",
+    }):setup{
+            {   -- left
+                wrap_text_widget({
+                    love,
+                    left = dpi(25),
+                    widget = wibox.container.margin
+                }),
+                wrap_widget(float),
+                wrap_widget(max),
+                buttons = buttons,
+                layout = wibox.layout.fixed.horizontal,
+            },
+            {   -- middle
+                awful.titlebar.widget.titlewidget(c),
+                layout  = wibox.layout.fixed.horizontal
+            },
+            {   -- right
+                layout  = wibox.layout.fixed.horizontal
+            },
+        bg = beautiful.darker_bg,
+        shape = helpers.prrect(beautiful.border_radius, true, true, false, false),
+        widget = wibox.container.background
+    }
+
+    awful.titlebar(c, {
+        position = "bottom",
+        size = dpi(24),
+        bg = "#00000000"
+    }):setup{
+        bg = beautiful.darker_bg,
+        shape = helpers.prrect(beautiful.border_radius, false, false, true, true),
+        widget = wibox.container.background
+    }
 end)
+

config/awesome/ui/widgets/window_switcher.lua

@@ -183,7 +183,7 @@ local function draw_widget(
           content_fill_horizontal = true,
           widget = wibox.container.place
       },
-        bg = beautiful.xbackground,
+        bg = "#00000000",
         widget = wibox.container.background,
     })
 end
@@ -192,7 +192,7 @@ local enable = function(opts)
     local opts = opts or {}
 
     local type = opts.type or "thumbnail"
-    local background = beautiful.window_switcher_widget_bg or "#000000"
+    local background = beautiful.window_switcher_widget_bg or "#00000000"
     local border_width = beautiful.window_switcher_widget_border_width or dpi(3)
     local border_radius = beautiful.window_switcher_widget_border_radius
         or dpi(5)
@@ -240,7 +240,7 @@ local enable = function(opts)
     local scroll_next_key = opts.scroll_next_key or 5
 
     local window_switcher_box = wibox({
-        bg = beautiful.xbackground,
+        bg = "#00000000",
         visible = false,
         ontop = true,
         type = "splash",
@@ -254,7 +254,7 @@ local enable = function(opts)
             },
             shape_border_width = beautiful.widget_border_width,
             shape_border_color = beautiful.widget_border_color,
-            bg = beautiful.xbackground,
+            bg = "#00000000",
             shape = helpers.rrect(5),
             widget = wibox.container.background,
         },

config/rofi/config.rasi

@@ -1,10 +1,10 @@
 configuration {
-	modi:				    "run,drun,Kill:~/.config/rofi/scripts/kill.sh";
-	font:				    "Iosevka 9";
+	modi:				    "drun";
 	display-drun: 			"Apps";
-	display-run: 			"Run";
 	drun-display-format:    "{name}";
-	sidebar-mode: 			true;
+	font:				    "Iosevka 9";
+	show-icons:              true;
+	icon-theme: 			"Papirus";
 }
 
 @theme "/dev/null"
@@ -15,16 +15,20 @@ configuration {
 	accent:			#1c252c;
 	darker-bg:		#0A1419;
     active:      	#484e5b;
-	rad:			4px;
+	rad:			10px;
 
 	background-color: @bg;
 	text-color:	@fg;
 }
 
 window {
+	transparency:                   "real";
+	text-color:                     @fg;
+  	location:                       center;
+    x-offset:                       0;
+    y-offset:                       0;
     width: 30%;
-	border: 4px;
-	border-color: @darker-bg;
+	border-radius: 10px;
 }
 
 inputbar {
@@ -57,47 +61,28 @@ entry{
 }
 
 listview {
-	columns: 1;
-	lines: 12;
+	columns: 3;
+	lines: 3;
 	cycle: false;
-	dynamic: true;
-	layout: vertical;
-    margin: 15px 20px 15px 20px;
+    margin: 1em;
 }
 
 element {
 	orientation: vertical;
-	padding: 8px 8px;
+	padding: 1em;
 }
 
-element-text {
-    expand: true;
-	vertical-align: 0.5;
+element-text, element-icon {
+	padding: 0.2em;
+	horizontal-align: 0.5;
 	background-color: inherit;
-	text-color: inherit;
 }
 
+element-icon { size: 36px; }
+listview, element, element selected, element-text, element-icon { cursor: pointer; }
+
 element selected {
 	background-color: @darker-bg;
 	text-color: @fg;
-	border-radius: @rad;
+	border-radius: 5px;
 }
-
-mode-switcher {
-    background-color: @darker-bg;
-    padding: 0 0 4px 0;
-}
-
-button {
-    text-color: @accent;
-	background-color: @darker-bg;
-    padding: 6px 6px 6px 6px;
-    horizontal-align: 0.5;
-}
-
-button selected {
-    text-color: @active;
-    background-color: @bg;
-	border-radius: 0 0 4px 4px;
-}
-

config/rofi/scripts/kill.sh

@@ -1,10 +0,0 @@
-#!/bin/bash
-
-if [ "$@" ]
-then
-	pid=$(printf "%d" $(echo -e "$@" | cut -d ":" -f 1))
-	echo "$pid"
-	kill "$pid"
-else
-	ps -U $UID --no-headers -o "%p: %c"
-fi