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

smol changes

Browse Source
This commit is contained in:
flick0
2024-01-05 07:34:25 +00:00
parent c3da9e4609
commit 19bb776cbf
90 changed files with 3978 additions and 1458 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
colors
View File

@@ -1,19 +0,0 @@
0: #3a3831
8: #4b4942
1: #6d3831
9: #6d3831
2: #3a6b31
10: #3a6b31
3: #6d6b31
11: #6d6b31
4: #3a3864
12: #3a3864
5: #6d3864
13: #6d3864
6: #3a6b64
14: #3a6b64
7: #6d6b64
15: #6d6b64
background: #c2bda6
foreground: #48463d
cursor: #f4f0e1

19
colors_nier_dark Normal file
View File

@@ -0,0 +1,19 @@
0: #1d2021
1: #fb4934
2: #b8bb26
3: #fabd2f
4: #83a598
5: #d3869b
6: #8ec07c
7: #d5c4a1
8: #665c54
9: #fb4934
10: #b8bb26
11: #fabd2f
12: #83a598
13: #d3869b
14: #8ec07c
15: #fbf1c7
background: #48463d
foreground: #c2bda6
cursor: #f4f0e1

19
colors_nier_light Normal file
View File

@@ -0,0 +1,19 @@
0: #f9f5d7
1: #9d0006
2: #79740e
3: #b57614
4: #076678
5: #8f3f71
6: #427b58
7: #504945
8: #bdae93
9: #9d0006
10: #79740e
11: #b57614
12: #076678
13: #8f3f71
14: #427b58
15: #282828
background: #c2bda6
foreground: #48463d
cursor: #f4f0e1

BIN
components/ags/assets/2b.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 94 KiB

BIN
components/ags/assets/2b_ghost.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 40 KiB

34
components/ags/assets/circlethings.svg
View File

@@ -1,34 +0,0 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="477" height="477.5"
viewBox="0 0 476.994 477.506">
<defs>
<style>
.cls-1 {
opacity: 0.05;
}
.cls-2 {
fill: none;
stroke: #48463d;
stroke-miterlimit: 10;
}
</style>
</defs>
<g class="cls-1">
<circle class="cls-2" cx="110.3" cy="109.7" r="105.8" />
<circle class="cls-2" cx="110.3" cy="109.7" r="99.8" />
</g>
<g class="cls-1">
<line class="cls-2" x1="22.982" y1="7.896" x2="218.935" y2="203.849" />
<line class="cls-2" x1="7.896" y1="22.982" x2="203.849" y2="218.935" />
<line class="cls-2" x1="0.354" y1="0.354" x2="226.478" y2="226.478" />
</g>
<g class="cls-1">
<circle class="cls-2" cx="362.5" cy="363.4" r="105.8" />
<circle class="cls-2" cx="362.5" cy="363.4" r="99.8" />
</g>
<g class="cls-1">
<line class="cls-2" x1="273.144" y1="258.571" x2="469.098" y2="454.524" />
<line class="cls-2" x1="258.059" y1="273.656" x2="454.012" y2="469.609" />
<line class="cls-2" x1="250.516" y1="251.028" x2="476.64" y2="477.152" />
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 KiB

0
components/ags/assets/glory-brown-ghost.png → components/ags/assets/dark/glory-ghost.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 74 KiB

After

Width:  |  Height:  |  Size: 74 KiB

20
components/ags/assets/dark/nier-border-full.svg Normal file
View File

@@ -0,0 +1,20 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="64.932" height="15.759" viewBox="0 0 64.932 15.759">
<defs>
<style>
.cls-1 {
fill: none;
stroke: #c2bda6;
stroke-miterlimit: 15;
}
.cls-2 {
fill: #c2bda6;
}
</style>
</defs>
<line class="cls-1" y1="0.5" x2="64.932" y2="0.5"/>
<rect class="cls-2" x="55.072" y="0.959" width="9.86" height="4.762"/>
<ellipse class="cls-2" cx="23.12" cy="6.041" rx="2.308" ry="2.365"/>
<ellipse class="cls-2" cx="31.809" cy="6.041" rx="2.308" ry="2.365"/>
<ellipse class="cls-2" cx="27.465" cy="13.394" rx="2.308" ry="2.365"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 672 B

24
components/ags/assets/dark/nier-border.svg Normal file
View File

@@ -0,0 +1,24 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="64.932" height="15.759" viewBox="0 0 64.932 15.759">
<defs>
<style>
.cls-1 {
fill: none;
stroke: #c2bda6;
stroke-miterlimit: 10;
}
.cls-2 {
fill: #c2bda6;
}
.cls-3 {
fill: rgba(194,189,166,0.25);
}
</style>
</defs>
<line class="cls-1" y1="0.5" x2="64.932" y2="0.5"/>
<rect class="cls-2" x="55.072" y="0.959" width="9.86" height="4.762"/>
<ellipse class="cls-2" cx="23.12" cy="6.041" rx="2.308" ry="2.365"/>
<ellipse class="cls-2" cx="31.809" cy="6.041" rx="2.308" ry="2.365"/>
<ellipse class="cls-3" cx="27.465" cy="13.394" rx="2.308" ry="2.365"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 734 B

62
components/ags/assets/dark/nier-pointer-rev.svg Normal file
View File

@@ -0,0 +1,62 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
id="Layer_1"
data-name="Layer 1"
width="367.705"
height="234.894"
viewBox="0 0 367.705 234.894"
version="1.1"
sodipodi:docname="nier-pointer-rev.svg"
inkscape:version="1.3 (0e150ed6c4, 2023-07-21)"
inkscape:export-filename="nier-pointer-rev.svg"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview2"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
showgrid="false"
inkscape:zoom="2.9877839"
inkscape:cx="151.61739"
inkscape:cy="94.04964"
inkscape:window-width="2510"
inkscape:window-height="1430"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="Layer_1" />
<defs
id="defs1">
<style
id="style1">&#10; .cls-1 {&#10; fill: #c2bda6;&#10; }&#10; </style>
</defs>
<path
class="cls-1"
d="m 367.70401,117.447 -90.7,90.7 -272.1510033,-90.7 272.1510033,-90.7 z m -105.983,0 a 17.3,17.3 0 1 0 17.3,-17.3 17.3,17.3 0 0 0 -17.3,17.3 z"
id="path1" />
<rect
class="cls-1"
x="-234.895"
y="-27.046"
width="27.046"
height="27.046"
transform="matrix(0,-1,-1,0,0,0)"
id="rect1" />
<rect
class="cls-1"
x="-27.04701"
width="27.046"
height="27.046"
transform="matrix(0,-1,-1,0,0,0)"
id="rect2"
y="-27.046007" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

16
components/ags/assets/dark/nier-pointer-select.svg Normal file
View File

@@ -0,0 +1,16 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="367.705" height="234.894" viewBox="0 0 367.705 234.894">
<defs>
<style>
.cls-1 {
fill: rgb(151, 147, 129);
}
.cls-2 {
fill: #c2bda6;
}
</style>
</defs>
<path class="cls-1" d="M0,117.447l90.7,90.7,272.151-90.7L90.7,26.747Zm105.983,0a17.3,17.3,0,1,1-17.3-17.3A17.3,17.3,0,0,1,105.983,117.447Z"/>
<rect class="cls-2" x="340.658" y="207.848" width="27.046" height="27.046" transform="translate(132.81 575.553) rotate(-90)"/>
<rect class="cls-2" x="340.658" width="27.046" height="27.046" transform="translate(340.658 367.705) rotate(-90)"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 682 B

12
components/ags/assets/dark/nier-pointer.svg Normal file
View File

@@ -0,0 +1,12 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="367.705" height="234.894" viewBox="0 0 367.705 234.894">
<defs>
<style>
.cls-1 {
fill: #c2bda6;
}
</style>
</defs>
<path class="cls-1" d="M0,117.447l90.7,90.7,272.151-90.7L90.7,26.747Zm105.983,0a17.3,17.3,0,1,1-17.3-17.3A17.3,17.3,0,0,1,105.983,117.447Z"/>
<rect class="cls-1" x="340.658" y="207.848" width="27.046" height="27.046" transform="translate(132.81 575.553) rotate(-90)"/>
<rect class="cls-1" x="340.658" width="27.046" height="27.046" transform="translate(340.658 367.705) rotate(-90)"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 624 B

3
components/ags/assets/dark/triangle-invert.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg id="triangle" viewBox="0 0 128 111">
<polygon points="128 0,64 111, 0 0" fill="rgb(151, 147, 129)"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 116 B

3
components/ags/assets/dark/triangle.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg id="triangle" viewBox="0 0 128 111">
<polygon points="64 0, 128 111, 0 111" fill="rgb(151, 147, 129)"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 119 B

0
components/ags/assets/yorha-light.png → components/ags/assets/dark/yorha.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 135 KiB

After

Width:  |  Height:  |  Size: 135 KiB

BIN
components/ags/assets/glory-brown.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 74 KiB

BIN
components/ags/assets/glory-tan.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 66 KiB

BIN
components/ags/assets/glory.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 98 KiB

0
components/ags/assets/glory-tan-ghost.png → components/ags/assets/light/glory-ghost.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 66 KiB

After

Width:  |  Height:  |  Size: 66 KiB

2
components/ags/assets/nier-border.svg → components/ags/assets/light/nier-border-full.svg
View File

@@ -4,7 +4,7 @@
.cls-1 {
fill: none;
stroke: #48463d;
stroke-miterlimit: 10;
stroke-miterlimit: 15;
}
.cls-2 {
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 672 B

After

Width:  |  Height:  |  Size: 672 B

24
components/ags/assets/light/nier-border.svg Normal file
View File

@@ -0,0 +1,24 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="64.932" height="15.759" viewBox="0 0 64.932 15.759">
<defs>
<style>
.cls-1 {
fill: none;
stroke: #48463d;
stroke-miterlimit: 10;
}
.cls-2 {
fill: #48463d;
}
.cls-3 {
fill: rgba(72, 70, 61, 0.25);
}
</style>
</defs>
<line class="cls-1" y1="0.5" x2="64.932" y2="0.5"/>
<rect class="cls-2" x="55.072" y="0.959" width="9.86" height="4.762"/>
<ellipse class="cls-2" cx="23.12" cy="6.041" rx="2.308" ry="2.365"/>
<ellipse class="cls-2" cx="31.809" cy="6.041" rx="2.308" ry="2.365"/>
<ellipse class="cls-3" cx="27.465" cy="13.394" rx="2.308" ry="2.365"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 734 B

0
components/ags/assets/nier-pointer-rev.svg → components/ags/assets/light/nier-pointer-rev.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

0
components/ags/assets/nier-pointer-white.svg → components/ags/assets/light/nier-pointer-select.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 670 B

After

Width:  |  Height:  |  Size: 670 B

0
components/ags/assets/nier-pointer.svg → components/ags/assets/light/nier-pointer.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 624 B

After

Width:  |  Height:  |  Size: 624 B

3
components/ags/assets/light/triangle-invert.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg id="triangle" viewBox="0 0 128 111">
<polygon points="128 0,64 111, 0 0" fill="#48463d"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 105 B

3
components/ags/assets/light/triangle.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg id="triangle" viewBox="0 0 128 111">
<polygon points="64 0, 128 111, 0 111" fill="#48463d"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 108 B

0
components/ags/assets/yorha.png → components/ags/assets/light/yorha.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 79 KiB

After

Width:  |  Height:  |  Size: 79 KiB

155
components/ags/config.js
View File

@@ -1,50 +1,24 @@
// importing
import {
Hyprland,
Notifications,
Mpris,
Audio,
Battery,
SystemTray,
App,
Widget,
Utils,
Variable,
} from "./imports.js";
import { NierButton, NierButtonGroup, NierLongButton } from "./nier/buttons.js";
import { arradd, arrremove, css, scss } from "./util.js";
import { arradd, arrremove, css, scss, assetsDir, dark, themedir} from "./util.js";
import { Workspaces } from "./widgets/workspace.js";
import { Info } from "./widgets/info.js";
import { NierSliderButton } from "./nier/slider.js";
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";
import { NierBorder } from "./widgets/nier_border.js";
const { exec, subprocess, execAsync } = Utils;
const { Box, Window, Label, Button, Revealer, Icon } = Widget;
const { exec, execAsync } = Utils;
const { Box, Window, Button, Icon } = Widget;
exec(`sassc ${scss} ${css}`);
subprocess(
[
"inotifywait",
"--recursive",
"--event",
"create,modify",
"-m",
App.configDir + "/style",
],
() => {
exec(`sassc ${scss} ${css}`);
App.resetCss();
App.applyCss(css);
}
);
const WHICH = "nier";
globalThis.WHICH = WHICH;
const top = () =>
Box({
@@ -63,48 +37,45 @@ const top = () =>
classNames: ["settings-button"],
child: Icon({
size: 40,
icon: App.configDir + "/assets/yorha.png",
icon: assetsDir() + "/yorha.png",
}),
setup: (button) => {
button.connect("enter-notify-event" , (self) => {
let right = button.parent.children[2];
button.classNames = arradd(button.classNames, "hover");
right.classNames = arradd(right.classNames, "hover");
})
button.connect("leave-notify-event" , (self) => {
let right = button.parent.children[2];
button.classNames = arrremove(button.classNames, "hover");
right.classNames = arrremove(right.classNames, "hover");
})
},
onClicked: () => {
App.toggleWindow("settings");
},
onHover: (button) => {
let right = button.parent.children[2];
button.classNames = arradd(button.classNames, "hover");
right.classNames = arradd(right.classNames, "hover");
},
onHoverLost: (button) => {
let right = button.parent.children[2];
button.classNames = arrremove(button.classNames, "hover");
right.classNames = arrremove(right.classNames, "hover");
execAsync(`ags -b settings -t settings`)
},
}),
Box({
// vexpand: true,
hpack: "start",
classNames: ["yorha-right"],
}),
],
}),
Box({
NierBorder({
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;`,
}),
// NowPlaying({}),
],
});
const Bar = ({ monitor } = {}) => {
return Window({
name: `bar`, // name has to be unique
name: `bar`,
classNames: ["bar"],
monitor,
margin: [0, 0],
anchor: ["top", "left", "right"],
exclusivity: "ignore",
layer: "top",
layer: "bottom",
child: Box({
css: "margin-top: 10px;",
children: [top()],
@@ -112,34 +83,38 @@ const Bar = ({ monitor } = {}) => {
});
};
const Side = () =>
Window({
name: "side",
margin: [10, 10],
anchor: ["right", "top", "bottom"],
exclusivity: "ignore",
layer: "bottom",
child: Box({
vpack: "center",
hpack: "center",
child: NowPlaying({}),
}),
execAsync(`ags -b player -c ${App.configDir}/windows/player/player.js`);
execAsync(`ags -b settings -c ${App.configDir}/windows/settings/settings.js`);
dark.connect("changed", () => {
print("dark changed",dark.value);
let colors_css_path = `${App.configDir}/style/color.scss`;
let colors_css = Utils.readFile(`${App.configDir}/style/color-${dark.value?'dark':'light'}.scss`)
Utils.writeFile(colors_css,colors_css_path).then(() => {
exec(`sassc ${scss} ${css}`);
App.resetCss();
App.applyCss(css);
print("done")
})
.catch((e) => {
print("error",e);
});
// const LSide = () =>
// Window({
// name: "lside",
// margin: [10, 10],
// anchor: ["left", "top", "bottom"],
// exclusivity: "ignore",
// focusable: true,
// layer: "bottom",
// child: Box({
// vpack: "center",
// hpack: "center",
// child: AppLauncher(),
// }),
// });
execAsync(`ags -b player -r dark.value=${dark.value}`).then(print);
execAsync(`ags -b notify -r dark.value=${dark.value}`).then(print);
execAsync(`ags -b settings -r dark.value=${dark.value}`).then(print);
let hyprconf = Utils.readFile(`${themedir}/theme.conf`);
if (dark.value) {
hyprconf = hyprconf.replaceAll("nier_light","nier_dark");
} else {
hyprconf = hyprconf.replaceAll("nier_dark","nier_light");
}
Utils.writeFile(hyprconf,`${themedir}/theme.conf`).then(()=>{
print("reloaded hypr")
}).catch((e) => print("error",e));
})
execAsync(["bash","-c",`pkill dunst;ags -b notify -c ${App.configDir}/windows/notifications/notifications.js`])
const BottomBar = () =>
Window({
@@ -148,30 +123,16 @@ const BottomBar = () =>
anchor: ["bottom", "left", "right"],
exclusivity: "ignore",
layer: "bottom",
child: Box({
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(""),
child: NierBorder({
classNames: ["bottombar"],
y_axis: true,
}),
});
export default {
closeWindowDelay: {
settings: 0, // milliseconds
},
style: css,
windows: [
// BottomBar()
// NierGeom({}),
Bar(),
// LSide(),
NierSettingPane(),
Side(),
BottomBar(),
// you can call it, for each monitor
// Bar({ monitor: 0 }),
// Bar({ monitor: 1 })
],
};

45
components/ags/imports.js
View File

@@ -1,19 +1,30 @@
const resource = (file) => `resource:///com/github/Aylur/ags/${file}.js`;
const require = async (file) => (await import(resource(file))).default;
const service = async (file) => await require(`service/${file}`);
import App from 'resource:///com/github/Aylur/ags/app.js';
import Widget from 'resource:///com/github/Aylur/ags/widget.js';
import Service from 'resource:///com/github/Aylur/ags/service.js';
import Variable from 'resource:///com/github/Aylur/ags/variable.js';
import * as Utils from 'resource:///com/github/Aylur/ags/utils.js';
export const App = await require("app");
export const Widget = await require("widget");
export const Service = await require("service");
export const Variable = await require("variable");
export const Utils = await import(resource("utils"));
import Applications from 'resource:///com/github/Aylur/ags/service/applications.js';
import Audio from 'resource:///com/github/Aylur/ags/service/audio.js';
import Battery from 'resource:///com/github/Aylur/ags/service/battery.js';
import Bluetooth from 'resource:///com/github/Aylur/ags/service/bluetooth.js';
import Hyprland from 'resource:///com/github/Aylur/ags/service/hyprland.js';
import Mpris from 'resource:///com/github/Aylur/ags/service/mpris.js';
import Network from 'resource:///com/github/Aylur/ags/service/network.js';
import SystemTray from 'resource:///com/github/Aylur/ags/service/systemtray.js';
export const Applications = await service("applications");
export const Audio = await service("audio");
export const Battery = await service("battery");
export const Bluetooth = await service("bluetooth");
export const Hyprland = await service("hyprland");
export const Mpris = await service("mpris");
export const Network = await service("network");
export const Notifications = await service("notifications");
export const SystemTray = await service("systemtray");
export {
App,
Widget,
Service,
Variable,
Utils,
Applications,
Audio,
Battery,
Bluetooth,
Hyprland,
Mpris,
Network,
SystemTray
}

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

@@ -1,8 +1,7 @@
import { Widget, App, Utils } from "../imports.js";
import { arradd, arrremove } from "../util.js";
import { Widget, Utils } from "../imports.js";
import { arradd, arrremove, assetsDir } from "../util.js";
const { Button, Label, Overlay, EventBox, Box, Scrollable, Icon, CenterBox } =
Widget;
const { GObject } = imports.gi;
const Pango = imports.gi.Pango;
export const NierButton = ({
@@ -21,6 +20,7 @@ export const NierButton = ({
multiple_selected_siblings = false,
max_label_chars = 20,
container_style = "",
useAssetsDir = assetsDir,
labelOveride = (label, font_size, max_label_chars) =>
Label({
@@ -52,20 +52,14 @@ export const NierButton = ({
...props
}) =>
Overlay({
// setup: (self) => Utils.timeout(1, () => {
// self.passedParent = passedParent;
// }),
classNames: ["nier-button-container", ...containerClassNames],
connections: [...containerConnections],
child: Box({
css: container_style,
// homogeneous: false,
// hpack: "center",
vpack: "center",
children: [
Icon({
icon: App.configDir + "/assets/nier-pointer.svg",
icon: useAssetsDir() + "/nier-pointer.svg",
size: size,
classNames: [
"nier-button-hover-icon",
@@ -73,7 +67,6 @@ export const NierButton = ({
],
}),
EventBox({
// homogeneous: true,
onHover: async (self) => {
let continutehover = passedOnHover(self).catch((e) => {
console.log(e);
@@ -187,8 +180,6 @@ export const NierButton = ({
}),
child: CenterBox({
// homogeneous: true,
// hpack: "fill",
hexpand: true,
vertical: true,
classNames: ["nier-button-box"],
@@ -196,7 +187,6 @@ export const NierButton = ({
classNames: ["nier-button-top"],
}),
centerWidget: Box({
// hpack: "justified",
homogeneous: homogeneous_button,
classNames: ["nier-button", ...classNames],
children: [
@@ -222,7 +212,6 @@ export const NierButtonGroup = ({
buttons = [],
style = "",
spacing = 10,
// homogeneous_buttons = true,
horizontal = false,
min_scale = 200,
passedParent = null,
@@ -254,8 +243,6 @@ export const NierButtonGroup = ({
classNames: ["nier-long-button-group-ruler"],
}),
Box({
// homogeneous: homogeneous_buttons,
// hpack: "fill",
vertical: !horizontal,
classNames: [
horizontal
@@ -292,7 +279,6 @@ export const NierLongButton = ({
label_prefix = "⬛",
passedOnHoverLost = async (self) => {},
passedOnHover = async (self) => {},
...props
}) =>
Box({
@@ -300,7 +286,7 @@ export const NierLongButton = ({
connections: [...containerConnections],
children: [
Icon({
icon: App.configDir + "/assets/nier-pointer.svg",
icon: assetsDir() + "/nier-pointer.svg",
size: 35,
classNames: [
"nier-long-button-hover-icon",
@@ -314,24 +300,26 @@ export const NierLongButton = ({
xalign: 0,
justification: "left",
}),
onHover: (self) => {
passedOnHover(self);
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.classNames = arrremove(
self.classNames,
"nier-long-button-hover"
);
self.parent.children[0].classNames = [
"nier-long-button-hover-icon",
"nier-long-button-hover-icon-hidden",
];
setup: (self) => {
self.connect("enter-notify-event", (self) => {
passedOnHover(self);
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",
];
});
self.connect("leave-notify-event", (self) => {
passedOnHoverLost(self);
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",
];
});
},
classNames: ["nier-long-button", ...classNames],
...props,

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

@@ -1,5 +1,5 @@
import { Widget, App, Variable, Utils } from "../imports.js";
import { arradd, arrremove } from "../util.js";
import { Widget, Variable, Utils } from "../imports.js";
import { arradd, arrremove, assetsDir } from "../util.js";
import { NierButton } from "./buttons.js";
const { Gdk } = imports.gi;
const { Window, Label, EventBox, Box, Icon } = Widget;
@@ -22,9 +22,11 @@ export const NierDropDownButton = ({
in_focus = false,
popup_in_focus = false,
popup_x_offset = 0,
useAssetsDir = assetsDir,
...props
}) =>
NierButton({
useAssetsDir,
label,
classNames: ["nier-dropdown-button", ...classNames],
containerClassNames: [
@@ -62,6 +64,7 @@ export const NierDropDownButton = ({
button: self,
current,
options,
useAssetsDir
});
},
children: [
@@ -82,13 +85,13 @@ export const NierSelectMenu = ({
button = null,
current,
options,
useAssetsDir,
}) =>
Window({
exclusive: false,
exclusivity: "ignore",
focusable: true,
layer: "overlay",
anchor: ["top", "left"],
// popup: true,
setup: (self) =>
Utils.timeout(1, () => {
self.connect("destroy", async (self) => {
@@ -134,7 +137,7 @@ export const NierSelectMenu = ({
}),
}),
Icon({
icon: App.configDir + "/assets/nier-pointer-rev.svg",
icon: useAssetsDir() + "/nier-pointer-rev.svg",
size: size,
css: "opacity: 0;",
classNames: ["nier-button-hover-icon"],
@@ -151,6 +154,7 @@ export const NierSelectMenu = ({
spacing,
button,
current,
useAssetsDir
});
}),
];
@@ -167,6 +171,7 @@ export const NierOptionItem = ({
spacing = 20,
button,
current,
useAssetsDir,
}) =>
Box({
classNames: ["nier-button-container", "nier-option-container"],
@@ -226,7 +231,7 @@ export const NierOptionItem = ({
}),
}),
Icon({
icon: App.configDir + "/assets/nier-pointer-rev.svg",
icon: useAssetsDir() + "/nier-pointer-rev.svg",
size: size,
classNames: ["nier-button-hover-icon", "nier-button-hover-icon-hidden"],
}),

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

@@ -1,5 +1,5 @@
import { Widget, Variable } from "../imports.js";
import { arradd, arrremove } from "../util.js";
import { arradd, arrremove, assetsDir } from "../util.js";
import { NierButton } from "./buttons.js";
const { Box } = Widget;
@@ -50,9 +50,11 @@ export const NierSliderButton = ({
hovering = false,
size = 35,
font_size = 20,
useAssetsDir = assetsDir,
...props
}) =>
NierButton({
useAssetsDir,
label,
homogeneous_button: true,
containerClassNames: [],

2
components/ags/scripts/cava Executable file
View File

@@ -0,0 +1,2 @@
#! /bin/bash
printf "[general]\nframerate=160\nbars=24\n[output]\nmethod = raw\nraw_target = /dev/stdout\ndata_format = ascii\nascii_max_range = 1000\n[smoothing]\nintegral = 0\nwaves=1\ngravity = 10000000\n[input]\nmethod=pulse\nsource=auto" | cava -p /dev/stdin

6
components/ags/style/color-dark.scss Normal file
View File

@@ -0,0 +1,6 @@
$tan: rgb(87, 84, 74);
$brown: rgb(218, 212, 187);
$highlight: rgb(65, 61, 52);
$darkBrown: rgb(179, 172, 146);
$accent: #cd664d;
$accent2: #a0c490;

6
components/ags/style/color-light.scss Normal file
View File

@@ -0,0 +1,6 @@
$tan: #c2bda6;
$brown: #48463d;
$highlight: #f4f0e1;
$darkBrown: #45433a;
$accent: #cd664d;
$accent2: #a0c490;

10
components/ags/style/color.scss
View File

@@ -1,4 +1,6 @@
$tan: #c2bda6;
$brown: #48463d;
$highlight: #f4f0e1;
$darkBrown: #45433a;
$tan: rgb(87, 84, 74);
$brown: rgb(218, 212, 187);
$highlight: rgb(65, 61, 52);
$darkBrown: rgb(179, 172, 146);
$accent: #cd664d;
$accent2: #a0c490;

14
components/ags/style/nier/button.scss
View File

@@ -3,8 +3,6 @@
$border_size: 4px;
$border_dist: 3px;
// top-down borders
.nier-button-container {
margin-bottom: 20px;
}
@@ -22,11 +20,9 @@ $border_dist: 3px;
margin-bottom: 0px;
padding-top: 0px;
padding-bottom: 0px;
// padding-right: 20px;
label {
color: $tan;
// transition: color 0.3s ease-in-out;
}
background-position: -100%;
@@ -59,11 +55,9 @@ $border_dist: 3px;
label {
color: $tan;
// transition: color 0.3s ease-in-out;
}
background-position: -100%;
// transition: background 0s cubic-bezier(0.15, 0.79, 0, 1),
transition: padding 0.1s ease-out, margin 0.1s ease-out;
}
}
@@ -83,7 +77,6 @@ $border_dist: 3px;
);
background-size: 300%;
background-position: 0%;
// animation: from_border 0.1s ease forwards;
}
.nier-button-bottom {
@@ -101,13 +94,11 @@ $border_dist: 3px;
);
background-size: 300%;
background-position: 0%;
// animation: from_border 0.1s ease forwards;
}
.nier-button-top-hover,
.nier-button-bottom-hover {
opacity: 1;
// animation: to_border 0.1s ease forwards;
background-position: -100%;
transition: opacity 0.3s ease;
}
@@ -157,7 +148,6 @@ $border_dist: 3px;
font-size: 1.5rem;
color: $brown;
padding: 8px 8px 7px;
// transition: color 0.3s ease-in-out;
}
transition: background 0.1s cubic-bezier(0.15, 0.79, 0, 1);
}
@@ -170,15 +160,13 @@ $border_dist: 3px;
label {
color: $tan;
// transition: color 0.3s ease-in-out;
}
background-position: -100%;
transition: background 1s cubic-bezier(0.15, 0.79, 0, 1);
}
// cursor
// pointer thing
.nier-button-hover-icon {
margin: 0;
margin-left: -14px;

14
components/ags/style/nier/dropdown.scss
View File

@@ -4,18 +4,6 @@
$border_size: 4px;
$border_dist: 3px;
.nier-option-item {
// border: red 2px solid;
// text-shadow: 2px 2px white;
// color: white;
// transition: text-shadow 0.3s ease;
}
.nier-option-item-changed {
// border: blue 2px solid;
// color: red;
// transition: text-shadow s ease;
}
.nier-option-header {
margin: 0px;
min-height: 3px;
@@ -49,12 +37,10 @@ $border_dist: 3px;
}
.nier-option-container {
// border: 1px solid red;
* {
all: unset;
}
// margin-top: calc(#{$border_size} + #{$border_dist});
margin: 0px;
.nier-button label {
background: linear-gradient(

2
components/ags/style/nier/slider.scss
View File

@@ -34,14 +34,12 @@ $end_width: 4px;
transparent 95%,
$highlight 95%
);
// min-height: calc(#{$focus_height} * 2);
min-width: 1px;
}
.nier-slider-boxes.focus .inner {
background: $highlight;
border: none;
// min-height: calc(#{$focus_height} * 2);
box-shadow: 0px 0px 2px 1px transparentize($highlight, 0.5);
animation: to_focus 0.5s ease forwards, blink 2s ease infinite 1s;
}

17
components/ags/style/nier/sliderbutton.scss
View File

@@ -47,21 +47,6 @@ $border_dist: 3px;
}
}
// .nier-slider-button-box {
// padding-top: 0px;
// padding-bottom: 0px;
// // border: none;
// border-top: transparent $accent_border solid;
// border-bottom: transparent $accent_border solid;
// min-width: 150px;
// }
// .nier-slider-button-box-hover {
// padding-top: $accent_border_dist;
// padding-bottom: $accent_border_dist;
// border-top: $brown $accent_border solid;
// border-bottom: $brown $accent_border solid;
// }
.nier-slider-button {
padding-top: 0px;
@@ -79,7 +64,6 @@ $border_dist: 3px;
font-size: 1.5rem;
color: $brown;
padding: 8px 8px 7px;
// transition: color 0.3s ease-in-out;
}
transition: background 0.1s cubic-bezier(0.15, 0.79, 0, 1),
border-color 0.3s ease-in-out, color 0.3s ease-in-out,
@@ -94,7 +78,6 @@ $border_dist: 3px;
font-size: 1.5rem;
padding: 8px 8px 7px;
color: $tan;
// transition: color 0.3s ease-in-out;
}
background-position: -100%;

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

@@ -15,9 +15,9 @@
.nier-long-button label {
font-size: 2rem;
font-family: FOT-Rodin Pro M, sans-serif;
background: linear-gradient(90deg, rgba(72, 70, 61, 0.25) 0%, rgba(72, 70, 61, 0.25) 50%, #48463d 50%, #48463d 100%);
background: linear-gradient(90deg, rgba(218, 212, 187, 0.25) 0%, rgba(218, 212, 187, 0.25) 50%, #dad4bb 50%, #dad4bb 100%);
background-size: 200%;
color: #48463d;
color: #dad4bb;
padding: 8px 8px 7px;
transition: background 0.1s cubic-bezier(0.15, 0.79, 0, 1), border-color 0.3s ease-in-out, color 0.3s ease-in-out, box-shadow 0.4s ease-in-out; }
@@ -39,8 +39,8 @@
transition: border 0.3s ease-in-out; }
.nier-long-button-hover {
border-top: #48463d 3px solid;
border-bottom: #48463d 3px solid;
border-top: #dad4bb 3px solid;
border-bottom: #dad4bb 3px solid;
padding-top: 4px;
padding-bottom: 4px; }
.nier-long-button-hover label {
@@ -48,13 +48,13 @@
padding-bottom: calc(7px - 4px);
background-position: -100%;
font-family: FOT-Rodin Pro B, sans-serif;
color: #c2bda6; }
color: #57544a; }
.nier-long-button-hover label {
transition: background 1s cubic-bezier(0.15, 0.79, 0, 1); }
.nier-long-button-group-ruler {
margin-top: 5px;
background: linear-gradient(90deg, rgba(72, 70, 61, 0.25) 7px, transparent 0px, transparent 13px, rgba(72, 70, 61, 0.25) 13px, transparent 18px);
background: linear-gradient(90deg, rgba(218, 212, 187, 0.25) 7px, transparent 0px, transparent 13px, rgba(218, 212, 187, 0.25) 13px, transparent 18px);
min-width: 20px; }
.nier-long-button-hover-icon {
@@ -79,13 +79,13 @@
margin-bottom: calc(0px - 7px);
margin-left: calc( 0px - 2px - (3px - (3px - 4px) / 2));
margin-right: calc( 2px + (3px - (3px + 4px) / 2));
background: linear-gradient(0deg, #f4f0e1 5%, transparent 5%, transparent 95%, #f4f0e1 95%);
background: linear-gradient(0deg, #413d34 5%, transparent 5%, transparent 95%, #413d34 95%);
min-width: 1px; }
.nier-slider-boxes.focus .inner {
background: #f4f0e1;
background: #413d34;
border: none;
box-shadow: 0px 0px 2px 1px rgba(244, 240, 225, 0.5);
box-shadow: 0px 0px 2px 1px rgba(65, 61, 52, 0.5);
animation: to_focus 0.5s ease forwards, blink 2s ease infinite 1s; }
.nier-slider-boxes.filled .inner {
@@ -99,19 +99,19 @@
border: none;
min-height: 1px;
min-width: calc(3px);
background: #c2bda6;
background: #57544a;
animation: focus_to_normal 0.3s ease forwards; }
@keyframes blink {
0% {
background: #f4f0e1;
box-shadow: 0px 0px 2px 1px rgba(244, 240, 225, 0.5); }
background: #413d34;
box-shadow: 0px 0px 2px 1px rgba(65, 61, 52, 0.5); }
50% {
background: #c2bda6;
box-shadow: 0px 0px 2px 1px rgba(244, 240, 225, 0); }
background: #57544a;
box-shadow: 0px 0px 2px 1px rgba(65, 61, 52, 0); }
0% {
background: #f4f0e1;
box-shadow: 0px 0px 2px 1px rgba(244, 240, 225, 0.5); } }
background: #413d34;
box-shadow: 0px 0px 2px 1px rgba(65, 61, 52, 0.5); } }
@keyframes focus_to_normal {
0% {
@@ -139,13 +139,13 @@
0% {
margin-top: 0;
margin-bottom: 0;
background: #f4f0e1;
box-shadow: 0px 0px 5px 2px #f4f0e1; }
background: #413d34;
box-shadow: 0px 0px 5px 2px #413d34; }
25% {
margin-top: calc(10px - 8px);
margin-bottom: calc(10px - 8px); }
100% {
background: #c2bda6; } }
background: #57544a; } }
.nier-slider-button-top,
.nier-slider-button-bottom {
@@ -153,12 +153,12 @@
min-height: 0px; }
.nier-slider-button-top-hover {
background: #48463d;
background: #dad4bb;
min-height: 3px;
margin-bottom: 3px; }
.nier-slider-button-bottom-hover {
background: #48463d;
background: #dad4bb;
min-height: 3px;
margin-top: 3px; }
@@ -178,13 +178,13 @@
.nier-slider-button {
padding-top: 0px;
padding-bottom: 0px;
background: linear-gradient(90deg, rgba(72, 70, 61, 0.25) 0%, rgba(72, 70, 61, 0.25) 50%, #48463d 50%, #48463d 100%);
background: linear-gradient(90deg, rgba(218, 212, 187, 0.25) 0%, rgba(218, 212, 187, 0.25) 50%, #dad4bb 50%, #dad4bb 100%);
background-size: 200%;
transition: background 1s cubic-bezier(0.15, 0.79, 0, 1);
transition: background 0.1s cubic-bezier(0.15, 0.79, 0, 1), border-color 0.3s ease-in-out, color 0.3s ease-in-out, box-shadow 0.4s ease-in-out; }
.nier-slider-button label {
font-size: 1.5rem;
color: #48463d;
color: #dad4bb;
padding: 8px 8px 7px; }
.nier-slider-button-hover {
@@ -195,7 +195,7 @@
.nier-slider-button-hover label {
font-size: 1.5rem;
padding: 8px 8px 7px;
color: #c2bda6; }
color: #57544a; }
.nier-button-container {
margin-bottom: 20px; }
@@ -214,7 +214,7 @@
background-position: -100%;
transition: background 0.3s cubic-bezier(0.15, 0.79, 0, 1), padding 0.3s ease-out; }
.nier-button-box-hover-from-selected .nier-button label {
color: #c2bda6; }
color: #57544a; }
.nier-button-box {
margin-right: 20px;
@@ -237,13 +237,13 @@
background-position: -100%;
transition: padding 0.1s ease-out, margin 0.1s ease-out; }
.nier-button-box-selected .nier-button label {
color: #c2bda6; }
color: #57544a; }
.nier-button-top {
opacity: 0;
min-height: 4px;
margin-bottom: 3px;
background: linear-gradient(90deg, transparent 0%, transparent 33.33%, #48463d 33.33%, #48463d 66.66%, transparent 66.66%, transparent 100%);
background: linear-gradient(90deg, transparent 0%, transparent 33.33%, #dad4bb 33.33%, #dad4bb 66.66%, transparent 66.66%, transparent 100%);
background-size: 300%;
background-position: 0%; }
@@ -251,7 +251,7 @@
opacity: 0;
min-height: 4px;
margin-top: 3px;
background: linear-gradient(90deg, transparent 0%, transparent 33.33%, #48463d 33.33%, #48463d 66.66%, transparent 66.66%, transparent 100%);
background: linear-gradient(90deg, transparent 0%, transparent 33.33%, #dad4bb 33.33%, #dad4bb 66.66%, transparent 66.66%, transparent 100%);
background-size: 300%;
background-position: 0%; }
@@ -285,12 +285,12 @@
margin-bottom: calc(0px - 4px - 3px);
padding-top: calc(4px + 3px);
padding-bottom: calc(4px + 3px);
background: linear-gradient(90deg, rgba(72, 70, 61, 0.25) 0%, rgba(72, 70, 61, 0.25) 50%, #48463d 50%, #48463d 100%);
background: linear-gradient(90deg, rgba(218, 212, 187, 0.25) 0%, rgba(218, 212, 187, 0.25) 50%, #dad4bb 50%, #dad4bb 100%);
background-size: 200%;
transition: background 0.1s cubic-bezier(0.15, 0.79, 0, 1); }
.nier-button label {
font-size: 1.5rem;
color: #48463d;
color: #dad4bb;
padding: 8px 8px 7px; }
.nier-button-hover {
@@ -301,7 +301,7 @@
background-position: -100%;
transition: background 1s cubic-bezier(0.15, 0.79, 0, 1); }
.nier-button-hover label {
color: #c2bda6; }
color: #57544a; }
.nier-button-hover-icon {
margin: 0;
@@ -333,7 +333,7 @@
background-position: -100%;
transition: background 0.3s cubic-bezier(0.15, 0.79, 0, 1), padding 0.3s ease-out; }
.nier-button-box-hover-from-selected .nier-button label {
color: #c2bda6; }
color: #57544a; }
.nier-button-box {
margin-right: 20px;
@@ -356,13 +356,13 @@
background-position: -100%;
transition: padding 0.1s ease-out, margin 0.1s ease-out; }
.nier-button-box-selected .nier-button label {
color: #c2bda6; }
color: #57544a; }
.nier-button-top {
opacity: 0;
min-height: 4px;
margin-bottom: 3px;
background: linear-gradient(90deg, transparent 0%, transparent 33.33%, #48463d 33.33%, #48463d 66.66%, transparent 66.66%, transparent 100%);
background: linear-gradient(90deg, transparent 0%, transparent 33.33%, #dad4bb 33.33%, #dad4bb 66.66%, transparent 66.66%, transparent 100%);
background-size: 300%;
background-position: 0%; }
@@ -370,7 +370,7 @@
opacity: 0;
min-height: 4px;
margin-top: 3px;
background: linear-gradient(90deg, transparent 0%, transparent 33.33%, #48463d 33.33%, #48463d 66.66%, transparent 66.66%, transparent 100%);
background: linear-gradient(90deg, transparent 0%, transparent 33.33%, #dad4bb 33.33%, #dad4bb 66.66%, transparent 66.66%, transparent 100%);
background-size: 300%;
background-position: 0%; }
@@ -404,12 +404,12 @@
margin-bottom: calc(0px - 4px - 3px);
padding-top: calc(4px + 3px);
padding-bottom: calc(4px + 3px);
background: linear-gradient(90deg, rgba(72, 70, 61, 0.25) 0%, rgba(72, 70, 61, 0.25) 50%, #48463d 50%, #48463d 100%);
background: linear-gradient(90deg, rgba(218, 212, 187, 0.25) 0%, rgba(218, 212, 187, 0.25) 50%, #dad4bb 50%, #dad4bb 100%);
background-size: 200%;
transition: background 0.1s cubic-bezier(0.15, 0.79, 0, 1); }
.nier-button label {
font-size: 1.5rem;
color: #48463d;
color: #dad4bb;
padding: 8px 8px 7px; }
.nier-button-hover {
@@ -420,7 +420,7 @@
background-position: -100%;
transition: background 1s cubic-bezier(0.15, 0.79, 0, 1); }
.nier-button-hover label {
color: #c2bda6; }
color: #57544a; }
.nier-button-hover-icon {
margin: 0;
@@ -438,16 +438,16 @@
.nier-option-header {
margin: 0px;
min-height: 3px;
background: #f4f0e1;
background: #413d34;
padding: 8px; }
.nier-option-header .nier-option-header-inner {
background: #48463d;
background: #dad4bb;
min-height: 1px;
min-width: 200px; }
.nier-option-container.nier-option-selected .nier-button label {
font-family: FOT-Rodin Pro B, sans-serif;
background: linear-gradient(90deg, #d2cec0 0%, #d2cec0 50%, #48463d 50%, #48463d 100%);
background: linear-gradient(90deg, #605b4f 0%, #605b4f 50%, #dad4bb 50%, #dad4bb 100%);
background-size: 200%;
min-width: 200px;
transition: background 0.3s cubic-bezier(0.15, 0.79, 0, 1); }
@@ -461,7 +461,7 @@
.nier-option-container * {
all: unset; }
.nier-option-container .nier-button label {
background: linear-gradient(90deg, #f4f0e1 0%, #f4f0e1 50%, #48463d 50%, #48463d 100%);
background: linear-gradient(90deg, #413d34 0%, #413d34 50%, #dad4bb 50%, #dad4bb 100%);
background-size: 200%;
min-width: 200px;
transition: background 0.3s cubic-bezier(0.15, 0.79, 0, 1); }
@@ -480,8 +480,8 @@
.heading {
font-size: 5rem;
font-weight: lighter;
text-shadow: 10px 10px 1px rgba(72, 70, 61, 0.25);
color: #48463d; }
text-shadow: 10px 10px 1px rgba(218, 212, 187, 0.25);
color: #dad4bb; }
.settings-button {
background: linear-gradient(90deg, #cd664d 50%, rgba(205, 102, 76, 0.5) 50%);
@@ -520,9 +520,9 @@
.nier-long-button label {
font-size: 2rem;
font-family: FOT-Rodin Pro M, sans-serif;
background: linear-gradient(90deg, rgba(72, 70, 61, 0.25) 0%, rgba(72, 70, 61, 0.25) 50%, #48463d 50%, #48463d 100%);
background: linear-gradient(90deg, rgba(218, 212, 187, 0.25) 0%, rgba(218, 212, 187, 0.25) 50%, #dad4bb 50%, #dad4bb 100%);
background-size: 200%;
color: #48463d;
color: #dad4bb;
padding: 8px 8px 7px;
transition: background 0.1s cubic-bezier(0.15, 0.79, 0, 1), border-color 0.3s ease-in-out, color 0.3s ease-in-out, box-shadow 0.4s ease-in-out; }
@@ -544,8 +544,8 @@
transition: border 0.3s ease-in-out; }
.nier-long-button-hover {
border-top: #48463d 3px solid;
border-bottom: #48463d 3px solid;
border-top: #dad4bb 3px solid;
border-bottom: #dad4bb 3px solid;
padding-top: 4px;
padding-bottom: 4px; }
.nier-long-button-hover label {
@@ -553,13 +553,13 @@
padding-bottom: calc(7px - 4px);
background-position: -100%;
font-family: FOT-Rodin Pro B, sans-serif;
color: #c2bda6; }
color: #57544a; }
.nier-long-button-hover label {
transition: background 1s cubic-bezier(0.15, 0.79, 0, 1); }
.nier-long-button-group-ruler {
margin-top: 5px;
background: linear-gradient(90deg, rgba(72, 70, 61, 0.25) 7px, transparent 0px, transparent 13px, rgba(72, 70, 61, 0.25) 13px, transparent 18px);
background: linear-gradient(90deg, rgba(218, 212, 187, 0.25) 7px, transparent 0px, transparent 13px, rgba(218, 212, 187, 0.25) 13px, transparent 18px);
min-width: 20px; }
.nier-long-button-hover-icon {
@@ -575,8 +575,8 @@
transition: opacity 0.3s ease-in-out; }
.workspace-button-container.active-no-hover .nier-long-button {
border-top: #48463d 3px solid;
border-bottom: #48463d 3px solid;
border-top: #dad4bb 3px solid;
border-bottom: #dad4bb 3px solid;
padding-top: 4px;
padding-bottom: 4px;
animation: active 0.5s cubic-bezier(0.15, 0.79, 0, 1) forwards;
@@ -586,7 +586,7 @@
padding-bottom: calc(7px - 4px);
background-position: -100%;
font-family: FOT-Rodin Pro B, sans-serif;
color: #c2bda6; }
color: #57544a; }
.workspace-button-container.active-no-hover .nier-long-button label {
transition: background 0.3s cubic-bezier(0.15, 0.79, 0, 1);
animation: active-label 0.5s cubic-bezier(0.15, 0.79, 0, 1) forwards;
@@ -625,7 +625,7 @@
@keyframes active {
0% {
margin-bottom: 10px;
border: #48463d; }
border: #dad4bb; }
50% {
padding-bottom: 0px; }
100% {
@@ -634,14 +634,41 @@
border-top: 0px;
border-bottom: 0px; } }
.top {
margin-bottom: -60px; }
.under-workspaces {
margin-top: -1px; }
margin-top: -6px; }
.bottombar {
margin-bottom: 65px; }
.nowplaying-hider {
background: #dad4bb;
min-width: 1px; }
.cava-vis {
background: transparent;
margin-right: 0px;
margin-top: calc(3.5rem + 5px);
margin-bottom: calc(2rem + 5px);
margin-left: -5px;
transition: background 1s ease; }
.cava-vis.hiding {
background: rgba(218, 212, 187, 0.5);
transition: background 1s ease; }
.cava-bar-thick {
background: linear-gradient(120deg, #dad4bb 0%, #dad4bb 40%, rgba(218, 212, 187, 0.25) 40%, rgba(218, 212, 187, 0.25) 60%, #dad4bb 60%, #dad4bb 100%);
background-size: 100% 10%;
min-width: 25px; }
.cava-bar-thin {
background: linear-gradient(250deg, #dad4bb 0%, #dad4bb 40%, rgba(218, 212, 187, 0.25) 40%, rgba(218, 212, 187, 0.25) 60%, #dad4bb 60%, #dad4bb 100%);
background-size: 100% 10%;
min-width: 15px;
margin-right: 5px; }
.player-buttons.pressed:hover .heading {
text-shadow: 5px 5px 1px rgba(72, 70, 61, 0.25);
text-shadow: 5px 5px 1px rgba(218, 212, 187, 0.25);
padding-bottom: 0px;
padding-right: 0px;
margin-right: 5px;
@@ -649,7 +676,7 @@
transition: padding 0.3s cubic-bezier(0, 1, 0, 1), margin 0.3s cubic-bezier(0, 1, 0, 1), text-shadow 0.3s cubic-bezier(0, 1, 0, 1); }
.player-buttons:hover .heading {
text-shadow: 10px 10px 1px rgba(72, 70, 61, 0.25);
text-shadow: 10px 10px 1px rgba(218, 212, 187, 0.25);
padding-bottom: 5px;
padding-right: 5px;
margin-right: 0px;
@@ -660,14 +687,9 @@
font-size: 3.5rem;
margin-bottom: -10px;
margin-top: 5px;
text-shadow: 5px 5px 1px rgba(72, 70, 61, 0.25);
text-shadow: 5px 5px 1px rgba(218, 212, 187, 0.25);
transition: padding 0.3s cubic-bezier(0, 1, 0, 1), margin 0.3s cubic-bezier(0, 1, 0, 1), text-shadow 0.3s cubic-bezier(0, 1, 0, 1); }
.image-matrix-container {
padding-right: 10px;
border-right: #48463d 5px solid;
margin-right: 20px; }
.image-matrix-row.nohover {
margin: 0px;
transition: margin 0.1s cubic-bezier(1, -0.01, 1, 0.1); }
@@ -675,15 +697,15 @@
.image-matrix-row.hover {
margin-left: -15px; }
.image-matrix-col {
border: #48463d 10px solid;
padding: 5px; }
.image-matrix-container {
border: #dad4bb 10px solid;
margin-right: 10px; }
.image-matrix-cell {
transition: opacity 1s ease; }
.image-matrix-cell.shade-0 {
background: rgba(72, 70, 61, 0);
background: rgba(218, 212, 187, 0);
transition: background 0s ease;
transition-delay: calc(0s * 0.5);
animation: glow-0 0.5s cubic-bezier(1, 0.01, 0.33, 0.4) forwards;
@@ -691,12 +713,12 @@
@keyframes glow-0 {
0% {
background: #f4f0e1; }
background: #413d34; }
100% {
background: rgba(72, 70, 61, 0); } }
background: rgba(218, 212, 187, 0); } }
.image-matrix-cell.shade-1 {
background: rgba(72, 70, 61, 0.1);
background: rgba(218, 212, 187, 0.1);
transition: background 0s ease;
transition-delay: calc(1s * 0.5);
animation: glow-1 0.5s cubic-bezier(1, 0.01, 0.33, 0.4) forwards;
@@ -704,12 +726,12 @@
@keyframes glow-1 {
0% {
background: #f4f0e1; }
background: #413d34; }
100% {
background: rgba(72, 70, 61, 0.1); } }
background: rgba(218, 212, 187, 0.1); } }
.image-matrix-cell.shade-2 {
background: rgba(72, 70, 61, 0.2);
background: rgba(218, 212, 187, 0.2);
transition: background 0s ease;
transition-delay: calc(2s * 0.5);
animation: glow-2 0.5s cubic-bezier(1, 0.01, 0.33, 0.4) forwards;
@@ -717,12 +739,12 @@
@keyframes glow-2 {
0% {
background: #f4f0e1; }
background: #413d34; }
100% {
background: rgba(72, 70, 61, 0.2); } }
background: rgba(218, 212, 187, 0.2); } }
.image-matrix-cell.shade-3 {
background: rgba(72, 70, 61, 0.3);
background: rgba(218, 212, 187, 0.3);
transition: background 0s ease;
transition-delay: calc(3s * 0.5);
animation: glow-3 0.5s cubic-bezier(1, 0.01, 0.33, 0.4) forwards;
@@ -730,12 +752,12 @@
@keyframes glow-3 {
0% {
background: #f4f0e1; }
background: #413d34; }
100% {
background: rgba(72, 70, 61, 0.3); } }
background: rgba(218, 212, 187, 0.3); } }
.image-matrix-cell.shade-4 {
background: rgba(72, 70, 61, 0.4);
background: rgba(218, 212, 187, 0.4);
transition: background 0s ease;
transition-delay: calc(4s * 0.5);
animation: glow-4 0.5s cubic-bezier(1, 0.01, 0.33, 0.4) forwards;
@@ -743,12 +765,12 @@
@keyframes glow-4 {
0% {
background: #f4f0e1; }
background: #413d34; }
100% {
background: rgba(72, 70, 61, 0.4); } }
background: rgba(218, 212, 187, 0.4); } }
.image-matrix-cell.shade-5 {
background: rgba(72, 70, 61, 0.5);
background: rgba(218, 212, 187, 0.5);
transition: background 0s ease;
transition-delay: calc(5s * 0.5);
animation: glow-5 0.5s cubic-bezier(1, 0.01, 0.33, 0.4) forwards;
@@ -756,12 +778,12 @@
@keyframes glow-5 {
0% {
background: #f4f0e1; }
background: #413d34; }
100% {
background: rgba(72, 70, 61, 0.5); } }
background: rgba(218, 212, 187, 0.5); } }
.image-matrix-cell.shade-6 {
background: rgba(72, 70, 61, 0.6);
background: rgba(218, 212, 187, 0.6);
transition: background 0s ease;
transition-delay: calc(6s * 0.5);
animation: glow-6 0.5s cubic-bezier(1, 0.01, 0.33, 0.4) forwards;
@@ -769,12 +791,12 @@
@keyframes glow-6 {
0% {
background: #f4f0e1; }
background: #413d34; }
100% {
background: rgba(72, 70, 61, 0.6); } }
background: rgba(218, 212, 187, 0.6); } }
.image-matrix-cell.shade-7 {
background: rgba(72, 70, 61, 0.7);
background: rgba(218, 212, 187, 0.7);
transition: background 0s ease;
transition-delay: calc(7s * 0.5);
animation: glow-7 0.5s cubic-bezier(1, 0.01, 0.33, 0.4) forwards;
@@ -782,12 +804,12 @@
@keyframes glow-7 {
0% {
background: #f4f0e1; }
background: #413d34; }
100% {
background: rgba(72, 70, 61, 0.7); } }
background: rgba(218, 212, 187, 0.7); } }
.image-matrix-cell.shade-8 {
background: rgba(72, 70, 61, 0.8);
background: rgba(218, 212, 187, 0.8);
transition: background 0s ease;
transition-delay: calc(8s * 0.5);
animation: glow-8 0.5s cubic-bezier(1, 0.01, 0.33, 0.4) forwards;
@@ -795,12 +817,12 @@
@keyframes glow-8 {
0% {
background: #f4f0e1; }
background: #413d34; }
100% {
background: rgba(72, 70, 61, 0.8); } }
background: rgba(218, 212, 187, 0.8); } }
.image-matrix-cell.shade-9 {
background: rgba(72, 70, 61, 0.9);
background: rgba(218, 212, 187, 0.9);
transition: background 0s ease;
transition-delay: calc(9s * 0.5);
animation: glow-9 0.5s cubic-bezier(1, 0.01, 0.33, 0.4) forwards;
@@ -808,12 +830,12 @@
@keyframes glow-9 {
0% {
background: #f4f0e1; }
background: #413d34; }
100% {
background: rgba(72, 70, 61, 0.9); } }
background: rgba(218, 212, 187, 0.9); } }
.image-matrix-cell.shade-10 {
background: #48463d;
background: #dad4bb;
transition: background 0s ease;
transition-delay: calc(10s * 0.5);
animation: glow-10 0.5s cubic-bezier(1, 0.01, 0.33, 0.4) forwards;
@@ -821,21 +843,21 @@
@keyframes glow-10 {
0% {
background: #f4f0e1; }
background: #413d34; }
100% {
background: #48463d; } }
background: #dad4bb; } }
.nowplaying-info-container .heading {
font-size: 2rem;
margin-top: 5px;
font-family: FOT-Rodin Pro B, sans-serif;
text-shadow: 5px 5px 1px rgba(72, 70, 61, 0.25); }
text-shadow: 5px 5px 1px rgba(218, 212, 187, 0.25); }
.nowplaying-info-cursor.hidden {
animation: cursor-exit 1s cubic-bezier(0, 0.86, 0, 1) forwards; }
.nowplaying-info-cursor {
background: linear-gradient(180deg, #48463d 80%, transparent 80%, transparent 90%, #48463d 100%);
background: linear-gradient(180deg, #dad4bb 80%, transparent 80%, transparent 90%, #dad4bb 100%);
min-width: 20px;
animation: cursor-enter 1s cubic-bezier(0, 0.86, 0, 1) forwards; }
@@ -859,9 +881,9 @@
margin-bottom: 20px;
font-size: 2rem;
/* Change to your preferred font size */
color: #48463d;
color: #dad4bb;
/* Change to your preferred text color */
background-color: #f4f0e1;
background-color: #413d34;
/* Change to your preferred background color */
padding: 6px;
/* Adjust padding as needed */ }
@@ -886,10 +908,10 @@
.time {
font-size: 1.7rem;
color: #48463d; }
color: #dad4bb; }
.sys-tray {
background: #48463d; }
background: #dad4bb; }
@keyframes selected {
0% {
@@ -898,21 +920,32 @@
margin-right: 0px; } }
.nier-settings-container.opening {
animation: container_enter 0.5s cubic-bezier(0.15, 0.79, 0, 1) forwards; }
opacity: 1;
transition: opacity 0.3s ease; }
.nier-settings-container.closing {
margin-right: 2560px;
margin-left: calc(-1 * 2560px);
transition: margin 0.5s cubic-bezier(0.15, 0.79, 0, 1); }
opacity: 0;
transition: opacity 0.3s ease; }
.nier-settings-container {
background: rgba(72, 70, 61, 0.3), url("../assets/glory-tan-ghost.png") no-repeat center; }
.nier-settings-container .nier-button-box {
margin-right: 60px; }
.nier-settings-container .nier-button-box-selected {
margin-right: 0px; }
.nier-settings-container .nier-button-container-selected .nier-button-hover-icon {
opacity: 1; }
.nier-geom-bg-cell {
opacity: 0; }
.nier-geom-bg-cell-enter {
opacity: 0.6;
transition: opacity 0.4s cubic-bezier(0.26, 1.22, 0.37, 1.94); }
.nier-geom-bg-cell-leave {
opacity: 0;
transition: opacity 0.4s cubic-bezier(0.55, -0.55, 1, 0.39); }
.nier-settings-container .nier-button-box {
margin-right: 60px; }
.nier-settings-container .nier-button-box-selected {
margin-right: 0px; }
.nier-settings-container .nier-button-container-selected .nier-button-hover-icon {
opacity: 1; }
.nier-settings-1-container .heading {
font-size: 70px;
@@ -947,20 +980,27 @@
margin-left: 0px; } }
.nier-settings-1-container {
background: url("../../../wallpapers/nier.png"); }
background: url("../../../wallpapers/nier.png");
transition: margin 0.2s cubic-bezier(0.15, 0.79, 0, 1), opacity 1s ease; }
.nier-settings-2-container {
background: rgba(194, 189, 166, 0.9);
background: rgba(87, 84, 74, 0.9);
transition: margin 0.2s cubic-bezier(0.15, 0.79, 0, 1), opacity 1s ease; }
.nier-settings-3-container {
background: rgba(194, 189, 166, 0.6);
background: rgba(87, 84, 74, 0.6);
transition: margin 0.2s cubic-bezier(0.15, 0.79, 0, 1), opacity 1s ease; }
.nier-settings-4-container {
background: rgba(194, 189, 166, 0.4);
background: rgba(87, 84, 74, 0.4);
transition: margin 0.2s cubic-bezier(0.15, 0.79, 0, 1), opacity 1s ease; }
.nier-settings-1-container.closing {
margin-right: calc(2560px / 4);
margin-left: calc(-1 * 2560px / 4);
opacity: 0;
transition: margin 0.2s cubic-bezier(0.15, 0.79, 0, 1), opacity 0.2s ease; }
.nier-settings-2-container.closing {
margin-right: calc(2560px/ 4);
margin-left: calc(-1 * 2560px/ 4);
@@ -979,11 +1019,71 @@
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; }
.notify-card {
opacity: 0; }
.nier-geom-select {
background: transparent;
border: 5px #48463d solid;
border-radius: 8px; }
.notify-card-accent {
background: #dad4bb;
min-width: 60px; }
.notify-card-accent.critical {
background: #cd664d; }
.notify-card-accent.low {
background: #a0c490; }
.notify-card.enter {
opacity: 1; }
.notify-card.enter .notify-card-accent {
min-width: 10px;
transition: min-width 0.2s cubic-bezier(0.03, 0.59, 0.08, 0.97);
transition-delay: 0.15s; }
.notify-card.leave {
opacity: 0; }
.notify-card-hider {
background: linear-gradient(90deg, transparent 0%, transparent 50%, #dad4bb 50%, #dad4bb 100%);
background-size: 200% 100%; }
.notify-card-hider.enter {
background-position: -100% 0;
transition: background-position 0.3s cubic-bezier(0.15, 0.79, 0, 1); }
.notify-card-hider.enter-phase-2 {
background-position: -200% 0;
transition: background-position 0.3s cubic-bezier(0.48, 0.09, 0.82, -0.12); }
.notify-card-hider.leave {
background-position: -100% 0;
transition: background-position 0.3s cubic-bezier(0.15, 0.79, 0, 1); }
.notify-card-hider.leave-phase-2 {
background-position: 0 0;
transition: background-position 0.3s cubic-bezier(0.48, 0.09, 0.82, -0.12); }
.notify-card-hider.right {
background: linear-gradient(90deg, #dad4bb 0%, #dad4bb 50%, transparent 50%, transparent 100%);
background-size: 100% 100%; }
.notify-card-hider.right.enter {
background-position: -100% 0;
transition: background-position 0.3s cubic-bezier(0.15, 0.79, 0, 1); }
.notify-card-hider.right.enter-phase-2 {
background-position: -200% 0;
transition: background-position 0.3s cubic-bezier(0.48, 0.09, 0.82, -0.12); }
.notify-card-hider.right.leave {
background-position: -100% 0;
transition: background-position 0.3s cubic-bezier(0.15, 0.79, 0, 1); }
.notify-card-hider.right.leave-phase-2 {
background-position: 0 0;
transition: background-position 0.3s cubic-bezier(0.48, 0.09, 0.82, -0.12); }
.notify-card-content {
min-height: 100px;
min-width: 500px;
padding: 20px;
padding-left: 20px;
background: #413d34; }
.notify-card-content .notify-card-title {
font-size: 1.5rem;
font-weight: bolder;
color: #dad4bb; }
.notify-card-content .notify-card-body {
font-size: 1.2rem;
color: #b3ac92; }

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

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

20
components/ags/style/widgets/applauncher.scss
View File

@@ -1,25 +1,13 @@
@import "../color";
// .app-launcher-search {
// background: black;
// color: white;
// min-height: 200px;
// }
.app-launcher-search {
margin-left: 35px;
margin-right: 60px;
margin-bottom: 20px;
font-size: 2rem; /* Change to your preferred font size */
color: $brown; /* Change to your preferred text color */
background-color: $highlight; /* Change to your preferred background color */
// border: 4px solid $brown; /* Change to your preferred border color */
padding: 6px; /* Adjust padding as needed */
}
.app-launcher-search:focus {
// border-width: 7px; /* Change to your preferred border color on focus */
// background-color: $highlight; /* Change to your preferred background color on focus */
font-size: 2rem;
color: $brown;
background-color: $highlight;
padding: 6px;
}
.app-launcher {

93
components/ags/style/widgets/imagematrix.scss
View File

@@ -1,5 +1,53 @@
@import "../color";
.nowplaying-hider {
background: $brown;
min-width: 1px;
}
.cava-vis {
background: transparent;
margin-right: 0px;
margin-top: calc(3.5rem + 5px);
margin-bottom: calc(2rem + 5px);
margin-left: -5px;
transition: background 1s ease;
}
.cava-vis.hiding {
background: rgba($brown,0.5);
transition: background 1s ease;
}
.cava-bar-thick {
background: linear-gradient(
120deg,
$brown 0%,
$brown 40%,
rgba($brown, 0.25) 40%,
rgba($brown, 0.25) 60%,
$brown 60%,
$brown 100%,
);
background-size: 100% 10%;
min-width: 25px;
}
.cava-bar-thin {
background: linear-gradient(
250deg,
$brown 0%,
$brown 40%,
rgba($brown, 0.25) 40%,
rgba($brown, 0.25) 60%,
$brown 60%,
$brown 100%,
);
background-size: 100% 10%;
min-width: 15px;
margin-right: 5px;
}
.player-buttons.pressed:hover {
.heading {
text-shadow: 5px 5px 1px rgba($brown, 0.25);
@@ -29,24 +77,15 @@
.player-buttons {
.heading {
font-size: 3.5rem;
// margin-rigsht: 5px;
margin-bottom: -10px;
margin-top: 5px;
text-shadow: 5px 5px 1px rgba($brown, 0.25);
transition: padding 0.3s cubic-bezier(0, 1, 0, 1),
margin 0.3s cubic-bezier(0, 1, 0, 1),
text-shadow 0.3s cubic-bezier(0, 1, 0, 1);
// text-shadow: 5px 5px 1px rgba($brown, 0.25);
}
}
.image-matrix-container {
padding-right: 10px;
border-right: $brown 5px solid;
margin-right: 20px;
}
.image-matrix-row.nohover {
margin: 0px;
transition: margin 0.1s cubic-bezier(1, -0.01, 1, 0.1);
@@ -54,41 +93,11 @@
.image-matrix-row.hover {
margin-left: -15px;
// margin-right: -50px;
// padding-left: 1px;
// margin-right: -10px;
}
.image-matrix-col {
.image-matrix-container {
border: $brown 10px solid;
padding: 5px;
}
.image-matrix-cell {
// background: $tan;
transition: opacity 1s ease;
}
@for $i from 0 through 10 {
.image-matrix-cell.shade-#{$i} {
background: rgba($brown, $i * 0.1);
transition: background 0s ease;
transition-delay: calc(#{$i}s * 0.5);
animation: glow-#{$i} 0.5s cubic-bezier(1, 0.01, 0.33, 0.4) forwards;
animation-delay: calc(#{$i}s * 0.5);
}
@keyframes glow-#{$i} {
0% {
background: $highlight;
}
100% {
// box-shadow: 0px 0px 5px transparent;
background: rgba($brown, $i * 0.1);
}
}
margin-right: 10px;
}
@mixin glow($time) {
@@ -120,7 +129,6 @@
@keyframes cursor-enter {
0% {
// margin-top: 7px;
margin-bottom: calc(2rem + 7px);
}
100% {
@@ -134,7 +142,6 @@
margin-bottom: 0px;
}
100% {
// margin-top: -2rem;
margin-bottom: calc(2rem + 7px);
}
}

10
components/ags/style/widgets/top.scss
View File

@@ -1,7 +1,7 @@
.top {
margin-bottom: -60px;
}
.under-workspaces {
// margin-top: 20px;
margin-top: -1px;
margin-top: -6px;
}
.bottombar {
margin-bottom: 65px;
}

9
components/ags/style/widgets/workspace.scss
View File

@@ -4,8 +4,6 @@
.workspace-button-container.active-no-hover {
.nier-long-button {
@include long-button-hover;
//
// padding-bottom: 0px;
label {
transition: background 0.3s cubic-bezier(0.15, 0.79, 0, 1);
animation: active-label 0.5s cubic-bezier(0.15, 0.79, 0, 1) forwards;
@@ -18,7 +16,6 @@
.workspace-button-container.active {
.nier-long-button {
// padding-bottom: 0px;
label {
transition: background 0.3s cubic-bezier(0.15, 0.79, 0, 1);
animation: active-label 0.5s cubic-bezier(0.15, 0.79, 0, 1) forwards;
@@ -34,11 +31,6 @@
}
}
// .under-workspaces {
// margin-top: -8px;
// margin-right: 120px;
// }
.workspace-button {
margin-bottom: 10px;
transition: border 0.3s cubic-bezier(0.15, 0.79, 0, 1);
@@ -73,7 +65,6 @@
0% {
margin-bottom: 10px;
border: $brown;
// @include long-button;
}
50% {
padding-bottom: 0px;

116
components/ags/style/windows/notifications.scss Normal file
View File

@@ -0,0 +1,116 @@
@import "../color";
.notify-card {
opacity: 0;
}
.notify-card-accent {
background: $brown;
min-width: 60px;
}
.notify-card-accent.critical {
background: $accent;
}
.notify-card-accent.low {
background: $accent2;
}
.notify-card.enter {
opacity: 1;
.notify-card-accent{
min-width: 10px;
transition: min-width 0.2s cubic-bezier(.03,.59,.08,.97);
transition-delay: 0.15s;
}
}
.notify-card.leave {
opacity: 0;
}
.notify-card-hider {
background:linear-gradient(
90deg,
transparent 0%,
transparent 50%,
$brown 50%,
$brown 100%
);
background-size: 200% 100%;
&.enter {
background-position: -100% 0;
transition: background-position 0.3s cubic-bezier(0.15, 0.79, 0, 1);
}
&.enter-phase-2 {
background-position: -200% 0;
transition: background-position 0.3s cubic-bezier(.48,.09,.82,-0.12);
}
&.leave {
background-position: -100% 0;
transition: background-position 0.3s cubic-bezier(0.15, 0.79, 0, 1);
}
&.leave-phase-2 {
background-position: 0 0;
transition: background-position 0.3s cubic-bezier(.48,.09,.82,-0.12);
}
}
.notify-card-hider.right {
background:linear-gradient(
90deg,
$brown 0%,
$brown 50%,
transparent 50%,
transparent 100%,
);
background-size: 100% 100%;
&.enter {
background-position: -100% 0;
transition: background-position 0.3s cubic-bezier(0.15, 0.79, 0, 1);
}
&.enter-phase-2 {
background-position: -200% 0;
transition: background-position 0.3s cubic-bezier(.48,.09,.82,-0.12);
}
&.leave {
background-position: -100% 0;
transition: background-position 0.3s cubic-bezier(0.15, 0.79, 0, 1);
}
&.leave-phase-2 {
background-position: 0 0;
transition: background-position 0.3s cubic-bezier(.48,.09,.82,-0.12);
}
}
.notify-card-content {
min-height: 100px;
min-width: 500px;
padding: 20px;
padding-left: 20px;
background: $highlight;
.notify-card-title {
font-size: 1.5rem;
font-weight: bolder;
color: $brown;
}
.notify-card-body {
font-size: 1.2rem;
color: $darkBrown;
}
}

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

@@ -19,34 +19,40 @@
}
.nier-settings-container.opening {
animation: container_enter 0.5s cubic-bezier(0.15, 0.79, 0, 1) forwards;
// margin-right: 500px;
opacity: 1;
transition: opacity 0.3s ease;
}
.nier-settings-container.closing {
// background: rgba($brown, 0.05);
margin-right: $screen_width;
margin-left: calc(-1 * #{$screen_width});
transition: margin 0.5s cubic-bezier(0.15, 0.79, 0, 1);
// transition-delay: 0.2s;
opacity: 0;
transition: opacity 0.3s ease;
}
.nier-geom-bg-cell {
opacity: 0;
}
.nier-geom-bg-cell-enter {
opacity: 0.6;
transition: opacity 0.4s cubic-bezier(.26,1.22,.37,1.94);
}
.nier-geom-bg-cell-leave {
opacity: 0;
transition: opacity 0.4s cubic-bezier(.55,-0.55,1,.39);
}
.nier-settings-container {
background: rgba($brown, 0.3),
url("../assets/glory-tan-ghost.png") no-repeat center;
.nier-button-box {
margin-right: 60px;
// transition: margin 0.1s ease-out;
}
.nier-button-box-selected {
margin-right: 0px;
// transition: margin 0.1s ease-out;
}
.nier-button-container-selected {
.nier-button-hover-icon {
opacity: 1;
}
// transition: margin 0.1s ease-out;
}
}
@@ -91,7 +97,7 @@
.nier-settings-1-container {
background: url("../../../wallpapers/nier.png");
// transition: margin 0.2s cubic-bezier(0.15, 0.79, 0, 1), opacity 1s ease;
transition: margin 0.2s cubic-bezier(0.15, 0.79, 0, 1), opacity 1s ease;
}
.nier-settings-2-container {
background: rgba($tan, 0.9);
@@ -107,10 +113,10 @@
}
.nier-settings-1-container.closing {
// margin-right: calc(#{$screen_width} / 4);
// margin-left: calc(-1 * #{$screen_width} / 4);
// opacity: 0;
// transition: margin 0.2s cubic-bezier(0.15, 0.79, 0, 1), opacity 0.2s ease;
margin-right: calc(#{$screen_width} / 4);
margin-left: calc(-1 * #{$screen_width} / 4);
opacity: 0;
transition: margin 0.2s cubic-bezier(0.15, 0.79, 0, 1), opacity 0.2s ease;
}
.nier-settings-2-container.closing {
margin-right: calc(#{$screen_width}/ 4);
@@ -129,11 +135,4 @@
margin-left: calc(-1 * #{$screen_width} / 4);
opacity: 0;
transition: margin 0.8s cubic-bezier(0.15, 0.79, 0, 1), opacity 0.8s ease;
}
// .nier-settings-1-container {
// background: $tan;
// min-width: 500px;
// // transition: margin 0.3s ease;
// // padding-right: 40px;
// }
}

24
components/ags/util.js
View File

@@ -1,25 +1,23 @@
import { App, Utils, Hyprland } from "./imports.js";
import { App, Utils, Hyprland, Variable } from "./imports.js";
const {random, round } = Math;
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; //.join(" ");
return arr;
}
async function get_cursor() {
return Hyprland.sendMessage("cursorpos").then((res) => {
print("res ", res);
return res.split(",").map((n) => Number(n));
});
}
@@ -27,9 +25,14 @@ async function get_cursor() {
const home = `/home/${Utils.exec("whoami")}`;
const themedir = App.configDir.split("/").slice(0, -2).join("/");
const dark = Variable(false, {});
globalThis.dark = dark;
const assetsDir = () => `${App.configDir}/assets/${dark.value ? "dark" : "light"}`;
const scss = App.configDir + "/style/style.scss";
const css = App.configDir + "/style/style.css";
const { execAsync } = Utils;
const { exec } = Utils;
const SCREEN_WIDTH = Number(
@@ -42,8 +45,8 @@ const SCREEN_HEIGHT = Number(
`bash -c "xrandr --current | grep '*' | uniq | awk '{print $1}' | cut -d 'x' -f2 | head -1"`
)
);
globalThis["SCREEN_WIDTH"] = SCREEN_WIDTH;
globalThis["SCREEN_HEIGHT"] = SCREEN_HEIGHT;
const rand_int = (a,b) => round(random()*(b-a)+a);
export {
arradd,
@@ -55,4 +58,7 @@ export {
SCREEN_HEIGHT,
SCREEN_WIDTH,
get_cursor,
rand_int,
dark,
assetsDir,
};

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

@@ -1,19 +1,19 @@
import { Widget, App, Utils, Bluetooth, Variable } from "../imports.js";
import { NierButtonGroup, NierButton } from "../nier/buttons.js";
import { NierSliderButton } from "../nier/slider.js";
import { Widget, Bluetooth, Variable } from "../imports.js";
import { NierButton } from "../nier/buttons.js";
import { NierDropDownButton } from "../nier/dropdown.js";
import { SCREEN_WIDTH, arradd, arrremove } from "../util.js";
import { SCREEN_WIDTH } from "../util.js";
const { Window, Label, EventBox, Box, Icon, Revealer } = Widget;
const { execAsync } = Utils;
const { Label } = Widget;
export const BluetoothGroup = (
export const BluetoothGroup = ({
go_to = async (buttons, parent_button) => {},
enabled = Variable(Bluetooth.enabled ? "YES" : "NO", {})
) => {
enabled = Variable(Bluetooth.enabled ? "YES" : "NO", {}),
passAssetsDir = assetsDir
}) => {
return [
Label({ hpack: "start", label: "BLUETOOTH", classNames: ["heading"] }),
NierDropDownButton({
useAssetsDir: passAssetsDir,
font_size: 30,
label: "enabled",
current: enabled,
@@ -29,6 +29,7 @@ export const BluetoothGroup = (
],
}),
NierButton({
useAssetsDir: passAssetsDir,
font_size: 30,
label: "devices",
handleClick: async (self, event) => {

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

@@ -1,19 +1,12 @@
// importing
import {
Hyprland,
Notifications,
Mpris,
Audio,
Battery,
SystemTray,
App,
Widget,
Utils,
Variable,
} from "../imports.js";
import { NierButton, NierButtonGroup } from "../nier/buttons.js";
import { NierButton } from "../nier/buttons.js";
import { SCREEN_HEIGHT, SCREEN_WIDTH, arradd, arrremove } from "../util.js";
import { assetsDir,dark } from "../util.js";
const { Box, Label, Icon, Button } = Widget;
const { execAsync } = Utils;
@@ -42,11 +35,18 @@ const SysTray = () =>
],
});
export const Info = () =>
export const Info = ({
useAssetsDir = assetsDir,
parentDir = App.configDir
}) =>
Box({
vpack: "end",
vexpand: true,
classNames: ["info"],
css: `margin-bottom: 30px;`,
children: [
Label({
css: "margin-left:35px;margin-right:50px;",
classNames: ["time"],
label: "00:00",
connections: [
@@ -59,6 +59,15 @@ export const Info = () =>
],
],
}),
SysTray(),
NierButton({
useAssetsDir,
label:dark.value?"dark":"light",
handleClick: async (self,event) => {
execAsync(`ags -b settings -t settings`)
await new Promise((r) => {setTimeout(r,1000)})
execAsync(`ags -b banner -c ${parentDir + "/windows/banner/banner.js"}`)
}
})
// SysTray(),
],
});

57
components/ags/widgets/nier_border.js Normal file
View File

@@ -0,0 +1,57 @@
import { Widget } from "../imports.js"
import { SCREEN_WIDTH, get_cursor, assetsDir } from "../util.js"
const { Box, Icon,Scrollable } = Widget
const { round,abs } = Math
export const NierBorder = ({
icon_width = 110,
ratio = 0.5,
y_axis = false,
...props
}) => Scrollable({
...props,
css: `min-width: ${SCREEN_WIDTH}px;min-height: ${round(icon_width/3)}px;`,
child:Box({
children: Array.from({length: SCREEN_WIDTH/icon_width + 1},(_,i) => Icon({
icon: assetsDir() + "/nier-border-full.svg",
size: icon_width,
})),
connections: [
[
100,
(self) => {
get_cursor()
.then((cursor) => {
let [x,y] = cursor;
if (y_axis) {
ratio = y / SCREEN_HEIGHT;
} else {
ratio = x / SCREEN_WIDTH;
}
let child_index = round((SCREEN_WIDTH/icon_width) * ratio);
// print("child index",child_index)
self.children.forEach((child,j) => {
if (abs(j-child_index) <= 1) {
if (child.icon == assetsDir() + "/nier-border-full.svg") {
return;
}
child.icon = assetsDir() + "/nier-border-full.svg";
} else {
if (child.icon == assetsDir() + "/nier-border.svg") {
return;
}
child.icon = assetsDir() + "/nier-border.svg";
}
})
})
.catch((e) => {
print(e)
})
},
]
]
})
});

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

@@ -1,354 +0,0 @@
// importing
import {
Hyprland,
Notifications,
Audio,
Battery,
SystemTray,
App,
Widget,
Utils,
Mpris,
Variable,
} from "../imports.js";
import { NierButton, NierButtonGroup } from "../nier/buttons.js";
import {
SCREEN_HEIGHT,
SCREEN_WIDTH,
arradd,
arrremove,
themedir,
} from "../util.js";
const { Box, Label, Button, EventBox, Revealer } = Widget;
const { execAsync } = Utils;
const { GdkPixbuf, Pango } = imports.gi;
const opacity_map = [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1];
const image_to_matrix = async (inputPath, imagedat, threshold = 128) => {
// Load the image from file
const resizedPixbuf = GdkPixbuf.Pixbuf.new_from_file(inputPath);
// Get pixel data
const pixels = resizedPixbuf.get_pixels();
const rowstride = resizedPixbuf.get_rowstride();
const channels = resizedPixbuf.get_n_channels();
let max = 0;
const darknessMatrix = [];
// Loop through each pixel and calculate lightness
for (let y = 0; y < resizedPixbuf.get_height(); y++) {
let row = [];
for (let x = 0; x < resizedPixbuf.get_width(); x++) {
const index = y * rowstride + x * channels;
const [r, g, b] = pixels.slice(index, index + channels);
// Calculate lightness based on the pixel's intensity (grayscale)
const intensity = Math.round(0.3 * r + 0.59 * g + 0.11 * b);
const darkness = intensity / 255.0; // Normalize to the range [0, 1]
if (darkness > max) {
max = darkness;
}
row.push(darkness);
}
darknessMatrix.push(row);
}
for (let y = 0; y < resizedPixbuf.get_height(); y++) {
for (let x = 0; x < resizedPixbuf.get_width(); x++) {
darknessMatrix[y][x] = darknessMatrix[y][x] + (1 - max);
}
}
imagedat.value = darknessMatrix;
// imagedat.emit("changed");
// You can further process or save the lightnessMatrix as needed
};
export const NowPlaying = ({
rows = 64,
imagedat = Variable(
Array.from({ length: rows }, (_, i) =>
Array.from({ length: rows }, (_, i) => 1)
),
{}
),
cell_width = 15,
cell_height = 15,
preparing_cover = false,
}) =>
Box({
vertical: true,
classNames: ["nowplaying-container"],
children: [
Box({
css: `min-width: ${rows * cell_width + 30 + 30 - 20}px;`,
hpack: "end",
children: [
Button({
hpack: "end",
classNames: ["player-buttons"],
hexpand: true,
child: Label({
label: "⏮",
classNames: ["heading"],
}),
onClicked: async (self) => {
const player = Mpris.players[0];
player.previous();
self.classNames = arradd(self.classNames, "pressed");
await new Promise((r) => setTimeout(r, 100));
self.classNames = arrremove(self.classNames, "pressed");
},
}),
Button({
hpack: "end",
classNames: ["player-buttons"],
// hexpand: true,
child: Label({
label: "▪",
classNames: ["heading"],
connections: [
[
Mpris,
(self) => {
const player = Mpris.players[0];
if (!player) {
return;
}
if (player.play_back_status === "Playing") {
self.label = "⏸";
} else {
self.label = "▪";
}
},
],
],
}),
onClicked: async (self) => {
const player = Mpris.players[0];
if (!player) {
return;
}
player.playPause();
if (player.play_back_status === "Playing") {
self.child.label = "▪";
} else {
self.child.label = "⏸";
}
self.classNames = arradd(self.classNames, "pressed");
console.log(self.classNames);
await new Promise((r) => setTimeout(r, 100));
self.classNames = arrremove(self.classNames, "pressed");
console.log(self.classNames);
},
}),
Button({
hpack: "end",
classNames: ["player-buttons"],
css: "margin-right: 15px;",
// hexpand: true,
child: Label({
label: "⏭",
classNames: ["heading"],
}),
onClicked: async (self) => {
const player = Mpris.players[0];
player.next();
self.classNames = arradd(self.classNames, "pressed");
await new Promise((r) => setTimeout(r, 100));
self.classNames = arrremove(self.classNames, "pressed");
},
}),
],
}),
Box({
classNames: ["image-matrix-container"],
hpack: "center",
children: [
Box({
classNames: ["image-matrix-col"],
vertical: true,
children: [
...Array.from({ length: rows }, (_, i) =>
EventBox({
child: Box({
classNames: ["image-matrix-row", `image-matrix-row-${i}`],
children: [
...Array.from({ length: rows }, (_, j) =>
Box({
classNames: [
"image-matrix-cell",
`image-matrix-cell-${i}-${j}`,
],
css: `min-width: ${cell_width}px; min-height: ${cell_height}px;`,
})
),
],
}),
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"
);
});
}),
})
),
],
connections: [
[
imagedat,
(self) => {
if (preparing_cover) {
return;
}
console.log("got matrix update");
for (let y = 0; y < imagedat.value.length; y++) {
for (let x = 0; x < imagedat.value[y].length; x++) {
let cell = self.children[y].child.children[x];
if (!cell) {
continue;
}
let opacity =
opacity_map[
Math.round(
(1 - imagedat.value[y][x]) *
(opacity_map.length - 1)
)
];
for (let op of opacity_map) {
cell.classNames = arrremove(
cell.classNames,
`shade-${Math.round(op * 10)}`
);
}
cell.classNames = arradd(
cell.classNames,
`shade-${Math.round(opacity * 10)}`
);
}
}
console.log("relocking cover");
},
"changed",
],
[
Mpris,
(self) => {
const player = Mpris.players[0];
if (!player) {
return;
}
if (preparing_cover) {
console.log("skipping mpris");
return;
}
console.log("preparing cover");
preparing_cover = true;
execAsync(["cp", player.cover_path, "/tmp/to_bg.png"])
.then((out) => {
execAsync([
themedir + "/scripts/prepare_cover.sh",
player.cover_path,
`${rows}`,
])
.then((out) => {
console.log("cover prepared");
Promise.resolve(
image_to_matrix("/tmp/bg.png", imagedat, rows)
).then(() => {
preparing_cover = false;
imagedat.emit("changed");
});
})
.catch((e) => {
preparing_cover = false;
console.log(e);
});
})
.catch((e) => {
preparing_cover = false;
console.log(e);
});
},
],
],
}),
],
}),
Box({
classNames: ["nowplaying-info-container"],
children: [
Revealer({
revealChild: false,
transitionDuration: 1000,
child: Label({
label: "woa",
classNames: ["heading"],
css: `min-width: ${rows * cell_width + 15 + 15 - 20}px;`,
hpack: "start",
xalign: 0,
wrap: true,
max_width_chars: 20,
setup: (self) =>
Utils.timeout(1, () => {
self.set_line_wrap_mode(Pango.WrapMode.WORD_CHAR);
self.set_ellipsize(Pango.EllipsizeMode.END);
}),
}),
transition: "slide_left",
connections: [
[
Mpris,
async (self) => {
const player = Mpris.players[0];
if (!player) {
return;
}
if (player.track_title !== self.child.label) {
let cursor = self.parent.children[1];
await new Promise((r) => setTimeout(r, 1500));
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.classNames = arradd(cursor.classNames, "hidden");
}
},
],
],
}),
Box({
classNames: ["nowplaying-info-cursor"],
}),
],
}),
],
connections: [],
});

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

@@ -1,13 +1,13 @@
import { Widget, App, Audio, Utils, Variable } from "../imports.js";
import { NierButtonGroup, NierButton } from "../nier/buttons.js";
import { Widget,Audio,Variable } from "../imports.js";
import { NierButton } from "../nier/buttons.js";
import { NierSliderButton } from "../nier/slider.js";
import { SCREEN_WIDTH, arradd, arrremove } from "../util.js";
import { assetsDir } from "../util.js";
const { Window, Label, EventBox, Box, Icon, Revealer } = Widget;
const { execAsync } = Utils;
const {Label} = Widget;
let volume_slider = ({ volume_ratio = 0, type = "speaker", stream = null }) =>
let volume_slider = ({ volume_ratio = 0, type = "speaker", stream = null, useAssetsDir }) =>
NierSliderButton({
useAssetsDir,
label: stream ? stream.description : type,
boxes: 20,
font_size: 30,
@@ -42,16 +42,18 @@ let volume_slider = ({ volume_ratio = 0, type = "speaker", stream = null }) =>
],
});
export const VolumeGroup = (
export const VolumeGroup = ({
go_to = async (buttons, parent_button) => {},
volume_ratio = Variable(0.0, {}),
mic_volume_ratio = Variable(0.0, {})
) => {
mic_volume_ratio = Variable(0.0, {}),
passAssetsDir = assetsDir
}) => {
return [
Label({ hpack: "start", label: "VOLUME", classNames: ["heading"] }),
volume_slider({ type: "speaker", volume_ratio: volume_ratio }),
volume_slider({ type: "microphone", volume_ratio: mic_volume_ratio }),
volume_slider({useAssetsDir: passAssetsDir, type: "speaker", volume_ratio: volume_ratio }),
volume_slider({useAssetsDir: passAssetsDir, type: "microphone", volume_ratio: mic_volume_ratio }),
NierButton({
useAssetsDir: passAssetsDir,
container_style: "padding-top: 40px;",
label: "Applications",
font_size: 30,
@@ -63,6 +65,7 @@ export const VolumeGroup = (
...Array.from(Audio.apps).map((stream) => {
console.log(stream);
return volume_slider({
useAssetsDir: passAssetsDir,
stream: stream,
volume_ratio: Variable(stream.volume || 0, {}),
});
@@ -77,6 +80,7 @@ export const VolumeGroup = (
...Array.from(Audio.speakers).map((stream) => {
console.log(stream);
return volume_slider({
useAssetsDir: passAssetsDir,
stream: stream,
volume_ratio: Variable(stream.volume || 0, {}),
});
@@ -86,10 +90,10 @@ export const VolumeGroup = (
...Array.from(Audio.microphones).map((stream) => {
console.log(stream);
return volume_slider({
useAssetsDir: passAssetsDir,
stream: stream,
volume_ratio: Variable(stream.volume || 0, {}),
});
}),
// Label({ hpack: "start", label: "", className: ["heading"] }),
];
};

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

@@ -1,21 +1,20 @@
import { Widget, App, Utils, Network, Variable } from "../imports.js";
import { NierButtonGroup, NierButton } from "../nier/buttons.js";
import { NierSliderButton } from "../nier/slider.js";
import { Widget, Network, Variable } from "../imports.js";
import { NierDropDownButton } from "../nier/dropdown.js";
import { SCREEN_WIDTH, arradd, arrremove } from "../util.js";
import { SCREEN_WIDTH,assetsDir } from "../util.js";
const { Window, Label, EventBox, Box, Icon, Revealer } = Widget;
const { execAsync } = Utils;
const { Label } = Widget;
export const WifiGroup = (
export const WifiGroup = ({
enabled = Variable(Network.wifi.enabled ? "YES" : "NO", {}),
current_ssid = Variable("", {}),
current_networks = Variable(["loading..."], {}),
go_to = (buttons, self) => {}
) => {
go_to = (buttons, self) => {},
passAssetsDir = assetsDir
}) => {
return [
Label({ hpack: "start", label: "WIFI", classNames: ["heading"] }),
NierDropDownButton({
useAssetsDir: passAssetsDir,
font_size: 30,
label: "enabled",
current: enabled,
@@ -31,12 +30,12 @@ export const WifiGroup = (
],
}),
NierDropDownButton({
useAssetsDir: passAssetsDir,
font_size: 30,
label: "connect",
current: current_ssid,
options: current_networks,
popup_x_offset: SCREEN_WIDTH / 4,
// setup: (self) => {},
connections: [
[
10000,

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

@@ -1,21 +1,11 @@
// importing
import {
Hyprland,
Notifications,
Mpris,
Audio,
Battery,
SystemTray,
App,
Widget,
Utils,
Variable,
} from "../imports.js";
import { NierLongButton, NierButtonGroup } from "../nier/buttons.js";
import { SCREEN_HEIGHT, SCREEN_WIDTH, arradd, arrremove } from "../util.js";
import { SCREEN_WIDTH, arradd, arrremove, assetsDir } from "../util.js";
const { Box, Label } = Widget;
const { execAsync } = Utils;
const int_to_string = ({ i, jap = true }) => {
@@ -125,10 +115,6 @@ export const Workspaces = () =>
Hyprland.active.workspace,
async (self) => {
// console.log(
// "workspacec changed to :: ",
// Hyprland.active.workspace.id
// );
if (
!self.classNames.includes(
`workspace-button-${Hyprland.active.workspace.id}`
@@ -142,7 +128,7 @@ export const Workspaces = () =>
self.classNames = arrremove(self.classNames, "active");
self.classNames = arrremove(self.classNames, "active-no-hover");
self.children[0].icon =
App.configDir + "/assets/nier-pointer.svg";
assetsDir() + "/nier-pointer.svg";
} else {
if (
!self.children[1].classNames.includes(
@@ -159,7 +145,7 @@ export const Workspaces = () =>
}
await new Promise((r) => setTimeout(r, 300));
self.children[0].icon =
App.configDir + "/assets/nier-pointer-white.svg";
assetsDir() + "/nier-pointer-select.svg";
}
},
],

445
components/ags/windows/banner/banner.js Normal file
View File

@@ -0,0 +1,445 @@
const resource = (file) => `resource:///com/github/Aylur/ags/${file}.js`;
const require = async (file) => (await import(resource(file))).default;
const service = async (file) => await require(`service/${file}`);
const App = await require("app");
const Widget = await require("widget");
const Utils = await import(resource("utils"));
const Hyprland = await service("hyprland");
const { max, round, abs, sqrt, random } = Math;
const { Window, EventBox, Overlay, Scrollable } = Widget;
const {exec,execAsync} = Utils;
async function get_cursor() {
return Hyprland.sendMessage("cursorpos").then((res) => {
return res.split(",").map((n) => Number(n));
});
}
const SCREEN_WIDTH = Number(
exec(
`bash -c "xrandr --current | grep '*' | uniq | awk '{print $1}' | cut -d 'x' -f1 | head -1"`
)
);
const SCREEN_HEIGHT = Number(
exec(
`bash -c "xrandr --current | grep '*' | uniq | awk '{print $1}' | cut -d 'x' -f2 | head -1"`
)
);
const rand_int = (a,b) => round(random()*(b-a)+a);
const dist_from_center = (x,y,center_x,center_y,width,height) => {
let x_offset = abs(x-center_x)/2;
let y_offset = abs(y-center_y);
return (x_offset**2 + y_offset**2)**0.5;
}
const pos_mapper = (x,y,size1_x,size1_y,size2_x,size2_y) => {
let x_ratio = x/size1_x;
let y_ratio = y/size1_y;
return [x_ratio*size2_x,y_ratio*size2_y];
}
let dark = false
await Utils.execAsync("ags -r dark.value").then((res) => {
dark = res == "true";
}).catch(() => {});
let colors = !dark?[218/255, 212/255, 187/255]:[87/255, 84/255, 74/255];
let colors_2 = (dark)?[218/255, 212/255, 187/255]:[87/255, 84/255, 74/255];
const parentConfigDir = App.configDir.split("/").slice(0,-2).join("/");
const {Gtk} = imports.gi;
const draw_triangle = (context, center_x,center_y, width, height, color, inverted, leftratio,rightratio,yratio) => {
if (leftratio <= 0.001 || rightratio <= 0.001 || yratio <= 0.001) {
return
}
context.setSourceRGBA(...color);
let leftpoint,rightpoint,ypoint;
if (inverted) {
leftpoint = [center_x-width/2,center_y+height/2];
rightpoint = [center_x+width/2,center_y+height/2];
ypoint = [center_x,center_y-height/2];
}
else {
leftpoint = [center_x-width/2,center_y-height/2];
rightpoint = [center_x+width/2,center_y-height/2];
ypoint = [center_x,center_y+height/2];
}
if (leftratio < 0.9){
let vector_left_right = [(rightpoint[0]-leftpoint[0])*(1-leftratio),(rightpoint[1]-leftpoint[1])*(1-leftratio)];
let vector_left_y = [(ypoint[0]-leftpoint[0])*(1-leftratio),(ypoint[1]-leftpoint[1])*(1-leftratio)];
leftpoint = [
leftpoint[0]+vector_left_right[0]/2+vector_left_y[0]/2,
leftpoint[1]+vector_left_right[1]/2+vector_left_y[1]/2
];
}
if (rightratio < 0.9){
let vector_right_left = [(leftpoint[0]-rightpoint[0])*(1-rightratio),(leftpoint[1]-rightpoint[1])*(1-rightratio)];
let vector_right_y = [(ypoint[0]-rightpoint[0])*(1-rightratio),(ypoint[1]-rightpoint[1])*(1-rightratio)];
rightpoint = [
rightpoint[0]+vector_right_left[0]/2+vector_right_y[0]/2,
rightpoint[1]+vector_right_left[1]/2+vector_right_y[1]/2
];
}
if (yratio < 0.9){
let vector_y_left = [(leftpoint[0]-ypoint[0])*(1-yratio),(leftpoint[1]-ypoint[1])*(1-yratio)];
let vector_y_right = [(rightpoint[0]-ypoint[0])*(1-yratio),(rightpoint[1]-ypoint[1])*(1-yratio)];
ypoint = [
ypoint[0]+vector_y_left[0]/2+vector_y_right[0]/2,
ypoint[1]+vector_y_left[1]/2+vector_y_right[1]/2
];
}
context.moveTo(...leftpoint);
context.lineTo(...rightpoint);
context.lineTo(...ypoint);
context.fill();
}
const NierGeom = ({
cell_width = 350,
cell_height = round(sqrt(cell_width*cell_width-(cell_width/2)*(cell_width/2))),
cell_grid_1 = new Gtk.DrawingArea(),
wait_for_draw_1 = false,
draw_t_1 = 0,
draw_duration_1 = 1000,
final_draw_1 = true,
cell_grid_2 = new Gtk.DrawingArea(),
wait_for_draw_2 = false,
draw_t_2 = 0,
draw_duration_2 = 1000,
final_draw_2 = true,
gap = 0,
rows = round(SCREEN_HEIGHT/cell_height) + 1,
cols = round(SCREEN_WIDTH*2/cell_width) + 1,
cells_1 = Array.from({ length: rows*cols }, (_, i) => {return [0,0 ,0,0 ,0,0 ,0,0, 0,0]}),
cells_2 = Array.from({ length: rows*cols }, (_, i) => {return [0,0 ,0,0 ,0,0 ,0,0, 0,0]}),
opacity_step = 10,
vertex_step = 10,
}) =>
Window({
name: "geom",
classNames: ["geom"],
margin: [0, 0, 0, 0],
anchor: ["top", "left", "bottom", "right"],
exclusivity: "ignore",
layer: "top",
focusable: false,
setup: (self) =>
Utils.timeout(1, () => {
cell_grid_1.connect("draw", (self, context) => {
let stable = true;
for (let i = 0; i < rows*cols; i++) {
let x = i%cols;
let y = (i-x)/cols;
let [c_opacity,t_opacity, c_left,t_left ,c_right,t_right ,c_y,t_y,inited,s_override] = cells_1[i]
if (s_override == true) {
continue
}
if (abs(c_opacity-t_opacity) > 0.01) {
stable = false;
c_opacity = c_opacity + (t_opacity-c_opacity)/opacity_step;
}
if (abs(c_left-t_left) > 0.001) {
stable = false;
c_left = c_left + (t_left-c_left)/vertex_step;
}
if (abs(c_right-t_right) > 0.001) {
stable = false;
c_right = c_right + (t_right-c_right)/vertex_step;
}
if (abs(c_y-t_y) > 0.001) {
stable = false;
c_y = c_y + (t_y-c_y)/vertex_step;
}
draw_triangle(context, x*cell_width/2, y*cell_height, cell_width - gap, cell_height - gap/2, [...colors_2,c_opacity], (x%2==0?y%2==1:y%2==0),c_left,c_right,c_y);
cells_1[i] = [c_opacity,t_opacity, c_left,t_left ,c_right,t_right ,c_y,t_y,inited,s_override]
}
wait_for_draw_1 = false;
if (final_draw_1 && !stable){
cell_grid_1.queue_draw();
} else if (final_draw_1 && stable) {
wait_for_complete_draw_1 = false;
}
})
cell_grid_2.connect("draw", (self, context) => {
let stable = true;
for (let i = 0; i < rows*cols; i++) {
let x = i%cols;
let y = (i-x)/cols;
let [c_opacity,t_opacity, c_left,t_left ,c_right,t_right ,c_y,t_y,inited,s_override] = cells_2[i]
if (s_override == true) {
continue
}
if (abs(c_opacity-t_opacity) > 0.01) {
stable = false;
c_opacity = c_opacity + (t_opacity-c_opacity)/opacity_step;
}
if (abs(c_left-t_left) > 0.001) {
stable = false;
c_left = c_left + (t_left-c_left)/vertex_step;
}
if (abs(c_right-t_right) > 0.001) {
stable = false;
c_right = c_right + (t_right-c_right)/vertex_step;
}
if (abs(c_y-t_y) > 0.001) {
stable = false;
c_y = c_y + (t_y-c_y)/vertex_step;
}
draw_triangle(context, x*cell_width/2, y*cell_height, cell_width - gap, cell_height - gap/2, [...colors,c_opacity], (x%2==0?y%2==1:y%2==0),c_left,c_right,c_y);
cells_2[i] = [c_opacity,t_opacity, c_left,t_left ,c_right,t_right ,c_y,t_y,inited,s_override]
}
wait_for_draw_2 = false;
if (final_draw_2 && !stable){
cell_grid_2.queue_draw();
} else if (final_draw_2 && stable) {
wait_for_complete_draw_2 = false;
}
})
}),
child: EventBox({
classNames: ["nier-geom-container"],
child: Overlay({
child: Scrollable({
child:cell_grid_1,
setup: (self) => Utils.timeout(1, async () => {try{
////////////////////////////////////////////////////////////////////////////////////////////////////////
// first part
////////////////////////////////////////////////////////////////////////////////////////////////////////
let start = Date.now();
draw_duration_1 = 1000;
let fps = 30;
draw_t_1 = start
final_draw_1 = false;
vertex_step = 10;
let [real_x,real_y] = await get_cursor();
let [center_x,center_y] = pos_mapper(real_x,real_y,SCREEN_WIDTH,SCREEN_HEIGHT,cols,rows);
let max_dist = (max(center_x,rows-center_x)**2 + max(center_y,cols-center_y)**2)**0.5 + 1;
while (true) {
let frame_start = Date.now();
let time_ratio = (draw_t_1 - start)/draw_duration_1;
for (let i = 0; i< rows*cols; i++){
let x = i%cols;
let y = (i-x)/cols;
let [c_opacity,t_opacity, c_left,t_left ,c_right,t_right ,c_y,t_y,inited,s_override] = cells_1[i]
if (s_override) {
entered = true;
return
}
let dist = dist_from_center(x,y,center_x,center_y,cols,rows)
if (time_ratio>1?1:dist < max_dist*time_ratio*(rand_int(50,100)/100)) {
inited = true;
c_opacity = 0.6
t_opacity = 0.6
if (dist < 2) {
t_y = 1;
[c_left,t_left,c_right,t_right] = [1,1,1,1]
}else if (x < center_x) {
t_left = 1;
[c_right,t_right,c_y,t_y] = [1,1,1,1]
} else {
t_right = 1;
[c_left,t_left,c_y,t_y] = [1,1,1,1]
}
}
cells_1[i] = [c_opacity,t_opacity, c_left,t_left ,c_right,t_right ,c_y,t_y,inited,s_override];
}
final_draw_1 = true;
wait_for_complete_draw_1 = true;
wait_for_draw_1 = true;
cell_grid_1.queue_draw();
while (wait_for_draw_1) {
await new Promise((r) => setTimeout(r, 1));
}
if (time_ratio > 0.5) { // this cud need changing
////////////////////////////////////////////////////////////////////////////////////////////////////////
// second part
////////////////////////////////////////////////////////////////////////////////////////////////////////
let start = Date.now();
draw_duration_2 = 1000;
let fps = 30;
draw_t_2 = start
final_draw_2 = false;
vertex_step = 10;
let [real_x,real_y] = await get_cursor();
let [center_x,center_y] = pos_mapper(real_x,real_y,SCREEN_WIDTH,SCREEN_HEIGHT,cols,rows);
let max_dist = (max(center_x,rows-center_x)**2 + max(center_y,cols-center_y)**2)**0.5 + 1;
while (true) {
let frame_start = Date.now();
let time_ratio = (draw_t_2 - start)/draw_duration_2;
for (let i = 0; i< rows*cols; i++){
let x = i%cols;
let y = (i-x)/cols;
let [c_opacity,t_opacity, c_left,t_left ,c_right,t_right ,c_y,t_y,inited,s_override] = cells_2[i]
let dist = dist_from_center(x,y,center_x,center_y,cols,rows)
if (time_ratio>1?1:dist > max_dist*(1-time_ratio)*(rand_int(50,100)/100)) {
inited = true;
c_opacity = 1
t_opacity = 1
if (dist < 2) {
t_y = 1;
[c_left,t_left,c_right,t_right] = [1,1,1,1]
}else if (x < center_x) {
t_right = 1;
[c_left,t_left,c_y,t_y] = [1,1,1,1]
} else {
t_left = 1;
[c_right,t_right,c_y,t_y] = [1,1,1,1]
}
}
cells_2[i] = [c_opacity,t_opacity, c_left,t_left ,c_right,t_right ,c_y,t_y,inited,s_override];
}
final_draw_2 = true;
wait_for_complete_draw_2 = true;
wait_for_draw_2 = true;
cell_grid_2.queue_draw();
while (wait_for_draw_2) {
await new Promise((r) => setTimeout(r, 1));
}
if (time_ratio > 1) { // this cud need changing
entered = true;
await new Promise((r) => setTimeout(r, 100));
await execAsync(`ags -r dark.value=${!dark}`)
await new Promise((r) => setTimeout(r, 1500));
////////////////////////////////////////////////////////////////////////////////////////////////////////
// third part
////////////////////////////////////////////////////////////////////////////////////////////////////////
let start = Date.now();
draw_duration_2 = 5000;
draw_duration_1 = 5000;
let fps = 15;
draw_t_2 = start
final_draw_2 = false;
draw_t_1 = start
final_draw_1 = false;
vertex_step = 2;
let [real_x,real_y] = await get_cursor();
let [center_x,center_y] = pos_mapper(real_x,real_y,SCREEN_WIDTH,SCREEN_HEIGHT,cols,rows);
let max_dist = (max(center_x,rows-center_x)**2 + max(center_y,cols-center_y)**2)**0.5 + 1;
while (true) {
let frame_start = Date.now();
let time_ratio = (draw_t_2 - start)/draw_duration_2;
for (let i = 0; i< rows*cols; i++){
let x = i%cols;
let y = (i-x)/cols;
let [c_opacity,t_opacity, c_left,t_left ,c_right,t_right ,c_y,t_y,inited,s_override] = cells_2[i]
let dist = dist_from_center(x,y,center_x,center_y,cols,rows)
if (time_ratio>1?1:dist < max_dist*(time_ratio)*(rand_int(50,100)/100)) {
inited = true;
c_opacity = 0.6
t_opacity = 0.6
if (x < center_x) {
t_right = 0;
[c_left,t_left,c_y,t_y] = [1,1,1,1]
} else {
t_left = 0;
[c_right,t_right,c_y,t_y] = [1,1,1,1]
}
}
cells_2[i] = [c_opacity,t_opacity, c_left,t_left ,c_right,t_right ,c_y,t_y,inited,s_override];
[c_opacity,t_opacity, c_left,t_left ,c_right,t_right ,c_y,t_y,inited,s_override] = cells_1[i]
if (time_ratio>1?1:dist < max_dist*(time_ratio)*(rand_int(50,100)/100)) {
inited = true;
c_opacity = 1
t_opacity = 1
if (x < center_x) {
t_right = 0;
[c_left,t_left,c_y,t_y] = [1,1,1,1]
} else {
t_left = 0;
[c_right,t_right,c_y,t_y] = [1,1,1,1]
}
cells_1[i] = [c_opacity,t_opacity, c_left,t_left ,c_right,t_right ,c_y,t_y,inited,s_override];
}
}
final_draw_2 = true;
final_draw_1 = true;
wait_for_complete_draw_1 = true;
wait_for_complete_draw_2 = true;
wait_for_draw_1 = true;
wait_for_draw_2 = true;
cell_grid_1.queue_draw();
cell_grid_2.queue_draw();
while (wait_for_draw_2 && wait_for_draw_1) {
await new Promise((r) => setTimeout(r, 1));
}
if (time_ratio > 0.5) { // this cud need changing
entered = true;
App.quit()
}
draw_t_2 = Date.now();
await new Promise((r) => setTimeout(r, max(0,1000/fps - (draw_t_2-frame_start))));
}
}
// draw_t_1++;
draw_t_2 = Date.now();
await new Promise((r) => setTimeout(r, max(0,1000/fps - (draw_t_2-frame_start))));
}
////////////////////////////////////////////////////////////////////////////////////////////////////////
}
draw_t_1 = Date.now();
await new Promise((r) => setTimeout(r, max(0,1000/fps - (draw_t_1-frame_start))));
}
////////////////////////////////////////////////////////////////////////////////////////////////////////
}catch(e){print(e)}})
}),
overlays: [
cell_grid_2
]
}),
}),
});
export default {
windows: [
NierGeom({})
]
}

460
components/ags/windows/geom/geom.js Normal file
View File

@@ -0,0 +1,460 @@
const resource = (file) => `resource:///com/github/Aylur/ags/${file}.js`;
const require = async (file) => (await import(resource(file))).default;
const service = async (file) => await require(`service/${file}`);
const App = await require("app");
const Widget = await require("widget");
const Variable = await require("variable");
const Utils = await import(resource("utils"));
const Hyprland = await service("hyprland");
const { min, max, round, abs, sqrt, random } = Math;
const { Gdk } = imports.gi;
const { Window, EventBox, Box, Overlay,Scrollable } = Widget;
const {exec} = Utils;
async function get_cursor() {
return Hyprland.sendMessage("cursorpos").then((res) => {
return res.split(",").map((n) => Number(n));
});
}
const SCREEN_WIDTH = Number(
exec(
`bash -c "xrandr --current | grep '*' | uniq | awk '{print $1}' | cut -d 'x' -f1 | head -1"`
)
);
const SCREEN_HEIGHT = Number(
exec(
`bash -c "xrandr --current | grep '*' | uniq | awk '{print $1}' | cut -d 'x' -f2 | head -1"`
)
);
const rand_int = (a,b) => round(random()*(b-a)+a);
const dist_from_center = (x,y,center_x,center_y,width,height) => {
let x_offset = abs(x-center_x)/2;
let y_offset = abs(y-center_y);
return (x_offset**2 + y_offset**2)**0.5;
}
const pos_mapper = (x,y,size1_x,size1_y,size2_x,size2_y) => {
let x_ratio = x/size1_x;
let y_ratio = y/size1_y;
return [x_ratio*size2_x,y_ratio*size2_y];
}
let dark = false
await Utils.execAsync("ags -r dark.value").then((res) => {
dark = res == "true";
}).catch(() => {});
let colors = dark?[218/255, 212/255, 187/255]:[87/255, 84/255, 74/255];
const parentConfigDir = App.configDir.split("/").slice(0,-2).join("/");
const {Gtk} = imports.gi;
const draw_triangle = (context, center_x,center_y, width, height, color, inverted, leftratio,rightratio,yratio) => {
if (leftratio <= 0.001 || rightratio <= 0.001 || yratio <= 0.001) {
return
}
context.setSourceRGBA(...color);
let leftpoint,rightpoint,ypoint;
if (inverted) {
leftpoint = [center_x-width/2,center_y+height/2];
rightpoint = [center_x+width/2,center_y+height/2];
ypoint = [center_x,center_y-height/2];
}
else {
leftpoint = [center_x-width/2,center_y-height/2];
rightpoint = [center_x+width/2,center_y-height/2];
ypoint = [center_x,center_y+height/2];
}
if (leftratio < 0.9){
let vector_left_right = [(rightpoint[0]-leftpoint[0])*(1-leftratio),(rightpoint[1]-leftpoint[1])*(1-leftratio)];
let vector_left_y = [(ypoint[0]-leftpoint[0])*(1-leftratio),(ypoint[1]-leftpoint[1])*(1-leftratio)];
leftpoint = [
leftpoint[0]+vector_left_right[0]/2+vector_left_y[0]/2,
leftpoint[1]+vector_left_right[1]/2+vector_left_y[1]/2
];
}
if (rightratio < 0.9){
let vector_right_left = [(leftpoint[0]-rightpoint[0])*(1-rightratio),(leftpoint[1]-rightpoint[1])*(1-rightratio)];
let vector_right_y = [(ypoint[0]-rightpoint[0])*(1-rightratio),(ypoint[1]-rightpoint[1])*(1-rightratio)];
rightpoint = [
rightpoint[0]+vector_right_left[0]/2+vector_right_y[0]/2,
rightpoint[1]+vector_right_left[1]/2+vector_right_y[1]/2
];
}
if (yratio < 0.9){
let vector_y_left = [(leftpoint[0]-ypoint[0])*(1-yratio),(leftpoint[1]-ypoint[1])*(1-yratio)];
let vector_y_right = [(rightpoint[0]-ypoint[0])*(1-yratio),(rightpoint[1]-ypoint[1])*(1-yratio)];
ypoint = [
ypoint[0]+vector_y_left[0]/2+vector_y_right[0]/2,
ypoint[1]+vector_y_left[1]/2+vector_y_right[1]/2
];
}
context.moveTo(...leftpoint);
context.lineTo(...rightpoint);
context.lineTo(...ypoint);
context.fill();
}
const NierGeom = ({
anchor_x1 = Variable(-2, {}),
anchor_y1 = Variable(-2, {}),
anchor_x2 = Variable(-2, {}),
anchor_y2 = Variable(-2, {}),
DESTRUCTION = false,
cell_width = 200,
cell_height = round(sqrt(cell_width*cell_width-(cell_width/2)*(cell_width/2))),
cell_grid = new Gtk.DrawingArea(),
wait_for_draw = false,
wait_for_complete_draw = false,
draw_t = 0,
draw_duration = 1000,
final_draw = true,
gap = 3,
rows = round(SCREEN_HEIGHT/cell_height) + 1,
cols = round(SCREEN_WIDTH*2/cell_width) + 1,
cells = Array.from({ length: rows*cols }, (_, i) => {return [0,0 ,0,0 ,0,0 ,0,0, 0,0]}),
opacity_step = 10,
vertex_step = 10,
first_update = 0,
entered = false,
update_css = async (self) => {try{
if (first_update < 4) {
first_update++;
return
}
let [tmp_cell_x1,tmp_cell_y1] = pos_mapper(anchor_x1.value,anchor_y1.value,SCREEN_WIDTH,SCREEN_HEIGHT,cols,rows);
let [tmp_cell_x2,tmp_cell_y2] = pos_mapper(anchor_x2.value,anchor_y2.value,SCREEN_WIDTH,SCREEN_HEIGHT,cols,rows);
let real_x1 = min(tmp_cell_x1,tmp_cell_x2);
let real_y1 = min(tmp_cell_y1,tmp_cell_y2);
let real_x2 = max(tmp_cell_x1,tmp_cell_x2);
let real_y2 = max(tmp_cell_y1,tmp_cell_y2);
let cell_x1 = real_x1-2
let cell_y1 = real_y1-2
let cell_x2 = real_x2+1
let cell_y2 = real_y2+1
let center_x = (cell_x1+cell_x2)/2;
let center_y = (cell_y1+cell_y2)/2;
let x_dist = abs(cell_x2-cell_x1)/2;
let y_dist = abs(cell_y2-cell_y1)/2;
vertex_step = 2;
for (let i = 0; i< rows*cols; i++){
let x = i%cols;
let y = (i-x)/cols;
let [c_opacity,t_opacity, c_left,t_left ,c_right,t_right ,c_y,t_y,inited,s_override] = cells[i]
let leftside = x < cell_x2 && dist_from_center(x,y,real_x1+y_dist,center_y,cols,rows) < y_dist
let rightside = x > cell_x1 && dist_from_center(x,y,real_x2-y_dist,center_y,cols,rows) < y_dist
let topside = x > cell_x1 && x < cell_x2 && y < cell_y2 && dist_from_center(x,y,center_x,real_y1+x_dist-2,cols,rows) < x_dist
let bottomside = x > cell_x1 && x < cell_x2 && y > cell_y1 && dist_from_center(x,y,center_x,real_y2-x_dist+1,cols,rows) < x_dist
let inside = leftside || rightside || topside || bottomside
if ([t_left,t_right,t_y].includes(0) && inside) {
continue
}
if (inside) {
if (!inited || !entered) {
s_override = true;
}
let inverted = (x%2==0?y%2==1:y%2==0);
if ((y > (cell_y2-1) && inverted) || (y < (cell_y1+1) && !inverted)) {
[t_y,t_left,t_right] = [0,1,1]
} else if ((x > (cell_x2-1)) || (x > center_x)) {
[t_y,t_left,t_right] = [1,0,1]
} else if ((x <= (cell_x1+1)) || x < center_x) {
[t_y,t_left,t_right] = [1,1,0]
}
} else {
s_override = false
t_right = 1;
t_left = 1;
t_y = 1;
t_opacity = 0.7;
}
cells[i] = [c_opacity,t_opacity, c_left,t_left ,c_right,t_right ,c_y,t_y,inited,s_override];
}
wait_for_draw = true;
cell_grid.queue_draw()
while (wait_for_draw) {
await new Promise((r) => setTimeout(r, 1));
}
let alloc = self.get_allocation();
let width = alloc.width;
let height = alloc.height;
self.css = `margin-left:${min(
anchor_x1.value,
anchor_x2.value
)}px;margin-top:${min(anchor_y1.value, anchor_y2.value)}px;margin-right:${
width - max(anchor_x1.value, anchor_x2.value)
}px;margin-bottom:${
height - max(anchor_y1.value, anchor_y2.value)
}px;`;
}catch(e){print(e)}},
}) =>
Window({
name: "geom",
classNames: ["geom"],
margin: [0, 0, 0, 0],
anchor: ["top", "left", "bottom", "right"],
exclusivity: "ignore",
layer: "overlay",
focusable: true,
setup: (self) =>
Utils.timeout(1, () => {
cell_grid.connect("draw", (self, context) => {
let stable = true;
for (let i = 0; i < rows*cols; i++) {
let x = i%cols;
let y = (i-x)/cols;
let [c_opacity,t_opacity, c_left,t_left ,c_right,t_right ,c_y,t_y,inited,s_override] = cells[i]
if (s_override == true) {
continue
}
if (abs(c_opacity-t_opacity) > 0.01) {
stable = false;
c_opacity = c_opacity + (t_opacity-c_opacity)/opacity_step;
}
if (abs(c_left-t_left) > 0.001) {
stable = false;
c_left = c_left + (t_left-c_left)/vertex_step;
}
if (abs(c_right-t_right) > 0.001) {
stable = false;
c_right = c_right + (t_right-c_right)/vertex_step;
}
if (abs(c_y-t_y) > 0.001) {
stable = false;
c_y = c_y + (t_y-c_y)/vertex_step;
}
draw_triangle(context, x*cell_width/2, y*cell_height, cell_width - gap, cell_height - gap/2, [...colors,c_opacity], (x%2==0?y%2==1:y%2==0),c_left,c_right,c_y);
cells[i] = [c_opacity,t_opacity, c_left,t_left ,c_right,t_right ,c_y,t_y,inited,s_override]
}
wait_for_draw = false;
if (final_draw && !stable){
// print("stabling")
cell_grid.queue_draw();
} else if (final_draw && stable) {
wait_for_complete_draw = false;
}
})
self.connect("key-press-event", async (widget, event) => {try{
if (event.get_keyval()[1] == Gdk.KEY_Escape) {
const [x,y] = await get_cursor()
// cell_grid exit
let start = Date.now();
draw_duration = 1000;
let fps = 15;
draw_t = start
final_draw = false;
vertex_step = 3;
opacity_step = 2;
let [real_x,real_y] = await get_cursor();
let [center_x,center_y] = pos_mapper(real_x,real_y,SCREEN_WIDTH,SCREEN_HEIGHT,cols,rows);
let max_dist = (max(center_x,rows-center_x)**2 + max(center_y,cols-center_y)**2)**0.5 + 1;
while (true) {
let frame_start = Date.now();
let time_ratio = (draw_t - start)/draw_duration;
for (let i = 0; i< rows*cols; i++){
let x = i%cols;
let y = (i-x)/cols;
let [c_opacity,t_opacity, c_left,t_left ,c_right,t_right ,c_y,t_y,inited,s_override] = cells[i]
if (s_override) {
entered = true;
return
}
let dist = dist_from_center(x,y,center_x,center_y,cols,rows)
if (time_ratio>1?1:dist < max_dist*time_ratio*(rand_int(10,100)/100)) {
inited = true;
t_opacity = 0
}
cells[i] = [c_opacity,t_opacity, c_left,t_left ,c_right,t_right ,c_y,t_y,inited,s_override];
}
final_draw = true;
wait_for_complete_draw = true;
wait_for_draw = true;
cell_grid.queue_draw();
while (wait_for_draw) {
await new Promise((r) => setTimeout(r, 1));
}
if (time_ratio > 0.6) { // this cud need changing
entered = true;
print("selection cancelled")
App.quit();
}
draw_t = Date.now();
await new Promise((r) => setTimeout(r, max(0,1000/fps - (draw_t-frame_start))));
}
}
// it ctrl
if (event.get_keyval()[1] == 65507) {
let tmp1 = anchor_x1.value;
let tmp2 = anchor_y1.value;
anchor_x1.setValue(anchor_x2.value);
anchor_y1.setValue(anchor_y2.value);
anchor_x2.setValue(tmp1);
anchor_y2.setValue(tmp2);
Hyprland.sendMessage(`dispatch movecursor ${round(tmp1)} ${round(tmp2)}`);
}
}catch(e){print(e)}});}),
child: EventBox({
classNames: ["nier-geom-container"],
child: Overlay({
child: Scrollable({
child:cell_grid,
setup: (self) => Utils.timeout(1, async () => {try{
let start = Date.now();
draw_duration = 3000;
let fps = 15;
draw_t = start
final_draw = false;
vertex_step = 3;
opacity_step = 10;
let [real_x,real_y] = await get_cursor();
let [center_x,center_y] = pos_mapper(real_x,real_y,SCREEN_WIDTH,SCREEN_HEIGHT,cols,rows);
let max_dist = (max(center_x,rows-center_x)**2 + max(center_y,cols-center_y)**2)**0.5 + 1;
while (true) {
let frame_start = Date.now();
let time_ratio = (draw_t - start)/draw_duration;
for (let i = 0; i< rows*cols; i++){
let x = i%cols;
let y = (i-x)/cols;
let [c_opacity,t_opacity, c_left,t_left ,c_right,t_right ,c_y,t_y,inited,s_override] = cells[i]
if (s_override) {
entered = true;
return
}
let dist = dist_from_center(x,y,center_x,center_y,cols,rows)
if (time_ratio>1?1:dist < max_dist*time_ratio*(rand_int(50,100)/100)) {
if (!inited){
inited = true;
c_opacity = 1;
}
t_opacity = 0.5
if (dist < 2) {
t_y = 1;
[c_left,t_left,c_right,t_right] = [1,1,1,1]
}else if (x < center_x) {
t_left = 1;
[c_right,t_right,c_y,t_y] = [1,1,1,1]
} else {
t_right = 1;
[c_left,t_left,c_y,t_y] = [1,1,1,1]
}
}
cells[i] = [c_opacity,t_opacity, c_left,t_left ,c_right,t_right ,c_y,t_y,inited,s_override];
}
final_draw = true;
wait_for_complete_draw = true;
wait_for_draw = true;
cell_grid.queue_draw();
while (wait_for_draw) {
await new Promise((r) => setTimeout(r, 1));
}
if (time_ratio > 1) { // this cud need changing
entered = true;
break
}
draw_t = Date.now();
await new Promise((r) => setTimeout(r, max(0,1000/fps - (draw_t-frame_start))));
}
}catch(e){print(e)}})
}),
overlays: [
Box({
vertical: true,
hexpand: false,
vexpand: false,
classNames: ["nier-geom-select"],
connections: [
[anchor_x1, update_css],
[anchor_x2, update_css],
[anchor_y1, update_css],
[anchor_y2, update_css],
],
})
]
}),
setup: (self) =>
Utils.timeout(1, () => {
self.connect("button-press-event", (self, event) => {
let [, x, y] = event.get_coords();
anchor_x1.setValue(x);
anchor_y1.setValue(y);
anchor_x2.setValue(x);
anchor_y2.setValue(y);
});
self.connect("button-release-event", (self, event) => {
let [, x, y] = event.get_coords();
anchor_x2.setValue(x);
anchor_y2.setValue(y);
DESTRUCTION = true;
self.css = `opacity: 0;transition: opacity 0s linear;`
Utils.timeout(10, () => {
print(`${round(min(anchor_x1.value, anchor_x2.value))},${round(min(anchor_y1.value, anchor_y2.value))} ${abs(round(anchor_x2.value-anchor_x1.value))+1}x${abs(round(anchor_y2.value-anchor_y1.value))+1}`);
App.quit();
});
});
self.connect("motion-notify-event", (self, event) => {
let [, x, y] = event.get_coords();
anchor_x2.setValue(x);
anchor_y2.setValue(y);
});
}),
}),
});
export default {
style: App.configDir + "/style.css",
windows: [
NierGeom({})
]
}

14
components/ags/windows/geom/style.css Normal file
View File

@@ -0,0 +1,14 @@
.nier-geom-select {
background: transparent;
border: 3px #f4f0e1 solid;
border-radius: 0px;
box-shadow: 0px 0px 10px #f4f0e1, inset 0px 0px 10px #f4f0e1;
animation: select_pulse 10s ease infinite forwards; }
@keyframes select_pulse {
30% {
box-shadow: 0px 0px 10px #f4f0e1, inset 0px 0px 10px #f4f0e1; }
50% {
box-shadow: 0px 0px 20px #f4f0e1, inset 0px 0px 20px #f4f0e1; }
70% {
box-shadow: 0px 0px 10px #f4f0e1, inset 0px 0px 10px #f4f0e1; } }

15
components/ags/windows/notifications/assets/nier-pointer-white.svg Normal file
View File

@@ -0,0 +1,15 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="367.705" height="234.894" viewBox="0 0 367.705 234.894">
<defs>
<style>
.cls-1 {
fill: #e3dec5;
}
.cls-2 {
fill: #48463d;
}
</style>
</defs>
<path class="cls-1" d="M0,117.447l90.7,90.7,272.151-90.7L90.7,26.747Zm105.983,0a17.3,17.3,0,1,1-17.3-17.3A17.3,17.3,0,0,1,105.983,117.447Z"/>
<rect class="cls-2" x="340.658" y="207.848" width="27.046" height="27.046" transform="translate(132.81 575.553) rotate(-90)"/>
<rect class="cls-2" x="340.658" width="27.046" height="27.046" transform="translate(340.658 367.705) rotate(-90)"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 670 B

12
components/ags/windows/notifications/assets/nier-pointer.svg Normal file
View File

@@ -0,0 +1,12 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="367.705" height="234.894" viewBox="0 0 367.705 234.894">
<defs>
<style>
.cls-1 {
fill: #48463d;
}
</style>
</defs>
<path class="cls-1" d="M0,117.447l90.7,90.7,272.151-90.7L90.7,26.747Zm105.983,0a17.3,17.3,0,1,1-17.3-17.3A17.3,17.3,0,0,1,105.983,117.447Z"/>
<rect class="cls-1" x="340.658" y="207.848" width="27.046" height="27.046" transform="translate(132.81 575.553) rotate(-90)"/>
<rect class="cls-1" x="340.658" width="27.046" height="27.046" transform="translate(340.658 367.705) rotate(-90)"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 624 B

285
components/ags/windows/notifications/notifications.js Normal file
View File

@@ -0,0 +1,285 @@
import App from 'resource:///com/github/Aylur/ags/app.js';
import Widget from 'resource:///com/github/Aylur/ags/widget.js';
import Variable from 'resource:///com/github/Aylur/ags/variable.js';
import * as Utils from 'resource:///com/github/Aylur/ags/utils.js';
import Notifications from 'resource:///com/github/Aylur/ags/service/notifications.js';
const css = App.configDir + "/style/style.css";
const { Box, Window, EventBox, Label, Overlay, Icon } = Widget;
const parentConfigDir = App.configDir.split("/").slice(0,-2).join("/");
const parentAssetsDir = () => `${parentConfigDir}/assets/${dark.value ? "dark" : "light"}`;
import Pango from 'gi://Pango';
import { NierButton, NierButtonGroup } from "../../nier/buttons.js";
const dark = Variable(false, {})
globalThis.dark = dark;
dark.connect("changed",() => Utils.timeout(100, () => {
App.resetCss();
App.applyCss(css);
}))
print(parentConfigDir)
const card = ({
left = true,
content = "",
notification_obj = null,
accent = Box({
classNames: ["notify-card-accent", left?"left":"right"],
setup: (self) => {
switch (notification_obj.urgency) {
case "low":
self.toggleClassName("low",true);
break;
case "normal":
self.toggleClassName("normal",true);
break;
case "critical":
self.toggleClassName("critical",true);
break;
}
}
}),
card_content = Box({
classNames: ["notify-card-content", left?"left":"right"],
hpack: "start",
hexpand: false,
children: [
Box({
vpack: "center",
classNames: ["notify-card-inner"],
hpack: "fill",
vertical: true,
children: [
Label({
classNames: ["notify-card-title"],
hpack: "start",
vpack: "center",
justification: "left",
use_markup: true,
max_width_chars: 24,
wrap: true,
wrap_mode: Pango.WrapMode.WORD_CHAR,
label: notification_obj.summary?notification_obj.summary:notification_obj.app_name,
}),
Label({
classNames: ["notify-card-body"],
hpack: "start",
use_markup: true,
vpack: "center",
justification: "left",
max_width_chars: 24,
css: `min-width: 100px;`,
wrap: true,
wrap_mode: Pango.WrapMode.WORD_CHAR,
label: content,
}),
],
setup: (self) => {
if (notification_obj.actions.length) {
print("has actions")
self.spacing = 20;
self.add(
NierButtonGroup({
classNames: ["notify-card-actions"],
buttons: notification_obj.actions.map((action) => {
return NierButton({
useAssetsDir: parentAssetsDir,
label: action["label"],
handleClick: () => {
notification_obj.invoke(action["id"]);
notification_obj.dismiss();
}
})
})
})
)
self.show_all()
}
}
}),
Icon({
hexpand: true,
hpack: "end",
size: 64,
icon: notification_obj.app_icon,
})
],
}),
press_cords = [0,0],
hider = EventBox({
classNames: ["notify-card-hider", left?"left":"right"],
}),
safe_to_overlay = false,
closing = false,
dismissed = false,
}) => Overlay({
vexpand: false,
vpack: "center",
pass_through: true,
child:EventBox({
child: Box({
classNames: ["notify-card", left?"left":"right"],
children: [
accent,
card_content,
]
}),
setup: (self) => {
self.connect("button-press-event", (self,event) => {
let [_,x,y] = event.get_coords();
press_cords = [x,y];
})
self.connect("button-release-event", (self,event) => {
if (closing) {
return;
}
let [_,x,y] = event.get_coords();
accent.css = `min-width: 10px;transition: min-width 0.2s cubic-bezier(0.15, 0.79, 0, 1);`
card_content.css = `padding-left: 20px;transition: padding 0.3s cubic-bezier(0,1.77,.63,1.3);`
let diff_x = x - press_cords[0];
if (diff_x > 160) {
closing = true;
Utils.timeout(100, () => {
if ((!notification_obj.closed) && notification_obj.popup && (!dismissed) ){
notification_obj.dismiss();
}
})
}
})
self.connect("motion-notify-event", (self,event) => {
let [_,x,y] = event.get_coords();
let diff_x = x - press_cords[0];
if (diff_x > 10) {
accent.css = `min-width: ${100*(1-2.718**-(diff_x/100)) + diff_x/100}px;transition: min-width 0s linear;`
card_content.css = `padding-left: ${50*(1-2.718**-(diff_x/500))+10}px;transition: padding 0s linear;`
}
})
}
}),
overlays: [
hider
],
setup: (self) => Utils.timeout(100,() => {
let box = self.child.child;
if (!left){
box.children = box.children.reverse();
};
Utils.timeout(100, () => {
hider.toggleClassName("enter",true);
Utils.timeout(300, () => {
box.toggleClassName("enter",true);
hider.toggleClassName("enter-phase-2",true);
Utils.timeout(300, () => {
self.overlays = [];
})
})
})
}),
connections: [
[notification_obj, (self) => {
if (!notification_obj.popup) {
if (dismissed) {
return;
}
dismissed = true;
print("dismissed")
let box = self.child.child;
let box_alloc = box.get_allocation();
self.connect("size-allocate", () => {
if (safe_to_overlay) {
return;
}
if (self.overlays.length) {
if (self.overlays[0].get_allocation().width > 1){
safe_to_overlay = true;
let wait_time = closing?0:100+300+300;
Utils.timeout(wait_time, () => { // shudnt be needed but just for safe guard
accent.toggleClassName("leave",true);
hider.toggleClassName("leave",true);
Utils.timeout(350, ()=>{
box.toggleClassName("leave",true);
hider.toggleClassName("leave-phase-2",true);
Utils.timeout(300,() => {
box.css = `margin-top: -${box_alloc.height}px;transition: margin 0.1s ease-out;`
hider.css = `margin-top: -${box_alloc.height}px;transition: margin 0.1s ease-out;`
Utils.timeout(100,() => {
self.destroy();
})
});
})
})
return;
}
}
})
self.add_overlay(hider);
self.show_all();
}
}, "dismissed"]
]
})
const holder = ({
}) => Box({
css: `margin-top: 150px;min-width:10px;min-height:10px;border: 0px black solid;`,
vertical: true,
classNames: ["notifications-holder"],
children: [
],
spacing: 5,
connections: [
[Notifications, (self,id) => {
let noti = Notifications.getPopup(id);
if (noti){
self.add(
card({
notification_obj: noti,
content: noti.body,
}),
)
self.show_all();
}
}, "notified"],
]
})
const notify = () => Window({
name: "player",
classNames: ["player"],
margin: [0, 0, 0, 0],
anchor: ["top","left"],
exclusivity: "ignore",
layer: "top",
focusable: false,
visible: true,
child: holder({})
});
export default {
style: css,
windows: [
notify()
],
};

1
components/ags/windows/notifications/style/style.css Normal file
View File

@@ -0,0 +1 @@
@import url("../../../style/style.css");

1
components/ags/windows/player/badappledat.js Normal file
View File

File diff suppressed because one or more lines are too long

22
components/ags/windows/player/imports.js Normal file
View File

@@ -0,0 +1,22 @@
const resource = (file) => `resource:///com/github/Aylur/ags/${file}.js`;
const require = async (file) => (await import(resource(file))).default;
export const service = async (file) => await require(`service/${file}`);
export const App = await require("app");
export const Widget = await require("widget");
export const Service = await require("service");
export const Variable = await require("variable");
export const Utils = await import(resource("utils"));
// export const Applications = await service("applications");
// export const Audio = await service("audio");
// export const Battery = await service("battery");
// export const Bluetooth = await service("bluetooth");
// export const Hyprland = await service("hyprland");
export const Mpris = await service("mpris");
// export const Network = await service("network");
// export const Notifications = await service("notifications");
// export const SystemTray = await service("systemtray");

765
components/ags/windows/player/nowplaying.js Normal file
View File

@@ -0,0 +1,765 @@
// importing
import {
App,
Widget,
Utils,
Mpris,
Variable,
} from "./imports.js";
import {
arradd,
dark,
arrremove,
rand_int,
parentConfigDir,
badapple
} from "./utils.js";
const { Box, Label, Button, EventBox, Revealer } = Widget;
const { execAsync, timeout } = Utils;
const { GdkPixbuf, Pango, Gtk } = imports.gi;
const { round } = Math;
const opacity_map_len = 512;
const opacity_map = Array.from({ length: opacity_map_len+1 }, (_, i) => i / opacity_map_len);
const cava = Variable([],{
listen: [App.configDir + '/scripts/cava', out => out.split(";").filter(n => n).map(n => Number(n)/1000)]
})
let colors = dark.value?[218/255, 212/255, 187/255]:[87/255, 84/255, 74/255];
dark.connect("changed",() => {
colors = dark.value?[218/255, 212/255, 187/255]:[87/255, 84/255, 74/255];
})
const color_mix = (c1, c2, t) => {
return [
c1[0] * (1 - t) + c2[0] * t,
c1[1] * (1 - t) + c2[1] * t,
c1[2] * (1 - t) + c2[2] * t,
];
}
const color_diff = (c1, c2) => {
return [
Math.abs(c1[0] - c2[0]),
Math.abs(c1[1] - c2[1]),
Math.abs(c1[2] - c2[2]),
];
}
const image_to_matrix = async (inputPath, imagedat, threshold = 128) => {
// Load the image from file
print("making image to matrix")
const resizedPixbuf = GdkPixbuf.Pixbuf.new_from_file(inputPath);
const pixels = resizedPixbuf.get_pixels();
const rowstride = resizedPixbuf.get_rowstride();
const channels = resizedPixbuf.get_n_channels();
let max = 0;
let min = 1;
const darknessMatrix = [];
for (let y = 0; y < resizedPixbuf.get_height(); y++) {
for (let x = 0; x < resizedPixbuf.get_width(); x++) {
const index = y * rowstride + x * channels;
const [r, g, b] = pixels.slice(index, index + channels);
const intensity = Math.round(0.3 * r + 0.59 * g + 0.11 * b);
const darkness = dark.value?1 - intensity / 255.0:intensity / 255.0;
if (darkness > max) {
max = darkness;
}
if (darkness < min) {
min = darkness;
}
darknessMatrix.push([r/255,g/255,b/255,darkness]);
}
}
for (let i = 0; i < resizedPixbuf.get_height()*resizedPixbuf.get_width(); i++) {
const cell = darknessMatrix[i][3] + (dark.value?(-min):(1-max));
// const darkness = 1-cell;
const darkness = 1 - opacity_map[Math.round(cell * (opacity_map.length - 1))];
darknessMatrix[i][3] = [darkness]
}
imagedat.value = darknessMatrix;
print("done making image to matrix")
return [min, max];
};
const cava_vis = ({
bar1_pos = 1,
bar2_pos = 1,
}) => Box({
classNames: ["cava-vis"],
children: [
Box({
classNames: ["cava-bar-thin"],
connections: [
[cava, (self) => {
let cava_val = cava.value[1];
if (isNaN(bar1_pos)) {
bar1_pos = 0;
}
self.css = `background-position: 100% ${bar1_pos}%;`;
bar1_pos = bar1_pos - (cava_val>0.5?cava_val>0.9?cava_val*10:cava_val*5:cava_val) - 0.01;
if (bar1_pos < -200) {
bar1_pos = 0;
}
}]
]
}),
Box({
classNames: ["cava-bar-thick"],
connections: [
[cava, (self) => {
let cava_val = cava.value[round(cava.value.length/2)];
if (isNaN(bar2_pos)) {
bar2_pos = 0;
}
self.css = `background-position: 100% ${bar2_pos}%;`;
bar2_pos = bar2_pos + (cava_val>0.5?cava_val>0.9?cava_val*10:cava_val*5:cava_val) + 0.01;
if (bar2_pos > 200) {
bar2_pos = 0;
}
}]
]
})
]
})
export const NowPlaying = ({
rows = 64,
showingdat = Variable(
Array.from({ length: rows*rows }, (_, i) => [0,0,0,1,1,0]),
{}
),
imagedat = Variable(
Array.from({ length: rows*rows }, (_, i) => [1,1,1,1]),
{}
),
prevdat = [],
cell_width = 10,
cell_height = 10,
preparing_cover = false,
orig_vis_alloc = null,
orig_container_alloc = null,
orig_player_alloc = null,
drawingArea = new Gtk.DrawingArea(),
//
wait_for_draw = false,
draw_t = 0,
draw_duration = 1000,
drawing_rn = false,
current_info = "",
current_cover_info = "",
badappling = false,
wait_for_apples = false,
prev_apples = 0,
apples=0,
apple_names = ["【東方】Bad Apple!! ＰＶ【影絵】","Bad Apple!! - Full Version w/video [Lyrics in Romaji, Translation in English]","Bad Apple!!"]
}) =>
Box({
classNames: ["player"],
children: [
Box({
vertical: true,
classNames: ["nowplaying-container"],
children: [
Box({
css: `min-width: ${rows * cell_width + 30 + 30 - 20}px;`,
hpack: "end",
children: [
Button({
hpack: "end",
classNames: ["player-buttons"],
hexpand: true,
child: Label({
label: "⏮",
classNames: ["heading"],
}),
onClicked: async (self) => {
const player = Mpris.players[0];
player.previous();
self.classNames = arradd(self.classNames, "pressed");
await new Promise((r) => setTimeout(r, 100));
self.classNames = arrremove(self.classNames, "pressed");
},
}),
Button({
hpack: "end",
classNames: ["player-buttons"],
child: Label({
label: "▪",
classNames: ["heading"],
connections: [
[
Mpris,
(self) => {
const player = Mpris.players[0];
if (!player) {
return;
}
if (player.play_back_status === "Playing") {
self.label = "⏸";
} else {
self.label = "▪";
}
},
],
],
}),
onClicked: async (self) => {
const player = Mpris.players[0];
if (!player) {
return;
}
player.playPause();
if (player.play_back_status === "Playing") {
self.child.label = "▪";
} else {
self.child.label = "⏸";
}
self.classNames = arradd(self.classNames, "pressed");
await new Promise((r) => setTimeout(r, 100));
self.classNames = arrremove(self.classNames, "pressed");
let self_alloc = self.get_allocation();
let forward_alloc = self.parent.children[2].get_allocation();
let forward_cells = Math.floor(forward_alloc.width/cell_width);
let self_cells = Math.floor((self_alloc.width/2)/cell_width);
let cell_x = rows - (forward_cells+self_cells);
let cell_y = 0;
let max_thick = 10;
let max_dist = (
((Math.max(cell_x, rows - cell_x))) ** 2
+ (Math.max(cell_y, rows - cell_y)) ** 2
) ** 0.5 + max_thick
for (let t = 0; t<max_dist; t++){
for (let i = 0; i < rows*rows; i++){
let this_x = i%rows;
let this_y = Math.floor(i/rows);
let dist_x = Math.abs(this_x - cell_x);
let dist_y = Math.abs(this_y - cell_y);
let dist = (dist_x**2 + dist_y**2)**0.5;
if (Math.abs(dist - t) < rand_int(-10,max_thick)*(1 - t/max_dist)) {
let [r2,g2,b2,darkness] = [0,0,0,0]
if (badappling) {
[r2,g2,b2,darkness] = [imagedat.value[i],imagedat.value[i],imagedat.value[i],imagedat.value[i]];
} else {
[r2,g2,b2,darkness] = imagedat.value[i];
}
let [r,g,b,o,opacity,offset] = showingdat.value[i];
[r,g,b,o,offset] = [r2,g2,b2,1,1];
opacity = darkness;
showingdat.value[i] = [r,g,b,o,opacity,offset];
}
}
drawingArea.queue_draw();
wait_for_draw = true;
while (wait_for_draw) {
await new Promise((r) => setTimeout(r, 1));
}
await new Promise((r) => setTimeout(r, 20*(t/max_dist)));
}
},
}),
Button({
hpack: "end",
classNames: ["player-buttons"],
css: "margin-right: 15px;",
child: Label({
label: "⏭",
classNames: ["heading"],
}),
onClicked: async (self) => {
const player = Mpris.players[0];
player.next();
self.classNames = arradd(self.classNames, "pressed");
await new Promise((r) => setTimeout(r, 100));
self.classNames = arrremove(self.classNames, "pressed");
},
}),
],
}),
EventBox({
setup: (self) => Utils.timeout(1, () => {
self.connect("motion-notify-event", (widget, event) => {
let [_,x,y] = event.get_coords();
let drawing_alloc = drawingArea.get_allocation();
let [drawing_x,drawing_y] = [drawing_alloc.x,drawing_alloc.y];
let real_x = x - drawing_x;
let real_y = y - drawing_y;
let cell_x = Math.floor(real_x/cell_width);
let cell_y = Math.floor(real_y/cell_height);
let cell_index = cell_y*rows + cell_x;
let [r2,g2,b2,darkness] = [0,0,0,0]
if (badappling) {
[r2,g2,b2,darkness] = [imagedat.value[cell_index],imagedat.value[cell_index],imagedat.value[cell_index],imagedat.value[cell_index]];
} else {
[r2,g2,b2,darkness] = imagedat.value[cell_index];
}
let [r,g,b,o,opacity,offset] = showingdat.value[cell_index];
[r,g,b,o,offset] = [r2,g2,b2,1,1];
opacity = darkness;
showingdat.value[cell_index] = [r,g,b,o,opacity,offset];
drawingArea.queue_draw();
})
}),
child:Box({
classNames: ["image-matrix-container"],
hpack: "center",
css: `min-height: ${rows*cell_height}px; min-width: ${rows*cell_width}px;`,
children: [
drawingArea,
],
connections: [
[1000,() => {
drawingArea.queue_draw();
}]
],
setup: (self) => Utils.timeout(1, () => {
drawingArea.hexpand = true;
drawingArea.hpack = "end";
drawingArea.connect('draw', (widget, context) => {
for (let i = 0; i < rows*rows; i++){
const x = i%rows;
const y = Math.floor(i/rows);
let [r,g,b,current_opacity,opacity,offset] = showingdat.value[i];
if (opacity == 0 && current_opacity == 0) {
continue;
}
let diff = !color_diff([r,g,b], colors).every(n => n < 1/255);
let opacity_diff = Math.abs(current_opacity - opacity) > 1/255;
if (badappling) {
if (diff && opacity_diff <= Math.abs(current_opacity + (opacity-current_opacity)/2)){
[r,g,b] = color_mix([r,g,b], colors, 0.1);
}
if (opacity_diff){
current_opacity = current_opacity + (opacity-current_opacity)*(0.1);
}
} else {
if (diff && opacity_diff <= Math.abs(current_opacity + (opacity-current_opacity)/2)){
[r,g,b] = color_mix([r,g,b], colors, 0.2);
}
if (opacity_diff){
current_opacity = current_opacity + (opacity-current_opacity)*(0.2);
}
}
if (offset!=0 && offset < 100) {
let now_offset = offset;
if (now_offset > 50){
now_offset = 100 - now_offset;
if (badappling){
offset += 3
} else {
offset += 5;
}
} else {
if (badappling){
offset += 3
} else {
offset += 3;
}
}
const centerX = (x*cell_width) + (now_offset/100)*2*cell_width/2;
const centerY = (y*cell_height) + (now_offset/100)*2*cell_height/2;
context.setSourceRGBA(r,g,b, 2*current_opacity);
context.rectangle(centerX, centerY, cell_width, cell_height);
context.fill();
} else {
context.setSourceRGBA(r,g,b,current_opacity);
context.rectangle(x*cell_width,y*cell_height,cell_width,cell_height);
context.fill();
}
showingdat.value[i] = [r,g,b,current_opacity,opacity,offset];
if (diff || opacity_diff || offset!=0){
drawingArea.queue_draw();
}
}
wait_for_draw = false;
})
}),
connections: [
[
dark,
(self) => {
Utils.timeout(500,async () => {
preparing_cover = true;
await image_to_matrix("/tmp/bg.png", imagedat, rows).catch((e) => {
preparing_cover = false;
console.log(e);
})
preparing_cover = false;
imagedat.emit("changed");
})
},
"changed"
],
[
imagedat,
(self) => Utils.timeout(1, async () => {
try{
if (!badappling){
if (preparing_cover) {
return;
}
if (prevdat == JSON.stringify(imagedat.value)) {
print("same cover, returning :0 :: ")
return;
}
prevdat = JSON.stringify(imagedat.value);
}
console.log("got matrix update");
while (drawing_rn) {
await new Promise((r) => setTimeout(r, 1));
}
drawing_rn = true;
let now = Date.now();
let till = now + 5000;
let fps = 30;
if (badappling) {
wait_for_apples = true;
till = now + fps/1000;
}
draw_t = 0;
draw_duration = till - now;
let final_draw = false;
while (true) {
let elapsed = Date.now();
for (let i = 0; i < rows*rows; i++){
// print(imagedat.value[i])
let [r2,g2,b2,darkness] = [0,0,0,0]
if (badappling) {
[r2,g2,b2,darkness] = [imagedat.value[i],imagedat.value[i],imagedat.value[i],imagedat.value[i]];
} else {
[r2,g2,b2,darkness] = imagedat.value[i];
}
let [r,g,b,o,opacity,offset] = showingdat.value[i];
if (!badappling && Math.abs(darkness-opacity) > 1/255) {
let time_ratio = draw_t/draw_duration;
if (darkness < time_ratio) {
[r,g,b,o,offset] = [r2,g2,b2,1,1];
opacity = darkness;
}
} else if (Math.abs(darkness-opacity) > 1/255) {
[r,g,b,o,offset] = [...colors,1,1];
opacity = darkness;
}
showingdat.value[i] = [r,g,b,o,opacity,offset];
}
drawingArea.queue_draw();
wait_for_draw = true;
while (wait_for_draw) {
await new Promise((r) => setTimeout(r, 1));
}
draw_t = Date.now() - now;
if (final_draw){
break;
}
if (draw_t >= draw_duration) {
final_draw = true;
}
await new Promise((r) => setTimeout(r, 1000/fps - (Date.now()-elapsed)));
}
drawing_rn = false
if (badappling) {wait_for_apples = false;}
console.log("relocking cover");
}catch(e){
print(e)
}
}),
"changed",
],
[
Mpris,
(self) => Utils.timeout(10,() => {
const player = Mpris.players[0];
if (!player) {
return;
}
if (preparing_cover) {
console.log("skipping mpris");
return;
}
if (current_cover_info == player.cover_path) {
console.log("same cover, returning");
return;
}
console.log("preparing cover ",current_cover_info);
current_cover_info = player.cover_path;
/////////////////////////////////////////////////////////////////////////////
// appols
/////////////////////////////////////////////////////////////////////////////
const pos_to_frame = (pos) => {
let pos_ratio = pos/player.length;
let frame = Math.floor(pos_ratio*badapple.length);
if (frame >= badapple.length) {
print("out of frame")
return badapple[0];
}
return badapple[frame];
}
Utils.timeout(1, async () => {
try{
if (apple_names.includes(player.track_title)) {
if (apples > 1 || badappling){
return
}
apples++;
prevdat=""
badappling = true;
while (apple_names.includes(player.track_title)) {
if (Math.abs(player.position-prev_apples) > 1/1000) {
prev_apples = player.position;
imagedat.value = pos_to_frame(player.position);
print("sent a frame")
while (wait_for_apples && badappling) {
await new Promise((r) => setTimeout(r, 1));
}
} else {await new Promise((r) => setTimeout(r, 1));}
}
badappling = false;
drawing_rn = false;
wait_for_draw = false;
return
}else{
badappling = false
wait_for_apples = false
}
}catch(e){
print(e)
}
})
/////////////////////////////////////////////////////////////////////////////
execAsync(["cp", player.cover_path, "/tmp/to_bg.png"])
.then((out) => {
print(out)
preparing_cover = true;
execAsync([
App.configDir + "/scripts/prepare_cover.sh",
player.cover_path,
`${rows}`,
])
.then((out) => {
console.log("cover prepared");
Promise.resolve(
image_to_matrix("/tmp/bg.png", imagedat, rows).catch((e) => {
preparing_cover = false;
console.log(e);
})
).then(() => {
preparing_cover = false;
imagedat.emit("changed");
}).catch(print);
})
.catch((e) => {
preparing_cover = false;
console.log(e);
});
})
.catch((e) => {
preparing_cover = false;
console.log(e);
});
}),
],
],
}),
}),
Box({
classNames: ["nowplaying-info-container"],
css: `margin-left: ${5}`,
children: [
Revealer({
revealChild: false,
transitionDuration: 1000,
child: Label({
label: "woa",
classNames: ["heading"],
css: `min-width: ${rows * cell_width}px;`,
hpack: "end",
xalign: 0,
wrap: true,
max_width_chars: 20,
setup: (self) =>
Utils.timeout(1, () => {
self.set_line_wrap_mode(Pango.WrapMode.WORD_CHAR);
self.set_ellipsize(Pango.EllipsizeMode.END);
}),
}),
transition: "slide_left",
connections: [
[
Mpris,
async (self) => {
const player = Mpris.players[0];
if (!player) {
return;
}
if (player.track_title != current_info) {
current_info = player.track_title
let cursor = self.parent.children[1];
await new Promise((r) => setTimeout(r, 1500));
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 = current_info;
self.revealChild = true;
await new Promise((r) => setTimeout(r, 1500));
cursor.classNames = arradd(cursor.classNames, "hidden");
}
},
],
],
}),
Box({
classNames: ["nowplaying-info-cursor"],
}),
],
}),
],
connections: [],
}),
cava_vis({}),
Box({
classNames: ["nowplaying-hider"],
})
],
connections: [
[
App,
(self, windowName, visible) => {
if (windowName == "player") {
let player = self
let container = player.children[0];
let vis = player.children[1];
let hider = player.children[2];
let buttons = container.children[0];
let matrix = container.children[1];
let info = container.children[2];
if (!visible) {
print("closing")
let container_alloc = container.get_allocation();
let vis_alloc = vis.get_allocation();
let player_alloc = player.get_allocation();
if (vis_alloc.width == 1){ // for some reason this ran twice and messed up orig var :0
return
}
Utils.timeout( 10, () => {
orig_container_alloc = container_alloc.width;
orig_vis_alloc = vis_alloc.width;
orig_player_alloc = player_alloc.width;
vis.toggleClassName("hiding",true);
vis.css = `margin-top: 0px;margin-bottom: 0px;transition: margin 0.2s cubic-bezier(0.15, 0.79, 0, 1);`;
container.css = `margin-right: -${vis_alloc.width*3}px;margin-left: ${vis_alloc.width*3}px;transition: margin 0.5s cubic-bezier(0.15, 0.79, 0, 1);`;
timeout(300, () => {
container.css = `margin-right: 0px;margin-left: ${vis_alloc.width}px;transition: margin 0.5s cubic-bezier(0.15, 0.79, 0, 1);`;
vis.css = `margin-top: 0px;margin-bottom: 0px;margin-left: -${container_alloc.width+vis_alloc.width}px;transition: margin 0.5s cubic-bezier(0.15, 0.79, 0, 1);`;
hider.css = `margin-left: -${container_alloc.width}px;transition: margin 0.5s cubic-bezier(0.15, 0.79, 0, 1);`;
timeout(600, () => {
draw_t = 0;
player.css = `margin-right: -${player_alloc.width-5}px;transition: margin 0.5s cubic-bezier(0.15, 0.79, 0, 1);`;
})
})
})
} else {
print("opening",orig_container_alloc,orig_player_alloc,orig_vis_alloc)
container.css = `margin-right: ${orig_vis_alloc}px;`;
player.css = `margin-right: -${orig_player_alloc-5}px;`;
vis.css = `margin-top: 0px;margin-bottom: 0px;margin-left: -${orig_container_alloc+orig_vis_alloc}px;`;
hider.css = `margin-left: -${orig_container_alloc}px;`;
timeout(10, () => {
player.css = `margin-right: 0px;transition: margin 0.5s cubic-bezier(0.15, 0.79, 0, 1);`;
timeout(500, () => {
vis.css = `margin-top: 0px;margin-bottom: 0px;margin-left: 0px;transition: margin 0.5s cubic-bezier(0.15, 0.79, 0, 1);`;
hider.css = `margin-left: 0px;transition: margin 0.5s cubic-bezier(0.15, 0.79, 0, 1);`;
container.css = `margin-right: 0px;transition: margin 0.1s cubic-bezier(0.15, 0.79, 0, 1);`;
timeout(500, () => {
vis.toggleClassName("hiding",false);
vis.css = `margin-top: ${buttons.get_allocation().height}px;margin-bottom: ${info.get_allocation().height}px;transition: margin 0.3s cubic-bezier(0.15, 0.79, 0, 1);`;
hider.css = "opacity: 0;"
container.css = ""
})
})
})
}
}
},
"window-toggled",
],
]
});

69
components/ags/windows/player/player.js Normal file
View File

@@ -0,0 +1,69 @@
import { Widget,Utils, App,Mpris } from "./imports.js";
import { NowPlaying } from "./nowplaying.js";
import { css } from "./utils.js";
const { Window } = Widget;
export const NierPlayer = () => Window({
name: "player",
classNames: ["player"],
margin: [0, 0, 0, 0],
anchor: ["right"],
exclusivity: "ignore",
layer: "bottom",
focusable: false,
visible: true,
child: NowPlaying({}),
})
globalThis.App = App;
globalThis.Mpris = Mpris;
Utils.timeout(500, () => {
if (!Mpris.players[0]) {
print("closing player")
Utils.timeout(0,() => {
if (!Mpris.players[0]) {
App.closeWindow("player");
}
});
} else {
print("opening player")
App.openWindow("player");
}
})
Mpris.connect("changed",() => {
if (!Mpris.players[0]) {
print("closing player")
Utils.timeout(3000,() => {
if (!Mpris.players[0]) {
App.closeWindow("player");
}
});
} else {
print("opening player")
Utils.timeout(300,() => {
if (Mpris.players[0]) {
App.openWindow("player");
}
});
}
});
dark.connect("changed",() => Utils.timeout(100, () => {
App.resetCss();
App.applyCss(css);
}))
export default {
style: css,
closeWindowDelay: {
player: 300+600+500+100, // milliseconds
},
windows: [
NierPlayer(),
],
};

1
components/ags/windows/player/scripts/cava Symbolic link
View File

@@ -0,0 +1 @@
/home/flicko/.config/hypr/themes/nier/components/ags/scripts/cava

9
scripts/prepare_cover.sh → components/ags/windows/player/scripts/prepare_cover.sh
View File

@@ -1,9 +1,5 @@
#!/usr/bin/bash
echo ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"
echo "IN SH"
echo ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"
size=$2
if [ -f /tmp/prev_bg.png ]; then
@@ -26,8 +22,9 @@ if [ -z "$size" ]; then
size=40
fi
# grayscale
convert /tmp/bg.png -colorspace Gray /tmp/bg.png
# # grayscale
# convert /tmp/bg.png -colorspace Gray /tmp/bg.png
#remove bars
magick mogrify -fuzz 4% -trim +repage -shave 7x7 -format png /tmp/bg.png

1
components/ags/windows/player/style/style.css Normal file
View File

@@ -0,0 +1 @@
@import url("../../../style/style.css");

71
components/ags/windows/player/utils.js Normal file
View File

@@ -0,0 +1,71 @@
import { App, Utils, Variable } from "./imports.js";
import { badapple } from "./badappledat.js";
print(badapple[0])
const parentConfigDir = App.configDir.split("/").slice(0,-2).join("/");
function arrremove(arr, value) {
return arr.filter(function (ele) {
return ele != value;
});
}
function arradd(arr, value) {
if (arr.includes(value)) {
return arr;
}
arr.push(value);
return arr;
}
const {random, round } = Math;
const dark = Variable(false, {});
dark.connect("changed", () => {
print("music: dark changed",dark.value);
})
globalThis.dark = dark;
const assetsDir = () => `${parentConfigDir}/assets/${dark.value ? "dark" : "light"}`;
const home = `/home/${Utils.exec("whoami")}`;
const themedir = parentConfigDir.split("/").slice(0, -2).join("/");
const scss = App.configDir + "/style/style.scss";
const css = App.configDir + "/style/style.css";
const { exec } = Utils;
const SCREEN_WIDTH = Number(
exec(
`bash -c "xrandr --current | grep '*' | uniq | awk '{print $1}' | cut -d 'x' -f1 | head -1"`
)
);
const SCREEN_HEIGHT = Number(
exec(
`bash -c "xrandr --current | grep '*' | uniq | awk '{print $1}' | cut -d 'x' -f2 | head -1"`
)
);
globalThis["SCREEN_WIDTH"] = SCREEN_WIDTH;
globalThis["SCREEN_HEIGHT"] = SCREEN_HEIGHT;
const rand_int = (a,b) => round(random()*(b-a)+a);
export {
home,
themedir,
scss,
css,
SCREEN_HEIGHT,
SCREEN_WIDTH,
rand_int,
arradd,
arrremove,
dark,
assetsDir,
parentConfigDir,
badapple
};

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

@@ -1,376 +0,0 @@
import { Widget, App, Audio, Utils } from "../imports.js";
import { NierButtonGroup, NierButton } from "../nier/buttons.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";
const { Window, Label, EventBox, Box, Icon, Revealer } = Widget;
const { Gdk } = imports.gi;
const volume_page = (
go_to = (buttons, parent_button) => {
return [];
}
) => {
return VolumeGroup(go_to);
};
const wifi_page = (go_to = (button) => {}) => {
return WifiGroup(go_to);
};
const bluetooth_page = (
go_to = (buttons, parent_button) => {
return [];
}
) => {
return BluetoothGroup(go_to);
};
const ensure_only_selected = (button, page_button) => {
if (button == page_button) {
return button;
}
if (button) {
button.child.classNames = arradd(
button.child.classNames,
"nier-button-box-selected"
);
button.parent.classNames = arradd(
button.parent.classNames,
"nier-button-container-selected"
);
}
if (page_button) {
Promise.resolve(
remove_selected(page_button).catch((e) => {
console.log(e);
})
);
}
return button;
};
const remove_selected = async (button) => {
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.classNames = arrremove(
button.parent.classNames,
"nier-button-container-selected"
);
button.child.classNames = arradd(
button.child.classNames,
"nier-button-box-hover-from-selected"
);
button.parent.classNames = arradd(
button.parent.classNames,
"nier-button-container-hover-from-selected"
);
await new Promise((resolve) => {
setTimeout(resolve, 500);
});
button.child.classNames = arrremove(
button.child.classNames,
"nier-button-box-hover-from-selected"
);
button.parent.classNames = arrremove(
button.parent.classNames,
"nier-button-container-hover-from-selected"
);
}
};
export const NierSettingPane = (
padding_vertical = 50,
current_page = 0,
CLICK_TIMEOUT = false,
page1_selected = null,
page2_selected = null,
page3_selected = null
) =>
Window({
name: "settings",
classNames: ["settings"],
margin: [0, 0, 0, 0],
anchor: ["top", "left", "bottom"],
exclusivity: "ignore",
layer: "overlay",
focusable: true,
visible: false,
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");
} else {
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");
}
}
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",
],
],
}),
}),
});

62
components/ags/windows/applauncher.js → components/ags/windows/settings/applauncher.js
View File

@@ -1,40 +1,27 @@
// importing
import {
Hyprland,
Notifications,
Audio,
Battery,
SystemTray,
App,
Widget,
Utils,
Mpris,
Variable,
} from "../imports.js";
import { NierButton, NierButtonGroup } from "../nier/buttons.js";
} from "../../imports.js";
import { NierButton, NierButtonGroup } from "../../nier/buttons.js";
import {
SCREEN_HEIGHT,
SCREEN_WIDTH,
arradd,
arrremove,
themedir,
} from "../util.js";
} from "../../util.js";
const { Box, Label, Button, EventBox, Revealer, Scrollable, Icon } = Widget;
const { execAsync } = Utils;
const { GdkPixbuf, Pango } = imports.gi;
const { Box, Label,Scrollable, Icon } = Widget;
const { Pango } = imports.gi;
const Gio = imports.gi.Gio;
function searchAppInfo(searchString) {
// Get all applications of type 'Application'
const appInfos = Gio.AppInfo.get_all("Application");
console.log("applications :: ", appInfos);
// Filter the appInfos based on the search string
const filteredAppInfos = appInfos.filter((appInfo) => {
// Match the search string against the application name or description
const name = appInfo.get_display_name().toLowerCase();
const description = appInfo.get_description()?.toLowerCase();
const searchTerm = searchString.toLowerCase();
@@ -44,10 +31,10 @@ function searchAppInfo(searchString) {
return filteredAppInfos;
}
// const appSys =
// Gio.DesktopAppInfo.new_from_filename("dummy.desktop").get_app_info();
export const AppLauncher = (allApps = Variable(Gio.app_info_get_all(), {})) =>
export const AppLauncher = ({
allApps = Variable(Gio.app_info_get_all(), {}),
assetsDir = null
}) =>
Box({
vertical: true,
classNames: ["app-launcher"],
@@ -56,7 +43,7 @@ export const AppLauncher = (allApps = Variable(Gio.app_info_get_all(), {})) =>
classNames: ["app-launcher-search"],
placeholderText: "search apps",
text: "",
visibility: true, // set to false for passwords
visibility: true,
onChange: ({ text }) => {
console.log("text changed :: ", text);
allApps.setValue(searchAppInfo(text));
@@ -69,11 +56,10 @@ export const AppLauncher = (allApps = Variable(Gio.app_info_get_all(), {})) =>
Scrollable({
vscroll: "always",
hscroll: "never",
vexpand: true,
hexpand: true,
hpack: "fill",
vpack: "fill",
classNames: ["app-launcher-scroll"],
css: `min-height: ${Math.round(SCREEN_HEIGHT/3)}px;`,
child: Box({
vertical: true,
@@ -87,17 +73,17 @@ export const AppLauncher = (allApps = Variable(Gio.app_info_get_all(), {})) =>
let buttons = self.children[1];
buttons.children = allApps.value.map((app) => {
return NierButton({
useAssetsDir: assetsDir,
font_size: 25,
// 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(),
// }),
Icon({
classNames: ["app-launcher-icon"],
size: 20,
icon: app.get_icon()?.to_string(),
}),
Label({
classNames: ["app-launcher-label"],
css: `font-size: ${font_size}px;`,
@@ -136,7 +122,6 @@ export const AppLauncher = (allApps = Variable(Gio.app_info_get_all(), {})) =>
"nier-button-box-hover-from-selected"
);
},
// handleClick: async (self, event) => {},
});
});
},
@@ -147,17 +132,17 @@ export const AppLauncher = (allApps = Variable(Gio.app_info_get_all(), {})) =>
let buttons = self.children[1];
buttons.children = allApps.value.map((app) => {
return NierButton({
useAssetsDir: assetsDir,
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(),
// }),
Icon({
classNames: ["app-launcher-icon"],
size: 20,
icon: app.get_icon()?.to_string(),
}),
Label({
classNames: ["app-launcher-label"],
wrap: true,
@@ -195,7 +180,6 @@ export const AppLauncher = (allApps = Variable(Gio.app_info_get_all(), {})) =>
"nier-button-box-hover-from-selected"
);
},
// handleClick: async (self, event) => {},
});
});
}),

448
components/ags/windows/settings/settings.js Normal file
View File

@@ -0,0 +1,448 @@
import { Widget, App, Utils } from "../../imports.js";
import { NierButtonGroup, NierButton } from "../../nier/buttons.js";
import { SCREEN_WIDTH, SCREEN_HEIGHT, arradd, arrremove, get_cursor, css} from "../../util.js";
import { BluetoothGroup } from "../../widgets/bluetooth_group.js";
import { Info } from "../../widgets/info.js";
import { VolumeGroup } from "../../widgets/volume_group.js";
import { WifiGroup } from "../../widgets/wifi_group.js";
import { AppLauncher } from "./applauncher.js";
const { Window, Label, EventBox, Box, Overlay } = Widget;
const { execAsync } = Utils;
const { Gdk } = imports.gi;
const parentConfigDir = App.configDir.split("/").slice(0,-2).join("/");
const parentAssetsDir = () => `${parentConfigDir}/assets/${dark.value ? "dark" : "light"}`;
const themedir = parentConfigDir.split("/").slice(0, -2).join("/");
const volume_page = (
go_to = (buttons, parent_button) => {
return [];
}
) => {
return VolumeGroup({go_to,passAssetsDir:parentAssetsDir});
};
const wifi_page = (go_to = (button) => {}) => {
return WifiGroup({go_to,passAssetsDir:parentAssetsDir});
};
const bluetooth_page = (
go_to = (buttons, parent_button) => {
return [];
}
) => {
return BluetoothGroup({go_to,passAssetsDir:parentAssetsDir});
};
const ensure_only_selected = (button, page_button) => {
if (button == page_button) {
return button;
}
if (button) {
button.child.classNames = arradd(
button.child.classNames,
"nier-button-box-selected"
);
button.parent.classNames = arradd(
button.parent.classNames,
"nier-button-container-selected"
);
}
if (page_button) {
Promise.resolve(
remove_selected(page_button).catch((e) => {
console.log(e);
})
);
}
return button;
};
const remove_selected = async (button) => {
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.classNames = arrremove(
button.parent.classNames,
"nier-button-container-selected"
);
button.child.classNames = arradd(
button.child.classNames,
"nier-button-box-hover-from-selected"
);
button.parent.classNames = arradd(
button.parent.classNames,
"nier-button-container-hover-from-selected"
);
await new Promise((resolve) => {
setTimeout(resolve, 500);
});
button.child.classNames = arrremove(
button.child.classNames,
"nier-button-box-hover-from-selected"
);
button.parent.classNames = arrremove(
button.parent.classNames,
"nier-button-container-hover-from-selected"
);
}
};
const NierSettingPane = (
current_page = 0,
CLICK_TIMEOUT = false,
page1_selected = null,
page2_selected = null,
page3_selected = null,
panes_container = Box({
hexpand: false,
vexpand: false,
hpack: "start",
vpack: "start",
classNames: ["nier-settings-container"],
css: `min-width: ${SCREEN_WIDTH}px;min-height: ${SCREEN_HEIGHT}px;background-position: ${SCREEN_WIDTH*.5-960/2}px ${SCREEN_HEIGHT/2-720/2}px;background: url("${parentAssetsDir()}/glory-ghost.png") no-repeat center;`, // 960x720 is the image(glory-brown-ghost.png) res
setup: (self) =>
Utils.timeout(1, () => {
dark.connect("changed",() => {
self.css = `min-width: ${SCREEN_WIDTH}px;min-height: ${SCREEN_HEIGHT}px;background-position: ${SCREEN_WIDTH*.5-960/2}px ${SCREEN_HEIGHT/2-720/2}px;background: url("${parentAssetsDir()}/glory-ghost.png") no-repeat center;`; // 960x720 is the image(glory-brown-ghost.png) res
});
execAsync(`ags -b bg_settings -c ${parentConfigDir}/windows/settingsbg/settingsbg.js`)
let page4 = NierButtonGroup({
hexpand: false,
vexpand: false,
hpack: "start",
vpack: "start",
css: `min-width: ${SCREEN_WIDTH / 4}px;min-height: ${SCREEN_HEIGHT}px`,
containerClassNames: ["nier-settings-4-container", "closing"],
classNames: ["nier-settings-1"],
buttons: [
NierButton({
useAssetsDir: parentAssetsDir,
label: "4",
handleClick: async (button, event) => {
App.toggleWindow("settings");
},
}),
],
});
let page3 = NierButtonGroup({
hexpand: false,
vexpand: false,
hpack: "start",
vpack: "start",
css: `min-width: ${SCREEN_WIDTH / 4}px;min-height: ${SCREEN_HEIGHT}px`,
containerClassNames: ["nier-settings-3-container", "closing"],
classNames: ["nier-settings-1"],
buttons: [],
});
let page2 = NierButtonGroup({
hexpand: false,
vexpand: false,
hpack: "start",
vpack: "start",
css: `min-width: ${SCREEN_WIDTH / 4}px;min-height: ${SCREEN_HEIGHT}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;min-height: ${SCREEN_HEIGHT}px;`, // also expands other panes so the bottom part dont glicth out
containerClassNames: ["nier-settings-1-container"],
classNames: ["nier-settings-1"],
connections:[
[dark, (self) => {
self.css = `min-width: ${SCREEN_WIDTH / 4}px;min-height: ${SCREEN_HEIGHT}px;background: url("${dark.value?themedir + '/wallpapers/nier_dark.png':themedir + '/wallpapers/nier_light.png'}")`; // also expands other panes so the bottom part dont glicth out
},"changed"]
],
buttons: [
Label({
hpack: "start",
label: "SYSTEM",
classNames: ["heading"],
}),
NierButton({
useAssetsDir: parentAssetsDir,
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({
useAssetsDir: parentAssetsDir,
font_size: 30,
label: "WIFI",
handleClick: async (self, event) => {
await go_page2(wifi_page(), self).catch((e) => {
console.log(e);
});
},
}),
NierButton({
useAssetsDir: parentAssetsDir,
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({assetsDir:parentAssetsDir}),
Info({useAssetsDir:parentAssetsDir,parentDir:parentConfigDir}),
],
});
self.children = [page1, page2, page3, page4];
}),
connections: [
[
App,
(self, windowName, visible) => {
if (windowName == "settings") {
print("visibility",visible)
let containers = Array.from(self.children).map((child) => {
return child.child;
});
if (!visible) {
containers.forEach((container) => {
container.classNames = arradd(
container.classNames,
"closing"
);
});
execAsync(`ags -b bg_settings -r App.closeWindow("bg_settings")`).catch(print).then(print)
Utils.timeout(1100, () => {
execAsync(`ags -b bg_settings -r App.quit()`).catch(print).then(print)
})
self.classNames = arrremove(self.classNames, "opening");
self.classNames = arradd(self.classNames, "closing");
} else {
execAsync(`ags -b bg_settings -c ${parentConfigDir}/windows/settingsbg/settingsbg.js`)
self.classNames = arradd(self.classNames, "closing");
Utils.timeout(500, () => {
self.classNames = arradd(self.classNames, "opening");
containers[0].classNames = arrremove(
containers[0].classNames,
"closing"
);
self.classNames = arrremove(self.classNames, "closing");
})
}
}},
"window-toggled",
],
],
})
) =>
Window({
name: "settings",
classNames: ["settings"],
margin: [0, 0, 0, 0],
anchor: ["top", "left", "bottom"],
exclusivity: "ignore",
layer: "overlay",
focusable: true,
visible: true,
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");
} else {
let next_page = panes_container.children[current_page].child;
let now_page = panes_container.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");
}
}
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 = panes_container.children[current_page].child;
let now_page = panes_container.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: Overlay({
child: Box({
child: Box({}),
css: `min-width: ${SCREEN_WIDTH}px;min-height: ${SCREEN_HEIGHT}px;`,
}),
overlays: [
panes_container,
]
})
}),
});
dark.connect("changed",() => {
App.resetCss();
App.applyCss(css);
});
export default {
style: css,
closeWindowDelay: {
player: 300+600+500+100,
},
windows: [
NierSettingPane({})
],
};

1
components/ags/windows/settings/style/style.css Normal file
View File

@@ -0,0 +1 @@
@import url("../../../style/style.css");

333
components/ags/windows/settingsbg/settingsbg.js Normal file
View File

@@ -0,0 +1,333 @@
const resource = (file) => `resource:///com/github/Aylur/ags/${file}.js`;
const require = async (file) => (await import(resource(file))).default;
const App = await require("app");
const Widget = await require("widget");
const Utils = await import(resource("utils"));
const { max, round, abs, sqrt, random } = Math;
const { Window, EventBox, Overlay, Scrollable } = Widget;
const {exec} = Utils;
globalThis.App = App;
const SCREEN_WIDTH = Number(
exec(
`bash -c "xrandr --current | grep '*' | uniq | awk '{print $1}' | cut -d 'x' -f1 | head -1"`
)
);
const SCREEN_HEIGHT = Number(
exec(
`bash -c "xrandr --current | grep '*' | uniq | awk '{print $1}' | cut -d 'x' -f2 | head -1"`
)
);
const rand_int = (a,b) => round(random()*(b-a)+a);
const dist_from_center = (x,y,center_x,center_y,width,height) => {
let x_offset = abs(x-center_x)/2;
let y_offset = abs(y-center_y);
return (x_offset**2 + y_offset**2)**0.5;
}
let dark = false
await Utils.execAsync("ags -r dark.value").then((res) => {
dark = res == "true";
}).catch(() => {});
let colors = dark?[218/255, 212/255, 187/255]:[87/255, 84/255, 74/255];
const parentConfigDir = App.configDir.split("/").slice(0,-2).join("/");
const {Gtk} = imports.gi;
const draw_triangle = (context, center_x,center_y, width, height, color, inverted, leftratio,rightratio,yratio) => {
if (leftratio <= 0.001 || rightratio <= 0.001 || yratio <= 0.001) {
return
}
context.setSourceRGBA(...color);
let leftpoint,rightpoint,ypoint;
if (inverted) {
leftpoint = [center_x-width/2,center_y+height/2];
rightpoint = [center_x+width/2,center_y+height/2];
ypoint = [center_x,center_y-height/2];
}
else {
leftpoint = [center_x-width/2,center_y-height/2];
rightpoint = [center_x+width/2,center_y-height/2];
ypoint = [center_x,center_y+height/2];
}
if (leftratio < 0.9){
let vector_left_right = [(rightpoint[0]-leftpoint[0])*(1-leftratio),(rightpoint[1]-leftpoint[1])*(1-leftratio)];
let vector_left_y = [(ypoint[0]-leftpoint[0])*(1-leftratio),(ypoint[1]-leftpoint[1])*(1-leftratio)];
leftpoint = [
leftpoint[0]+vector_left_right[0]/2+vector_left_y[0]/2,
leftpoint[1]+vector_left_right[1]/2+vector_left_y[1]/2
];
}
if (rightratio < 0.9){
let vector_right_left = [(leftpoint[0]-rightpoint[0])*(1-rightratio),(leftpoint[1]-rightpoint[1])*(1-rightratio)];
let vector_right_y = [(ypoint[0]-rightpoint[0])*(1-rightratio),(ypoint[1]-rightpoint[1])*(1-rightratio)];
rightpoint = [
rightpoint[0]+vector_right_left[0]/2+vector_right_y[0]/2,
rightpoint[1]+vector_right_left[1]/2+vector_right_y[1]/2
];
}
if (yratio < 0.9){
let vector_y_left = [(leftpoint[0]-ypoint[0])*(1-yratio),(leftpoint[1]-ypoint[1])*(1-yratio)];
let vector_y_right = [(rightpoint[0]-ypoint[0])*(1-yratio),(rightpoint[1]-ypoint[1])*(1-yratio)];
ypoint = [
ypoint[0]+vector_y_left[0]/2+vector_y_right[0]/2,
ypoint[1]+vector_y_left[1]/2+vector_y_right[1]/2
];
}
context.moveTo(...leftpoint);
context.lineTo(...rightpoint);
context.lineTo(...ypoint);
context.fill();
}
const NierGeom = ({
DESTRUCTION = false,
cell_width = 512,
cell_height = round(sqrt(cell_width*cell_width-(cell_width/2)*(cell_width/2))),
cell_grid_1 = new Gtk.DrawingArea(),
wait_for_draw_1 = false,
wait_for_complete_draw_1 = false,
draw_t_1 = 0,
draw_duration_1 = 1000,
final_draw_1 = true,
gap = 0,
rows = round(SCREEN_HEIGHT/cell_height) + 1,
cols = round(SCREEN_WIDTH*2/cell_width) + 1,
cells_1 = Array.from({ length: rows*cols }, (_, i) => {return [0,0 ,0,0 ,0,0 ,0,0, 0,0]}),
opacity_step = 10,
vertex_step = 10,
first_update = 0,
entered = false,
}) =>
Window({
name: "bg_settings",
classNames: ["bg_settings"],
margin: [0, 0, 0, 0],
anchor: ["top", "left", "bottom", "right"],
exclusivity: "ignore",
layer: "top",
focusable: false,
setup: (self) =>
Utils.timeout(1, () => {
cell_grid_1.connect("draw", (self, context) => {
// print("drawing")
let stable = true;
for (let i = 0; i < rows*cols; i++) {
let x = i%cols;
let y = (i-x)/cols;
let [c_opacity,t_opacity, c_left,t_left ,c_right,t_right ,c_y,t_y,inited,s_override] = cells_1[i]
if (s_override == true) {
continue
}
if (abs(c_opacity-t_opacity) > 0.01) {
stable = false;
c_opacity = c_opacity + (t_opacity-c_opacity)/opacity_step;
}
if (abs(c_left-t_left) > 0.001) {
stable = false;
c_left = c_left + (t_left-c_left)/vertex_step;
}
if (abs(c_right-t_right) > 0.001) {
stable = false;
c_right = c_right + (t_right-c_right)/vertex_step;
}
if (abs(c_y-t_y) > 0.001) {
stable = false;
c_y = c_y + (t_y-c_y)/vertex_step;
}
draw_triangle(context, x*cell_width/2, y*cell_height, cell_width - gap, cell_height - gap/2, [...colors,c_opacity], (x%2==0?y%2==1:y%2==0),c_left,c_right,c_y);
cells_1[i] = [c_opacity,t_opacity, c_left,t_left ,c_right,t_right ,c_y,t_y,inited,s_override]
}
wait_for_draw_1 = false;
if (final_draw_1 && !stable){
// print("stabling")
cell_grid_1.queue_draw();
} else if (final_draw_1 && stable) {
wait_for_complete_draw_1 = false;
}
})
}),
connections: [
[
App,
(self, windowName, visible) => {
if (windowName == "bg_settings") {
print("bg_visibility",visible)
if (!visible) {
Utils.timeout(1, async () => {try{
////////////////////////////////////////////////////////////////////////////////////////////////////////
// exit part
////////////////////////////////////////////////////////////////////////////////////////////////////////
let start = Date.now();
draw_duration_1 = 1000;
let fps = 30;
draw_t_1 = start
final_draw_1 = false;
opacity_step = 2;
vertex_step = 2;
let [center_x,center_y] = [0,rand_int(rows/4,3*rows/4)];
let max_dist = (max(center_x,rows-center_x)**2 + max(center_y,cols-center_y)**2)**0.5 + 1;
while (true) {
let frame_start = Date.now();
let time_ratio = (draw_t_1 - start)/draw_duration_1;
for (let i = 0; i< rows*cols; i++){
let x = i%cols;
let y = (i-x)/cols;
let [c_opacity,t_opacity, c_left,t_left ,c_right,t_right ,c_y,t_y,inited,s_override] = cells_1[i]
if (s_override) {
entered = true;
return
}
let dist = dist_from_center(x,y,center_x,center_y,cols,rows)
if (time_ratio>1?1:dist < max_dist*time_ratio*(rand_int(0,100)/100)) {
if (inited == true) {
inited = false;
c_opacity = 1;
}
t_opacity = 0
}
cells_1[i] = [c_opacity,t_opacity, c_left,t_left ,c_right,t_right ,c_y,t_y,inited,s_override];
}
final_draw_1 = true;
wait_for_complete_draw_1 = true;
wait_for_draw_1 = true;
cell_grid_1.queue_draw();
while (wait_for_draw_1) {
await new Promise((r) => setTimeout(r, 1));
}
if (time_ratio > 1) {
break
}
draw_t_1 = Date.now();
await new Promise((r) => setTimeout(r, max(0,1000/fps - (draw_t_1-frame_start))));
}
////////////////////////////////////////////////////////////////////////////////////////////////////////
}catch(e){print(e)}})
} else {
}
}},
"window-toggled",
],
],
child: EventBox({
classNames: ["nier-geom-container"],
child: Overlay({
child: Scrollable({
child:cell_grid_1,
setup: (self) => Utils.timeout(1, async () => {try{
////////////////////////////////////////////////////////////////////////////////////////////////////////
// first part
////////////////////////////////////////////////////////////////////////////////////////////////////////
let start = Date.now();
draw_duration_1 = 1000;
let fps = 30;
draw_t_1 = start
final_draw_1 = false;
vertex_step = 2;
let [center_x,center_y] = [0,rand_int(rows/4,3*rows/4)];
let max_dist = (max(center_x,rows-center_x)**2 + max(center_y,cols-center_y)**2)**0.5 + 1;
while (true) {
let frame_start = Date.now();
let time_ratio = (draw_t_1 - start)/draw_duration_1;
for (let i = 0; i< rows*cols; i++){
let x = i%cols;
let y = (i-x)/cols;
let [c_opacity,t_opacity, c_left,t_left ,c_right,t_right ,c_y,t_y,inited,s_override] = cells_1[i]
if (s_override) {
entered = true;
return
}
let dist = dist_from_center(x,y,center_x,center_y,cols,rows)
if (time_ratio>1?1:dist < max_dist*time_ratio*(rand_int(50,100)/100)) {
if (inited == false) {
inited = true;
c_opacity = 1;
}
t_opacity = 0.6
if (dist < 2) {
t_y = 1;
[c_left,t_left,c_right,t_right] = [1,1,1,1]
}else if (x < center_x) {
t_left = 1;
[c_right,t_right,c_y,t_y] = [1,1,1,1]
} else {
t_right = 1;
[c_left,t_left,c_y,t_y] = [1,1,1,1]
}
}
cells_1[i] = [c_opacity,t_opacity, c_left,t_left ,c_right,t_right ,c_y,t_y,inited,s_override];
}
final_draw_1 = true;
wait_for_complete_draw_1 = true;
wait_for_draw_1 = true;
cell_grid_1.queue_draw();
while (wait_for_draw_1) {
await new Promise((r) => setTimeout(r, 1));
}
if (time_ratio > 1) {
break
}
// draw_t_1++;
draw_t_1 = Date.now();
await new Promise((r) => setTimeout(r, max(0,1000/fps - (draw_t_1-frame_start))));
}
////////////////////////////////////////////////////////////////////////////////////////////////////////
}catch(e){print(e)}})
}),
overlays: [
]
}),
}),
});
export default {
closeWindowDelay: {
bg_settings: 1100,
},
windows: [
NierGeom({})
]
}

9
components/fish/theme.fish Normal file
View File

@@ -0,0 +1,9 @@
function theme --on-signal USR2
theme.sh < $COLORFILE
end
if status is-interactive
starship init fish | source &
theme
sttt
end

6
test.frag → components/gridlines.frag
View File

@@ -11,9 +11,9 @@ void main() {
if (int(mod(gl_FragCoord.x, 10.0)) == 0 ||
int(mod(gl_FragCoord.y, 10.0)) == 0) {
pixColor[0] *= 0.95;
pixColor[1] *= 0.95;
pixColor[2] *= 0.95;
pixColor[0] *= 0.97;
pixColor[1] *= 0.97;
pixColor[2] *= 0.97;
// pixColor = vec4(0.10980392156,0.10588235294 ,0.09411764705 ,1);
}

16
components/starship.toml Normal file
View File

@@ -0,0 +1,16 @@
# Use custom format:
format="$directory$git_branch$character"
# Prompt symbols
[character]
success_symbol = "[ ᐉ](bright-green bold)"
error_symbol = "[ ᐉ](bright-red)"
vicmd_symbol = "[ ᐉ](bright-yellow)"
[directory]
format = "[▉]($style)[(bg:background fg:none) $path ](inverted)[▕]($style)"
style = "bg:background fg:none"
[git_branch]
format = "[▉]($style)[(bg:background fg:none) \ue725 $branch ](inverted)[▕]($style)"
style = "bg:background fg:none"

31
nierbars.patch
View File

@@ -1,31 +0,0 @@
diff --git a/hyprbars/barDeco.cpp b/hyprbars/barDeco.cpp
index 85ab308..367c2dd 100644
--- a/hyprbars/barDeco.cpp
+++ b/hyprbars/barDeco.cpp
@@ -216,7 +216,7 @@ void CHyprBar::renderBarTitle(const Vector2D& bufferSize, const float scale) {
int layoutWidth, layoutHeight;
pango_layout_get_size(layout, &layoutWidth, &layoutHeight);
- const int xOffset = std::round(((bufferSize.x - scaledBorderSize) / 2.0 - layoutWidth / PANGO_SCALE / 2.0));
+ const int xOffset = leftPadding;
const int yOffset = std::round((bufferSize.y / 2.0 - layoutHeight / PANGO_SCALE / 2.0));
cairo_move_to(CAIRO, xOffset, yOffset);
@@ -312,7 +312,7 @@ void CHyprBar::renderBarButtonsText(CBox* barBox, const float scale, const float
const bool LIGHT = button.col.r + button.col.g + button.col.b < 1;
- renderText(button.iconTex, button.icon, LIGHT ? CColor(0xFFFFFFFF) : CColor(0xFF000000), BUFSIZE, scale, button.size * 0.62);
+ renderText(button.iconTex, button.icon, LIGHT ? CColor(0xFFC2BDA6) : CColor(0xFF48463A), BUFSIZE, scale, button.size * 0.62);
}
if (button.iconTex.m_iTexID == 0)
@@ -359,7 +359,7 @@ void CHyprBar::draw(CMonitor* pMonitor, float a, const Vector2D& offset) {
const auto BARBUF = Vector2D{m_vLastWindowSize.x + 2 * BORDERSIZE, *PHEIGHT} * pMonitor->scale;
CBox titleBarBox = {m_vLastWindowPos.x - pMonitor->vecPosition.x, m_vLastWindowPos.y - pMonitor->vecPosition.y, m_vLastWindowSize.x,
- *PHEIGHT + ROUNDING * 3 /* to fill the bottom cuz we can't disable rounding there */};
+ *PHEIGHT + ROUNDING * 3 /* to fill the bottom cuz we can't disable rounding there */};
titleBarBox.translate(offset).scale(pMonitor->scale).round();

24
scripts/apply.sh
View File

@@ -1,24 +0,0 @@
#!/usr/bin/env fish
# swww init &
echo $argv[1]
set -Ux STARSHIP_CONFIG $argv[1]/starship.toml
set -Ux HYPRLAND_THEME $argv[1]
set color ~/.config/hypr/scripts/color
pkill foot
foot -s -c $argv[1]/components/foot.ini &
pkill dunst &
pkill -USR2 fish &
#TODO: add a check for asusctl
asusctl led-mode static -c "c2bda6" &
ags -c ~/rice/themes/nier/components/ags/config.js &
swww clear c2bda6 &

6
scripts/screenshot Executable file
View File

@@ -0,0 +1,6 @@
#!/usr/bin/bash
themedir=$1
grim -g "$(ags -b h -c $themedir/components/ags/windows/geom/geom.js)" /tmp/scrn.png && \
wl-copy < /tmp/scrn.png && \
notify-send "Screenshot copied to clipboard" -a "ss" -i /tmp/scrn.png

6
scripts/workspace_switch
View File

@@ -1,6 +0,0 @@
#!/usr/bin/env bash
hyprctl keyword monitor "eDP-1,addreserved,50,50,50,50"
sleep 0.1
hyprctl dispatch workspace $1
sleep 0.1
hyprctl keyword monitor "eDP-1,addreserved,0,0,0,0"

16
starship.toml
View File

@@ -1,16 +0,0 @@
# Use custom format:
format="$directory$git_branch$character"
# Prompt symbols
[character]
success_symbol = "[ ᐉ](bright-green bold)"
error_symbol = "[ ᐉ](bright-red)"
vicmd_symbol = "[ ᐉ](bright-yellow)"
[directory]
format = "[▉]($style)[(bg:background fg:#48463d) $path ](bg:#48463d fg:#c2bda6)[▕]($style)"
style = "bg:background fg:#48463d"
[git_branch]
format = "[▉]($style)[(bg:background fg:#48463d) \ue725 $branch ](bg:#48463d fg:#c2bda6)[▕]($style)"
style = "bg:background fg:#48463d"

54
theme.conf
View File

@@ -1,53 +1,57 @@
exec=cp $THEME/colors $HOME/.config/hypr/themes/colors
exec=$THEME/scripts/apply.sh $THEME
exec=$THEME/scripts/autostart
exec=fish -c "set -Ux COLORFILE $THEME/colors_nier_dark" && pkill -USR2 fish
exec=fish -c "set -Ux STARSHIP_CONFIG $THEME/components/starship.toml"
exec=fish -c "set -Ux HYPRLAND_THEME $THEME"
exec=ags -c $THEME/components/ags/config.js
exec=swww init; swww img $THEME/wallpapers/nier_dark.png --transition-type simple --transition-step 255
monitor=eDP-1,addreserved,100,100,0,0
layerrule = ignorealpha, settings
bind=Super,o,exec,$DRUN
####################################################################
# setting these here will override the values in main hyprland.conf
$FOOTCONF=$THEME/components/foot.ini
$FISHCONF=$THEME/components/fish/theme.fish
$DRUN=ags -b settings -t settings
$SCREENSHOT=$THEME/scripts/screenshot $THEME
####################################################################
source = $THEME/theme_nier_dark.conf
layerrule = ignorealpha 0.3, bg_settings
layerrule = ignorealpha, side
layerrule = ignorealpha, bar
layerrule = blur,settings
layerrule = ignorealpha, geom
layerrule = blur, bg_settings
layerrule = blur,side
layerrule = blur,bar
# layerrule = blur,address:0x55c8253b0c40
decoration {
rounding=0
blur {
enabled=1
size=10
passes=3
size=5
passes=2
noise=0.05
# contrast=2
}
shadow_range = 1
shadow_render_power = 1
col.shadow = rgba(48463d55)
col.shadow_inactive = rgba(48463d00)
shadow_offset =5 5
# screen_shader = ~/.config/hypr/themes/nier/test.frag
screen_shader = $THEME/components/gridlines.frag
}
# plugin=/home/flicko/hyprbars.so
plugin=/lib/hyprland-plugins/hyprbars.so
plugin {
hyprbars {
# example config
bar_height = 40
bar_color = rgb(48463d)
col.text = rgb(c2bda6)
bar_text_size = 17
bar_text_font = FOT-Rodin Pro M
# example buttons (R -> L)
# hyprbars-button = color, size, on-clic
hyprbars-button = rgb(48463d), 30, ◬, hyprctl dispatch killactive
hyprbars-button = rgb(48463d), 30,▽, hyprctl dispatch fullscreen 1
bar_text_align = left
}
}
general {
# col.active_border=0xff48463d
# col.inactive_border=0x5548463d
col.active_border=0x00000000
col.inactive_border=0x00000000
border_size=0
@@ -57,7 +61,6 @@ general {
animations {
enabled=1
# bezier=overshot,0.05,0.9,0.1,1.1
bezier = in-out,.65,-0.01,0,.95
bezier = woa,0,0,0,1
animation=windows,1,2,woa,popin
@@ -66,4 +69,7 @@ animations {
animation=workspaces,1,5,in-out,slide
}
bind = SUPER, space, exec, ags -t settings
bind=Super,v,exec,ags -b player -t player
bind=Super,o,exec,wofi
windowrule=move 400 510,title:^(fly_is_foot)$

14
theme_nier_dark.conf Normal file
View File

@@ -0,0 +1,14 @@
decoration {
col.shadow = rgba(c2bda655)
col.shadow_inactive = rgba(c2bda611)
}
plugin {
hyprbars {
bar_color = rgb(c2bda6)
col.text = rgb(48463d)
hyprbars-button = rgb(c2bda6), 30, ◬, hyprctl dispatch killactive
hyprbars-button = rgb(c2bda6), 30,▽, hyprctl dispatch fullscreen 1
}
}

14
theme_nier_light.conf Normal file
View File

@@ -0,0 +1,14 @@
decoration {
col.shadow = rgba(48463d55)
col.shadow_inactive = rgba(48463d11)
}
plugin {
hyprbars {
bar_color = rgb(48463d)
col.text = rgb(c2bda6)
hyprbars-button = rgb(48463d), 30, ◬, hyprctl dispatch killactive
hyprbars-button = rgb(48463d), 30,▽, hyprctl dispatch fullscreen 1
}
}

19
uicolors
View File

@@ -1,19 +0,0 @@
0: #1e1d1c
1: #A39D8F
2: #AFA899
3: #BBB4A5
4: #C3BCAB
5: #D2CCB9
6: #DBD5C2
7: #e8e5da
8: #a2a098
9: #A39D8F
10: #AFA899
11: #BBB4A5
12: #C3BCAB
13: #D2CCB9
14: #DBD5C2
15: #e8e5da
background: #1e1d1c
foreground: #e8e5da
cursor: #e8e5da

BIN
wallpapers/nier_dark.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 86 KiB

0
wallpapers/nier.png → wallpapers/nier_light.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 66 KiB

After

Width:  |  Height:  |  Size: 66 KiB