ags: sync

This commit is contained in:
end-4
2024-01-05 02:23:51 +07:00
parent 28ae26a5b5
commit 2f8bf36831
13 changed files with 347 additions and 301 deletions
+18 -15
View File
@@ -37,22 +37,25 @@ export const ConfigToggle = ({ icon, name, desc = '', initValue, onChange, ...re
] ]
}); });
const interactionWrapper = Button({ 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, child: widgetContent,
onClicked: () => { // mouse up/kb press onClicked: (self) => self._toggle(self),
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);
},
setup: (button) => { setup: (button) => {
setupCursorHover(button), setupCursorHover(button),
button.connect('pressed', () => { // mouse down button.connect('pressed', () => { // mouse down
+3 -3
View File
@@ -99,7 +99,7 @@ const NetworkWiredIndicator = () => Widget.Stack({
return; return;
const { internet } = Network.wired; const { internet } = Network.wired;
if (internet === 'connected' || internet === 'connecting') if (['connecting', 'connected'].includes(internet))
stack.shown = internet; stack.shown = internet;
else if (Network.connectivity !== 'full') else if (Network.connectivity !== 'full')
stack.shown = 'disconnected'; stack.shown = 'disconnected';
@@ -135,7 +135,7 @@ const NetworkWifiIndicator = () => Widget.Stack({
if (Network.wifi.internet == 'connected') { if (Network.wifi.internet == 'connected') {
stack.shown = String(Math.ceil(Network.wifi.strength / 25)); 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; stack.shown = Network.wifi.internet;
} }
}), }),
@@ -154,7 +154,7 @@ export const NetworkIndicator = () => Widget.Stack({
return; return;
} }
const primary = Network.primary || 'fallback'; const primary = Network.primary || 'fallback';
if (primary == 'wifi' || primary == 'wired') if (['wifi', 'wired'].includes(primary))
stack.shown = primary; stack.shown = primary;
else else
stack.shown = 'fallback'; stack.shown = 'fallback';
+2 -2
View File
@@ -39,11 +39,11 @@
.cheatsheet-closebtn:hover, .cheatsheet-closebtn:hover,
.cheatsheet-closebtn:focus { .cheatsheet-closebtn:focus {
background-color: $surfaceVariant; background-color: $hovercolor;
} }
.cheatsheet-closebtn:active { .cheatsheet-closebtn:active {
background-color: mix($surfaceVariant, $onSurfaceVariant, 70%); background-color: $activecolor;
} }
.cheatsheet-category-title { .cheatsheet-category-title {
+4 -2
View File
@@ -66,6 +66,9 @@ menu>menuitem:hover,
menu>menuitem:focus { menu>menuitem:focus {
background-color: mix($surfaceVariant, $onSurfaceVariant, 90%); background-color: mix($surfaceVariant, $onSurfaceVariant, 90%);
} }
menu>menuitem:active {
background-color: mix($surfaceVariant, $onSurfaceVariant, 80%);
}
tooltip { tooltip {
@include normal-rounding; @include normal-rounding;
@@ -148,8 +151,7 @@ tooltip {
.segment-btn:focus, .segment-btn:focus,
.segment-btn:hover { .segment-btn:hover {
background-color: $surfaceVariant; background-color: $hovercolor;
color: $onSurfaceVariant;
} }
.segment-btn-enabled { .segment-btn-enabled {
+23 -9
View File
@@ -108,20 +108,34 @@ $notif_surface: $t_background;
background: $activecolor; background: $activecolor;
} }
.notif-closeall-btn { .notif-listaction-btn {
@include notif-rounding; @include notif-rounding;
padding: 0.341rem 0.341rem; padding: 0.341rem 0.682rem;
} }
.notif-closeall-btn:hover, .notif-listaction-btn:hover,
.notif-closeall-btn:focus { .notif-listaction-btn:focus {
background-color: $hovercolor; background-color: $hovercolor;
} }
.notif-closeall-btn:active { .notif-listaction-btn:active {
background-color: $activecolor; 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 { .osd-notif {
@include notif-rounding; @include notif-rounding;
background-color: transparentize( background-color: transparentize(
@@ -170,11 +184,11 @@ $notif_surface: $t_background;
.notif-action-low:focus, .notif-action-low:focus,
.notif-action-low:hover { .notif-action-low:hover {
background-color: mix($t_onSurfaceVariant, $t_surface, 18%); background-color: $hovercolor;
} }
.notif-action-low:active { .notif-action-low:active {
background-color: mix($t_onSurfaceVariant, $t_surface, 23%); background-color: $activecolor;
} }
.notif-action-normal { .notif-action-normal {
@@ -184,11 +198,11 @@ $notif_surface: $t_background;
.notif-action-normal:focus, .notif-action-normal:focus,
.notif-action-normal:hover { .notif-action-normal:hover {
background-color: mix($t_onSurfaceVariant, $t_surface, 18%); background-color: $hovercolor;
} }
.notif-action-normal:active { .notif-action-normal:active {
background-color: mix($t_onSurfaceVariant, $t_surface, 23%); background-color: $activecolor;
} }
.notif-action-critical { .notif-action-critical {
+3 -3
View File
@@ -50,16 +50,16 @@ $osk_key_fontsize: 1.091rem;
.osk-key:hover, .osk-key:hover,
.osk-key:focus { .osk-key:focus {
background-color: mix($t_surfaceVariant, $t_onSurfaceVariant, 90%); background-color: $hovercolor;
} }
.osk-key:active { .osk-key:active {
background-color: mix($t_surfaceVariant, $t_onSurfaceVariant, 70%); background-color: $activecolor;
font-size: $osk_key_fontsize; font-size: $osk_key_fontsize;
} }
.osk-key-active { .osk-key-active {
background-color: mix($t_surfaceVariant, $t_onSurfaceVariant, 70%); background-color: $activecolor;
} }
.osk-key-normal { .osk-key-normal {
+30 -52
View File
@@ -85,11 +85,11 @@ $onChatgpt: $onPrimary;
.sidebar-iconbutton:hover, .sidebar-iconbutton:hover,
.sidebar-iconbutton:focus { .sidebar-iconbutton:focus {
background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 80%); background-color: $hovercolor;
} }
.sidebar-iconbutton:active { .sidebar-iconbutton:active {
background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 60%); background-color: $activecolor;
} }
.sidebar-button { .sidebar-button {
@@ -107,20 +107,20 @@ $onChatgpt: $onPrimary;
.sidebar-button:hover, .sidebar-button:hover,
.sidebar-button:focus { .sidebar-button:focus {
background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 80%); background-color: $hovercolor;
} }
.sidebar-button:active { .sidebar-button:active {
background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 60%); background-color: $activecolor;
} }
.sidebar-button-nopad:hover, .sidebar-button-nopad:hover,
.sidebar-button-nopad:focus { .sidebar-button-nopad:focus {
background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 80%); background-color: $hovercolor;
} }
.sidebar-button-nopad:active { .sidebar-button-nopad:active {
background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 60%); background-color: $activecolor;
} }
.sidebar-button-left { .sidebar-button-left {
@@ -148,11 +148,11 @@ $onChatgpt: $onPrimary;
.sidebar-button-active:hover, .sidebar-button-active:hover,
.sidebar-button-active:focus { .sidebar-button-active:focus {
background-color: mix($primary, $hovercolor, 90%); background-color: mix($primary, $hovercolor, 70%);
} }
.sidebar-button-active:active { .sidebar-button-active:active {
background-color: mix($primary, $hovercolor, 70%); background-color: mix($primary, $hovercolor, 40%);
} }
.sidebar-buttons-separator { .sidebar-buttons-separator {
@@ -173,11 +173,11 @@ $onChatgpt: $onPrimary;
.sidebar-navrail-btn:hover > box > label:first-child, .sidebar-navrail-btn:hover > box > label:first-child,
.sidebar-navrail-btn:focus > 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 { .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 { .sidebar-navrail-btn-active > box > label:first-child {
@@ -279,11 +279,11 @@ $onChatgpt: $onPrimary;
.sidebar-calendar-btn-today:hover, .sidebar-calendar-btn-today:hover,
.sidebar-calendar-btn-today:focus { .sidebar-calendar-btn-today:focus {
background-color: mix($primary, $hovercolor, 90%); background-color: mix($primary, $hovercolor, 70%);
} }
.sidebar-calendar-btn-today:active { .sidebar-calendar-btn-today:active {
background-color: mix($primary, $hovercolor, 70%); background-color: mix($primary, $hovercolor, 40%);
} }
.sidebar-calendar-btn-othermonth { .sidebar-calendar-btn-othermonth {
@@ -303,12 +303,12 @@ $onChatgpt: $onPrimary;
.sidebar-calendar-monthyear-btn:hover, .sidebar-calendar-monthyear-btn:hover,
.sidebar-calendar-monthyear-btn:focus { .sidebar-calendar-monthyear-btn:focus {
background-color: mix($t_surfaceVariant, $onSurfaceVariant, 95%); background-color: $hovercolor;
color: mix($onSurfaceVariant, $surfaceVariant, 95%); color: mix($onSurfaceVariant, $surfaceVariant, 95%);
} }
.sidebar-calendar-monthyear-btn:active { .sidebar-calendar-monthyear-btn:active {
background-color: mix($surfaceVariant, $onSurfaceVariant, 85%); background-color: $activecolor;
color: mix($onSurfaceVariant, $surfaceVariant, 85%); color: mix($onSurfaceVariant, $surfaceVariant, 85%);
} }
@@ -321,12 +321,12 @@ $onChatgpt: $onPrimary;
} }
.sidebar-calendar-monthshift-btn:hover { .sidebar-calendar-monthshift-btn:hover {
background-color: mix($t_surfaceVariant, $onSurfaceVariant, 95%); background-color: $hovercolor;
color: mix($onSurfaceVariant, $surfaceVariant, 95%); color: mix($onSurfaceVariant, $surfaceVariant, 95%);
} }
.sidebar-calendar-monthshift-btn:active { .sidebar-calendar-monthshift-btn:active {
background-color: mix($surfaceVariant, $onSurfaceVariant, 85%); background-color: $activecolor;
color: mix($onSurfaceVariant, $surfaceVariant, 85%); color: mix($onSurfaceVariant, $surfaceVariant, 85%);
} }
@@ -339,11 +339,11 @@ $onChatgpt: $onPrimary;
.sidebar-selector-tab:hover, .sidebar-selector-tab:hover,
.sidebar-selector-tab:focus { .sidebar-selector-tab:focus {
background-color: mix($t_surfaceVariant, $onSurfaceVariant, 90%); background-color: $hovercolor;
} }
.sidebar-selector-tab:active { .sidebar-selector-tab:active {
background-color: mix($surfaceVariant, $onSurfaceVariant, 75%); background-color: $activecolor;
} }
.sidebar-selector-tab-active > box > label { .sidebar-selector-tab-active > box > label {
@@ -378,11 +378,11 @@ $onChatgpt: $onPrimary;
.sidebar-todo-item-action:hover, .sidebar-todo-item-action:hover,
.sidebar-todo-item-action:focus { .sidebar-todo-item-action:focus {
background-color: mix($t_surface, $t_onSurface, 80%); background-color: $hovercolor;
} }
.sidebar-todo-item-action:active { .sidebar-todo-item-action:active {
background-color: mix($t_surface, $t_onSurface, 65%); background-color: $activecolor;
} }
.sidebar-todo-crosser { .sidebar-todo-crosser {
@@ -398,23 +398,6 @@ $onChatgpt: $onPrimary;
background-color: $error; 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 { .sidebar-todo-new {
@include full-rounding; @include full-rounding;
color: $onSecondaryContainer; color: $onSecondaryContainer;
@@ -423,7 +406,7 @@ $onChatgpt: $onPrimary;
border: 0.068rem solid $onSurface; border: 0.068rem solid $onSurface;
} }
.sidebar-todo-new:hover, .sidebar-todo-newz,
.sidebar-todo-new:focus { .sidebar-todo-new:focus {
background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 97%); background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 97%);
} }
@@ -630,7 +613,7 @@ $onChatgpt: $onPrimary;
@include mainfont; @include mainfont;
margin: 0.273rem; margin: 0.273rem;
margin-bottom: 0rem; margin-bottom: 0rem;
background-color: $secondaryContainer; background-color: mix($t_secondaryContainer, $t_onSurfaceVariant, 30%);
color: $onSecondaryContainer; color: $onSecondaryContainer;
border-radius: $rounding_medium - 0.273rem; border-radius: $rounding_medium - 0.273rem;
border: 0.068rem solid mix($secondaryContainer, $onSecondaryContainer, 90%); border: 0.068rem solid mix($secondaryContainer, $onSecondaryContainer, 90%);
@@ -646,7 +629,7 @@ $onChatgpt: $onPrimary;
.sidebar-chat-codeblock-topbar-btn { .sidebar-chat-codeblock-topbar-btn {
@include full-rounding; @include full-rounding;
padding: 0.273rem; padding: 0.273rem 0.477rem;
} }
.sidebar-chat-codeblock-topbar-btn:hover, .sidebar-chat-codeblock-topbar-btn:hover,
@@ -704,16 +687,11 @@ $onChatgpt: $onPrimary;
.sidebar-chat-chip-action:hover, .sidebar-chat-chip-action:hover,
.sidebar-chat-chip-action:focus { .sidebar-chat-chip-action:focus {
background-color: $sidebar_chat_textboxareaColor; background-color: $hovercolor;
} }
.sidebar-chat-chip-action:active { .sidebar-chat-chip-action:active {
background-color: mix( background-color: $activecolor;
$sidebar_chat_textboxareaColor,
$onSurfaceVariant,
70%
);
color: mix($sidebar_chat_textboxareaColor, $surfaceVariant, 70%);
} }
.sidebar-chat-chip-action-active { .sidebar-chat-chip-action-active {
@@ -725,15 +703,15 @@ $onChatgpt: $onPrimary;
@include menu_decel; @include menu_decel;
@include small-rounding; @include small-rounding;
padding: 0.341rem 0.477rem; padding: 0.341rem 0.477rem;
background-color: $surfaceVariant; background-color: $t_surfaceVariant;
color: $onSurfaceVariant; color: $onSurfaceVariant;
} }
.sidebar-chat-chip-toggle:focus, .sidebar-chat-chip-toggle:focus,
.sidebar-chat-chip-toggle:hover { .sidebar-chat-chip-toggle:hover {
background-color: mix($surfaceVariant, $onSurfaceVariant, 83%); background-color: $hovercolor;
} }
.sidebar-chat-chip-toggle:active { .sidebar-chat-chip-toggle:active {
background-color: mix($surfaceVariant, $onSurfaceVariant, 67%); background-color: $activecolor;
} }
.sidebar-pin { .sidebar-pin {
@@ -746,11 +724,11 @@ $onChatgpt: $onPrimary;
.sidebar-pin:hover, .sidebar-pin:hover,
.sidebar-pin:focus { .sidebar-pin:focus {
background-color: mix($t_surfaceVariant, $onSurfaceVariant, 90%); background-color: $hovercolor;
} }
.sidebar-pin:active { .sidebar-pin:active {
background-color: mix($surfaceVariant, $onSurfaceVariant, 75%); background-color: $activecolor;
} }
.sidebar-pin-enabled { .sidebar-pin-enabled {
+59 -61
View File
@@ -445,6 +445,9 @@ menu > menuitem:hover,
menu > menuitem:focus { menu > menuitem:focus {
background-color: #4a4147; } background-color: #4a4147; }
menu > menuitem:active {
background-color: #595055; }
tooltip { tooltip {
border-radius: 1.159rem; border-radius: 1.159rem;
-gtk-outline-radius: 1.159rem; -gtk-outline-radius: 1.159rem;
@@ -517,8 +520,7 @@ tooltip {
.segment-btn:focus, .segment-btn:focus,
.segment-btn:hover { .segment-btn:hover {
background-color: #3b3338; background-color: rgba(128, 128, 128, 0.3); }
color: #d1c2cb; }
.segment-btn-enabled { .segment-btn-enabled {
background-color: #554050; background-color: #554050;
@@ -923,10 +925,10 @@ tooltip {
.cheatsheet-closebtn:hover, .cheatsheet-closebtn:hover,
.cheatsheet-closebtn:focus { .cheatsheet-closebtn:focus {
background-color: #3b3338; } background-color: rgba(128, 128, 128, 0.3); }
.cheatsheet-closebtn:active { .cheatsheet-closebtn:active {
background-color: #685e64; } background-color: rgba(128, 128, 128, 0.7); }
.cheatsheet-category-title { .cheatsheet-category-title {
font-family: "Gabarito", "Poppins", "Lexend", sans-serif; font-family: "Gabarito", "Poppins", "Lexend", sans-serif;
@@ -1322,14 +1324,14 @@ tooltip {
.osk-key:hover, .osk-key:hover,
.osk-key:focus { .osk-key:focus {
background-color: rgba(74, 65, 71, 0.31); } background-color: rgba(128, 128, 128, 0.3); }
.osk-key:active { .osk-key:active {
background-color: rgba(104, 94, 100, 0.31); background-color: rgba(128, 128, 128, 0.7);
font-size: 1.091rem; } font-size: 1.091rem; }
.osk-key-active { .osk-key-active {
background-color: rgba(104, 94, 100, 0.31); } background-color: rgba(128, 128, 128, 0.7); }
.osk-key-normal { .osk-key-normal {
min-width: 2.5rem; min-width: 2.5rem;
@@ -1444,10 +1446,10 @@ tooltip {
.sidebar-iconbutton:hover, .sidebar-iconbutton:hover,
.sidebar-iconbutton:focus { .sidebar-iconbutton:focus {
background-color: #765f70; } background-color: rgba(128, 128, 128, 0.3); }
.sidebar-iconbutton:active { .sidebar-iconbutton:active {
background-color: #967e8f; } background-color: rgba(128, 128, 128, 0.7); }
.sidebar-button { .sidebar-button {
transition: 300ms cubic-bezier(0.1, 1, 0, 1); transition: 300ms cubic-bezier(0.1, 1, 0, 1);
@@ -1462,17 +1464,17 @@ tooltip {
.sidebar-button:hover, .sidebar-button:hover,
.sidebar-button:focus { .sidebar-button:focus {
background-color: #765f70; } background-color: rgba(128, 128, 128, 0.3); }
.sidebar-button:active { .sidebar-button:active {
background-color: #967e8f; } background-color: rgba(128, 128, 128, 0.7); }
.sidebar-button-nopad:hover, .sidebar-button-nopad:hover,
.sidebar-button-nopad:focus { .sidebar-button-nopad:focus {
background-color: #765f70; } background-color: rgba(128, 128, 128, 0.3); }
.sidebar-button-nopad:active { .sidebar-button-nopad:active {
background-color: #967e8f; } background-color: rgba(128, 128, 128, 0.7); }
.sidebar-button-left { .sidebar-button-left {
border-top-left-radius: 0.818rem; border-top-left-radius: 0.818rem;
@@ -1496,10 +1498,10 @@ tooltip {
.sidebar-button-active:hover, .sidebar-button-active:hover,
.sidebar-button-active:focus { .sidebar-button-active:focus {
background-color: rgba(253, 195, 243, 0.93); } background-color: rgba(246, 191, 237, 0.79); }
.sidebar-button-active:active { .sidebar-button-active:active {
background-color: rgba(246, 191, 237, 0.79); } background-color: rgba(228, 182, 221, 0.58); }
.sidebar-buttons-separator { .sidebar-buttons-separator {
min-width: 0.068rem; min-width: 0.068rem;
@@ -1516,10 +1518,10 @@ tooltip {
.sidebar-navrail-btn:hover > box > label:first-child, .sidebar-navrail-btn:hover > box > label:first-child,
.sidebar-navrail-btn:focus > 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 { .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 { .sidebar-navrail-btn-active > box > label:first-child {
background-color: #554050; background-color: #554050;
@@ -1606,10 +1608,10 @@ tooltip {
.sidebar-calendar-btn-today:hover, .sidebar-calendar-btn-today:hover,
.sidebar-calendar-btn-today:focus { .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 { .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 { .sidebar-calendar-btn-othermonth {
color: #867e82; } color: #867e82; }
@@ -1626,11 +1628,11 @@ tooltip {
.sidebar-calendar-monthyear-btn:hover, .sidebar-calendar-monthyear-btn:hover,
.sidebar-calendar-monthyear-btn:focus { .sidebar-calendar-monthyear-btn:focus {
background-color: rgba(92, 83, 89, 0.3445); background-color: rgba(128, 128, 128, 0.3);
color: #cabbc4; } color: #cabbc4; }
.sidebar-calendar-monthyear-btn:active { .sidebar-calendar-monthyear-btn:active {
background-color: #52484e; background-color: rgba(128, 128, 128, 0.7);
color: #bbadb5; } color: #bbadb5; }
.sidebar-calendar-monthshift-btn { .sidebar-calendar-monthshift-btn {
@@ -1642,11 +1644,11 @@ tooltip {
color: #d1c2cb; } color: #d1c2cb; }
.sidebar-calendar-monthshift-btn:hover { .sidebar-calendar-monthshift-btn:hover {
background-color: rgba(92, 83, 89, 0.3445); background-color: rgba(128, 128, 128, 0.3);
color: #cabbc4; } color: #cabbc4; }
.sidebar-calendar-monthshift-btn:active { .sidebar-calendar-monthshift-btn:active {
background-color: #52484e; background-color: rgba(128, 128, 128, 0.7);
color: #bbadb5; } color: #bbadb5; }
.sidebar-selector-tab { .sidebar-selector-tab {
@@ -1658,10 +1660,10 @@ tooltip {
.sidebar-selector-tab:hover, .sidebar-selector-tab:hover,
.sidebar-selector-tab:focus { .sidebar-selector-tab:focus {
background-color: rgba(116, 105, 111, 0.379); } background-color: rgba(128, 128, 128, 0.3); }
.sidebar-selector-tab:active { .sidebar-selector-tab:active {
background-color: #61575d; } background-color: rgba(128, 128, 128, 0.7); }
.sidebar-selector-tab-active > box > label { .sidebar-selector-tab-active > box > label {
color: #ffc4f5; } color: #ffc4f5; }
@@ -1688,10 +1690,10 @@ tooltip {
.sidebar-todo-item-action:hover, .sidebar-todo-item-action:hover,
.sidebar-todo-item-action:focus { .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 { .sidebar-todo-item-action:active {
background-color: rgba(103, 96, 100, 0.31); } background-color: rgba(128, 128, 128, 0.7); }
.sidebar-todo-crosser { .sidebar-todo-crosser {
transition: margin 200ms cubic-bezier(0.1, 1, 0, 1), background-color 0ms; transition: margin 200ms cubic-bezier(0.1, 1, 0, 1), background-color 0ms;
@@ -1703,20 +1705,6 @@ tooltip {
.sidebar-todo-crosser-removed { .sidebar-todo-crosser-removed {
background-color: #ffb4a9; } 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 { .sidebar-todo-new {
border-radius: 9999px; border-radius: 9999px;
-gtk-outline-radius: 9999px; -gtk-outline-radius: 9999px;
@@ -1725,7 +1713,7 @@ tooltip {
padding: 0.205rem 0.545rem; padding: 0.205rem 0.545rem;
border: 0.068rem solid #eae0e4; } border: 0.068rem solid #eae0e4; }
.sidebar-todo-new:hover, .sidebar-todo-newz,
.sidebar-todo-new:focus { .sidebar-todo-new:focus {
background-color: #5a4555; } background-color: #5a4555; }
@@ -1899,7 +1887,7 @@ tooltip {
font-family: "Rubik", "Geist", "AR One Sans", "Reddit Sans", "Inter", "Roboto", "Ubuntu", "Noto Sans", sans-serif; font-family: "Rubik", "Geist", "AR One Sans", "Reddit Sans", "Inter", "Roboto", "Ubuntu", "Noto Sans", sans-serif;
margin: 0.273rem; margin: 0.273rem;
margin-bottom: 0rem; margin-bottom: 0rem;
background-color: #554050; background-color: rgba(122, 103, 117, 0.517);
color: #f8daee; color: #f8daee;
border-radius: 0.886rem; border-radius: 0.886rem;
border: 0.068rem solid #654f60; border: 0.068rem solid #654f60;
@@ -1915,7 +1903,7 @@ tooltip {
.sidebar-chat-codeblock-topbar-btn { .sidebar-chat-codeblock-topbar-btn {
border-radius: 9999px; border-radius: 9999px;
-gtk-outline-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:hover,
.sidebar-chat-codeblock-topbar-btn:focus { .sidebar-chat-codeblock-topbar-btn:focus {
@@ -1965,11 +1953,10 @@ tooltip {
.sidebar-chat-chip-action:hover, .sidebar-chat-chip-action:hover,
.sidebar-chat-chip-action:focus { .sidebar-chat-chip-action:focus {
background-color: #776c73; } background-color: rgba(128, 128, 128, 0.3); }
.sidebar-chat-chip-action:active { .sidebar-chat-chip-action:active {
background-color: #92868d; background-color: rgba(128, 128, 128, 0.7); }
color: #655b61; }
.sidebar-chat-chip-action-active { .sidebar-chat-chip-action-active {
color: #776c73; color: #776c73;
@@ -1980,15 +1967,15 @@ tooltip {
border-radius: 0.818rem; border-radius: 0.818rem;
-gtk-outline-radius: 0.818rem; -gtk-outline-radius: 0.818rem;
padding: 0.341rem 0.477rem; padding: 0.341rem 0.477rem;
background-color: #3b3338; background-color: rgba(59, 51, 56, 0.31);
color: #d1c2cb; } color: #d1c2cb; }
.sidebar-chat-chip-toggle:focus, .sidebar-chat-chip-toggle:focus,
.sidebar-chat-chip-toggle:hover { .sidebar-chat-chip-toggle:hover {
background-color: #554b51; } background-color: rgba(128, 128, 128, 0.3); }
.sidebar-chat-chip-toggle:active { .sidebar-chat-chip-toggle:active {
background-color: #6d6269; } background-color: rgba(128, 128, 128, 0.7); }
.sidebar-pin { .sidebar-pin {
border-radius: 0.818rem; border-radius: 0.818rem;
@@ -2000,10 +1987,10 @@ tooltip {
.sidebar-pin:hover, .sidebar-pin:hover,
.sidebar-pin:focus { .sidebar-pin:focus {
background-color: rgba(116, 105, 111, 0.379); } background-color: rgba(128, 128, 128, 0.3); }
.sidebar-pin:active { .sidebar-pin:active {
background-color: #61575d; } background-color: rgba(128, 128, 128, 0.7); }
.sidebar-pin-enabled { .sidebar-pin-enabled {
background-color: #ffc4f5; } background-color: #ffc4f5; }
@@ -2185,18 +2172,29 @@ tooltip {
.notif-expand-btn:active { .notif-expand-btn:active {
background: rgba(128, 128, 128, 0.7); } background: rgba(128, 128, 128, 0.7); }
.notif-closeall-btn { .notif-listaction-btn {
border-radius: 1.159rem; border-radius: 1.159rem;
-gtk-outline-radius: 1.159rem; -gtk-outline-radius: 1.159rem;
padding: 0.341rem 0.341rem; } padding: 0.341rem 0.682rem; }
.notif-closeall-btn:hover, .notif-listaction-btn:hover,
.notif-closeall-btn:focus { .notif-listaction-btn:focus {
background-color: rgba(128, 128, 128, 0.3); } background-color: rgba(128, 128, 128, 0.3); }
.notif-closeall-btn:active { .notif-listaction-btn:active {
background-color: rgba(128, 128, 128, 0.7); } 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 { .osd-notif {
border-radius: 1.159rem; border-radius: 1.159rem;
-gtk-outline-radius: 1.159rem; -gtk-outline-radius: 1.159rem;
@@ -2237,10 +2235,10 @@ tooltip {
.notif-action-low:focus, .notif-action-low:focus,
.notif-action-low:hover { .notif-action-low:hover {
background-color: rgba(65, 57, 62, 0.31); } background-color: rgba(128, 128, 128, 0.3); }
.notif-action-low:active { .notif-action-low:active {
background-color: rgba(73, 65, 71, 0.31); } background-color: rgba(128, 128, 128, 0.7); }
.notif-action-normal { .notif-action-normal {
background-color: rgba(51, 44, 48, 0.31); background-color: rgba(51, 44, 48, 0.31);
@@ -2248,10 +2246,10 @@ tooltip {
.notif-action-normal:focus, .notif-action-normal:focus,
.notif-action-normal:hover { .notif-action-normal:hover {
background-color: rgba(65, 57, 62, 0.31); } background-color: rgba(128, 128, 128, 0.3); }
.notif-action-normal:active { .notif-action-normal:active {
background-color: rgba(73, 65, 71, 0.31); } background-color: rgba(128, 128, 128, 0.7); }
.notif-action-critical { .notif-action-critical {
background-color: #654f60; background-color: #654f60;
+1 -1
View File
@@ -38,7 +38,7 @@ export const Keybinds = () => Widget.Box({
children: category.binds.map((keybinds, i) => Widget.Box({ // Binds children: category.binds.map((keybinds, i) => Widget.Box({ // Binds
vertical: false, vertical: false,
children: keybinds.keys.map((key, i) => Widget.Label({ // Specific keys 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, label: key,
})) }))
})) }))
@@ -83,7 +83,7 @@ const keyboardItself = (kbJson) => {
children: row.map(key => { children: row.map(key => {
return Button({ return Button({
className: `osk-key osk-key-${key.shape}`, className: `osk-key osk-key-${key.shape}`,
hexpand: (key.shape == "space" || key.shape == "expand"), hexpand: ["space", "expand"].includes(key.shape),
label: key.label, label: key.label,
setup: (button) => { setup: (button) => {
let pressed = false; let pressed = false;
+96 -88
View File
@@ -40,8 +40,6 @@ const searchPromptTexts = [
'Type to search', 'Type to search',
] ]
const overviewTick = Variable(false);
function truncateTitle(str) { function truncateTitle(str) {
let lastDash = -1; let lastDash = -1;
let found = -1; // 0: em dash, 1: en dash, 2: minus, 3: vertical bar, 4: middle dot 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", () => { button.connect("activate", () => {
// execAsync([`${onClickBinary}`, `${thisWorkspace}`, `${i}`]).catch(print); // execAsync([`${onClickBinary}`, `${thisWorkspace}`, `${i}`]).catch(print);
actionFunc(thisWorkspace, i); actionFunc(thisWorkspace, i);
overviewTick.value = !overviewTick.value;
}); });
submenu.append(button); submenu.append(button);
} }
@@ -247,7 +244,6 @@ const workspace = index => {
setup: (eventbox) => { setup: (eventbox) => {
eventbox.drag_dest_set(Gtk.DestDefaults.ALL, TARGET, Gdk.DragAction.COPY); eventbox.drag_dest_set(Gtk.DestDefaults.ALL, TARGET, Gdk.DragAction.COPY);
eventbox.connect('drag-data-received', (_w, _c, _x, _y, data) => { eventbox.connect('drag-data-received', (_w, _c, _x, _y, data) => {
overviewTick.value = !overviewTick.value;
Hyprland.sendMessage(`dispatch movetoworkspacesilent ${index},address:${data.get_text()}`) 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({ const OverviewRow = ({ startWorkspace, workspaces, windowName = 'overview' }) => Widget.Box({
children: arr(startWorkspace, workspaces).map(workspace), children: arr(startWorkspace, workspaces).map(workspace),
properties: [['update', box => { properties: [['update', box => {
if (!App.getWindow(windowName).visible) return;
execAsync('hyprctl -j clients').then(clients => { execAsync('hyprctl -j clients').then(clients => {
const json = JSON.parse(clients); const json = JSON.parse(clients);
const children = box.get_children(); const children = box.get_children();
@@ -308,19 +305,18 @@ const OverviewRow = ({ startWorkspace, workspaces, windowName = 'overview' }) =>
}).catch(print); }).catch(print);
}]], }]],
setup: (box) => box._update(box), setup: (box) => {
connections: [ box
// Update on change .hook(Hyprland, (box, name, data) => {
[overviewTick, box => { if (!App.getWindow(windowName).visible) return; Utils.timeout(2, () => box._update(box)); }], if (["changefloatingmode", "movewindow"].includes(name))
[Hyprland, box => { if (!App.getWindow(windowName).visible) return; box._update(box); }, 'client-added'], box._update(box);
[Hyprland, box => { if (!App.getWindow(windowName).visible) return; box._update(box); }, 'client-removed'], }, 'event')
// Update on show .hook(Hyprland, (box) => box._update(box), 'client-added')
[App, (box, name, visible) => { // Update on open .hook(Hyprland, (box) => box._update(box), 'client-removed')
if (name == 'overview' && visible) { .hook(App, (box, name, visible) => { // Update on open
box._update(box); if (name == 'overview' && visible) box._update(box);
} })
}], },
],
}); });
@@ -393,7 +389,7 @@ export const SearchAndWindows = () => {
const text = self.text; const text = self.text;
if (text.length == 0) return; if (text.length == 0) return;
const isAction = text.startsWith('>'); 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 if (startsWithNumber(text)) { // Eval on typing is dangerous, this is a workaround
try { 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 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 onChange: (entry) => {
connections: [ const isAction = entry.text[0] == '>';
['notify::text', (entry) => { // This is when you type const isDir = (['/', '~'].includes(entry.text[0]));
const isAction = entry.text[0] == '>'; const children = resultsBox.get_children();
const isDir = (entry.text[0] == '/' || entry.text[0] == '~'); for (let i = 0; i < children.length; i++) {
const children = resultsBox.get_children(); const child = children[i];
for (let i = 0; i < children.length; i++) { child.destroy();
const child = children[i]; }
child.destroy(); // check empty if so then dont do stuff
} if (entry.text == '') {
// check empty if so then dont do stuff resultsRevealer.set_reveal_child(false);
if (entry.text == '') { overviewRevealer.set_reveal_child(true);
resultsRevealer.set_reveal_child(false); entryPromptRevealer.set_reveal_child(true);
overviewRevealer.set_reveal_child(true); entryIconRevealer.set_reveal_child(false);
entryPromptRevealer.set_reveal_child(true); entry.toggleClassName('overview-search-box-extended', false);
entryIconRevealer.set_reveal_child(false); return;
entry.toggleClassName('overview-search-box-extended', false); }
} const text = entry.text;
else { resultsRevealer.set_reveal_child(true);
const text = entry.text; overviewRevealer.set_reveal_child(false);
resultsRevealer.set_reveal_child(true); entryPromptRevealer.set_reveal_child(false);
overviewRevealer.set_reveal_child(false); entryIconRevealer.set_reveal_child(true);
entryPromptRevealer.set_reveal_child(false); entry.toggleClassName('overview-search-box-extended', true);
entryIconRevealer.set_reveal_child(true); _appSearchResults = Applications.query(text);
entry.toggleClassName('overview-search-box-extended', true);
_appSearchResults = Applications.query(text);
// Calculate // Calculate
if (startsWithNumber(text)) { // Eval on typing is dangerous, this is a small workaround. if (startsWithNumber(text)) { // Eval on typing is dangerous, this is a small workaround.
try { try {
const fullResult = eval(text); const fullResult = eval(text);
resultsBox.add(CalculationResultButton({ result: fullResult, text: text })); resultsBox.add(CalculationResultButton({ result: fullResult, text: text }));
} catch (e) { } catch (e) {
// console.log(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();
} }
}] }
], 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({ return Widget.Box({
@@ -524,21 +516,37 @@ export const SearchAndWindows = () => {
overviewRevealer, overviewRevealer,
resultsRevealer, resultsRevealer,
], ],
connections: [ setup: (self) => self
[App, (_b, name, visible) => { .hook(App, (_b, name, visible) => {
if (name == 'overview' && !visible) { if (name == 'overview' && !visible) {
entryPromptRevealer.child.label = searchPromptTexts[Math.floor(Math.random() * searchPromptTexts.length)]; entryPromptRevealer.child.label = searchPromptTexts[Math.floor(Math.random() * searchPromptTexts.length)];
resultsBox.children = []; resultsBox.children = [];
entry.set_text(''); 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) { if (event.get_keyval()[1] >= 32 && event.get_keyval()[1] <= 126 && widget != entry) {
Utils.timeout(1, () => entry.grab_focus()); Utils.timeout(1, () => entry.grab_focus());
entry.set_text(entry.text + String.fromCharCode(event.get_keyval()[1])); entry.set_text(entry.text + String.fromCharCode(event.get_keyval()[1]));
entry.set_position(-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);
// }
// }],
// ],
}); });
}; };
+104 -61
View File
@@ -6,56 +6,103 @@ const { GLib, Gtk } = imports.gi;
import { Service, Utils, Widget } from '../../imports.js'; import { Service, Utils, Widget } from '../../imports.js';
import Notifications from 'resource:///com/github/Aylur/ags/service/notifications.js'; import Notifications from 'resource:///com/github/Aylur/ags/service/notifications.js';
const { lookUpIcon, timeout } = Utils; 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 { MaterialIcon } from "../../lib/materialicon.js";
import { setupCursorHover } from "../../lib/cursorhover.js"; import { setupCursorHover } from "../../lib/cursorhover.js";
import { ConfigToggle, ConfigSegmentedSelection, ConfigGap } from '../../lib/configwidgets.js';
import Notification from "../../lib/notification.js"; import Notification from "../../lib/notification.js";
const NotificationList = Box({ export default (props) => {
vertical: true, const dndToggle = ConfigToggle({
vpack: 'start', hpack: 'center',
className: 'spacing-v-5-revealer', icon: 'notifications_paused',
connections: [ name: 'Do not disturb',
[Notifications, (box, id) => { desc: "Don't pop up notifications",
if (box.children.length == 0) { initValue: Notifications.dnd,
Notifications.notifications onChange: (self, newValue) => {
.forEach(n => { Notifications.dnd = newValue;
box.pack_end(Notification({ silenceButton.toggleClassName('notif-listaction-btn-enabled', Notifications.dnd);
notifObject: n, },
isPopup: false, });
}), false, false, 0) const notifEmptyContent = Box({
}); homogeneous: true,
box.show_all(); children: [Box({
} vertical: true,
else if (id) { 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 notif = Notifications.getNotification(id);
const NewNotif = Notification({ const NewNotif = Notification({
notifObject: notif, notifObject: notif,
isPopup: false, isPopup: false,
}); });
if (NewNotif) { if (NewNotif) {
box.pack_end(NewNotif, false, false, 0); box.pack_end(NewNotif, false, false, 0);
box.show_all(); box.show_all();
} }
} }, 'notified'],
}, 'notified'],
[Notifications, (box, id) => { [Notifications, (box, id) => {
if (!id) return; if (!id) return;
for (const ch of box.children) { for (const ch of box.children) {
if (ch._id === id) { if (ch._id === id) {
ch._destroyWithAnims(); ch._destroyWithAnims();
}
} }
} }, 'closed'],
}, 'closed'], ],
});
[Notifications, box => box.visible = Notifications.notifications.length > 0], const ListActionButton = (icon, name, action) => Button({
], className: 'notif-listaction-btn',
}); onClicked: action,
child: Box({
export default (props) => { 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({ const listTitle = Revealer({
revealChild: false, revealChild: false,
connections: [[Notifications, (revealer) => { connections: [[Notifications, (revealer) => {
@@ -63,7 +110,7 @@ export default (props) => {
}]], }]],
child: Box({ child: Box({
vpack: 'start', vpack: 'start',
className: 'sidebar-group-invisible txt', className: 'sidebar-group-invisible txt spacing-h-5',
children: [ children: [
Label({ Label({
hexpand: true, hexpand: true,
@@ -71,40 +118,36 @@ export default (props) => {
className: 'txt-title-small', className: 'txt-title-small',
label: 'Notifications', label: 'Notifications',
}), }),
Button({ silenceButton,
className: 'notif-closeall-btn', clearButton,
onClicked: () => {
Notifications.clear();
},
child: Box({
className: 'spacing-h-5',
children: [
MaterialIcon('clear_all', 'norm'),
Label({
className: 'txt-small',
label: 'Clear',
})
]
}),
setup: button => {
setupCursorHover(button);
},
})
] ]
}) })
}); });
const listContents = Scrollable({ const notifList = Scrollable({
hexpand: true, hexpand: true,
hscroll: 'never', hscroll: 'never',
vscroll: 'automatic', vscroll: 'automatic',
child: Box({ child: Box({
vexpand: true, 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({ return Box({
...props, ...props,
className: 'sidebar-group-invisible spacing-v-5', className: 'sidebar-group-invisible spacing-v-5',
@@ -27,7 +27,7 @@ export const ToggleIconWifi = (props = {}) => Widget.Button({
child: NetworkIndicator(), child: NetworkIndicator(),
connections: [ connections: [
[Network, button => { [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 => { [Network, button => {
button.tooltipText = (`${Network.wifi?.ssid} | Right-click to configure` || 'Unknown'); button.tooltipText = (`${Network.wifi?.ssid} | Right-click to configure` || 'Unknown');