From a480400359eb20633e32325bafefc900434c2365 Mon Sep 17 00:00:00 2001 From: Jas Singh Date: Sat, 20 Jul 2024 16:21:52 -0700 Subject: [PATCH] Added more configuration options --- modules/bar/Bar.ts | 1 - modules/bar/battery/index.js | 32 ++-- modules/bar/bluetooth/index.js | 9 +- modules/bar/clock/index.js | 10 +- modules/bar/index.js | 113 -------------- modules/bar/menu/index.js | 3 +- modules/bar/network/index.js | 11 +- modules/bar/notifications/index.js | 35 +++-- modules/bar/power/index.js | 18 --- modules/bar/systray/index.js | 44 +++--- modules/bar/volume/index.js | 10 +- modules/bar/workspaces/index.js | 51 +++++-- modules/menus/audio/index.js | 2 +- modules/menus/bluetooth/index.js | 2 +- modules/menus/dashboard/profile/index.js | 14 +- modules/menus/dashboard/shortcuts/index.js | 77 ++++++---- modules/menus/energy/index.js | 2 +- modules/menus/media/index.js | 2 +- modules/menus/network/ethernet/index.js | 70 ++++----- modules/menus/network/index.js | 2 +- modules/menus/power/helpers/actions.js | 16 +- options.ts | 164 ++++++--------------- scss/entry.scss | 6 +- scss/main.scss | 6 +- scss/style.ts | 2 +- scss/style/bar/notifications.scss | 5 + scss/style/bar/workspace.scss | 18 ++- scss/style/menus/audiomenu.scss | 7 + scss/style/menus/bluetooth.scss | 4 + scss/style/menus/calendar.scss | 2 +- scss/style/menus/dashboard.scss | 5 +- scss/style/menus/energy.scss | 4 + scss/style/menus/media.scss | 5 + scss/style/menus/menu.scss | 2 + scss/style/menus/network.scss | 10 +- scss/style/menus/notifications.scss | 4 +- scss/variables.scss | 17 ++- 37 files changed, 368 insertions(+), 417 deletions(-) delete mode 100644 modules/bar/index.js delete mode 100644 modules/bar/power/index.js diff --git a/modules/bar/Bar.ts b/modules/bar/Bar.ts index 7f61894..23697ae 100644 --- a/modules/bar/Bar.ts +++ b/modules/bar/Bar.ts @@ -14,7 +14,6 @@ import { BarItemBox as WidgetContainer } from "../shared/barItemBox.js"; import options from "options"; const { start, center, end } = options.bar.layout; -const { transparent, position } = options.bar; export type BarWidget = keyof typeof widget; diff --git a/modules/bar/battery/index.js b/modules/bar/battery/index.js index 5fed6ca..1083c46 100644 --- a/modules/bar/battery/index.js +++ b/modules/bar/battery/index.js @@ -4,9 +4,10 @@ import { openMenu } from "../utils.js"; const BatteryLabel = () => { const isVis = Variable(battery.available); - const icon = battery - .bind("percent") - .as((p) => `battery-level-${Math.floor(p / 10) * 10}-symbolic`); + const icon = () => + battery + .bind("percent") + .as((p) => `battery-level-${Math.floor(p / 10) * 10}-symbolic`); battery.connect("changed", ({ available }) => { isVis.value = available; @@ -36,19 +37,22 @@ const BatteryLabel = () => { class_name: "battery", visible: battery.bind("available"), tooltip_text: battery.bind("time_remaining").as((t) => t.toString()), - children: [ - Widget.Icon({ icon }), - Widget.Label({ - label: battery.bind("percent").as((p) => ` ${p}%`), - }), - ], setup: (self) => { self.hook(battery, () => { - self.tooltip_text = generateTooltip( - battery.time_remaining, - battery.charging, - battery.charged, - ); + if (battery.available) { + self.children = [ + Widget.Icon({ icon: icon() }), + Widget.Label({ + label: battery.bind("percent").as((p) => ` ${p}%`), + }), + ]; + + self.tooltip_text = generateTooltip( + battery.time_remaining, + battery.charging, + battery.charged, + ); + } }); }, }), diff --git a/modules/bar/bluetooth/index.js b/modules/bar/bluetooth/index.js index 927787e..f7747a0 100644 --- a/modules/bar/bluetooth/index.js +++ b/modules/bar/bluetooth/index.js @@ -1,4 +1,5 @@ const bluetooth = await Service.import('bluetooth') +import options from "options"; import { openMenu } from "../utils.js"; const Bluetooth = () => { @@ -8,7 +9,13 @@ const Bluetooth = () => { }); const btText = Widget.Label({ - label: bluetooth.bind("enabled").as((v) => v ? " On" : " Off"), + label: Utils.merge([bluetooth.bind("enabled"), options.bar.bluetooth.label.bind("value")], (btEnabled, showLabel) => { + if (showLabel) { + return btEnabled ? " On" : " Off" + } + return ""; + + }), class_name: "bar-bt_label", }); diff --git a/modules/bar/clock/index.js b/modules/bar/clock/index.js index 3be845e..27823a8 100644 --- a/modules/bar/clock/index.js +++ b/modules/bar/clock/index.js @@ -1,14 +1,18 @@ +import GLib from "gi://GLib"; import { openMenu } from "../utils.js"; +import options from "options"; +const { format } = options.bar.clock; -const date = Variable("", { - poll: [1000, 'date "+󰃭 %a %b %d  %I:%M:%S %p"'], +const date = Variable(GLib.DateTime.new_now_local(), { + poll: [1000, () => GLib.DateTime.new_now_local()], }); +const time = Utils.derive([date, format], (c, f) => c.format(f) || ""); const Clock = () => { return { component: Widget.Label({ class_name: "clock", - label: date.bind(), + label: time.bind(), }), isVisible: true, boxClass: "clock", diff --git a/modules/bar/index.js b/modules/bar/index.js deleted file mode 100644 index 4dd4f0d..0000000 --- a/modules/bar/index.js +++ /dev/null @@ -1,113 +0,0 @@ -import { Menu } from "./menu/index.js"; -import { Workspaces } from "./workspaces/index.js"; -import { ClientTitle } from "./window_title/index.js"; -import { Media } from "./media/index.js"; -import { Notifications } from "./notifications/index.js"; -import { Volume } from "./volume/index.js"; -import { Network } from "./network/index.js"; -import { Bluetooth } from "./bluetooth/index.js"; -import { BatteryLabel } from "./battery/index.js"; -import { Clock } from "./clock/index.js"; -import { SysTray } from "./systray/index.js"; - -import { BarItemBox } from "../shared/barItemBox.js"; - -// layout of the bar -const Left = (monitor, wsMap) => { - return Widget.Box({ - class_name: "box-left", - hpack: "start", - spacing: 5, - children: [BarItemBox(Menu()), BarItemBox(Workspaces(monitor, wsMap, 10)), BarItemBox(ClientTitle())], - }); -}; - -const Center = () => { - return Widget.Box({ - class_name: "box-center", - spacing: 5, - children: [ - BarItemBox(Media()), - ], - }); -}; - -const Right = () => { - return Widget.Box({ - class_name: "box-right", - hpack: "end", - spacing: 5, - children: [ - BarItemBox(Volume()), - BarItemBox(Network()), - BarItemBox(Bluetooth()), - BarItemBox(BatteryLabel()), - BarItemBox(SysTray()), - BarItemBox(Clock()), - BarItemBox(Notifications()), - ], - }); -}; - -const LeftAlt = (monitor, wsMap) => { - return Widget.Box({ - class_name: "box-left", - hpack: "start", - spacing: 5, - children: [BarItemBox(Menu()), BarItemBox(Workspaces(monitor, wsMap)), BarItemBox(ClientTitle())], - }); -}; - -const CenterAlt = () => { - return Widget.Box({ - class_name: "box-center", - spacing: 5, - children: [ - BarItemBox(Media()), - ], - }); -}; - -const RightAlt = () => { - return Widget.Box({ - class_name: "box-right", - hpack: "end", - spacing: 5, - children: [ - BarItemBox(Volume()), - BarItemBox(Clock()), - ], - }); -}; - -const Bar = (monitor = 0, wsMap) => { - return Widget.Window({ - name: `bar-${monitor}`, - class_name: "bar", - monitor, - anchor: ["top", "left", "right"], - exclusivity: "exclusive", - child: Widget.CenterBox({ - start_widget: Left(monitor, wsMap), - center_widget: Center(), - end_widget: Right(), - }), - }); -}; - -const BarAlt = (monitor = 0, wsMap) => { - return Widget.Window({ - name: `bar-${monitor}`, - class_name: "bar", - monitor, - anchor: ["top", "left", "right"], - exclusivity: "exclusive", - child: Widget.CenterBox({ - start_widget: LeftAlt(monitor, wsMap), - center_widget: CenterAlt(), - end_widget: RightAlt(), - }), - }); -}; - -export { Bar, BarAlt }; diff --git a/modules/bar/menu/index.js b/modules/bar/menu/index.js index 21750b5..16a406f 100644 --- a/modules/bar/menu/index.js +++ b/modules/bar/menu/index.js @@ -1,11 +1,12 @@ import { openMenu } from "../utils.js"; +import options from "options"; const Menu = () => { return { component: Widget.Box({ child: Widget.Label({ class_name: "bar-menu_label", - label: "󰣇", + label: options.bar.launcher.icon.bind("value"), }), }), isVisible: true, diff --git a/modules/bar/network/index.js b/modules/bar/network/index.js index 3cfb919..8996c89 100644 --- a/modules/bar/network/index.js +++ b/modules/bar/network/index.js @@ -1,4 +1,5 @@ const network = await Service.import("network"); +import options from "options"; import { openMenu } from "../utils.js"; const Network = () => { @@ -22,7 +23,15 @@ const Network = () => { }), Widget.Label({ class_name: "bar-network-label", - label: network.bind("wired").as(() => " Wired"), + label: Utils.merge( + [network.bind("wired"), options.bar.network.label.bind("value")], + (_, showLabel) => { + if (showLabel) { + return " Wired"; + } + return ""; + }, + ), }), ]; diff --git a/modules/bar/notifications/index.js b/modules/bar/notifications/index.js index cfa8f06..2b7b997 100644 --- a/modules/bar/notifications/index.js +++ b/modules/bar/notifications/index.js @@ -1,4 +1,7 @@ import { openMenu } from "../utils.js"; +import options from "options"; + +const { show_total } = options.bar.notifications; const notifs = await Service.import("notifications"); @@ -9,21 +12,27 @@ export const Notifications = () => { child: Widget.Box({ hpack: "start", class_name: "bar-notifications", - child: Widget.Label({ - hpack: "center", - class_name: "bar-notifications-label", - setup: (self) => { - self.hook(notifs, () => { - if (notifs.dnd) { - return (self.label = "󰂛"); - } else if (notifs.notifications.length > 0) { - return (self.label = "󱅫"); - } else { - return (self.label = "󰂚"); - } + children: Utils.merge( + [notifs.bind("notifications"), notifs.bind("dnd"), show_total.bind("value")], + (notif, dnd, showTotal) => { + const notifIcon = Widget.Label({ + hpack: "center", + class_name: "bar-notifications-label", + label: dnd ? "󰂛" : notif.length > 0 ? "󱅫" : "󰂚", }); + + const notifLabel = Widget.Label({ + hpack: "center", + class_name: "bar-notifications-total", + label: notif.length.toString(), + }); + + if (showTotal) { + return [notifIcon, notifLabel]; + } + return [notifIcon]; }, - }), + ), }), }), isVisible: true, diff --git a/modules/bar/power/index.js b/modules/bar/power/index.js deleted file mode 100644 index 23b948f..0000000 --- a/modules/bar/power/index.js +++ /dev/null @@ -1,18 +0,0 @@ -export const Power = () => { - return { - component: Widget.Box({ - child: Widget.Button({ - class_name: "bar-powermenu", - child: Widget.Icon({ - class_name: "bar-power_label", - icon: "system-shutdown-symbolic", - }), - }), - }), - isVisible: true, - boxClass: "power", - props: { - on_clicked: () => App.toggleWindow("powermenu"), - }, - }; -}; diff --git a/modules/bar/systray/index.js b/modules/bar/systray/index.js index e667e64..eb9dc3c 100644 --- a/modules/bar/systray/index.js +++ b/modules/bar/systray/index.js @@ -1,27 +1,37 @@ const systemtray = await Service.import("systemtray"); +import { bash } from "lib/utils"; +import options from "options"; + +const { ignore } = options.bar.systray; const SysTray = () => { const isVis = Variable(false); - const items = systemtray.bind("items").as((items) => { - isVis.value = items.length > 0; - return items.map((item) => { - if (item.menu !== undefined) { - item.menu["class_name"] = "systray-menu"; - } + const items = Utils.merge( + [systemtray.bind("items"), ignore.bind("value")], + (items, ignored) => { + const filteredTray = items.filter(({ id }) => !ignored.includes(id)); - return Widget.Button({ - cursor: "pointer", - child: Widget.Icon({ - class_name: "systray-icon", - icon: item.bind("icon"), - }), - on_primary_click: (_, event) => item.activate(event), - on_secondary_click: (_, event) => item.openMenu(event), - tooltip_markup: item.bind("tooltip_markup"), + isVis.value = filteredTray.length > 0; + + return filteredTray.map((item) => { + if (item.menu !== undefined) { + item.menu["class_name"] = "systray-menu"; + } + + return Widget.Button({ + cursor: "pointer", + child: Widget.Icon({ + class_name: "systray-icon", + icon: item.bind("icon"), + }), + on_primary_click: (_, event) => item.activate(event), + on_secondary_click: (_, event) => item.openMenu(event), + tooltip_markup: item.bind("tooltip_markup"), + }); }); - }); - }); + }, + ); return { component: Widget.Box({ diff --git a/modules/bar/volume/index.js b/modules/bar/volume/index.js index d670980..4985424 100644 --- a/modules/bar/volume/index.js +++ b/modules/bar/volume/index.js @@ -1,7 +1,8 @@ const audio = await Service.import("audio"); import { openMenu } from "../utils.js"; +import options from "options"; -import { globalMousePos } from "../../../globals.js"; +import { globalMousePos } from "globals.js"; const Volume = () => { const icons = { @@ -41,7 +42,12 @@ const Volume = () => { component: Widget.Box({ vpack: "center", class_name: "volume", - children: [volIcn, volPct], + children: options.bar.volume.label.bind("value").as((showLabel) => { + if (showLabel) { + return [volIcn, volPct]; + } + return [volIcn]; + }), }), isVisible: true, boxClass: "volume", diff --git a/modules/bar/workspaces/index.js b/modules/bar/workspaces/index.js index 112939a..e3fbf35 100644 --- a/modules/bar/workspaces/index.js +++ b/modules/bar/workspaces/index.js @@ -58,8 +58,46 @@ const Workspaces = (monitor = -1, ws = 8) => { return Widget.Label({ attribute: i, vpack: "center", - label: `${i}`, - setup: (self) => + class_name: Utils.merge( + [ + options.bar.workspaces.show_icons.bind("value"), + options.bar.workspaces.icons.available.bind("value"), + options.bar.workspaces.icons.active.bind("value"), + options.bar.workspaces.icons.occupied.bind("value"), + ], + (show_icons) => { + if (show_icons) { + return `workspace-icon`; + } + return ""; + }, + ), + label: Utils.merge( + [ + options.bar.workspaces.show_icons.bind("value"), + options.bar.workspaces.icons.available.bind("value"), + options.bar.workspaces.icons.active.bind("value"), + options.bar.workspaces.icons.occupied.bind("value"), + ], + (showIcons, available, active, occupied) => { + if (showIcons) { + if (hyprland.active.workspace.id === i) { + return active; + } + if ((hyprland.getWorkspace(i)?.windows || 0) > 0) { + return occupied; + } + if ( + monitor !== -1 && + hyprland.getWorkspace(i)?.monitorID !== monitor + ) { + return available; + } + } + return `${i}`; + }, + ), + setup: (self) => { self.hook(hyprland, () => { self.toggleClassName( "active", @@ -69,13 +107,8 @@ const Workspaces = (monitor = -1, ws = 8) => { "occupied", (hyprland.getWorkspace(i)?.windows || 0) > 0, ); - - const isCurrentMonitor = - monitor !== -1 && - hyprland.getWorkspace(i)?.monitorID !== monitor; - - self.toggleClassName("hidden", isCurrentMonitor); - }), + }); + }, }); }); }, diff --git a/modules/menus/audio/index.js b/modules/menus/audio/index.js index 2edb2f8..c7cbf0c 100644 --- a/modules/menus/audio/index.js +++ b/modules/menus/audio/index.js @@ -7,7 +7,7 @@ export default () => { name: "audiomenu", transition: "crossfade", child: Widget.Box({ - class_name: "menu-items", + class_name: "menu-items audio", hpack: "fill", hexpand: true, child: Widget.Box({ diff --git a/modules/menus/bluetooth/index.js b/modules/menus/bluetooth/index.js index baf0847..9557faf 100644 --- a/modules/menus/bluetooth/index.js +++ b/modules/menus/bluetooth/index.js @@ -6,7 +6,7 @@ export default () => { name: "bluetoothmenu", transition: "crossfade", child: Widget.Box({ - class_name: "menu-items", + class_name: "menu-items bluetooth", hpack: "fill", hexpand: true, child: Widget.Box({ diff --git a/modules/menus/dashboard/profile/index.js b/modules/menus/dashboard/profile/index.js index f13d24a..81630a4 100644 --- a/modules/menus/dashboard/profile/index.js +++ b/modules/menus/dashboard/profile/index.js @@ -1,11 +1,14 @@ import icons from "../../../icons/index.js"; import powermenu from "../../power/helpers/actions.js"; +import options from "options"; +const { image, name } = options.menus.dashboard.powermenu.avatar; + const Profile = () => { const handleClick = (action) => { App.closeWindow("dashboardmenu"); return powermenu.action(action); - } + }; return Widget.Box({ class_name: "profiles-container", @@ -20,12 +23,17 @@ const Profile = () => { Widget.Icon({ hpack: "center", class_name: "profile-picture", - icon: `${App.configDir}/assets/21210205.png`, + icon: image.bind("value"), }), Widget.Label({ hpack: "center", class_name: "profile-name", - label: "Jaskir Linux", + label: name.bind("value").as((v) => { + if (v === "system") { + return Utils.exec("bash -c whoami"); + } + return v; + }), }), ], }), diff --git a/modules/menus/dashboard/shortcuts/index.js b/modules/menus/dashboard/shortcuts/index.js index 5f328c4..90d3720 100644 --- a/modules/menus/dashboard/shortcuts/index.js +++ b/modules/menus/dashboard/shortcuts/index.js @@ -1,4 +1,7 @@ const hyprland = await Service.import("hyprland"); +import options from "options"; + +const { left, right } = options.menus.dashboard.shortcuts; const Shortcuts = () => { const isRecording = Variable(false, { @@ -83,21 +86,25 @@ const Shortcuts = () => { hexpand: true, children: [ Widget.Button({ - tooltip_text: "Microsoft Edge", - class_name: "dashboard-button edge top-button", - on_primary_click: () => handleClick("microsoft-edge-stable"), + tooltip_text: left.shortcut1.tooltip.bind("value"), + class_name: "dashboard-button top-button", + on_primary_click: left.shortcut1.command + .bind("value") + .as((cmd) => () => handleClick(cmd)), child: Widget.Label({ class_name: "button-label", - label: "󰇩", + label: left.shortcut1.icon.bind("value"), }), }), Widget.Button({ - tooltip_text: "Spotify", - class_name: "dashboard-button spotify", - on_primary_click: () => handleClick("spotify-launcher"), + tooltip_text: left.shortcut2.tooltip.bind("value"), + class_name: "dashboard-button", + on_primary_click: left.shortcut2.command + .bind("value") + .as((cmd) => () => handleClick(cmd)), child: Widget.Label({ class_name: "button-label", - label: "", + label: left.shortcut2.icon.bind("value"), }), }), ], @@ -107,22 +114,26 @@ const Shortcuts = () => { hexpand: true, children: [ Widget.Button({ - tooltip_text: "Discord", - class_name: "dashboard-button discord top-button", - on_primary_click: () => handleClick("discord"), + tooltip_text: left.shortcut3.tooltip.bind("value"), + class_name: "dashboard-button top-button", + on_primary_click: left.shortcut3.command + .bind("value") + .as((cmd) => () => handleClick(cmd)), child: Widget.Label({ hpack: "center", class_name: "button-label", - label: "", + label: left.shortcut3.icon.bind("value"), }), }), Widget.Button({ - tooltip_text: "Search Apps", - class_name: "dashboard-button search", - on_primary_click: () => handleClick("rofi -show drun"), + tooltip_text: left.shortcut4.tooltip.bind("value"), + class_name: "dashboard-button", + on_primary_click: left.shortcut4.command + .bind("value") + .as((cmd) => () => handleClick(cmd)), child: Widget.Label({ class_name: "button-label", - label: "", + label: left.shortcut4.icon.bind("value"), }), }), ], @@ -139,24 +150,25 @@ const Shortcuts = () => { hexpand: true, children: [ Widget.Button({ - tooltip_text: "Color Picker", - class_name: "dashboard-button colorpicker top-button", - on_primary_click: () => handleClick("hyprpicker -a", {}, 500), + tooltip_text: right.shortcut1.tooltip.bind("value"), + class_name: "dashboard-button top-button", + on_primary_click: right.shortcut1.command + .bind("value") + .as((cmd) => () => handleClick(cmd)), child: Widget.Label({ class_name: "button-label", - label: "", + label: right.shortcut1.icon.bind("value"), }), }), Widget.Button({ - tooltip_text: "Hyprland Settings", - class_name: "dashboard-button settings", - on_primary_click: () => - handleClick( - 'bash -c "kitty -e nvim $HOME/.config/hypr/hyprland.conf"', - ), + tooltip_text: right.shortcut2.tooltip.bind("value"), + class_name: "dashboard-button", + on_primary_click: right.shortcut2.command + .bind("value") + .as((cmd) => () => handleClick(cmd)), child: Widget.Label({ class_name: "button-label", - label: "󰒓", + label: right.shortcut2.icon.bind("value"), }), }), ], @@ -166,13 +178,14 @@ const Shortcuts = () => { hexpand: true, children: [ Widget.Button({ - tooltip_text: "Screenshot", - class_name: "dashboard-button snapshot top-button", - on_primary_click: () => - handleClick(`${App.configDir}/services/snapshot.sh`), + tooltip_text: right.shortcut3.tooltip.bind("value"), + class_name: "dashboard-button top-button", + on_primary_click: right.shortcut3.command + .bind("value") + .as((cmd) => () => handleClick(cmd)), child: Widget.Label({ class_name: "button-label", - label: "󰄀", + label: right.shortcut3.icon.bind("value"), }), }), Widget.Button({ diff --git a/modules/menus/energy/index.js b/modules/menus/energy/index.js index 4411030..dab0347 100644 --- a/modules/menus/energy/index.js +++ b/modules/menus/energy/index.js @@ -7,7 +7,7 @@ export default () => { name: "energymenu", transition: "crossfade", child: Widget.Box({ - class_name: "menu-items", + class_name: "menu-items energy", hpack: "fill", hexpand: true, child: Widget.Box({ diff --git a/modules/menus/media/index.js b/modules/menus/media/index.js index b681481..c86272b 100644 --- a/modules/menus/media/index.js +++ b/modules/menus/media/index.js @@ -6,7 +6,7 @@ export default () => { name: "mediamenu", transition: "crossfade", child: Widget.Box({ - class_name: "menu-items", + class_name: "menu-items media", hpack: "fill", hexpand: true, child: Widget.Box({ diff --git a/modules/menus/network/ethernet/index.js b/modules/menus/network/ethernet/index.js index a5b3304..20b5b2b 100644 --- a/modules/menus/network/ethernet/index.js +++ b/modules/menus/network/ethernet/index.js @@ -21,41 +21,43 @@ const Ethernet = () => { child: Widget.Box({ class_name: "menu-content", vertical: true, - child: network.bind("wired").as((wired) => { - return Widget.Box({ - class_name: "network-element-item", - child: Widget.Box({ - hpack: "start", - children: [ - Widget.Icon({ - class_name: `network-icon ethernet ${network.wired.state === "activated" ? "active" : ""}`, - tooltip_text: wired.internet, - icon: `${wired["icon_name"]}`, - }), - Widget.Box({ - class_name: "connection-container", - vertical: true, - children: [ - Widget.Label({ - class_name: "active-connection", - hpack: "start", - truncate: "end", - wrap: true, - label: `Ethernet Connection ${wired.state !== "unknown" && typeof wired?.speed === "number" ? `(${wired?.speed / 1000} Gbps)` : ""}`, - }), - Widget.Label({ - hpack: "start", - class_name: "connection-status dim", - label: - wired.internet.charAt(0).toUpperCase() + - wired.internet.slice(1), - }), - ], - }), - ], - }), + setup: (self) => { + self.hook(network, () => { + return (self.child = Widget.Box({ + class_name: "network-element-item", + child: Widget.Box({ + hpack: "start", + children: [ + Widget.Icon({ + class_name: `network-icon ethernet ${network.wired.state === "activated" ? "active" : ""}`, + tooltip_text: network.wired.internet, + icon: `${network.wired["icon_name"]}`, + }), + Widget.Box({ + class_name: "connection-container", + vertical: true, + children: [ + Widget.Label({ + class_name: "active-connection", + hpack: "start", + truncate: "end", + wrap: true, + label: `Ethernet Connection ${network.wired.state !== "unknown" && typeof network.wired?.speed === "number" ? `(${network.wired?.speed / 1000} Gbps)` : ""}`, + }), + Widget.Label({ + hpack: "start", + class_name: "connection-status dim", + label: + network.wired.internet.charAt(0).toUpperCase() + + network.wired.internet.slice(1), + }), + ], + }), + ], + }), + })); }); - }), + }, }), }), ], diff --git a/modules/menus/network/index.js b/modules/menus/network/index.js index d21e147..9bef10b 100644 --- a/modules/menus/network/index.js +++ b/modules/menus/network/index.js @@ -7,7 +7,7 @@ export default () => { name: "networkmenu", transition: "crossfade", child: Widget.Box({ - class_name: "menu-items", + class_name: "menu-items network", child: Widget.Box({ vertical: true, hexpand: true, diff --git a/modules/menus/power/helpers/actions.js b/modules/menus/power/helpers/actions.js index 900f9e1..efb8543 100644 --- a/modules/menus/power/helpers/actions.js +++ b/modules/menus/power/helpers/actions.js @@ -1,9 +1,5 @@ -const powerOptions = { - sleep: "systemctl suspend", - reboot: "systemctl reboot", - logout: "pkill Hyprland", - shutdown: "shutdown now", -}; +import options from "options"; +const { sleep, reboot, logout, shutdown } = options.menus.dashboard.powermenu; class PowerMenu extends Service { static { @@ -26,10 +22,10 @@ class PowerMenu extends Service { action(action) { [this.#cmd, this.#title] = { - sleep: [powerOptions.sleep, "Sleep"], - reboot: [powerOptions.reboot, "Reboot"], - logout: [powerOptions.logout, "Log Out"], - shutdown: [powerOptions.shutdown, "Shutdown"], + sleep: [sleep.value, "Sleep"], + reboot: [reboot.value, "Reboot"], + logout: [logout.value, "Log Out"], + shutdown: [shutdown.value, "Shutdown"], }[action]; this.notify("cmd"); diff --git a/options.ts b/options.ts index 063aa8f..d9ef080 100644 --- a/options.ts +++ b/options.ts @@ -1,7 +1,4 @@ import { opt, mkOptions } from "lib/option" -import { distro } from "lib/variables" -import { icon } from "lib/utils" -import icons from "lib/icons" const colors = { "rosewater": "#f5e0dc", @@ -36,6 +33,11 @@ const colors = { const options = mkOptions(OPTIONS, { autotheme: opt(false), theme: { + font: { + size: opt("1.2rem"), + name: opt("Ubuntu Nerd Font"), + weight: opt(600), + }, notification: { background: opt(colors.mantle), actions: { @@ -129,13 +131,19 @@ const options = mkOptions(OPTIONS, { background: opt(colors.base2), hover: opt(colors.surface1), icon: opt(colors.lavender), + total: opt(colors.lavender) }, }, menus: { monochrome: opt(true), background: opt(colors.crust), cards: opt(colors.base), - border: opt(colors.surface0), + border: { + size: opt("0.13 em"), + radius: opt("0.7em"), + card_radius: opt("0.4em"), + color: opt(colors.surface0) + }, text: opt(colors.text), dimtext: opt(colors.surface2), feinttext: opt(colors.surface0), @@ -197,6 +205,12 @@ const options = mkOptions(OPTIONS, { song: opt(colors.lavender), artist: opt(colors.teal), album: opt(colors.pink), + background: { + color: opt(colors.crust), + }, + border: { + color: opt(colors.surface0), + }, buttons: { inactive: opt(colors.surface2), enabled: opt(colors.teal), @@ -305,7 +319,7 @@ const options = mkOptions(OPTIONS, { active: opt(colors.sky) }, icons: { - passive: opt(colors.text), + passive: opt(colors.overlay2), active: opt(colors.sky), }, iconbutton: { @@ -502,7 +516,7 @@ const options = mkOptions(OPTIONS, { notifications: { label: opt(colors.lavender), no_notifications_label: opt(colors.surface0), - background: opt(colors.mantle), + background: opt(colors.crust), card: opt(colors.base), border: opt(colors.surface0), switch_divider: opt(colors.surface1), @@ -518,13 +532,7 @@ const options = mkOptions(OPTIONS, { } }, - font: { - size: opt(13), - name: opt("Ubuntu Nerd Font"), - }, - bar: { - position: opt<"top" | "bottom">("top"), layout: { start: opt>([ "dashboard", @@ -545,7 +553,7 @@ const options = mkOptions(OPTIONS, { ]), }, launcher: { - icon: opt(icon(distro.logo, icons.ui.search)), + icon: opt("󰣇"), }, workspaces: { show_icons: opt(false), @@ -557,21 +565,14 @@ const options = mkOptions(OPTIONS, { workspaces: opt(7), monitorSpecific: opt(true), }, - media: { - icon: opt(true), - label: opt(true), - }, volume: { label: opt(true), }, network: { - status: { - show: opt(true), - type: opt<"status" | "connection">("connection"), - }, + label: opt(true), }, bluetooth: { - status: opt(true), + label: opt(true), }, battery: { show_label: opt(true), @@ -583,11 +584,7 @@ const options = mkOptions(OPTIONS, { ]), }, clock: { - icons: { - clock: opt(true), - calendar: opt(true), - }, - format: opt("%H:%M - %A %e."), + format: opt("󰃭 %a %b %d  %I:%M:%S %p"), }, notifications: { show_total: opt(false) @@ -595,86 +592,55 @@ const options = mkOptions(OPTIONS, { }, menus: { - border: { - enabled: opt(true), - size: opt(""), - outer_gap: opt(""), - inner_gap: opt(""), - radius: opt(""), - card_radius: opt(""), - }, dashboard: { - modules: opt([ - "powermenu", - "shortcuts", - "controls", - "directories", - "monitor", - ]), - order: { - primary: opt([ - "powermenu", - "shortcuts", - "controls", - "directories", - "monitor", - ]), - powermenu: opt([ - "avatar", - "powermenu", - ]), - monitor: opt([ - "cpu", - "ram", - "gpu", - "disk", - ]) - }, powermenu: { sleep: opt("systemctl suspend"), reboot: opt("systemctl reboot"), logout: opt("pkill Hyprland"), shutdown: opt("shutdown now"), avatar: { - image: opt, + image: opt("/home/jaskir/Pictures/Icons/900-900-max_catppuccin-mocha_hald8_GaussianRBF_lum1_shape96_near16.png"), name: opt<"system" | string>("system"), }, }, shortcuts: { left: { shortcut1: { - icon: opt(""), - command: opt("") + icon: opt("󰇩"), + tooltip: opt("Microsoft Edge"), + command: opt("microsoft-edge-stable") }, shortcut2: { - icon: opt(""), - command: opt("") + icon: opt(""), + tooltip: opt("Spotify"), + command: opt("spotify-launcher") }, shortcut3: { - icon: opt(""), - command: opt("") + icon: opt(""), + tooltip: opt("Discord"), + command: opt("discord") }, shortcut4: { - icon: opt(""), - command: opt("") + icon: opt(""), + tooltip: opt("Search Apps"), + command: opt("rofi -show drun") }, }, right: { shortcut1: { - icon: opt(""), - command: opt("") + icon: opt(""), + tooltip: opt("Color Picker"), + command: opt("hyprpicker -a") }, shortcut2: { - icon: opt(""), - command: opt("") + icon: opt("󰒓"), + tooltip: opt("Hyprland Config"), + command: opt("bash -c \"kitty -e nvim $HOME/.config/hypr/hyprland.conf\"") }, shortcut3: { - icon: opt(""), - command: opt("") - }, - shortcut4: { - icon: opt(""), - command: opt("") + icon: opt("󰄀"), + tooltip: opt("Screenshot"), + command: opt("./services/snapshot.sh") }, } }, @@ -709,43 +675,16 @@ const options = mkOptions(OPTIONS, { } }, }, - volume: { - order: opt([ - "volume", - "devices", - ]) - }, network: { - order: opt([ - "ethernet", - "wifi", - ]), status: opt(true), }, bluetooth: { status: opt(true), }, battery: { - modules: opt([ - "brightness", - "powerprofile" - ]), - order: opt([ - "brightness", - "powerprofile" - ]) + percentage: opt(true) }, clock: { - modules: opt([ - "clock", - "calendar", - "weather" - ]), - order: opt([ - "clock", - "calendar", - "weather" - ]), time: { military: opt(false), seconds: opt(true) @@ -767,15 +706,6 @@ const options = mkOptions(OPTIONS, { monochromeIcon: opt(true), }, - powermenu: { - sleep: opt("systemctl suspend"), - reboot: opt("systemctl reboot"), - logout: opt("pkill Hyprland"), - shutdown: opt("shutdown now"), - layout: opt<"line" | "box">("line"), - labels: opt(true), - }, - osd: { progress: { vertical: opt(true), diff --git a/scss/entry.scss b/scss/entry.scss index 131be2e..fdaf0aa 100644 --- a/scss/entry.scss +++ b/scss/entry.scss @@ -1,9 +1,9 @@ @import '/home/jaskir/.config/ags/scss/variables.scss'; * { all: unset; - font-family: "Ubuntu Nerd Font"; - font-size: 1.2rem; - font-weight: 600; + font-family: $font-name; + font-size: $font-size; + font-weight: $font-weight; } //general diff --git a/scss/main.scss b/scss/main.scss index 38c8bd6..2a65b84 100644 --- a/scss/main.scss +++ b/scss/main.scss @@ -1,8 +1,8 @@ * { all: unset; - font-family: "Ubuntu Nerd Font"; - font-size: 1.2rem; - font-weight: 600; + font-family: $font-name; + font-size: $font-size; + font-weight: $font-weight; } //general diff --git a/scss/style.ts b/scss/style.ts index 9c45ff8..1255a13 100644 --- a/scss/style.ts +++ b/scss/style.ts @@ -37,7 +37,7 @@ function extractVariables(theme: any, prefix: string = ""): string[] { } const variables = () => [ - ...extractVariables(options.theme) + ...extractVariables(options.theme), ]; async function resetCss() { diff --git a/scss/style/bar/notifications.scss b/scss/style/bar/notifications.scss index e703efb..9772cb7 100644 --- a/scss/style/bar/notifications.scss +++ b/scss/style/bar/notifications.scss @@ -5,3 +5,8 @@ font-size: 1.3em; min-width: 1em; } + +.bar-notifications-total { + color: if($bar-buttons-monochrome, $bar-buttons-text, $bar-buttons-notifications-total); + margin-left: 0.4em; +} diff --git a/scss/style/bar/workspace.scss b/scss/style/bar/workspace.scss index a61f55a..08a1eda 100644 --- a/scss/style/bar/workspace.scss +++ b/scss/style/bar/workspace.scss @@ -12,6 +12,10 @@ background-color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-workspaces-available); color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-workspaces-available); + &:not(:first-child) { + margin-left: 4.5em; + } + &.occupied { background-color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-workspaces-occupied); color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-workspaces-occupied); @@ -25,10 +29,16 @@ min-width: 12em; min-height: 4em; } + + &.workspace-icon { + background-color: transparent; + min-width: 0em; + min-height: 0em; + border-radius: 0em; + margin: 0rem 1rem * .5; + transition: 300ms * .5; + font-size: 1.1em; + } } -} - -.workspaces label:not(:first-child) { - margin-left: 4.5em; } diff --git a/scss/style/menus/audiomenu.scss b/scss/style/menus/audiomenu.scss index 1401da6..d14a172 100644 --- a/scss/style/menus/audiomenu.scss +++ b/scss/style/menus/audiomenu.scss @@ -1,6 +1,10 @@ @import "../colors"; @import '../../variables'; +.menu-items.audio { + background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-volume-background-color); + border-color: if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-volume-border-color); +} .menu-dropdown-label.audio { color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-volume-label-color); } @@ -8,6 +12,9 @@ .menu-label.audio { color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-volume-label-color); } +.menu-active.playback, .menu-active.input { + color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-volume-text); +} .menu-button-isactive.audio { color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-volume-icons-active); diff --git a/scss/style/menus/bluetooth.scss b/scss/style/menus/bluetooth.scss index aaa200a..a6987f0 100644 --- a/scss/style/menus/bluetooth.scss +++ b/scss/style/menus/bluetooth.scss @@ -1,6 +1,10 @@ @import "../colors"; @import '../../variables'; +.menu-items.bluetooth { + background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-bluetooth-background-color); + border-color: if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-bluetooth-border-color); +} .menu-items-container.bluetooth { font-size: 1.3em; diff --git a/scss/style/menus/calendar.scss b/scss/style/menus/calendar.scss index 1fd3557..5c78a47 100644 --- a/scss/style/menus/calendar.scss +++ b/scss/style/menus/calendar.scss @@ -6,7 +6,7 @@ min-width: 27em; min-height: 6em; background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-clock-background-color); - border: 0.13em solid if($bar-menus-monochrome, $bar-menus-border, $bar-menus-menu-clock-border-color); + border: 0.13em solid if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-clock-border-color); border-radius: 0.7em; margin-right: 0.5em; } diff --git a/scss/style/menus/dashboard.scss b/scss/style/menus/dashboard.scss index c57ebcb..c8c6e82 100644 --- a/scss/style/menus/dashboard.scss +++ b/scss/style/menus/dashboard.scss @@ -1,10 +1,11 @@ @import "../colors"; +@import '../../variables'; .dashboard-content-items { margin-left: 0.50em; min-width: 28.5em; - background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-dashboard-background); - border: 0.13em solid if($bar-menus-monochrome, $bar-menus-border, $bar-menus-menu-dashboard-border-color); + background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-dashboard-background-color); + border: 0.13em solid if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-dashboard-border-color); border-radius: 0.7em; button { diff --git a/scss/style/menus/energy.scss b/scss/style/menus/energy.scss index e1ae5f7..793103d 100644 --- a/scss/style/menus/energy.scss +++ b/scss/style/menus/energy.scss @@ -1,6 +1,10 @@ @import "../colors"; @import '../../variables'; +.menu-items.energy { + background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-battery-background-color); + border-color: if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-battery-border-color); +} .menu-items-container.energy { .menu-label { color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-battery-label-color); diff --git a/scss/style/menus/media.scss b/scss/style/menus/media.scss index fde10b8..b55393b 100644 --- a/scss/style/menus/media.scss +++ b/scss/style/menus/media.scss @@ -1,5 +1,10 @@ @import "../colors"; +@import '../../variables'; +.menu-items.media { + background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-media-background-color); + border-color: if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-media-border-color); +} .menu-items-container.media { min-width: 23em; min-height: 10em; diff --git a/scss/style/menus/menu.scss b/scss/style/menus/menu.scss index 6c8f119..a9989f7 100644 --- a/scss/style/menus/menu.scss +++ b/scss/style/menus/menu.scss @@ -1,3 +1,5 @@ +@import '../../variables'; + .menu-slider { trough { border-radius: 0.3rem; diff --git a/scss/style/menus/network.scss b/scss/style/menus/network.scss index 4a57c7a..1cc4465 100644 --- a/scss/style/menus/network.scss +++ b/scss/style/menus/network.scss @@ -1,6 +1,11 @@ @import "../colors"; @import '../../variables'; +.menu-items.network { + background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-network-background-color); + border-color: if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-network-border-color); +} + .menu-items-container.network { font-size: 1.3em; .menu-items-section { @@ -90,9 +95,8 @@ } .menu-icon-button.network.search { - label { - color: if($bar-menus-monochrome, $bar-menus-iconbuttons-passive, $bar-menus-menu-network-iconbuttons-passive); - } + color: if($bar-menus-monochrome, $bar-menus-iconbuttons-passive, $bar-menus-menu-network-iconbuttons-passive); + &:hover { color: if($bar-menus-monochrome, $bar-menus-iconbuttons-active, $bar-menus-menu-network-iconbuttons-active); } diff --git a/scss/style/menus/notifications.scss b/scss/style/menus/notifications.scss index 32e513b..3914421 100644 --- a/scss/style/menus/notifications.scss +++ b/scss/style/menus/notifications.scss @@ -5,8 +5,8 @@ margin: 0em; min-width: 30.5em; min-height: 48em; - background: $crust; - border: 0.13em solid $notification-border; + background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-notifications-background); + border: 0.13em solid if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-notifications-border); border-radius: 0.7em; margin-right: 0.45em; diff --git a/scss/variables.scss b/scss/variables.scss index d818205..d691e92 100644 --- a/scss/variables.scss +++ b/scss/variables.scss @@ -1,3 +1,6 @@ +$font-size: 1.2rem; +$font-name: Ubuntu Nerd Font; +$font-weight: 600; $notification-background: #181825; $notification-actions-background: #313244; $notification-actions-hover: #45475a; @@ -60,10 +63,14 @@ $bar-buttons-clock-icon: #f5c2e7; $bar-buttons-notifications-background: #242438; $bar-buttons-notifications-hover: #45475a; $bar-buttons-notifications-icon: #b4befe; -$bar-menus-monochrome: false; +$bar-buttons-notifications-total: #b4befe; +$bar-menus-monochrome: true; $bar-menus-background: #11111b; $bar-menus-cards: #1e1e2e; -$bar-menus-border: #313244; +$bar-menus-border-size: 0.13 em; +$bar-menus-border-radius: 0.7em; +$bar-menus-border-card_radius: 0.4em; +$bar-menus-border-color: #313244; $bar-menus-text: #cdd6f4; $bar-menus-dimtext: #585b70; $bar-menus-feinttext: #313244; @@ -101,6 +108,8 @@ $bar-menus-tooltip-text: #cdd6f4; $bar-menus-menu-media-song: #b4befe; $bar-menus-menu-media-artist: #94e2d5; $bar-menus-menu-media-album: #f5c2e7; +$bar-menus-menu-media-background-color: #11111b; +$bar-menus-menu-media-border-color: #313244; $bar-menus-menu-media-buttons-inactive: #585b70; $bar-menus-menu-media-buttons-enabled: #94e2d5; $bar-menus-menu-media-buttons-background: #b4befe; @@ -152,7 +161,7 @@ $bar-menus-menu-bluetooth-switch-disabled: #313244; $bar-menus-menu-bluetooth-switch-puck: #6c7086; $bar-menus-menu-bluetooth-listitems-passive: #cdd6f4; $bar-menus-menu-bluetooth-listitems-active: #89dceb; -$bar-menus-menu-bluetooth-icons-passive: #cdd6f4; +$bar-menus-menu-bluetooth-icons-passive: #9399b2; $bar-menus-menu-bluetooth-icons-active: #89dceb; $bar-menus-menu-bluetooth-iconbutton-passive: #cdd6f4; $bar-menus-menu-bluetooth-iconbutton-active: #89dceb; @@ -248,7 +257,7 @@ $bar-menus-menu-dashboard-monitors-disk-bar: #f5c2e7; $bar-menus-menu-dashboard-monitors-disk-label: #f5c2e7; $bar-menus-menu-notifications-label: #b4befe; $bar-menus-menu-notifications-no_notifications_label: #313244; -$bar-menus-menu-notifications-background: #181825; +$bar-menus-menu-notifications-background: #11111b; $bar-menus-menu-notifications-card: #1e1e2e; $bar-menus-menu-notifications-border: #313244; $bar-menus-menu-notifications-switch_divider: #45475a;