✨ ags: add brightness class, media widget on center-window and more
This commit is contained in:
retrozinndev
@@ -0,0 +1,73 @@
|
||||
import { bind } from "astal";
|
||||
import { Gtk, Widget } from "astal/gtk3";
|
||||
import AstalNotifd from "gi://AstalNotifd";
|
||||
import { Notifications } from "../../scripts/notification-handler";
|
||||
|
||||
export const NotificationHistory: Gtk.Widget = new Widget.Scrollable({
|
||||
hscroll: Gtk.PolicyType.NEVER,
|
||||
vscroll: Gtk.PolicyType.AUTOMATIC,
|
||||
child: new Widget.Box({
|
||||
className: "notifications",
|
||||
children: bind(Notifications, "notificationHistory").as((history: Array<AstalNotifd.Notification>) =>
|
||||
history && history.length > 0 && history.map((notification: AstalNotifd.Notification) =>
|
||||
new Widget.Box({
|
||||
className: "notification",
|
||||
hexpand: true,
|
||||
orientation: Gtk.Orientation.VERTICAL,
|
||||
children: [
|
||||
new Widget.Box({
|
||||
className: "top",
|
||||
expand: true,
|
||||
children: [
|
||||
new Widget.Box({
|
||||
className: "app",
|
||||
children: [
|
||||
new Widget.Icon({
|
||||
icon: notification.appIcon || notification.appName.toLowerCase(),
|
||||
iconSize: Gtk.IconSize.LARGE_TOOLBAR
|
||||
}),
|
||||
new Widget.Label({
|
||||
className: "name",
|
||||
label: notification.appName || "Unknown"
|
||||
} as Widget.LabelProps)
|
||||
]
|
||||
} as Widget.BoxProps),
|
||||
new Widget.Button({
|
||||
className: "remove",
|
||||
label: "",
|
||||
onClick: () => Notifications.removeFromNotificationHistory(notification.id)
|
||||
} as Widget.ButtonProps)
|
||||
]
|
||||
} as Widget.BoxProps),
|
||||
new Widget.Box({
|
||||
className: "content",
|
||||
expand: true,
|
||||
children: [
|
||||
new Widget.Box({
|
||||
className: "image",
|
||||
visible: notification.image !== "",
|
||||
css: `.image { background-image: url('${notification.image}') }`
|
||||
} as Widget.BoxProps),
|
||||
new Widget.Box({
|
||||
orientation: Gtk.Orientation.VERTICAL,
|
||||
children: [
|
||||
new Widget.Label({
|
||||
className: "summary",
|
||||
useMarkup: true,
|
||||
label: notification.summary
|
||||
} as Widget.LabelProps),
|
||||
new Widget.Label({
|
||||
className: "body",
|
||||
useMarkup: true,
|
||||
label: notification.body
|
||||
} as Widget.LabelProps)
|
||||
]
|
||||
} as Widget.BoxProps)
|
||||
]
|
||||
} as Widget.BoxProps)
|
||||
]
|
||||
} as Widget.BoxProps)
|
||||
)
|
||||
)
|
||||
} as Widget.BoxProps)
|
||||
} as Widget.ScrollableProps)
|
||||
@@ -1,12 +1,22 @@
|
||||
import { Gtk, Widget } from "astal/gtk3";
|
||||
|
||||
export const tileList: Array<Gtk.Widget> = [
|
||||
]
|
||||
export const tileList: Array<Gtk.Widget> = [];
|
||||
|
||||
export const Tiles: Widget.Box = new Widget.Box({
|
||||
child: new Gtk.Grid({
|
||||
export function TilesWidget(): Gtk.Widget {
|
||||
const tilesFlowBox: Gtk.FlowBox = new Gtk.FlowBox({
|
||||
visible: true,
|
||||
orientation: Gtk.Orientation.HORIZONTAL,
|
||||
rowHomogeneous: true
|
||||
} as Gtk.Grid.ConstructorProps)
|
||||
} as Widget.BoxProps);
|
||||
noShowAll: false,
|
||||
orientation: Gtk.Orientation.HORIZONTAL
|
||||
} as Gtk.Grid.ConstructorProps);
|
||||
|
||||
tileList.map((item: Gtk.Widget) =>
|
||||
tilesFlowBox.insert(item, -1));
|
||||
|
||||
return new Widget.Box({
|
||||
children: [
|
||||
tilesFlowBox
|
||||
]
|
||||
} as Widget.BoxProps);
|
||||
}
|
||||
|
||||
export const Tiles: Gtk.Widget = TilesWidget();
|
||||
|
||||
@@ -1,60 +0,0 @@
|
||||
import { Binding } from "astal";
|
||||
import { Gtk, Widget } from "astal/gtk3";
|
||||
|
||||
export interface MoreTileProps {
|
||||
className?: string | Binding<string | undefined>;
|
||||
iconName?: string | Binding<string | undefined>;
|
||||
iconSize?: Gtk.IconSize;
|
||||
title: string | Binding<string>;
|
||||
description?: string | Binding<string | undefined>;
|
||||
defaultToggleState?: boolean;
|
||||
onToggledOn: Function;
|
||||
onToggledOff: Function;
|
||||
onClickMore: Function;
|
||||
}
|
||||
|
||||
export function MoreTile(props: MoreTileProps): Gtk.Widget {
|
||||
|
||||
let toggleState: boolean = props?.defaultToggleState !== undefined ?
|
||||
props.defaultToggleState : false;
|
||||
|
||||
const mainEventBox = new Widget.EventBox({
|
||||
onClick: () => toggleState ? props.onToggledOff() : props.onToggledOn(),
|
||||
expand: true,
|
||||
child: new Widget.Box({
|
||||
className: props?.className || "",
|
||||
expand: true,
|
||||
children: [
|
||||
new Widget.Icon({
|
||||
iconName: props?.iconName,
|
||||
visible: props.iconName !== undefined,
|
||||
iconSize: props.iconSize || Gtk.IconSize.BUTTON
|
||||
}),
|
||||
new Widget.Box({
|
||||
className: "text",
|
||||
orientation: Gtk.Orientation.VERTICAL,
|
||||
children: [
|
||||
new Widget.Label({
|
||||
className: "title",
|
||||
label: props.title
|
||||
} as Widget.LabelProps),
|
||||
new Widget.Label({
|
||||
className: "description",
|
||||
visible: props?.description !== undefined,
|
||||
label: props?.description
|
||||
} as Widget.LabelProps)
|
||||
]
|
||||
} as Widget.BoxProps),
|
||||
new Widget.Button({
|
||||
onClick: () => props.onClickMore(),
|
||||
child: new Widget.Icon({
|
||||
iconName: "go-next",
|
||||
iconSize: Gtk.IconSize.BUTTON
|
||||
} as Widget.IconProps),
|
||||
} as Widget.ButtonProps)
|
||||
]
|
||||
} as Widget.BoxProps)
|
||||
} as Widget.EventBoxProps);
|
||||
|
||||
return mainEventBox;
|
||||
}
|
||||
@@ -1,58 +0,0 @@
|
||||
import { Binding, Variable } from "astal";
|
||||
import { Gtk, Widget } from "astal/gtk3";
|
||||
|
||||
export interface NormalTileProps {
|
||||
className?: string | Binding<string | undefined>;
|
||||
iconName?: string | Binding<string | undefined>;
|
||||
iconSize?: Gtk.IconSize;
|
||||
title: string | Binding<string>;
|
||||
description?: string | Binding<string | undefined>;
|
||||
toggleState?: boolean | Binding<boolean | undefined>;
|
||||
onToggledOn: Function;
|
||||
onToggledOff: Function;
|
||||
}
|
||||
|
||||
export function MoreTile(props: NormalTileProps): Gtk.Widget {
|
||||
|
||||
const mainEventBox = new Widget.EventBox({
|
||||
onClick: () => toggleState ? props.onToggledOff() : props.onToggledOn(),
|
||||
expand: true,
|
||||
child: new Widget.Box({
|
||||
className: props?.className || "",
|
||||
expand: true,
|
||||
children: [
|
||||
new Widget.Icon({
|
||||
iconName: props?.iconName,
|
||||
visible: props.iconName !== undefined,
|
||||
iconSize: props.iconSize || Gtk.IconSize.BUTTON
|
||||
}),
|
||||
new Widget.Box({
|
||||
className: "text",
|
||||
orientation: Gtk.Orientation.VERTICAL,
|
||||
children: [
|
||||
new Widget.Label({
|
||||
className: "title",
|
||||
label: props.title
|
||||
} as Widget.LabelProps),
|
||||
new Widget.Label({
|
||||
className: "description",
|
||||
visible: props?.description !== undefined,
|
||||
label: props?.description
|
||||
} as Widget.LabelProps)
|
||||
]
|
||||
} as Widget.BoxProps)
|
||||
]
|
||||
} as Widget.BoxProps)
|
||||
} as Widget.EventBoxProps);
|
||||
|
||||
function toggleOn(): void {
|
||||
mainEventBox.set_class_name(mainEventBox + "")
|
||||
props.onToggledOn();
|
||||
}
|
||||
|
||||
function toggleOff(): void {
|
||||
props.onToggledOff();
|
||||
}
|
||||
|
||||
return mainEventBox;
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
import { Binding } from "astal";
|
||||
import { Gtk, Widget } from "astal/gtk3";
|
||||
|
||||
export type TileProps = {
|
||||
className?: string | Binding<string | undefined>;
|
||||
iconName?: string | Binding<string | undefined>;
|
||||
visible?: boolean | Binding<boolean | undefined>;
|
||||
iconSize?: number | Binding<number | undefined>;
|
||||
title: string | Binding<string>;
|
||||
description?: string | Binding<string | undefined>;
|
||||
defaultToggleState?: boolean;
|
||||
onToggledOn: () => void;
|
||||
onToggledOff: () => void;
|
||||
onClickMore?: () => void;
|
||||
}
|
||||
|
||||
export function Tile(props: TileProps): Widget.Box {
|
||||
|
||||
const toggleButton = new Gtk.ToggleButton();
|
||||
toggleButton.set_active(props.defaultToggleState || false);
|
||||
|
||||
const moreButton = new Widget.Button({
|
||||
className: "more",
|
||||
visible: props.onClickMore
|
||||
});
|
||||
|
||||
return new Widget.Box({
|
||||
className: (typeof Binding<string | undefined>) === (typeof props.className) ?
|
||||
(props.className as Binding<string | undefined>).as((clsName: (string|undefined)) =>
|
||||
`tile ${clsName || ""}`)
|
||||
:
|
||||
props.className,
|
||||
visible: props.visible,
|
||||
children: [
|
||||
toggleButton,
|
||||
moreButton
|
||||
]
|
||||
})
|
||||
}
|
||||
Reference in New Issue
Block a user