diff --git a/ags/.gitignore b/ags/.gitignore new file mode 100644 index 0000000..298eb4d --- /dev/null +++ b/ags/.gitignore @@ -0,0 +1,2 @@ +node_modules/ +@girs/ diff --git a/ags/app.ts b/ags/app.ts new file mode 100644 index 0000000..221ce58 --- /dev/null +++ b/ags/app.ts @@ -0,0 +1,13 @@ +import { Gio, monitorFile, readFile, Process } from "astal"; +import { App } from "astal/gtk3" + +import { Bar } from "./window/Bar"; +import { runStyleHandler } from "./scripts/style-handler"; + +runStyleHandler(); + +App.start({ + main() { + Bar(0); + } +}); diff --git a/ags/env.d.ts b/ags/env.d.ts new file mode 100644 index 0000000..467c0a4 --- /dev/null +++ b/ags/env.d.ts @@ -0,0 +1,21 @@ +declare const SRC: string + +declare module "inline:*" { + const content: string + export default content +} + +declare module "*.scss" { + const content: string + export default content +} + +declare module "*.blp" { + const content: string + export default content +} + +declare module "*.css" { + const content: string + export default content +} diff --git a/ags/package-lock.json b/ags/package-lock.json new file mode 100644 index 0000000..c9970a7 --- /dev/null +++ b/ags/package-lock.json @@ -0,0 +1,21 @@ +{ + "name": "astal-shell", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "name": "astal-shell", + "dependencies": { + "astal": "/usr/share/astal/gjs" + } + }, + "../../../../usr/share/astal/gjs": { + "name": "astal", + "license": "LGPL-2.1" + }, + "node_modules/astal": { + "resolved": "../../../../usr/share/astal/gjs", + "link": true + } + } +} diff --git a/ags/package.json b/ags/package.json new file mode 100644 index 0000000..44226f2 --- /dev/null +++ b/ags/package.json @@ -0,0 +1,6 @@ +{ + "name": "astal-shell", + "dependencies": { + "astal": "/usr/share/astal/gjs" + } +} diff --git a/ags/scripts/pywal.ts b/ags/scripts/pywal.ts new file mode 100644 index 0000000..25e2f17 --- /dev/null +++ b/ags/scripts/pywal.ts @@ -0,0 +1,10 @@ +import { readFile } from "astal"; +import { getUserDirs } from "./user"; + +export abstract class Wal { + getColors(): JSON { + return JSON.parse( + readFile(`${getUserDirs().cache}/wal/colors.json`)! + ); + } +} diff --git a/ags/scripts/style-handler.ts b/ags/scripts/style-handler.ts new file mode 100644 index 0000000..433305e --- /dev/null +++ b/ags/scripts/style-handler.ts @@ -0,0 +1,57 @@ +// handles reloading stylesheet and pywal colors + +import { readFile, monitorFile, Process, Gio } from "astal"; +import { App } from "astal/gtk3"; +import { getUserDirs } from "./user"; + +const stylePath = `${getUserDirs().state}/ags/style` +const watchPaths = [ + "./style", + "./style.scss" +]; + +export function runStyleHandler(): void { + reloadStyle(); + watch(); +} + +export function reloadStyle(): void { + compileStyle(); + applyStyle(); +} + +export function compileStyle(): void { + console.log("[LOG] Compiling sass (stylesheet)"); + Process.exec(`mkdir -p ${stylePath}`); + Process.exec(`bash -c "sass -I ./style ./style.scss ${stylePath}/style.css"`); +} + +export function applyStyle(): void { + console.log("[LOG] Applying stylesheet"); + App.reset_css(); + App.apply_css( + readFile(`${stylePath}/style.css`)! + ); +} + +function watch(): void { + // Monitor changes on stylesheet at runtime + watchPaths.map((path: string) => + monitorFile( + `${path}`, + (file: string) => { + console.log(`[LOG] Stylesheet ${file} file updated`) + compileStyle(); + applyStyle(); + } + ) + ) + + // Monitor PyWal colorscheme file + monitorFile( + `${getUserDirs().cache}/wal/colors.scss`, + (file: string) => { + Process.exec(`bash -c "cp -f ${file} ./style/_wal.scss"`) + } + ); +} diff --git a/ags/scripts/user.ts b/ags/scripts/user.ts new file mode 100644 index 0000000..db36739 --- /dev/null +++ b/ags/scripts/user.ts @@ -0,0 +1,11 @@ +import { GLib } from "astal"; + +export function getUserDirs() { + return { + home: GLib.getenv("HOME"), + state: GLib.getenv("XDG_STATE_HOME"), + cache: GLib.getenv("XDG_CACHE_HOME"), + config: GLib.getenv("XDG_CONFIG_HOME"), + data: GLib.getenv("XDG_DATA_HOME") + } as const; +} diff --git a/ags/style.scss b/ags/style.scss new file mode 100644 index 0000000..4275cd5 --- /dev/null +++ b/ags/style.scss @@ -0,0 +1,16 @@ +@use "./style/bar"; +@use "./style/wal"; + +* { + all: unset; + transition: 120ms linear; +} + +button { + padding: 6px; + border-radius: 12px; + + &:hover { + background: wal.$color1; + } +} diff --git a/ags/style/_bar.scss b/ags/style/_bar.scss new file mode 100644 index 0000000..ba430bb --- /dev/null +++ b/ags/style/_bar.scss @@ -0,0 +1,47 @@ +@use "./_wal"; + +.bar-container { + padding: 6px; + padding-bottom: 0px; + .bar-centerbox > * { + background: rgba($color: wal.$background, $alpha: .6); + padding: 6px; + border-radius: 18px; + } +} + +label { + font-size: 12px; + font-family: "Cantarell", "Noto Sans"; + font-weight: 500; +} + +.workspaces { + & button { + transition: 80ms linear; + padding: 0 12px; + background: wal.$color1; + margin: 3px 2px; + + &.focus { + background: wal.$foreground; + padding: 0 20px; + } + } +} + +.logo button { + $padding-inline: 12px; + padding-left: $padding-inline; + padding-right: calc($padding-inline + 3.9px); + + & label { + font-size: 14px; + } +} + +.cc-toggle button { + $padding-inline: 12px; + padding-left: $padding-inline; + padding-right: calc($padding-inline + 2px); +} diff --git a/ags/style/_mixins.scss b/ags/style/_mixins.scss new file mode 100644 index 0000000..e69de29 diff --git a/ags/style/_wal.scss b/ags/style/_wal.scss new file mode 100644 index 0000000..e2dc560 --- /dev/null +++ b/ags/style/_wal.scss @@ -0,0 +1,26 @@ +// SCSS Variables +// Generated by 'wal' +$wallpaper: "/home/joaov/wallpapers/Garden Kita.png"; + +// Special +$background: #101212; +$foreground: #c3c3c3; +$cursor: #c3c3c3; + +// Colors +$color0: #101212; +$color1: #59662a; +$color2: #517047; +$color3: #87863c; +$color4: #707b48; +$color5: #4b6266; +$color6: #84876e; +$color7: #8e9898; +$color8: #596d6d; +$color9: #778839; +$color10: #6C965F; +$color11: #B4B350; +$color12: #96A460; +$color13: #658388; +$color14: #B0B493; +$color15: #c3c3c3; diff --git a/ags/tsconfig.json b/ags/tsconfig.json new file mode 100644 index 0000000..1fc22db --- /dev/null +++ b/ags/tsconfig.json @@ -0,0 +1,14 @@ +{ + "$schema": "https://json.schemastore.org/tsconfig", + "compilerOptions": { + "experimentalDecorators": true, + "strict": true, + "target": "ES2022", + "module": "ES2022", + "moduleResolution": "Bundler", + "checkJs": true, + "allowJs": true, + "jsx": "react-jsx", + "jsxImportSource": "astal/gtk3" + } +} diff --git a/ags/widget/bar/Audio.tsx b/ags/widget/bar/Audio.tsx new file mode 100644 index 0000000..e69de29 diff --git a/ags/widget/bar/CCToggle.tsx b/ags/widget/bar/CCToggle.tsx new file mode 100644 index 0000000..896036e --- /dev/null +++ b/ags/widget/bar/CCToggle.tsx @@ -0,0 +1,11 @@ +import {Process} from "astal"; +import { Box, Button } from "astal/gtk3/widget"; + +export function CCToggle() { + return ( + +