diff options
| -rw-r--r-- | app.tsx | 2 | ||||
| -rw-r--r-- | scss/session.scss | 55 | ||||
| -rw-r--r-- | src/modules/bar.tsx | 6 | ||||
| -rw-r--r-- | src/modules/session.tsx | 34 | ||||
| -rw-r--r-- | src/widgets/popupwindow.ts | 2 | ||||
| -rw-r--r-- | style.scss | 1 |
6 files changed, 94 insertions, 6 deletions
@@ -5,6 +5,7 @@ import Launcher from "./src/modules/launcher"; import NotifPopups from "./src/modules/notifpopups"; import Osds from "./src/modules/osds"; import Popdowns from "./src/modules/popdowns"; +import Session from "./src/modules/session"; import Monitors from "./src/services/monitors"; import Players from "./src/services/players"; @@ -30,6 +31,7 @@ App.start({ <Launcher />; <NotifPopups />; <Osds />; + <Session />; Monitors.get_default().forEach(m => <Bar monitor={m} />); <Popdowns />; diff --git a/scss/session.scss b/scss/session.scss new file mode 100644 index 0000000..d193845 --- /dev/null +++ b/scss/session.scss @@ -0,0 +1,55 @@ +@use "sass:color"; +@use "scheme"; +@use "lib"; +@use "font"; + +.session { + background-color: #0000009e; + + .inner { + @include lib.rounded(8); + @include lib.border(scheme.$overlay0, 0.1); + @include lib.shadow; + @include font.mono; + + background-color: scheme.$mantle; + color: scheme.$text; + padding: lib.s(18) lib.s(20); + + @include lib.spacing(10, true); + + & > * { + @include lib.spacing(20); + } + + .item { + font-size: lib.s(14); + + @include lib.spacing($vertical: true); + + button { + @include lib.rounded(100); + @include lib.element-decel(300ms); + + background-color: scheme.$base; + min-width: lib.s(100); + min-height: lib.s(100); + font-size: lib.s(32); + + &:hover, + &:focus { + background-color: color.mix(scheme.$flamingo, scheme.$base, 70%); + color: scheme.$base; + } + + &:active { + background-color: color.mix(scheme.$flamingo, scheme.$base, 50%); + } + } + + .label { + font-weight: 500; + } + } + } +} diff --git a/src/modules/bar.tsx b/src/modules/bar.tsx index fbcfb10..47702e8 100644 --- a/src/modules/bar.tsx +++ b/src/modules/bar.tsx @@ -452,11 +452,7 @@ const DateTime = () => ( ); const Power = () => ( - <button - className="module power" - label="power_settings_new" - onClicked={() => execAsync("fish -c 'pkill wlogout || wlogout -p layer-shell'").catch(console.error)} - /> + <button className="module power" label="power_settings_new" onClicked={() => App.toggle_window("session")} /> ); export default ({ monitor }: { monitor: Monitor }) => ( diff --git a/src/modules/session.tsx b/src/modules/session.tsx new file mode 100644 index 0000000..7d04870 --- /dev/null +++ b/src/modules/session.tsx @@ -0,0 +1,34 @@ +import { execAsync } from "astal"; +import { Astal, Gtk } from "astal/gtk3"; +import PopupWindow from "../widgets/popupwindow"; + +const Item = ({ icon, label, cmd }: { icon: string; label: string; cmd: string }) => ( + <box vertical className="item"> + <button cursor="pointer" onClicked={() => execAsync(cmd).catch(console.error)}> + <label className="icon" label={icon} /> + </button> + <label className="label" label={label} /> + </box> +); + +export default () => ( + <PopupWindow + className="session" + name="session" + anchor={Astal.WindowAnchor.TOP | Astal.WindowAnchor.LEFT | Astal.WindowAnchor.BOTTOM | Astal.WindowAnchor.RIGHT} + keymode={Astal.Keymode.EXCLUSIVE} + layer={Astal.Layer.OVERLAY} + borderWidth={0} // Don't need border width cause takes up entire screen + > + <box vertical halign={Gtk.Align.CENTER} valign={Gtk.Align.CENTER} className="inner"> + <box> + <Item icon="logout" label="Logout" cmd="uwsm stop" /> + <Item icon="cached" label="Reboot" cmd="systemctl reboot" /> + </box> + <box> + <Item icon="downloading" label="Hibernate" cmd="systemctl hibernate" /> + <Item icon="power_settings_new" label="Shutdown" cmd="systemctl poweroff" /> + </box> + </box> + </PopupWindow> +); diff --git a/src/widgets/popupwindow.ts b/src/widgets/popupwindow.ts index 335260d..bbc6053 100644 --- a/src/widgets/popupwindow.ts +++ b/src/widgets/popupwindow.ts @@ -13,6 +13,7 @@ export default class PopupWindow extends Widget.Window { super({ keymode: Astal.Keymode.ON_DEMAND, exclusivity: Astal.Exclusivity.IGNORE, + borderWidth: 20, // To allow shadow, cause if not it gets cut off ...props, visible: false, application: App, @@ -24,7 +25,6 @@ export default class PopupWindow extends Widget.Window { return props.onKeyPressEvent?.(self, event); }, - borderWidth: 20, // To allow shadow, cause if not it gets cut off }); } @@ -7,6 +7,7 @@ @use "scss/launcher"; @use "scss/osds"; @use "scss/popdowns"; +@use "scss/session"; * { all: unset; // Remove GTK theme styles |