💥 fix(control-center/page, control-center/pages): scope errors
i basically restructured the page widget lol
This commit is contained in:
retrozinndev
@@ -4,60 +4,70 @@ import { tr } from "../../../i18n/intl";
|
||||
import { Windows } from "../../../windows";
|
||||
import { Notifications } from "../../../scripts/notifications";
|
||||
import { execApp } from "../../../scripts/apps";
|
||||
import { createBinding, createComputed, For, With } from "ags";
|
||||
|
||||
import AstalNotifd from "gi://AstalNotifd";
|
||||
import AstalBluetooth from "gi://AstalBluetooth";
|
||||
import { variableToBoolean } from "../../../scripts/utils";
|
||||
import { createBinding, createComputed, For, With } from "ags";
|
||||
|
||||
|
||||
export const BluetoothPage = () => <Page
|
||||
id={"bluetooth"} title={tr("control_center.pages.bluetooth.title")}
|
||||
description={tr("control_center.pages.bluetooth.description")}
|
||||
class={"bluetooth"} headerButtons={[
|
||||
<Gtk.Button class={"discover"} iconName={createBinding(
|
||||
AstalBluetooth.get_default().adapter, "discovering"
|
||||
).as(discovering => discovering ?
|
||||
"arrow-circular-top-right-symbolic"
|
||||
: "media-playback-stop-symbolic")} tooltipText={
|
||||
createBinding(AstalBluetooth.get_default().adapter, "discovering").as((discovering) =>
|
||||
!discovering ?
|
||||
tr("control_center.pages.bluetooth.start_discovering")
|
||||
: tr("control_center.pages.bluetooth.stop_discovering"))}
|
||||
onClicked={() => {
|
||||
if(AstalBluetooth.get_default().adapter.discovering) {
|
||||
AstalBluetooth.get_default().adapter.stop_discovery();
|
||||
return;
|
||||
}
|
||||
export const BluetoothPage = new Page({
|
||||
id: "bluetooth",
|
||||
title: tr("control_center.pages.bluetooth.title"),
|
||||
spacing: 6,
|
||||
description: tr("control_center.pages.bluetooth.description"),
|
||||
headerButtons: [{
|
||||
icon: createBinding(AstalBluetooth.get_default().adapter, "discovering")
|
||||
.as(discovering => !discovering ?
|
||||
"arrow-circular-top-right-symbolic"
|
||||
: "media-playback-stop-symbolic"
|
||||
),
|
||||
tooltipText: createBinding(AstalBluetooth.get_default().adapter, "discovering")
|
||||
.as((discovering) => !discovering ?
|
||||
tr("control_center.pages.bluetooth.start_discovering")
|
||||
: tr("control_center.pages.bluetooth.stop_discovering")),
|
||||
actionClicked: () => {
|
||||
if(AstalBluetooth.get_default().adapter.discovering) {
|
||||
AstalBluetooth.get_default().adapter.stop_discovery();
|
||||
return;
|
||||
}
|
||||
|
||||
AstalBluetooth.get_default().adapter.start_discovery();
|
||||
}}
|
||||
/>
|
||||
]}
|
||||
actionClose={() => AstalBluetooth.get_default().adapter.discovering &&
|
||||
AstalBluetooth.get_default().adapter.stop_discovery()}
|
||||
bottomButtons={[{
|
||||
AstalBluetooth.get_default().adapter.start_discovery();
|
||||
}
|
||||
}],
|
||||
actionClosed: () => AstalBluetooth.get_default().adapter.discovering &&
|
||||
AstalBluetooth.get_default().adapter.stop_discovery(),
|
||||
bottomButtons: [{
|
||||
title: tr("control_center.pages.more_settings"),
|
||||
onClick: () => {
|
||||
actionClicked: () => {
|
||||
Windows.getDefault().close("control-center");
|
||||
execApp("overskride", "[float; animation slide right]");
|
||||
}
|
||||
}]} spacing={2}>
|
||||
<Gtk.Box class={"adapters"} visible={variableToBoolean(createBinding(
|
||||
AstalBluetooth.get_default(), "adapters"))} spacing={2}>
|
||||
}],
|
||||
content: () => [
|
||||
<Gtk.Box class={"adapters"} visible={createBinding(AstalBluetooth.get_default(), "adapters")
|
||||
.as(adptrs => adptrs.length > 1)
|
||||
} spacing={2}>
|
||||
|
||||
<Gtk.Label class={"sub-header"} label={tr("control_center.pages.bluetooth.adapters")} />
|
||||
<For each={createBinding(AstalBluetooth.get_default(), "adapters")}>
|
||||
{(adapter: AstalBluetooth.Adapter) =>
|
||||
<PageButton title={adapter.alias ?? "Adapter"}
|
||||
icon={"bluetooth-active-symbolic"} />
|
||||
<With value={createBinding(AstalBluetooth.get_default(), "adapters").as(adpts =>
|
||||
adpts.length > 1)}>
|
||||
|
||||
{(hasMoreAdapters: boolean) => hasMoreAdapters &&
|
||||
<Gtk.Box orientation={Gtk.Orientation.VERTICAL} spacing={2}>
|
||||
<For each={createBinding(AstalBluetooth.get_default(), "adapters")}>
|
||||
{(adapter: AstalBluetooth.Adapter) =>
|
||||
<PageButton title={adapter.alias ?? "Adapter"}
|
||||
icon={"bluetooth-active-symbolic"} />
|
||||
}
|
||||
</For>
|
||||
</Gtk.Box>
|
||||
}
|
||||
</For>
|
||||
</Gtk.Box>
|
||||
</With>
|
||||
</Gtk.Box>,
|
||||
<Gtk.Box class={"connections"} orientation={Gtk.Orientation.VERTICAL} hexpand={true}
|
||||
spacing={2}>
|
||||
|
||||
<Gtk.Box class={"paired"} orientation={Gtk.Orientation.VERTICAL} spacing={2}
|
||||
<Gtk.Box class={"paired"} orientation={Gtk.Orientation.VERTICAL} spacing={4}
|
||||
visible={createBinding(AstalBluetooth.get_default(), "devices").as(devs =>
|
||||
devs.filter(dev => dev.paired || dev.connected || dev.trusted).length > 0)}>
|
||||
|
||||
@@ -68,7 +78,7 @@ export const BluetoothPage = () => <Page
|
||||
{(dev: AstalBluetooth.Device) => <DeviceWidget device={dev} />}
|
||||
</For>
|
||||
</Gtk.Box>
|
||||
<Gtk.Box class={"discovered"} orientation={Gtk.Orientation.VERTICAL} spacing={2}
|
||||
<Gtk.Box class={"discovered"} orientation={Gtk.Orientation.VERTICAL} spacing={4}
|
||||
visible={createBinding(AstalBluetooth.get_default(), "devices").as(devs =>
|
||||
devs.filter(dev => !dev.connected && !dev.paired && !dev.trusted).length > 0)}>
|
||||
|
||||
@@ -80,7 +90,8 @@ export const BluetoothPage = () => <Page
|
||||
</For>
|
||||
</Gtk.Box>
|
||||
</Gtk.Box>
|
||||
</Page> as Page;
|
||||
]
|
||||
});
|
||||
|
||||
function DeviceWidget({ device }: { device: AstalBluetooth.Device }): Gtk.Widget {
|
||||
return <PageButton class={createBinding(device, "connected").as(conn =>
|
||||
@@ -93,7 +104,7 @@ function DeviceWidget({ device }: { device: AstalBluetooth.Device }): Gtk.Widget
|
||||
tooltipText={
|
||||
createBinding(device, "connected").as(connected =>
|
||||
!connected ? tr("connect") : "")
|
||||
} onClick={() => {
|
||||
} actionClicked={() => {
|
||||
if(device.connected) return;
|
||||
|
||||
let skipConnection: boolean = false;
|
||||
@@ -135,8 +146,8 @@ function DeviceWidget({ device }: { device: AstalBluetooth.Device }): Gtk.Widget
|
||||
createBinding(device, "connected"),
|
||||
createBinding(device, "trusted")
|
||||
])}>
|
||||
{([connected, trusted]: [boolean, boolean]) => trusted &&
|
||||
<Gtk.Box class={"button-row"}>
|
||||
{([connected, trusted]: [boolean, boolean]) =>
|
||||
<Gtk.Box visible={connected || trusted}>
|
||||
{<Gtk.Button iconName={connected ?
|
||||
"list-remove-symbolic"
|
||||
: "user-trash-symbolic"} tooltipText={tr(connected ?
|
||||
@@ -157,7 +168,8 @@ function DeviceWidget({ device }: { device: AstalBluetooth.Device }): Gtk.Widget
|
||||
`control_center.pages.bluetooth.${trusted ? "un" : ""}trust_device`
|
||||
)} onClicked={() => device.set_trusted(!trusted)}
|
||||
/>
|
||||
</Gtk.Box>}
|
||||
</Gtk.Box>
|
||||
}
|
||||
</With>}
|
||||
/> as Page;
|
||||
/> as Gtk.Widget;
|
||||
}
|
||||
|
||||
@@ -3,27 +3,32 @@ import { Wireplumber } from "../../../scripts/volume";
|
||||
import { Gtk } from "ags/gtk4";
|
||||
import { tr } from "../../../i18n/intl";
|
||||
import { createBinding, For } from "ags";
|
||||
import AstalWp from "gi://AstalWp?version=0.1";
|
||||
import { lookupIcon } from "../../../scripts/apps";
|
||||
|
||||
import AstalWp from "gi://AstalWp?version=0.1";
|
||||
|
||||
export const PageMicrophone = () =>
|
||||
<Page id={"microphone"} title={tr("control_center.pages.microphone.title")}
|
||||
description={tr("control_center.pages.microphone.description")}>
|
||||
|
||||
<Gtk.Label class={"sub-header"} label={tr("devices")} xalign={0} />
|
||||
<For each={createBinding(Wireplumber.getWireplumber().get_audio()!, "microphones")}>
|
||||
{(source: AstalWp.Endpoint) => <PageButton class={
|
||||
createBinding(source, "isDefault").as(isDefault => isDefault ? "default" : "")
|
||||
} icon={createBinding(source, "icon").as(ico => lookupIcon(ico) ?
|
||||
ico : "audio-input-microphone-symbolic")} title={
|
||||
createBinding(source, "description").as(desc => desc ?? "Microphone")
|
||||
} onClick={() => !source.isDefault && source.set_is_default(true)}
|
||||
endWidget={
|
||||
<Gtk.Image iconName={"object-select-symbolic"} visible={
|
||||
createBinding(source, "isDefault")} css={"font-size: 18px;"}
|
||||
/>
|
||||
}
|
||||
/>}
|
||||
</For>
|
||||
</Page> as Page;
|
||||
export const PageMicrophone = new Page({
|
||||
id: "microphone",
|
||||
title: tr("control_center.pages.microphone.title"),
|
||||
description: tr("control_center.pages.microphone.description"),
|
||||
content: () => [
|
||||
<Gtk.Label class={"sub-header"} label={tr("devices")} xalign={0} />,
|
||||
<Gtk.Box orientation={Gtk.Orientation.VERTICAL} spacing={4}>
|
||||
<For each={createBinding(Wireplumber.getWireplumber().get_audio()!, "microphones")}>
|
||||
{(source: AstalWp.Endpoint) => <PageButton class={
|
||||
createBinding(source, "isDefault").as(isDefault => isDefault ? "default" : "")
|
||||
} icon={createBinding(source, "icon").as(ico => lookupIcon(ico) ?
|
||||
ico : "audio-input-microphone-symbolic")} title={
|
||||
createBinding(source, "description").as(desc => desc ?? "Microphone")
|
||||
} actionClicked={() => !source.isDefault && source.set_is_default(true)}
|
||||
endWidget={
|
||||
<Gtk.Image iconName={"object-select-symbolic"} visible={
|
||||
createBinding(source, "isDefault")} css={"font-size: 18px;"}
|
||||
/>
|
||||
}
|
||||
/>}
|
||||
</For>
|
||||
</Gtk.Box>
|
||||
]
|
||||
});
|
||||
|
||||
@@ -6,32 +6,34 @@ import { execApp } from "../../../scripts/apps";
|
||||
import { Notifications } from "../../../scripts/notifications";
|
||||
import { AskPopup, AskPopupProps } from "../../AskPopup";
|
||||
import { encoder, variableToBoolean } from "../../../scripts/utils";
|
||||
import { createBinding, For, With } from "ags";
|
||||
|
||||
import GLib from "gi://GLib?version=2.0";
|
||||
import NM from "gi://NM";
|
||||
import AstalNetwork from "gi://AstalNetwork";
|
||||
import { createBinding, For, With } from "ags";
|
||||
|
||||
|
||||
export const PageNetwork = () =>
|
||||
<Page id={"network"} title={tr("control_center.pages.network.title")}
|
||||
class={"network"} headerButtons={[
|
||||
<Gtk.Button class={"reload"} iconName={"arrow-circular-top-right-symbolic"}
|
||||
visible={createBinding(AstalNetwork.get_default(), "primary").as(primary =>
|
||||
primary === AstalNetwork.Primary.WIFI)}
|
||||
tooltipText={"Re-scan networks"} onClicked={() =>
|
||||
AstalNetwork.get_default().wifi.scan()}
|
||||
/>
|
||||
]} bottomButtons={[{
|
||||
title: tr("control_center.pages.more_settings"),
|
||||
onClick: () => {
|
||||
Windows.getDefault().close("control-center");
|
||||
execApp("nm-connection-editor", "[animationstyle gnomed]");
|
||||
}
|
||||
}]}>
|
||||
|
||||
<Gtk.Box class={"devices"} hexpand={true} orientation={Gtk.Orientation.VERTICAL}
|
||||
visible={variableToBoolean(createBinding(AstalNetwork.get_default().client, "devices"))}>
|
||||
export const PageNetwork = new Page({
|
||||
id: "network",
|
||||
title: tr("control_center.pages.network.title"),
|
||||
headerButtons: createBinding(AstalNetwork.get_default(), "primary").as(primary =>
|
||||
primary === AstalNetwork.Primary.WIFI ? [{
|
||||
icon: "arrow-circular-top-right-symbolic",
|
||||
tooltipText: "Re-scan networks",
|
||||
actionClicked: () => AstalNetwork.get_default().wifi.scan()
|
||||
}] : []
|
||||
),
|
||||
bottomButtons: [{
|
||||
title: tr("control_center.pages.more_settings"),
|
||||
actionClicked: () => {
|
||||
Windows.getDefault().close("control-center");
|
||||
execApp("nm-connection-editor", "[animationstyle gnomed]");
|
||||
}
|
||||
}],
|
||||
content: () => [
|
||||
<Gtk.Box class={"devices"} hexpand orientation={Gtk.Orientation.VERTICAL}
|
||||
visible={variableToBoolean(createBinding(AstalNetwork.get_default().client, "devices"))}
|
||||
spacing={4}>
|
||||
|
||||
<Gtk.Label label={tr("devices")} xalign={0} class={"sub-header"} />
|
||||
<For each={createBinding(AstalNetwork.get_default().client, "devices").as(devs =>
|
||||
@@ -52,8 +54,7 @@ export const PageNetwork = () =>
|
||||
]}
|
||||
/>}
|
||||
</For>
|
||||
</Gtk.Box>
|
||||
|
||||
</Gtk.Box>,
|
||||
<With value={createBinding(AstalNetwork.get_default(), "primary").as(primary =>
|
||||
primary === AstalNetwork.Primary.WIFI)}>
|
||||
|
||||
@@ -95,7 +96,7 @@ export const PageNetwork = () =>
|
||||
})
|
||||
}
|
||||
}}/>
|
||||
]} onClick={() => {
|
||||
]} actionClicked={() => {
|
||||
const uuid = NM.utils_uuid_generate();
|
||||
const ssidBytes = GLib.Bytes.new(encoder.encode(ap.ssid));
|
||||
|
||||
@@ -129,7 +130,8 @@ export const PageNetwork = () =>
|
||||
</For>
|
||||
</Gtk.Box>}
|
||||
</With>
|
||||
</Page> as Page;
|
||||
]
|
||||
});
|
||||
|
||||
function activateWirelessConnection(connection: NM.RemoteConnection, ssid: string): void {
|
||||
AstalNetwork.get_default().get_client().activate_connection_async(
|
||||
|
||||
@@ -5,14 +5,14 @@ import { Astal, Gtk } from "ags/gtk4";
|
||||
import { addSliderMarksFromMinMax } from "../../../scripts/utils";
|
||||
import { createBinding } from "ags";
|
||||
|
||||
export const PageNightLight = () =>
|
||||
<Page id={"night-light"} title={tr("control_center.pages.night_light.title")}
|
||||
description={tr("control_center.pages.night_light.description")}
|
||||
class={"night-light"}>
|
||||
|
||||
export const PageNightLight = new Page({
|
||||
id: "night-light",
|
||||
title: tr("control_center.pages.night_light.title"),
|
||||
description: tr("control_center.pages.night_light.description"),
|
||||
content: () => [
|
||||
<Gtk.Label class={"sub-header"} label={tr(
|
||||
"control_center.pages.night_light.temperature"
|
||||
)} xalign={0} />
|
||||
)} xalign={0} />,
|
||||
<Astal.Slider class={"temperature"} $={(self) => {
|
||||
self.value = NightLight.getDefault().temperature;
|
||||
addSliderMarksFromMinMax(self, 5, "{}K");
|
||||
@@ -24,10 +24,10 @@ export const PageNightLight = () =>
|
||||
if(type != undefined && type !== null)
|
||||
NightLight.getDefault().temperature = Math.floor(value)
|
||||
}}
|
||||
/>
|
||||
/>,
|
||||
<Gtk.Label class={"sub-header"} label={tr(
|
||||
"control_center.pages.night_light.gamma"
|
||||
)} xalign={0} />
|
||||
)} xalign={0} />,
|
||||
<Astal.Slider class={"gamma"} $={(self) => {
|
||||
self.value = NightLight.getDefault().gamma;
|
||||
addSliderMarksFromMinMax(self, 5, "{}%");
|
||||
@@ -39,4 +39,5 @@ export const PageNightLight = () =>
|
||||
NightLight.getDefault().gamma = Math.floor(value)
|
||||
}}
|
||||
/>
|
||||
</Page> as Page;
|
||||
]
|
||||
});
|
||||
|
||||
@@ -1,24 +1,21 @@
|
||||
import { register } from "ags/gobject";
|
||||
import { Gtk } from "ags/gtk4";
|
||||
import { Separator } from "../../Separator";
|
||||
import { Accessor, For } from "ags";
|
||||
import { transform, transformWidget, variableToBoolean, WidgetNodeType } from "../../../scripts/utils";
|
||||
import { Accessor, createRoot } from "ags";
|
||||
import { transformWidget, variableToBoolean, WidgetNodeType } from "../../../scripts/utils";
|
||||
|
||||
import Pango from "gi://Pango?version=1.0";
|
||||
|
||||
|
||||
export type PageProps = {
|
||||
$?: () => void;
|
||||
actionClose?: () => void;
|
||||
id: string;
|
||||
class?: string | Accessor<string>;
|
||||
title: string | Accessor<string>;
|
||||
description?: string | Accessor<string>;
|
||||
headerButtons?: Array<JSX.Element> | Accessor<Array<JSX.Element>>;
|
||||
title: string;
|
||||
description?: string;
|
||||
headerButtons?: Array<HeaderButton> | Accessor<Array<HeaderButton>>;
|
||||
bottomButtons?: Array<BottomButton> | Accessor<Array<BottomButton>>;
|
||||
orientation?: Gtk.Orientation | Accessor<Gtk.Orientation>;
|
||||
spacing?: number;
|
||||
children?: WidgetNodeType;
|
||||
spacing?: number | Accessor<number>;
|
||||
content: () => WidgetNodeType;
|
||||
actionClosed?: () => void;
|
||||
};
|
||||
|
||||
export type BottomButton = {
|
||||
@@ -26,142 +23,134 @@ export type BottomButton = {
|
||||
description?: string | Accessor<string>;
|
||||
tooltipText?: string | Accessor<string>;
|
||||
tooltipMarkup?: string | Accessor<string>;
|
||||
onClick?: () => void;
|
||||
actionClicked?: () => void;
|
||||
};
|
||||
|
||||
export { Page };
|
||||
export type HeaderButton = {
|
||||
label?: string|Accessor<string>;
|
||||
icon: string|Accessor<string>;
|
||||
tooltipText?: string | Accessor<string>;
|
||||
tooltipMarkup?: string | Accessor<string>;
|
||||
actionClicked?: () => void;
|
||||
};
|
||||
|
||||
@register({ GTypeName: "Page" })
|
||||
class Page extends Gtk.Box {
|
||||
#id: string | number = "";
|
||||
readonly bottomButtons?: Array<BottomButton> = [];
|
||||
|
||||
#subs: Array<() => void> = [];
|
||||
#title: string | Accessor<string> = "";
|
||||
#description?: string | Accessor<string>;
|
||||
export class Page {
|
||||
#title: string;
|
||||
#description?: string;
|
||||
#orientation: Gtk.Orientation|Accessor<
|
||||
Gtk.Orientation> = Gtk.Orientation.VERTICAL;
|
||||
#spacing: number|Accessor<number> = 4;
|
||||
#headerButtons?: Array<HeaderButton>|Accessor<Array<HeaderButton>>;
|
||||
#bottomButtons?: Array<BottomButton>|Accessor<Array<BottomButton>>;
|
||||
readonly #id?: string;
|
||||
readonly #create: () => WidgetNodeType;
|
||||
|
||||
public get id() { return this.#id; }
|
||||
public get title() { return this.#title; }
|
||||
public get description() { return this.#description; }
|
||||
public get id() { return this.#id; }
|
||||
public actionClose?: () => void = () => {};
|
||||
public get headerButtons() { return this.#headerButtons; }
|
||||
public get bottomButtons() { return this.#bottomButtons; }
|
||||
public readonly actionClosed?: () => void;
|
||||
|
||||
constructor(props: PageProps) {
|
||||
super();
|
||||
|
||||
this.set_hexpand(true);
|
||||
this.set_orientation(Gtk.Orientation.VERTICAL);
|
||||
|
||||
if(props.class instanceof Accessor) {
|
||||
this.#subs.push(props.class.subscribe(() => {
|
||||
const clss = (props.class as Accessor<string>).get();
|
||||
|
||||
this.cssClasses = ["page", ...clss.split(' ').filter(s => s !== "")];
|
||||
}));
|
||||
} else {
|
||||
if(props.class)
|
||||
this.cssClasses = ["page",
|
||||
...(props.class as string).split(' ').filter(s => s)];
|
||||
else
|
||||
this.add_css_class("page");
|
||||
}
|
||||
|
||||
this.#id = props.id;
|
||||
this.#title = props.title;
|
||||
this.#description = props.description;
|
||||
this.actionClose = props.actionClose;
|
||||
this.#create = props.content;
|
||||
this.actionClosed = props.actionClosed;
|
||||
|
||||
this.prepend(<Gtk.Box class={"header"} orientation={Gtk.Orientation.VERTICAL}
|
||||
hexpand={true}>
|
||||
|
||||
<Gtk.Box class={"top"}>
|
||||
<Gtk.Label hexpand={true} class={"title"} ellipsize={Pango.EllipsizeMode.END}
|
||||
visible={variableToBoolean(props.title)} label={props.title}
|
||||
halign={Gtk.Align.START} />
|
||||
if(props.orientation != null)
|
||||
this.#orientation = props.orientation;
|
||||
|
||||
if(props.spacing != null)
|
||||
this.#spacing = props.spacing;
|
||||
|
||||
if(props.headerButtons != null)
|
||||
this.#headerButtons = props.headerButtons;
|
||||
}
|
||||
|
||||
public create(): Gtk.Box {
|
||||
return createRoot((dispose) =>
|
||||
<Gtk.Box hexpand class={`page container ${this.#id ?? ""}`} cssName={"page"} name={"page"}
|
||||
orientation={Gtk.Orientation.VERTICAL} onUnmap={() => dispose()}>
|
||||
|
||||
<Gtk.Box class={"header"} orientation={Gtk.Orientation.VERTICAL}>
|
||||
<Gtk.Box class={"top"} hexpand>
|
||||
<Gtk.Box orientation={Gtk.Orientation.VERTICAL} hexpand>
|
||||
<Gtk.Label class={"title"} label={this.#title} xalign={0}
|
||||
ellipsize={Pango.EllipsizeMode.END} />
|
||||
|
||||
<Gtk.Label class={"description"} label={this.#description}
|
||||
xalign={0} ellipsize={Pango.EllipsizeMode.END}
|
||||
visible={variableToBoolean(this.#description)} />
|
||||
</Gtk.Box>
|
||||
<Gtk.Box class={"button-row"} visible={variableToBoolean(this.#headerButtons)}
|
||||
hexpand={false}>
|
||||
|
||||
{this.#headerButtons && transformWidget(this.#headerButtons, (button) =>
|
||||
<Gtk.Button class={"header-button"} label={button.label}
|
||||
iconName={button.icon} onClicked={() => button.actionClicked?.()}
|
||||
tooltipText={button.tooltipText} tooltipMarkup={button.tooltipMarkup}
|
||||
/>
|
||||
)}
|
||||
</Gtk.Box>
|
||||
</Gtk.Box>
|
||||
</Gtk.Box>
|
||||
<Gtk.Box class={"content"} hexpand={false} orientation={this.#orientation}
|
||||
spacing={this.#spacing}>
|
||||
|
||||
{this.#create()}
|
||||
</Gtk.Box>
|
||||
<Separator alpha={.2} spacing={6} orientation={Gtk.Orientation.VERTICAL}
|
||||
visible={variableToBoolean(this.#bottomButtons)}
|
||||
/>
|
||||
<Gtk.Box class={"bottom-buttons"} orientation={Gtk.Orientation.VERTICAL}
|
||||
visible={variableToBoolean(this.#bottomButtons)} spacing={2}>
|
||||
|
||||
{props.headerButtons && <Gtk.Box class={"button-row"} visible={variableToBoolean(props.headerButtons)}>
|
||||
{
|
||||
(props.headerButtons instanceof Accessor) ?
|
||||
<For each={props.headerButtons}>
|
||||
{(button) => button}
|
||||
</For>
|
||||
: props.headerButtons
|
||||
}
|
||||
</Gtk.Box>}
|
||||
|
||||
<Gtk.Label class={"description"} hexpand={true} ellipsize={Pango.EllipsizeMode.END}
|
||||
xalign={0} visible={variableToBoolean(props.description)} label={props.description} />
|
||||
{this.#bottomButtons && transformWidget(this.#bottomButtons, (button) =>
|
||||
<Gtk.Button onClicked={() => button?.actionClicked?.()} tooltipText={button?.tooltipText}
|
||||
tooltipMarkup={button?.tooltipMarkup}>
|
||||
|
||||
</Gtk.Box>
|
||||
</Gtk.Box> as Gtk.Box);
|
||||
<Gtk.Label class={"title"} label={button?.title} xalign={0} />
|
||||
<Gtk.Label class={"description"} label={button?.description}
|
||||
xalign={0} visible={variableToBoolean(button?.description)} />
|
||||
</Gtk.Button>
|
||||
)}
|
||||
</Gtk.Box>
|
||||
</Gtk.Box> as Gtk.Box
|
||||
);
|
||||
}
|
||||
|
||||
this.append(<Gtk.Box class={"content"} spacing={props.spacing ?? 4} hexpand={true} vexpand={true}
|
||||
orientation={props.orientation ?? Gtk.Orientation.VERTICAL}>
|
||||
|
||||
{props.children}
|
||||
</Gtk.Box> as Gtk.Box);
|
||||
|
||||
this.append(<Separator alpha={.2} spacing={6} orientation={Gtk.Orientation.VERTICAL}
|
||||
visible={(props.bottomButtons instanceof Accessor) ?
|
||||
props.bottomButtons.as(buttons => buttons.length > 0)
|
||||
: (!props.bottomButtons ? false : props.bottomButtons.length > 0)}
|
||||
/> as Gtk.Widget);
|
||||
|
||||
this.append(<Gtk.Box class={"bottom-buttons"} orientation={Gtk.Orientation.VERTICAL}
|
||||
visible={variableToBoolean(props.bottomButtons)} spacing={2}>
|
||||
|
||||
{transformWidget(props.bottomButtons, (button) =>
|
||||
<Gtk.Button onClicked={button?.onClick} tooltipText={button?.tooltipText}
|
||||
tooltipMarkup={button?.tooltipMarkup}>
|
||||
|
||||
<Gtk.Label class={"title"} label={button?.title} xalign={0} />
|
||||
<Gtk.Label class={"description"} label={button?.description}
|
||||
xalign={0} visible={variableToBoolean(button?.description)} />
|
||||
</Gtk.Button>
|
||||
)}
|
||||
</Gtk.Box> as Gtk.Box);
|
||||
|
||||
props.$?.();
|
||||
public static getContent(pageWidget: Gtk.Box) {
|
||||
return pageWidget.get_first_child()!.get_next_sibling()! as Gtk.Box;
|
||||
}
|
||||
}
|
||||
|
||||
function BottomButton(props: BottomButton) {
|
||||
return <Gtk.Button onClicked={props.onClick} tooltipMarkup={props.tooltipMarkup}
|
||||
tooltipText={props.tooltipText}>
|
||||
|
||||
<Gtk.Box orientation={Gtk.Orientation.VERTICAL}>
|
||||
<Gtk.Label class={"title"} label={props.title} xalign={0} />
|
||||
<Gtk.Label class={"description"} label={props.description}
|
||||
visible={Boolean(props.description)} xalign={0} />
|
||||
</Gtk.Box>
|
||||
</Gtk.Button> as Gtk.Button;
|
||||
}
|
||||
|
||||
export function PageButton({ onDestroy, ...props }: {
|
||||
export function PageButton({ onUnmap, ...props }: {
|
||||
class?: string | Accessor<string>;
|
||||
icon?: string | Accessor<string>;
|
||||
title: string | Accessor<string>;
|
||||
endWidget?: WidgetNodeType;
|
||||
description?: string | Accessor<string>;
|
||||
extraButtons?: Array<WidgetNodeType> | WidgetNodeType;
|
||||
onDestroy?: (self: Gtk.Box) => void;
|
||||
onClick?: (self: Gtk.Button) => void;
|
||||
maxWidthChars?: number | Accessor<number>;
|
||||
onUnmap?: (self: Gtk.Box) => void;
|
||||
actionClicked?: (self: Gtk.Button) => void;
|
||||
tooltipText?: string | Accessor<string>;
|
||||
tooltipMarkup?: string | Accessor<string>;
|
||||
}) {
|
||||
return <Gtk.Box onDestroy={onDestroy}>
|
||||
<Gtk.Button onClicked={props.onClick} class={props.class} hexpand={true}
|
||||
}): Gtk.Box {
|
||||
return <Gtk.Box onUnmap={(self) => onUnmap?.(self)} class={"page-button"}>
|
||||
<Gtk.Button onClicked={props.actionClicked} class={props.class} hexpand
|
||||
tooltipText={props.tooltipText} tooltipMarkup={props.tooltipMarkup}>
|
||||
|
||||
<Gtk.Box class={"page-button"} hexpand={true} vexpand={true}>
|
||||
<Gtk.Box class={"container"} hexpand>
|
||||
{props.icon && <Gtk.Image iconName={props.icon} visible={variableToBoolean(props.icon)}
|
||||
css={"font-size: 20px; margin-right: 6px;"} />}
|
||||
|
||||
<Gtk.Box orientation={Gtk.Orientation.VERTICAL} hexpand={true} vexpand={false}>
|
||||
<Gtk.Box orientation={Gtk.Orientation.VERTICAL} hexpand vexpand={false}>
|
||||
<Gtk.Label class={"title"} xalign={0} tooltipText={props.title}
|
||||
ellipsize={Pango.EllipsizeMode.END} label={
|
||||
transform(props.title, (title) =>
|
||||
`${title.substring(0, 35)}${title.length > 35 ? '…' : ""}`)
|
||||
}
|
||||
ellipsize={Pango.EllipsizeMode.END} label={props.title}
|
||||
maxWidthChars={props.maxWidthChars ?? 28}
|
||||
/>
|
||||
<Gtk.Label class={"description"} xalign={0} visible={variableToBoolean(props.description)}
|
||||
label={props.description} ellipsize={Pango.EllipsizeMode.END}
|
||||
@@ -174,7 +163,7 @@ export function PageButton({ onDestroy, ...props }: {
|
||||
</Gtk.Box>
|
||||
</Gtk.Button>
|
||||
|
||||
<Gtk.Box class={"extra-buttons button-row"} visible={variableToBoolean(props.extraButtons)}>
|
||||
<Gtk.Box class={"extra-buttons"} visible={variableToBoolean(props.extraButtons)}>
|
||||
{props.extraButtons}
|
||||
</Gtk.Box>
|
||||
</Gtk.Box> as Gtk.Box;
|
||||
|
||||
@@ -4,92 +4,93 @@ import { getAppIcon, lookupIcon } from "../../../scripts/apps";
|
||||
import { Wireplumber } from "../../../scripts/volume";
|
||||
import { tr } from "../../../i18n/intl";
|
||||
import { createBinding, For } from "ags";
|
||||
import AstalWp from "gi://AstalWp";
|
||||
import { variableToBoolean } from "../../../scripts/utils";
|
||||
|
||||
import AstalWp from "gi://AstalWp";
|
||||
import GObject from "gi://GObject?version=2.0";
|
||||
import Pango from "gi://Pango?version=1.0";
|
||||
|
||||
export const PageSound = () =>
|
||||
<Page id={"sound"} title={tr("control_center.pages.sound.title")}
|
||||
description={tr("control_center.pages.sound.description")}>
|
||||
|
||||
<Gtk.Label class={"sub-header"} label={tr("devices")} xalign={0} />
|
||||
<For each={createBinding(Wireplumber.getWireplumber().audio!, "speakers")}>
|
||||
{(sink: AstalWp.Endpoint) =>
|
||||
<PageButton class={createBinding(sink, "isDefault").as(isDefault =>
|
||||
isDefault ? "default" : "")}
|
||||
icon={createBinding(sink, "icon").as(ico =>
|
||||
lookupIcon(ico) ? ico : "audio-card-symbolic")}
|
||||
title={createBinding(sink, "description").as(desc =>
|
||||
desc ?? "Speaker")}
|
||||
onClick={() => !sink.isDefault && sink.set_is_default(true)}
|
||||
endWidget={
|
||||
<Gtk.Image iconName={"object-select-symbolic"}
|
||||
visible={createBinding(sink, "isDefault")}
|
||||
css={"font-size: 18px;"}
|
||||
/>
|
||||
}
|
||||
/>}
|
||||
</For>
|
||||
export const PageSound = new Page({
|
||||
id: "sound",
|
||||
title: tr("control_center.pages.sound.title"),
|
||||
description: tr("control_center.pages.sound.description"),
|
||||
content: () => [
|
||||
<Gtk.Label class={"sub-header"} label={tr("devices")} xalign={0} />,
|
||||
<Gtk.Box orientation={Gtk.Orientation.VERTICAL} spacing={4}>
|
||||
<For each={createBinding(Wireplumber.getWireplumber().audio!, "speakers")}>
|
||||
{(sink: AstalWp.Endpoint) =>
|
||||
<PageButton class={createBinding(sink, "isDefault").as(isDefault =>
|
||||
isDefault ? "default" : "")}
|
||||
icon={createBinding(sink, "icon").as(ico =>
|
||||
lookupIcon(ico) ? ico : "audio-card-symbolic")}
|
||||
title={createBinding(sink, "description").as(desc =>
|
||||
desc ?? "Speaker")}
|
||||
actionClicked={() => !sink.isDefault && sink.set_is_default(true)}
|
||||
endWidget={
|
||||
<Gtk.Image iconName={"object-select-symbolic"}
|
||||
visible={createBinding(sink, "isDefault")}
|
||||
css={"font-size: 18px;"}
|
||||
/>
|
||||
}
|
||||
/>}
|
||||
</For>
|
||||
</Gtk.Box>,
|
||||
<Gtk.Box orientation={Gtk.Orientation.VERTICAL} spacing={8}>
|
||||
<Gtk.Label class={"sub-header"} label={tr("apps")} xalign={0}
|
||||
visible={variableToBoolean(
|
||||
createBinding(Wireplumber.getWireplumber().audio!, "streams")
|
||||
)}
|
||||
/>
|
||||
<For each={createBinding(Wireplumber.getWireplumber().audio!, "streams")}>
|
||||
{(stream: AstalWp.Stream) =>
|
||||
<Gtk.Box hexpand $={(self) => {
|
||||
const conns: Map<GObject.Object, Array<number>> = new Map();
|
||||
const controllerMotion = Gtk.EventControllerMotion.new();
|
||||
|
||||
<Gtk.Label class={"sub-header"} label={tr("apps")} xalign={0}
|
||||
visible={variableToBoolean(
|
||||
createBinding(Wireplumber.getWireplumber().audio!, "streams")
|
||||
)}
|
||||
/>
|
||||
<For each={createBinding(Wireplumber.getWireplumber().audio!, "streams")}>
|
||||
{(stream: AstalWp.Stream) =>
|
||||
<Gtk.Box hexpand={true} $={(self) => {
|
||||
const conns: Map<GObject.Object, Array<number>> = new Map();
|
||||
const controllerMotion = Gtk.EventControllerMotion.new();
|
||||
self.add_controller(controllerMotion);
|
||||
|
||||
self.add_controller(controllerMotion);
|
||||
conns.set(controllerMotion, [
|
||||
controllerMotion.connect("enter", () => {
|
||||
const revealer = self.get_last_child()!.get_first_child() as Gtk.Revealer;
|
||||
revealer.set_reveal_child(true);
|
||||
}),
|
||||
controllerMotion.connect("leave", () => {
|
||||
const revealer = self.get_last_child()!.get_first_child() as Gtk.Revealer;
|
||||
revealer.set_reveal_child(false);
|
||||
})
|
||||
]);
|
||||
|
||||
conns.set(controllerMotion, [
|
||||
controllerMotion.connect("enter", () => {
|
||||
const revealer = self.get_last_child()!.get_first_child() as Gtk.Revealer;
|
||||
revealer.set_reveal_child(true);
|
||||
}),
|
||||
controllerMotion.connect("leave", () => {
|
||||
const revealer = self.get_first_child()!.get_first_child() as Gtk.Revealer;
|
||||
revealer.set_reveal_child(true);
|
||||
})
|
||||
]);
|
||||
conns.set(self, [
|
||||
self.connect("destroy", () => conns.forEach((ids, obj) =>
|
||||
ids.forEach(id => obj.disconnect(id))
|
||||
))
|
||||
]);
|
||||
}}>
|
||||
<Gtk.Image iconName={createBinding(stream, "name").as(name =>
|
||||
getAppIcon(name.split(' ')[0]) ?? "application-x-executable-symbolic")}
|
||||
css={"font-size: 18px; margin-right: 6px;"} />
|
||||
|
||||
conns.set(self, [
|
||||
self.connect("destroy", () => conns.forEach((ids, obj) =>
|
||||
ids.forEach(id => obj.disconnect(id))
|
||||
))
|
||||
]);
|
||||
}}>
|
||||
<Gtk.Box orientation={Gtk.Orientation.VERTICAL} hexpand={true}>
|
||||
<Gtk.Revealer transitionDuration={180}
|
||||
transitionType={Gtk.RevealerTransitionType.SLIDE_DOWN}>
|
||||
|
||||
<Gtk.Label label={createBinding(stream, "description").as(desc =>
|
||||
desc ?? "Unnamed audio stream")}
|
||||
ellipsize={Pango.EllipsizeMode.END}
|
||||
tooltipText={createBinding(stream, "name")}
|
||||
class={"name"} xalign={0}
|
||||
/>
|
||||
</Gtk.Revealer>
|
||||
|
||||
<Gtk.Image iconName={createBinding(stream, "name").as(name =>
|
||||
getAppIcon(name.split(' ')[0]) ?? "application-x-executable-symbolic")}
|
||||
css={"font-size: 18px; margin-right: 6px;"} />
|
||||
|
||||
<Gtk.Box orientation={Gtk.Orientation.VERTICAL} hexpand={true}>
|
||||
<Gtk.Revealer transitionDuration={180}
|
||||
transitionType={Gtk.RevealerTransitionType.SLIDE_DOWN}>
|
||||
|
||||
<Gtk.Label label={createBinding(stream, "name").as(name =>
|
||||
name ?? "Unnamed audio stream")}
|
||||
ellipsize={Pango.EllipsizeMode.END}
|
||||
tooltipText={createBinding(stream, "name")}
|
||||
class={"name"} xalign={0}
|
||||
<Astal.Slider drawValue={false} value={createBinding(stream, "volume")}
|
||||
onChangeValue={(_, __, value) => stream.set_volume(value)}
|
||||
hexpand min={0} max={1.5}
|
||||
/>
|
||||
</Gtk.Revealer>
|
||||
|
||||
<Astal.Slider drawValue={false} max={100} $={(self) => {
|
||||
self.value = Math.floor(stream.volume * 100);
|
||||
}} value={createBinding(stream, "volume").as(vol =>
|
||||
Math.floor(vol * 100))}
|
||||
onChangeValue={(_, type, value) => {
|
||||
if(type !== undefined && type !== null)
|
||||
stream.volume = Math.floor(value / 100);
|
||||
}}
|
||||
/>
|
||||
</Gtk.Box>
|
||||
</Gtk.Box>
|
||||
</Gtk.Box>
|
||||
}
|
||||
</For>
|
||||
</Page> as Page;
|
||||
}
|
||||
</For>
|
||||
</Gtk.Box>
|
||||
]
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user