From fa770125c57fc1c546ee54304e65a1a12a0fddc8 Mon Sep 17 00:00:00 2001 From: retrozinndev Date: Fri, 25 Apr 2025 22:25:16 -0300 Subject: [PATCH] :sparkles: ags(control-center/bluetooth): add more device management options --- ags/style/_bar.scss | 9 +++ ags/style/_mixins.scss | 12 ++++ ags/style/_wal.scss | 40 +++++------ ags/widget/control-center/pages/Bluetooth.ts | 72 ++++++++++++++++---- ags/widget/control-center/pages/Page.ts | 60 ++++++++-------- 5 files changed, 132 insertions(+), 61 deletions(-) diff --git a/ags/style/_bar.scss b/ags/style/_bar.scss index 6b7ece1..27f8cad 100644 --- a/ags/style/_bar.scss +++ b/ags/style/_bar.scss @@ -2,6 +2,7 @@ @use "./mixins"; @use "./colors"; @use "./wal"; +@use "./functions"; .bar-container { @include mixins.reset-props; @@ -62,6 +63,10 @@ background: colors.$bg-tertiary; margin: 3px 0; + &:not(.focus) { + @include mixins.hover-shadow2; + } + &.focus { background: colors.$fg-primary; min-width: 31px; @@ -93,6 +98,10 @@ &.special-workspaces { & button { background: wal.$color4; + + &:hover { + background: functions.toRGB(color.adjust(wal.$color4, $lightness: -6%)); + } } } } diff --git a/ags/style/_mixins.scss b/ags/style/_mixins.scss index 1944f5c..0f4a2c3 100644 --- a/ags/style/_mixins.scss +++ b/ags/style/_mixins.scss @@ -19,3 +19,15 @@ box-shadow: inset 0 0 0 500px rgba(colors.$fg-primary, .1); } } + +@mixin hover-shadow2 { + &:hover { + box-shadow: inset 0 0 0 500px rgba(colors.$fg-primary, .2); + } +} + +@mixin hover-shadow3 { + &:hover { + box-shadow: inset 0 0 0 500px rgba(colors.$fg-primary, .3); + } +} diff --git a/ags/style/_wal.scss b/ags/style/_wal.scss index 131d836..512da7f 100644 --- a/ags/style/_wal.scss +++ b/ags/style/_wal.scss @@ -1,26 +1,26 @@ // SCSS Variables // Generated by 'wal' -$wallpaper: "/home/joaov/wallpapers/Gumi Street Bike.jpg"; +$wallpaper: "/home/joaov/wallpapers/Frieren At The Funeral.jpg"; // Special -$background: #0d101f; -$foreground: #c2c3c7; -$cursor: #c2c3c7; +$background: #181515; +$foreground: #c5c4c4; +$cursor: #c5c4c4; // Colors -$color0: #0d101f; -$color1: #586C8C; -$color2: #649D93; -$color3: #60AFB7; -$color4: #96ABA0; -$color5: #A3CCA4; -$color6: #CFD8B4; -$color7: #90929b; -$color8: #5c6071; -$color9: #698abf; -$color10: #79c5b9; -$color11: #85c4ca; -$color12: #9bd4b4; -$color13: #b3deb3; -$color14: #dde4c2; -$color15: #c2c3c7; +$color0: #181515; +$color1: #CA778C; +$color2: #AA8C81; +$color3: #AA8CAA; +$color4: #DCA8AF; +$color5: #B4ADC5; +$color6: #D2B5C5; +$color7: #9b9090; +$color8: #715c5c; +$color9: #d49ba9; +$color10: #cfa08f; +$color11: #d195d1; +$color12: #e3bdc3; +$color13: #c0b4df; +$color14: #e4bfd3; +$color15: #c5c4c4; diff --git a/ags/widget/control-center/pages/Bluetooth.ts b/ags/widget/control-center/pages/Bluetooth.ts index a411771..ab9ac4e 100644 --- a/ags/widget/control-center/pages/Bluetooth.ts +++ b/ags/widget/control-center/pages/Bluetooth.ts @@ -1,4 +1,4 @@ -import { bind } from "astal"; +import { bind, Variable } from "astal"; import { Gtk, Widget } from "astal/gtk3"; import AstalBluetooth from "gi://AstalBluetooth"; import { Page, PageButton } from "./Page"; @@ -97,6 +97,7 @@ export const BluetoothPage: (() => Page) = () => new Page({ Separator({ size: .2, orientation: Gtk.Orientation.VERTICAL, + cssColor: "gray", alpha: .2 } as SeparatorProps), new Widget.Button({ @@ -135,18 +136,63 @@ function DeviceWidget(dev: AstalBluetooth.Device): Gtk.Widget { endWidget: new Widget.Box({ visible: bind(dev, "batteryPercentage").as((bat: number) => bat <= -1 ? false : true), - children: [ - new Widget.Label({ - halign: Gtk.Align.END, - label: bind(dev, "batteryPercentage").as((bat: number) => - `${Math.floor(bat * 100)}%`) - } as Widget.LabelProps), - new Widget.Icon({ - icon: "battery-symbolic", - css: "font-size: 18px; margin-left: 6px;" - } as Widget.IconProps) - ] - } as Widget.BoxProps) + children: Variable.derive([ + bind(dev, "connecting"), + bind(dev, "connected") + ], (connecting, connected) => { + if(connected) return [ + new Widget.Label({ + halign: Gtk.Align.END, + label: bind(dev, "batteryPercentage").as((bat: number) => + `${Math.floor(bat * 100)}%`) + } as Widget.LabelProps), + new Widget.Icon({ + icon: "battery-symbolic", + css: "font-size: 18px; margin-left: 6px;" + } as Widget.IconProps) + ]; + + if(connecting) { + const spinner = new Gtk.Spinner({ + visible: true + } as Gtk.Spinner.ConstructorProps); + spinner.start(); + + return spinner; + } + + return []; + })() + } as Widget.BoxProps), + extraButtons: Variable.derive([ + bind(dev, "connected"), + bind(dev, "paired"), + bind(dev, "trusted") + ], (connected, paired, trusted) => [ + new Widget.Button({ + className: "nf", + visible: paired && connected, + label: connected ? "󰅖" : "", + tooltipText: tr("disconnect"), + onClick: () => dev.disconnect_device() + } as Widget.ButtonProps), + new Widget.Button({ + visible: !connected && paired, + className: "nf", + label: "󰢃", + tooltipText: tr("control_center.pages.bluetooth.unpair_device"), + onClick: () => AstalBluetooth.get_default().adapter?.remove_device(dev) + } as Widget.ButtonProps), + new Widget.Button({ + className: "nf", + visible: paired, + label: trusted ? "󰫜" : "󰫚", + tooltipText: trusted ? + tr("control_center.pages.bluetooth.untrust_device") + : tr("control_center.pages.bluetooth.trust_device"), + onClick: () => trusted ? dev.set_trusted(false) : dev.set_trusted(true) + } as Widget.ButtonProps) + ])() }); } diff --git a/ags/widget/control-center/pages/Page.ts b/ags/widget/control-center/pages/Page.ts index 337c3bf..fc0694b 100644 --- a/ags/widget/control-center/pages/Page.ts +++ b/ags/widget/control-center/pages/Page.ts @@ -95,13 +95,13 @@ export function PageButton(props: { className?: string | Binding; icon?: string | Binding; title: string | Binding; - endWidget?: Gtk.Widget; - extraButtons?: Array; + endWidget?: Gtk.Widget | Binding; + extraButtons?: Array | Binding>; onClick?: (self: Widget.Button) => void; }): Gtk.Widget { return new Widget.Box({ - setup: (self) => { - self.add(new Widget.Button({ + children: [ + new Widget.Button({ onClick: props.onClick, className: props.className, hexpand: true, @@ -109,32 +109,36 @@ export function PageButton(props: { className: "page-button", orientation: Gtk.Orientation.HORIZONTAL, expand: true, - setup: (box) => { - box.set_children([ - new Widget.Icon({ - className: "icon", - icon: props.icon, - visible: props.icon, - css: "font-size: 20px; margin-right: 6px;" - } as Widget.IconProps), - new Widget.Label({ - className: "title", - halign: Gtk.Align.START, - hexpand: true, - truncate: true, - label: props.title - } as Widget.LabelProps) - ]); - - props.endWidget && box.add(props.endWidget); - } + children: [ + new Widget.Icon({ + className: "icon", + icon: props.icon, + visible: props.icon, + css: "font-size: 20px; margin-right: 6px;" + } as Widget.IconProps), + new Widget.Label({ + className: "title", + halign: Gtk.Align.START, + hexpand: true, + truncate: true, + label: props.title + } as Widget.LabelProps), + new Widget.Box({ + visible: (props.endWidget instanceof Binding) ? + props.endWidget.as(Boolean) + : props.endWidget, + child: props.endWidget + } as Widget.BoxProps) + ] } as Widget.BoxProps) - } as Widget.ButtonProps)); - - props.extraButtons && self.add(new Widget.Box({ + } as Widget.ButtonProps), + new Widget.Box({ className: "button-row extra-buttons", + visible: (props.extraButtons instanceof Binding) ? + props.extraButtons.as(extra => extra.length > 0) + : (props.extraButtons ? props.extraButtons.length > 0 : false), children: props.extraButtons - } as Widget.BoxProps)); - } + } as Widget.BoxProps) + ] } as Widget.BoxProps); }