From 0bd0b535890b5c6c000b626ba9d34d496093f0a2 Mon Sep 17 00:00:00 2001 From: retrozinndev Date: Wed, 5 Feb 2025 16:31:23 -0300 Subject: [PATCH] :boom: fix(ags): bar/media widget, new appearance to control center --- ags/i18n/intl.ts | 16 +- ags/i18n/lang/en_US.ts | 5 + ags/i18n/lang/pt_BR.ts | 7 +- ags/scripts/windows.ts | 4 + ags/style.scss | 52 +++- ags/style/_bar.scss | 256 ++++++++---------- ags/style/_control-center.scss | 49 +--- ags/widget/bar/Audio.ts | 5 +- ags/widget/bar/CCToggle.tsx | 11 - .../{FocusedWindow.ts => FocusedClient.ts} | 4 +- ags/widget/bar/Logo.tsx | 11 +- ags/widget/bar/Media.ts | 112 ++++---- ags/widget/control-center/QuickActions.ts | 2 +- ags/widget/control-center/tiles/NormalTile.ts | 5 +- ags/window/Bar.ts | 12 +- ags/window/ControlCenter.ts | 9 +- 16 files changed, 278 insertions(+), 282 deletions(-) delete mode 100644 ags/widget/bar/CCToggle.tsx rename ags/widget/bar/{FocusedWindow.ts => FocusedClient.ts} (95%) diff --git a/ags/i18n/intl.ts b/ags/i18n/intl.ts index 0520444..38a57f7 100644 --- a/ags/i18n/intl.ts +++ b/ags/i18n/intl.ts @@ -2,16 +2,16 @@ import { GLib } from "astal"; -export const i18nKeys = { - "en_US": () => import("./lang/en_US"), - "pt_BR": () => import("./lang/pt_BR") +const i18nKeys = { + "en_US": (() => import("./lang/en_US")!)(), + "pt_BR": (() => import("./lang/pt_BR")!)() } -export const languages: Array = (() => +const languages: Array = (() => Object.keys(i18nKeys))() const defaultLanguage: string = languages[0]; -let language: string = defaultLanguage; +let language: string = getSystemLanguage(); export function getSystemLanguage(): string { const sysLanguage: (string|null|undefined) = GLib.getenv("LANG") || GLib.getenv("LANGUAGE"); @@ -40,14 +40,14 @@ export function setLanguage(lang: keyof typeof i18nKeys): (string|Error) { } export function tr(key: string): (string|undefined) { - let langKeys: Object = i18nKeys[language as keyof typeof i18nKeys]; let result = i18nKeys[language as keyof typeof i18nKeys], defResult = i18nKeys[defaultLanguage as keyof typeof i18nKeys]; - key.split('.').map((keyString: string) => { + for(const keyString in key.split('.')) { + console.log(result); result = result[keyString as keyof typeof result]; defResult = defResult[keyString as keyof typeof defResult]; - }); + } return (result as never) || (defResult as never) || undefined; } diff --git a/ags/i18n/lang/en_US.ts b/ags/i18n/lang/en_US.ts index 0042fc3..11f0433 100644 --- a/ags/i18n/lang/en_US.ts +++ b/ags/i18n/lang/en_US.ts @@ -1,3 +1,8 @@ export default { "language": "English (United States)", + "bar": { + "logo": { + "tooltip": "Applications" + } + } } diff --git a/ags/i18n/lang/pt_BR.ts b/ags/i18n/lang/pt_BR.ts index 6edb605..337496c 100644 --- a/ags/i18n/lang/pt_BR.ts +++ b/ags/i18n/lang/pt_BR.ts @@ -1,3 +1,8 @@ export default { - "language": "Português (Brasil)" + "language": "Português (Brasil)", + "bar": { + "logo": { + "tooltip": "Aplicativos" + } + } } diff --git a/ags/scripts/windows.ts b/ags/scripts/windows.ts index 62bccf3..e28f098 100644 --- a/ags/scripts/windows.ts +++ b/ags/scripts/windows.ts @@ -27,4 +27,8 @@ export class Windows { public close(window: Widget.Window): void { window.hide(); } + + public toggle(window: Widget.Window): void { + window.is_visible() ? this.close(window) : this.open(window); + } } diff --git a/ags/style.scss b/ags/style.scss index 5ad53db..a05859b 100644 --- a/ags/style.scss +++ b/ags/style.scss @@ -1,4 +1,54 @@ +@use "sass:color"; @use "./style/bar"; @use "./style/wal"; @use "./style/osd"; -@use "./style/control-center" +@use "./style/control-center"; + +* { + all: unset; + transition: 120ms linear; +} + +.button-row { + & > button { + background: color.scale($color: wal.$foreground, $lightness: -30%, $alpha: 70%); + margin: 0 1px; + border-radius: 2px; + + &:hover { + background: color.scale($color: wal.$foreground, $lightness: -30%, $alpha: 100%); + } + + &:first-child { + border-top-left-radius: 10px; + border-bottom-left-radius: 10px; + } + + &:last-child { + border-top-right-radius: 10px; + border-bottom-right-radius: 10px; + } + } +} + +menu { + padding: 4px; + background: wal.$background; + border-radius: 14px; + + & > separator { + margin: 0 4px; + color: wal.$background; + } + + & > menuitem { + padding: 8px 0px; + border-radius: 10px; + font-size: 12px; + font-weight: 600; + + &:hover { + background: wal.$color1; + } + } +} diff --git a/ags/style/_bar.scss b/ags/style/_bar.scss index db41b86..c96fca1 100644 --- a/ags/style/_bar.scss +++ b/ags/style/_bar.scss @@ -6,31 +6,6 @@ padding-bottom: 0px; & * { - all: unset; - transition: 120ms linear; - - menu { - padding: 4px; - background: wal.$background; - border-radius: 14px; - - & > separator { - margin: 0 4px; - color: wal.$background; - } - - & > menuitem { - padding: 8px 0px; - border-radius: 10px; - font-size: 12px; - font-weight: 600; - - &:hover { - background: wal.$color1; - } - } - } - button { padding: 6px 8px; border-radius: 12px; @@ -39,6 +14,13 @@ background: wal.$color1; } } + + label { + font-size: 12px; + font-family: "Cantarell", "Noto Sans"; + font-weight: 500; + } + } // Style widget groups @@ -62,152 +44,146 @@ } } } -} -.bar-container label { - font-size: 12px; - font-family: "Cantarell", "Noto Sans"; - font-weight: 500; -} + .workspaces { + padding: 2px 2px; -.workspaces { - padding: 2px 2px; + & button { + all: unset; + border-radius: 16px; + transition: 80ms linear; + padding: 12px 12px; + background: wal.$color1; + margin: 1px 2px; - & button { - all: unset; - border-radius: 16px; - transition: 80ms linear; - padding: 12px 12px; - background: wal.$color1; - margin: 1px 2px; - - &.focus { - background: wal.$foreground; - padding: 12px 20px; + &.focus { + background: wal.$foreground; + padding: 12px 20px; + } } } -} -.focused-window { - padding: 0 6px; - - & > .icon { - margin-right: 6px; - } - - & > .text-content { - & > .class { - font-size: 9px; - font-weight: 500; - font-family: monospace; - color: adjust-hue($color: wal.$foreground, $degrees: 100deg); - margin-top: 1px; - } - - & > .title { - font-size: 11.5px; - font-weight: 500; - margin-top: -2px; - } - } -} - -.logo button { - padding: 0 11px; - padding-right: 16px; - - & label { - font-size: 14px; - } -} - -.media-eventbox { - & > .media > box { - border-radius: 12px; - background: wal.$color2; + .focused-client { padding: 0 6px; - & .icon { + & > .icon { margin-right: 6px; + } + + & > .text-content { + & > .class { + font-size: 9px; + font-weight: 500; + font-family: monospace; + color: adjust-hue($color: wal.$foreground, $degrees: 100deg); + margin-top: 1px; + } + + & > .title { + font-size: 11.5px; + font-weight: 500; + margin-top: -2px; + } + } + } + + .logo button { + padding: 0 11px; + padding-right: 16px; + + & label { font-size: 14px; } } - &.reveal { - & .media > box { - border-top-right-radius: 0; - border-bottom-right-radius: 0; + .media-eventbox { + & > .media > box { + border-radius: 12px; + background: wal.$color1; + padding: 0 6px; + + & .icon { + margin-right: 6px; + font-size: 14px; + } } - & .media-controls { - padding-left: 3px; - border-top-right-radius: 12px; - border-bottom-right-radius: 12px; - background: scale-color($color: wal.$color3, $lightness: -12%); - & > button { - margin: 0px 1px; - border-radius: 4px; + &.reveal { + & .media > box { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + & .media-controls { + padding-left: 3px; + border-top-right-radius: 12px; + border-bottom-right-radius: 12px; + background: scale-color($color: wal.$color1, $lightness: -20%); - &:first-child { - border-top-left-radius: 12px; - border-bottom-left-radius: 12px; - margin-left: 0; - } + & > button { + margin: 0px 1px; + border-radius: 4px; - &:last-child { - border-top-right-radius: 12px; - border-bottom-right-radius: 12px; - margin-right: 0; + &:first-child { + border-top-left-radius: 12px; + border-bottom-left-radius: 12px; + margin-left: 0; + } + + &:last-child { + border-top-right-radius: 12px; + border-bottom-right-radius: 12px; + margin-right: 0; + } } } } } -} -.tray { - padding: 0 6px; + .tray { + padding: 0 6px; - & .item { - all: unset; + & .item { + all: unset; - &:hover { - background: none; - } + &:hover { + background: none; + } - margin: 0 6px; - padding: 0; + margin: 0 6px; + padding: 0; - &:first-child { - margin-left: 0; - } + &:first-child { + margin-left: 0; + } - &:last-child { - margin-right: 0; + &:last-child { + margin-right: 0; + } } } -} -.audio { - &:hover > box { - background: wal.$color1; + .audio { + &:hover > box { + background: wal.$color1; + } + + & > box { + padding: 0 9px; + border-radius: 12px; + } + + & .sink .icon { + margin-right: 6px; + } + + & .source .icon { + margin-right: 4px; + } } - & > box { - padding: 0 9px; - border-radius: 12px; - } - - & .sink .icon { - margin-right: 6px; - } - - & .source .icon { - margin-right: 4px; + .cc-toggle button { + $padding-inline: 12px; + padding-left: $padding-inline; + padding-right: calc($padding-inline + 2px); } } - -.cc-toggle button { - $padding-inline: 12px; - padding-left: $padding-inline; - padding-right: calc($padding-inline + 2px); -} diff --git a/ags/style/_control-center.scss b/ags/style/_control-center.scss index ef2b7e4..5cf343e 100644 --- a/ags/style/_control-center.scss +++ b/ags/style/_control-center.scss @@ -1,52 +1,25 @@ +@use "sass:color"; @use "./wal"; .control-center-container { - all: unset; - background: rgba(wal.$background, .6); - border-top-left-radius: 16px; - border-bottom-left-radius: 16px; - - & * { - all: unset; - transition: 120ms linear; - } + background: rgba(wal.$background, .65); + border-radius: 24px; + padding: 24px 22px; & { & button { padding: 4px 6px; - background: scale-color($color: wal.$color1, $lightness: -20%); - border-radius: 12px; } & .quickactions { - padding: 10px 16px; - & .button-row { - & > button { - margin: 5px 2px; - border-radius: 2px; - padding: 0 8px; - background: rgba($color: scale-color($color: wal.$color1, $lightness: -20%), $alpha: .7); + background: wal.$color1; + & .hostname { + font-size: 15px; + font-weight: 600; + } - & label { - font-size: 16px; - } - - &:hover { - background: rgba($color: scale-color($color: wal.$color1, $lightness: -20%), $alpha: 1); - } - - &:first-child { - margin-left: 0; - border-top-left-radius: 8px; - border-bottom-left-radius: 8px; - } - - &:last-child { - margin-right: 0; - border-top-right-radius: 8px; - border-bottom-right-radius: 8px; - } - } + & .uptime { + font-size: 12px; } } } diff --git a/ags/widget/bar/Audio.ts b/ags/widget/bar/Audio.ts index 28a34be..b11d3c5 100644 --- a/ags/widget/bar/Audio.ts +++ b/ags/widget/bar/Audio.ts @@ -1,5 +1,5 @@ -import { bind } from "astal"; -import { Astal, Widget } from "astal/gtk3"; +import { bind, Process } from "astal"; +import { Widget } from "astal/gtk3"; import AstalWp from "gi://AstalWp?version=0.1"; import { Wireplumber } from "../../scripts/volume"; @@ -8,6 +8,7 @@ const wp = AstalWp.get_default(); export function Audio() { return wp && new Widget.EventBox({ className: "audio", + onClick: () => Process.exec_async("astal toggle control-center", () => {}), child: new Widget.Box({ children: [ new Widget.EventBox({ diff --git a/ags/widget/bar/CCToggle.tsx b/ags/widget/bar/CCToggle.tsx deleted file mode 100644 index 896036e..0000000 --- a/ags/widget/bar/CCToggle.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import {Process} from "astal"; -import { Box, Button } from "astal/gtk3/widget"; - -export function CCToggle() { - return ( - -