github/dotfiles
1
1
Fork 0
mirror of https://github.com/flickowoa/dotfiles.git synced 2026-04-06 00:32:09 +02:00
Code Issues 10 Packages Projects Releases Wiki Activity

ags breaking changes :woe:

Browse Source
This commit is contained in:
flick0
2023-12-14 12:14:36 +00:00
parent 7c635493f9
commit 3e9af48679
17 changed files with 758 additions and 628 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
components/ags/config.js
View File

@@ -22,6 +22,7 @@ import { NierDropDownButton } from "./nier/dropdown.js";
import { NierSettingPane } from "./windows/settings.js";
import { NowPlaying } from "./widgets/nowplaying.js";
import { AppLauncher } from "./windows/applauncher.js";
// import { NierGeom } from "./windows/geom.js";
// import { NierDropDownButton } from "./nier/dropdown.js";
const { exec, subprocess, execAsync } = Utils;
@@ -48,18 +49,18 @@ subprocess(
const top = () =>
Box({
vertical: true,
className: ["top"],
classNames: ["top"],
children: [
Box({
spacing: 20,
halign: "fill",
style: `min-width: ${SCREEN_WIDTH}px;`,
hpack: "fill",
css: `min-width: ${SCREEN_WIDTH}px;`,
children: [
Workspaces({}),
Button({
halign: "end",
hpack: "end",
hexpand: true,
className: ["settings-button"],
classNames: ["settings-button"],
child: Icon({
size: 40,
icon: App.configDir + "/assets/yorha.png",
@@ -69,25 +70,25 @@ const top = () =>
},
onHover: (button) => {
let right = button.parent.children[2];
button.className = arradd(button.className, "hover");
right.className = arradd(right.className, "hover");
button.classNames = arradd(button.classNames, "hover");
right.classNames = arradd(right.classNames, "hover");
},
onHoverLost: (button) => {
let right = button.parent.children[2];
button.className = arrremove(button.className, "hover");
right.className = arrremove(right.className, "hover");
button.classNames = arrremove(button.classNames, "hover");
right.classNames = arrremove(right.classNames, "hover");
},
}),
Box({
// vexpand: true,
halign: "start",
className: ["yorha-right"],
hpack: "start",
classNames: ["yorha-right"],
}),
],
}),
Box({
className: ["under-workspaces"],
style: `background: url("${
classNames: ["under-workspaces"],
css: `background: url("${
App.configDir + "/assets/nier-border.svg"
}") repeat-x;min-width: ${SCREEN_WIDTH}px;background-size: 100px 25px;min-height: 100px;`,
}),
@@ -98,14 +99,14 @@ const top = () =>
const Bar = ({ monitor } = {}) => {
return Window({
name: `bar`, // name has to be unique
className: "bar",
classNames: ["bar"],
monitor,
margin: [0, 0],
anchor: ["top", "left", "right"],
exclusive: false,
exclusivity: "ignore",
layer: "top",
child: Box({
style: "margin-top: 10px;",
css: "margin-top: 10px;",
children: [top()],
}),
});
@@ -116,11 +117,11 @@ const Side = () =>
name: "side",
margin: [10, 10],
anchor: ["right", "top", "bottom"],
exclusive: false,
exclusivity: "ignore",
layer: "bottom",
child: Box({
valign: "center",
halign: "center",
vpack: "center",
hpack: "center",
child: NowPlaying({}),
}),
});
@@ -130,12 +131,12 @@ const Side = () =>
// name: "lside",
// margin: [10, 10],
// anchor: ["left", "top", "bottom"],
// exclusive: false,
// exclusivity: "ignore",
// focusable: true,
// layer: "bottom",
// child: Box({
// valign: "center",
// halign: "center",
// vpack: "center",
// hpack: "center",
// child: AppLauncher(),
// }),
// });
@@ -145,11 +146,11 @@ const BottomBar = () =>
name: "bottombar",
margin: [0, 0],
anchor: ["bottom", "left", "right"],
exclusive: false,
exclusivity: "ignore",
layer: "bottom",
child: Box({
className: ["under-workspaces"],
style: `background: url("${
classNames: ["under-workspaces"],
css: `background: url("${
App.configDir + "/assets/nier-border.svg"
}") repeat-x;min-width: ${SCREEN_WIDTH}px;background-size: 100px 25px;min-height: 100px;`,
child: Label(""),
@@ -158,11 +159,12 @@ const BottomBar = () =>
export default {
closeWindowDelay: {
settings: 500, // milliseconds
settings: 0, // milliseconds
},
style: css,
windows: [
// BottomBar()
// NierGeom({}),
Bar(),
// LSide(),
NierSettingPane(),

191
components/ags/nier/buttons.js
View File

@@ -1,4 +1,4 @@
import { Widget, App } from "../imports.js";
import { Widget, App, Utils } from "../imports.js";
import { arradd, arrremove } from "../util.js";
const { Button, Label, Overlay, EventBox, Box, Scrollable, Icon, CenterBox } =
Widget;
@@ -7,8 +7,8 @@ const Pango = imports.gi.Pango;
export const NierButton = ({
label = "",
className = [],
containerClassName = [],
classNames = [],
containerClassNames = [],
containerConnections = [],
children = [],
label_no_box = false,
@@ -24,17 +24,18 @@ export const NierButton = ({
labelOveride = (label, font_size, max_label_chars) =>
Label({
className: ["nier-button-label"],
style: `font-size: ${font_size}px;`,
classNames: ["nier-button-label"],
css: `font-size: ${font_size}px;`,
label: "⬛ " + label,
xalign: 0,
justification: "left",
wrap: true,
max_width_chars: max_label_chars,
setup: (self) => {
self.set_line_wrap_mode(Pango.WrapMode.WORD_CHAR);
self.set_ellipsize(Pango.EllipsizeMode.END);
},
setup: (self) =>
Utils.timeout(1, () => {
self.set_line_wrap_mode(Pango.WrapMode.WORD_CHAR);
self.set_ellipsize(Pango.EllipsizeMode.END);
}),
}),
passedOnHoverLost = async (self) => {
@@ -51,22 +52,22 @@ export const NierButton = ({
...props
}) =>
Overlay({
setup: (self) => {
self.passedParent = passedParent;
},
// setup: (self) => Utils.timeout(1, () => {
// self.passedParent = passedParent;
// }),
className: ["nier-button-container", ...containerClassName],
classNames: ["nier-button-container", ...containerClassNames],
connections: [...containerConnections],
child: Box({
style: container_style,
css: container_style,
// homogeneous: false,
// halign: "center",
valign: "center",
// hpack: "center",
vpack: "center",
children: [
Icon({
icon: App.configDir + "/assets/nier-pointer.svg",
size: size,
className: [
classNames: [
"nier-button-hover-icon",
"nier-button-hover-icon-hidden",
],
@@ -86,19 +87,22 @@ export const NierButton = ({
let cursor = self.parent.children[0];
let container = self.parent;
button.className = arradd(button.className, "nier-button-hover");
box.className = arradd(box.className, "nier-button-box-hover");
cursor.className = [
button.classNames = arradd(
button.classNames,
"nier-button-hover"
);
box.classNames = arradd(box.classNames, "nier-button-box-hover");
cursor.classNames = [
"nier-long-button-hover-icon",
"nier-long-button-hover-icon-visible",
];
top.className = arradd(top.className, "nier-button-top-hover");
bottom.className = arradd(
bottom.className,
top.classNames = arradd(top.classNames, "nier-button-top-hover");
bottom.classNames = arradd(
bottom.classNames,
"nier-button-bottom-hover"
);
container.className = arradd(
container.className,
container.classNames = arradd(
container.classNames,
"nier-button-container-hover"
);
}
@@ -117,77 +121,84 @@ export const NierButton = ({
let cursor = self.parent.children[0];
let container = self.parent;
button.className = arrremove(
button.className,
button.classNames = arrremove(
button.classNames,
"nier-button-hover"
);
box.className = arrremove(box.className, "nier-button-box-hover");
cursor.className = [
box.classNames = arrremove(
box.classNames,
"nier-button-box-hover"
);
cursor.classNames = [
"nier-button-hover-icon",
"nier-button-hover-icon-hidden",
];
top.className = arrremove(top.className, "nier-button-top-hover");
bottom.className = arrremove(
bottom.className,
top.classNames = arrremove(
top.classNames,
"nier-button-top-hover"
);
bottom.classNames = arrremove(
bottom.classNames,
"nier-button-bottom-hover"
);
container.className = arrremove(
container.className,
container.classNames = arrremove(
container.classNames,
"nier-button-container-hover"
);
}
return true;
},
setup: (self) => {
setup(self);
self.connect("button-press-event", (self, event) => {
if (select_on_click) {
if (siblings && !multiple_selected_siblings) {
for (let button of siblings) {
if (button.className.includes("nier-button-container")) {
let child = button.child.children[1];
child.className = arrremove(
child.className,
"nier-button-box-selected"
);
setup: (self) =>
Utils.timeout(1, () => {
setup(self);
self.connect("button-press-event", (self, event) => {
if (select_on_click) {
if (siblings && !multiple_selected_siblings) {
for (let button of siblings) {
if (button.classNames.includes("nier-button-container")) {
let child = button.child.children[1];
child.classNames = arrremove(
child.classNames,
"nier-button-box-selected"
);
}
}
}
self.child.classNames = arradd(
self.child.classNames,
"nier-button-box-selected"
);
}
self.child.className = arradd(
self.child.className,
"nier-button-box-selected"
);
}
handleClick(self, event).catch((e) => {
console.log(e);
handleClick(self, event).catch((e) => {
console.log(e);
});
});
});
self.connect("button-release-event", (self) => {
handleClickRelease(self).catch((e) => {
console.log(e);
self.connect("button-release-event", (self) => {
handleClickRelease(self).catch((e) => {
console.log(e);
});
});
});
self.connect("motion-notify-event", (self, event) => {
handleMotion(self, event).catch((e) => {
console.log(e);
self.connect("motion-notify-event", (self, event) => {
handleMotion(self, event).catch((e) => {
console.log(e);
});
});
});
},
}),
child: CenterBox({
// homogeneous: true,
// halign: "fill",
// hpack: "fill",
hexpand: true,
vertical: true,
className: ["nier-button-box"],
classNames: ["nier-button-box"],
startWidget: Box({
className: ["nier-button-top"],
classNames: ["nier-button-top"],
}),
centerWidget: Box({
// halign: "justified",
// hpack: "justified",
homogeneous: homogeneous_button,
className: ["nier-button", ...className],
classNames: ["nier-button", ...classNames],
children: [
labelOveride(label, font_size, max_label_chars),
...children,
@@ -195,7 +206,7 @@ export const NierButton = ({
...props,
}),
endWidget: Box({
className: ["nier-button-bottom"],
classNames: ["nier-button-bottom"],
}),
}),
}),
@@ -206,8 +217,8 @@ export const NierButton = ({
export const NierButtonGroup = ({
heading = "",
scrollable = false,
className = [],
containerClassName = [],
classNames = [],
containerClassNames = [],
buttons = [],
style = "",
spacing = 10,
@@ -236,26 +247,23 @@ export const NierButtonGroup = ({
});
return true;
},
setup: (self) => {
self.passedParent = passedParent;
},
child: Box({
className: ["nier-long-button-group-container", ...containerClassName],
classNames: ["nier-long-button-group-container", ...containerClassNames],
children: [
Box({
className: ["nier-long-button-group-ruler"],
classNames: ["nier-long-button-group-ruler"],
}),
Box({
// homogeneous: homogeneous_buttons,
// halign: "fill",
// hpack: "fill",
vertical: !horizontal,
className: [
classNames: [
horizontal
? "nier-long-button-group"
: "nier-long-button-group-vertical",
...className,
...classNames,
],
style: style,
css: style,
spacing,
children: [...buttons],
}),
@@ -267,7 +275,7 @@ export const NierButtonGroup = ({
return Scrollable({
hscroll: horizontal ? "always" : "never",
vscroll: horizontal ? "never" : "always",
style: `${horizontal ? "min-width" : "min-height"}: ${min_scale}px;`,
css: `${horizontal ? "min-width" : "min-height"}: ${min_scale}px;`,
child: inner,
});
} else {
@@ -277,8 +285,8 @@ export const NierButtonGroup = ({
export const NierLongButton = ({
name = "",
className = [],
containerClassName = [],
classNames = [],
containerClassNames = [],
containerConnections = [],
label = "",
label_prefix = "⬛",
@@ -288,13 +296,13 @@ export const NierLongButton = ({
...props
}) =>
Box({
className: ["nier-long-button-container", ...containerClassName],
classNames: ["nier-long-button-container", ...containerClassNames],
connections: [...containerConnections],
children: [
Icon({
icon: App.configDir + "/assets/nier-pointer.svg",
size: 35,
className: [
classNames: [
"nier-long-button-hover-icon",
"nier-long-button-hover-icon-hidden",
],
@@ -308,21 +316,24 @@ export const NierLongButton = ({
}),
onHover: (self) => {
passedOnHover(self);
self.className = arradd(self.className, "nier-long-button-hover");
self.parent.children[0].className = [
self.classNames = arradd(self.classNames, "nier-long-button-hover");
self.parent.children[0].classNames = [
"nier-long-button-hover-icon",
"nier-long-button-hover-icon-visible",
];
},
onHoverLost: (self) => {
passedOnHoverLost(self);
self.className = arrremove(self.className, "nier-long-button-hover");
self.parent.children[0].className = [
self.classNames = arrremove(
self.classNames,
"nier-long-button-hover"
);
self.parent.children[0].classNames = [
"nier-long-button-hover-icon",
"nier-long-button-hover-icon-hidden",
];
},
className: ["nier-long-button", ...className],
classNames: ["nier-long-button", ...classNames],
...props,
}),
],

127
components/ags/nier/dropdown.js
View File

@@ -1,4 +1,4 @@
import { Widget, App, Variable } from "../imports.js";
import { Widget, App, Variable, Utils } from "../imports.js";
import { arradd, arrremove } from "../util.js";
import { NierButton } from "./buttons.js";
const { Gdk } = imports.gi;
@@ -6,8 +6,8 @@ const { Window, Label, EventBox, Box, Icon } = Widget;
export const NierDropDownButton = ({
label = "",
className = [],
containerClassName = [],
classNames = [],
containerClassNames = [],
containerConnections = [],
passedOnHoverLost = async (self) => {
return true;
@@ -26,23 +26,23 @@ export const NierDropDownButton = ({
}) =>
NierButton({
label,
className: ["nier-dropdown-button", ...className],
containerClassName: [
classNames: ["nier-dropdown-button", ...classNames],
containerClassNames: [
"nier-dropdown-button-container",
...containerClassName,
...containerClassNames,
],
containerConnections,
passedOnHoverLost: async (self) => {
console.log("hover lost");
self.child.className = arrremove(
self.child.className,
self.child.classNames = arrremove(
self.child.classNames,
"nier-button-box-hover-from-selected"
);
return true;
},
handleClick: async (self, event) => {
self.child.className = arradd(
self.child.className,
self.child.classNames = arradd(
self.child.classNames,
"nier-button-box-selected"
);
let alloc = self.get_allocation();
@@ -51,6 +51,11 @@ export const NierDropDownButton = ({
await new Promise((resolve) => {
setTimeout(resolve, 200);
});
if (popup_window) {
popup_window.destroy();
popup_window = null;
return;
}
popup_window = NierSelectMenu({
coord_x: alloc.x + alloc.width + popup_x_offset,
coord_y: alloc.y,
@@ -61,8 +66,8 @@ export const NierDropDownButton = ({
},
children: [
Label({
className: ["nier-option-item"],
halign: "end",
classNames: ["nier-option-item"],
hpack: "end",
binds: [["label", current, "value"]],
}),
],
@@ -84,33 +89,34 @@ export const NierSelectMenu = ({
layer: "overlay",
anchor: ["top", "left"],
// popup: true,
setup: (self) => {
self.connect("destroy", async (self) => {
button.child.className = arrremove(
button.child.className,
"nier-button-box-selected"
);
button.child.className = arradd(
button.child.className,
"nier-button-box-hover-from-selected"
);
await new Promise((resolve) => {
setTimeout(resolve, 500);
setup: (self) =>
Utils.timeout(1, () => {
self.connect("destroy", async (self) => {
button.child.classNames = arrremove(
button.child.classNames,
"nier-button-box-selected"
);
button.child.classNames = arradd(
button.child.classNames,
"nier-button-box-hover-from-selected"
);
await new Promise((resolve) => {
setTimeout(resolve, 500);
});
button.child.classNames = arrremove(
button.child.classNames,
"nier-button-box-hover-from-selected"
);
});
button.child.className = arrremove(
button.child.className,
"nier-button-box-hover-from-selected"
);
});
self.connect("key-press-event", (widget, event) => {
if (event.get_keyval()[1] == Gdk.KEY_Escape) {
self.destroy();
}
});
},
self.connect("key-press-event", (widget, event) => {
if (event.get_keyval()[1] == Gdk.KEY_Escape) {
self.destroy();
}
});
}),
child: Box({
vertical: true,
className: ["nier-option-menu"],
classNames: ["nier-option-menu"],
connections: [
[
options,
@@ -122,16 +128,16 @@ export const NierSelectMenu = ({
spacing,
children: [
Box({
className: ["nier-option-header"],
classNames: ["nier-option-header"],
child: Box({
className: ["nier-option-header-inner"],
classNames: ["nier-option-header-inner"],
}),
}),
Icon({
icon: App.configDir + "/assets/nier-pointer-rev.svg",
size: size,
style: "opacity: 0;",
className: ["nier-button-hover-icon"],
css: "opacity: 0;",
classNames: ["nier-button-hover-icon"],
}),
],
}),
@@ -151,7 +157,7 @@ export const NierSelectMenu = ({
},
],
],
style: `margin-left: ${coord_x}px; margin-top: ${coord_y}px;`,
css: `margin-left: ${coord_x}px; margin-top: ${coord_y}px;`,
}),
});
@@ -163,16 +169,17 @@ export const NierOptionItem = ({
current,
}) =>
Box({
className: ["nier-button-container", "nier-option-container"],
classNames: ["nier-button-container", "nier-option-container"],
spacing,
setup: (self) => {
let label = button.child.centerWidget.children[1];
if (self.children[0].child.children[0].label == label.label) {
self.className = arradd(self.className, "nier-option-selected");
} else {
self.className = arrremove(self.className, "nier-option-selected");
}
},
setup: (self) =>
Utils.timeout(1, () => {
let label = button.child.centerWidget.children[1];
if (self.children[0].child.children[0].label == label.label) {
self.classNames = arradd(self.classNames, "nier-option-selected");
} else {
self.classNames = arrremove(self.classNames, "nier-option-selected");
}
}),
children: [
EventBox({
onHover: async (self) => {
@@ -180,13 +187,13 @@ export const NierOptionItem = ({
let cursor = self.parent.children[1];
let container = self.parent;
button.className = arradd(button.className, "nier-button-hover");
cursor.className = [
button.classNames = arradd(button.classNames, "nier-button-hover");
cursor.classNames = [
"nier-long-button-hover-icon",
"nier-long-button-hover-icon-visible",
];
container.className = arradd(
container.className,
container.classNames = arradd(
container.classNames,
"nier-button-container-hover"
);
return true;
@@ -201,27 +208,27 @@ export const NierOptionItem = ({
let cursor = self.parent.children[1];
let container = self.parent;
button.className = arrremove(button.className, "nier-button-hover");
cursor.className = [
button.classNames = arrremove(button.classNames, "nier-button-hover");
cursor.classNames = [
"nier-long-button-hover-icon",
"nier-long-button-hover-icon-hidden",
];
container.className = arrremove(
container.className,
container.classNames = arrremove(
container.classNames,
"nier-button-container-hover"
);
return true;
},
child: Box({
className: ["nier-button"],
classNames: ["nier-button"],
children: [Label({ label })],
}),
}),
Icon({
icon: App.configDir + "/assets/nier-pointer-rev.svg",
size: size,
className: ["nier-button-hover-icon", "nier-button-hover-icon-hidden"],
classNames: ["nier-button-hover-icon", "nier-button-hover-icon-hidden"],
}),
],
});

62
components/ags/nier/slider.js
View File

@@ -5,9 +5,9 @@ const { Box } = Widget;
const handle_value = (segments, boxes, value, active) => {
for (let segment of segments) {
segment.className = arrremove(segment.className, "focus");
segment.className = arrremove(segment.className, "filled");
segment.className = arrremove(segment.className, "focus-on-hold");
segment.classNames = arrremove(segment.classNames, "focus");
segment.classNames = arrremove(segment.classNames, "filled");
segment.classNames = arrremove(segment.classNames, "focus-on-hold");
}
let segment_index = Math.floor(value * boxes) - 1;
if (segment_index < 0) {
@@ -18,28 +18,28 @@ const handle_value = (segments, boxes, value, active) => {
}
for (let segment of segments) {
segment.className = arrremove(segment.className, "focus");
segment.className = arrremove(segment.className, "filled");
segment.classNames = arrremove(segment.classNames, "focus");
segment.classNames = arrremove(segment.classNames, "filled");
}
for (let segment of segments) {
if (segment.className.includes(`nier-slider-boxes-${segment_index}`)) {
if (segment.classNames.includes(`nier-slider-boxes-${segment_index}`)) {
if (active) {
segment.className = arradd(segment.className, "focus");
segment.classNames = arradd(segment.classNames, "focus");
} else {
segment.className = arradd(segment.className, "filled");
segment.className = arradd(segment.className, "focus-on-hold");
segment.classNames = arradd(segment.classNames, "filled");
segment.classNames = arradd(segment.classNames, "focus-on-hold");
}
break;
}
segment.className = arradd(segment.className, "filled");
segment.classNames = arradd(segment.classNames, "filled");
}
};
export const NierSliderButton = ({
label = "",
className = [],
containerClassName = [],
classNames = [],
containerClassNames = [],
containerConnections = [],
connections = [],
ratio = Variable(0, {}),
@@ -55,12 +55,12 @@ export const NierSliderButton = ({
NierButton({
label,
homogeneous_button: true,
containerClassName,
containerConnections,
containerClassNames: [],
containerConnections: [],
size,
font_size,
// homogeneous_button: false,
className: ["nier-slider-button", ...className],
classNames: ["nier-slider-button", ...classNames],
...props,
passedOnHover: async (self) => {
@@ -68,10 +68,10 @@ export const NierSliderButton = ({
let slider = self.child.centerWidget.children[1];
let segments = slider.children;
for (let segment of segments) {
if (segment.className.includes("focus-on-hold")) {
segment.className = arradd(segment.className, "focus");
segment.className = arrremove(segment.className, "filled");
segment.className = arrremove(segment.className, "focus-on-hold");
if (segment.classNames.includes("focus-on-hold")) {
segment.classNames = arradd(segment.classNames, "focus");
segment.classNames = arrremove(segment.classNames, "filled");
segment.classNames = arrremove(segment.classNames, "focus-on-hold");
break;
}
}
@@ -85,10 +85,10 @@ export const NierSliderButton = ({
let slider = self.child.centerWidget.children[1];
let segments = slider.children;
for (let segment of segments) {
if (segment.className.includes("focus")) {
segment.className = arradd(segment.className, "filled");
segment.className = arradd(segment.className, "focus-on-hold");
segment.className = arrremove(segment.className, "focus");
if (segment.classNames.includes("focus")) {
segment.classNames = arradd(segment.classNames, "filled");
segment.classNames = arradd(segment.classNames, "focus-on-hold");
segment.classNames = arrremove(segment.classNames, "focus");
break;
}
}
@@ -146,20 +146,20 @@ export const NierInertSlider = ({
connections = [],
}) =>
Box({
className: ["nier-slider"],
classNames: ["nier-slider"],
homogeneous: false,
halign: "end",
valign: "center",
style: `padding-right: ${slider_padding}px;padding-left: 0px;`,
hpack: "end",
vpack: "center",
css: `padding-right: ${slider_padding}px;padding-left: 0px;`,
children: [
...Array.from({ length: boxes }, (_, i) => i).map((i) => {
return Box({
child: Box({ className: ["inner"] }),
className: ["nier-slider-boxes", `nier-slider-boxes-${i}`],
child: Box({ classNames: ["inner"] }),
classNames: ["nier-slider-boxes", `nier-slider-boxes-${i}`],
});
}),
Box({ className: ["nier-slider-end"] }),
Box({ className: ["nier-slider-size"] }),
Box({ classNames: ["nier-slider-end"] }),
Box({ classNames: ["nier-slider-size"] }),
],
connections: [...connections],
});

9
components/ags/style/style.css
View File

@@ -978,3 +978,12 @@
margin-left: calc(-1 * 2560px / 4);
opacity: 0;
transition: margin 0.8s cubic-bezier(0.15, 0.79, 0, 1), opacity 0.8s ease; }
.nier-geom-container {
background: #c2bda6;
opacity: 0.3; }
.nier-geom-select {
background: transparent;
border: 5px #48463d solid;
border-radius: 8px; }

1
components/ags/style/style.scss
View File

@@ -15,3 +15,4 @@
@import "widgets/info.scss";
@import "windows/settings.scss";
@import "windows/geom.scss";

14
components/ags/style/windows/settings.scss
View File

@@ -1,20 +1,6 @@
@import "../color";
@import "../data";
// .nier-settings-container .selected {
// .nier-button-box {
// background: $brown;
// label {
// color: $tan;
// }
// }
// .nier-button-hover-icon-hidden {
// opacity: 1;
// }
// margin-right: 100px;
// // animation: selected 0.5s ease forwards;
// }
// `.. `.. `....... `.. `..
// `.. `.. `.. `.. `.. `..
// `.. `.. `.. `.. `.. `.. `.. `..

15
components/ags/util.js
View File

@@ -1,17 +1,27 @@
import { App, Utils } from "./imports.js";
import { App, Utils, Hyprland } from "./imports.js";
function arrremove(arr, value) {
// arr = arr.split(" ");
return arr.filter(function (ele) {
return ele != value;
});
// .join(" ");
}
function arradd(arr, value) {
// arr = arr.split(" ");
if (arr.includes(value)) {
return arr;
}
arr.push(value);
return arr;
return arr; //.join(" ");
}
async function get_cursor() {
return Hyprland.sendMessage("cursorpos").then((res) => {
print("res ", res);
return res.split(",").map((n) => Number(n));
});
}
const home = `/home/${Utils.exec("whoami")}`;
@@ -44,4 +54,5 @@ export {
css,
SCREEN_HEIGHT,
SCREEN_WIDTH,
get_cursor,
};

10
components/ags/widgets/bluetooth_group.js
View File

@@ -12,13 +12,13 @@ export const BluetoothGroup = (
enabled = Variable(Bluetooth.enabled ? "YES" : "NO", {})
) => {
return [
Label({ halign: "start", label: "BLUETOOTH", className: ["heading"] }),
Label({ hpack: "start", label: "BLUETOOTH", classNames: ["heading"] }),
NierDropDownButton({
font_size: 30,
label: "enabled",
current: enabled,
options: Variable(["YES", "NO"], {}),
popup_x_offset: SCREEN_WIDTH / 4 + 20,
popup_x_offset: SCREEN_WIDTH / 4,
connections: [
[
enabled,
@@ -35,9 +35,9 @@ export const BluetoothGroup = (
go_to(
[
Label({
halign: "start",
hpack: "start",
label: "DEVICES",
className: ["heading"],
classNames: ["heading"],
}),
...Array.from(Bluetooth.devices).map((device) => {
let device_options = Variable(["CONNECTED", "DISCONNECTED"], {});
@@ -49,7 +49,7 @@ export const BluetoothGroup = (
label: device.name,
current: device_current,
options: device_options,
popup_x_offset: (SCREEN_WIDTH / 4) * 2 + 40,
popup_x_offset: (SCREEN_WIDTH / 4) * 2,
connections: [
[
device_current,

10
components/ags/widgets/info.js
View File

@@ -20,16 +20,16 @@ const { execAsync } = Utils;
const SysTray = () =>
Box({
halign: "end",
hpack: "end",
hexpand: true,
className: ["sys-tray"],
classNames: ["sys-tray"],
connections: [
[
SystemTray,
(self) => {
self.children = SystemTray.items.map((item) =>
Button({
className: ["sys-tray-item"],
classNames: ["sys-tray-item"],
child: Icon({ binds: [["icon", item, "icon"]], size: 32 }),
onPrimaryClick: (_, event) => item.activate(event),
@@ -44,10 +44,10 @@ const SysTray = () =>
export const Info = () =>
Box({
className: ["info"],
classNames: ["info"],
children: [
Label({
className: ["time"],
classNames: ["time"],
label: "00:00",
connections: [
[

132
components/ags/widgets/nowplaying.js
View File

@@ -81,35 +81,35 @@ export const NowPlaying = ({
}) =>
Box({
vertical: true,
className: ["nowplaying-container"],
classNames: ["nowplaying-container"],
children: [
Box({
style: `min-width: ${rows * cell_width + 30 + 30 - 20}px;`,
halign: "end",
css: `min-width: ${rows * cell_width + 30 + 30 - 20}px;`,
hpack: "end",
children: [
Button({
halign: "end",
className: ["player-buttons"],
hpack: "end",
classNames: ["player-buttons"],
hexpand: true,
child: Label({
label: "⏮",
className: ["heading"],
classNames: ["heading"],
}),
onClicked: async (self) => {
const player = Mpris.players[0];
player.previous();
self.className = arradd(self.className, "pressed");
self.classNames = arradd(self.classNames, "pressed");
await new Promise((r) => setTimeout(r, 100));
self.className = arrremove(self.className, "pressed");
self.classNames = arrremove(self.classNames, "pressed");
},
}),
Button({
halign: "end",
className: ["player-buttons"],
hpack: "end",
classNames: ["player-buttons"],
// hexpand: true,
child: Label({
label: "▪",
className: ["heading"],
classNames: ["heading"],
connections: [
[
Mpris,
@@ -140,80 +140,81 @@ export const NowPlaying = ({
self.child.label = "⏸";
}
self.className = arradd(self.className, "pressed");
console.log(self.className);
self.classNames = arradd(self.classNames, "pressed");
console.log(self.classNames);
await new Promise((r) => setTimeout(r, 100));
self.className = arrremove(self.className, "pressed");
console.log(self.className);
self.classNames = arrremove(self.classNames, "pressed");
console.log(self.classNames);
},
}),
Button({
halign: "end",
className: ["player-buttons"],
style: "margin-right: 15px;",
hpack: "end",
classNames: ["player-buttons"],
css: "margin-right: 15px;",
// hexpand: true,
child: Label({
label: "⏭",
className: ["heading"],
classNames: ["heading"],
}),
onClicked: async (self) => {
const player = Mpris.players[0];
player.next();
self.className = arradd(self.className, "pressed");
self.classNames = arradd(self.classNames, "pressed");
await new Promise((r) => setTimeout(r, 100));
self.className = arrremove(self.className, "pressed");
self.classNames = arrremove(self.classNames, "pressed");
},
}),
],
}),
Box({
className: ["image-matrix-container"],
halign: "center",
classNames: ["image-matrix-container"],
hpack: "center",
children: [
Box({
className: "image-matrix-col",
classNames: ["image-matrix-col"],
vertical: true,
children: [
...Array.from({ length: rows }, (_, i) =>
EventBox({
child: Box({
className: ["image-matrix-row", `image-matrix-row-${i}`],
classNames: ["image-matrix-row", `image-matrix-row-${i}`],
children: [
...Array.from({ length: rows }, (_, j) =>
Box({
className: [
classNames: [
"image-matrix-cell",
`image-matrix-cell-${i}-${j}`,
],
style: `min-width: ${cell_width}px; min-height: ${cell_height}px;`,
css: `min-width: ${cell_width}px; min-height: ${cell_height}px;`,
})
),
],
}),
setup: (self) => {
//hover
self.connect("enter-notify-event", () => {
self.child.className = arrremove(
self.child.className,
"nohover"
);
self.child.className = arradd(
self.child.className,
"hover"
);
});
self.connect("leave-notify-event", () => {
self.child.className = arrremove(
self.child.className,
"hover"
);
self.child.className = arradd(
self.child.className,
"nohover"
);
});
},
setup: (self) =>
Utils.timeout(1, () => {
//hover
self.connect("enter-notify-event", () => {
self.child.classNames = arrremove(
self.child.classNames,
"nohover"
);
self.child.classNames = arradd(
self.child.classNames,
"hover"
);
});
self.connect("leave-notify-event", () => {
self.child.classNames = arrremove(
self.child.classNames,
"hover"
);
self.child.classNames = arradd(
self.child.classNames,
"nohover"
);
});
}),
})
),
],
@@ -239,13 +240,13 @@ export const NowPlaying = ({
)
];
for (let op of opacity_map) {
cell.className = arrremove(
cell.className,
cell.classNames = arrremove(
cell.classNames,
`shade-${Math.round(op * 10)}`
);
}
cell.className = arradd(
cell.className,
cell.classNames = arradd(
cell.classNames,
`shade-${Math.round(opacity * 10)}`
);
}
@@ -299,23 +300,24 @@ export const NowPlaying = ({
],
}),
Box({
className: ["nowplaying-info-container"],
classNames: ["nowplaying-info-container"],
children: [
Revealer({
revealChild: false,
transitionDuration: 1000,
child: Label({
label: "woa",
className: "heading",
style: `min-width: ${rows * cell_width + 15 + 15 - 20}px;`,
halign: "start",
classNames: ["heading"],
css: `min-width: ${rows * cell_width + 15 + 15 - 20}px;`,
hpack: "start",
xalign: 0,
wrap: true,
max_width_chars: 20,
setup: (self) => {
self.set_line_wrap_mode(Pango.WrapMode.WORD_CHAR);
self.set_ellipsize(Pango.EllipsizeMode.END);
},
setup: (self) =>
Utils.timeout(1, () => {
self.set_line_wrap_mode(Pango.WrapMode.WORD_CHAR);
self.set_ellipsize(Pango.EllipsizeMode.END);
}),
}),
transition: "slide_left",
connections: [
@@ -329,21 +331,21 @@ export const NowPlaying = ({
if (player.track_title !== self.child.label) {
let cursor = self.parent.children[1];
await new Promise((r) => setTimeout(r, 1500));
cursor.className = arrremove(cursor.className, "hidden");
cursor.classNames = arrremove(cursor.classNames, "hidden");
await new Promise((r) => setTimeout(r, 1500));
self.revealChild = false;
await new Promise((r) => setTimeout(r, 1500));
self.child.label = player.track_title;
self.revealChild = true;
await new Promise((r) => setTimeout(r, 1500));
cursor.className = arradd(cursor.className, "hidden");
cursor.classNames = arradd(cursor.classNames, "hidden");
}
},
],
],
}),
Box({
className: ["nowplaying-info-cursor"],
classNames: ["nowplaying-info-cursor"],
}),
],
}),

12
components/ags/widgets/volume_group.js
View File

@@ -48,18 +48,18 @@ export const VolumeGroup = (
mic_volume_ratio = Variable(0.0, {})
) => {
return [
Label({ halign: "start", label: "VOLUME", className: ["heading"] }),
Label({ hpack: "start", label: "VOLUME", classNames: ["heading"] }),
volume_slider({ type: "speaker", volume_ratio: volume_ratio }),
volume_slider({ type: "microphone", volume_ratio: mic_volume_ratio }),
NierButton({
container_style: "padding-top: 40px;",
label: "Applications",
font_size: 30,
valign: "end",
vpack: "end",
handleClick: async (self, event) => {
await go_to(
[
Label({ halign: "start", label: "APPS", className: ["heading"] }),
Label({ hpack: "start", label: "APPS", classNames: ["heading"] }),
...Array.from(Audio.apps).map((stream) => {
console.log(stream);
return volume_slider({
@@ -73,7 +73,7 @@ export const VolumeGroup = (
);
},
}),
Label({ halign: "start", label: "OUTPUT", className: ["heading"] }),
Label({ hpack: "start", label: "OUTPUT", classNames: ["heading"] }),
...Array.from(Audio.speakers).map((stream) => {
console.log(stream);
return volume_slider({
@@ -82,7 +82,7 @@ export const VolumeGroup = (
});
}),
Label({ halign: "start", label: "INPUT", className: ["heading"] }),
Label({ hpack: "start", label: "INPUT", classNames: ["heading"] }),
...Array.from(Audio.microphones).map((stream) => {
console.log(stream);
return volume_slider({
@@ -90,6 +90,6 @@ export const VolumeGroup = (
volume_ratio: Variable(stream.volume || 0, {}),
});
}),
// Label({ halign: "start", label: "", className: ["heading"] }),
// Label({ hpack: "start", label: "", className: ["heading"] }),
];
};

8
components/ags/widgets/wifi_group.js
View File

@@ -14,13 +14,13 @@ export const WifiGroup = (
go_to = (buttons, self) => {}
) => {
return [
Label({ halign: "start", label: "WIFI", className: ["heading"] }),
Label({ hpack: "start", label: "WIFI", classNames: ["heading"] }),
NierDropDownButton({
font_size: 30,
label: "enabled",
current: enabled,
options: Variable(["YES", "NO"], {}),
popup_x_offset: SCREEN_WIDTH / 4 + 20,
popup_x_offset: SCREEN_WIDTH / 4,
connections: [
[
enabled,
@@ -35,8 +35,8 @@ export const WifiGroup = (
label: "connect",
current: current_ssid,
options: current_networks,
popup_x_offset: SCREEN_WIDTH / 4 + 20,
setup: (self) => {},
popup_x_offset: SCREEN_WIDTH / 4,
// setup: (self) => {},
connections: [
[
10000,

101
components/ags/widgets/workspace.js
View File

@@ -18,28 +18,28 @@ import { SCREEN_HEIGHT, SCREEN_WIDTH, arradd, arrremove } from "../util.js";
const { Box, Label } = Widget;
const { execAsync } = Utils;
const int_to_string = (i) => {
const int_to_string = ({ i, jap = true }) => {
switch (i) {
case 1:
return "いち";
return jap ? "いち" : "ONE";
case 2:
return "に";
return jap ? "に" : "TWO";
case 3:
return "さん";
return jap ? "さん" : "THREE";
case 4:
return "し";
return jap ? "よん" : "FOUR";
case 5:
return "ご";
return jap ? "ご" : "FIVE";
case 6:
return "ろく";
return jap ? "ろく" : "SIX";
case 7:
return "しち";
return jap ? "なな" : "SEVEN";
case 8:
return "はちt";
return jap ? "はち" : "EIGHT";
case 9:
return "きゅう";
return jap ? "きゅう" : "NINE";
case 10:
return "じゅう";
return jap ? "じゅう" : "TEN";
}
};
@@ -49,23 +49,23 @@ export const Workspaces = () =>
NierButtonGroup({
horizontal: true,
min_scale: SCREEN_WIDTH,
className: ["workspaces"],
classNames: ["workspaces"],
buttons: Array.from({ length: 10 }, (_, i) => i + 1).map((i) => {
return NierLongButton({
className: ["workspace-button"],
containerClassName: [
classNames: ["workspace-button"],
containerClassNames: [
"workspace-button-container",
`workspace-button-${i}`,
],
label: `${int_to_string(i).toUpperCase()}`,
label: `${int_to_string({ i, jap: false }).toUpperCase()}`,
onClicked: () => {
execAsync(`hyprctl dispatch workspace ${i}`);
},
passedOnHover: async (self) => {
if (
!(
self.parent.className.includes("active") ||
self.parent.className.includes("active-no-hover")
self.parent.classNames.includes("active") ||
self.parent.classNames.includes("active-no-hover")
)
) {
HOVERING = true;
@@ -74,16 +74,16 @@ export const Workspaces = () =>
if (HOVERING) {
for (let button of self.parent.parent.children) {
if (
button.className.includes("active") ||
button.className.includes("active-no-hover")
button.classNames.includes("active") ||
button.classNames.includes("active-no-hover")
) {
button.className = arrremove(
button.className,
button.classNames = arrremove(
button.classNames,
"active-no-hover"
);
button.className = arrremove(button.className, "active");
button.className = arradd(
button.className,
button.classNames = arrremove(button.classNames, "active");
button.classNames = arradd(
button.classNames,
"active-no-hover-on-hold"
);
}
@@ -91,7 +91,7 @@ export const Workspaces = () =>
}
},
passedOnHoverLost: async (self) => {
if (!self.className.includes("active")) {
if (!self.classNames.includes("active")) {
HOVERING = false;
await new Promise((r) => setTimeout(r, 300));
if (!HOVERING && REALLY_HOVERING) {
@@ -100,19 +100,22 @@ export const Workspaces = () =>
}
if (!HOVERING) {
for (let button of self.parent.parent.children) {
if (button.className.includes("active-on-hold")) {
button.className = arrremove(
button.className,
if (button.classNames.includes("active-on-hold")) {
button.classNames = arrremove(
button.classNames,
"active-on-hold"
);
button.className = arradd(button.className, "active");
button.classNames = arradd(button.classNames, "active");
}
if (button.className.includes("active-no-hover-on-hold")) {
button.className = arrremove(
button.className,
if (button.classNames.includes("active-no-hover-on-hold")) {
button.classNames = arrremove(
button.classNames,
"active-no-hover-on-hold"
);
button.className = arradd(button.className, "active-no-hover");
button.classNames = arradd(
button.classNames,
"active-no-hover"
);
}
}
}
@@ -122,35 +125,37 @@ export const Workspaces = () =>
Hyprland.active.workspace,
async (self) => {
console.log(
"workspacec changed to :: ",
Hyprland.active.workspace.id
);
// console.log(
// "workspacec changed to :: ",
// Hyprland.active.workspace.id
// );
if (
!self.className.includes(
!self.classNames.includes(
`workspace-button-${Hyprland.active.workspace.id}`
)
) {
self.className = arrremove(self.className, "active-on-hold");
self.className = arrremove(
self.className,
self.classNames = arrremove(self.classNames, "active-on-hold");
self.classNames = arrremove(
self.classNames,
"active-no-hover-on-hold"
);
self.className = arrremove(self.className, "active");
self.className = arrremove(self.className, "active-no-hover");
self.classNames = arrremove(self.classNames, "active");
self.classNames = arrremove(self.classNames, "active-no-hover");
self.children[0].icon =
App.configDir + "/assets/nier-pointer.svg";
} else {
if (
!self.children[1].className.includes("nier-long-button-hover")
!self.children[1].classNames.includes(
"nier-long-button-hover"
)
) {
self.className = arradd(self.className, "active-no-hover");
self.classNames = arradd(self.classNames, "active-no-hover");
} else {
self.children[1].className = arrremove(
self.children[1].className,
self.children[1].classNames = arrremove(
self.children[1].classNames,
"nier-long-button-hover"
);
self.className = arradd(self.className, "active");
self.classNames = arradd(self.classNames, "active");
}
await new Promise((r) => setTimeout(r, 300));
self.children[0].icon =

161
components/ags/windows/applauncher.js
View File

@@ -50,10 +50,10 @@ function searchAppInfo(searchString) {
export const AppLauncher = (allApps = Variable(Gio.app_info_get_all(), {})) =>
Box({
vertical: true,
className: ["app-launcher"],
classNames: ["app-launcher"],
children: [
Widget.Entry({
className: ["app-launcher-search"],
classNames: ["app-launcher-search"],
placeholderText: "search apps",
text: "",
visibility: true, // set to false for passwords
@@ -71,11 +71,9 @@ export const AppLauncher = (allApps = Variable(Gio.app_info_get_all(), {})) =>
hscroll: "never",
vexpand: true,
hexpand: true,
halign: "fill",
valign: "fill",
className: ["app-launcher-scroll"],
setup: (self) => {},
hpack: "fill",
vpack: "fill",
classNames: ["app-launcher-scroll"],
child: Box({
vertical: true,
@@ -95,45 +93,46 @@ export const AppLauncher = (allApps = Variable(Gio.app_info_get_all(), {})) =>
labelOveride: (label, font_size, max_label_chars) =>
Box({
children: [
Icon({
className: ["app-launcher-icon"],
size: 20,
icon: app.get_icon()?.to_string(),
}),
// Icon({
// classNames: ["app-launcher-icon"],
// size: 20,
// icon: app.get_icon()?.to_string(),
// }),
Label({
className: ["app-launcher-label"],
style: `font-size: ${font_size}px;`,
classNames: ["app-launcher-label"],
css: `font-size: ${font_size}px;`,
wrap: true,
label: label,
setup: (self) => {
self.set_ellipsize(Pango.EllipsizeMode.END);
self.set_line_wrap(true);
},
setup: (self) =>
Utils.timeout(1, () => {
self.set_ellipsize(Pango.EllipsizeMode.END);
self.set_line_wrap(true);
}),
}),
],
}),
handleClick: async (button, event) => {
app.launch([], null);
button.className = arradd(
button.className,
button.classNames = arradd(
button.classNames,
"nier-button-box-selected"
);
await new Promise((resolve) => {
setTimeout(resolve, 500);
});
button.className = arrremove(
button.className,
button.classNames = arrremove(
button.classNames,
"nier-button-box-selected"
);
button.className = arradd(
button.className,
button.classNames = arradd(
button.classNames,
"nier-button-box-hover-from-selected"
);
await new Promise((resolve) => {
setTimeout(resolve, 500);
});
button.className = arrremove(
button.className,
button.classNames = arrremove(
button.classNames,
"nier-button-box-hover-from-selected"
);
},
@@ -143,61 +142,63 @@ export const AppLauncher = (allApps = Variable(Gio.app_info_get_all(), {})) =>
},
],
],
setup: (self) => {
let buttons = self.children[1];
buttons.children = allApps.value.map((app) => {
return NierButton({
font_size: 40,
// icon: app.get_icon().to_string(),
label: app.get_display_name(),
labelOveride: (label, font_size, max_label_chars) =>
Box({
children: [
Icon({
className: ["app-launcher-icon"],
size: 20,
icon: app.get_icon()?.to_string(),
}),
Label({
className: ["app-launcher-label"],
wrap: true,
label: label,
setup: (self) => {
self.set_ellipsize(Pango.EllipsizeMode.END);
self.set_line_wrap(true);
},
}),
],
}),
handleClick: async (button, event) => {
app.launch([], null);
button.className = arradd(
button.className,
"nier-button-box-selected"
);
await new Promise((resolve) => {
setTimeout(resolve, 500);
});
button.className = arrremove(
button.className,
"nier-button-box-selected"
);
button.className = arradd(
button.className,
"nier-button-box-hover-from-selected"
);
await new Promise((resolve) => {
setTimeout(resolve, 500);
});
button.className = arrremove(
button.className,
"nier-button-box-hover-from-selected"
);
},
// handleClick: async (self, event) => {},
setup: (self) =>
Utils.timeout(1, () => {
let buttons = self.children[1];
buttons.children = allApps.value.map((app) => {
return NierButton({
font_size: 40,
// icon: app.get_icon().to_string(),
label: app.get_display_name(),
labelOveride: (label, font_size, max_label_chars) =>
Box({
children: [
// Icon({
// classNames: ["app-launcher-icon"],
// size: 20,
// icon: app.get_icon()?.to_string(),
// }),
Label({
classNames: ["app-launcher-label"],
wrap: true,
label: label,
setup: (self) =>
Utils.timeout(1, () => {
self.set_ellipsize(Pango.EllipsizeMode.END);
self.set_line_wrap(true);
}),
}),
],
}),
handleClick: async (button, event) => {
app.launch([], null);
button.classNames = arradd(
button.classNames,
"nier-button-box-selected"
);
await new Promise((resolve) => {
setTimeout(resolve, 500);
});
button.classNames = arrremove(
button.classNames,
"nier-button-box-selected"
);
button.classNames = arradd(
button.classNames,
"nier-button-box-hover-from-selected"
);
await new Promise((resolve) => {
setTimeout(resolve, 500);
});
button.classNames = arrremove(
button.classNames,
"nier-button-box-hover-from-selected"
);
},
// handleClick: async (self, event) => {},
});
});
});
},
}),
}),
],
}),

477
components/ags/windows/settings.js
View File

@@ -1,12 +1,12 @@
import { Widget, App, Audio } from "../imports.js";
import { Widget, App, Audio, Utils } from "../imports.js";
import { NierButtonGroup, NierButton } from "../nier/buttons.js";
import { SCREEN_WIDTH, arradd, arrremove } from "../util.js";
import { SCREEN_WIDTH, arradd, arrremove, get_cursor } from "../util.js";
import { BluetoothGroup } from "../widgets/bluetooth_group.js";
import { Info } from "../widgets/info.js";
import { NowPlaying } from "../widgets/nowplaying.js";
import { VolumeGroup } from "../widgets/volume_group.js";
import { WifiGroup } from "../widgets/wifi_group.js";
import { AppLauncher } from "./applauncher.js";
// import { AppLauncher } from "./applauncher.js";
const { Window, Label, EventBox, Box, Icon, Revealer } = Widget;
@@ -37,12 +37,12 @@ const ensure_only_selected = (button, page_button) => {
return button;
}
if (button) {
button.child.className = arradd(
button.child.className,
button.child.classNames = arradd(
button.child.classNames,
"nier-button-box-selected"
);
button.parent.className = arradd(
button.parent.className,
button.parent.classNames = arradd(
button.parent.classNames,
"nier-button-container-selected"
);
}
@@ -57,33 +57,33 @@ const ensure_only_selected = (button, page_button) => {
};
const remove_selected = async (button) => {
console.log(button.className);
if (button.child.className.includes("nier-button-box-selected")) {
button.child.className = arrremove(
button.child.className,
console.log(button.classNames);
if (button.child.classNames.includes("nier-button-box-selected")) {
button.child.classNames = arrremove(
button.child.classNames,
"nier-button-box-selected"
);
button.parent.className = arrremove(
button.parent.className,
button.parent.classNames = arrremove(
button.parent.classNames,
"nier-button-container-selected"
);
button.child.className = arradd(
button.child.className,
button.child.classNames = arradd(
button.child.classNames,
"nier-button-box-hover-from-selected"
);
button.parent.className = arradd(
button.parent.className,
button.parent.classNames = arradd(
button.parent.classNames,
"nier-button-container-hover-from-selected"
);
await new Promise((resolve) => {
setTimeout(resolve, 500);
});
button.child.className = arrremove(
button.child.className,
button.child.classNames = arrremove(
button.child.classNames,
"nier-button-box-hover-from-selected"
);
button.parent.className = arrremove(
button.parent.className,
button.parent.classNames = arrremove(
button.parent.classNames,
"nier-button-container-hover-from-selected"
);
}
@@ -92,190 +92,285 @@ const remove_selected = async (button) => {
export const NierSettingPane = (
padding_vertical = 50,
current_page = 0,
CLICK_TIMEOUT = false,
page1_selected = null,
page2_selected = null,
page3_selected = null
) =>
Window({
name: "settings",
className: ["settings"],
classNames: ["settings"],
margin: [0, 0, 0, 0],
anchor: ["top", "left", "bottom"],
exclusive: false,
layer: "top",
exclusivity: "ignore",
layer: "overlay",
focusable: true,
visible: false,
setup: (self) => {
self.connect("key-press-event", (widget, event) => {
if (event.get_keyval()[1] == Gdk.KEY_Escape) {
try {
if (current_page == 0) {
App.toggleWindow("settings");
} else {
let next_page = self.child.children[current_page].child;
let now_page = self.child.children[current_page - 1].child;
// let next_buttons = next_page.children[1].children;
let now_buttons = now_page.children[1].children;
next_page.className = arradd(next_page.className, "closing");
switch (current_page) {
case 1:
page1_selected = ensure_only_selected(null, page1_selected);
break;
case 2:
page2_selected = ensure_only_selected(null, page2_selected);
break;
case 3:
page3_selected = ensure_only_selected(null, page3_selected);
break;
}
now_buttons.forEach(async (_button) => {
if (_button.className.includes("nier-button-container")) {
let button = _button.child.children[1];
await remove_selected(button).catch((e) => {
console.log(e);
});
}
});
current_page = current_page - 1;
}
} catch (e) {
console.log("EEEEEEEEEEEER", e);
App.toggleWindow("settings");
}
}
return false;
});
},
child: Box({
className: ["nier-settings-container"],
style: `min-width: ${SCREEN_WIDTH}px`,
setup: (self) => {
let page4 = NierButtonGroup({
style: `min-width: ${SCREEN_WIDTH / 4}px`,
containerClassName: ["nier-settings-4-container", "closing"],
className: ["nier-settings-1"],
buttons: [
NierButton({
label: "4",
handleClick: async (button, event) => {
setup: (self) =>
Utils.timeout(1, () => {
self.connect("key-press-event", (widget, event) => {
if (event.get_keyval()[1] == Gdk.KEY_Escape) {
try {
if (current_page == 0) {
App.toggleWindow("settings");
},
}),
],
});
let page3 = NierButtonGroup({
style: `min-width: ${SCREEN_WIDTH / 4}px`,
containerClassName: ["nier-settings-3-container", "closing"],
className: ["nier-settings-1"],
buttons: [],
});
let page2 = NierButtonGroup({
style: `min-width: ${SCREEN_WIDTH / 4}px`,
containerClassName: ["nier-settings-2-container", "closing"],
className: ["nier-settings-1"],
buttons: [],
});
let go_page2 = async (buttons, parent_button) => {
page1_selected = ensure_only_selected(parent_button, page1_selected);
page2.child.children[1].children = buttons;
page4.child.className = arradd(page4.child.className, "closing");
page3.child.className = arradd(page3.child.className, "closing");
page2.child.className = arrremove(page2.child.className, "closing");
current_page = 1;
};
let go_page3 = async (buttons, parent_button) => {
page2_selected = ensure_only_selected(parent_button, page2_selected);
page3.child.children[1].children = buttons;
page4.child.className = arradd(page4.child.className, "closing");
page3.child.className = arrremove(page3.child.className, "closing");
current_page = 2;
};
let go_page4 = async (buttons, parent_button) => {
page3_selected = ensure_only_selected(parent_button, page3_selected);
page4.child.children[1].children = buttons;
page4.child.className = arrremove(page4.child.className, "closing");
current_page = 3;
};
let page1 = NierButtonGroup({
style: `min-width: ${SCREEN_WIDTH / 4}px`,
containerClassName: ["nier-settings-1-container"],
className: ["nier-settings-1"],
buttons: [
Label({ halign: "start", label: "SYSTEM", className: ["heading"] }),
NierButton({
font_size: 30,
label: "sound",
handleClick: async (self, event) => {
page1_selected = ensure_only_selected(self, page1_selected);
await go_page2(volume_page(go_page3), self).catch((e) => {
console.log(e);
});
},
}),
NierButton({
font_size: 30,
label: "wifi",
handleClick: async (self, event) => {
await go_page2(wifi_page(), self).catch((e) => {
console.log(e);
});
},
}),
NierButton({
font_size: 30,
label: "bluetooth",
handleClick: async (self, event) => {
await go_page2(bluetooth_page(go_page3), self).catch((e) => {
console.log(e);
});
},
}),
Label({ halign: "start", label: "APPS", className: ["heading"] }),
AppLauncher(),
Info(),
// NowPlaying({}),
],
});
self.children = [page1, page2, page3, page4];
},
connections: [
[
App,
(self, windowName, visible) => {
if (windowName == self.parent.name) {
let containers = Array.from(self.children).map((child) => {
return child.child;
});
if (!visible) {
containers.forEach((container) => {
container.className = arradd(container.className, "closing");
});
self.className = arrremove(self.className, "opening");
self.className = arradd(self.className, "closing");
} else {
self.className = arradd(self.className, "opening");
containers[0].className = arrremove(
containers[0].className,
"closing"
);
self.className = arrremove(self.className, "closing");
let next_page = self.child.child.children[current_page].child;
let now_page =
self.child.child.children[current_page - 1].child;
// let next_buttons = next_page.children[1].children;
let now_buttons = now_page.children[1].children;
next_page.classNames = arradd(next_page.classNames, "closing");
switch (current_page) {
case 1:
page1_selected = ensure_only_selected(null, page1_selected);
break;
case 2:
page2_selected = ensure_only_selected(null, page2_selected);
break;
case 3:
page3_selected = ensure_only_selected(null, page3_selected);
break;
}
now_buttons.forEach(async (_button) => {
if (_button.classNames.includes("nier-button-container")) {
let button = _button.child.children[1];
await remove_selected(button).catch((e) => {
console.log(e);
});
}
});
current_page = current_page - 1;
}
} catch (e) {
console.log("EEEEEEEEEEEER", e);
App.toggleWindow("settings");
}
},
"window-toggled",
}
return false;
});
}),
child: EventBox({
on_primary_click: async (self, event) => {
if (CLICK_TIMEOUT) {
return;
}
CLICK_TIMEOUT = true;
Utils.timeout(300, () => {
CLICK_TIMEOUT = false;
});
let [x, _] = await get_cursor();
if (x <= (SCREEN_WIDTH / 4) * (current_page + 1)) {
return;
}
try {
if (current_page == 0) {
App.toggleWindow("settings");
} else {
let next_page = self.child.children[current_page].child;
let now_page = self.child.children[current_page - 1].child;
let now_buttons = now_page.children[1].children;
next_page.classNames = arradd(next_page.classNames, "closing");
switch (current_page) {
case 1:
page1_selected = ensure_only_selected(null, page1_selected);
break;
case 2:
page2_selected = ensure_only_selected(null, page2_selected);
break;
case 3:
page3_selected = ensure_only_selected(null, page3_selected);
break;
}
now_buttons.forEach(async (_button) => {
if (_button.classNames.includes("nier-button-container")) {
let button = _button.child.children[1];
await remove_selected(button).catch((e) => {
console.log(e);
});
}
});
current_page = current_page - 1;
}
} catch (e) {
console.log("EEEEEEEEEEEER", e);
App.toggleWindow("settings");
}
},
child: Box({
classNames: ["nier-settings-container"],
css: `min-width: ${SCREEN_WIDTH}px`,
setup: (self) =>
Utils.timeout(1, () => {
let page4 = NierButtonGroup({
css: `min-width: ${SCREEN_WIDTH / 4}px`,
containerClassNames: ["nier-settings-4-container", "closing"],
classNames: ["nier-settings-1"],
buttons: [
NierButton({
label: "4",
handleClick: async (button, event) => {
App.toggleWindow("settings");
},
}),
],
});
let page3 = NierButtonGroup({
css: `min-width: ${SCREEN_WIDTH / 4}px`,
containerClassNames: ["nier-settings-3-container", "closing"],
classNames: ["nier-settings-1"],
buttons: [],
});
let page2 = NierButtonGroup({
css: `min-width: ${SCREEN_WIDTH / 4}px`,
containerClassNames: ["nier-settings-2-container", "closing"],
classNames: ["nier-settings-1"],
buttons: [],
});
let go_page2 = async (buttons, parent_button) => {
page1_selected = ensure_only_selected(
parent_button,
page1_selected
);
page2.child.children[1].children = buttons;
page4.child.classNames = arradd(
page4.child.classNames,
"closing"
);
page3.child.classNames = arradd(
page3.child.classNames,
"closing"
);
page2.child.classNames = arrremove(
page2.child.classNames,
"closing"
);
current_page = 1;
};
let go_page3 = async (buttons, parent_button) => {
page2_selected = ensure_only_selected(
parent_button,
page2_selected
);
page3.child.children[1].children = buttons;
page4.child.classNames = arradd(
page4.child.classNames,
"closing"
);
page3.child.classNames = arrremove(
page3.child.classNames,
"closing"
);
current_page = 2;
};
let go_page4 = async (buttons, parent_button) => {
page3_selected = ensure_only_selected(
parent_button,
page3_selected
);
page4.child.children[1].children = buttons;
page4.child.classNames = arrremove(
page4.child.classNames,
"closing"
);
current_page = 3;
};
let page1 = NierButtonGroup({
css: `min-width: ${SCREEN_WIDTH / 4}px`,
containerClassNames: ["nier-settings-1-container"],
classNames: ["nier-settings-1"],
buttons: [
Label({
hpack: "start",
label: "SYSTEM",
classNames: ["heading"],
}),
NierButton({
font_size: 30,
label: "sound",
handleClick: async (self, event) => {
page1_selected = ensure_only_selected(self, page1_selected);
await go_page2(volume_page(go_page3), self).catch((e) => {
console.log(e);
});
},
}),
NierButton({
font_size: 30,
label: "wifi",
handleClick: async (self, event) => {
await go_page2(wifi_page(), self).catch((e) => {
console.log(e);
});
},
}),
NierButton({
font_size: 30,
label: "bluetooth",
handleClick: async (self, event) => {
await go_page2(bluetooth_page(go_page3), self).catch(
(e) => {
console.log(e);
}
);
},
}),
Label({
hpack: "start",
label: "APPS",
classNames: ["heading"],
}),
// AppLauncher(),
Info(),
// NowPlaying({}),
],
});
self.children = [page1, page2, page3, page4];
}),
connections: [
[
App,
(self, windowName, visible) => {
if (windowName == self.parent.name) {
let containers = Array.from(self.children).map((child) => {
return child.child;
});
if (!visible) {
containers.forEach((container) => {
container.classNames = arradd(
container.classNames,
"closing"
);
});
self.classNames = arrremove(self.classNames, "opening");
self.classNames = arradd(self.classNames, "closing");
} else {
self.classNames = arradd(self.classNames, "opening");
containers[0].classNames = arrremove(
containers[0].classNames,
"closing"
);
self.classNames = arrremove(self.classNames, "closing");
}
}
},
"window-toggled",
],
],
],
}),
}),
});

2
theme.conf
View File

@@ -28,7 +28,7 @@ decoration {
# screen_shader = ~/.config/hypr/themes/nier/test.frag
}
plugin=/home/flicko/hyprbars.so
# plugin=/home/flicko/hyprbars.so
plugin {
hyprbars {