LESA/custum-hyprpanel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feat: Added a separators module for the bar. (#889)

Browse Source
This commit is contained in:
Jas Singh
2025-04-07 21:14:31 -07:00
committed by GitHub
parent 93235f0fb1
commit a48b072b53
8 changed files with 60 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/bar/exports.ts
View File

@@ -27,6 +27,8 @@ import { Hypridle } from '../../components/bar/modules/hypridle/index';
import { Cava } from '../../components/bar/modules/cava/index';
import { WorldClock } from '../../components/bar/modules/worldclock/index';
import { ModuleSeparator } from './modules/separator';
export {
Menu,
Workspaces,
@@ -56,4 +58,5 @@ export {
Hypridle,
Cava,
WorldClock,
ModuleSeparator,
};

54
src/components/bar/index.tsx
View File

@@ -25,6 +25,7 @@ import {
Hypridle,
Cava,
WorldClock,
ModuleSeparator,
} from './exports';
import { WidgetContainer } from './shared/WidgetContainer';
@@ -42,32 +43,33 @@ const { location } = options.theme.bar;
const { location: borderLocation } = options.theme.bar.border;
let widgets: WidgetMap = {
battery: (): JSX.Element => WidgetContainer(BatteryLabel()),
dashboard: (): JSX.Element => WidgetContainer(Menu()),
workspaces: (monitor: number): JSX.Element => WidgetContainer(Workspaces(monitor)),
windowtitle: (): JSX.Element => WidgetContainer(ClientTitle()),
media: (): JSX.Element => WidgetContainer(Media()),
notifications: (): JSX.Element => WidgetContainer(Notifications()),
volume: (): JSX.Element => WidgetContainer(Volume()),
network: (): JSX.Element => WidgetContainer(Network()),
bluetooth: (): JSX.Element => WidgetContainer(Bluetooth()),
clock: (): JSX.Element => WidgetContainer(Clock()),
systray: (): JSX.Element => WidgetContainer(SysTray()),
microphone: (): JSX.Element => WidgetContainer(Microphone()),
ram: (): JSX.Element => WidgetContainer(Ram()),
cpu: (): JSX.Element => WidgetContainer(Cpu()),
cputemp: (): JSX.Element => WidgetContainer(CpuTemp()),
storage: (): JSX.Element => WidgetContainer(Storage()),
netstat: (): JSX.Element => WidgetContainer(Netstat()),
kbinput: (): JSX.Element => WidgetContainer(KbInput()),
updates: (): JSX.Element => WidgetContainer(Updates()),
submap: (): JSX.Element => WidgetContainer(Submap()),
weather: (): JSX.Element => WidgetContainer(Weather()),
power: (): JSX.Element => WidgetContainer(Power()),
hyprsunset: (): JSX.Element => WidgetContainer(Hyprsunset()),
hypridle: (): JSX.Element => WidgetContainer(Hypridle()),
cava: (): JSX.Element => WidgetContainer(Cava()),
worldclock: (): JSX.Element => WidgetContainer(WorldClock()),
battery: () => WidgetContainer(BatteryLabel()),
dashboard: () => WidgetContainer(Menu()),
workspaces: (monitor: number) => WidgetContainer(Workspaces(monitor)),
windowtitle: () => WidgetContainer(ClientTitle()),
media: () => WidgetContainer(Media()),
notifications: () => WidgetContainer(Notifications()),
volume: () => WidgetContainer(Volume()),
network: () => WidgetContainer(Network()),
bluetooth: () => WidgetContainer(Bluetooth()),
clock: () => WidgetContainer(Clock()),
systray: () => WidgetContainer(SysTray()),
microphone: () => WidgetContainer(Microphone()),
ram: () => WidgetContainer(Ram()),
cpu: () => WidgetContainer(Cpu()),
cputemp: () => WidgetContainer(CpuTemp()),
storage: () => WidgetContainer(Storage()),
netstat: () => WidgetContainer(Netstat()),
kbinput: () => WidgetContainer(KbInput()),
updates: () => WidgetContainer(Updates()),
submap: () => WidgetContainer(Submap()),
weather: () => WidgetContainer(Weather()),
power: () => WidgetContainer(Power()),
hyprsunset: () => WidgetContainer(Hyprsunset()),
hypridle: () => WidgetContainer(Hypridle()),
cava: () => WidgetContainer(Cava()),
worldclock: () => WidgetContainer(WorldClock()),
separator: () => ModuleSeparator(),
};
const gdkMonitorMapper = new GdkMonitorMapper();

5
src/components/bar/modules/separator/index.tsx Normal file
View File

@@ -0,0 +1,5 @@
import Separator from 'src/components/shared/Separator';
export const ModuleSeparator = (): JSX.Element => {
return <Separator className={'bar-module-separator'} />;
};

5
src/components/settings/pages/config/bar/index.tsx
View File

@@ -140,6 +140,11 @@ export const BarSettings = (): JSX.Element => {
type="number"
/>
{/* Separator Section */}
<Header title="Separator" />
<Option opt={options.theme.bar.buttons.separator.margins} title="Margins" type="string" />
<Option opt={options.theme.bar.buttons.separator.width} title="Width" type="string" />
{/* Dashboard Section */}
<Header title="Dashboard" />
<Option opt={options.bar.launcher.icon} title="Dashboard Menu Icon" type="string" />

6
src/components/settings/pages/theme/bar/index.tsx
View File

@@ -35,7 +35,7 @@ export const BarTheme = (): JSX.Element => {
<Option opt={options.theme.bar.border.color} title="Bar Border Color" type="color" />
<Option
opt={options.theme.bar.buttons.opacity}
title="Button Opacity"
title="Module Opacity"
type="number"
increment={5}
min={0}
@@ -77,6 +77,10 @@ export const BarTheme = (): JSX.Element => {
type="color"
/>
{/* Separator Section */}
<Header title="Separator" />
<Option opt={options.theme.bar.buttons.separator.color} title="Color" type="color" />
{/* Dashboard Button Section */}
<Header title="Dashboard Button" />
<Option opt={options.theme.bar.buttons.dashboard.background} title="Background" type="color" />

5
src/options.ts
View File

@@ -309,6 +309,11 @@ const options = mkOptions({
total: opt(colors.lavender),
spacing: opt('0.5em'),
},
separator: {
color: opt(colors.surface2),
margins: opt('0.15em'),
width: opt('0.1em'),
},
modules: {
microphone: {
enableBorder: opt(false),

3
src/scss/main.scss
View File

@@ -53,3 +53,6 @@
//settings dialog
@import 'style/settings/dialog';
//bar separator
@import 'style/bar/module-separator';

6
src/scss/style/bar/module-separator.scss Normal file
View File

@@ -0,0 +1,6 @@
.bar-module-separator {
background-color: $bar-buttons-separator-color;
opacity: $bar-buttons-opacity * 0.01;
margin: $bar-buttons-separator-margins;
min-width: $bar-buttons-separator-width;
}