lets goo
This commit is contained in:
Benjamin Palko
parent
e62a7afa60
commit
6b8b5f62ea
7 changed files with 196 additions and 183 deletions
|
|
@ -1 +1 @@
|
|||
bun 1.2.8
|
||||
bun latest
|
||||
|
|
|
|||
8
components/Svg.tsx
Normal file
8
components/Svg.tsx
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
interface SvgProps {
|
||||
color?: string;
|
||||
rotation?: number;
|
||||
}
|
||||
|
||||
export function Svg({ color, rotation }: SvgProps) {
|
||||
const svgPath = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" ${rotation && 'transform="rotate(180 12 12)"'} fill="none" stroke="${color || "#cac9c9"}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13.73 4a2 2 0 0 0-3.46 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/></svg>`;
|
||||
}
|
||||
107
style.scss
107
style.scss
|
|
@ -1,15 +1,16 @@
|
|||
$crust: #181926;
|
||||
$mantle: #1e2030;
|
||||
$base: #24273a;
|
||||
$primary: #1fb854;
|
||||
$secondary: #1eb88e;
|
||||
$accent: #1fb8ab;
|
||||
$neutral: #19362d;
|
||||
$base100: #1b1717;
|
||||
$base200: #161212;
|
||||
$base300: #110d0d;
|
||||
$basecontent: #cac9c9;
|
||||
|
||||
$surface0: #363a4f;
|
||||
$surface1: #494d64;
|
||||
$surface2: #5b6078;
|
||||
|
||||
$rosewater: #f4dbd6;
|
||||
$flamingo: #dd7878;
|
||||
$pink: #ea76cb;
|
||||
$mauve: #8839ef;
|
||||
$info: #00b5ff;
|
||||
$success: #00a96e;
|
||||
$warning: #ffbe00;
|
||||
$error: #ff5861;
|
||||
|
||||
:root {
|
||||
font-family: JetBrainsMono Nerd Font;
|
||||
|
|
@ -22,14 +23,16 @@ button {
|
|||
|
||||
label {
|
||||
transition:
|
||||
border 0.5s,
|
||||
background 0.5s;
|
||||
background: $mantle;
|
||||
border 0.35s,
|
||||
background 0.35s,
|
||||
color 0.35s;
|
||||
background: $base100;
|
||||
}
|
||||
|
||||
label:hover {
|
||||
background: $crust;
|
||||
border: 3px solid $rosewater;
|
||||
background: $primary;
|
||||
color: $base300;
|
||||
// border: 3px solid $primary;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -37,10 +40,10 @@ label {
|
|||
all: initial;
|
||||
|
||||
font-family: inherit;
|
||||
color: $rosewater;
|
||||
padding: 2px 12px;
|
||||
background: $crust;
|
||||
border: 3px solid $crust;
|
||||
font-size: 14px;
|
||||
color: $basecontent;
|
||||
padding: 0 12px;
|
||||
// background: $base200;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
|
|
@ -49,53 +52,48 @@ popover > contents {
|
|||
|
||||
padding: 4px 12px;
|
||||
border-radius: 8px;
|
||||
border: 4px solid $crust;
|
||||
background: rgba($color: $base, $alpha: 0.75);
|
||||
border: 4px solid $base200;
|
||||
background: rgba($color: $base100, $alpha: 0.98);
|
||||
}
|
||||
|
||||
.no-styles {
|
||||
all: initial;
|
||||
|
||||
color: $rosewater;
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
.active {
|
||||
label {
|
||||
background: $crust;
|
||||
background: $secondary;
|
||||
color: $base300;
|
||||
}
|
||||
}
|
||||
|
||||
.Arch {
|
||||
-gtk-icon-size: 24px;
|
||||
padding: 4px 8px;
|
||||
border-radius: 8px;
|
||||
border: 3px solid $crust;
|
||||
background: $mantle;
|
||||
transition:
|
||||
border 0.5s,
|
||||
background 0.5s;
|
||||
|
||||
&:hover {
|
||||
background: $crust;
|
||||
border: 3px solid $rosewater;
|
||||
}
|
||||
-gtk-icon-size: 22px;
|
||||
padding: 0 6px;
|
||||
}
|
||||
|
||||
.Pywal {
|
||||
label {
|
||||
font-size: 18px;
|
||||
padding: 6px 16px 6px 10px;
|
||||
font-size: 16px;
|
||||
padding: 4px 16px 4px 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.SwayNC {
|
||||
label {
|
||||
font-size: 16px;
|
||||
padding: 0 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.Tray {
|
||||
margin: 0 4px;
|
||||
|
||||
arrow {
|
||||
all: initial;
|
||||
}
|
||||
}
|
||||
|
||||
.Tray > * {
|
||||
|
|
@ -107,12 +105,11 @@ popover > contents {
|
|||
}
|
||||
|
||||
.Workspaces {
|
||||
background: $mantle;
|
||||
border-radius: 8px;
|
||||
border: 4px solid $crust;
|
||||
// background: $base300;
|
||||
// border-radius: 8px;
|
||||
|
||||
> * {
|
||||
margin: 2px;
|
||||
margin: 0 2px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -132,14 +129,14 @@ popover > contents {
|
|||
margin: 4px;
|
||||
padding: 4px;
|
||||
border-radius: 8px;
|
||||
background: $crust;
|
||||
background: $base200;
|
||||
transition:
|
||||
border 0.5s,
|
||||
background 0.5s;
|
||||
|
||||
&:hover {
|
||||
color: $crust;
|
||||
background: $rosewater;
|
||||
color: $base300;
|
||||
background: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -148,15 +145,15 @@ popover > contents {
|
|||
}
|
||||
|
||||
.today {
|
||||
border: 3px solid $rosewater;
|
||||
border: 3px solid $primary;
|
||||
}
|
||||
|
||||
.other-month {
|
||||
color: $surface0;
|
||||
color: $accent;
|
||||
transition: border 0.5s;
|
||||
|
||||
&:hover {
|
||||
border: 3px solid $rosewater;
|
||||
border: 3px solid $secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -168,15 +165,19 @@ popover > contents {
|
|||
|
||||
window.Bar {
|
||||
background: transparent;
|
||||
padding: 4px;
|
||||
|
||||
> centerbox {
|
||||
background: rgba($color: $base, $alpha: 0.75);
|
||||
border-bottom: 4px solid $crust;
|
||||
border-radius: 8px;
|
||||
|
||||
background-color: $base300;
|
||||
// background: rgba($color: $base300, $alpha: 0.75);
|
||||
// border-bottom: 4px solid $base200;
|
||||
|
||||
> box {
|
||||
margin: 6px;
|
||||
margin: 5px 2px;
|
||||
& > * {
|
||||
margin: 0 4px;
|
||||
margin: 0 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,37 +13,37 @@ import Tray from "./Tray";
|
|||
import WirePlumber from "./WirePlumber";
|
||||
|
||||
export default function Bar(gdkmonitor: Gdk.Monitor) {
|
||||
const { TOP, LEFT, RIGHT } = Astal.WindowAnchor;
|
||||
const { TOP, LEFT, RIGHT } = Astal.WindowAnchor;
|
||||
|
||||
return (
|
||||
<window
|
||||
visible
|
||||
cssClasses={["Bar"]}
|
||||
gdkmonitor={gdkmonitor}
|
||||
exclusivity={Astal.Exclusivity.EXCLUSIVE}
|
||||
anchor={TOP | LEFT | RIGHT}
|
||||
application={App}
|
||||
>
|
||||
<centerbox cssName="centerbox">
|
||||
<box halign={Gtk.Align.START}>
|
||||
<OS />
|
||||
<Workspaces />
|
||||
<Tray />
|
||||
<Hyprland.Client />
|
||||
</box>
|
||||
<box halign={Gtk.Align.CENTER}>
|
||||
<Mpris />
|
||||
</box>
|
||||
<box halign={Gtk.Align.END}>
|
||||
<Pywal />
|
||||
<WirePlumber />
|
||||
<Internet />
|
||||
<Bluetooth />
|
||||
<Memory />
|
||||
<Calendar />
|
||||
<SwayNC />
|
||||
</box>
|
||||
</centerbox>
|
||||
</window>
|
||||
);
|
||||
return (
|
||||
<window
|
||||
visible
|
||||
cssClasses={["Bar"]}
|
||||
gdkmonitor={gdkmonitor}
|
||||
exclusivity={Astal.Exclusivity.EXCLUSIVE}
|
||||
anchor={TOP | LEFT | RIGHT}
|
||||
application={App}
|
||||
>
|
||||
<centerbox cssName="centerbox">
|
||||
<box halign={Gtk.Align.START}>
|
||||
<OS />
|
||||
<Workspaces />
|
||||
<Tray />
|
||||
<Hyprland.Client />
|
||||
</box>
|
||||
<box halign={Gtk.Align.CENTER}>
|
||||
<Mpris />
|
||||
</box>
|
||||
<box halign={Gtk.Align.END}>
|
||||
<Pywal />
|
||||
<WirePlumber />
|
||||
<Bluetooth />
|
||||
<Internet />
|
||||
<Memory />
|
||||
<Calendar />
|
||||
<SwayNC />
|
||||
</box>
|
||||
</centerbox>
|
||||
</window>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,46 +3,47 @@ import { bind, derive } from "astal";
|
|||
import AstalBluetooth from "gi://AstalBluetooth";
|
||||
|
||||
const DeviceList = function ({
|
||||
devices,
|
||||
devices,
|
||||
}: {
|
||||
devices: Binding<AstalBluetooth.Device[]>;
|
||||
devices: Binding<AstalBluetooth.Device[]>;
|
||||
}) {
|
||||
return (
|
||||
<box vertical>
|
||||
{devices.as((devices) => {
|
||||
return devices.map((device) => {
|
||||
const name = bind(device, "name");
|
||||
const connected = bind(device, "connected");
|
||||
return (
|
||||
<box vertical>
|
||||
{devices.as((devices) => {
|
||||
return devices.map((device) => {
|
||||
const name = bind(device, "name");
|
||||
const connected = bind(device, "connected");
|
||||
|
||||
return (
|
||||
<button
|
||||
label={bind(
|
||||
derive(
|
||||
[name, connected],
|
||||
(name, connected) => `${connected ? "" : ""} ${name}`,
|
||||
),
|
||||
)}
|
||||
/>
|
||||
);
|
||||
});
|
||||
})}
|
||||
</box>
|
||||
);
|
||||
return (
|
||||
<button
|
||||
label={bind(
|
||||
derive(
|
||||
[name, connected],
|
||||
(name, connected) => `${connected ? "" : ""} ${name}`,
|
||||
),
|
||||
)}
|
||||
/>
|
||||
);
|
||||
});
|
||||
})}
|
||||
</box>
|
||||
);
|
||||
};
|
||||
|
||||
const Bluetooth = function () {
|
||||
const bluetooth = AstalBluetooth.get_default();
|
||||
const bluetooth = AstalBluetooth.get_default();
|
||||
|
||||
const devices = bind(bluetooth, "devices");
|
||||
const devices = bind(bluetooth, "devices");
|
||||
const count = devices.as((devices) => devices.length);
|
||||
|
||||
return (
|
||||
<menubutton>
|
||||
<label label={""} />
|
||||
<popover>
|
||||
<DeviceList devices={devices} />
|
||||
</popover>
|
||||
</menubutton>
|
||||
);
|
||||
return (
|
||||
<menubutton>
|
||||
<label label={devices.as((devices) => ` ${devices.length}`)} />
|
||||
<popover>
|
||||
<DeviceList devices={devices} />
|
||||
</popover>
|
||||
</menubutton>
|
||||
);
|
||||
};
|
||||
|
||||
export default Bluetooth;
|
||||
|
|
|
|||
|
|
@ -1,44 +1,58 @@
|
|||
import { bind } from "astal";
|
||||
import { Gdk } from "astal/gtk4";
|
||||
import { Gdk, Gtk } from "astal/gtk4";
|
||||
import Hyprland from "gi://AstalHyprland";
|
||||
import Rsvg from "gi://Rsvg?version=2.0";
|
||||
|
||||
const Workspaces = function () {
|
||||
const hyprland = Hyprland.get_default();
|
||||
const hyprland = Hyprland.get_default();
|
||||
|
||||
const workspaces = bind(hyprland, "workspaces").as((workspaces) =>
|
||||
workspaces
|
||||
.filter((workspace) => workspace.id > 0)
|
||||
.sort((a, b) => {
|
||||
if (a.id > b.id) {
|
||||
return 1;
|
||||
} else if (a.id < b.id) {
|
||||
return -1;
|
||||
}
|
||||
return 0;
|
||||
}),
|
||||
);
|
||||
const focusedWorkspace = bind(hyprland, "focused_workspace");
|
||||
const specialWorkspaces = bind(hyprland, "workspaces").as((workspaces) =>
|
||||
workspaces.filter((workspace) => workspace.id < 0),
|
||||
);
|
||||
const workspaces = bind(hyprland, "workspaces").as((workspaces) =>
|
||||
workspaces
|
||||
.filter((workspace) => workspace.id > 0)
|
||||
.sort((a, b) => {
|
||||
if (a.id > b.id) {
|
||||
return 1;
|
||||
} else if (a.id < b.id) {
|
||||
return -1;
|
||||
}
|
||||
return 0;
|
||||
}),
|
||||
);
|
||||
const focusedWorkspace = bind(hyprland, "focused_workspace");
|
||||
const specialWorkspaces = bind(hyprland, "workspaces").as((workspaces) =>
|
||||
workspaces.filter((workspace) => workspace.id < 0),
|
||||
);
|
||||
|
||||
return (
|
||||
<box cssClasses={["Workspaces"]}>
|
||||
{workspaces.as((workspaces) => {
|
||||
return workspaces.map((workspace) => (
|
||||
<button
|
||||
cursor={Gdk.Cursor.new_from_name("pointer", null)}
|
||||
cssClasses={focusedWorkspace.as((focused) => [
|
||||
focused.id === workspace.id ? "active" : "",
|
||||
])}
|
||||
onClicked={() => workspace.focus()}
|
||||
>
|
||||
{workspace?.name}
|
||||
</button>
|
||||
));
|
||||
})}
|
||||
</box>
|
||||
);
|
||||
Gtk.Image.interface_install_property;
|
||||
|
||||
const activeTrianglePath =
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#1fb854" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-triangle-icon lucide-triangle"><path d="M13.73 4a2 2 0 0 0-3.46 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/></svg>';
|
||||
const inactiveTrianglePath =
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" transform="rotate(180 12 12)" fill="none" stroke="#cac9c9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-triangle-icon lucide-triangle"><path d="M13.73 4a2 2 0 0 0-3.46 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/></svg>';
|
||||
|
||||
const activeTrianglePixBuf =
|
||||
Rsvg.Handle.new_from_data(activeTrianglePath).get_pixbuf();
|
||||
const inactiveTrianglePixBuf =
|
||||
Rsvg.Handle.new_from_data(inactiveTrianglePath).get_pixbuf();
|
||||
|
||||
return (
|
||||
<box cssClasses={["Workspaces"]}>
|
||||
{workspaces.as((workspaces) => {
|
||||
return workspaces.map((workspace) => (
|
||||
<button
|
||||
cursor={Gdk.Cursor.new_from_name("pointer", null)}
|
||||
onClicked={() => workspace.focus()}
|
||||
>
|
||||
{focusedWorkspace.as((focused) =>
|
||||
focused.id === workspace.id
|
||||
? Gtk.Image.new_from_pixbuf(activeTrianglePixBuf)
|
||||
: Gtk.Image.new_from_pixbuf(inactiveTrianglePixBuf),
|
||||
)}
|
||||
</button>
|
||||
));
|
||||
})}
|
||||
</box>
|
||||
);
|
||||
};
|
||||
|
||||
export default Workspaces;
|
||||
|
|
|
|||
|
|
@ -1,41 +1,30 @@
|
|||
import { bind } from "astal";
|
||||
import { Gdk } from "astal/gtk4";
|
||||
import { Gdk, Gtk } from "astal/gtk4";
|
||||
import AstalTray from "gi://AstalTray";
|
||||
|
||||
const TrayItemPopover = function ({ item }: { item: AstalTray.TrayItem }) {
|
||||
const actionGroup = bind(item, "actionGroup");
|
||||
const TrayItem = function ({ item }: { item: AstalTray.TrayItem }) {
|
||||
const popover = Gtk.PopoverMenu.new_from_model(item.menu_model);
|
||||
popover.insert_action_group("dbusmenu", item.action_group);
|
||||
|
||||
return (
|
||||
<popover>
|
||||
<box>{actionGroup.get()}</box>
|
||||
</popover>
|
||||
);
|
||||
return (
|
||||
<menubutton
|
||||
cursor={Gdk.Cursor.new_from_name("pointer", null)}
|
||||
icon_name={item.icon_name}
|
||||
popover={popover}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const Tray = function () {
|
||||
const tray = AstalTray.get_default();
|
||||
const tray = AstalTray.get_default();
|
||||
|
||||
const trayItems = bind(tray, "items");
|
||||
|
||||
return (
|
||||
<box cssClasses={["Tray"]}>
|
||||
{trayItems.as((items) =>
|
||||
items.map((item) => {
|
||||
return (
|
||||
<menubutton cursor={Gdk.Cursor.new_from_name("pointer", null)}>
|
||||
<image
|
||||
tooltip_text={bind(item, "tooltip_markup")}
|
||||
file={bind(item, "icon_name").as(
|
||||
(iconName) => iconName || "NONE",
|
||||
)}
|
||||
/>
|
||||
<TrayItemPopover item={item} />
|
||||
</menubutton>
|
||||
);
|
||||
}),
|
||||
)}
|
||||
</box>
|
||||
);
|
||||
return (
|
||||
<box cssClasses={["Tray"]}>
|
||||
{bind(tray, "items").as((items) =>
|
||||
items.map((item) => TrayItem({ item })),
|
||||
)}
|
||||
</box>
|
||||
);
|
||||
};
|
||||
|
||||
export default Tray;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue