mirror of
https://github.com/danbulant/dots-hyprland
synced 2026-05-24 12:22:09 +00:00
ags: sync
This commit is contained in:
end-4
parent
28ae26a5b5
commit
2f8bf36831
13 changed files with 347 additions and 301 deletions
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
}))
|
||||
}))
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
// }
|
||||
// }],
|
||||
// ],
|
||||
});
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
|
|
|
|||
Loading…
Reference in a new issue