From 72f9c2448287884e00663ca07d1515307324b4f9 Mon Sep 17 00:00:00 2001 From: tux Date: Mon, 9 Jun 2025 00:41:04 +0530 Subject: [PATCH] feat: split scss and rename widget folder to widgets --- style.scss | 121 +-------------------- {widget => widgets}/app-launcher/index.tsx | 0 widgets/app-launcher/style.scss | 17 +++ {widget => widgets}/bar/battery.tsx | 0 {widget => widgets}/bar/index.tsx | 0 {widget => widgets}/bar/launcher.tsx | 0 widgets/bar/style.scss | 100 +++++++++++++++++ {widget => widgets}/bar/tailscale.tsx | 0 {widget => widgets}/bar/time.tsx | 0 {widget => widgets}/bar/tray.tsx | 0 {widget => widgets}/bar/workspace.tsx | 0 {widget => widgets}/common/index.ts | 0 {widget => widgets}/common/picture.tsx | 0 windows.ts | 4 +- 14 files changed, 123 insertions(+), 119 deletions(-) rename {widget => widgets}/app-launcher/index.tsx (100%) create mode 100644 widgets/app-launcher/style.scss rename {widget => widgets}/bar/battery.tsx (100%) rename {widget => widgets}/bar/index.tsx (100%) rename {widget => widgets}/bar/launcher.tsx (100%) create mode 100644 widgets/bar/style.scss rename {widget => widgets}/bar/tailscale.tsx (100%) rename {widget => widgets}/bar/time.tsx (100%) rename {widget => widgets}/bar/tray.tsx (100%) rename {widget => widgets}/bar/workspace.tsx (100%) rename {widget => widgets}/common/index.ts (100%) rename {widget => widgets}/common/picture.tsx (100%) diff --git a/style.scss b/style.scss index a38a9b8..8a24645 100644 --- a/style.scss +++ b/style.scss @@ -1,6 +1,3 @@ -@use "sass:math"; -@use "sass:list"; - $accent: #ebdbb2; $fg-color: #ebdbb2; $bg-color: #282828; @@ -8,118 +5,8 @@ $inactive-color: #807966; $rounded: 8px; $font-size: 1.3rem; -window.Bar { - background: $bg-color; - color: $fg-color; - margin: 5px; - border-radius: $rounded; - padding: 10px; +// bar +@import "./widgets/bar/style.scss"; - .launcher { - background-color: $inactive-color; - border-radius: $rounded; - transition: all 0.15s ease-out; - padding: 0px; - margin: 0px; - - &:hover { - background-color: $bg-color; - } - } - - .workspace-container { - background-color: $bg-color; - color: $fg-color; - border-radius: $rounded; - - .workspace-button { - padding: 0px; - border: 0px; - margin: 2px; - background-color: $inactive-color; - min-height: 1.3rem; - min-width: 1.3rem; - border-radius: calc(list.nth(8px, 1) * 1.5); - transition: min-width 0.15s ease-out; - - &:hover { - background-color: $fg-color; - &.occupied { - background-color: $fg-color; - } - } - - &.active { - min-width: 3.5rem; - min-height: 1.3rem; - background-color: $accent; - } - - &.occupied { - background-color: $accent; - &.active { - background-color: $accent; - } - } - } - } - - .focused-client { - font-size: $font-size; - font-weight: 900; - } - - .tailscale { - font-size: $font-size; - font-weight: 900; - color: $bg-color; - background-color: $inactive-color; - border-radius: $rounded; - padding: 0px 10px; - } - - .tray { - font-size: $font-size; - font-weight: 900; - color: #fff; - background-color: $inactive-color; - border-radius: $rounded; - padding: 0px 10px; - } - - .battery { - font-size: $font-size; - font-weight: 900; - color: $bg-color; - background-color: $inactive-color; - border-radius: $rounded; - padding: 0px 10px; - } - - .time { - font-size: $font-size; - font-weight: 900; - color: $bg-color; - background-color: $inactive-color; - border-radius: $rounded; - padding: 0px 10px; - } -} - -window.app-launcher { - background: $bg-color; - border-radius: $rounded; - padding: 10px; - - .app-list { - background: $bg-color; - } - - .app-button { - border-radius: $rounded; - } - - .name { - color: $fg-color; - } -} +// app-launcher +@import "./widgets/app-launcher/style.scss"; diff --git a/widget/app-launcher/index.tsx b/widgets/app-launcher/index.tsx similarity index 100% rename from widget/app-launcher/index.tsx rename to widgets/app-launcher/index.tsx diff --git a/widgets/app-launcher/style.scss b/widgets/app-launcher/style.scss new file mode 100644 index 0000000..16e6499 --- /dev/null +++ b/widgets/app-launcher/style.scss @@ -0,0 +1,17 @@ +window.app-launcher { + background: $bg-color; + border-radius: $rounded; + padding: 10px; + + .app-list { + background: $bg-color; + } + + .app-button { + border-radius: $rounded; + } + + .name { + color: $fg-color; + } +} diff --git a/widget/bar/battery.tsx b/widgets/bar/battery.tsx similarity index 100% rename from widget/bar/battery.tsx rename to widgets/bar/battery.tsx diff --git a/widget/bar/index.tsx b/widgets/bar/index.tsx similarity index 100% rename from widget/bar/index.tsx rename to widgets/bar/index.tsx diff --git a/widget/bar/launcher.tsx b/widgets/bar/launcher.tsx similarity index 100% rename from widget/bar/launcher.tsx rename to widgets/bar/launcher.tsx diff --git a/widgets/bar/style.scss b/widgets/bar/style.scss new file mode 100644 index 0000000..2ba2d1e --- /dev/null +++ b/widgets/bar/style.scss @@ -0,0 +1,100 @@ +@use "sass:math"; +@use "sass:list"; + +window.Bar { + background: $bg-color; + color: $fg-color; + margin: 5px; + border-radius: $rounded; + padding: 10px; + + .launcher { + background-color: $inactive-color; + border-radius: $rounded; + transition: all 0.15s ease-out; + padding: 0px; + margin: 0px; + + &:hover { + background-color: $bg-color; + } + } + + .workspace-container { + background-color: $bg-color; + color: $fg-color; + border-radius: $rounded; + + .workspace-button { + padding: 0px; + border: 0px; + margin: 2px; + background-color: $inactive-color; + min-height: 1.3rem; + min-width: 1.3rem; + border-radius: calc(list.nth(8px, 1) * 1.5); + transition: min-width 0.15s ease-out; + + &:hover { + background-color: $fg-color; + &.occupied { + background-color: $fg-color; + } + } + + &.active { + min-width: 3.5rem; + min-height: 1.3rem; + background-color: $accent; + } + + &.occupied { + background-color: $accent; + &.active { + background-color: $accent; + } + } + } + } + + .focused-client { + font-size: $font-size; + font-weight: 900; + } + + .tailscale { + font-size: $font-size; + font-weight: 900; + color: $bg-color; + background-color: $inactive-color; + border-radius: $rounded; + padding: 0px 10px; + } + + .tray { + font-size: $font-size; + font-weight: 900; + color: #fff; + background-color: $inactive-color; + border-radius: $rounded; + padding: 0px 10px; + } + + .battery { + font-size: $font-size; + font-weight: 900; + color: $bg-color; + background-color: $inactive-color; + border-radius: $rounded; + padding: 0px 10px; + } + + .time { + font-size: $font-size; + font-weight: 900; + color: $bg-color; + background-color: $inactive-color; + border-radius: $rounded; + padding: 0px 10px; + } +} diff --git a/widget/bar/tailscale.tsx b/widgets/bar/tailscale.tsx similarity index 100% rename from widget/bar/tailscale.tsx rename to widgets/bar/tailscale.tsx diff --git a/widget/bar/time.tsx b/widgets/bar/time.tsx similarity index 100% rename from widget/bar/time.tsx rename to widgets/bar/time.tsx diff --git a/widget/bar/tray.tsx b/widgets/bar/tray.tsx similarity index 100% rename from widget/bar/tray.tsx rename to widgets/bar/tray.tsx diff --git a/widget/bar/workspace.tsx b/widgets/bar/workspace.tsx similarity index 100% rename from widget/bar/workspace.tsx rename to widgets/bar/workspace.tsx diff --git a/widget/common/index.ts b/widgets/common/index.ts similarity index 100% rename from widget/common/index.ts rename to widgets/common/index.ts diff --git a/widget/common/picture.tsx b/widgets/common/picture.tsx similarity index 100% rename from widget/common/picture.tsx rename to widgets/common/picture.tsx diff --git a/windows.ts b/windows.ts index aa01d0a..f82ce5c 100644 --- a/windows.ts +++ b/windows.ts @@ -1,4 +1,4 @@ -import { Bar } from "./widget/bar"; -import { AppLauncher } from "./widget/app-launcher"; +import { Bar } from "./widgets/bar"; +import { AppLauncher } from "./widgets/app-launcher"; export default [Bar, AppLauncher];