feat(agsV2): add powermenu and icon-browser
All checks were successful
Discord / discord commits (push) Has been skipped
All checks were successful
Discord / discord commits (push) Has been skipped
This commit is contained in:
parent
96a7bcb6aa
commit
176ab348e9
7 changed files with 332 additions and 33 deletions
|
|
@ -6,7 +6,9 @@ import AppLauncher from './widgets/applauncher/main';
|
|||
import Bar from './widgets/bar/wim';
|
||||
import BgFade from './widgets/bg-fade/main';
|
||||
import Corners from './widgets/corners/main';
|
||||
import IconBrowser from './widgets/icon-browser/main';
|
||||
import { NotifPopups, NotifCenter } from './widgets/notifs/main';
|
||||
import PowerMenu from './widgets/powermenu/main';
|
||||
|
||||
import MonitorClicks from './services/monitor-clicks';
|
||||
|
||||
|
|
@ -19,8 +21,10 @@ App.start({
|
|||
Bar();
|
||||
BgFade();
|
||||
Corners();
|
||||
IconBrowser();
|
||||
NotifPopups();
|
||||
NotifCenter();
|
||||
PowerMenu();
|
||||
|
||||
new MonitorClicks();
|
||||
},
|
||||
|
|
|
|||
79
nixosModules/ags/v2/colors.scss
Normal file
79
nixosModules/ags/v2/colors.scss
Normal file
|
|
@ -0,0 +1,79 @@
|
|||
// Vars from my Gradient theme
|
||||
$accent_color: #bd93f9;
|
||||
$accent_bg_color: #bd93f9;
|
||||
$accent_fg_color: #f8f8f2;
|
||||
$destructive_color: #ff5555;
|
||||
$destructive_bg_color: #ff5555;
|
||||
$destructive_fg_color: #f8f8f2;
|
||||
$success_color: #50fa7b;
|
||||
$success_bg_color: #50fa7b;
|
||||
$success_fg_color: #f8f8f2;
|
||||
$warning_color: #f1fa8c;
|
||||
$warning_bg_color: #f1fa8c;
|
||||
$warning_fg_color: rgba(0, 0, 0, 0.8);
|
||||
$error_color: #ff5555;
|
||||
$error_bg_color: #ff5555;
|
||||
$error_fg_color: #f8f8f2;
|
||||
$window_bg_color: #282a36;
|
||||
$window_fg_color: #f8f8f2;
|
||||
$view_bg_color: #282a36;
|
||||
$view_fg_color: #f8f8f2;
|
||||
$headerbar_bg_color: #282a36;
|
||||
$headerbar_fg_color: #f8f8f2;
|
||||
$headerbar_border_color: #ffffff;
|
||||
$headerbar_backdrop_color: $window_bg_color;
|
||||
$headerbar_shade_color: rgba(0, 0, 0, 0.36);
|
||||
$card_bg_color: rgba(255, 255, 255, 0.08);
|
||||
$card_fg_color: #f8f8f2;
|
||||
$card_shade_color: rgba(0, 0, 0, 0.36);
|
||||
$dialog_bg_color: #282a36;
|
||||
$dialog_fg_color: #f8f8f2;
|
||||
$popover_bg_color: #282a36;
|
||||
$popover_fg_color: #f8f8f2;
|
||||
$shade_color: #383838;
|
||||
$scrollbar_outline_color: rgba(0, 0, 0, 0.5);
|
||||
$green_1: #8ff0a4;
|
||||
$green_2: #57e389;
|
||||
$green_3: #33d17a;
|
||||
$green_4: #2ec27e;
|
||||
$green_5: #26a269;
|
||||
$yellow_1: #f9f06b;
|
||||
$yellow_2: #f8e45c;
|
||||
$yellow_3: #f6d32d;
|
||||
$yellow_4: #f5c211;
|
||||
$yellow_5: #e5a50a;
|
||||
$orange_1: #ffbe6f;
|
||||
$orange_2: #ffa348;
|
||||
$orange_3: #ff7800;
|
||||
$orange_4: #e66100;
|
||||
$orange_5: #c64600;
|
||||
$red_1: #f66151;
|
||||
$red_2: #ed333b;
|
||||
$red_3: #e01b24;
|
||||
$red_4: #c01c28;
|
||||
$red_5: #a51d2d;
|
||||
$purple_1: #dc8add;
|
||||
$purple_2: #c061cb;
|
||||
$purple_3: #9141ac;
|
||||
$purple_4: #813d9c;
|
||||
$purple_5: #613583;
|
||||
$brown_1: #cdab8f;
|
||||
$brown_2: #b5835a;
|
||||
$brown_3: #986a44;
|
||||
$brown_4: #865e3c;
|
||||
$brown_5: #63452c;
|
||||
$light_1: #ffffff;
|
||||
$light_2: #f6f5f4;
|
||||
$light_3: #deddda;
|
||||
$light_4: #c0bfbc;
|
||||
$light_5: #9a9996;
|
||||
$dark_1: #77767b;
|
||||
$dark_2: #5e5c64;
|
||||
$dark_3: #3d3846;
|
||||
$dark_4: #241f31;
|
||||
$dark_5: #000000;
|
||||
$blue_1: #99c1f1;
|
||||
$blue_2: #62a0ea;
|
||||
$blue_3: #3584e4;
|
||||
$blue_4: #1c71d8;
|
||||
$blue_5: #1a5fb4;
|
||||
|
|
@ -1,36 +1,4 @@
|
|||
$accent_color: #bd93f9;
|
||||
$accent_bg_color: #bd93f9;
|
||||
$accent_fg_color: #f8f8f2;
|
||||
$destructive_color: #ff5555;
|
||||
$destructive_bg_color: #ff5555;
|
||||
$destructive_fg_color: #f8f8f2;
|
||||
$success_color: #50fa7b;
|
||||
$success_bg_color: #50fa7b;
|
||||
$success_fg_color: #f8f8f2;
|
||||
$warning_color: #f1fa8c;
|
||||
$warning_bg_color: #f1fa8c;
|
||||
$warning_fg_color: rgba(0, 0, 0, 0.8);
|
||||
$error_color: #ff5555;
|
||||
$error_bg_color: #ff5555;
|
||||
$error_fg_color: #f8f8f2;
|
||||
$window_bg_color: #282a36;
|
||||
$window_fg_color: #f8f8f2;
|
||||
$view_bg_color: #282a36;
|
||||
$view_fg_color: #f8f8f2;
|
||||
$headerbar_bg_color: #282a36;
|
||||
$headerbar_fg_color: #f8f8f2;
|
||||
$headerbar_border_color: #ffffff;
|
||||
$headerbar_backdrop_color: $window_bg_color;
|
||||
$headerbar_shade_color: rgba(0, 0, 0, 0.36);
|
||||
$card_bg_color: rgba(255, 255, 255, 0.08);
|
||||
$card_fg_color: #f8f8f2;
|
||||
$card_shade_color: rgba(0, 0, 0, 0.36);
|
||||
$dialog_bg_color: #282a36;
|
||||
$dialog_fg_color: #f8f8f2;
|
||||
$popover_bg_color: #282a36;
|
||||
$popover_fg_color: #f8f8f2;
|
||||
$shade_color: #383838;
|
||||
$scrollbar_outline_color: rgba(0, 0, 0, 0.5);
|
||||
@import 'colors.scss';
|
||||
|
||||
window, viewport {
|
||||
all: unset;
|
||||
|
|
@ -46,4 +14,6 @@ window, viewport {
|
|||
|
||||
@import 'widgets/applauncher/style.scss';
|
||||
@import 'widgets/bar/style.scss';
|
||||
@import 'widgets/icon-browser/style.scss';
|
||||
@import 'widgets/notifs/style.scss';
|
||||
@import 'widgets/powermenu/style.scss';
|
||||
|
|
|
|||
142
nixosModules/ags/v2/widgets/icon-browser/main.tsx
Normal file
142
nixosModules/ags/v2/widgets/icon-browser/main.tsx
Normal file
|
|
@ -0,0 +1,142 @@
|
|||
import { Astal, Gtk, Widget } from 'astal/gtk3';
|
||||
import { idle } from 'astal';
|
||||
|
||||
import { Fzf, FzfResultItem } from 'fzf';
|
||||
|
||||
import PopupWindow from '../misc/popup-window';
|
||||
import { centerCursor } from '../../lib';
|
||||
|
||||
|
||||
export default () => {
|
||||
let Icons: string[] = [];
|
||||
let fzfResults = [] as FzfResultItem<string>[];
|
||||
|
||||
const list = new Gtk.ListBox({
|
||||
selectionMode: Gtk.SelectionMode.SINGLE,
|
||||
});
|
||||
|
||||
list.connect('row-activated', (_, row) => {
|
||||
const icon = ((row.get_children()[0] as Widget.Box).get_children()[0] as Widget.Icon).icon;
|
||||
|
||||
console.log(icon);
|
||||
});
|
||||
|
||||
const placeholder = (
|
||||
<revealer>
|
||||
<label
|
||||
label=" Couldn't find a match"
|
||||
className="placeholder"
|
||||
/>
|
||||
</revealer>
|
||||
) as Widget.Revealer;
|
||||
|
||||
const on_text_change = (text: string) => {
|
||||
const fzf = new Fzf(Icons);
|
||||
|
||||
fzfResults = fzf.find(text);
|
||||
list.invalidate_sort();
|
||||
|
||||
const visibleIcons = list.get_children().filter((row) => row.visible).length;
|
||||
|
||||
placeholder.reveal_child = visibleIcons <= 0;
|
||||
};
|
||||
|
||||
const entry = (
|
||||
<entry
|
||||
onChanged={(self) => on_text_change(self.text)}
|
||||
hexpand
|
||||
/>
|
||||
) as Widget.Entry;
|
||||
|
||||
list.set_sort_func((a, b) => {
|
||||
const row1 = ((a.get_children()[0] as Widget.Box).get_children()[0] as Widget.Icon).icon;
|
||||
const row2 = ((b.get_children()[0] as Widget.Box).get_children()[0] as Widget.Icon).icon;
|
||||
|
||||
if (entry.text === '' || entry.text === '-') {
|
||||
a.set_visible(true);
|
||||
b.set_visible(true);
|
||||
|
||||
return row1.charCodeAt(0) - row2.charCodeAt(0);
|
||||
}
|
||||
else {
|
||||
const s1 = fzfResults.find((r) => r.item === row1)?.score ?? 0;
|
||||
const s2 = fzfResults.find((r) => r.item === row2)?.score ?? 0;
|
||||
|
||||
a.set_visible(s1 !== 0);
|
||||
b.set_visible(s2 !== 0);
|
||||
|
||||
return s2 - s1;
|
||||
}
|
||||
});
|
||||
|
||||
const refreshIcons = () => idle(() => {
|
||||
(list.get_children() as Gtk.ListBoxRow[])
|
||||
.forEach((child) => {
|
||||
child.destroy();
|
||||
});
|
||||
|
||||
Icons = Gtk.IconTheme.get_default().list_icons(null)
|
||||
.filter((icon) => icon.endsWith('symbolic'))
|
||||
.sort();
|
||||
|
||||
Icons
|
||||
.flatMap((icon) => (
|
||||
<box>
|
||||
<icon css="font-size: 60px; margin-right: 25px;" icon={icon} />
|
||||
<label label={icon} />
|
||||
</box>
|
||||
))
|
||||
.forEach((child) => {
|
||||
list.add(child);
|
||||
});
|
||||
|
||||
list.show_all();
|
||||
on_text_change('');
|
||||
});
|
||||
|
||||
refreshIcons();
|
||||
|
||||
return (
|
||||
<PopupWindow
|
||||
name="icon-browser"
|
||||
keymode={Astal.Keymode.ON_DEMAND}
|
||||
on_open={() => {
|
||||
entry.text = '';
|
||||
centerCursor();
|
||||
}}
|
||||
>
|
||||
<box
|
||||
vertical
|
||||
className="icon-browser"
|
||||
>
|
||||
<box className="widget icon-search">
|
||||
|
||||
<icon icon="preferences-system-search-symbolic" />
|
||||
|
||||
{entry}
|
||||
|
||||
<button
|
||||
css="margin-left: 5px;"
|
||||
onButtonReleaseEvent={refreshIcons}
|
||||
>
|
||||
<icon icon="view-refresh-symbolic" css="font-size: 26px;" />
|
||||
</button>
|
||||
|
||||
</box>
|
||||
|
||||
<scrollable
|
||||
className="widget icon-list"
|
||||
|
||||
css="min-height: 600px; min-width: 600px;"
|
||||
hscroll={Gtk.PolicyType.NEVER}
|
||||
vscroll={Gtk.PolicyType.AUTOMATIC}
|
||||
>
|
||||
<box vertical>
|
||||
{list}
|
||||
{placeholder}
|
||||
</box>
|
||||
</scrollable>
|
||||
</box>
|
||||
</PopupWindow>
|
||||
);
|
||||
};
|
||||
32
nixosModules/ags/v2/widgets/icon-browser/style.scss
Normal file
32
nixosModules/ags/v2/widgets/icon-browser/style.scss
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
.icon-browser {
|
||||
.icon-search {
|
||||
icon {
|
||||
font-size: 20px;
|
||||
min-width: 40px;
|
||||
min-height: 40px
|
||||
}
|
||||
|
||||
entry {}
|
||||
}
|
||||
|
||||
.icon-list {
|
||||
row {
|
||||
border-radius: 10px;
|
||||
|
||||
&:hover, &:selected {
|
||||
icon {
|
||||
-gtk-icon-shadow: 2px 2px $accent_color;
|
||||
}
|
||||
}
|
||||
|
||||
box {
|
||||
margin: 20px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
43
nixosModules/ags/v2/widgets/powermenu/main.tsx
Normal file
43
nixosModules/ags/v2/widgets/powermenu/main.tsx
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
import { execAsync } from 'astal';
|
||||
import { Astal } from 'astal/gtk3';
|
||||
|
||||
import { hyprMessage } from '../../lib';
|
||||
|
||||
import PopupWindow from '../misc/popup-window';
|
||||
|
||||
|
||||
const PowermenuWidget = () => (
|
||||
<centerbox className="powermenu widget">
|
||||
<button
|
||||
className="shutdown button"
|
||||
onButtonReleaseEvent={() => execAsync(['systemctl', 'poweroff']).catch(print)}
|
||||
>
|
||||
<icon icon="system-shutdown-symbolic" />
|
||||
</button>
|
||||
|
||||
<button
|
||||
className="reboot button"
|
||||
onButtonReleaseEvent={() => execAsync(['systemctl', 'reboot']).catch(print)}
|
||||
>
|
||||
<icon icon="system-restart-symbolic" />
|
||||
</button>
|
||||
|
||||
<button
|
||||
className="logout button"
|
||||
onButtonReleaseEvent={() => hyprMessage('dispatch exit').catch(print)}
|
||||
>
|
||||
<icon icon="system-log-out-symbolic" />
|
||||
</button>
|
||||
</centerbox>
|
||||
);
|
||||
|
||||
export default () => (
|
||||
<PopupWindow
|
||||
name="powermenu"
|
||||
transition="slide bottom"
|
||||
// To put it at the center of the screen
|
||||
exclusivity={Astal.Exclusivity.IGNORE}
|
||||
>
|
||||
<PowermenuWidget />
|
||||
</PopupWindow>
|
||||
);
|
||||
29
nixosModules/ags/v2/widgets/powermenu/style.scss
Normal file
29
nixosModules/ags/v2/widgets/powermenu/style.scss
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
.powermenu {
|
||||
font-size: 70px;
|
||||
padding: 10px;
|
||||
|
||||
icon {
|
||||
min-width: 130px;
|
||||
min-height: 130px;
|
||||
}
|
||||
|
||||
button {
|
||||
margin: 5px 10px;
|
||||
transition: all ease .2s;
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
background-color: lighten($window_bg_color, 3%);
|
||||
}
|
||||
}
|
||||
|
||||
.shutdown {
|
||||
color: $red_1;
|
||||
}
|
||||
.reboot {
|
||||
color: $purple_1;
|
||||
}
|
||||
.logout {
|
||||
color: $yellow_1;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue