diff options
Diffstat (limited to 'examples/js/simple-bar')
| -rw-r--r-- | examples/js/simple-bar/README.md | 12 | ||||
| -rw-r--r-- | examples/js/simple-bar/app.ts | 13 | ||||
| -rw-r--r-- | examples/js/simple-bar/style.scss | 106 | ||||
| -rw-r--r-- | examples/js/simple-bar/widget/Bar.tsx | 161 |
4 files changed, 0 insertions, 292 deletions
diff --git a/examples/js/simple-bar/README.md b/examples/js/simple-bar/README.md deleted file mode 100644 index f92b20e..0000000 --- a/examples/js/simple-bar/README.md +++ /dev/null @@ -1,12 +0,0 @@ -# Simple Bar Example - - - -A simple bar for Hyprland using - -- [Battery library](https://aylur.github.io/astal/guide/libraries/battery). -- [Hyprland library](https://aylur.github.io/astal/guide/libraries/hyprland). -- [Mpris library](https://aylur.github.io/astal/guide/libraries/mpris). -- [Network library](https://aylur.github.io/astal/guide/libraries/network). -- [Tray library](https://aylur.github.io/astal/guide/libraries/tray). -- [WirePlumber library](https://aylur.github.io/astal/guide/libraries/wireplumber). diff --git a/examples/js/simple-bar/app.ts b/examples/js/simple-bar/app.ts deleted file mode 100644 index 4b7ea48..0000000 --- a/examples/js/simple-bar/app.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { App } from "astal/gtk3" -import style from "./style.scss" -import Bar from "./widget/Bar" - -App.start({ - css: style, - instanceName: "js", - requestHandler(request, res) { - print(request) - res("ok") - }, - main: () => App.get_monitors().map(Bar), -}) diff --git a/examples/js/simple-bar/style.scss b/examples/js/simple-bar/style.scss deleted file mode 100644 index f5f771a..0000000 --- a/examples/js/simple-bar/style.scss +++ /dev/null @@ -1,106 +0,0 @@ -@use "sass:color"; - -$bg: #212223; -$fg: #f1f1f1; -$accent: #378DF7; -$radius: 7px; - -window.Bar { - border: none; - box-shadow: none; - background-color: $bg; - color: $fg; - font-size: 1.1em; - font-weight: bold; - - label { - margin: 0 8px; - } - - .Workspaces { - button { - all: unset; - background-color: transparent; - - &:hover label { - background-color: color.adjust($fg, $alpha: -0.84); - border-color: color.adjust($accent, $alpha: -0.8); - } - - &:active label { - background-color: color.adjust($fg, $alpha: -0.8) - } - } - - label { - transition: 200ms; - padding: 0 8px; - margin: 2px; - border-radius: $radius; - border: 1pt solid transparent; - } - - .focused label { - color: $accent; - border-color: $accent; - } - } - - .SysTray { - margin-right: 8px; - - button { - padding: 0 4px; - } - } - - .FocusedClient { - color: $accent; - } - - .Media .Cover { - min-height: 1.2em; - min-width: 1.2em; - border-radius: $radius; - background-position: center; - background-size: contain; - } - - .Battery label { - padding-left: 0; - margin-left: 0; - } - - .AudioSlider { - * { - all: unset; - } - - icon { - margin-right: .6em; - } - - & { - margin: 0 1em; - } - - trough { - background-color: color.adjust($fg, $alpha: -0.8); - border-radius: $radius; - } - - highlight { - background-color: $accent; - min-height: .8em; - border-radius: $radius; - } - - slider { - background-color: $fg; - border-radius: $radius; - min-height: 1em; - min-width: 1em; - margin: -.2em; - } - } -} diff --git a/examples/js/simple-bar/widget/Bar.tsx b/examples/js/simple-bar/widget/Bar.tsx deleted file mode 100644 index 6592f6a..0000000 --- a/examples/js/simple-bar/widget/Bar.tsx +++ /dev/null @@ -1,161 +0,0 @@ -import { App } from "astal/gtk3" -import { Variable, GLib, bind } from "astal" -import { Astal, Gtk, Gdk } from "astal/gtk3" -import Hyprland from "gi://AstalHyprland" -import Mpris from "gi://AstalMpris" -import Battery from "gi://AstalBattery" -import Wp from "gi://AstalWp" -import Network from "gi://AstalNetwork" -import Tray from "gi://AstalTray" - -function SysTray() { - const tray = Tray.get_default() - - return <box className="SysTray"> - {bind(tray, "items").as(items => items.map(item => ( - <menubutton - tooltipMarkup={bind(item, "tooltipMarkup")} - usePopover={false} - actionGroup={bind(item, "actionGroup").as(ag => ["dbusmenu", ag])} - menuModel={bind(item, "menuModel")}> - <icon gicon={bind(item, "gicon")} /> - </menubutton> - )))} - </box> -} - -function Wifi() { - const network = Network.get_default() - const wifi = bind(network, "wifi") - - return <box visible={wifi.as(Boolean)}> - {wifi.as(wifi => wifi && ( - <icon - tooltipText={bind(wifi, "ssid").as(String)} - className="Wifi" - icon={bind(wifi, "iconName")} - /> - ))} - </box> - -} - -function AudioSlider() { - const speaker = Wp.get_default()?.audio.defaultSpeaker! - - return <box className="AudioSlider" css="min-width: 140px"> - <icon icon={bind(speaker, "volumeIcon")} /> - <slider - hexpand - onDragged={({ value }) => speaker.volume = value} - value={bind(speaker, "volume")} - /> - </box> -} - -function BatteryLevel() { - const bat = Battery.get_default() - - return <box className="Battery" - visible={bind(bat, "isPresent")}> - <icon icon={bind(bat, "batteryIconName")} /> - <label label={bind(bat, "percentage").as(p => - `${Math.floor(p * 100)} %` - )} /> - </box> -} - -function Media() { - const mpris = Mpris.get_default() - - return <box className="Media"> - {bind(mpris, "players").as(ps => ps[0] ? ( - <box> - <box - className="Cover" - valign={Gtk.Align.CENTER} - css={bind(ps[0], "coverArt").as(cover => - `background-image: url('${cover}');` - )} - /> - <label - label={bind(ps[0], "title").as(() => - `${ps[0].title} - ${ps[0].artist}` - )} - /> - </box> - ) : ( - "Nothing Playing" - ))} - </box> -} - -function Workspaces() { - const hypr = Hyprland.get_default() - - return <box className="Workspaces"> - {bind(hypr, "workspaces").as(wss => wss - .filter(ws => !(ws.id >= -99 && ws.id <= -2)) // filter out special workspaces - .sort((a, b) => a.id - b.id) - .map(ws => ( - <button - className={bind(hypr, "focusedWorkspace").as(fw => - ws === fw ? "focused" : "")} - onClicked={() => ws.focus()}> - {ws.id} - </button> - )) - )} - </box> -} - -function FocusedClient() { - const hypr = Hyprland.get_default() - const focused = bind(hypr, "focusedClient") - - return <box - className="Focused" - visible={focused.as(Boolean)}> - {focused.as(client => ( - client && <label label={bind(client, "title").as(String)} /> - ))} - </box> -} - -function Time({ format = "%H:%M - %A %e." }) { - const time = Variable<string>("").poll(1000, () => - GLib.DateTime.new_now_local().format(format)!) - - return <label - className="Time" - onDestroy={() => time.drop()} - label={time()} - /> -} - -export default function Bar(monitor: Gdk.Monitor) { - const { TOP, LEFT, RIGHT } = Astal.WindowAnchor - - return <window - className="Bar" - gdkmonitor={monitor} - exclusivity={Astal.Exclusivity.EXCLUSIVE} - anchor={TOP | LEFT | RIGHT}> - <centerbox> - <box hexpand halign={Gtk.Align.START}> - <Workspaces /> - <FocusedClient /> - </box> - <box> - <Media /> - </box> - <box hexpand halign={Gtk.Align.END} > - <SysTray /> - <Wifi /> - <AudioSlider /> - <BatteryLevel /> - <Time /> - </box> - </centerbox> - </window> -} |