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

Upgrade to Agsv2 + Astal (#533)

Browse Source 
* migrate to astal

* Reorganize project structure.

* progress

* Migrate Dashboard and Window Title modules.

* Migrate clock and notification bar modules.

* Remove unused code

* Media menu

* Rework network and volume modules

* Finish custom modules.

* Migrate battery bar module.

* Update battery module and organize helpers.

* Migrate workspace module.

* Wrap up bar modules.

* Checkpoint before I inevitbly blow something up.

* Updates

* Fix event propagation logic.

* Type fixes

* More type fixes

* Fix padding for event boxes.

* Migrate volume menu and refactor scroll event handlers.

* network module WIP

* Migrate network service.

* Migrate bluetooth menu

* Updates

* Migrate notifications

* Update scrolling behavior for custom modules.

* Improve popup notifications and add timer functionality.

* Migration notifications menu header/controls.

* Migrate notifications menu and consolidate notifications menu code.

* Migrate power menu.

* Dashboard progress

* Migrate dashboard

* Migrate media menu.

* Reduce media menu nesting.

* Finish updating media menu bindings to navigate active player.

* Migrate battery menu

* Consolidate code

* Migrate calendar menu

* Fix workspace logic to update on client add/change/remove and consolidate code.

* Migrate osd

* Consolidate hyprland service connections.

* Implement startup dropdown menu position allocation.

* Migrate settings menu (WIP)

* Settings dialo menu fixes

* Finish Dashboard menu

* Type updates

* update submoldule for types

* update github ci

* ci

* Submodule update

* Ci updates

* Remove type checking for now.

* ci fix

* Fix a bunch of stuff, losing track... need rest. Brb coffee

* Validate dropdown menu before render.

* Consolidate code and add auto-hide functionality.

* Improve auto-hide behavior.

* Consolidate audio menu code

* Organize bluetooth code

* Improve active player logic

* Properly dismiss a notification on action button resolution.

* Implement CLI command engine and migrate CLI commands.

* Handle variable disposal

* Bar component fixes and add hyprland startup rules.

* Handle potentially null bindings network and bluetooth bindings.

* Handle potentially null wired adapter.

* Fix GPU stats

* Handle poller for GPU

* Fix gpu bar logic.

* Clean up logic for stat bars.

* Handle wifi and wired bar icon bindings.

* Fix battery percentages

* Fix switch behavior

* Wifi staging fixes

* Reduce redundant hyprland service calls.

* Code cleanup

* Document the option code and reduce redundant calls to optimize performance.

* Remove outdated comment.

* Add JSDocs

* Add meson to build hyprpanel

* Consistency updates

* Organize commands

* Fix images not showing up on notifications.

* Remove todo

* Move hyprpanel configuration to the ~/.config/hyprpanel directory and add utility commands.

* Handle SRC directory for the bundled/built hyprpanel.

* Add namespaces to all windows

* Migrate systray

* systray updates

* Update meson to include ts, tsx and scss files.

* Remove log from meson

* Fix file choose path and make it float.

* Added a command to check the dependency status

* Update dep names.

* Get scale directly from env

* Add todo
This commit is contained in:
Jas Singh
2024-12-20 18:10:10 -08:00
committed by GitHub
parent 955eed6c60
commit 2ffd602910
605 changed files with 19543 additions and 15999 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/components/settings/Header.tsx Normal file
View File

@@ -0,0 +1,36 @@
import { App, Gtk } from 'astal/gtk3';
import icons from 'src/lib/icons/icons';
import { isPrimaryClick } from 'src/lib/utils';
export const Header = (): JSX.Element => {
return (
<centerbox className="header">
<button
className="reset"
onClick={(_, event) => {
if (isPrimaryClick(event)) {
options.reset();
}
}}
tooltipText={'Reset All Settings'}
halign={Gtk.Align.START}
valign={Gtk.Align.START}
>
<icon icon={icons.ui.refresh} />
</button>
<box />
<button
className="close"
halign={Gtk.Align.END}
valign={Gtk.Align.START}
onClick={(_, event) => {
if (isPrimaryClick(event)) {
App.get_window('settings-dialog')?.set_visible(false);
}
}}
>
<icon icon={icons.ui.close} />
</button>
</centerbox>
);
};

52
src/components/settings/PageContainer.tsx Normal file
View File

@@ -0,0 +1,52 @@
import { bind, Variable } from 'astal';
import { Gtk } from 'astal/gtk3';
import { StackTransitionMap } from 'src/lib/constants/options';
import options from 'src/options';
import { isPrimaryClick } from 'src/lib/utils';
import { ThemesMenu } from './pages/theme';
import { SettingsPage, settingsPages } from './helpers';
import { SettingsMenu } from './pages/config';
const { transition, transitionTime } = options.menus;
const CurrentPage = Variable<SettingsPage>('Configuration');
const LastPage = Variable<SettingsPage>('Configuration');
export const PageContainer = (): JSX.Element => {
return (
<box className={'settings-page-container'} halign={Gtk.Align.FILL} vertical>
<box className={'settings-page-container2'} halign={Gtk.Align.FILL} hexpand>
<box className="option-pages-container" halign={Gtk.Align.CENTER} hexpand>
{settingsPages.map((page) => {
return (
<button
className={bind(CurrentPage).as(
(v) => `pager-button ${v === page ? 'active' : ''} category`,
)}
label={page}
onClick={(_, event) => {
if (isPrimaryClick(event)) {
LastPage.set(CurrentPage.get());
CurrentPage.set(page as SettingsPage);
}
}}
halign={Gtk.Align.CENTER}
/>
);
})}
</box>
</box>
<stack
className="themes-menu-stack"
transitionType={bind(transition).as((transitionType) => StackTransitionMap[transitionType])}
transitionDuration={bind(transitionTime)}
shown={bind(CurrentPage)}
vexpand={false}
hexpand
>
<SettingsMenu />
<ThemesMenu />
</stack>
</box>
);
};

37
src/components/settings/helpers.ts Normal file
View File

@@ -0,0 +1,37 @@
export const settingsPages = ['Configuration', 'Theming'] as const;
export const themePages = [
'General Settings',
'Matugen Settings',
'Bar',
'Notifications',
'OSD',
'Battery Menu',
'Bluetooth Menu',
'Clock Menu',
'Dashboard Menu',
'Media Menu',
'Network Menu',
'Notifications Menu',
'System Tray',
'Volume Menu',
'Power Menu',
'Custom Modules',
] as const;
export const configPages = [
'General',
'Bar',
'Media Menu',
'Notifications',
'OSD',
'Volume',
'Clock Menu',
'Dashboard Menu',
'Custom Modules',
'Power Menu',
] as const;
export type ThemePage = (typeof themePages)[number];
export type ConfigPage = (typeof configPages)[number];
export type SettingsPage = (typeof settingsPages)[number];

29
src/components/settings/index.tsx Normal file
View File

@@ -0,0 +1,29 @@
import { App } from 'astal/gtk3';
import RegularWindow from '../shared/RegularWindow';
import './side_effects/index';
import { Header } from './Header';
import { PageContainer } from './PageContainer';
export default (): JSX.Element => {
return (
<RegularWindow
className={'settings-dialog'}
visible={false}
name={'settings-dialog'}
title={'hyprpanel-settings'}
application={App}
setup={(self) => {
self.connect('delete-event', () => {
self.hide();
return true;
});
self.set_default_size(200, 300);
}}
>
<box className={'settings-dialog-box'} vertical>
<Header />
<PageContainer />
</box>
</RegularWindow>
);
};

485
src/components/settings/pages/config/bar/index.tsx Normal file
View File

@@ -0,0 +1,485 @@
import { Option } from 'src/components/settings/shared/Option';
import { Header } from 'src/components/settings/shared/Header';
import options from 'src/options';
import { Gtk } from 'astal/gtk3';
export const BarSettings = (): JSX.Element => {
return (
<scrollable
name={'Bar'}
vscroll={Gtk.PolicyType.ALWAYS}
hscroll={Gtk.PolicyType.AUTOMATIC}
className="menu-theme-page paged-container"
>
<box vertical>
{/* Layouts Section */}
<Header title="Layouts" />
<Option
opt={options.bar.layouts}
title="Bar Layouts for Monitors"
subtitle="Wiki Link: https://hyprpanel.com/configuration/panel.html#layouts"
type="object"
subtitleLink="https://hyprpanel.com/configuration/panel.html#layouts"
className="bar-layout-input"
/>
<Option opt={options.theme.bar.floating} title="Floating Bar" type="boolean" />
<Option opt={options.theme.bar.location} title="Location" type="enum" enums={['top', 'bottom']} />
<Option
opt={options.bar.autoHide}
title="Auto Hide"
type="enum"
enums={['never', 'fullscreen', 'single-window']}
/>
<Option
opt={options.theme.bar.buttons.enableBorders}
title="Enable Button Borders"
subtitle="Enables button borders for all buttons in the bar."
type="boolean"
/>
<Option
opt={options.theme.bar.buttons.borderSize}
title="Button Border Size"
subtitle="Button border for the individual modules must be enabled first"
type="string"
/>
{/* General Section */}
<Header title="General" />
<Option
opt={options.theme.bar.border.location}
title="Bar Border Location"
type="enum"
enums={['none', 'full', 'top', 'right', 'bottom', 'left', 'horizontal', 'vertical']}
/>
<Option opt={options.theme.bar.border.width} title="Bar Border Width" type="string" />
<Option
opt={options.theme.bar.border_radius}
title="Border Radius"
subtitle="Only applies if floating is enabled"
type="string"
/>
<Option
opt={options.theme.bar.outer_spacing}
title="Outer Spacing"
subtitle="Spacing on the outer left and right edges of the bar."
type="string"
/>
<Option
opt={options.theme.bar.buttons.y_margins}
title="Vertical Margins"
subtitle="Spacing above/below the buttons in the bar."
type="string"
/>
<Option
opt={options.theme.bar.buttons.spacing}
title="Button Spacing"
subtitle="Spacing between the buttons in the bar."
type="string"
/>
<Option opt={options.theme.bar.buttons.padding_x} title="Button Horizontal Padding" type="string" />
<Option opt={options.theme.bar.buttons.padding_y} title="Button Vertical Padding" type="string" />
<Option opt={options.theme.bar.buttons.radius} title="Button Radius" type="string" />
<Option
opt={options.theme.bar.buttons.innerRadiusMultiplier}
title="Inner Button Radius Multiplier"
subtitle="Change this to fine-tune the padding and prevent any overflow or gaps."
type="string"
/>
<Option
opt={options.theme.bar.layer}
title="Layer"
type="enum"
subtitle="Layer determines the Z index of your bar."
enums={['top', 'bottom', 'overlay', 'background']}
/>
<Option
opt={options.theme.bar.dropdownGap}
title="Dropdown Gap"
subtitle="The gap between the dropdown and the bar"
type="string"
/>
<Option
opt={options.theme.bar.margin_top}
title="Margin Top"
subtitle="Only applies if floating is enabled"
type="string"
/>
<Option
opt={options.theme.bar.margin_bottom}
title="Margin Bottom"
subtitle="Only applies if floating is enabled"
type="string"
/>
<Option
opt={options.theme.bar.margin_sides}
title="Margin Sides"
subtitle="Only applies if floating is enabled"
type="string"
/>
{/* Actions Section */}
<Header title="Actions" />
<Option
opt={options.bar.scrollSpeed}
title="Scrolling Speed"
subtitle="The speed at which the commands assigned to the scroll event will trigger"
type="number"
/>
{/* Dashboard Section */}
<Header title="Dashboard" />
<Option opt={options.bar.launcher.icon} title="Dashboard Menu Icon" type="string" />
<Option opt={options.bar.launcher.autoDetectIcon} title="Auto Detect Icon" type="boolean" />
<Option opt={options.theme.bar.buttons.dashboard.enableBorder} title="Button Border" type="boolean" />
<Option opt={options.bar.launcher.rightClick} title="Right Click" type="string" />
<Option opt={options.bar.launcher.middleClick} title="Middle Click" type="string" />
<Option opt={options.bar.launcher.scrollUp} title="Scroll Up" type="string" />
<Option opt={options.bar.launcher.scrollDown} title="Scroll Down" type="string" />
{/* Workspaces Section */}
<Header title="Workspaces" />
<Option opt={options.theme.bar.buttons.workspaces.enableBorder} title="Button Border" type="boolean" />
<Option
opt={options.bar.workspaces.showAllActive}
title="Mark Active Workspace On All Monitors"
subtitle="Marks the currently active workspace on each monitor."
type="boolean"
/>
<Option
opt={options.theme.bar.buttons.workspaces.fontSize}
title="Indicator Size"
subtitle="Only applicable to numbered workspaces and mapped icons. Adjust carefully."
type="string"
/>
<Option opt={options.bar.workspaces.show_icons} title="Show Workspace Icons" type="boolean" />
<Option opt={options.bar.workspaces.icons.available} title="Workspace Available" type="string" />
<Option opt={options.bar.workspaces.icons.active} title="Workspace Active" type="string" />
<Option opt={options.bar.workspaces.icons.occupied} title="Workspace Occupied" type="string" />
<Option opt={options.bar.workspaces.show_numbered} title="Show Workspace Numbers" type="boolean" />
<Option
opt={options.bar.workspaces.numbered_active_indicator}
title="Numbered Workspace Identifier"
subtitle="Only applicable if Workspace Numbers are enabled"
type="enum"
enums={['underline', 'highlight', 'color']}
/>
<Option
opt={options.theme.bar.buttons.workspaces.smartHighlight}
title="Smart Highlight"
subtitle="Automatically determines highlight color for mapped icons."
type="boolean"
/>
<Option
opt={options.theme.bar.buttons.workspaces.numbered_active_highlight_border}
title="Highlight Radius"
subtitle="Only applicable if Workspace Numbers are enabled"
type="string"
/>
<Option
opt={options.theme.bar.buttons.workspaces.numbered_active_highlight_padding}
title="Highlight Padding"
subtitle="Only applicable if Workspace Numbers are enabled"
type="string"
/>
<Option
opt={options.bar.workspaces.showWsIcons}
title="Map Workspaces to Icons"
subtitle="https://hyprpanel.com/configuration/panel.html#show-workspace-icons"
type="boolean"
/>
<Option
opt={options.bar.workspaces.showApplicationIcons}
title="Map Workspaces to Application Icons"
subtitle="Requires 'Map Workspace to Icons' enabled. See docs."
type="boolean"
/>
<Option
opt={options.bar.workspaces.applicationIconOncePerWorkspace}
title="Hide Duplicate App Icons"
type="boolean"
/>
<Option
opt={options.bar.workspaces.applicationIconMap}
title="App Icon Mappings"
subtitle="Use class/title from 'hyprctl clients'"
type="object"
/>
<Option
opt={options.bar.workspaces.applicationIconFallback}
title="Fallback App Icon"
subtitle="Fallback icon if no specific icon defined"
type="string"
/>
<Option
opt={options.bar.workspaces.applicationIconEmptyWorkspace}
title="App Icon for empty workspace"
type="string"
/>
<Option
opt={options.bar.workspaces.workspaceIconMap}
title="Workspace Icon & Color Mappings"
subtitle="https://hyprpanel.com/configuration/panel.html#show-workspace-icons"
type="object"
/>
<Option
opt={options.bar.workspaces.spacing}
title="Spacing"
subtitle="Spacing between workspace icons"
type="float"
/>
<Option
opt={options.bar.workspaces.workspaces}
title="Total Workspaces"
subtitle="Minimum number of workspaces to always show."
type="number"
/>
<Option
opt={options.bar.workspaces.monitorSpecific}
title="Monitor Specific"
subtitle="Only workspaces of the monitor are shown."
type="boolean"
/>
<Option
opt={options.bar.workspaces.hideUnoccupied}
title="Hide Unoccupied"
subtitle="Only show occupied or active workspaces"
type="boolean"
/>
<Option
opt={options.bar.workspaces.workspaceMask}
title="Mask Workspace Numbers On Monitors"
subtitle="For monitor-specific numbering"
type="boolean"
/>
<Option
opt={options.bar.workspaces.reverse_scroll}
title="Invert Scroll"
subtitle="Scrolling up goes to previous workspace"
type="boolean"
/>
<Option opt={options.bar.workspaces.scroll_speed} title="Scrolling Speed" type="number" />
<Option
opt={options.bar.workspaces.ignored}
title="Ignored Workspaces"
subtitle="A regex defining ignored workspaces"
type="string"
/>
{/* Window Titles Section */}
<Header title="Window Titles" />
<Option opt={options.theme.bar.buttons.windowtitle.enableBorder} title="Button Border" type="boolean" />
<Option opt={options.bar.windowtitle.custom_title} title="Use Custom Title" type="boolean" />
<Option
opt={options.bar.windowtitle.title_map}
title="Window Title Mappings"
subtitle="Requires Custom Title.\nWiki: https://hyprpanel.com/configuration/panel.html#window-title-mappings"
type="object"
subtitleLink="https://hyprpanel.com/configuration/panel.html#window-title-mappings"
/>
<Option
opt={options.bar.windowtitle.class_name}
title="Use Class Name"
subtitle="If custom title is disabled, shows class name instead."
type="boolean"
/>
<Option opt={options.bar.windowtitle.label} title="Show Window Title Label" type="boolean" />
<Option opt={options.bar.windowtitle.icon} title="Show Icon" type="boolean" />
<Option
opt={options.bar.windowtitle.truncation}
title="Truncate Window Title"
subtitle="Truncates the window title to a specified size."
type="boolean"
/>
<Option opt={options.bar.windowtitle.truncation_size} title="Truncation Size" type="number" min={10} />
<Option
opt={options.theme.bar.buttons.windowtitle.spacing}
title="Inner Spacing"
subtitle="Spacing between icon and label."
type="string"
/>
<Option opt={options.bar.windowtitle.leftClick} title="Left Click" type="string" />
<Option opt={options.bar.windowtitle.rightClick} title="Right Click" type="string" />
<Option opt={options.bar.windowtitle.middleClick} title="Middle Click" type="string" />
<Option opt={options.bar.windowtitle.scrollUp} title="Scroll Up" type="string" />
<Option opt={options.bar.windowtitle.scrollDown} title="Scroll Down" type="string" />
{/* Volume Section */}
<Header title="Volume" />
<Option opt={options.theme.bar.buttons.volume.enableBorder} title="Button Border" type="boolean" />
<Option opt={options.bar.volume.label} title="Show Volume Percentage" type="boolean" />
<Option
opt={options.theme.bar.buttons.volume.spacing}
title="Inner Spacing"
subtitle="Spacing between icon and label."
type="string"
/>
<Option opt={options.bar.volume.rightClick} title="Right Click" type="string" />
<Option opt={options.bar.volume.middleClick} title="Middle Click" type="string" />
<Option opt={options.bar.volume.scrollUp} title="Scroll Up" type="string" />
<Option opt={options.bar.volume.scrollDown} title="Scroll Down" type="string" />
{/* Network Section */}
<Header title="Network" />
<Option opt={options.theme.bar.buttons.network.enableBorder} title="Button Border" type="boolean" />
<Option opt={options.bar.network.label} title="Show Network Name" type="boolean" />
<Option opt={options.bar.network.showWifiInfo} title="Show Wifi Info On Hover" type="boolean" />
<Option
opt={options.bar.network.truncation}
title="Truncate Network Name"
subtitle="Truncates network name to specified size."
type="boolean"
/>
<Option opt={options.bar.network.truncation_size} title="Truncation Size" type="number" />
<Option
opt={options.theme.bar.buttons.network.spacing}
title="Inner Spacing"
subtitle="Spacing between icon and label."
type="string"
/>
<Option opt={options.bar.network.rightClick} title="Right Click" type="string" />
<Option opt={options.bar.network.middleClick} title="Middle Click" type="string" />
<Option opt={options.bar.network.scrollUp} title="Scroll Up" type="string" />
<Option opt={options.bar.network.scrollDown} title="Scroll Down" type="string" />
{/* Bluetooth Section */}
<Header title="Bluetooth" />
<Option opt={options.theme.bar.buttons.bluetooth.enableBorder} title="Button Border" type="boolean" />
<Option opt={options.bar.bluetooth.label} title="Show Bluetooth Label" type="boolean" />
<Option
opt={options.theme.bar.buttons.bluetooth.spacing}
title="Inner Spacing"
subtitle="Spacing between icon and label."
type="string"
/>
<Option opt={options.bar.bluetooth.rightClick} title="Right Click" type="string" />
<Option opt={options.bar.bluetooth.middleClick} title="Middle Click" type="string" />
<Option opt={options.bar.bluetooth.scrollUp} title="Scroll Up" type="string" />
<Option opt={options.bar.bluetooth.scrollDown} title="Scroll Down" type="string" />
{/* Battery Section */}
<Header title="Battery" />
<Option opt={options.theme.bar.buttons.battery.enableBorder} title="Button Border" type="boolean" />
<Option opt={options.bar.battery.label} title="Show Battery Percentage" type="boolean" />
<Option
opt={options.bar.battery.hideLabelWhenFull}
title="Hide Battery Percentage When Full"
type="boolean"
/>
<Option
opt={options.theme.bar.buttons.battery.spacing}
title="Inner Spacing"
subtitle="Spacing between icon and label."
type="string"
/>
<Option opt={options.bar.battery.rightClick} title="Right Click" type="string" />
<Option opt={options.bar.battery.middleClick} title="Middle Click" type="string" />
<Option opt={options.bar.battery.scrollUp} title="Scroll Up" type="string" />
<Option opt={options.bar.battery.scrollDown} title="Scroll Down" type="string" />
{/* System Tray Section */}
<Header title="System Tray" />
<Option opt={options.theme.bar.buttons.systray.enableBorder} title="Button Border" type="boolean" />
<Option
opt={options.bar.systray.ignore}
title="Ignore List"
subtitle="Apps to ignore\nWiki: https://hyprpanel.com/configuration/panel.html#system-tray"
subtitleLink="https://hyprpanel.com/configuration/panel.html#system-tray"
type="object"
/>
<Option
opt={options.bar.systray.customIcons}
title="Custom Systray Icons"
subtitle="Define custom icons for systray.\nWiki: https://hyprpanel.com/configuration/panel.html#custom-systray-icons"
subtitleLink="https://hyprpanel.com/configuration/panel.html#custom-systray-icons"
type="object"
/>
{/* Clock Section */}
<Header title="Clock" />
<Option opt={options.theme.bar.buttons.clock.enableBorder} title="Button Border" type="boolean" />
<Option opt={options.bar.clock.format} title="Clock Format" type="string" />
<Option opt={options.bar.clock.icon} title="Icon" type="string" />
<Option opt={options.bar.clock.showIcon} title="Show Icon" type="boolean" />
<Option opt={options.bar.clock.showTime} title="Show Time" type="boolean" />
<Option
opt={options.theme.bar.buttons.clock.spacing}
title="Inner Spacing"
subtitle="Spacing between icon and label."
type="string"
/>
<Option opt={options.bar.clock.rightClick} title="Right Click" type="string" />
<Option opt={options.bar.clock.middleClick} title="Middle Click" type="string" />
<Option opt={options.bar.clock.scrollUp} title="Scroll Up" type="string" />
<Option opt={options.bar.clock.scrollDown} title="Scroll Down" type="string" />
{/* Media Section */}
<Header title="Media" />
<Option opt={options.theme.bar.buttons.media.enableBorder} title="Button Border" type="boolean" />
<Option
opt={options.theme.bar.buttons.media.spacing}
title="Inner Spacing"
subtitle="Spacing between icon and label."
type="string"
/>
<Option
opt={options.bar.media.format}
title="Label Format"
subtitle="Placeholders: {title}, {artists}, {artist}, {album}, {name}, {identity}"
type="string"
/>
<Option opt={options.bar.media.show_label} title="Toggle Media Label" type="boolean" />
<Option
opt={options.bar.media.truncation}
title="Truncate Media Label"
subtitle="Requires Toggle Media Label."
type="boolean"
/>
<Option
opt={options.bar.media.truncation_size}
title="Truncation Size"
subtitle="Requires Toggle Media Label."
type="number"
min={10}
/>
<Option
opt={options.bar.media.show_active_only}
title="Auto Hide"
subtitle="Hide if no media detected."
type="boolean"
/>
<Option opt={options.bar.media.rightClick} title="Right Click" type="string" />
<Option opt={options.bar.media.middleClick} title="Middle Click" type="string" />
{/* Notifications Section */}
<Header title="Notifications" />
<Option
opt={options.theme.bar.buttons.notifications.enableBorder}
title="Button Border"
type="boolean"
/>
<Option
opt={options.bar.notifications.show_total}
title="Show Total # of notifications"
type="boolean"
/>
<Option
opt={options.bar.notifications.hideCountWhenZero}
title="Auto Hide Label"
subtitle="Hide label when zero notifications"
type="boolean"
/>
<Option
opt={options.theme.bar.buttons.notifications.spacing}
title="Inner Spacing"
subtitle="Spacing between icon and label."
type="string"
/>
<Option opt={options.bar.notifications.rightClick} title="Right Click" type="string" />
<Option opt={options.bar.notifications.middleClick} title="Middle Click" type="string" />
<Option opt={options.bar.notifications.scrollUp} title="Scroll Up" type="string" />
<Option opt={options.bar.notifications.scrollDown} title="Scroll Down" type="string" />
</box>
</scrollable>
);
};

180
src/components/settings/pages/config/general/index.tsx Normal file
View File

@@ -0,0 +1,180 @@
import { Option } from 'src/components/settings/shared/Option';
import { Header } from 'src/components/settings/shared/Header';
import options from 'src/options';
import { Gtk } from 'astal/gtk3';
export const BarGeneral = (): JSX.Element => {
return (
<scrollable name={'General'} className="bar-theme-page paged-container" vscroll={Gtk.PolicyType.AUTOMATIC}>
<box vertical>
<Header title="General Settings" />
<Option opt={options.theme.font.name} title="Font" type="font" />
<Option opt={options.theme.font.size} title="Font Size" type="string" />
<Option
opt={options.theme.font.weight}
title="Font Weight"
subtitle="100, 200, 300, etc."
type="number"
increment={100}
min={100}
max={900}
/>
<Option
opt={options.dummy}
title="Config"
subtitle="WARNING: Importing a configuration will replace your current configuration settings."
type="config_import"
exportData={{ filePath: CONFIG, themeOnly: false }}
/>
<Option
opt={options.hyprpanel.restartAgs}
title="Restart Hyprpanel On Wake Or Monitor Connection"
subtitle="WARNING: Disabling this may cause bar issues on sleep/monitor connect."
type="boolean"
/>
<Option
opt={options.hyprpanel.restartCommand}
title="Restart Command"
subtitle="Command executed when restarting. Use '-b busName' flag if needed."
type="string"
/>
<Option opt={options.terminal} title="Terminal" subtitle="For tools like 'btop'" type="string" />
<Option
opt={options.tear}
title="Tearing Compatible"
subtitle="Switches overlays to 'top' layer for tearing compatibility."
type="boolean"
/>
<Option
opt={options.menus.transition}
title="Menu Transition"
type="enum"
enums={['none', 'crossfade']}
/>
<Option
opt={options.menus.transitionTime}
title="Menu Transition Duration"
type="number"
min={0}
max={10000}
increment={25}
/>
<Header title="Scaling" />
<Option
opt={options.scalingPriority}
title="Scaling Priority"
type="enum"
enums={['both', 'gdk', 'hyprland']}
/>
<Option opt={options.theme.bar.scaling} title="Bar" type="number" min={1} max={100} increment={5} />
<Option
opt={options.theme.notification.scaling}
title="Notifications"
type="number"
min={1}
max={100}
increment={5}
/>
<Option opt={options.theme.osd.scaling} title="OSD" type="number" min={1} max={100} increment={5} />
<Option
opt={options.theme.bar.menus.menu.dashboard.scaling}
title="Dashboard Menu"
type="number"
min={1}
max={100}
increment={5}
/>
<Option
opt={options.theme.bar.menus.menu.dashboard.confirmation_scaling}
title="Confirmation Dialog"
type="number"
min={1}
max={100}
increment={5}
/>
<Option
opt={options.theme.bar.menus.menu.media.scaling}
title="Media Menu"
type="number"
min={1}
max={100}
increment={5}
/>
<Option
opt={options.theme.bar.menus.menu.volume.scaling}
title="Volume Menu"
type="number"
min={1}
max={100}
increment={5}
/>
<Option
opt={options.theme.bar.menus.menu.network.scaling}
title="Network Menu"
type="number"
min={1}
max={100}
increment={5}
/>
<Option
opt={options.theme.bar.menus.menu.bluetooth.scaling}
title="Bluetooth Menu"
type="number"
min={1}
max={100}
increment={5}
/>
<Option
opt={options.theme.bar.menus.menu.battery.scaling}
title="Battery Menu"
type="number"
min={1}
max={100}
increment={5}
/>
<Option
opt={options.theme.bar.menus.menu.clock.scaling}
title="Clock Menu"
type="number"
min={1}
max={100}
increment={5}
/>
<Option
opt={options.theme.bar.menus.menu.notifications.scaling}
title="Notifications Menu"
type="number"
min={1}
max={100}
increment={5}
/>
<Option
opt={options.theme.bar.menus.menu.power.scaling}
title="Power Menu"
type="number"
min={1}
max={100}
increment={5}
/>
<Option
opt={options.theme.tooltip.scaling}
title="Tooltips"
type="number"
min={1}
max={100}
increment={5}
/>
<Option
opt={options.theme.bar.menus.popover.scaling}
title="Popovers"
subtitle="e.g., Right click menu of system tray items."
type="number"
min={1}
max={100}
increment={5}
/>
</box>
</scrollable>
);
};

73
src/components/settings/pages/config/index.tsx Normal file
View File

@@ -0,0 +1,73 @@
import options from 'src/options';
import { bind, Variable } from 'astal';
import { Gtk } from 'astal/gtk3';
import { isPrimaryClick } from 'src/lib/utils';
import { StackTransitionMap } from 'src/lib/constants/options';
import { ConfigPage, configPages } from '../../helpers';
import { BarGeneral } from './general';
import { BarSettings } from './bar';
import { MediaMenuSettings } from './menus/media';
import { NotificationSettings } from './notifications';
import { OSDSettings } from './osd';
import { VolumeMenuSettings } from './menus/volume';
import { ClockMenuSettings } from './menus/clock';
import { DashboardMenuSettings } from './menus/dashboard';
import { CustomModuleSettings } from 'src/components/bar/settings/config';
import { PowerMenuSettings } from './menus/power';
const { transition, transitionTime } = options.menus;
const CurrentPage = Variable<ConfigPage>('General');
export const SettingsMenu = (): JSX.Element => {
return (
<box name={'Configuration'} halign={Gtk.Align.FILL} hexpand vertical>
<box className="option-pages-container" halign={Gtk.Align.CENTER} hexpand vertical>
{[0, 1, 2].map((section) => {
return (
<box>
{configPages.map((page, index) => {
if (index >= section * 6 && index < section * 6 + 6) {
return (
<button
className={bind(CurrentPage).as(
(pg) => `pager-button ${pg === page ? 'active' : ''}`,
)}
label={page}
onClick={(_, event) => {
if (isPrimaryClick(event)) {
CurrentPage.set(page as ConfigPage);
}
}}
halign={Gtk.Align.CENTER}
/>
);
}
return <box />;
})}
</box>
);
})}
</box>
<stack
className="themes-menu-stack"
transitionType={bind(transition).as((transitionType) => StackTransitionMap[transitionType])}
transitionDuration={bind(transitionTime)}
shown={bind(CurrentPage)}
vexpand
>
<BarGeneral />
<BarSettings />
<MediaMenuSettings />
<NotificationSettings />
<OSDSettings />
<VolumeMenuSettings />
<ClockMenuSettings />
<DashboardMenuSettings />
<CustomModuleSettings />
<PowerMenuSettings />
</stack>
</box>
);
};

43
src/components/settings/pages/config/menus/clock.tsx Normal file
View File

@@ -0,0 +1,43 @@
import { Option } from 'src/components/settings/shared/Option';
import { Header } from 'src/components/settings/shared/Header';
import options from 'src/options';
import { Gtk } from 'astal/gtk3';
export const ClockMenuSettings = (): JSX.Element => {
return (
<scrollable name={'Clock Menu'} vscroll={Gtk.PolicyType.AUTOMATIC}>
<box className="bar-theme-page paged-container" vertical>
<Header title="Time" />
<Option opt={options.menus.clock.time.military} title="Use 24hr time" type="boolean" />
<Option opt={options.menus.clock.time.hideSeconds} title="Hide seconds" type="boolean" />
<Header title="Weather" />
<Option opt={options.menus.clock.weather.enabled} title="Enabled" type="boolean" />
<Option
opt={options.menus.clock.weather.location}
title="Location"
subtitle="Zip Code, Postal Code, City, etc."
type="string"
/>
<Option
opt={options.menus.clock.weather.key}
title="Weather API Key"
subtitle="API Key or path to JSON file containing 'weather_api_key'"
type="string"
/>
<Option
opt={options.menus.clock.weather.unit}
title="Units"
type="enum"
enums={['imperial', 'metric']}
/>
<Option
opt={options.menus.clock.weather.interval}
title="Weather Fetching Interval (ms)"
subtitle="May require AGS restart."
type="number"
/>
</box>
</scrollable>
);
};

240
src/components/settings/pages/config/menus/dashboard.tsx Normal file
View File

@@ -0,0 +1,240 @@
import { Option } from 'src/components/settings/shared/Option';
import { Header } from 'src/components/settings/shared/Header';
import options from 'src/options';
import { Gtk } from 'astal/gtk3';
export const DashboardMenuSettings = (): JSX.Element => {
return (
<scrollable
name={'Dashboard Menu'}
className="bar-theme-page paged-container"
vscroll={Gtk.PolicyType.ALWAYS}
hscroll={Gtk.PolicyType.AUTOMATIC}
vexpand
overlayScrolling
>
<box vertical>
<Header title="Power Menu" />
<Option
opt={options.menus.dashboard.powermenu.avatar.image}
title="Profile Image"
type="img"
subtitle="By default uses '~/.face.icon'"
/>
<Option
opt={options.menus.dashboard.powermenu.avatar.name}
title="Profile Name"
subtitle="Use 'system' for auto system name"
type="string"
/>
<Option
opt={options.theme.bar.menus.menu.dashboard.profile.size}
title="Profile Image Size"
type="string"
/>
<Option
opt={options.theme.bar.menus.menu.dashboard.profile.radius}
title="Profile Image Radius"
type="string"
/>
<Option
opt={options.menus.dashboard.powermenu.confirmation}
title="Show Confirmation Dialogue"
type="boolean"
/>
<Option opt={options.menus.dashboard.powermenu.shutdown} title="Shutdown Command" type="string" />
<Option opt={options.menus.dashboard.powermenu.reboot} title="Reboot Command" type="string" />
<Option opt={options.menus.dashboard.powermenu.logout} title="Logout Command" type="string" />
<Option opt={options.menus.dashboard.powermenu.sleep} title="Sleep Command" type="string" />
<Header title="Controls" />
<Option opt={options.menus.dashboard.controls.enabled} title="Enabled" type="boolean" />
<Header title="Resource Usage Metrics" />
<Option opt={options.menus.dashboard.stats.enabled} title="Enabled" type="boolean" />
<Option
opt={options.menus.dashboard.stats.enable_gpu}
title="Track GPU"
subtitle="Only for NVidia + python-gpustat"
type="boolean"
/>
<Option
opt={options.menus.dashboard.stats.interval}
title="Update Interval"
subtitle="Frequency of system metrics polling."
type="number"
min={100}
increment={500}
/>
<Header title="Shortcuts" />
<Option opt={options.menus.dashboard.shortcuts.enabled} title="Enabled" type="boolean" />
{/* Left Shortcuts */}
<Option
opt={options.menus.dashboard.shortcuts.left.shortcut1.icon}
title="Left - Shortcut 1 (Icon)"
type="string"
/>
<Option
opt={options.menus.dashboard.shortcuts.left.shortcut1.command}
title="Left - Shortcut 1 (Command)"
type="string"
/>
<Option
opt={options.menus.dashboard.shortcuts.left.shortcut1.tooltip}
title="Left - Shortcut 1 (Tooltip)"
type="string"
/>
<Option
opt={options.menus.dashboard.shortcuts.left.shortcut2.icon}
title="Left - Shortcut 2 (Icon)"
type="string"
/>
<Option
opt={options.menus.dashboard.shortcuts.left.shortcut2.command}
title="Left - Shortcut 2 (Command)"
type="string"
/>
<Option
opt={options.menus.dashboard.shortcuts.left.shortcut2.tooltip}
title="Left - Shortcut 2 (Tooltip)"
type="string"
/>
<Option
opt={options.menus.dashboard.shortcuts.left.shortcut3.icon}
title="Left - Shortcut 3 (Icon)"
type="string"
/>
<Option
opt={options.menus.dashboard.shortcuts.left.shortcut3.command}
title="Left - Shortcut 3 (Command)"
type="string"
/>
<Option
opt={options.menus.dashboard.shortcuts.left.shortcut3.tooltip}
title="Left - Shortcut 3 (Tooltip)"
type="string"
/>
<Option
opt={options.menus.dashboard.shortcuts.left.shortcut4.icon}
title="Left - Shortcut 4 (Icon)"
type="string"
/>
<Option
opt={options.menus.dashboard.shortcuts.left.shortcut4.command}
title="Left - Shortcut 4 (Command)"
type="string"
/>
<Option
opt={options.menus.dashboard.shortcuts.left.shortcut4.tooltip}
title="Left - Shortcut 4 (Tooltip)"
type="string"
/>
{/* Right Shortcuts */}
<Option
opt={options.menus.dashboard.shortcuts.right.shortcut1.icon}
title="Right - Shortcut 1 (Icon)"
type="string"
/>
<Option
opt={options.menus.dashboard.shortcuts.right.shortcut1.command}
title="Right - Shortcut 1 (Command)"
type="string"
/>
<Option
opt={options.menus.dashboard.shortcuts.right.shortcut1.tooltip}
title="Right - Shortcut 1 (Tooltip)"
type="string"
/>
<Option
opt={options.menus.dashboard.shortcuts.right.shortcut3.icon}
title="Right - Shortcut 3 (Icon)"
type="string"
/>
<Option
opt={options.menus.dashboard.shortcuts.right.shortcut3.command}
title="Right - Shortcut 3 (Command)"
type="string"
/>
<Option
opt={options.menus.dashboard.shortcuts.right.shortcut3.tooltip}
title="Right - Shortcut 3 (Tooltip)"
type="string"
/>
<Header title="Directories" />
<Option opt={options.menus.dashboard.directories.enabled} title="Enabled" type="boolean" />
{/* Left Directories */}
<Option
opt={options.menus.dashboard.directories.left.directory1.label}
title="Left - Directory 1 (Label)"
type="string"
/>
<Option
opt={options.menus.dashboard.directories.left.directory1.command}
title="Left - Directory 1 (Command)"
type="string"
/>
<Option
opt={options.menus.dashboard.directories.left.directory2.label}
title="Left - Directory 2 (Label)"
type="string"
/>
<Option
opt={options.menus.dashboard.directories.left.directory2.command}
title="Left - Directory 2 (Command)"
type="string"
/>
<Option
opt={options.menus.dashboard.directories.left.directory3.label}
title="Left - Directory 3 (Label)"
type="string"
/>
<Option
opt={options.menus.dashboard.directories.left.directory3.command}
title="Left - Directory 3 (Command)"
type="string"
/>
{/* Right Directories */}
<Option
opt={options.menus.dashboard.directories.right.directory1.label}
title="Right - Directory 1 (Label)"
type="string"
/>
<Option
opt={options.menus.dashboard.directories.right.directory1.command}
title="Right - Directory 1 (Command)"
type="string"
/>
<Option
opt={options.menus.dashboard.directories.right.directory2.label}
title="Right - Directory 2 (Label)"
type="string"
/>
<Option
opt={options.menus.dashboard.directories.right.directory2.command}
title="Right - Directory 2 (Command)"
type="string"
/>
<Option
opt={options.menus.dashboard.directories.right.directory3.label}
title="Right - Directory 3 (Label)"
type="string"
/>
<Option
opt={options.menus.dashboard.directories.right.directory3.command}
title="Right - Directory 3 (Command)"
type="string"
/>
</box>
</scrollable>
);
};

29
src/components/settings/pages/config/menus/media.tsx Normal file
View File

@@ -0,0 +1,29 @@
import { Option } from 'src/components/settings/shared/Option';
import { Header } from 'src/components/settings/shared/Header';
import options from 'src/options';
import { Gtk } from 'astal/gtk3';
export const MediaMenuSettings = (): JSX.Element => {
return (
<scrollable name={'Media Menu'} vscroll={Gtk.PolicyType.AUTOMATIC}>
<box className="bar-theme-page paged-container" vertical>
<Header title="Media" />
<Option opt={options.menus.media.hideAuthor} title="Hide Author" type="boolean" />
<Option opt={options.menus.media.hideAlbum} title="Hide Album" type="boolean" />
<Option opt={options.menus.media.displayTime} title="Display Time Info" type="boolean" />
<Option
opt={options.menus.media.displayTimeTooltip}
title="Display Time Tooltip"
subtitle="Show media time info on hover"
type="boolean"
/>
<Option
opt={options.menus.media.noMediaText}
title="No Media Placeholder"
subtitle="Text when no media is playing"
type="string"
/>
</box>
</scrollable>
);
};

49
src/components/settings/pages/config/menus/power.tsx Normal file
View File

@@ -0,0 +1,49 @@
import { Option } from 'src/components/settings/shared/Option';
import { Header } from 'src/components/settings/shared/Header';
import options from 'src/options';
import { Gtk } from 'astal/gtk3';
export const PowerMenuSettings = (): JSX.Element => {
return (
<scrollable
name={'Power Menu'}
className="bar-theme-page paged-container"
vscroll={Gtk.PolicyType.ALWAYS}
hscroll={Gtk.PolicyType.AUTOMATIC}
vexpand
overlayScrolling
>
<box vertical>
<Header title="Power Menu" />
<Option opt={options.menus.power.showLabel} title="Show Label" type="boolean" />
<Option
opt={options.menus.power.lowBatteryNotification}
title="Show Notification For Low Battery"
type="boolean"
/>
<Option
opt={options.menus.power.lowBatteryThreshold}
title="Battery Level For Notification"
type="number"
/>
<Option
opt={options.menus.power.lowBatteryNotificationTitle}
title="Low Battery Notification Title"
subtitle="Use $POWER_LEVEL for battery percent"
type="string"
/>
<Option
opt={options.menus.power.lowBatteryNotificationText}
title="Low Battery Notification Body"
subtitle="Use $POWER_LEVEL for battery percent"
type="string"
/>
<Option opt={options.menus.power.confirmation} title="Confirmation Dialog" type="boolean" />
<Option opt={options.menus.power.shutdown} title="Shutdown Command" type="string" />
<Option opt={options.menus.power.reboot} title="Reboot Command" type="string" />
<Option opt={options.menus.power.logout} title="Logout Command" type="string" />
<Option opt={options.menus.power.sleep} title="Sleep Command" type="string" />
</box>
</scrollable>
);
};

20
src/components/settings/pages/config/menus/volume.tsx Normal file
View File

@@ -0,0 +1,20 @@
import { Option } from 'src/components/settings/shared/Option';
import { Header } from 'src/components/settings/shared/Header';
import options from 'src/options';
import { Gtk } from 'astal/gtk3';
export const VolumeMenuSettings = (): JSX.Element => {
return (
<scrollable name={'Volume'} vscroll={Gtk.PolicyType.AUTOMATIC}>
<box className="bar-theme-page paged-container" vertical>
<Header title="Volume" />
<Option
opt={options.menus.volume.raiseMaximumVolume}
title="Allow Raising Volume Above 100%"
subtitle="Allows up to 150% volume"
type="boolean"
/>
</box>
</scrollable>
);
};

95
src/components/settings/pages/config/notifications/index.tsx Normal file
View File

@@ -0,0 +1,95 @@
import { Option } from 'src/components/settings/shared/Option';
import { Header } from 'src/components/settings/shared/Header';
import options from 'src/options';
import { Gtk } from 'astal/gtk3';
export const NotificationSettings = (): JSX.Element => {
return (
<scrollable name={'Notifications'} vscroll={Gtk.PolicyType.AUTOMATIC}>
<box className="bar-theme-page paged-container" vertical>
<Header title="Notification Settings" />
<Option
opt={options.notifications.ignore}
title="Ignored Applications"
subtitle="Wiki: https://hyprpanel.com/configuration/notifications.html#ignored-applications"
subtitleLink="https://hyprpanel.com/configuration/notifications.html#ignored-applications"
type="object"
/>
<Option
opt={options.notifications.position}
title="Notification Location"
type="enum"
enums={['top left', 'top', 'top right', 'right', 'bottom right', 'bottom', 'bottom left', 'left']}
/>
<Option opt={options.theme.notification.border_radius} title="Border Radius" type="string" />
<Option
opt={options.notifications.monitor}
title="Monitor"
subtitle="ID of the monitor to display notifications"
type="number"
/>
<Option
opt={options.notifications.showActionsOnHover}
title="Show Actions only on Hover"
subtitle="Actions appear on hover"
type="boolean"
/>
<Option
opt={options.notifications.active_monitor}
title="Follow Cursor"
subtitle="Notifications follow the monitor of your cursor"
type="boolean"
/>
<Option
opt={options.notifications.clearDelay}
title="Clear Delay"
subtitle="Delay in ms before clearing a notification"
type="number"
increment={20}
/>
<Option
opt={options.notifications.timeout}
title="Notification Timeout"
subtitle="Duration in ms the notification stays"
type="number"
/>
<Option
opt={options.notifications.cache_actions}
title="Preserve Actions"
subtitle="Persist action buttons after reboot."
type="boolean"
/>
<Header title="Notification Menu Settings" />
<Option
opt={options.theme.bar.menus.menu.notifications.height}
title="Notification Menu Height"
type="string"
/>
<Option
opt={options.notifications.displayedTotal}
title="Displayed Total"
subtitle="Number of notifications to show at once."
type="number"
min={1}
/>
<Option
opt={options.theme.bar.menus.menu.notifications.pager.show}
title="Show Pager"
subtitle="Shows pagination footer."
type="boolean"
/>
<Option
opt={options.theme.bar.menus.menu.notifications.scrollbar.width}
title="Scrollbar Width"
type="string"
/>
<Option
opt={options.theme.bar.menus.menu.notifications.scrollbar.radius}
title="Scrollbar Radius"
type="string"
/>
</box>
</scrollable>
);
};

61
src/components/settings/pages/config/osd/index.tsx Normal file
View File

@@ -0,0 +1,61 @@
import { Option } from 'src/components/settings/shared/Option';
import { Header } from 'src/components/settings/shared/Header';
import options from 'src/options';
import { Gtk } from 'astal/gtk3';
export const OSDSettings = (): JSX.Element => {
return (
<scrollable name={'OSD'} vscroll={Gtk.PolicyType.AUTOMATIC}>
<box className="bar-theme-page paged-container" vertical>
<Header title="On Screen Display" />
<Option opt={options.theme.osd.enable} title="Enabled" type="boolean" />
<Option
opt={options.theme.osd.duration}
title="Duration"
type="number"
min={100}
max={10000}
increment={500}
/>
<Option
opt={options.theme.osd.orientation}
title="Orientation"
type="enum"
enums={['horizontal', 'vertical']}
/>
<Option
opt={options.theme.osd.location}
title="Position"
subtitle="Position of OSD"
type="enum"
enums={['top left', 'top', 'top right', 'right', 'bottom right', 'bottom', 'bottom left', 'left']}
/>
<Option
opt={options.theme.osd.monitor}
title="Monitor"
subtitle="Monitor ID for OSD display"
type="number"
/>
<Option
opt={options.theme.osd.active_monitor}
title="Follow Cursor"
subtitle="OSD follows monitor of cursor"
type="boolean"
/>
<Option opt={options.theme.osd.radius} title="Radius" subtitle="Radius of the OSD" type="string" />
<Option
opt={options.theme.osd.margins}
title="Margins"
subtitle="Format: top right bottom left"
type="string"
/>
<Option
opt={options.theme.osd.muted_zero}
title="Mute Volume as Zero"
subtitle="Display volume as 0 when muting"
type="boolean"
/>
</box>
</scrollable>
);
};

151
src/components/settings/pages/theme/bar/index.tsx Normal file
View File

@@ -0,0 +1,151 @@
import { Option } from 'src/components/settings/shared/Option';
import { Header } from 'src/components/settings/shared/Header';
import options from 'src/options';
import { Gtk } from 'astal/gtk3';
export const BarTheme = (): JSX.Element => {
return (
<scrollable
name={'Bar'}
className="bar-theme-page paged-container"
vscroll={Gtk.PolicyType.ALWAYS}
hscroll={Gtk.PolicyType.AUTOMATIC}
vexpand={false}
>
<box vertical>
{/* General Section */}
<Header title="General" />
<Option opt={options.theme.bar.transparent} title="Transparent" type="boolean" />
<Option opt={options.theme.bar.background} title="Background Color" type="color" />
<Option
opt={options.theme.bar.buttons.style}
title="Button Style"
type="enum"
enums={['default', 'split', 'wave', 'wave2']}
/>
<Option
opt={options.theme.bar.opacity}
title="Background Opacity"
type="number"
increment={5}
min={0}
max={100}
/>
<Option opt={options.theme.bar.border.color} title="Bar Border Color" type="color" />
<Option
opt={options.theme.bar.buttons.opacity}
title="Button Opacity"
type="number"
increment={5}
min={0}
max={100}
/>
<Option
opt={options.theme.bar.buttons.background_opacity}
title="Button Background Opacity"
type="number"
increment={5}
min={0}
max={100}
/>
<Option
opt={options.theme.bar.buttons.background_hover_opacity}
title="Button Background Hover Opacity"
type="number"
increment={5}
min={0}
max={100}
/>
<Option
opt={options.theme.bar.buttons.monochrome}
title="Use Global Colors"
type="boolean"
disabledBinding={options.theme.matugen}
/>
<Option opt={options.theme.bar.buttons.background} title="Button Background" type="color" />
<Option opt={options.theme.bar.buttons.borderColor} title="Button Border" type="color" />
<Option opt={options.theme.bar.buttons.text} title="Button Text" type="color" />
<Option opt={options.theme.bar.buttons.icon} title="Button Icon" type="color" />
<Option
opt={options.theme.bar.buttons.icon_background}
title="Button Icon Background"
subtitle="Applies a background color to the icon section of the button.\nRequires 'split' button styling."
type="color"
/>
{/* Dashboard Button Section */}
<Header title="Dashboard Button" />
<Option opt={options.theme.bar.buttons.dashboard.background} title="Background" type="color" />
<Option opt={options.theme.bar.buttons.dashboard.icon} title="Icon" type="color" />
<Option opt={options.theme.bar.buttons.dashboard.border} title="Border" type="color" />
{/* Workspaces Section */}
<Header title="Workspaces" />
<Option opt={options.theme.bar.buttons.workspaces.background} title="Background" type="color" />
<Option opt={options.theme.bar.buttons.workspaces.hover} title="Workspace Hover Color" type="color" />
<Option
opt={options.theme.bar.buttons.workspaces.available}
title="Workspace Available Color"
type="color"
/>
<Option
opt={options.theme.bar.buttons.workspaces.occupied}
title="Workspace Occupied Color"
type="color"
/>
<Option opt={options.theme.bar.buttons.workspaces.active} title="Workspace Active Color" type="color" />
<Option
opt={options.theme.bar.buttons.workspaces.numbered_active_highlighted_text_color}
title="Highlighted Workspace Text Color"
type="color"
/>
<Option
opt={options.theme.bar.buttons.workspaces.numbered_active_underline_color}
title="Workspace Underline Color"
type="color"
/>
<Option opt={options.theme.bar.buttons.workspaces.border} title="Border" type="color" />
{/* Window Title Section */}
<Header title="Window Title" />
<Option opt={options.theme.bar.buttons.windowtitle.background} title="Background" type="color" />
<Option opt={options.theme.bar.buttons.windowtitle.text} title="Text" type="color" />
<Option opt={options.theme.bar.buttons.windowtitle.icon} title="Icon" type="color" />
<Option
opt={options.theme.bar.buttons.windowtitle.icon_background}
title="Button Icon Background"
subtitle="Applies a background color to the icon section of the button.\nRequires 'split' button styling."
type="color"
/>
<Option opt={options.theme.bar.buttons.windowtitle.border} title="Border" type="color" />
{/* Media Section */}
<Header title="Media" />
<Option opt={options.theme.bar.buttons.media.background} title="Background" type="color" />
<Option opt={options.theme.bar.buttons.media.text} title="Text" type="color" />
<Option opt={options.theme.bar.buttons.media.icon} title="Icon" type="color" />
<Option
opt={options.theme.bar.buttons.media.icon_background}
title="Button Icon Background"
subtitle="Applies a background color to the icon section of the button.\nRequires 'split' button styling."
type="color"
/>
<Option opt={options.theme.bar.buttons.media.border} title="Border" type="color" />
{/* Volume Section */}
<Header title="Volume" />
<Option opt={options.theme.bar.buttons.volume.background} title="Background" type="color" />
<Option opt={options.theme.bar.buttons.volume.text} title="Text" type="color" />
<Option opt={options.theme.bar.buttons.volume.icon} title="Icon" type="color" />
<Option
opt={options.theme.bar.buttons.volume.icon_background}
title="Button Icon Background"
subtitle="Applies a background color to the icon section of the button.\nRequires 'split' button styling."
type="color"
/>
<Option opt={options.theme.bar.buttons.volume.border} title="Border" type="color" />
</box>
</scrollable>
);
};

85
src/components/settings/pages/theme/index.tsx Normal file
View File

@@ -0,0 +1,85 @@
import options from 'src/options';
import { bind, Variable } from 'astal';
import { Gtk } from 'astal/gtk3';
import { isPrimaryClick } from 'src/lib/utils';
import { StackTransitionMap } from 'src/lib/constants/options';
import { MenuTheme } from './menus';
import { Matugen } from './menus/matugen';
import { BarTheme } from './bar';
import { NotificationsTheme } from './notifications';
import { OsdTheme } from './osd';
import { BatteryMenuTheme } from './menus/battery';
import { BluetoothMenuTheme } from './menus/bluetooth';
import { ClockMenuTheme } from './menus/clock';
import { DashboardMenuTheme } from './menus/dashboard';
import { MediaMenuTheme } from './menus/media';
import { NetworkMenuTheme } from './menus/network';
import { NotificationsMenuTheme } from './menus/notifications';
import { SystrayMenuTheme } from './menus/systray';
import { VolumeMenuTheme } from './menus/volume';
import { PowerMenuTheme } from './menus/power';
import { CustomModuleTheme } from 'src/components/bar/settings/theme';
import { ThemePage, themePages } from '../../helpers';
const { transition, transitionTime } = options.menus;
const CurrentPage = Variable<ThemePage>('General Settings');
export const ThemesMenu = (): JSX.Element => {
return (
<box name={'Theming'} halign={Gtk.Align.FILL} hexpand vertical>
<box className="option-pages-container" halign={Gtk.Align.CENTER} hexpand vertical>
{[0, 1, 2].map((section) => {
return (
<box>
{themePages.map((page, index) => {
if (index >= section * 6 && index < section * 6 + 6) {
return (
<button
className={bind(CurrentPage).as(
(pg) => `pager-button ${pg === page ? 'active' : ''}`,
)}
label={page}
onClick={(_, event) => {
if (isPrimaryClick(event)) {
CurrentPage.set(page as ThemePage);
}
}}
halign={Gtk.Align.CENTER}
/>
);
}
return <box />;
})}
</box>
);
})}
</box>
<stack
className="themes-menu-stack"
transitionType={bind(transition).as((transitionType) => StackTransitionMap[transitionType])}
transitionDuration={bind(transitionTime)}
shown={bind(CurrentPage)}
vexpand={false}
>
<MenuTheme />
<Matugen />
<BarTheme />
<NotificationsTheme />
<OsdTheme />
<BatteryMenuTheme />
<BluetoothMenuTheme />
<ClockMenuTheme />
<DashboardMenuTheme />
<MediaMenuTheme />
<NetworkMenuTheme />
<NotificationsMenuTheme />
<SystrayMenuTheme />
<VolumeMenuTheme />
<PowerMenuTheme />
<CustomModuleTheme />
</stack>
</box>
);
};

60
src/components/settings/pages/theme/menus/battery.tsx Normal file
View File

@@ -0,0 +1,60 @@
import { Option } from 'src/components/settings/shared/Option';
import { Header } from 'src/components/settings/shared/Header';
import options from 'src/options';
import { Gtk } from 'astal/gtk3';
export const BatteryMenuTheme = (): JSX.Element => {
return (
<scrollable
name={'Battery Menu'}
className="menu-theme-page battery paged-container"
vscroll={Gtk.PolicyType.AUTOMATIC}
hscroll={Gtk.PolicyType.AUTOMATIC}
vexpand={true}
>
<box vertical>
{/* Battery Menu Theme Settings Section */}
<Header title="Battery Menu Theme Settings" />
<Option opt={options.theme.bar.menus.menu.battery.text} title="Text" type="color" />
{/* Card Section */}
<Header title="Card" />
<Option opt={options.theme.bar.menus.menu.battery.card.color} title="Card" type="color" />
{/* Background Section */}
<Header title="Background" />
<Option opt={options.theme.bar.menus.menu.battery.background.color} title="Background" type="color" />
{/* Border Section */}
<Header title="Border" />
<Option opt={options.theme.bar.menus.menu.battery.border.color} title="Border" type="color" />
{/* Label Section */}
<Header title="Label" />
<Option opt={options.theme.bar.menus.menu.battery.label.color} title="Label" type="color" />
{/* List Items Section */}
<Header title="List Items" />
<Option opt={options.theme.bar.menus.menu.battery.listitems.active} title="Active/Hover" type="color" />
<Option opt={options.theme.bar.menus.menu.battery.listitems.passive} title="Passive" type="color" />
{/* Icons Section */}
<Header title="Icons" />
<Option opt={options.theme.bar.menus.menu.battery.icons.active} title="Active" type="color" />
<Option opt={options.theme.bar.menus.menu.battery.icons.passive} title="Passive" type="color" />
{/* Slider Section */}
<Header title="Slider" />
<Option opt={options.theme.bar.menus.menu.battery.slider.primary} title="Primary" type="color" />
<Option opt={options.theme.bar.menus.menu.battery.slider.background} title="Background" type="color" />
<Option
opt={options.theme.bar.menus.menu.battery.slider.backgroundhover}
title="Background (Hover)"
type="color"
/>
<Option opt={options.theme.bar.menus.menu.battery.slider.puck} title="Puck" type="color" />
</box>
</scrollable>
);
};

76
src/components/settings/pages/theme/menus/bluetooth.tsx Normal file
View File

@@ -0,0 +1,76 @@
import { Option } from 'src/components/settings/shared/Option';
import { Header } from 'src/components/settings/shared/Header';
import options from 'src/options';
import { Gtk } from 'astal/gtk3';
export const BluetoothMenuTheme = (): JSX.Element => {
return (
<scrollable
name={'Bluetooth Menu'}
className="menu-theme-page bluetooth paged-container"
vscroll={Gtk.PolicyType.AUTOMATIC}
hscroll={Gtk.PolicyType.AUTOMATIC}
vexpand={true}
>
<box vertical>
{/* Bluetooth Menu Theme Settings Section */}
<Header title="Bluetooth Menu Theme Settings" />
<Option opt={options.theme.bar.menus.menu.bluetooth.text} title="Text" type="color" />
{/* Card Section */}
<Header title="Card" />
<Option opt={options.theme.bar.menus.menu.bluetooth.card.color} title="Card" type="color" />
{/* Background Section */}
<Header title="Background" />
<Option opt={options.theme.bar.menus.menu.bluetooth.background.color} title="Background" type="color" />
{/* Border Section */}
<Header title="Border" />
<Option opt={options.theme.bar.menus.menu.bluetooth.border.color} title="Border" type="color" />
{/* Label Section */}
<Header title="Label" />
<Option opt={options.theme.bar.menus.menu.bluetooth.label.color} title="Label" type="color" />
{/* Status Section */}
<Header title="Status" />
<Option opt={options.theme.bar.menus.menu.bluetooth.status} title="Connection Status" type="color" />
{/* List Items Section */}
<Header title="List Items" />
<Option
opt={options.theme.bar.menus.menu.bluetooth.listitems.active}
title="Active/Hover"
type="color"
/>
<Option opt={options.theme.bar.menus.menu.bluetooth.listitems.passive} title="Passive" type="color" />
{/* Icons Section */}
<Header title="Icons" />
<Option opt={options.theme.bar.menus.menu.bluetooth.icons.active} title="Active" type="color" />
<Option opt={options.theme.bar.menus.menu.bluetooth.icons.passive} title="Passive" type="color" />
{/* Icon Buttons Section */}
<Header title="Icon Buttons" />
<Option opt={options.theme.bar.menus.menu.bluetooth.iconbutton.active} title="Active" type="color" />
<Option opt={options.theme.bar.menus.menu.bluetooth.iconbutton.passive} title="Passive" type="color" />
{/* Switch Section */}
<Header title="Switch" />
<Option opt={options.theme.bar.menus.menu.bluetooth.switch.enabled} title="Enabled" type="color" />
<Option opt={options.theme.bar.menus.menu.bluetooth.switch.disabled} title="Disabled" type="color" />
<Option opt={options.theme.bar.menus.menu.bluetooth.switch.puck} title="Puck" type="color" />
{/* Switch Divider Section */}
<Header title="Switch Divider" />
<Option
opt={options.theme.bar.menus.menu.bluetooth.switch_divider}
title="Switch Divider"
type="color"
/>
</box>
</scrollable>
);
};

117
src/components/settings/pages/theme/menus/clock.tsx Normal file
View File

@@ -0,0 +1,117 @@
import { Option } from 'src/components/settings/shared/Option';
import { Header } from 'src/components/settings/shared/Header';
import options from 'src/options';
import { Gtk } from 'astal/gtk3';
export const ClockMenuTheme = (): JSX.Element => {
return (
<scrollable
name={'Clock Menu'}
className="menu-theme-page clock paged-container"
vscroll={Gtk.PolicyType.AUTOMATIC}
hscroll={Gtk.PolicyType.AUTOMATIC}
vexpand={true}
>
<box vertical>
{/* Clock Menu Theme Settings Section */}
<Header title="Clock Menu Theme Settings" />
<Option opt={options.theme.bar.menus.menu.clock.text} title="Text" type="color" />
{/* Card Section */}
<Header title="Card" />
<Option opt={options.theme.bar.menus.menu.clock.card.color} title="Card" type="color" />
{/* Background Section */}
<Header title="Background" />
<Option opt={options.theme.bar.menus.menu.clock.background.color} title="Background" type="color" />
{/* Border Section */}
<Header title="Border" />
<Option opt={options.theme.bar.menus.menu.clock.border.color} title="Border" type="color" />
{/* Time Section */}
<Header title="Time" />
<Option opt={options.theme.bar.menus.menu.clock.time.time} title="Time" type="color" />
<Option
opt={options.theme.bar.menus.menu.clock.time.timeperiod}
title="Period"
subtitle="AM/PM"
type="color"
/>
{/* Calendar Section */}
<Header title="Calendar" />
<Option opt={options.theme.bar.menus.menu.clock.calendar.yearmonth} title="Year/Month" type="color" />
<Option opt={options.theme.bar.menus.menu.clock.calendar.weekdays} title="Weekdays" type="color" />
<Option
opt={options.theme.bar.menus.menu.clock.calendar.paginator}
title="Navigation Arrows (Hover)"
type="color"
/>
<Option opt={options.theme.bar.menus.menu.clock.calendar.currentday} title="Current Day" type="color" />
<Option opt={options.theme.bar.menus.menu.clock.calendar.days} title="Days" type="color" />
<Option
opt={options.theme.bar.menus.menu.clock.calendar.contextdays}
title="Trailing/Leading Days"
type="color"
/>
{/* Weather Section */}
<Header title="Weather" />
<Option
opt={options.theme.bar.menus.menu.clock.weather.icon}
title="Current Weather Icon"
type="color"
/>
<Option
opt={options.theme.bar.menus.menu.clock.weather.temperature}
title="Current Temperature"
type="color"
/>
<Option opt={options.theme.bar.menus.menu.clock.weather.status} title="Current Status" type="color" />
<Option opt={options.theme.bar.menus.menu.clock.weather.stats} title="Current Stats" type="color" />
<Option
opt={options.theme.bar.menus.menu.clock.weather.thermometer.extremelyhot}
title="Thermometer - Extremely Hot"
type="color"
/>
<Option
opt={options.theme.bar.menus.menu.clock.weather.thermometer.hot}
title="Thermometer - Hot"
type="color"
/>
<Option
opt={options.theme.bar.menus.menu.clock.weather.thermometer.moderate}
title="Thermometer - Moderate"
type="color"
/>
<Option
opt={options.theme.bar.menus.menu.clock.weather.thermometer.cold}
title="Thermometer - Cold"
type="color"
/>
<Option
opt={options.theme.bar.menus.menu.clock.weather.thermometer.extremelycold}
title="Thermometer - Extremely Cold"
type="color"
/>
<Option
opt={options.theme.bar.menus.menu.clock.weather.hourly.time}
title="Hourly Weather Time"
type="color"
/>
<Option
opt={options.theme.bar.menus.menu.clock.weather.hourly.icon}
title="Hourly Weather Icon"
type="color"
/>
<Option
opt={options.theme.bar.menus.menu.clock.weather.hourly.temperature}
title="Hourly Weather Temperature"
type="color"
/>
</box>
</scrollable>
);
};

229
src/components/settings/pages/theme/menus/dashboard.tsx Normal file
View File

@@ -0,0 +1,229 @@
import { Option } from 'src/components/settings/shared/Option';
import { Header } from 'src/components/settings/shared/Header';
import options from 'src/options';
import { Gtk } from 'astal/gtk3';
export const DashboardMenuTheme = (): JSX.Element => {
return (
<scrollable
name={'Dashboard Menu'}
className="menu-theme-page dashboard paged-container"
vscroll={Gtk.PolicyType.ALWAYS}
hscroll={Gtk.PolicyType.AUTOMATIC}
vexpand={true}
>
<box vertical>
{/* Card Section */}
<Header title="Card" />
<Option opt={options.theme.bar.menus.menu.dashboard.card.color} title="Card" type="color" />
{/* Background Section */}
<Header title="Background" />
<Option opt={options.theme.bar.menus.menu.dashboard.background.color} title="Background" type="color" />
{/* Border Section */}
<Header title="Border" />
<Option opt={options.theme.bar.menus.menu.dashboard.border.color} title="Border" type="color" />
{/* Profile Section */}
<Header title="Profile" />
<Option opt={options.theme.bar.menus.menu.dashboard.profile.name} title="Profile Name" type="color" />
{/* Power Menu Section */}
<Header title="Power Menu" />
<Option opt={options.theme.bar.menus.menu.dashboard.powermenu.shutdown} title="Shutdown" type="color" />
<Option opt={options.theme.bar.menus.menu.dashboard.powermenu.restart} title="Restart" type="color" />
<Option opt={options.theme.bar.menus.menu.dashboard.powermenu.logout} title="Log Out" type="color" />
<Option opt={options.theme.bar.menus.menu.dashboard.powermenu.sleep} title="Sleep" type="color" />
<Option
opt={options.theme.bar.menus.menu.dashboard.powermenu.confirmation.card}
title="Confirmation Dialog Card"
type="color"
/>
<Option
opt={options.theme.bar.menus.menu.dashboard.powermenu.confirmation.background}
title="Confirmation Dialog Background"
type="color"
/>
<Option
opt={options.theme.bar.menus.menu.dashboard.powermenu.confirmation.border}
title="Confirmation Dialog Border"
type="color"
/>
<Option
opt={options.theme.bar.menus.menu.dashboard.powermenu.confirmation.label}
title="Confirmation Dialog Label"
type="color"
/>
<Option
opt={options.theme.bar.menus.menu.dashboard.powermenu.confirmation.body}
title="Confirmation Dialog Description"
type="color"
/>
<Option
opt={options.theme.bar.menus.menu.dashboard.powermenu.confirmation.confirm}
title="Confirmation Dialog Confirm Button"
type="color"
/>
<Option
opt={options.theme.bar.menus.menu.dashboard.powermenu.confirmation.deny}
title="Confirmation Dialog Cancel Button"
type="color"
/>
<Option
opt={options.theme.bar.menus.menu.dashboard.powermenu.confirmation.button_text}
title="Confirmation Dialog Button Text"
type="color"
/>
{/* Shortcuts Section */}
<Header title="Shortcuts" />
<Option
opt={options.theme.bar.menus.menu.dashboard.shortcuts.background}
title="Primary"
type="color"
/>
<Option opt={options.theme.bar.menus.menu.dashboard.shortcuts.text} title="Text" type="color" />
<Option
opt={options.theme.bar.menus.menu.dashboard.shortcuts.recording}
title="Recording"
subtitle="Color of the Record button when recording is in progress"
type="color"
/>
{/* Controls Section */}
<Header title="Controls" />
<Option
opt={options.theme.bar.menus.menu.dashboard.controls.disabled}
title="Module Off"
subtitle="Button color when element is disabled"
type="color"
/>
<Option
opt={options.theme.bar.menus.menu.dashboard.controls.wifi.background}
title="Wifi Button"
type="color"
/>
<Option
opt={options.theme.bar.menus.menu.dashboard.controls.wifi.text}
title="Wifi Button Text"
type="color"
/>
<Option
opt={options.theme.bar.menus.menu.dashboard.controls.bluetooth.background}
title="Bluetooth Button"
type="color"
/>
<Option
opt={options.theme.bar.menus.menu.dashboard.controls.bluetooth.text}
title="Bluetooth Button Text"
type="color"
/>
<Option
opt={options.theme.bar.menus.menu.dashboard.controls.notifications.background}
title="Notifications Button"
type="color"
/>
<Option
opt={options.theme.bar.menus.menu.dashboard.controls.notifications.text}
title="Notifications Button Text"
type="color"
/>
<Option
opt={options.theme.bar.menus.menu.dashboard.controls.volume.background}
title="Volume Button"
type="color"
/>
<Option
opt={options.theme.bar.menus.menu.dashboard.controls.volume.text}
title="Volume Button Text"
type="color"
/>
<Option
opt={options.theme.bar.menus.menu.dashboard.controls.input.background}
title="Input Button"
type="color"
/>
<Option
opt={options.theme.bar.menus.menu.dashboard.controls.input.text}
title="Input Button Text"
type="color"
/>
{/* Directories Section */}
<Header title="Directories" />
<Option
opt={options.theme.bar.menus.menu.dashboard.directories.left.top.color}
title="Directory: Left - Top"
type="color"
/>
<Option
opt={options.theme.bar.menus.menu.dashboard.directories.left.middle.color}
title="Directory: Left - Middle"
type="color"
/>
<Option
opt={options.theme.bar.menus.menu.dashboard.directories.left.bottom.color}
title="Directory: Left - Bottom"
type="color"
/>
<Option
opt={options.theme.bar.menus.menu.dashboard.directories.right.top.color}
title="Directory: Right - Top"
type="color"
/>
<Option
opt={options.theme.bar.menus.menu.dashboard.directories.right.middle.color}
title="Directory: Right - Middle"
type="color"
/>
<Option
opt={options.theme.bar.menus.menu.dashboard.directories.right.bottom.color}
title="Directory: Right - Bottom"
type="color"
/>
{/* System Stats Section */}
<Header title="System Stats" />
<Option
opt={options.theme.bar.menus.menu.dashboard.monitors.bar_background}
title="Bar Background"
type="color"
/>
<Option opt={options.theme.bar.menus.menu.dashboard.monitors.cpu.icon} title="CPU Icon" type="color" />
<Option opt={options.theme.bar.menus.menu.dashboard.monitors.cpu.bar} title="CPU Bar" type="color" />
<Option
opt={options.theme.bar.menus.menu.dashboard.monitors.cpu.label}
title="CPU Label"
type="color"
/>
<Option opt={options.theme.bar.menus.menu.dashboard.monitors.ram.icon} title="RAM Icon" type="color" />
<Option opt={options.theme.bar.menus.menu.dashboard.monitors.ram.bar} title="RAM Bar" type="color" />
<Option
opt={options.theme.bar.menus.menu.dashboard.monitors.ram.label}
title="RAM Label"
type="color"
/>
<Option opt={options.theme.bar.menus.menu.dashboard.monitors.gpu.icon} title="GPU Icon" type="color" />
<Option opt={options.theme.bar.menus.menu.dashboard.monitors.gpu.bar} title="GPU Bar" type="color" />
<Option
opt={options.theme.bar.menus.menu.dashboard.monitors.gpu.label}
title="GPU Label"
type="color"
/>
<Option
opt={options.theme.bar.menus.menu.dashboard.monitors.disk.icon}
title="Disk Icon"
type="color"
/>
<Option opt={options.theme.bar.menus.menu.dashboard.monitors.disk.bar} title="Disk Bar" type="color" />
<Option
opt={options.theme.bar.menus.menu.dashboard.monitors.disk.label}
title="Disk Label"
type="color"
/>
</box>
</scrollable>
);
};

156
src/components/settings/pages/theme/menus/index.tsx Normal file
View File

@@ -0,0 +1,156 @@
import { Option } from 'src/components/settings/shared/Option';
import { Header } from 'src/components/settings/shared/Header';
import options from 'src/options';
import { Gtk } from 'astal/gtk3';
import { bind } from 'astal';
export const MenuTheme = (): JSX.Element => {
return (
<scrollable
name={'General Settings'}
className="menu-theme-page paged-container"
vscroll={Gtk.PolicyType.AUTOMATIC}
hscroll={Gtk.PolicyType.AUTOMATIC}
vexpand
>
<box vertical>
{/* General Section */}
<Header title="General" />
<Option
opt={options.dummy}
title="Theme"
subtitle="WARNING: Importing a theme will replace your current theme color settings."
type="config_import"
exportData={{ filePath: CONFIG, themeOnly: true }}
/>
<Option
opt={options.theme.bar.menus.monochrome}
title="Use Global Colors"
type="boolean"
disabledBinding={options.theme.matugen}
/>
<Option
opt={options.wallpaper.pywal}
title="Generate Pywal Colors"
subtitle="Whether to also generate pywal colors with chosen wallpaper"
type="boolean"
/>
<Option
opt={options.wallpaper.enable}
title="Apply Wallpapers"
subtitle="Whether to apply the wallpaper or to only use it for Matugen color generation."
type="boolean"
/>
<Option
opt={options.wallpaper.image}
title="Wallpaper"
subtitle={bind(options.wallpaper.image).as((wallpaper) => wallpaper || 'No Wallpaper Selected')}
type="wallpaper"
/>
<Option opt={options.theme.bar.menus.background} title="Background Color" type="color" />
<Option
opt={options.theme.bar.menus.opacity}
title="Menu Opacity"
type="number"
increment={5}
min={0}
max={100}
/>
<Option opt={options.theme.bar.menus.cards} title="Cards" type="color" />
<Option opt={options.theme.bar.menus.card_radius} title="Card Radius" type="string" />
<Option opt={options.theme.bar.menus.text} title="Primary Text" type="color" />
<Option opt={options.theme.bar.menus.dimtext} title="Dim Text" type="color" />
<Option opt={options.theme.bar.menus.feinttext} title="Feint Text" type="color" />
<Option opt={options.theme.bar.menus.label} title="Label Color" type="color" />
{/* Border Section */}
<Header title="Border" />
<Option opt={options.theme.bar.menus.border.size} title="Border Width" type="string" />
<Option opt={options.theme.bar.menus.border.radius} title="Border Radius" type="string" />
<Option opt={options.theme.bar.menus.border.color} title="Border Color" type="color" />
{/* Popover Section */}
<Header title="Popover" />
<Option opt={options.theme.bar.menus.popover.radius} title="Popover Radius" type="string" />
<Option opt={options.theme.bar.menus.popover.text} title="Text" type="color" />
<Option opt={options.theme.bar.menus.popover.background} title="Background" type="color" />
{/* List Items Section */}
<Header title="List Items" />
<Option
opt={options.theme.bar.menus.listitems.active}
title="Active"
subtitle={
'Items of a list (network name, bluetooth device name, ' +
'playback device, etc.) when active or hovered.'
}
type="color"
/>
<Option opt={options.theme.bar.menus.listitems.passive} title="Passive" type="color" />
{/* Icons Section */}
<Header title="Icons" />
<Option opt={options.theme.bar.menus.icons.active} title="Active" type="color" />
<Option opt={options.theme.bar.menus.icons.passive} title="Passive" type="color" />
{/* Switch Section */}
<Header title="Switch" />
<Option opt={options.theme.bar.menus.switch.enabled} title="Enabled" type="color" />
<Option opt={options.theme.bar.menus.switch.disabled} title="Disabled" type="color" />
<Option opt={options.theme.bar.menus.switch.radius} title="Switch Radius" type="string" />
<Option opt={options.theme.bar.menus.switch.slider_radius} title="Switch Puck Radius" type="string" />
<Option opt={options.theme.bar.menus.switch.puck} title="Puck" type="color" />
{/* Check/Radio Buttons Section */}
<Header title="Check/Radio Buttons" />
<Option opt={options.theme.bar.menus.check_radio_button.background} title="Background" type="color" />
<Option opt={options.theme.bar.menus.check_radio_button.active} title="Active" type="color" />
{/* Buttons Section */}
<Header title="Buttons" />
<Option opt={options.theme.bar.menus.buttons.radius} title="Button Radius" type="string" />
<Option opt={options.theme.bar.menus.buttons.default} title="Primary" type="color" />
<Option opt={options.theme.bar.menus.buttons.active} title="Active" type="color" />
<Option opt={options.theme.bar.menus.buttons.disabled} title="Disabled" type="color" />
<Option opt={options.theme.bar.menus.buttons.text} title="Text" type="color" />
{/* Icon Buttons Section */}
<Header title="Icon Buttons" />
<Option opt={options.theme.bar.menus.iconbuttons.passive} title="Primary" type="color" />
<Option opt={options.theme.bar.menus.iconbuttons.active} title="Active/Hovered" type="color" />
{/* Progress Bar Section */}
<Header title="Progress Bar" />
<Option opt={options.theme.bar.menus.progressbar.radius} title="Progress Bar Radius" type="string" />
<Option opt={options.theme.bar.menus.progressbar.foreground} title="Primary" type="color" />
<Option opt={options.theme.bar.menus.progressbar.background} title="Background" type="color" />
{/* Slider Section */}
<Header title="Slider" />
<Option opt={options.theme.bar.menus.slider.primary} title="Primary" type="color" />
<Option opt={options.theme.bar.menus.slider.background} title="Background" type="color" />
<Option opt={options.theme.bar.menus.slider.backgroundhover} title="Background (Hover)" type="color" />
<Option opt={options.theme.bar.menus.slider.slider_radius} title="Slider Puck Radius" type="string" />
<Option
opt={options.theme.bar.menus.slider.progress_radius}
title="Slider/Progress Bar Radius"
type="string"
/>
<Option opt={options.theme.bar.menus.slider.puck} title="Puck" type="color" />
{/* Dropdown Menu Section */}
<Header title="Dropdown Menu" />
<Option opt={options.theme.bar.menus.dropdownmenu.background} title="Background" type="color" />
<Option opt={options.theme.bar.menus.dropdownmenu.text} title="Text" type="color" />
<Option opt={options.theme.bar.menus.dropdownmenu.divider} title="Divider" type="color" />
{/* Tooltips Section */}
<Header title="Tooltips" />
<Option opt={options.theme.bar.menus.tooltip.radius} title="Tooltip Radius" type="string" />
<Option opt={options.theme.bar.menus.tooltip.background} title="Background" type="color" />
<Option opt={options.theme.bar.menus.tooltip.text} title="Text" type="color" />
</box>
</scrollable>
);
};

71
src/components/settings/pages/theme/menus/matugen.tsx Normal file
View File

@@ -0,0 +1,71 @@
import { Option } from 'src/components/settings/shared/Option';
import { Header } from 'src/components/settings/shared/Header';
import options from 'src/options';
import { Gtk } from 'astal/gtk3';
export const Matugen = (): JSX.Element => {
return (
<scrollable
name={'Matugen Settings'}
className="menu-theme-page paged-container"
vscroll={Gtk.PolicyType.AUTOMATIC}
hscroll={Gtk.PolicyType.AUTOMATIC}
vexpand={true}
>
<box vertical>
{/* Matugen Settings Section */}
<Header title="Matugen Settings" />
<Option
opt={options.theme.matugen}
title="Enable Matugen"
type="boolean"
dependencies={['matugen', 'swww']}
/>
<Option
opt={options.theme.matugen_settings.mode}
title="Matugen Theme"
type="enum"
enums={['light', 'dark']}
/>
<Option
opt={options.theme.matugen_settings.scheme_type}
title="Matugen Scheme"
type="enum"
enums={[
'content',
'expressive',
'fidelity',
'fruit-salad',
'monochrome',
'neutral',
'rainbow',
'tonal-spot',
]}
/>
<Option
opt={options.theme.matugen_settings.variation}
title="Matugen Variation"
type="enum"
enums={[
'standard_1',
'standard_2',
'standard_3',
'monochrome_1',
'monochrome_2',
'monochrome_3',
'vivid_1',
'vivid_2',
'vivid_3',
]}
/>
<Option
opt={options.theme.matugen_settings.contrast}
title="Contrast"
subtitle="Range: -1 to 1 (Default: 0)"
type="float"
/>
</box>
</scrollable>
);
};

74
src/components/settings/pages/theme/menus/media.tsx Normal file
View File

@@ -0,0 +1,74 @@
import { Option } from 'src/components/settings/shared/Option';
import { Header } from 'src/components/settings/shared/Header';
import options from 'src/options';
import { Gtk } from 'astal/gtk3';
export const MediaMenuTheme = (): JSX.Element => {
return (
<scrollable
name={'Media Menu'}
className="menu-theme-page media paged-container"
vscroll={Gtk.PolicyType.AUTOMATIC}
hscroll={Gtk.PolicyType.AUTOMATIC}
vexpand={true}
>
<box vertical>
{/* Media Menu Theme Settings Section */}
<Header title="Media Menu Theme Settings" />
<Option opt={options.theme.bar.menus.menu.media.song} title="Song" type="color" />
<Option opt={options.theme.bar.menus.menu.media.artist} title="Artist" type="color" />
<Option opt={options.theme.bar.menus.menu.media.album} title="Album" type="color" />
<Option opt={options.theme.bar.menus.menu.media.timestamp} title="Time Stamp" type="color" />
{/* Background Section */}
<Header title="Background" />
<Option opt={options.theme.bar.menus.menu.media.background.color} title="Background" type="color" />
{/* Border Section */}
<Header title="Border" />
<Option opt={options.theme.bar.menus.menu.media.border.color} title="Border" type="color" />
{/* Card/Album Art Section */}
<Header title="Card/Album Art" />
<Option opt={options.theme.bar.menus.menu.media.card.color} title="Color" type="color" />
<Option
opt={options.theme.bar.menus.menu.media.card.tint}
title="Tint"
type="number"
increment={5}
min={0}
max={100}
/>
{/* Buttons Section */}
<Header title="Buttons" />
<Option
opt={options.theme.bar.menus.menu.media.buttons.inactive}
title="Unavailable"
subtitle="Disabled button when media control isn't available."
type="color"
/>
<Option
opt={options.theme.bar.menus.menu.media.buttons.enabled}
title="Enabled"
subtitle="Ex: Button color when shuffle/loop is enabled."
type="color"
/>
<Option opt={options.theme.bar.menus.menu.media.buttons.background} title="Background" type="color" />
<Option opt={options.theme.bar.menus.menu.media.buttons.text} title="Text" type="color" />
{/* Slider Section */}
<Header title="Slider" />
<Option opt={options.theme.bar.menus.menu.media.slider.primary} title="Primary Color" type="color" />
<Option opt={options.theme.bar.menus.menu.media.slider.background} title="Background" type="color" />
<Option
opt={options.theme.bar.menus.menu.media.slider.backgroundhover}
title="Background (Hover)"
type="color"
/>
<Option opt={options.theme.bar.menus.menu.media.slider.puck} title="Puck" type="color" />
</box>
</scrollable>
);
};

68
src/components/settings/pages/theme/menus/network.tsx Normal file
View File

@@ -0,0 +1,68 @@
import { Option } from 'src/components/settings/shared/Option';
import { Header } from 'src/components/settings/shared/Header';
import options from 'src/options';
import { Gtk } from 'astal/gtk3';
export const NetworkMenuTheme = (): JSX.Element => {
return (
<scrollable
name={'Network Menu'}
className="menu-theme-page network paged-container"
vscroll={Gtk.PolicyType.AUTOMATIC}
hscroll={Gtk.PolicyType.AUTOMATIC}
vexpand={true}
>
<box vertical>
{/* Network Menu Theme Settings Section */}
<Header title="Network Menu Theme Settings" />
<Option opt={options.theme.bar.menus.menu.network.text} title="Text" type="color" />
{/* Card Section */}
<Header title="Card" />
<Option opt={options.theme.bar.menus.menu.network.card.color} title="Card" type="color" />
{/* Background Section */}
<Header title="Background" />
<Option opt={options.theme.bar.menus.menu.network.background.color} title="Background" type="color" />
{/* Border Section */}
<Header title="Border" />
<Option opt={options.theme.bar.menus.menu.network.border.color} title="Border" type="color" />
{/* Label Section */}
<Header title="Label" />
<Option opt={options.theme.bar.menus.menu.network.label.color} title="Label" type="color" />
{/* Status Section */}
<Header title="Status" />
<Option
opt={options.theme.bar.menus.menu.network.status.color}
title="Connection Status"
type="color"
/>
{/* Switch Section */}
<Header title="Switch" />
<Option opt={options.theme.bar.menus.menu.network.switch.enabled} title="Enabled" type="color" />
<Option opt={options.theme.bar.menus.menu.network.switch.disabled} title="Disabled" type="color" />
<Option opt={options.theme.bar.menus.menu.network.switch.puck} title="Puck" type="color" />
{/* List Items Section */}
<Header title="List Items" />
<Option opt={options.theme.bar.menus.menu.network.listitems.active} title="Active/Hover" type="color" />
<Option opt={options.theme.bar.menus.menu.network.listitems.passive} title="Passive" type="color" />
{/* Icons Section */}
<Header title="Icons" />
<Option opt={options.theme.bar.menus.menu.network.icons.active} title="Active" type="color" />
<Option opt={options.theme.bar.menus.menu.network.icons.passive} title="Passive" type="color" />
{/* Icon Buttons Section */}
<Header title="Icon Buttons" />
<Option opt={options.theme.bar.menus.menu.network.iconbuttons.active} title="Active" type="color" />
<Option opt={options.theme.bar.menus.menu.network.iconbuttons.passive} title="Passive" type="color" />
</box>
</scrollable>
);
};

77
src/components/settings/pages/theme/menus/notifications.tsx Normal file
View File

@@ -0,0 +1,77 @@
import { Option } from 'src/components/settings/shared/Option';
import { Header } from 'src/components/settings/shared/Header';
import options from 'src/options';
import { Gtk } from 'astal/gtk3';
export const NotificationsMenuTheme = (): JSX.Element => {
return (
<scrollable
name={'Notifications Menu'}
className="menu-theme-page notifications paged-container"
vscroll={Gtk.PolicyType.AUTOMATIC}
hscroll={Gtk.PolicyType.AUTOMATIC}
vexpand={true}
>
<box vertical>
{/* Notifications Menu Theme Settings Section */}
<Header title="Notifications Menu Theme Settings" />
<Option opt={options.theme.bar.menus.menu.notifications.label} title="Menu Label" type="color" />
<Option opt={options.theme.bar.menus.menu.notifications.card} title="Card" type="color" />
<Option opt={options.theme.bar.menus.menu.notifications.background} title="Background" type="color" />
<Option
opt={options.theme.bar.menus.menu.notifications.no_notifications_label}
title="Empty Notifications Backdrop"
type="color"
/>
<Option opt={options.theme.bar.menus.menu.notifications.border} title="Border" type="color" />
<Option
opt={options.theme.bar.menus.menu.notifications.switch_divider}
title="Switch Divider"
type="color"
/>
<Option
opt={options.theme.bar.menus.menu.notifications.clear}
title="Clear Notifications Button"
type="color"
/>
{/* Switch Section */}
<Header title="Switch" />
<Option opt={options.theme.bar.menus.menu.notifications.switch.enabled} title="Enabled" type="color" />
<Option
opt={options.theme.bar.menus.menu.notifications.switch.disabled}
title="Disabled"
type="color"
/>
<Option opt={options.theme.bar.menus.menu.notifications.switch.puck} title="Puck" type="color" />
{/* Scrollbar Section */}
<Header title="Scrollbar" />
<Option
opt={options.theme.bar.menus.menu.notifications.scrollbar.color}
title="Scrollbar Color"
type="color"
/>
{/* Pagination Section */}
<Header title="Pagination" />
<Option
opt={options.theme.bar.menus.menu.notifications.pager.background}
title="Pager Footer Background"
type="color"
/>
<Option
opt={options.theme.bar.menus.menu.notifications.pager.button}
title="Pager Button Color"
type="color"
/>
<Option
opt={options.theme.bar.menus.menu.notifications.pager.label}
title="Pager Label Color"
type="color"
/>
</box>
</scrollable>
);
};

91
src/components/settings/pages/theme/menus/power.tsx Normal file
View File

@@ -0,0 +1,91 @@
import { Option } from 'src/components/settings/shared/Option';
import { Header } from 'src/components/settings/shared/Header';
import options from 'src/options';
import { Gtk } from 'astal/gtk3';
export const PowerMenuTheme = (): JSX.Element => {
return (
<scrollable
name={'Power Menu'}
className="menu-theme-page power paged-container"
vscroll={Gtk.PolicyType.AUTOMATIC}
hscroll={Gtk.PolicyType.AUTOMATIC}
vexpand={true}
>
<box vertical>
{/* Background Section */}
<Header title="Background" />
<Option opt={options.theme.bar.menus.menu.power.background.color} title="Background" type="color" />
{/* Border Section */}
<Header title="Border" />
<Option opt={options.theme.bar.menus.menu.power.border.color} title="Border" type="color" />
{/* Shutdown Button Section */}
<Header title="Shutdown Button" />
<Option
opt={options.theme.bar.menus.menu.power.buttons.shutdown.background}
title="Label Background"
type="color"
/>
<Option
opt={options.theme.bar.menus.menu.power.buttons.shutdown.icon_background}
title="Icon Background"
type="color"
/>
<Option
opt={options.theme.bar.menus.menu.power.buttons.shutdown.text}
title="Label Text"
type="color"
/>
<Option opt={options.theme.bar.menus.menu.power.buttons.shutdown.icon} title="Icon" type="color" />
{/* Reboot Button Section */}
<Header title="Reboot Button" />
<Option
opt={options.theme.bar.menus.menu.power.buttons.restart.background}
title="Label Background"
type="color"
/>
<Option
opt={options.theme.bar.menus.menu.power.buttons.restart.icon_background}
title="Icon Background"
type="color"
/>
<Option opt={options.theme.bar.menus.menu.power.buttons.restart.text} title="Label Text" type="color" />
<Option opt={options.theme.bar.menus.menu.power.buttons.restart.icon} title="Icon" type="color" />
{/* Logout Button Section */}
<Header title="Logout Button" />
<Option
opt={options.theme.bar.menus.menu.power.buttons.logout.background}
title="Label Background"
type="color"
/>
<Option
opt={options.theme.bar.menus.menu.power.buttons.logout.icon_background}
title="Icon Background"
type="color"
/>
<Option opt={options.theme.bar.menus.menu.power.buttons.logout.text} title="Label Text" type="color" />
<Option opt={options.theme.bar.menus.menu.power.buttons.logout.icon} title="Icon" type="color" />
{/* Sleep Button Section */}
<Header title="Sleep Button" />
<Option
opt={options.theme.bar.menus.menu.power.buttons.sleep.background}
title="Label Background"
type="color"
/>
<Option
opt={options.theme.bar.menus.menu.power.buttons.sleep.icon_background}
title="Icon Background"
type="color"
/>
<Option opt={options.theme.bar.menus.menu.power.buttons.sleep.text} title="Label Text" type="color" />
<Option opt={options.theme.bar.menus.menu.power.buttons.sleep.icon} title="Icon" type="color" />
</box>
</scrollable>
);
};

33
src/components/settings/pages/theme/menus/systray.tsx Normal file
View File

@@ -0,0 +1,33 @@
import { Option } from 'src/components/settings/shared/Option';
import { Header } from 'src/components/settings/shared/Header';
import options from 'src/options';
import { Gtk } from 'astal/gtk3';
export const SystrayMenuTheme = (): JSX.Element => {
return (
<scrollable
name={'System Tray'}
className="menu-theme-page systray paged-container"
vscroll={Gtk.PolicyType.AUTOMATIC}
hscroll={Gtk.PolicyType.AUTOMATIC}
vexpand={true}
>
<box vertical>
{/* Dropdown Menu Section */}
<Header title="Dropdown Menu" />
<Option
opt={options.theme.bar.menus.menu.systray.dropdownmenu.background}
title="Background"
type="color"
/>
<Option opt={options.theme.bar.menus.menu.systray.dropdownmenu.text} title="Text" type="color" />
<Option
opt={options.theme.bar.menus.menu.systray.dropdownmenu.divider}
title="Section Divider"
type="color"
/>
</box>
</scrollable>
);
};

79
src/components/settings/pages/theme/menus/volume.tsx Normal file
View File

@@ -0,0 +1,79 @@
import { Option } from 'src/components/settings/shared/Option';
import { Header } from 'src/components/settings/shared/Header';
import options from 'src/options';
import { Gtk } from 'astal/gtk3';
export const VolumeMenuTheme = (): JSX.Element => {
return (
<scrollable
name={'Volume Menu'}
className="menu-theme-page volume paged-container"
vscroll={Gtk.PolicyType.AUTOMATIC}
hscroll={Gtk.PolicyType.AUTOMATIC}
vexpand={true}
>
<box vertical>
{/* Volume Menu Theme Settings Section */}
<Header title="Volume Menu Theme Settings" />
<Option opt={options.theme.bar.menus.menu.volume.text} title="Text" type="color" />
{/* Card Section */}
<Header title="Card" />
<Option opt={options.theme.bar.menus.menu.volume.card.color} title="Card" type="color" />
{/* Background Section */}
<Header title="Background" />
<Option opt={options.theme.bar.menus.menu.volume.background.color} title="Background" type="color" />
{/* Border Section */}
<Header title="Border" />
<Option opt={options.theme.bar.menus.menu.volume.border.color} title="Border" type="color" />
{/* Label Section */}
<Header title="Label" />
<Option opt={options.theme.bar.menus.menu.volume.label.color} title="Label" type="color" />
{/* List Items Section */}
<Header title="List Items" />
<Option opt={options.theme.bar.menus.menu.volume.listitems.active} title="Active/Hover" type="color" />
<Option opt={options.theme.bar.menus.menu.volume.listitems.passive} title="Passive" type="color" />
{/* Icon Button Section */}
<Header title="Icon Button" />
<Option opt={options.theme.bar.menus.menu.volume.iconbutton.active} title="Active/Hover" type="color" />
<Option opt={options.theme.bar.menus.menu.volume.iconbutton.passive} title="Passive" type="color" />
{/* Audio Slider Section */}
<Header title="Audio Slider" />
<Option opt={options.theme.bar.menus.menu.volume.audio_slider.primary} title="Primary" type="color" />
<Option
opt={options.theme.bar.menus.menu.volume.audio_slider.background}
title="Background"
type="color"
/>
<Option
opt={options.theme.bar.menus.menu.volume.audio_slider.backgroundhover}
title="Background (Hover)"
type="color"
/>
<Option opt={options.theme.bar.menus.menu.volume.audio_slider.puck} title="Puck" type="color" />
{/* Input Slider Section */}
<Header title="Input Slider" />
<Option opt={options.theme.bar.menus.menu.volume.input_slider.primary} title="Primary" type="color" />
<Option
opt={options.theme.bar.menus.menu.volume.input_slider.background}
title="Background"
type="color"
/>
<Option
opt={options.theme.bar.menus.menu.volume.input_slider.backgroundhover}
title="Background (Hover)"
type="color"
/>
<Option opt={options.theme.bar.menus.menu.volume.input_slider.puck} title="Puck" type="color" />
</box>
</scrollable>
);
};

50
src/components/settings/pages/theme/notifications/index.tsx Normal file
View File

@@ -0,0 +1,50 @@
import { Option } from 'src/components/settings/shared/Option';
import { Header } from 'src/components/settings/shared/Header';
import options from 'src/options';
import { Gtk } from 'astal/gtk3';
export const NotificationsTheme = (): JSX.Element => {
return (
<scrollable
name={'Notifications'}
className="notifications-theme-page paged-container"
vscroll={Gtk.PolicyType.AUTOMATIC}
hscroll={Gtk.PolicyType.AUTOMATIC}
vexpand={true}
>
<box vertical>
{/* Notifications Theme Settings Section */}
<Header title="Notifications Theme Settings" />
<Option opt={options.theme.notification.background} title="Notification Background" type="color" />
<Option
opt={options.theme.notification.opacity}
title="Notification Opacity"
type="number"
increment={5}
min={0}
max={100}
/>
<Option
opt={options.theme.notification.actions.background}
title="Action Button Background"
subtitle="Buttons that perform actions within a notification"
type="color"
/>
<Option opt={options.theme.notification.actions.text} title="Action Button Text Color" type="color" />
<Option opt={options.theme.notification.label} title="Label" type="color" />
<Option opt={options.theme.notification.border} title="Border" type="color" />
<Option opt={options.theme.notification.time} title="Time Stamp" type="color" />
<Option opt={options.theme.notification.text} title="Body Text" type="color" />
<Option
opt={options.theme.notification.labelicon}
title="Label Icon"
subtitle="Icon that accompanies the label. Doesn't apply if icon is an app icon."
type="color"
/>
<Option opt={options.theme.notification.close_button.background} title="Dismiss Button" type="color" />
<Option opt={options.theme.notification.close_button.label} title="Dismiss Button Text" type="color" />
</box>
</scrollable>
);
};

42
src/components/settings/pages/theme/osd/index.tsx Normal file
View File

@@ -0,0 +1,42 @@
import { Option } from 'src/components/settings/shared/Option';
import { Header } from 'src/components/settings/shared/Header';
import options from 'src/options';
import { Gtk } from 'astal/gtk3';
export const OsdTheme = (): JSX.Element => {
return (
<scrollable
name={'OSD'}
className="osd-theme-page paged-container"
vscroll={Gtk.PolicyType.AUTOMATIC}
hscroll={Gtk.PolicyType.AUTOMATIC}
vexpand={true}
>
<box vertical>
{/* On Screen Display Settings Section */}
<Header title="On Screen Display Settings" />
<Option
opt={options.theme.osd.opacity}
title="OSD Opacity"
type="number"
increment={5}
min={0}
max={100}
/>
<Option opt={options.theme.osd.bar_color} title="Bar" type="color" />
<Option
opt={options.theme.osd.bar_overflow_color}
title="Bar Overflow"
subtitle="Overflow color is for when the volume goes over a 100"
type="color"
/>
<Option opt={options.theme.osd.bar_empty_color} title="Bar Background" type="color" />
<Option opt={options.theme.osd.bar_container} title="Bar Container" type="color" />
<Option opt={options.theme.osd.icon} title="Icon" type="color" />
<Option opt={options.theme.osd.icon_container} title="Icon Container" type="color" />
<Option opt={options.theme.osd.label} title="Value Text" type="color" />
</box>
</scrollable>
);
};

296
src/components/settings/shared/FileChooser.ts Normal file
View File

@@ -0,0 +1,296 @@
import options from '../../../options';
import Gtk from 'gi://Gtk?version=3.0';
import Gio from 'gi://Gio';
import { bash, Notify } from '../../../lib/utils';
import icons from '../../../lib/icons/icons';
import { Config } from '../../../lib/types/filechooser';
import { hexColorPattern } from '../../../globals/useTheme';
import { isHexColor } from '../../../globals/variables';
const { restartCommand } = options.hyprpanel;
const whiteListedThemeProp = ['theme.bar.buttons.style'];
/**
* Loads a JSON file from the specified file path and parses it.
* If the file cannot be loaded or parsed, it logs an error and returns null.
*
* @param filePath - The path to the JSON file to be loaded.
* @returns The parsed JavaScript object or null if the file could not be loaded or parsed.
*/
export const loadJsonFile = (filePath: string): Config | null => {
const file = Gio.File.new_for_path(filePath as string);
const [success, content] = file.load_contents(null);
if (!success) {
console.error(`Failed to import: ${filePath}`);
return null;
}
const jsonString = new TextDecoder('utf-8').decode(content);
return JSON.parse(jsonString);
};
/**
* Saves an object as a JSON file to the specified file path.
* If the file cannot be saved, it logs an error.
*
* @param config - The JavaScript object to be saved as a JSON file.
* @param filePath - The path where the JSON file will be saved.
*/
export const saveConfigToFile = (config: object, filePath: string): void => {
const file = Gio.File.new_for_path(filePath);
const outputStream = file.replace(null, false, Gio.FileCreateFlags.NONE, null);
const dataOutputStream = new Gio.DataOutputStream({ base_stream: outputStream });
const jsonString = JSON.stringify(config, null, 2);
dataOutputStream.put_string(jsonString, null);
dataOutputStream.close(null);
};
/**
* Filters the given configuration object to include only theme-related properties.
* Theme-related properties are identified by their keys matching a hex color pattern or being in the whitelist.
*
* @param config - The configuration object to be filtered.
* @returns A new configuration object containing only theme-related properties.
*/
export const filterConfigForThemeOnly = (config: Config): Config => {
const filteredConfig: Config = {};
for (const key in config) {
const value = config[key];
if (typeof value === 'string' && hexColorPattern.test(value)) {
filteredConfig[key] = config[key];
} else if (whiteListedThemeProp.includes(key)) {
filteredConfig[key] = config[key];
}
}
return filteredConfig;
};
/**
* Filters the given configuration object to exclude theme-related properties.
* Theme-related properties are identified by their keys matching a hex color pattern or being in the whitelist.
*
* @param config - The configuration object to be filtered.
* @returns A new configuration object excluding theme-related properties.
*/
export const filterConfigForNonTheme = (config: Config): Config => {
const filteredConfig: Config = {};
for (const key in config) {
if (whiteListedThemeProp.includes(key)) {
continue;
}
const value = config[key];
if (!(typeof value === 'string' && hexColorPattern.test(value))) {
filteredConfig[key] = config[key];
}
}
return filteredConfig;
};
/**
* Opens a file save dialog to save the current configuration to a specified file path.
* The configuration can be filtered to include only theme-related properties if the themeOnly flag is set.
* If the file already exists, it increments the file name to avoid overwriting.
* Displays a notification upon successful save or logs an error if the save fails.
*
* @param filePath - The original file path where the configuration is to be saved.
* @param themeOnly - A flag indicating whether to save only theme-related properties.
*/
export const saveFileDialog = (filePath: string, themeOnly: boolean): void => {
const original_file_path = filePath;
const file = Gio.File.new_for_path(original_file_path);
const [success, content] = file.load_contents(null);
if (!success) {
console.error(`Could not find 'config.json' at ${TMP}`);
return;
}
const jsonString = new TextDecoder('utf-8').decode(content);
const jsonObject = JSON.parse(jsonString);
const filterHexColorPairs = (jsonObject: Config): Config => {
const filteredObject: Config = {};
for (const key in jsonObject) {
const value = jsonObject[key];
if (typeof value === 'string' && isHexColor(value)) {
filteredObject[key] = jsonObject[key];
} else if (whiteListedThemeProp.includes(key)) {
filteredObject[key] = jsonObject[key];
}
}
return filteredObject;
};
const filterOutHexColorPairs = (jsonObject: Config): Config => {
const filteredObject: Config = {};
for (const key in jsonObject) {
if (whiteListedThemeProp.includes(key)) {
continue;
}
const value = jsonObject[key];
if (!(typeof value === 'string' && isHexColor(value))) {
filteredObject[key] = jsonObject[key];
}
}
return filteredObject;
};
const filteredJsonObject = themeOnly ? filterHexColorPairs(jsonObject) : filterOutHexColorPairs(jsonObject);
const filteredContent = JSON.stringify(filteredJsonObject, null, 2);
const dialog = new Gtk.FileChooserDialog({
title: `Save Hyprpanel ${themeOnly ? 'Theme' : 'Config'}`,
action: Gtk.FileChooserAction.SAVE,
});
dialog.add_button(Gtk.STOCK_CANCEL, Gtk.ResponseType.CANCEL);
dialog.add_button(Gtk.STOCK_SAVE, Gtk.ResponseType.ACCEPT);
dialog.set_current_name(themeOnly ? 'hyprpanel_theme.json' : 'hyprpanel_config.json');
dialog.get_style_context().add_class('hyprpanel-file-chooser');
const response = dialog.run();
if (response === Gtk.ResponseType.ACCEPT) {
const file_path = dialog.get_filename();
console.info(`Original file path: ${file_path}`);
const getIncrementedFilePath = (filePath: string): string => {
let increment = 1;
const baseName = filePath.replace(/(\.\w+)$/, '');
const match = filePath.match(/(\.\w+)$/);
const extension = match ? match[0] : '';
let newFilePath = filePath;
let file = Gio.File.new_for_path(newFilePath);
while (file.query_exists(null)) {
newFilePath = `${baseName}_${increment}${extension}`;
file = Gio.File.new_for_path(newFilePath);
increment++;
}
return newFilePath;
};
const finalFilePath = getIncrementedFilePath(file_path as string);
console.info(`File will be saved at: ${finalFilePath}`);
try {
const save_file = Gio.File.new_for_path(finalFilePath);
const outputStream = save_file.replace(null, false, Gio.FileCreateFlags.NONE, null);
const dataOutputStream = new Gio.DataOutputStream({
base_stream: outputStream,
});
dataOutputStream.put_string(filteredContent, null);
dataOutputStream.close(null);
Notify({
summary: 'File Saved Successfully',
body: `At ${finalFilePath}.`,
iconName: icons.ui.info,
timeout: 5000,
});
} catch (e) {
if (e instanceof Error) {
console.error('Failed to write to file:', e.message);
}
}
}
dialog.destroy();
};
/**
* Opens a file chooser dialog to import a configuration file.
* The imported configuration can be filtered to include only theme-related properties if the themeOnly flag is set.
* Merges the imported configuration with the existing configuration and saves the result.
* Displays a notification upon successful import or logs an error if the import fails.
*
* @param themeOnly - A flag indicating whether to import only theme-related properties.
*/
export const importFiles = (themeOnly: boolean = false): void => {
const dialog = new Gtk.FileChooserDialog({
title: `Import Hyprpanel ${themeOnly ? 'Theme' : 'Config'}`,
action: Gtk.FileChooserAction.OPEN,
});
dialog.set_current_folder(`${SRC_DIR}/themes`);
dialog.add_button(Gtk.STOCK_CANCEL, Gtk.ResponseType.CANCEL);
dialog.add_button(Gtk.STOCK_OPEN, Gtk.ResponseType.ACCEPT);
dialog.get_style_context().add_class('hyprpanel-file-chooser');
const response = dialog.run();
if (response === Gtk.ResponseType.CANCEL) {
dialog.destroy();
return;
}
if (response === Gtk.ResponseType.ACCEPT) {
const filePath: string | null = dialog.get_filename();
if (filePath === null) {
Notify({
summary: 'Failed to import',
body: 'No file selected.',
iconName: icons.ui.warning,
timeout: 5000,
});
return;
}
const importedConfig = loadJsonFile(filePath);
if (!importedConfig) {
dialog.destroy();
return;
}
Notify({
summary: `Importing ${themeOnly ? 'Theme' : 'Config'}`,
body: `Importing: ${filePath}`,
iconName: icons.ui.info,
timeout: 7000,
});
const tmpConfigFile = Gio.File.new_for_path(`${TMP}/config.json`);
const optionsConfigFile = Gio.File.new_for_path(CONFIG);
const [tmpSuccess, tmpContent] = tmpConfigFile.load_contents(null);
const [optionsSuccess, optionsContent] = optionsConfigFile.load_contents(null);
if (!tmpSuccess || !optionsSuccess) {
console.error('Failed to read existing configuration files.');
dialog.destroy();
return;
}
let tmpConfig = JSON.parse(new TextDecoder('utf-8').decode(tmpContent));
let optionsConfig = JSON.parse(new TextDecoder('utf-8').decode(optionsContent));
if (themeOnly) {
const filteredConfig = filterConfigForThemeOnly(importedConfig);
tmpConfig = { ...tmpConfig, ...filteredConfig };
optionsConfig = { ...optionsConfig, ...filteredConfig };
} else {
const filteredConfig = filterConfigForNonTheme(importedConfig);
tmpConfig = { ...tmpConfig, ...filteredConfig };
optionsConfig = { ...optionsConfig, ...filteredConfig };
}
saveConfigToFile(tmpConfig, `${TMP}/config.json`);
saveConfigToFile(optionsConfig, CONFIG);
}
dialog.destroy();
bash(restartCommand.get());
};

15
src/components/settings/shared/Header.tsx Normal file
View File

@@ -0,0 +1,15 @@
import { Gtk } from 'astal/gtk3';
import Separator from 'src/components/shared/Separator';
export const Header = ({ title }: HeaderProps): JSX.Element => {
return (
<box className="options-header">
<label className="label-name" label={title} />
<Separator className="menu-separator" valign={Gtk.Align.CENTER} hexpand />
</box>
);
};
interface HeaderProps {
title: string;
}

96
src/components/settings/shared/Inputter.tsx Normal file
View File

@@ -0,0 +1,96 @@
import { RowProps } from 'src/lib/types/options';
import { NumberInputter } from './inputs/number';
import { ObjectInputter } from './inputs/object';
import { StringInputter } from './inputs/string';
import { BooleanInputter } from './inputs/boolean';
import { ImageInputter } from './inputs/image';
import { ImportInputter } from './inputs/import';
import { WallpaperInputter } from './inputs/wallpaper';
import { ColorInputter } from './inputs/color';
import { EnumInputter } from './inputs/enum';
import { FontInputter } from './inputs/font';
import { Variable } from 'astal';
import { Gtk } from 'astal/gtk3';
const InputField = <T extends string | number | boolean | object>({
opt,
type = typeof opt.get() as RowProps<T>['type'],
enums = [],
disabledBinding,
dependencies,
exportData,
min = 0,
max = 1000000,
increment = 1,
className = '',
isUnsaved,
}: InputFieldProps<T>): JSX.Element => {
switch (type) {
case 'number':
return <NumberInputter opt={opt} min={min} max={max} increment={increment} isUnsaved={isUnsaved} />;
case 'float':
case 'object':
return <ObjectInputter opt={opt} isUnsaved={isUnsaved} className={className} />;
case 'string':
return <StringInputter opt={opt} isUnsaved={isUnsaved} />;
case 'enum':
return <EnumInputter opt={opt} values={enums} />;
case 'boolean':
return <BooleanInputter opt={opt} disabledBinding={disabledBinding} dependencies={dependencies} />;
case 'img':
return <ImageInputter opt={opt} />;
case 'config_import':
return <ImportInputter exportData={exportData} />;
case 'wallpaper':
return <WallpaperInputter opt={opt} />;
case 'font':
return <FontInputter opt={opt} />;
case 'color':
return <ColorInputter opt={opt} />;
default:
return <label label={`No setter with type ${type}`} />;
}
};
export const Inputter = <T extends string | number | boolean | object>({
opt,
type = typeof opt.get() as RowProps<T>['type'],
enums,
disabledBinding,
dependencies,
exportData,
min,
max,
increment,
className,
isUnsaved,
}: InputterProps<T>): JSX.Element => {
return (
<box className={/export|import/.test(type || '') ? '' : 'inputter-container'} valign={Gtk.Align.CENTER}>
<InputField
type={type}
opt={opt}
enums={enums}
disabledBinding={disabledBinding}
dependencies={dependencies}
exportData={exportData}
min={min}
max={max}
increment={increment}
className={className}
isUnsaved={isUnsaved}
/>
</box>
);
};
interface InputterProps<T> extends RowProps<T> {
className?: string;
isUnsaved: Variable<boolean>;
}
interface InputFieldProps<T> extends RowProps<T> {
className?: string;
isUnsaved: Variable<boolean>;
}

33
src/components/settings/shared/Label.tsx Normal file
View File

@@ -0,0 +1,33 @@
import { execAsync } from 'astal';
import { Gtk } from 'astal/gtk3';
export const Label = ({ title: name, subtitle: sub = '', subtitleLink = '' }: LabelProps): JSX.Element => {
const Subtitle = (): JSX.Element => {
if (subtitleLink.length) {
return (
<button
className="options-sublabel-link"
onClick={() => execAsync(`bash -c 'xdg-open ${subtitleLink}'`)}
halign={Gtk.Align.START}
valign={Gtk.Align.CENTER}
>
<label label={sub} />
</button>
);
}
return <label className="options-sublabel" label={sub} halign={Gtk.Align.START} valign={Gtk.Align.CENTER} />;
};
return (
<box halign={Gtk.Align.START} vertical>
<label className="options-label" label={name} halign={Gtk.Align.START} valign={Gtk.Align.CENTER} />
<Subtitle />
</box>
);
};
interface LabelProps {
title: string;
subtitle?: string;
subtitleLink?: string;
}

16
src/components/settings/shared/Option/PropertyLabel.tsx Normal file
View File

@@ -0,0 +1,16 @@
import { Gtk } from 'astal/gtk3';
import { Label } from '../Label';
export const PropertyLabel = ({ title, subtitle, subtitleLink }: PropertyLabelProps): JSX.Element => {
return (
<box halign={Gtk.Align.START} valign={Gtk.Align.CENTER} hexpand>
<Label title={title} subtitle={subtitle} subtitleLink={subtitleLink} />
</box>
);
};
interface PropertyLabelProps {
title: string;
subtitle?: string;
subtitleLink?: string;
}

22
src/components/settings/shared/Option/ResetButton.tsx Normal file
View File

@@ -0,0 +1,22 @@
import { bind } from 'astal';
import { Gtk } from 'astal/gtk3';
import icons from 'src/lib/icons/icons';
import { RowProps } from 'src/lib/types/options';
import { isPrimaryClick } from 'src/lib/utils';
export const ResetButton = <T extends string | number | boolean | object>({ ...props }: RowProps<T>): JSX.Element => {
return (
<button
className={'reset-options'}
onClick={(_, event) => {
if (isPrimaryClick(event)) {
props.opt.reset();
}
}}
sensitive={bind(props.opt).as((v) => v !== props.opt.initial)}
valign={Gtk.Align.CENTER}
>
<icon icon={icons.ui.refresh} />
</button>
);
};

30
src/components/settings/shared/Option/SettingInput.tsx Normal file
View File

@@ -0,0 +1,30 @@
import { Variable } from 'astal';
import { RowProps } from 'src/lib/types/options';
import { Inputter } from '../Inputter';
export const SettingInput = <T extends string | number | boolean | object>({
className,
isUnsaved,
...props
}: SettingInputProps<T>): JSX.Element => {
return (
<Inputter
opt={props.opt}
type={props.type}
enums={props.enums}
disabledBinding={props.disabledBinding}
dependencies={props.dependencies}
exportData={props.exportData}
min={props.min}
max={props.max}
increment={props.increment}
className={className}
isUnsaved={isUnsaved}
/>
);
};
interface SettingInputProps<T> extends RowProps<T> {
className?: string;
isUnsaved: Variable<boolean>;
}

30
src/components/settings/shared/Option/index.tsx Normal file
View File

@@ -0,0 +1,30 @@
import { RowProps } from 'src/lib/types/options';
import { Variable } from 'astal';
import { PropertyLabel } from './PropertyLabel';
import { ResetButton } from './ResetButton';
import { SettingInput } from './SettingInput';
export const Option = <T extends string | number | boolean | object>({
className,
...props
}: OptionProps<T>): JSX.Element => {
const isUnsaved = Variable(false);
return (
<box
className={'option-item'}
hexpand
onDestroy={() => {
isUnsaved.drop();
}}
>
<PropertyLabel title={props.title} subtitle={props.subtitle} subtitleLink={props.subtitleLink} />
<SettingInput isUnsaved={isUnsaved} className={className} {...props} />
<ResetButton {...props} />
</box>
);
};
interface OptionProps<T> extends RowProps<T> {
title: string;
className?: string;
}

37
src/components/settings/shared/inputs/boolean.tsx Normal file
View File

@@ -0,0 +1,37 @@
import { Binding } from 'astal';
import { bind, Variable } from 'astal';
import { Opt } from 'src/lib/option';
import { dependencies as checkDependencies } from 'src/lib/utils';
export const BooleanInputter = <T extends string | number | boolean | object>({
opt,
disabledBinding,
dependencies,
}: BooleanInputterProps<T>): JSX.Element => (
<switch
sensitive={disabledBinding !== undefined ? bind(disabledBinding).as((disabled) => !disabled) : true}
active={bind(opt) as Binding<boolean>}
setup={(self) => {
self.connect('notify::active', () => {
if (disabledBinding !== undefined && disabledBinding.get()) {
return;
}
if (self.active && dependencies !== undefined && !dependencies.every((dep) => checkDependencies(dep))) {
self.active = false;
return;
}
opt.set(self.active as T);
});
}}
/>
);
interface BooleanInputterProps<T> {
opt: Opt<T>;
isUnsaved?: Variable<boolean>;
disabledBinding?: Variable<boolean>;
dependencies?: string[];
}

33
src/components/settings/shared/inputs/color.tsx Normal file
View File

@@ -0,0 +1,33 @@
import { Gdk } from 'astal/gtk3';
import ColorButton from 'src/components/shared/ColorButton';
import { Opt } from 'src/lib/option';
import { useHook } from 'src/lib/shared/hookHandler';
export const ColorInputter = <T extends string | number | boolean | object>({
opt,
}: ColorInputterProps<T>): JSX.Element => {
return (
<ColorButton
setup={(self) => {
useHook(self, opt, () => {
const rgba = new Gdk.RGBA();
rgba.parse(opt.get() as string);
self.rgba = rgba;
});
self.connect('color-set', ({ rgba: { red, green, blue } }) => {
const hex = (n: number): string => {
const c = Math.floor(255 * n).toString(16);
return c.length === 1 ? `0${c}` : c;
};
opt.set(`#${hex(red)}${hex(green)}${hex(blue)}` as T);
});
}}
/>
);
};
interface ColorInputterProps<T> {
opt: Opt<T>;
}

51
src/components/settings/shared/inputs/enum.tsx Normal file
View File

@@ -0,0 +1,51 @@
import { Opt } from 'src/lib/option';
import icons from 'src/lib/icons/icons';
import { bind } from 'astal';
import { isPrimaryClick } from 'src/lib/utils';
export const EnumInputter = <T extends string | number | boolean | object>({
opt,
values,
}: EnumInputterProps<T>): JSX.Element => {
const step = (dir: 1 | -1): void => {
const indexOfCurrentValue = values.findIndex((index) => index === opt.get());
opt.set(
dir > 0
? indexOfCurrentValue + dir > values.length - 1
? values[0]
: values[indexOfCurrentValue + dir]
: indexOfCurrentValue + dir < 0
? values[values.length - 1]
: values[indexOfCurrentValue + dir],
);
};
return (
<box className={'enum-setter'}>
<label label={bind(opt).as((option) => `${option}`)} />
<button
onClick={(_, event) => {
if (isPrimaryClick(event)) {
step(-1);
}
}}
>
<icon icon={icons.ui.arrow.left} />
</button>
<button
onClick={(_, event) => {
if (isPrimaryClick(event)) {
step(+1);
}
}}
>
<icon icon={icons.ui.arrow.right} />
</button>
</box>
);
};
interface EnumInputterProps<T> {
opt: Opt<T>;
values: T[];
}

23
src/components/settings/shared/inputs/font.tsx Normal file
View File

@@ -0,0 +1,23 @@
import FontButton from 'src/components/shared/FontButton';
import { Opt } from 'src/lib/option';
export const FontInputter = <T extends string | number | boolean | object>({
opt,
}: FontInputterProps<T>): JSX.Element => {
return (
<FontButton
showSize={false}
useSize={false}
setup={(self) => {
self.font = opt.get() as string;
self.hook(opt, () => (self.font = opt.get() as string));
self.connect('font-set', ({ font }) => opt.set(font!.split(' ').slice(0, -1).join(' ') as T));
}}
/>
);
};
interface FontInputterProps<T> {
opt: Opt<T>;
}

35
src/components/settings/shared/inputs/image.tsx Normal file
View File

@@ -0,0 +1,35 @@
import { Gtk } from 'astal/gtk3';
import FileChooserButton from 'src/components/shared/FileChooseButton';
import { Opt } from 'src/lib/option';
const handleFileSet =
<T,>(opt: Opt<T>) =>
(self: Gtk.FileChooserButton): void => {
const uri = self.get_uri();
if (!uri) {
return;
}
try {
const decodedPath = decodeURIComponent(uri.replace('file://', ''));
opt.set(decodedPath as unknown as T);
} catch (error) {
console.error('Failed to decode URI:', error);
}
};
export const ImageInputter = <T extends string | number | boolean | object>({
opt,
}: ImageInputterProps<T>): JSX.Element => {
return (
<FileChooserButton
on_file_set={(self) => {
return handleFileSet(opt)(self);
}}
/>
);
};
interface ImageInputterProps<T> {
opt: Opt<T>;
}

34
src/components/settings/shared/inputs/import.tsx Normal file
View File

@@ -0,0 +1,34 @@
import { ThemeExportData } from 'src/lib/types/options';
import { importFiles, saveFileDialog } from '../FileChooser';
import { isPrimaryClick } from 'src/lib/utils';
export const ImportInputter = ({ exportData }: ImportInputterProps): JSX.Element => {
return (
<box>
<button
className="options-import"
onClick={(_, event) => {
if (isPrimaryClick(event)) {
importFiles(exportData?.themeOnly as boolean);
}
}}
>
<label label="import" />
</button>
<button
className="options-export"
onClick={(_, event) => {
if (isPrimaryClick(event)) {
saveFileDialog(exportData?.filePath as string, exportData?.themeOnly as boolean);
}
}}
>
<label label="export" />
</button>
</box>
);
};
interface ImportInputterProps {
exportData?: ThemeExportData;
}

60
src/components/settings/shared/inputs/number.tsx Normal file
View File

@@ -0,0 +1,60 @@
import { bind, Variable } from 'astal';
import { Gtk } from 'astal/gtk3';
import SpinButton from 'src/components/shared/SpinButton';
import icons from 'src/lib/icons/icons';
import { Opt } from 'src/lib/option';
import { useHook } from 'src/lib/shared/hookHandler';
export const NumberInputter = <T extends string | number | boolean | object>({
opt,
min,
max,
increment = 1,
isUnsaved,
}: NumberInputterProps<T>): JSX.Element => {
return (
<box>
<box className="unsaved-icon-container" halign={Gtk.Align.START}>
{bind(isUnsaved).as((unsaved) => {
if (unsaved) {
return (
<icon
className="unsaved-icon"
icon={icons.ui.warning}
tooltipText="Press 'Enter' to apply your changes."
/>
);
}
return <box />;
})}
</box>
<SpinButton
setup={(self) => {
self.set_range(min, max);
self.set_increments(1 * increment, 5 * increment);
self.connect('value-changed', () => {
opt.set(self.value as T);
});
useHook(self, opt, () => {
self.set_value(opt.get() as number);
isUnsaved.set(Number(self.get_text()) !== opt.get());
});
self.connect('key-release-event', () => {
isUnsaved.set(Number(self.get_text()) !== opt.get());
});
}}
/>
</box>
);
};
interface NumberInputterProps<T> {
opt: Opt<T>;
min: number;
max: number;
increment?: number;
isUnsaved: Variable<boolean>;
}

61
src/components/settings/shared/inputs/object.tsx Normal file
View File

@@ -0,0 +1,61 @@
import { bind, Variable } from 'astal';
import icons from 'src/lib/icons/icons';
import { Opt } from 'src/lib/option';
export const ObjectInputter = <T extends string | number | boolean | object>({
opt,
isUnsaved,
className,
}: ObjectInputterProps<T>): JSX.Element => {
return (
<box>
<box className="unsaved-icon-container">
{bind(isUnsaved).as((unsaved) => {
if (unsaved) {
return (
<icon
className="unsaved-icon"
icon={icons.ui.warning}
tooltipText="Press 'Enter' to apply your changes."
/>
);
}
return <box />;
})}
</box>
<entry
className={className}
onChanged={(self) => {
const currentText = self.text;
const serializedOpt = JSON.stringify(opt.get());
isUnsaved.set(currentText !== serializedOpt);
}}
onActivate={(self) => {
try {
const parsedValue = JSON.parse(self.text || '{}');
opt.set(parsedValue);
isUnsaved.set(false);
} catch (error) {
console.error('Invalid JSON input:', error);
}
}}
setup={(self) => {
self.text = JSON.stringify(opt.get());
isUnsaved.set(self.text !== JSON.stringify(opt.get()));
self.hook(opt, () => {
self.text = JSON.stringify(opt.get());
isUnsaved.set(self.text !== JSON.stringify(opt.get()));
});
}}
/>
</box>
);
};
interface ObjectInputterProps<T> {
opt: Opt<T>;
isUnsaved: Variable<boolean>;
className: string;
}

51
src/components/settings/shared/inputs/string.tsx Normal file
View File

@@ -0,0 +1,51 @@
import { bind, Variable } from 'astal';
import icons from 'src/lib/icons/icons';
import { Opt } from 'src/lib/option';
export const StringInputter = <T extends string | number | boolean | object>({
opt,
isUnsaved,
}: StringInputterProps<T>): JSX.Element => {
return (
<box>
<box className="unsaved-icon-container">
{bind(isUnsaved).as((unsaved) => {
if (unsaved) {
return (
<icon
className="unsaved-icon"
icon={icons.ui.warning}
tooltipText="Press 'Enter' to apply your changes."
/>
);
}
return <box />;
})}
</box>
<entry
className={bind(isUnsaved).as((unsaved) => (unsaved ? 'unsaved' : ''))}
onChanged={(self) => {
const currentText = self.text;
const optValue = opt.get();
isUnsaved.set(currentText !== optValue);
}}
onActivate={(self) => {
opt.set(self.text as T);
}}
setup={(self) => {
self.text = opt.get() as string;
isUnsaved.set(self.text !== opt.get());
self.hook(opt, () => {
isUnsaved.set(self.text !== opt.get());
self.text = opt.get() as string;
});
}}
/>
</box>
);
};
interface StringInputterProps<T> {
opt: Opt<T>;
isUnsaved: Variable<boolean>;
}

27
src/components/settings/shared/inputs/wallpaper.tsx Normal file
View File

@@ -0,0 +1,27 @@
import FileChooserButton from 'src/components/shared/FileChooseButton';
import { Opt } from 'src/lib/option';
import Wallpaper from 'src/services/Wallpaper';
export const WallpaperInputter = <T extends string | number | boolean | object>({
opt,
}: WallpaperInputterProps<T>): JSX.Element => {
if (typeof opt.get() === 'string') {
return (
<FileChooserButton
onFileSet={(self) => {
const newValue: string = self.get_uri()!.replace('file://', '');
opt.set(newValue as T);
if (options.wallpaper.enable.get()) {
Wallpaper.setWallpaper(newValue);
}
}}
/>
);
}
return <box />;
};
interface WallpaperInputterProps<T> {
opt: Opt<T>;
}

71
src/components/settings/side_effects/index.ts Normal file
View File

@@ -0,0 +1,71 @@
import { Opt } from 'src/lib/option';
import options from 'src/options';
const { show_numbered, show_icons, showWsIcons, showApplicationIcons } = options.bar.workspaces;
const { monochrome: monoBar } = options.theme.bar.buttons;
const { monochrome: monoMenu } = options.theme.bar.menus;
const { matugen } = options.theme;
/**
* Turns off the specified option variables when the source value is true.
*
* @param sourceValue - The source option whose value determines whether to turn off other options.
* @param optionsToDisable - An array of option variables to disable if the source value is true.
* @param ignoreVars - An optional array of option variables to ignore and not disable.
*/
const turnOffOptionVars = (
sourceValue: Opt<boolean>,
optionsToDisable: Array<Opt<boolean>>,
ignoreVars?: Array<Opt<boolean>>,
): void => {
const toggleOffVars = (varsToToggle: Array<Opt<boolean>>): void => {
const varsToNotToggle = ignoreVars?.map((curVar) => curVar.id) || [];
varsToToggle.forEach((curVar) => {
if (sourceValue.id !== curVar.id && !varsToNotToggle.includes(curVar.id)) {
curVar.set(false);
}
});
};
if (sourceValue.get()) {
const varsToToggleOff = optionsToDisable;
toggleOffVars(varsToToggleOff);
}
};
/* ================================================== */
/* WORKSPACE SIDE EFFECTS */
/* ================================================== */
const workspaceOptsToDisable = [show_numbered, show_icons, showWsIcons, showApplicationIcons];
show_numbered.subscribe(() => {
turnOffOptionVars(show_numbered, workspaceOptsToDisable);
});
show_icons.subscribe(() => {
turnOffOptionVars(show_icons, workspaceOptsToDisable);
});
showWsIcons.subscribe(() => {
turnOffOptionVars(showWsIcons, workspaceOptsToDisable, [showApplicationIcons]);
});
showApplicationIcons.subscribe(() => {
turnOffOptionVars(showApplicationIcons, workspaceOptsToDisable, [showWsIcons]);
if (showApplicationIcons.get()) {
showWsIcons.set(true);
}
});
/* ================================================== */
/* MATUGEN SIDE EFFECTS */
/* ================================================== */
matugen.subscribe(() => {
if (matugen.get() === true) {
monoBar.set(false);
monoMenu.set(false);
}
});