Upgrade to Agsv2 + Astal (#533)
* 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
GitHub
485
src/components/settings/pages/config/bar/index.tsx
Normal file
485
src/components/settings/pages/config/bar/index.tsx
Normal 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
180
src/components/settings/pages/config/general/index.tsx
Normal 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
73
src/components/settings/pages/config/index.tsx
Normal 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
43
src/components/settings/pages/config/menus/clock.tsx
Normal 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
240
src/components/settings/pages/config/menus/dashboard.tsx
Normal 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
29
src/components/settings/pages/config/menus/media.tsx
Normal 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
49
src/components/settings/pages/config/menus/power.tsx
Normal 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
20
src/components/settings/pages/config/menus/volume.tsx
Normal 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
95
src/components/settings/pages/config/notifications/index.tsx
Normal 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
61
src/components/settings/pages/config/osd/index.tsx
Normal 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>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user