diff --git a/nixosModules/ags/v2/app.ts b/nixosModules/ags/v2/app.ts index 9ca7c0b1..584b2638 100644 --- a/nixosModules/ags/v2/app.ts +++ b/nixosModules/ags/v2/app.ts @@ -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(); }, diff --git a/nixosModules/ags/v2/colors.scss b/nixosModules/ags/v2/colors.scss new file mode 100644 index 00000000..6dae09d9 --- /dev/null +++ b/nixosModules/ags/v2/colors.scss @@ -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; diff --git a/nixosModules/ags/v2/style.scss b/nixosModules/ags/v2/style.scss index 1809da04..9b0fa700 100644 --- a/nixosModules/ags/v2/style.scss +++ b/nixosModules/ags/v2/style.scss @@ -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'; diff --git a/nixosModules/ags/v2/widgets/icon-browser/main.tsx b/nixosModules/ags/v2/widgets/icon-browser/main.tsx new file mode 100644 index 00000000..81dcf1c1 --- /dev/null +++ b/nixosModules/ags/v2/widgets/icon-browser/main.tsx @@ -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[]; + + 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 = ( + + + ) 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 = ( + 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) => ( + + + + )) + .forEach((child) => { + list.add(child); + }); + + list.show_all(); + on_text_change(''); + }); + + refreshIcons(); + + return ( + { + entry.text = ''; + centerCursor(); + }} + > + + + + + + {entry} + + + + + + + + {list} + {placeholder} + + + + + ); +}; diff --git a/nixosModules/ags/v2/widgets/icon-browser/style.scss b/nixosModules/ags/v2/widgets/icon-browser/style.scss new file mode 100644 index 00000000..167997c7 --- /dev/null +++ b/nixosModules/ags/v2/widgets/icon-browser/style.scss @@ -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; + } + } +} diff --git a/nixosModules/ags/v2/widgets/powermenu/main.tsx b/nixosModules/ags/v2/widgets/powermenu/main.tsx new file mode 100644 index 00000000..8f4d10bf --- /dev/null +++ b/nixosModules/ags/v2/widgets/powermenu/main.tsx @@ -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 = () => ( + + + + + + + +); + +export default () => ( + + + +); diff --git a/nixosModules/ags/v2/widgets/powermenu/style.scss b/nixosModules/ags/v2/widgets/powermenu/style.scss new file mode 100644 index 00000000..8fbef72e --- /dev/null +++ b/nixosModules/ags/v2/widgets/powermenu/style.scss @@ -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; + } +}