From 2f8bf3683179f0742c12dc6b635af64c0f14cc17 Mon Sep 17 00:00:00 2001 From: end-4 <97237370+end-4@users.noreply.github.com> Date: Fri, 5 Jan 2024 02:23:51 +0700 Subject: [PATCH] ags: sync --- .config/ags/lib/configwidgets.js | 33 ++-- .config/ags/lib/statusicons.js | 6 +- .config/ags/scss/_cheatsheet.scss | 4 +- .config/ags/scss/_common.scss | 6 +- .config/ags/scss/_notifications.scss | 32 ++- .config/ags/scss/_osk.scss | 8 +- .config/ags/scss/_sidebars.scss | 82 +++----- .config/ags/style.css | 120 ++++++------ .config/ags/widgets/cheatsheet/keybinds.js | 2 +- .../onscreenkeyboard/onscreenkeyboard.js | 2 +- .config/ags/widgets/overview/overview.js | 184 +++++++++--------- .../ags/widgets/sideright/notificationlist.js | 167 ++++++++++------ .config/ags/widgets/sideright/quicktoggles.js | 2 +- 13 files changed, 347 insertions(+), 301 deletions(-) diff --git a/.config/ags/lib/configwidgets.js b/.config/ags/lib/configwidgets.js index c9cde298..0c845859 100644 --- a/.config/ags/lib/configwidgets.js +++ b/.config/ags/lib/configwidgets.js @@ -37,22 +37,25 @@ export const ConfigToggle = ({ icon, name, desc = '', initValue, onChange, ...re ] }); const interactionWrapper = Button({ + properties: [ + ['toggle', (newValue) => { + value = !value; + toggleIcon.toggleClassName('switch-fg-toggling-false', false); + if (!value) { + toggleIcon.label = ''; + toggleIcon.toggleClassName('txt-poof', true); + } + toggleButtonIndicator.toggleClassName('switch-fg-true', value); + toggleButton.toggleClassName('switch-bg-true', value); + if (value) Utils.timeout(1, () => { + toggleIcon.label = 'check'; + toggleIcon.toggleClassName('txt-poof', false); + }) + onChange(interactionWrapper, value); + }] + ], child: widgetContent, - onClicked: () => { // mouse up/kb press - value = !value; - toggleIcon.toggleClassName('switch-fg-toggling-false', false); - if (!value) { - toggleIcon.label = ''; - toggleIcon.toggleClassName('txt-poof', true); - } - toggleButtonIndicator.toggleClassName('switch-fg-true', value); - toggleButton.toggleClassName('switch-bg-true', value); - if(value) Utils.timeout(1, () => { - toggleIcon.label = 'check'; - toggleIcon.toggleClassName('txt-poof', false); - }) - onChange(interactionWrapper, value); - }, + onClicked: (self) => self._toggle(self), setup: (button) => { setupCursorHover(button), button.connect('pressed', () => { // mouse down diff --git a/.config/ags/lib/statusicons.js b/.config/ags/lib/statusicons.js index 48c0bce4..600e8811 100644 --- a/.config/ags/lib/statusicons.js +++ b/.config/ags/lib/statusicons.js @@ -99,7 +99,7 @@ const NetworkWiredIndicator = () => Widget.Stack({ return; const { internet } = Network.wired; - if (internet === 'connected' || internet === 'connecting') + if (['connecting', 'connected'].includes(internet)) stack.shown = internet; else if (Network.connectivity !== 'full') stack.shown = 'disconnected'; @@ -135,7 +135,7 @@ const NetworkWifiIndicator = () => Widget.Stack({ if (Network.wifi.internet == 'connected') { stack.shown = String(Math.ceil(Network.wifi.strength / 25)); } - else if (Network.wifi.internet == 'disconnected' || Network.wifi.internet == 'connecting') { + else if (["disconnected", "connecting"].includes(Network.wifi.internet)) { stack.shown = Network.wifi.internet; } }), @@ -154,7 +154,7 @@ export const NetworkIndicator = () => Widget.Stack({ return; } const primary = Network.primary || 'fallback'; - if (primary == 'wifi' || primary == 'wired') + if (['wifi', 'wired'].includes(primary)) stack.shown = primary; else stack.shown = 'fallback'; diff --git a/.config/ags/scss/_cheatsheet.scss b/.config/ags/scss/_cheatsheet.scss index 5e124b1e..b32b0c46 100644 --- a/.config/ags/scss/_cheatsheet.scss +++ b/.config/ags/scss/_cheatsheet.scss @@ -39,11 +39,11 @@ .cheatsheet-closebtn:hover, .cheatsheet-closebtn:focus { - background-color: $surfaceVariant; + background-color: $hovercolor; } .cheatsheet-closebtn:active { - background-color: mix($surfaceVariant, $onSurfaceVariant, 70%); + background-color: $activecolor; } .cheatsheet-category-title { diff --git a/.config/ags/scss/_common.scss b/.config/ags/scss/_common.scss index 7db4cd07..3ca445e4 100644 --- a/.config/ags/scss/_common.scss +++ b/.config/ags/scss/_common.scss @@ -66,6 +66,9 @@ menu>menuitem:hover, menu>menuitem:focus { background-color: mix($surfaceVariant, $onSurfaceVariant, 90%); } +menu>menuitem:active { + background-color: mix($surfaceVariant, $onSurfaceVariant, 80%); +} tooltip { @include normal-rounding; @@ -148,8 +151,7 @@ tooltip { .segment-btn:focus, .segment-btn:hover { - background-color: $surfaceVariant; - color: $onSurfaceVariant; + background-color: $hovercolor; } .segment-btn-enabled { diff --git a/.config/ags/scss/_notifications.scss b/.config/ags/scss/_notifications.scss index 40bb15fa..24357c0b 100644 --- a/.config/ags/scss/_notifications.scss +++ b/.config/ags/scss/_notifications.scss @@ -108,20 +108,34 @@ $notif_surface: $t_background; background: $activecolor; } -.notif-closeall-btn { +.notif-listaction-btn { @include notif-rounding; - padding: 0.341rem 0.341rem; + padding: 0.341rem 0.682rem; } -.notif-closeall-btn:hover, -.notif-closeall-btn:focus { +.notif-listaction-btn:hover, +.notif-listaction-btn:focus { background-color: $hovercolor; } -.notif-closeall-btn:active { +.notif-listaction-btn:active { background-color: $activecolor; } +.notif-listaction-btn-enabled { + background-color: $secondaryContainer; + color: $onSecondaryContainer; +} + +.notif-listaction-btn-enabled:hover, +.notif-listaction-btn-enabled:focus { + background-color: mix($secondaryContainer, $onSecondaryContainer, 90%); +} + +.notif-listaction-btn-enabled:active { + background-color: mix($secondaryContainer, $onSecondaryContainer, 75%); +} + .osd-notif { @include notif-rounding; background-color: transparentize( @@ -170,11 +184,11 @@ $notif_surface: $t_background; .notif-action-low:focus, .notif-action-low:hover { - background-color: mix($t_onSurfaceVariant, $t_surface, 18%); + background-color: $hovercolor; } .notif-action-low:active { - background-color: mix($t_onSurfaceVariant, $t_surface, 23%); + background-color: $activecolor; } .notif-action-normal { @@ -184,11 +198,11 @@ $notif_surface: $t_background; .notif-action-normal:focus, .notif-action-normal:hover { - background-color: mix($t_onSurfaceVariant, $t_surface, 18%); + background-color: $hovercolor; } .notif-action-normal:active { - background-color: mix($t_onSurfaceVariant, $t_surface, 23%); + background-color: $activecolor; } .notif-action-critical { diff --git a/.config/ags/scss/_osk.scss b/.config/ags/scss/_osk.scss index c04ec8d9..ced6bf7f 100644 --- a/.config/ags/scss/_osk.scss +++ b/.config/ags/scss/_osk.scss @@ -50,16 +50,16 @@ $osk_key_fontsize: 1.091rem; .osk-key:hover, .osk-key:focus { - background-color: mix($t_surfaceVariant, $t_onSurfaceVariant, 90%); + background-color: $hovercolor; } .osk-key:active { - background-color: mix($t_surfaceVariant, $t_onSurfaceVariant, 70%); + background-color: $activecolor; font-size: $osk_key_fontsize; } .osk-key-active { - background-color: mix($t_surfaceVariant, $t_onSurfaceVariant, 70%); + background-color: $activecolor; } .osk-key-normal { @@ -109,4 +109,4 @@ $osk_key_fontsize: 1.091rem; .osk-control-button:active { background-color: mix($t_surfaceVariant, $t_onSurfaceVariant, 70%); font-size: $osk_key_fontsize; -} \ No newline at end of file +} diff --git a/.config/ags/scss/_sidebars.scss b/.config/ags/scss/_sidebars.scss index 27e9dcab..7773f82a 100644 --- a/.config/ags/scss/_sidebars.scss +++ b/.config/ags/scss/_sidebars.scss @@ -85,11 +85,11 @@ $onChatgpt: $onPrimary; .sidebar-iconbutton:hover, .sidebar-iconbutton:focus { - background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 80%); + background-color: $hovercolor; } .sidebar-iconbutton:active { - background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 60%); + background-color: $activecolor; } .sidebar-button { @@ -107,20 +107,20 @@ $onChatgpt: $onPrimary; .sidebar-button:hover, .sidebar-button:focus { - background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 80%); + background-color: $hovercolor; } .sidebar-button:active { - background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 60%); + background-color: $activecolor; } .sidebar-button-nopad:hover, .sidebar-button-nopad:focus { - background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 80%); + background-color: $hovercolor; } .sidebar-button-nopad:active { - background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 60%); + background-color: $activecolor; } .sidebar-button-left { @@ -148,11 +148,11 @@ $onChatgpt: $onPrimary; .sidebar-button-active:hover, .sidebar-button-active:focus { - background-color: mix($primary, $hovercolor, 90%); + background-color: mix($primary, $hovercolor, 70%); } .sidebar-button-active:active { - background-color: mix($primary, $hovercolor, 70%); + background-color: mix($primary, $hovercolor, 40%); } .sidebar-buttons-separator { @@ -173,11 +173,11 @@ $onChatgpt: $onPrimary; .sidebar-navrail-btn:hover > box > label:first-child, .sidebar-navrail-btn:focus > box > label:first-child { - background-color: mix($t_surfaceVariant, $onSurfaceVariant, 90%); + background-color: $hovercolor; } .sidebar-navrail-btn:active > box > label:first-child { - background-color: mix($surfaceVariant, $onSurfaceVariant, 75%); + background-color: $activecolor; } .sidebar-navrail-btn-active > box > label:first-child { @@ -279,11 +279,11 @@ $onChatgpt: $onPrimary; .sidebar-calendar-btn-today:hover, .sidebar-calendar-btn-today:focus { - background-color: mix($primary, $hovercolor, 90%); + background-color: mix($primary, $hovercolor, 70%); } .sidebar-calendar-btn-today:active { - background-color: mix($primary, $hovercolor, 70%); + background-color: mix($primary, $hovercolor, 40%); } .sidebar-calendar-btn-othermonth { @@ -303,12 +303,12 @@ $onChatgpt: $onPrimary; .sidebar-calendar-monthyear-btn:hover, .sidebar-calendar-monthyear-btn:focus { - background-color: mix($t_surfaceVariant, $onSurfaceVariant, 95%); + background-color: $hovercolor; color: mix($onSurfaceVariant, $surfaceVariant, 95%); } .sidebar-calendar-monthyear-btn:active { - background-color: mix($surfaceVariant, $onSurfaceVariant, 85%); + background-color: $activecolor; color: mix($onSurfaceVariant, $surfaceVariant, 85%); } @@ -321,12 +321,12 @@ $onChatgpt: $onPrimary; } .sidebar-calendar-monthshift-btn:hover { - background-color: mix($t_surfaceVariant, $onSurfaceVariant, 95%); + background-color: $hovercolor; color: mix($onSurfaceVariant, $surfaceVariant, 95%); } .sidebar-calendar-monthshift-btn:active { - background-color: mix($surfaceVariant, $onSurfaceVariant, 85%); + background-color: $activecolor; color: mix($onSurfaceVariant, $surfaceVariant, 85%); } @@ -339,11 +339,11 @@ $onChatgpt: $onPrimary; .sidebar-selector-tab:hover, .sidebar-selector-tab:focus { - background-color: mix($t_surfaceVariant, $onSurfaceVariant, 90%); + background-color: $hovercolor; } .sidebar-selector-tab:active { - background-color: mix($surfaceVariant, $onSurfaceVariant, 75%); + background-color: $activecolor; } .sidebar-selector-tab-active > box > label { @@ -378,11 +378,11 @@ $onChatgpt: $onPrimary; .sidebar-todo-item-action:hover, .sidebar-todo-item-action:focus { - background-color: mix($t_surface, $t_onSurface, 80%); + background-color: $hovercolor; } .sidebar-todo-item-action:active { - background-color: mix($t_surface, $t_onSurface, 65%); + background-color: $activecolor; } .sidebar-todo-crosser { @@ -398,23 +398,6 @@ $onChatgpt: $onPrimary; background-color: $error; } -.sidebar-clipboard-item { - border-radius: $rounding_small; - min-height: 2.045rem; - padding: 0.341rem; - background-color: $t_secondaryContainer; - color: $onSecondaryContainer; -} - -.sidebar-clipboard-item:hover, -.sidebar-clipboard-item:focus { - background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 90%); -} - -.sidebar-clipboard-item:active { - background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 80%); -} - .sidebar-todo-new { @include full-rounding; color: $onSecondaryContainer; @@ -423,7 +406,7 @@ $onChatgpt: $onPrimary; border: 0.068rem solid $onSurface; } -.sidebar-todo-new:hover, +.sidebar-todo-newz, .sidebar-todo-new:focus { background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 97%); } @@ -630,7 +613,7 @@ $onChatgpt: $onPrimary; @include mainfont; margin: 0.273rem; margin-bottom: 0rem; - background-color: $secondaryContainer; + background-color: mix($t_secondaryContainer, $t_onSurfaceVariant, 30%); color: $onSecondaryContainer; border-radius: $rounding_medium - 0.273rem; border: 0.068rem solid mix($secondaryContainer, $onSecondaryContainer, 90%); @@ -646,7 +629,7 @@ $onChatgpt: $onPrimary; .sidebar-chat-codeblock-topbar-btn { @include full-rounding; - padding: 0.273rem; + padding: 0.273rem 0.477rem; } .sidebar-chat-codeblock-topbar-btn:hover, @@ -704,16 +687,11 @@ $onChatgpt: $onPrimary; .sidebar-chat-chip-action:hover, .sidebar-chat-chip-action:focus { - background-color: $sidebar_chat_textboxareaColor; + background-color: $hovercolor; } .sidebar-chat-chip-action:active { - background-color: mix( - $sidebar_chat_textboxareaColor, - $onSurfaceVariant, - 70% - ); - color: mix($sidebar_chat_textboxareaColor, $surfaceVariant, 70%); + background-color: $activecolor; } .sidebar-chat-chip-action-active { @@ -725,15 +703,15 @@ $onChatgpt: $onPrimary; @include menu_decel; @include small-rounding; padding: 0.341rem 0.477rem; - background-color: $surfaceVariant; + background-color: $t_surfaceVariant; color: $onSurfaceVariant; } .sidebar-chat-chip-toggle:focus, .sidebar-chat-chip-toggle:hover { - background-color: mix($surfaceVariant, $onSurfaceVariant, 83%); + background-color: $hovercolor; } .sidebar-chat-chip-toggle:active { - background-color: mix($surfaceVariant, $onSurfaceVariant, 67%); + background-color: $activecolor; } .sidebar-pin { @@ -746,11 +724,11 @@ $onChatgpt: $onPrimary; .sidebar-pin:hover, .sidebar-pin:focus { - background-color: mix($t_surfaceVariant, $onSurfaceVariant, 90%); + background-color: $hovercolor; } .sidebar-pin:active { - background-color: mix($surfaceVariant, $onSurfaceVariant, 75%); + background-color: $activecolor; } .sidebar-pin-enabled { diff --git a/.config/ags/style.css b/.config/ags/style.css index 2ea9d15b..c4e1f4b7 100644 --- a/.config/ags/style.css +++ b/.config/ags/style.css @@ -445,6 +445,9 @@ menu > menuitem:hover, menu > menuitem:focus { background-color: #4a4147; } +menu > menuitem:active { + background-color: #595055; } + tooltip { border-radius: 1.159rem; -gtk-outline-radius: 1.159rem; @@ -517,8 +520,7 @@ tooltip { .segment-btn:focus, .segment-btn:hover { - background-color: #3b3338; - color: #d1c2cb; } + background-color: rgba(128, 128, 128, 0.3); } .segment-btn-enabled { background-color: #554050; @@ -923,10 +925,10 @@ tooltip { .cheatsheet-closebtn:hover, .cheatsheet-closebtn:focus { - background-color: #3b3338; } + background-color: rgba(128, 128, 128, 0.3); } .cheatsheet-closebtn:active { - background-color: #685e64; } + background-color: rgba(128, 128, 128, 0.7); } .cheatsheet-category-title { font-family: "Gabarito", "Poppins", "Lexend", sans-serif; @@ -1322,14 +1324,14 @@ tooltip { .osk-key:hover, .osk-key:focus { - background-color: rgba(74, 65, 71, 0.31); } + background-color: rgba(128, 128, 128, 0.3); } .osk-key:active { - background-color: rgba(104, 94, 100, 0.31); + background-color: rgba(128, 128, 128, 0.7); font-size: 1.091rem; } .osk-key-active { - background-color: rgba(104, 94, 100, 0.31); } + background-color: rgba(128, 128, 128, 0.7); } .osk-key-normal { min-width: 2.5rem; @@ -1444,10 +1446,10 @@ tooltip { .sidebar-iconbutton:hover, .sidebar-iconbutton:focus { - background-color: #765f70; } + background-color: rgba(128, 128, 128, 0.3); } .sidebar-iconbutton:active { - background-color: #967e8f; } + background-color: rgba(128, 128, 128, 0.7); } .sidebar-button { transition: 300ms cubic-bezier(0.1, 1, 0, 1); @@ -1462,17 +1464,17 @@ tooltip { .sidebar-button:hover, .sidebar-button:focus { - background-color: #765f70; } + background-color: rgba(128, 128, 128, 0.3); } .sidebar-button:active { - background-color: #967e8f; } + background-color: rgba(128, 128, 128, 0.7); } .sidebar-button-nopad:hover, .sidebar-button-nopad:focus { - background-color: #765f70; } + background-color: rgba(128, 128, 128, 0.3); } .sidebar-button-nopad:active { - background-color: #967e8f; } + background-color: rgba(128, 128, 128, 0.7); } .sidebar-button-left { border-top-left-radius: 0.818rem; @@ -1496,10 +1498,10 @@ tooltip { .sidebar-button-active:hover, .sidebar-button-active:focus { - background-color: rgba(253, 195, 243, 0.93); } + background-color: rgba(246, 191, 237, 0.79); } .sidebar-button-active:active { - background-color: rgba(246, 191, 237, 0.79); } + background-color: rgba(228, 182, 221, 0.58); } .sidebar-buttons-separator { min-width: 0.068rem; @@ -1516,10 +1518,10 @@ tooltip { .sidebar-navrail-btn:hover > box > label:first-child, .sidebar-navrail-btn:focus > box > label:first-child { - background-color: rgba(116, 105, 111, 0.379); } + background-color: rgba(128, 128, 128, 0.3); } .sidebar-navrail-btn:active > box > label:first-child { - background-color: #61575d; } + background-color: rgba(128, 128, 128, 0.7); } .sidebar-navrail-btn-active > box > label:first-child { background-color: #554050; @@ -1606,10 +1608,10 @@ tooltip { .sidebar-calendar-btn-today:hover, .sidebar-calendar-btn-today:focus { - background-color: rgba(253, 195, 243, 0.93); } + background-color: rgba(246, 191, 237, 0.79); } .sidebar-calendar-btn-today:active { - background-color: rgba(246, 191, 237, 0.79); } + background-color: rgba(228, 182, 221, 0.58); } .sidebar-calendar-btn-othermonth { color: #867e82; } @@ -1626,11 +1628,11 @@ tooltip { .sidebar-calendar-monthyear-btn:hover, .sidebar-calendar-monthyear-btn:focus { - background-color: rgba(92, 83, 89, 0.3445); + background-color: rgba(128, 128, 128, 0.3); color: #cabbc4; } .sidebar-calendar-monthyear-btn:active { - background-color: #52484e; + background-color: rgba(128, 128, 128, 0.7); color: #bbadb5; } .sidebar-calendar-monthshift-btn { @@ -1642,11 +1644,11 @@ tooltip { color: #d1c2cb; } .sidebar-calendar-monthshift-btn:hover { - background-color: rgba(92, 83, 89, 0.3445); + background-color: rgba(128, 128, 128, 0.3); color: #cabbc4; } .sidebar-calendar-monthshift-btn:active { - background-color: #52484e; + background-color: rgba(128, 128, 128, 0.7); color: #bbadb5; } .sidebar-selector-tab { @@ -1658,10 +1660,10 @@ tooltip { .sidebar-selector-tab:hover, .sidebar-selector-tab:focus { - background-color: rgba(116, 105, 111, 0.379); } + background-color: rgba(128, 128, 128, 0.3); } .sidebar-selector-tab:active { - background-color: #61575d; } + background-color: rgba(128, 128, 128, 0.7); } .sidebar-selector-tab-active > box > label { color: #ffc4f5; } @@ -1688,10 +1690,10 @@ tooltip { .sidebar-todo-item-action:hover, .sidebar-todo-item-action:focus { - background-color: rgba(73, 66, 70, 0.31); } + background-color: rgba(128, 128, 128, 0.3); } .sidebar-todo-item-action:active { - background-color: rgba(103, 96, 100, 0.31); } + background-color: rgba(128, 128, 128, 0.7); } .sidebar-todo-crosser { transition: margin 200ms cubic-bezier(0.1, 1, 0, 1), background-color 0ms; @@ -1703,20 +1705,6 @@ tooltip { .sidebar-todo-crosser-removed { background-color: #ffb4a9; } -.sidebar-clipboard-item { - border-radius: 0.818rem; - min-height: 2.045rem; - padding: 0.341rem; - background-color: #554050; - color: #f8daee; } - -.sidebar-clipboard-item:hover, -.sidebar-clipboard-item:focus { - background-color: #654f60; } - -.sidebar-clipboard-item:active { - background-color: #765f70; } - .sidebar-todo-new { border-radius: 9999px; -gtk-outline-radius: 9999px; @@ -1725,7 +1713,7 @@ tooltip { padding: 0.205rem 0.545rem; border: 0.068rem solid #eae0e4; } -.sidebar-todo-new:hover, +.sidebar-todo-newz, .sidebar-todo-new:focus { background-color: #5a4555; } @@ -1899,7 +1887,7 @@ tooltip { font-family: "Rubik", "Geist", "AR One Sans", "Reddit Sans", "Inter", "Roboto", "Ubuntu", "Noto Sans", sans-serif; margin: 0.273rem; margin-bottom: 0rem; - background-color: #554050; + background-color: rgba(122, 103, 117, 0.517); color: #f8daee; border-radius: 0.886rem; border: 0.068rem solid #654f60; @@ -1915,7 +1903,7 @@ tooltip { .sidebar-chat-codeblock-topbar-btn { border-radius: 9999px; -gtk-outline-radius: 9999px; - padding: 0.273rem; } + padding: 0.273rem 0.477rem; } .sidebar-chat-codeblock-topbar-btn:hover, .sidebar-chat-codeblock-topbar-btn:focus { @@ -1965,11 +1953,10 @@ tooltip { .sidebar-chat-chip-action:hover, .sidebar-chat-chip-action:focus { - background-color: #776c73; } + background-color: rgba(128, 128, 128, 0.3); } .sidebar-chat-chip-action:active { - background-color: #92868d; - color: #655b61; } + background-color: rgba(128, 128, 128, 0.7); } .sidebar-chat-chip-action-active { color: #776c73; @@ -1980,15 +1967,15 @@ tooltip { border-radius: 0.818rem; -gtk-outline-radius: 0.818rem; padding: 0.341rem 0.477rem; - background-color: #3b3338; + background-color: rgba(59, 51, 56, 0.31); color: #d1c2cb; } .sidebar-chat-chip-toggle:focus, .sidebar-chat-chip-toggle:hover { - background-color: #554b51; } + background-color: rgba(128, 128, 128, 0.3); } .sidebar-chat-chip-toggle:active { - background-color: #6d6269; } + background-color: rgba(128, 128, 128, 0.7); } .sidebar-pin { border-radius: 0.818rem; @@ -2000,10 +1987,10 @@ tooltip { .sidebar-pin:hover, .sidebar-pin:focus { - background-color: rgba(116, 105, 111, 0.379); } + background-color: rgba(128, 128, 128, 0.3); } .sidebar-pin:active { - background-color: #61575d; } + background-color: rgba(128, 128, 128, 0.7); } .sidebar-pin-enabled { background-color: #ffc4f5; } @@ -2185,18 +2172,29 @@ tooltip { .notif-expand-btn:active { background: rgba(128, 128, 128, 0.7); } -.notif-closeall-btn { +.notif-listaction-btn { border-radius: 1.159rem; -gtk-outline-radius: 1.159rem; - padding: 0.341rem 0.341rem; } + padding: 0.341rem 0.682rem; } -.notif-closeall-btn:hover, -.notif-closeall-btn:focus { +.notif-listaction-btn:hover, +.notif-listaction-btn:focus { background-color: rgba(128, 128, 128, 0.3); } -.notif-closeall-btn:active { +.notif-listaction-btn:active { background-color: rgba(128, 128, 128, 0.7); } +.notif-listaction-btn-enabled { + background-color: #554050; + color: #f8daee; } + +.notif-listaction-btn-enabled:hover, +.notif-listaction-btn-enabled:focus { + background-color: #654f60; } + +.notif-listaction-btn-enabled:active { + background-color: #7e6778; } + .osd-notif { border-radius: 1.159rem; -gtk-outline-radius: 1.159rem; @@ -2237,10 +2235,10 @@ tooltip { .notif-action-low:focus, .notif-action-low:hover { - background-color: rgba(65, 57, 62, 0.31); } + background-color: rgba(128, 128, 128, 0.3); } .notif-action-low:active { - background-color: rgba(73, 65, 71, 0.31); } + background-color: rgba(128, 128, 128, 0.7); } .notif-action-normal { background-color: rgba(51, 44, 48, 0.31); @@ -2248,10 +2246,10 @@ tooltip { .notif-action-normal:focus, .notif-action-normal:hover { - background-color: rgba(65, 57, 62, 0.31); } + background-color: rgba(128, 128, 128, 0.3); } .notif-action-normal:active { - background-color: rgba(73, 65, 71, 0.31); } + background-color: rgba(128, 128, 128, 0.7); } .notif-action-critical { background-color: #654f60; diff --git a/.config/ags/widgets/cheatsheet/keybinds.js b/.config/ags/widgets/cheatsheet/keybinds.js index 1ad7e05d..58968826 100644 --- a/.config/ags/widgets/cheatsheet/keybinds.js +++ b/.config/ags/widgets/cheatsheet/keybinds.js @@ -38,7 +38,7 @@ export const Keybinds = () => Widget.Box({ children: category.binds.map((keybinds, i) => Widget.Box({ // Binds vertical: false, children: keybinds.keys.map((key, i) => Widget.Label({ // Specific keys - className: `${key == 'OR' || key == '+' ? 'cheatsheet-key-notkey' : 'cheatsheet-key'} txt-small`, + className: `${['OR', '+'].includes(key) ? 'cheatsheet-key-notkey' : 'cheatsheet-key'} txt-small`, label: key, })) })) diff --git a/.config/ags/widgets/onscreenkeyboard/onscreenkeyboard.js b/.config/ags/widgets/onscreenkeyboard/onscreenkeyboard.js index a347408f..c0d1c62b 100644 --- a/.config/ags/widgets/onscreenkeyboard/onscreenkeyboard.js +++ b/.config/ags/widgets/onscreenkeyboard/onscreenkeyboard.js @@ -83,7 +83,7 @@ const keyboardItself = (kbJson) => { children: row.map(key => { return Button({ className: `osk-key osk-key-${key.shape}`, - hexpand: (key.shape == "space" || key.shape == "expand"), + hexpand: ["space", "expand"].includes(key.shape), label: key.label, setup: (button) => { let pressed = false; diff --git a/.config/ags/widgets/overview/overview.js b/.config/ags/widgets/overview/overview.js index a32421ea..e47a2c8f 100644 --- a/.config/ags/widgets/overview/overview.js +++ b/.config/ags/widgets/overview/overview.js @@ -40,8 +40,6 @@ const searchPromptTexts = [ 'Type to search', ] -const overviewTick = Variable(false); - function truncateTitle(str) { let lastDash = -1; let found = -1; // 0: em dash, 1: en dash, 2: minus, 3: vertical bar, 4: middle dot @@ -108,7 +106,6 @@ const ContextWorkspaceArray = ({ label, actionFunc, thisWorkspace }) => Widget.M button.connect("activate", () => { // execAsync([`${onClickBinary}`, `${thisWorkspace}`, `${i}`]).catch(print); actionFunc(thisWorkspace, i); - overviewTick.value = !overviewTick.value; }); submenu.append(button); } @@ -247,7 +244,6 @@ const workspace = index => { setup: (eventbox) => { eventbox.drag_dest_set(Gtk.DestDefaults.ALL, TARGET, Gdk.DragAction.COPY); eventbox.connect('drag-data-received', (_w, _c, _x, _y, data) => { - overviewTick.value = !overviewTick.value; Hyprland.sendMessage(`dispatch movetoworkspacesilent ${index},address:${data.get_text()}`) }); }, @@ -298,6 +294,7 @@ const arr = (s, n) => { const OverviewRow = ({ startWorkspace, workspaces, windowName = 'overview' }) => Widget.Box({ children: arr(startWorkspace, workspaces).map(workspace), properties: [['update', box => { + if (!App.getWindow(windowName).visible) return; execAsync('hyprctl -j clients').then(clients => { const json = JSON.parse(clients); const children = box.get_children(); @@ -308,19 +305,18 @@ const OverviewRow = ({ startWorkspace, workspaces, windowName = 'overview' }) => }).catch(print); }]], - setup: (box) => box._update(box), - connections: [ - // Update on change - [overviewTick, box => { if (!App.getWindow(windowName).visible) return; Utils.timeout(2, () => box._update(box)); }], - [Hyprland, box => { if (!App.getWindow(windowName).visible) return; box._update(box); }, 'client-added'], - [Hyprland, box => { if (!App.getWindow(windowName).visible) return; box._update(box); }, 'client-removed'], - // Update on show - [App, (box, name, visible) => { // Update on open - if (name == 'overview' && visible) { - box._update(box); - } - }], - ], + setup: (box) => { + box + .hook(Hyprland, (box, name, data) => { + if (["changefloatingmode", "movewindow"].includes(name)) + box._update(box); + }, 'event') + .hook(Hyprland, (box) => box._update(box), 'client-added') + .hook(Hyprland, (box) => box._update(box), 'client-removed') + .hook(App, (box, name, visible) => { // Update on open + if (name == 'overview' && visible) box._update(box); + }) + }, }); @@ -393,7 +389,7 @@ export const SearchAndWindows = () => { const text = self.text; if (text.length == 0) return; const isAction = text.startsWith('>'); - const isDir = (entry.text[0] == '/' || entry.text[0] == '~'); + const isDir = (['/', '~'].includes(entry.text[0])); if (startsWithNumber(text)) { // Eval on typing is dangerous, this is a workaround try { @@ -434,72 +430,68 @@ export const SearchAndWindows = () => { execAsync(['bash', '-c', `xdg-open 'https://www.google.com/search?q=${text} -site:quora.com' &`]).catch(print); // quora is useless } }, - // Actually onChange but this is ta workaround for a bug - connections: [ - ['notify::text', (entry) => { // This is when you type - const isAction = entry.text[0] == '>'; - const isDir = (entry.text[0] == '/' || entry.text[0] == '~'); - const children = resultsBox.get_children(); - for (let i = 0; i < children.length; i++) { - const child = children[i]; - child.destroy(); - } - // check empty if so then dont do stuff - if (entry.text == '') { - resultsRevealer.set_reveal_child(false); - overviewRevealer.set_reveal_child(true); - entryPromptRevealer.set_reveal_child(true); - entryIconRevealer.set_reveal_child(false); - entry.toggleClassName('overview-search-box-extended', false); - } - else { - const text = entry.text; - resultsRevealer.set_reveal_child(true); - overviewRevealer.set_reveal_child(false); - entryPromptRevealer.set_reveal_child(false); - entryIconRevealer.set_reveal_child(true); - entry.toggleClassName('overview-search-box-extended', true); - _appSearchResults = Applications.query(text); + onChange: (entry) => { + const isAction = entry.text[0] == '>'; + const isDir = (['/', '~'].includes(entry.text[0])); + const children = resultsBox.get_children(); + for (let i = 0; i < children.length; i++) { + const child = children[i]; + child.destroy(); + } + // check empty if so then dont do stuff + if (entry.text == '') { + resultsRevealer.set_reveal_child(false); + overviewRevealer.set_reveal_child(true); + entryPromptRevealer.set_reveal_child(true); + entryIconRevealer.set_reveal_child(false); + entry.toggleClassName('overview-search-box-extended', false); + return; + } + const text = entry.text; + resultsRevealer.set_reveal_child(true); + overviewRevealer.set_reveal_child(false); + entryPromptRevealer.set_reveal_child(false); + entryIconRevealer.set_reveal_child(true); + entry.toggleClassName('overview-search-box-extended', true); + _appSearchResults = Applications.query(text); - // Calculate - if (startsWithNumber(text)) { // Eval on typing is dangerous, this is a small workaround. - try { - const fullResult = eval(text); - resultsBox.add(CalculationResultButton({ result: fullResult, text: text })); - } catch (e) { - // console.log(e); - } - } - if (isDir) { - var contents = []; - contents = ls({ path: text, silent: true }); - contents.forEach((item) => { - resultsBox.add(DirectoryButton(item)); - }) - } - if (isAction) { // Eval on typing is dangerous, this is a workaround. - resultsBox.add(CustomCommandButton({ text: entry.text })); - } - // Add application entries - let appsToAdd = MAX_RESULTS; - _appSearchResults.forEach(app => { - if (appsToAdd == 0) return; - resultsBox.add(DesktopEntryButton(app)); - appsToAdd--; - }); - - // Fallbacks - // if the first word is an actual command - if (!isAction && !hasUnterminatedBackslash(text) && exec(`bash -c "command -v ${text.split(' ')[0]}"`) != '') { - resultsBox.add(ExecuteCommandButton({ command: entry.text, terminal: entry.text.startsWith('sudo') })); - } - - // Add fallback: search - resultsBox.add(SearchButton({ text: entry.text })); - resultsBox.show_all(); + // Calculate + if (startsWithNumber(text)) { // Eval on typing is dangerous, this is a small workaround. + try { + const fullResult = eval(text); + resultsBox.add(CalculationResultButton({ result: fullResult, text: text })); + } catch (e) { + // console.log(e); } - }] - ], + } + if (isDir) { + var contents = []; + contents = ls({ path: text, silent: true }); + contents.forEach((item) => { + resultsBox.add(DirectoryButton(item)); + }) + } + if (isAction) { // Eval on typing is dangerous, this is a workaround. + resultsBox.add(CustomCommandButton({ text: entry.text })); + } + // Add application entries + let appsToAdd = MAX_RESULTS; + _appSearchResults.forEach(app => { + if (appsToAdd == 0) return; + resultsBox.add(DesktopEntryButton(app)); + appsToAdd--; + }); + + // Fallbacks + // if the first word is an actual command + if (!isAction && !hasUnterminatedBackslash(text) && exec(`bash -c "command -v ${text.split(' ')[0]}"`) != '') { + resultsBox.add(ExecuteCommandButton({ command: entry.text, terminal: entry.text.startsWith('sudo') })); + } + + // Add fallback: search + resultsBox.add(SearchButton({ text: entry.text })); + resultsBox.show_all(); + }, }); return Widget.Box({ @@ -524,21 +516,37 @@ export const SearchAndWindows = () => { overviewRevealer, resultsRevealer, ], - connections: [ - [App, (_b, name, visible) => { + setup: (self) => self + .hook(App, (_b, name, visible) => { if (name == 'overview' && !visible) { entryPromptRevealer.child.label = searchPromptTexts[Math.floor(Math.random() * searchPromptTexts.length)]; resultsBox.children = []; entry.set_text(''); } - }], - ['key-press-event', (widget, event) => { // Typing + }) + .on('key-press-event', (widget, event) => { // Typing if (event.get_keyval()[1] >= 32 && event.get_keyval()[1] <= 126 && widget != entry) { Utils.timeout(1, () => entry.grab_focus()); entry.set_text(entry.text + String.fromCharCode(event.get_keyval()[1])); entry.set_position(-1); } - }], - ], + }) + , + // connections: [ + // [App, (_b, name, visible) => { + // if (name == 'overview' && !visible) { + // entryPromptRevealer.child.label = searchPromptTexts[Math.floor(Math.random() * searchPromptTexts.length)]; + // resultsBox.children = []; + // entry.set_text(''); + // } + // }], + // ['key-press-event', (widget, event) => { // Typing + // if (event.get_keyval()[1] >= 32 && event.get_keyval()[1] <= 126 && widget != entry) { + // Utils.timeout(1, () => entry.grab_focus()); + // entry.set_text(entry.text + String.fromCharCode(event.get_keyval()[1])); + // entry.set_position(-1); + // } + // }], + // ], }); }; diff --git a/.config/ags/widgets/sideright/notificationlist.js b/.config/ags/widgets/sideright/notificationlist.js index 6f5b1240..db65e21d 100644 --- a/.config/ags/widgets/sideright/notificationlist.js +++ b/.config/ags/widgets/sideright/notificationlist.js @@ -6,56 +6,103 @@ const { GLib, Gtk } = imports.gi; import { Service, Utils, Widget } from '../../imports.js'; import Notifications from 'resource:///com/github/Aylur/ags/service/notifications.js'; const { lookUpIcon, timeout } = Utils; -const { Box, Icon, Scrollable, Label, Button, Revealer } = Widget; +const { Box, Button, Icon, Label, Revealer, Scrollable, Stack } = Widget; import { MaterialIcon } from "../../lib/materialicon.js"; import { setupCursorHover } from "../../lib/cursorhover.js"; +import { ConfigToggle, ConfigSegmentedSelection, ConfigGap } from '../../lib/configwidgets.js'; import Notification from "../../lib/notification.js"; -const NotificationList = Box({ - vertical: true, - vpack: 'start', - className: 'spacing-v-5-revealer', - connections: [ - [Notifications, (box, id) => { - if (box.children.length == 0) { - Notifications.notifications - .forEach(n => { - box.pack_end(Notification({ - notifObject: n, - isPopup: false, - }), false, false, 0) - }); - box.show_all(); - } - else if (id) { +export default (props) => { + const dndToggle = ConfigToggle({ + hpack: 'center', + icon: 'notifications_paused', + name: 'Do not disturb', + desc: "Don't pop up notifications", + initValue: Notifications.dnd, + onChange: (self, newValue) => { + Notifications.dnd = newValue; + silenceButton.toggleClassName('notif-listaction-btn-enabled', Notifications.dnd); + }, + }); + const notifEmptyContent = Box({ + homogeneous: true, + children: [Box({ + vertical: true, + vpack: 'center', + className: 'txt spacing-v-10', + children: [ + Box({ + vertical: true, + className: 'spacing-v-5', + children: [ + MaterialIcon('notifications_active', 'badonkers'), + Label({ label: 'No notifications', className: 'txt-small' }), + ] + }), + dndToggle, + ] + })] + }); + const notificationList = Box({ + vertical: true, + vpack: 'start', + className: 'spacing-v-5-revealer', + connections: [ + [Notifications, (box, id) => { + if (box.get_children().length == 0) { // On init there's no notif, or 1st notif + Notifications.notifications + .forEach(n => { + box.pack_end(Notification({ + notifObject: n, + isPopup: false, + }), false, false, 0) + }); + box.show_all(); + return; + } + // 2nd or later notif const notif = Notifications.getNotification(id); - const NewNotif = Notification({ notifObject: notif, isPopup: false, }); - if (NewNotif) { box.pack_end(NewNotif, false, false, 0); box.show_all(); } - } - }, 'notified'], - - [Notifications, (box, id) => { - if (!id) return; - for (const ch of box.children) { - if (ch._id === id) { - ch._destroyWithAnims(); + }, 'notified'], + + [Notifications, (box, id) => { + if (!id) return; + for (const ch of box.children) { + if (ch._id === id) { + ch._destroyWithAnims(); + } } - } - }, 'closed'], - - [Notifications, box => box.visible = Notifications.notifications.length > 0], - ], -}); - -export default (props) => { + }, 'closed'], + ], + }); + const ListActionButton = (icon, name, action) => Button({ + className: 'notif-listaction-btn', + onClicked: action, + child: Box({ + className: 'spacing-h-5', + children: [ + MaterialIcon(icon, 'norm'), + Label({ + className: 'txt-small', + label: name, + }) + ] + }), + setup: setupCursorHover, + }); + const silenceButton = ListActionButton('notifications_paused', 'Silence', (self) => { + Notifications.dnd = !Notifications.dnd; + dndToggle._toggle(Notifications.dnd) + self.toggleClassName('notif-listaction-btn-enabled', Notifications.dnd); + }); + const clearButton = ListActionButton('clear_all', 'Clear', () => Notifications.clear()); const listTitle = Revealer({ revealChild: false, connections: [[Notifications, (revealer) => { @@ -63,7 +110,7 @@ export default (props) => { }]], child: Box({ vpack: 'start', - className: 'sidebar-group-invisible txt', + className: 'sidebar-group-invisible txt spacing-h-5', children: [ Label({ hexpand: true, @@ -71,40 +118,36 @@ export default (props) => { className: 'txt-title-small', label: 'Notifications', }), - Button({ - className: 'notif-closeall-btn', - onClicked: () => { - Notifications.clear(); - }, - child: Box({ - className: 'spacing-h-5', - children: [ - MaterialIcon('clear_all', 'norm'), - Label({ - className: 'txt-small', - label: 'Clear', - }) - ] - }), - setup: button => { - setupCursorHover(button); - }, - }) + silenceButton, + clearButton, ] }) }); - const listContents = Scrollable({ + const notifList = Scrollable({ hexpand: true, hscroll: 'never', vscroll: 'automatic', child: Box({ vexpand: true, - children: [NotificationList], - }) + // homogeneous: true, + children: [notificationList], + }), + setup: (self) => { + const vScrollbar = self.get_vscrollbar(); + vScrollbar.get_style_context().add_class('sidebar-scrollbar'); + } + }); + const listContents = Stack({ + transition: 'crossfade', + transitionDuration: 150, + items: [ + ['empty', notifEmptyContent], + ['list', notifList] + ], + setup: (self) => self + .hook(Notifications, (self) => self.shown = (Notifications.notifications.length > 0 ? 'list' : 'empty')) + , }); - listContents.set_policy(Gtk.PolicyType.NEVER, Gtk.PolicyType.AUTOMATIC); - const vScrollbar = listContents.get_vscrollbar(); - vScrollbar.get_style_context().add_class('sidebar-scrollbar'); return Box({ ...props, className: 'sidebar-group-invisible spacing-v-5', diff --git a/.config/ags/widgets/sideright/quicktoggles.js b/.config/ags/widgets/sideright/quicktoggles.js index 2f9908eb..8281f39e 100644 --- a/.config/ags/widgets/sideright/quicktoggles.js +++ b/.config/ags/widgets/sideright/quicktoggles.js @@ -27,7 +27,7 @@ export const ToggleIconWifi = (props = {}) => Widget.Button({ child: NetworkIndicator(), connections: [ [Network, button => { - button.toggleClassName('sidebar-button-active', Network.wifi?.internet == 'connected' || Network.wired?.internet == 'connected') + button.toggleClassName('sidebar-button-active', [Network.wifi?.internet, Network.wired?.internet].includes('connected')) }], [Network, button => { button.tooltipText = (`${Network.wifi?.ssid} | Right-click to configure` || 'Unknown');