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

Implemented strict linting standards and prettier formatting config. (#248)

Browse Source 
* Implemented strict linting standards and prettier formatting config.

* More linter fixes and type updates.

* More linter updates and type fixes

* Remove noisy comments

* Linter and type updates

* Linter, formatting and type updates.

* Linter updates

* Type updates

* Type updates

* fixed all linter errors

* Fixed all linting, formatting and type issues.

* Resolve merge conflicts.
This commit is contained in:
Jas Singh
2024-09-14 16:20:05 -07:00
committed by GitHub
parent ff13e3dd3c
commit 2c72cc66d8
222 changed files with 13141 additions and 8433 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
widget/RegularWindow.ts
View File

@@ -1,3 +1,3 @@
import Gtk from "gi://Gtk?version=3.0"
import Gtk from 'gi://Gtk?version=3.0';
export default Widget.subclass<typeof Gtk.Window, Gtk.Window.ConstructorProperties>(Gtk.Window)
export default Widget.subclass<typeof Gtk.Window, Gtk.Window.ConstructorProperties>(Gtk.Window);

138
widget/settings/SettingsDialog.ts
View File

@@ -1,93 +1,89 @@
import RegularWindow from "widget/RegularWindow"
import icons from "lib/icons"
import options from "options"
import { ThemesMenu } from "./pages/theme/index"
import { SettingsMenu } from "./pages/config/index"
import "./side_effects";
import RegularWindow from 'widget/RegularWindow';
import icons from 'lib/icons';
import options from 'options';
import { ThemesMenu } from './pages/theme/index';
import { SettingsMenu } from './pages/config/index';
import './side_effects';
import { GBox, GCenterBox } from 'lib/types/widget';
import Gtk from 'types/@girs/gtk-3.0/gtk-3.0';
type Page = "Configuration" | "Theming"
type Page = 'Configuration' | 'Theming';
const CurrentPage = Variable<Page>("Configuration");
const CurrentPage = Variable<Page>('Configuration');
const pagerMap: Page[] = [
"Configuration",
"Theming",
]
const pagerMap: Page[] = ['Configuration', 'Theming'];
const Header = () => Widget.CenterBox({
class_name: "header",
start_widget: Widget.Button({
class_name: "reset",
on_clicked: options.reset,
hpack: "start",
vpack: "start",
child: Widget.Icon(icons.ui.refresh),
tooltip_text: "Reset",
}),
center_widget: Widget.Box({
const Header = (): GCenterBox =>
Widget.CenterBox({
class_name: 'header',
start_widget: Widget.Button({
class_name: 'reset',
on_clicked: options.reset,
hpack: 'start',
vpack: 'start',
child: Widget.Icon(icons.ui.refresh),
tooltip_text: 'Reset',
}),
center_widget: Widget.Box({}),
end_widget: Widget.Button({
class_name: 'close',
hpack: 'end',
vpack: 'start',
child: Widget.Icon(icons.ui.close),
on_clicked: () => App.closeWindow('settings-dialog'),
}),
});
}),
end_widget: Widget.Button({
class_name: "close",
hpack: "end",
vpack: "start",
child: Widget.Icon(icons.ui.close),
on_clicked: () => App.closeWindow("settings-dialog"),
}),
})
const PageContainer = () => {
const PageContainer = (): GBox => {
return Widget.Box({
hpack: "fill",
hpack: 'fill',
hexpand: true,
vertical: true,
children: CurrentPage.bind("value").as(v => {
children: CurrentPage.bind('value').as((v) => {
return [
Widget.Box({
class_name: "option-pages-container",
hpack: "center",
class_name: 'option-pages-container',
hpack: 'center',
hexpand: true,
children: pagerMap.map((page) => {
return Widget.Button({
xalign: 0,
hpack: "center",
hpack: 'center',
class_name: `pager-button ${v === page ? 'active' : ''} category`,
label: page,
on_primary_click: () => CurrentPage.value = page
})
})
on_primary_click: () => (CurrentPage.value = page),
});
}),
}),
Widget.Stack({
vexpand: false,
class_name: "themes-menu-stack",
class_name: 'themes-menu-stack',
children: {
"Configuration": SettingsMenu(),
"Theming": ThemesMenu(),
Configuration: SettingsMenu(),
Theming: ThemesMenu(),
},
shown: CurrentPage.bind("value")
})
]
})
})
}
shown: CurrentPage.bind('value'),
}),
];
}),
});
};
export default () => RegularWindow({
name: "settings-dialog",
class_name: "settings-dialog",
title: "Settings",
setup(win) {
win.on("delete-event", () => {
win.hide()
return true
})
win.set_default_size(200, 300)
},
child: Widget.Box({
class_name: "settings-dialog-box",
vertical: true,
children: [
Header(),
PageContainer()
],
}),
})
export default (): Gtk.Window =>
RegularWindow({
name: 'settings-dialog',
class_name: 'settings-dialog',
title: 'Settings',
setup(win) {
win.on('delete-event', () => {
win.hide();
return true;
});
win.set_default_size(200, 300);
},
child: Widget.Box({
class_name: 'settings-dialog-box',
vertical: true,
children: [Header(), PageContainer()],
}),
});

349
widget/settings/pages/config/bar/index.ts
View File

@@ -1,15 +1,15 @@
import { Option } from "widget/settings/shared/Option";
import { Header } from "widget/settings/shared/Header";
import { Option } from 'widget/settings/shared/Option';
import { Header } from 'widget/settings/shared/Header';
import options from "options";
import Scrollable from "types/widgets/scrollable";
import Gtk from "types/@girs/gtk-3.0/gtk-3.0";
import options from 'options';
import Scrollable from 'types/widgets/scrollable';
import Gtk from 'types/@girs/gtk-3.0/gtk-3.0';
export const BarSettings = (): Scrollable<Gtk.Widget, Gtk.Widget> => {
return Widget.Scrollable({
vscroll: "always",
hscroll: "automatic",
class_name: "menu-theme-page paged-container",
vscroll: 'always',
hscroll: 'automatic',
class_name: 'menu-theme-page paged-container',
child: Widget.Box({
vertical: true,
children: [
@@ -18,16 +18,16 @@ export const BarSettings = (): Scrollable<Gtk.Widget, Gtk.Widget> => {
* LAYOUTS *
******************************
*/
Header("Layouts"),
Header('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",
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',
},
"bar-layout-input"
'bar-layout-input',
),
/*
@@ -35,75 +35,75 @@ export const BarSettings = (): Scrollable<Gtk.Widget, Gtk.Widget> => {
* SPACING *
******************************
*/
Header("Spacing"),
Header('Spacing'),
Option({
opt: options.theme.bar.outer_spacing,
title: "Outer Spacing",
subtitle: "Spacing on the outer left and right edges of the bar.",
type: "string",
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",
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",
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",
title: 'Button Horizontal Padding',
type: 'string',
}),
Option({
opt: options.theme.bar.buttons.padding_y,
title: "Button Vertical Padding",
type: "string",
title: 'Button Vertical Padding',
type: 'string',
}),
Option({
opt: options.theme.bar.buttons.radius,
title: "Button Radius",
type: "string",
title: 'Button Radius',
type: 'string',
}),
Option({
opt: options.theme.bar.floating,
title: "Floating Bar",
type: "boolean",
title: 'Floating Bar',
type: 'boolean',
}),
Option({
opt: options.theme.bar.layer,
title: "Layer",
type: "enum",
subtitle: "Layer determines the Z index of your bar.",
enums: ["top", "bottom", "overlay", "background"],
title: 'Layer',
type: 'enum',
subtitle: 'Layer determines the Z index of your bar.',
enums: ['top', 'bottom', 'overlay', 'background'],
}),
Option({
opt: options.theme.bar.margin_top,
title: "Margin Top",
subtitle: "Only applies if floating is enabled",
type: "string",
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",
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",
title: 'Margin Sides',
subtitle: 'Only applies if floating is enabled',
type: 'string',
}),
Option({
opt: options.theme.bar.border_radius,
title: "Border Radius",
subtitle: "Only applies if floating is enabled",
type: "string",
title: 'Border Radius',
subtitle: 'Only applies if floating is enabled',
type: 'string',
}),
/*
@@ -111,11 +111,11 @@ export const BarSettings = (): Scrollable<Gtk.Widget, Gtk.Widget> => {
* DASHBOARD *
******************************
*/
Header("Dashboard"),
Header('Dashboard'),
Option({
opt: options.bar.launcher.icon,
title: "Dashboard Menu Icon",
type: "string",
title: 'Dashboard Menu Icon',
type: 'string',
}),
/*
@@ -123,94 +123,95 @@ export const BarSettings = (): Scrollable<Gtk.Widget, Gtk.Widget> => {
* WORKSPACES *
******************************
*/
Header("Workspaces"),
Header('Workspaces'),
Option({
opt: options.bar.workspaces.show_icons,
title: "Show Workspace Icons",
type: "boolean",
title: 'Show Workspace Icons',
type: 'boolean',
}),
Option({
opt: options.bar.workspaces.icons.available,
title: "Workspace Available",
type: "string",
title: 'Workspace Available',
type: 'string',
}),
Option({
opt: options.bar.workspaces.icons.active,
title: "Workspace Active",
type: "string",
title: 'Workspace Active',
type: 'string',
}),
Option({
opt: options.bar.workspaces.icons.occupied,
title: "Workspace Occupied",
type: "string",
title: 'Workspace Occupied',
type: 'string',
}),
Option({
opt: options.bar.workspaces.show_numbered,
title: "Show Workspace Numbers",
type: "boolean",
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"],
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.numbered_active_highlight_border,
title: "Highlight Radius",
subtitle: "Only applicable if Workspace Numbers are enabled",
type: "string",
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",
title: 'Highlight Padding',
subtitle: 'Only applicable if Workspace Numbers are enabled',
type: 'string',
}),
Option({
opt: options.bar.workspaces.spacing,
title: "Spacing",
subtitle: "Spacing between workspace icons",
type: "float",
title: 'Spacing',
subtitle: 'Spacing between workspace icons',
type: 'float',
}),
Option({
opt: options.bar.workspaces.workspaces,
title: "Total Workspaces",
subtitle: "The least amount of workspaces to always show.",
type: "number",
title: 'Total Workspaces',
subtitle: 'The least amount of workspaces to always show.',
type: 'number',
}),
Option({
opt: options.bar.workspaces.monitorSpecific,
title: "Monitor Specific",
title: 'Monitor Specific',
subtitle:
"Only workspaces applicable to the monitor will be displayed.\n" +
'Only workspaces applicable to the monitor will be displayed.\n' +
"Works in conjuction with 'Total Workspaces'.",
type: "boolean",
type: 'boolean',
}),
Option({
opt: options.bar.workspaces.hideUnoccupied,
title: "Hide Unoccupied",
subtitle: "Only show workspaces that are occupied or active",
type: "boolean",
title: 'Hide Unoccupied',
subtitle: 'Only show workspaces that are occupied or active',
type: 'boolean',
}),
Option({
opt: options.bar.workspaces.workspaceMask,
title: "Mask Workspace Numbers On Monitors",
subtitle: "Only applicable if Workspace Numbers and Monitor Specific are enabled.\n" +
title: 'Mask Workspace Numbers On Monitors',
subtitle:
'Only applicable if Workspace Numbers and Monitor Specific are enabled.\n' +
"Forces each Monitor's Workspace labels to start from 1.",
type: "boolean",
type: 'boolean',
}),
Option({
opt: options.bar.workspaces.reverse_scroll,
title: "Invert Scroll",
subtitle: "Scrolling up will go to the previous workspace rather than the next.",
type: "boolean",
title: 'Invert Scroll',
subtitle: 'Scrolling up will go to the previous workspace rather than the next.',
type: 'boolean',
}),
Option({
opt: options.bar.workspaces.scroll_speed,
title: "Scrolling Speed",
type: "number",
title: 'Scrolling Speed',
type: 'number',
}),
/*
@@ -218,52 +219,54 @@ export const BarSettings = (): Scrollable<Gtk.Widget, Gtk.Widget> => {
* WINDOW TITLES *
******************************
*/
Header("Window Titles"),
Header('Window Titles'),
Option({
opt: options.bar.windowtitle.custom_title,
title: 'Use Custom Title',
type: 'boolean'
type: 'boolean',
}),
Option({
opt: options.bar.windowtitle.title_map,
title: 'Window Title Mappings',
subtitle: 'Only applicable if Show Custom Title is enabled\nWiki Link: https://hyprpanel.com/configuration/panel.html#window-title-mappings',
subtitle:
'Only applicable if Show Custom Title is enabled\nWiki Link: https://hyprpanel.com/configuration/panel.html#window-title-mappings',
type: 'object',
subtitleLink: 'https://hyprpanel.com/configuration/panel.html#window-title-mappings'
subtitleLink: 'https://hyprpanel.com/configuration/panel.html#window-title-mappings',
}),
Option({
opt: options.bar.windowtitle.class_name,
title: 'Use Class Name',
subtitle: 'Only applicable if Show Custom Title is disabled\nDisplays the window\'s class name instead of its title.',
type: 'boolean'
subtitle:
"Only applicable if Show Custom Title is disabled\nDisplays the window's class name instead of its title.",
type: 'boolean',
}),
Option({
opt: options.bar.windowtitle.label,
title: 'Show Window Title Label',
type: 'boolean'
type: 'boolean',
}),
Option({
opt: options.bar.windowtitle.icon,
title: 'Show Icon',
type: 'boolean'
type: 'boolean',
}),
Option({
opt: options.bar.windowtitle.truncation,
title: 'Truncate Window Title',
subtitle: 'Will truncate the window title to the specified size below.',
type: 'boolean'
type: 'boolean',
}),
Option({
opt: options.bar.windowtitle.truncation_size,
title: 'Truncation Size',
type: 'number',
min: 10
min: 10,
}),
Option({
opt: options.theme.bar.buttons.windowtitle.spacing,
title: 'Inner Spacing',
subtitle: 'Spacing between the icon and the label inside the buttons.',
type: 'string'
type: 'string',
}),
/*
@@ -271,17 +274,17 @@ export const BarSettings = (): Scrollable<Gtk.Widget, Gtk.Widget> => {
* VOLUME *
******************************
*/
Header("Volume"),
Header('Volume'),
Option({
opt: options.bar.volume.label,
title: "Show Volume Percentage",
type: "boolean",
title: 'Show Volume Percentage',
type: 'boolean',
}),
Option({
opt: options.theme.bar.buttons.volume.spacing,
title: "Inner Spacing",
subtitle: "Spacing between the icon and the label inside the buttons.",
type: "string",
title: 'Inner Spacing',
subtitle: 'Spacing between the icon and the label inside the buttons.',
type: 'string',
}),
/*
@@ -289,28 +292,28 @@ export const BarSettings = (): Scrollable<Gtk.Widget, Gtk.Widget> => {
* NETWORK *
******************************
*/
Header("Network"),
Header('Network'),
Option({
opt: options.bar.network.label,
title: "Show Network Name",
type: "boolean",
title: 'Show Network Name',
type: 'boolean',
}),
Option({
opt: options.bar.network.truncation,
title: "Truncate Network Name",
subtitle: "Will truncate the network name to the specified size below.",
type: "boolean",
title: 'Truncate Network Name',
subtitle: 'Will truncate the network name to the specified size below.',
type: 'boolean',
}),
Option({
opt: options.bar.network.truncation_size,
title: "Truncation Size",
type: "number",
title: 'Truncation Size',
type: 'number',
}),
Option({
opt: options.theme.bar.buttons.network.spacing,
title: "Inner Spacing",
subtitle: "Spacing between the icon and the label inside the buttons.",
type: "string",
title: 'Inner Spacing',
subtitle: 'Spacing between the icon and the label inside the buttons.',
type: 'string',
}),
/*
@@ -318,17 +321,17 @@ export const BarSettings = (): Scrollable<Gtk.Widget, Gtk.Widget> => {
* BLUETOOTH *
******************************
*/
Header("Bluetooth"),
Header('Bluetooth'),
Option({
opt: options.bar.bluetooth.label,
title: "Show Bluetooth Label",
type: "boolean",
title: 'Show Bluetooth Label',
type: 'boolean',
}),
Option({
opt: options.theme.bar.buttons.bluetooth.spacing,
title: "Inner Spacing",
subtitle: "Spacing between the icon and the label inside the buttons.",
type: "string",
title: 'Inner Spacing',
subtitle: 'Spacing between the icon and the label inside the buttons.',
type: 'string',
}),
/*
@@ -336,17 +339,17 @@ export const BarSettings = (): Scrollable<Gtk.Widget, Gtk.Widget> => {
* BATTERY *
******************************
*/
Header("Battery"),
Header('Battery'),
Option({
opt: options.bar.battery.label,
title: "Show Battery Percentage",
type: "boolean",
title: 'Show Battery Percentage',
type: 'boolean',
}),
Option({
opt: options.theme.bar.buttons.battery.spacing,
title: "Inner Spacing",
subtitle: "Spacing between the icon and the label inside the buttons.",
type: "string",
title: 'Inner Spacing',
subtitle: 'Spacing between the icon and the label inside the buttons.',
type: 'string',
}),
/*
@@ -354,15 +357,15 @@ export const BarSettings = (): Scrollable<Gtk.Widget, Gtk.Widget> => {
* SYSTEM TRAY *
******************************
*/
Header("System Tray"),
Header('System Tray'),
Option({
opt: options.bar.systray.ignore,
title: "Ignore List",
title: 'Ignore List',
subtitle:
"An array of applications to prevent from showing in the system tray.\n" +
"Wiki: https://hyprpanel.com/configuration/panel.html#system-tray",
subtitleLink: "https://hyprpanel.com/configuration/panel.html#system-tray",
type: "object",
'An array of applications to prevent from showing in the system tray.\n' +
'Wiki: https://hyprpanel.com/configuration/panel.html#system-tray',
subtitleLink: 'https://hyprpanel.com/configuration/panel.html#system-tray',
type: 'object',
}),
/*
@@ -370,32 +373,32 @@ export const BarSettings = (): Scrollable<Gtk.Widget, Gtk.Widget> => {
* CLOCK *
******************************
*/
Header("Clock"),
Header('Clock'),
Option({
opt: options.bar.clock.format,
title: "Clock Format",
type: "string",
title: 'Clock Format',
type: 'string',
}),
Option({
opt: options.bar.clock.icon,
title: "Icon",
type: "string",
title: 'Icon',
type: 'string',
}),
Option({
opt: options.bar.clock.showIcon,
title: "Show Icon",
type: "boolean",
title: 'Show Icon',
type: 'boolean',
}),
Option({
opt: options.bar.clock.showTime,
title: "Show Time",
type: "boolean",
title: 'Show Time',
type: 'boolean',
}),
Option({
opt: options.theme.bar.buttons.clock.spacing,
title: "Inner Spacing",
subtitle: "Spacing between the icon and the label inside the buttons.",
type: "string",
title: 'Inner Spacing',
subtitle: 'Spacing between the icon and the label inside the buttons.',
type: 'string',
}),
/*
@@ -403,41 +406,41 @@ export const BarSettings = (): Scrollable<Gtk.Widget, Gtk.Widget> => {
* MEDIA *
******************************
*/
Header("Media"),
Header('Media'),
Option({
opt: options.theme.bar.buttons.media.spacing,
title: "Inner Spacing",
subtitle: "Spacing between the icon and the label inside the buttons.",
type: "string",
title: 'Inner Spacing',
subtitle: 'Spacing between the icon and the label inside the buttons.',
type: 'string',
}),
Option({
opt: options.bar.media.show_artist,
title: "Show Track Artist",
type: "boolean",
title: 'Show Track Artist',
type: 'boolean',
}),
Option({
opt: options.bar.media.show_label,
title: "Toggle Media Label",
type: "boolean",
title: 'Toggle Media Label',
type: 'boolean',
}),
Option({
opt: options.bar.media.truncation,
title: "Truncate Media Label",
subtitle: "Only applicable if Toggle Media Label is enabled",
type: "boolean",
title: 'Truncate Media Label',
subtitle: 'Only applicable if Toggle Media Label is enabled',
type: 'boolean',
}),
Option({
opt: options.bar.media.truncation_size,
title: "Truncation Size",
subtitle: "Only applicable if Toggle Media Label is enabled",
type: "number",
title: 'Truncation Size',
subtitle: 'Only applicable if Toggle Media Label is enabled',
type: 'number',
min: 10,
}),
Option({
opt: options.bar.media.show_active_only,
title: "Auto Hide",
subtitle: "Button will automatically hide if no media is detected.",
type: "boolean",
title: 'Auto Hide',
subtitle: 'Button will automatically hide if no media is detected.',
type: 'boolean',
}),
/*
@@ -445,17 +448,17 @@ export const BarSettings = (): Scrollable<Gtk.Widget, Gtk.Widget> => {
* NOTIFICATIONS *
******************************
*/
Header("Notifications"),
Header('Notifications'),
Option({
opt: options.bar.notifications.show_total,
title: "Show Total # of notifications",
type: "boolean",
title: 'Show Total # of notifications',
type: 'boolean',
}),
Option({
opt: options.theme.bar.buttons.notifications.spacing,
title: "Inner Spacing",
subtitle: "Spacing between the icon and the label inside the buttons.",
type: "string",
title: 'Inner Spacing',
subtitle: 'Spacing between the icon and the label inside the buttons.',
type: 'string',
}),
],
}),

166
widget/settings/pages/config/general/index.ts
View File

@@ -1,19 +1,29 @@
import { Option } from "widget/settings/shared/Option";
import { Header } from "widget/settings/shared/Header";
import { Option } from 'widget/settings/shared/Option';
import { Header } from 'widget/settings/shared/Header';
import options from "options";
import options from 'options';
import Scrollable from 'types/widgets/scrollable';
import { Attribute, Child } from 'lib/types/widget';
export const BarGeneral = () => {
export const BarGeneral = (): Scrollable<Child, Attribute> => {
return Widget.Scrollable({
class_name: "bar-theme-page paged-container",
vscroll: "automatic",
class_name: 'bar-theme-page paged-container',
vscroll: 'automatic',
child: Widget.Box({
vertical: true,
children: [
Header('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.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',
@@ -21,34 +31,130 @@ export const BarGeneral = () => {
type: 'config_import',
exportData: {
filePath: OPTIONS,
themeOnly: false
}
themeOnly: false,
},
}),
Option({
opt: options.terminal,
title: 'Terminal',
subtitle: "Tools such as 'btop' will open in this terminal",
type: 'string',
}),
Option({ opt: options.terminal, title: 'Terminal', subtitle: "Tools such as 'btop' will open in this terminal", type: 'string' }),
Option({
opt: options.tear,
title: 'Tearing Compatible',
subtitle:
"Makes HyprPanel compatible with Hyprland tearing.\n" +
"Enabling this will change all overlays (Notifications, OSDs, Bar) to the \'top\' layer instead the \'overlay\' layer.",
type: 'boolean'
'Makes HyprPanel compatible with Hyprland tearing.\n' +
"Enabling this will change all overlays (Notifications, OSDs, Bar) to the 'top' layer instead the 'overlay' layer.",
type: 'boolean',
}),
Header('Scaling'),
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.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,
}),
],
}),
});
};

100
widget/settings/pages/config/index.ts
View File

@@ -1,68 +1,70 @@
import { BarGeneral } from "./general/index";
import { BarSettings } from "./bar/index";
import { ClockMenuSettings } from "./menus/clock";
import { DashboardMenuSettings } from "./menus/dashboard";
import { NotificationSettings } from "./notifications/index";
import { OSDSettings } from "./osd/index";
import { CustomModuleSettings } from "customModules/config";
import { PowerMenuSettings } from "./menus/power";
import { BarGeneral } from './general/index';
import { BarSettings } from './bar/index';
import { ClockMenuSettings } from './menus/clock';
import { DashboardMenuSettings } from './menus/dashboard';
import { NotificationSettings } from './notifications/index';
import { OSDSettings } from './osd/index';
import { CustomModuleSettings } from 'customModules/config';
import { PowerMenuSettings } from './menus/power';
import { GBox } from 'lib/types/widget';
type Page = "General"
| "Bar"
| "Clock Menu"
| "Dashboard Menu"
| "Power Menu"
| "Notifications"
| "OSD"
| "Custom Modules";
type Page =
| 'General'
| 'Bar'
| 'Clock Menu'
| 'Dashboard Menu'
| 'Power Menu'
| 'Notifications'
| 'OSD'
| 'Custom Modules';
const CurrentPage = Variable<Page>("General");
const CurrentPage = Variable<Page>('General');
const pagerMap: Page[] = [
"General",
"Bar",
"Notifications",
"OSD",
"Power Menu",
"Clock Menu",
"Dashboard Menu",
"Custom Modules",
]
'General',
'Bar',
'Notifications',
'OSD',
'Power Menu',
'Clock Menu',
'Dashboard Menu',
'Custom Modules',
];
export const SettingsMenu = () => {
export const SettingsMenu = (): GBox => {
return Widget.Box({
vertical: true,
children: CurrentPage.bind("value").as(v => {
children: CurrentPage.bind('value').as((v) => {
return [
Widget.Box({
class_name: "option-pages-container",
hpack: "center",
class_name: 'option-pages-container',
hpack: 'center',
hexpand: true,
children: pagerMap.map((page) => {
return Widget.Button({
hpack: "center",
hpack: 'center',
class_name: `pager-button ${v === page ? 'active' : ''}`,
label: page,
on_primary_click: () => CurrentPage.value = page
})
})
on_primary_click: () => (CurrentPage.value = page),
});
}),
}),
Widget.Stack({
vexpand: true,
class_name: "themes-menu-stack",
class_name: 'themes-menu-stack',
children: {
"General": BarGeneral(),
"Bar": BarSettings(),
"Notifications": NotificationSettings(),
"OSD": OSDSettings(),
"Clock Menu": ClockMenuSettings(),
"Dashboard Menu": DashboardMenuSettings(),
"Custom Modules": CustomModuleSettings(),
"Power Menu": PowerMenuSettings(),
General: BarGeneral(),
Bar: BarSettings(),
Notifications: NotificationSettings(),
OSD: OSDSettings(),
'Clock Menu': ClockMenuSettings(),
'Dashboard Menu': DashboardMenuSettings(),
'Custom Modules': CustomModuleSettings(),
'Power Menu': PowerMenuSettings(),
},
shown: CurrentPage.bind("value")
})
]
})
})
}
shown: CurrentPage.bind('value'),
}),
];
}),
});
};

50
widget/settings/pages/config/menus/clock.ts
View File

@@ -1,24 +1,46 @@
import { Option } from "widget/settings/shared/Option";
import { Header } from "widget/settings/shared/Header";
import { Option } from 'widget/settings/shared/Option';
import { Header } from 'widget/settings/shared/Header';
import options from "options";
import options from 'options';
import Scrollable from 'types/widgets/scrollable';
import { Attribute, Child } from 'lib/types/widget';
export const ClockMenuSettings = () => {
export const ClockMenuSettings = (): Scrollable<Child, Attribute> => {
return Widget.Scrollable({
vscroll: "automatic",
vscroll: 'automatic',
child: Widget.Box({
class_name: "bar-theme-page paged-container",
class_name: 'bar-theme-page paged-container',
vertical: true,
children: [
Header('Time'),
Option({ opt: options.menus.clock.time.military, title: 'Use 24hr time', type: 'boolean' }),
Header('Weather'),
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: 'May require AGS restart. https://weatherapi.com/', 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' }),
]
})
})
}
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: 'May require AGS restart. https://weatherapi.com/',
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',
}),
],
}),
});
};

236
widget/settings/pages/config/menus/dashboard.ts
View File

@@ -1,13 +1,15 @@
import { Option } from "widget/settings/shared/Option";
import { Header } from "widget/settings/shared/Header";
import { Option } from 'widget/settings/shared/Option';
import { Header } from 'widget/settings/shared/Header';
import options from "options";
import options from 'options';
import Scrollable from 'types/widgets/scrollable';
import { Attribute, Child } from 'lib/types/widget';
export const DashboardMenuSettings = () => {
export const DashboardMenuSettings = (): Scrollable<Child, Attribute> => {
return Widget.Scrollable({
class_name: "bar-theme-page paged-container",
vscroll: "always",
hscroll: "automatic",
class_name: 'bar-theme-page paged-container',
vscroll: 'always',
hscroll: 'automatic',
vexpand: true,
overlayScrolling: true,
child: Widget.Box({
@@ -15,53 +17,195 @@ export const DashboardMenuSettings = () => {
children: [
Header('Power Menu'),
Option({ opt: options.menus.dashboard.powermenu.avatar.image, title: 'Profile Image', type: 'img' }),
Option({ opt: options.menus.dashboard.powermenu.avatar.name, title: 'Profile Name', subtitle: 'Use \'system\' to automatically set 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.avatar.name,
title: 'Profile Name',
subtitle: "Use 'system' to automatically set 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.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('Resource Usage Metrics'),
Option({ opt: options.menus.dashboard.stats.enable_gpu, title: 'Track GPU', subtitle: 'NOTE: This is currently only available for NVidia GPUs and requires \'python-gpustat\'.', type: 'boolean' }),
Option({
opt: options.menus.dashboard.stats.enable_gpu,
title: 'Track GPU',
subtitle: "NOTE: This is currently only available for NVidia GPUs and requires 'python-gpustat'.",
type: 'boolean',
}),
Header('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' }),
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' }),
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',
}),
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('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' }),
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' }),
]
})
})
}
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',
}),
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',
}),
],
}),
});
};

24
widget/settings/pages/config/menus/power.ts
View File

@@ -1,13 +1,15 @@
import { Option } from "widget/settings/shared/Option";
import { Header } from "widget/settings/shared/Header";
import { Option } from 'widget/settings/shared/Option';
import { Header } from 'widget/settings/shared/Header';
import options from "options";
import options from 'options';
import { Attribute, Child } from 'lib/types/widget';
import Scrollable from 'types/widgets/scrollable';
export const PowerMenuSettings = () => {
export const PowerMenuSettings = (): Scrollable<Child, Attribute> => {
return Widget.Scrollable({
class_name: "bar-theme-page paged-container",
vscroll: "always",
hscroll: "automatic",
class_name: 'bar-theme-page paged-container',
vscroll: 'always',
hscroll: 'automatic',
vexpand: true,
overlayScrolling: true,
child: Widget.Box({
@@ -20,7 +22,7 @@ export const PowerMenuSettings = () => {
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' }),
]
})
})
}
],
}),
});
};

94
widget/settings/pages/config/notifications/index.ts
View File

@@ -1,95 +1,95 @@
import { Option } from "widget/settings/shared/Option";
import { Header } from "widget/settings/shared/Header";
import { Option } from 'widget/settings/shared/Option';
import { Header } from 'widget/settings/shared/Header';
import options from "options";
import Scrollable from "types/widgets/scrollable";
import Gtk from "types/@girs/gtk-3.0/gtk-3.0";
import options from 'options';
import Scrollable from 'types/widgets/scrollable';
import { Attribute, Child } from 'lib/types/widget';
export const NotificationSettings = (): Scrollable<Gtk.Widget, Gtk.Widget> => {
export const NotificationSettings = (): Scrollable<Child, Attribute> => {
return Widget.Scrollable({
vscroll: "automatic",
vscroll: 'automatic',
child: Widget.Box({
class_name: "bar-theme-page paged-container",
class_name: 'bar-theme-page paged-container',
vertical: true,
children: [
Header("Notification Settings"),
Header('Notification Settings'),
Option({
opt: options.notifications.ignore,
title: "Ignored Applications",
subtitle: "Applications to ignore.\n" +
"Wiki: https://hyprpanel.com/configuration/notifications.html#ignored-applications",
subtitleLink: "https://hyprpanel.com/configuration/notifications.html#ignored-applications",
type: "object",
enums: ["top left", "top", "top right", "right", "bottom right", "bottom", "bottom left", "left"],
title: 'Ignored Applications',
subtitle:
'Applications to ignore.\n' +
'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"],
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",
title: 'Border Radius',
type: 'string',
}),
Option({
opt: options.notifications.monitor,
title: "Monitor",
subtitle: "The ID of the monitor on which to display the notification",
type: "number",
title: 'Monitor',
subtitle: 'The ID of the monitor on which to display the notification',
type: 'number',
}),
Option({
opt: options.notifications.active_monitor,
title: "Follow Cursor",
subtitle: "The notification will follow the monitor of your cursor",
type: "boolean",
title: 'Follow Cursor',
subtitle: 'The notification will follow the monitor of your cursor',
type: 'boolean',
}),
Option({
opt: options.notifications.timeout,
title: "Notification Timeout",
subtitle: "How long notification popups will last (in milliseconds).",
type: "number",
title: 'Notification Timeout',
subtitle: 'How long notification popups will last (in milliseconds).',
type: 'number',
}),
Option({
opt: options.notifications.cache_actions,
title: "Preserve Actions",
subtitle: "This will persist the action buttons of a notification after rebooting.",
type: "boolean",
title: 'Preserve Actions',
subtitle: 'This will persist the action buttons of a notification after rebooting.',
type: 'boolean',
}),
Header("Notification Menu Settings"),
Header('Notification Menu Settings'),
Option({
opt: options.theme.bar.menus.menu.notifications.height,
title: "Notification Menu Height",
type: "string",
title: 'Notification Menu Height',
type: 'string',
}),
Option({
opt: options.notifications.displayedTotal,
title: "Displayed Total",
subtitle: "How many notifications to show in the menu at once.\n" +
"Newer notifications will display towards the top.",
type: "number",
title: 'Displayed Total',
subtitle:
'How many notifications to show in the menu at once.\n' +
'Newer notifications will display towards the top.',
type: 'number',
min: 1,
}),
Option({
opt: options.theme.bar.menus.menu.notifications.pager.show,
title: "Show Pager",
subtitle: "Shows the pagination footer at the bottom of the menu.",
type: "boolean",
title: 'Show Pager',
subtitle: 'Shows the pagination footer at the bottom of the menu.',
type: 'boolean',
}),
Option({
opt: options.theme.bar.menus.menu.notifications.scrollbar.width,
title: "Scrollbar Width",
type: "string",
title: 'Scrollbar Width',
type: 'string',
}),
Option({
opt: options.theme.bar.menus.menu.notifications.scrollbar.radius,
title: "Scrollbar Radius",
type: "string",
title: 'Scrollbar Radius',
type: 'string',
}),
],
}),
});
};

81
widget/settings/pages/config/osd/index.ts
View File

@@ -1,26 +1,71 @@
import { Option } from "widget/settings/shared/Option";
import { Header } from "widget/settings/shared/Header";
import { Option } from 'widget/settings/shared/Option';
import { Header } from 'widget/settings/shared/Header';
import options from "options";
import options from 'options';
import Scrollable from 'types/widgets/scrollable';
import { Attribute, Child } from 'lib/types/widget';
export const OSDSettings = () => {
export const OSDSettings = (): Scrollable<Child, Attribute> => {
return Widget.Scrollable({
vscroll: "automatic",
vscroll: 'automatic',
child: Widget.Box({
class_name: "bar-theme-page paged-container",
class_name: 'bar-theme-page paged-container',
vertical: true,
children: [
Header('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 the OSD on the screen', type: 'enum', enums: ["top left", "top", "top right", "right", "bottom right", "bottom", "bottom left", "left"] }),
Option({ opt: options.theme.osd.monitor, title: 'Monitor', subtitle: 'The ID of the monitor on which to display the OSD', type: 'number' }),
Option({ opt: options.theme.osd.active_monitor, title: 'Follow Cursor', subtitle: 'The OSD will follow the monitor of your cursor', type: 'boolean' }),
Option({ opt: options.theme.osd.radius, title: 'Radius', subtitle: 'Radius of the on-screen-display that indicates volume/brightness change', type: 'string' }),
Option({ opt: options.theme.osd.margins, title: 'Margins', subtitle: 'Margins in the following 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, instead of previous device volume', 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 the OSD on the screen',
type: 'enum',
enums: ['top left', 'top', 'top right', 'right', 'bottom right', 'bottom', 'bottom left', 'left'],
}),
Option({
opt: options.theme.osd.monitor,
title: 'Monitor',
subtitle: 'The ID of the monitor on which to display the OSD',
type: 'number',
}),
Option({
opt: options.theme.osd.active_monitor,
title: 'Follow Cursor',
subtitle: 'The OSD will follow the monitor of your cursor',
type: 'boolean',
}),
Option({
opt: options.theme.osd.radius,
title: 'Radius',
subtitle: 'Radius of the on-screen-display that indicates volume/brightness change',
type: 'string',
}),
Option({
opt: options.theme.osd.margins,
title: 'Margins',
subtitle: 'Margins in the following 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, instead of previous device volume',
type: 'boolean',
}),
],
}),
});
};

161
widget/settings/pages/theme/bar/index.ts
View File

@@ -1,25 +1,65 @@
import { Option } from "widget/settings/shared/Option";
import { Header } from "widget/settings/shared/Header";
import { Option } from 'widget/settings/shared/Option';
import { Header } from 'widget/settings/shared/Header';
import options from "options";
import options from 'options';
import Scrollable from 'types/widgets/scrollable';
import { Attribute, Child } from 'lib/types/widget';
export const BarTheme = () => {
export const BarTheme = (): Scrollable<Child, Attribute> => {
return Widget.Scrollable({
vscroll: "always",
hscroll: "automatic",
class_name: "bar-theme-page paged-container",
vscroll: 'always',
hscroll: 'automatic',
class_name: 'bar-theme-page paged-container',
child: Widget.Box({
vertical: true,
children: [
Header('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.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.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.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.hover, title: 'Button Hover', type: 'color' }),
Option({ opt: options.theme.bar.buttons.text, title: 'Button Text', type: 'color' }),
@@ -27,8 +67,9 @@ export const BarTheme = () => {
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'
subtitle:
"Applies a background color to the icon section of the button.\nRequires 'split' button styling.",
type: 'color',
}),
Header('Dashboard Button'),
@@ -38,12 +79,36 @@ export const BarTheme = () => {
Header('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.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',
}),
Header('Window Title'),
Option({ opt: options.theme.bar.buttons.windowtitle.background, title: 'Background', type: 'color' }),
@@ -53,8 +118,9 @@ export const BarTheme = () => {
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'
subtitle:
"Applies a background color to the icon section of the button.\nRequires 'split' button styling.",
type: 'color',
}),
Header('Media'),
@@ -65,8 +131,9 @@ export const BarTheme = () => {
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'
subtitle:
"Applies a background color to the icon section of the button.\nRequires 'split' button styling.",
type: 'color',
}),
Header('Volume'),
@@ -77,8 +144,9 @@ export const BarTheme = () => {
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'
subtitle:
"Applies a background color to the icon section of the button.\nRequires 'split' button styling.",
type: 'color',
}),
Header('Network'),
@@ -89,8 +157,9 @@ export const BarTheme = () => {
Option({
opt: options.theme.bar.buttons.network.icon_background,
title: 'Button Icon Background',
subtitle: 'Applies a background color to the icon section of the button.\nRequires \'split\' button styling.',
type: 'color'
subtitle:
"Applies a background color to the icon section of the button.\nRequires 'split' button styling.",
type: 'color',
}),
Header('Bluetooth'),
@@ -101,8 +170,9 @@ export const BarTheme = () => {
Option({
opt: options.theme.bar.buttons.bluetooth.icon_background,
title: 'Button Icon Background',
subtitle: 'Applies a background color to the icon section of the button.\nRequires \'split\' button styling.',
type: 'color'
subtitle:
"Applies a background color to the icon section of the button.\nRequires 'split' button styling.",
type: 'color',
}),
Header('System Tray'),
@@ -117,8 +187,9 @@ export const BarTheme = () => {
Option({
opt: options.theme.bar.buttons.battery.icon_background,
title: 'Button Icon Background',
subtitle: 'Applies a background color to the icon section of the button.\nRequires \'split\' button styling.',
type: 'color'
subtitle:
"Applies a background color to the icon section of the button.\nRequires 'split' button styling.",
type: 'color',
}),
Header('Clock'),
@@ -129,22 +200,28 @@ export const BarTheme = () => {
Option({
opt: options.theme.bar.buttons.clock.icon_background,
title: 'Button Icon Background',
subtitle: 'Applies a background color to the icon section of the button.\nRequires \'split\' button styling.',
type: 'color'
subtitle:
"Applies a background color to the icon section of the button.\nRequires 'split' button styling.",
type: 'color',
}),
Header('Notifications'),
Option({ opt: options.theme.bar.buttons.notifications.background, title: 'Background', type: 'color' }),
Option({ opt: options.theme.bar.buttons.notifications.hover, title: 'Hover', type: 'color' }),
Option({ opt: options.theme.bar.buttons.notifications.total, title: 'Notification Count', type: 'color' }),
Option({
opt: options.theme.bar.buttons.notifications.total,
title: 'Notification Count',
type: 'color',
}),
Option({ opt: options.theme.bar.buttons.notifications.icon, title: 'Icon', type: 'color' }),
Option({
opt: options.theme.bar.buttons.notifications.icon_background,
title: 'Button Icon Background',
subtitle: 'Applies a background color to the icon section of the button.\nRequires \'split\' button styling.',
type: 'color'
subtitle:
"Applies a background color to the icon section of the button.\nRequires 'split' button styling.",
type: 'color',
}),
]
})
})
}
],
}),
});
};

169
widget/settings/pages/theme/index.ts
View File

@@ -1,108 +1,111 @@
import { BarTheme } from "./bar/index";
import { NotificationsTheme } from "./notifications/index";
import { BatteryMenuTheme } from "./menus/battery";
import { BluetoothMenuTheme } from "./menus/bluetooth";
import { ClockMenuTheme } from "./menus/clock";
import { DashboardMenuTheme } from "./menus/dashboard";
import { MenuTheme } from "./menus/index";
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 { OsdTheme } from "./osd/index";
import { Matugen } from "./menus/matugen";
import { CustomModuleTheme } from "customModules/theme";
import { PowerMenuTheme } from "./menus/power";
import { BarTheme } from './bar/index';
import { NotificationsTheme } from './notifications/index';
import { BatteryMenuTheme } from './menus/battery';
import { BluetoothMenuTheme } from './menus/bluetooth';
import { ClockMenuTheme } from './menus/clock';
import { DashboardMenuTheme } from './menus/dashboard';
import { MenuTheme } from './menus/index';
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 { OsdTheme } from './osd/index';
import { Matugen } from './menus/matugen';
import { CustomModuleTheme } from 'customModules/theme';
import { PowerMenuTheme } from './menus/power';
import { GBox } from 'lib/types/widget';
type Page = "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";
type Page =
| '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';
const CurrentPage = Variable<Page>("General Settings");
const CurrentPage = Variable<Page>('General Settings');
const pagerMap: Page[] = [
"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",
]
'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',
];
export const ThemesMenu = () => {
export const ThemesMenu = (): GBox => {
return Widget.Box({
vertical: true,
children: CurrentPage.bind("value").as(v => {
children: CurrentPage.bind('value').as((v) => {
return [
Widget.Box({
class_name: "option-pages-container",
hpack: "center",
class_name: 'option-pages-container',
hpack: 'center',
hexpand: true,
vertical: true,
children: [0, 1, 2].map(section => {
children: [0, 1, 2].map((section) => {
return Widget.Box({
children: pagerMap.map((page, index) => {
if (index >= section * 6 && index < section * 6 + 6) {
return Widget.Button({
hpack: "center",
hpack: 'center',
xalign: 0,
class_name: `pager-button ${v === page ? 'active' : ''}`,
label: page,
on_primary_click: () => CurrentPage.value = page
})
on_primary_click: () => (CurrentPage.value = page),
});
}
return Widget.Box();
})
})
})
}),
});
}),
}),
Widget.Stack({
vexpand: true,
class_name: "themes-menu-stack",
class_name: 'themes-menu-stack',
children: {
"General Settings": MenuTheme(),
"Matugen Settings": Matugen(),
"Bar": BarTheme(),
"Notifications": NotificationsTheme(),
"OSD": OsdTheme(),
"Battery Menu": BatteryMenuTheme(),
"Bluetooth Menu": BluetoothMenuTheme(),
"Clock Menu": ClockMenuTheme(),
"Dashboard Menu": DashboardMenuTheme(),
"Media Menu": MediaMenuTheme(),
"Network Menu": NetworkMenuTheme(),
"Notifications Menu": NotificationsMenuTheme(),
"System Tray": SystrayMenuTheme(),
"Volume Menu": VolumeMenuTheme(),
"Power Menu": PowerMenuTheme(),
"Custom Modules": CustomModuleTheme(),
'General Settings': MenuTheme(),
'Matugen Settings': Matugen(),
Bar: BarTheme(),
Notifications: NotificationsTheme(),
OSD: OsdTheme(),
'Battery Menu': BatteryMenuTheme(),
'Bluetooth Menu': BluetoothMenuTheme(),
'Clock Menu': ClockMenuTheme(),
'Dashboard Menu': DashboardMenuTheme(),
'Media Menu': MediaMenuTheme(),
'Network Menu': NetworkMenuTheme(),
'Notifications Menu': NotificationsMenuTheme(),
'System Tray': SystrayMenuTheme(),
'Volume Menu': VolumeMenuTheme(),
'Power Menu': PowerMenuTheme(),
'Custom Modules': CustomModuleTheme(),
},
shown: CurrentPage.bind("value"),
})
]
})
})
}
shown: CurrentPage.bind('value'),
}),
];
}),
});
};

54
widget/settings/pages/theme/menus/battery.ts
View File

@@ -1,13 +1,15 @@
import { Option } from "widget/settings/shared/Option";
import { Header } from "widget/settings/shared/Header";
import { Option } from 'widget/settings/shared/Option';
import { Header } from 'widget/settings/shared/Header';
import options from "options";
import options from 'options';
import Scrollable from 'types/widgets/scrollable';
import { Attribute, Child } from 'lib/types/widget';
export const BatteryMenuTheme = () => {
export const BatteryMenuTheme = (): Scrollable<Child, Attribute> => {
return Widget.Scrollable({
vscroll: "automatic",
hscroll: "automatic",
class_name: "menu-theme-page battery paged-container",
vscroll: 'automatic',
hscroll: 'automatic',
class_name: 'menu-theme-page battery paged-container',
vexpand: true,
child: Widget.Box({
vertical: true,
@@ -19,7 +21,11 @@ export const BatteryMenuTheme = () => {
Option({ opt: options.theme.bar.menus.menu.battery.card.color, title: 'Card', type: 'color' }),
Header('Background'),
Option({ opt: options.theme.bar.menus.menu.battery.background.color, title: 'Background', type: 'color' }),
Option({
opt: options.theme.bar.menus.menu.battery.background.color,
title: 'Background',
type: 'color',
}),
Header('Border'),
Option({ opt: options.theme.bar.menus.menu.battery.border.color, title: 'Border', type: 'color' }),
@@ -28,8 +34,16 @@ export const BatteryMenuTheme = () => {
Option({ opt: options.theme.bar.menus.menu.battery.label.color, title: 'Label', type: 'color' }),
Header('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' }),
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',
}),
Header('Icons'),
Option({ opt: options.theme.bar.menus.menu.battery.icons.active, title: 'Active', type: 'color' }),
@@ -37,10 +51,18 @@ export const BatteryMenuTheme = () => {
Header('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.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' }),
]
})
})
}
],
}),
});
};

72
widget/settings/pages/theme/menus/bluetooth.ts
View File

@@ -1,13 +1,15 @@
import { Option } from "widget/settings/shared/Option";
import { Header } from "widget/settings/shared/Header";
import { Option } from 'widget/settings/shared/Option';
import { Header } from 'widget/settings/shared/Header';
import options from "options";
import options from 'options';
import Scrollable from 'types/widgets/scrollable';
import { Attribute, Child } from 'lib/types/widget';
export const BluetoothMenuTheme = () => {
export const BluetoothMenuTheme = (): Scrollable<Child, Attribute> => {
return Widget.Scrollable({
vscroll: "automatic",
hscroll: "automatic",
class_name: "menu-theme-page bluetooth paged-container",
vscroll: 'automatic',
hscroll: 'automatic',
class_name: 'menu-theme-page bluetooth paged-container',
vexpand: true,
child: Widget.Box({
vertical: true,
@@ -19,7 +21,11 @@ export const BluetoothMenuTheme = () => {
Option({ opt: options.theme.bar.menus.menu.bluetooth.card.color, title: 'Card', type: 'color' }),
Header('Background'),
Option({ opt: options.theme.bar.menus.menu.bluetooth.background.color, title: 'Background', type: 'color' }),
Option({
opt: options.theme.bar.menus.menu.bluetooth.background.color,
title: 'Background',
type: 'color',
}),
Header('Border'),
Option({ opt: options.theme.bar.menus.menu.bluetooth.border.color, title: 'Border', type: 'color' }),
@@ -28,28 +34,56 @@ export const BluetoothMenuTheme = () => {
Option({ opt: options.theme.bar.menus.menu.bluetooth.label.color, title: 'Label', type: 'color' }),
Header('Status'),
Option({ opt: options.theme.bar.menus.menu.bluetooth.status, title: 'Connection Status', type: 'color' }),
Option({
opt: options.theme.bar.menus.menu.bluetooth.status,
title: 'Connection Status',
type: 'color',
}),
Header('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' }),
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',
}),
Header('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' }),
Header('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' }),
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',
}),
Header('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.disabled,
title: 'Disabled',
type: 'color',
}),
Option({ opt: options.theme.bar.menus.menu.bluetooth.switch.puck, title: 'Puck', type: 'color' }),
Header('Switch Divider'),
Option({ opt: options.theme.bar.menus.menu.bluetooth.switch_divider, title: 'Switch Divider', type: 'color' }),
]
})
})
}
Option({
opt: options.theme.bar.menus.menu.bluetooth.switch_divider,
title: 'Switch Divider',
type: 'color',
}),
],
}),
});
};

133
widget/settings/pages/theme/menus/clock.ts
View File

@@ -1,13 +1,15 @@
import { Option } from "widget/settings/shared/Option";
import { Header } from "widget/settings/shared/Header";
import { Option } from 'widget/settings/shared/Option';
import { Header } from 'widget/settings/shared/Header';
import options from "options";
import options from 'options';
import Scrollable from 'types/widgets/scrollable';
import { Attribute, Child } from 'lib/types/widget';
export const ClockMenuTheme = () => {
export const ClockMenuTheme = (): Scrollable<Child, Attribute> => {
return Widget.Scrollable({
vscroll: "automatic",
hscroll: "automatic",
class_name: "menu-theme-page clock paged-container",
vscroll: 'automatic',
hscroll: 'automatic',
class_name: 'menu-theme-page clock paged-container',
vexpand: true,
child: Widget.Box({
vertical: true,
@@ -19,37 +21,110 @@ export const ClockMenuTheme = () => {
Option({ opt: options.theme.bar.menus.menu.clock.card.color, title: 'Card', type: 'color' }),
Header('Background'),
Option({ opt: options.theme.bar.menus.menu.clock.background.color, title: 'Background', type: 'color' }),
Option({
opt: options.theme.bar.menus.menu.clock.background.color,
title: 'Background',
type: 'color',
}),
Header('Border'),
Option({ opt: options.theme.bar.menus.menu.clock.border.color, title: 'Border', type: 'color' }),
Header('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' }),
Option({
opt: options.theme.bar.menus.menu.clock.time.timeperiod,
title: 'Period',
subtitle: 'AM/PM',
type: 'color',
}),
Header('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.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.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' }),
Option({
opt: options.theme.bar.menus.menu.clock.calendar.contextdays,
title: 'Trailing/Leading Days',
type: 'color',
}),
Header('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' }),
]
})
})
}
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',
}),
],
}),
});
};

296
widget/settings/pages/theme/menus/dashboard.ts
View File

@@ -1,13 +1,15 @@
import { Option } from "widget/settings/shared/Option";
import { Header } from "widget/settings/shared/Header";
import { Option } from 'widget/settings/shared/Option';
import { Header } from 'widget/settings/shared/Header';
import options from "options";
import options from 'options';
import Scrollable from 'types/widgets/scrollable';
import { Attribute, Child } from 'lib/types/widget';
export const DashboardMenuTheme = () => {
export const DashboardMenuTheme = (): Scrollable<Child, Attribute> => {
return Widget.Scrollable({
vscroll: "always",
hscroll: "automatic",
class_name: "menu-theme-page dashboard paged-container",
vscroll: 'always',
hscroll: 'automatic',
class_name: 'menu-theme-page dashboard paged-container',
vexpand: true,
child: Widget.Box({
vertical: true,
@@ -16,69 +18,251 @@ export const DashboardMenuTheme = () => {
Option({ opt: options.theme.bar.menus.menu.dashboard.card.color, title: 'Card', type: 'color' }),
Header('Background'),
Option({ opt: options.theme.bar.menus.menu.dashboard.background.color, title: 'Background', type: 'color' }),
Option({
opt: options.theme.bar.menus.menu.dashboard.background.color,
title: 'Background',
type: 'color',
}),
Header('Border'),
Option({ opt: options.theme.bar.menus.menu.dashboard.border.color, title: 'Border', type: 'color' }),
Header('Profile'),
Option({ opt: options.theme.bar.menus.menu.dashboard.profile.name, title: 'Profile Name', type: 'color' }),
Option({
opt: options.theme.bar.menus.menu.dashboard.profile.name,
title: 'Profile Name',
type: 'color',
}),
Header('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.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' }),
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',
}),
Header('Shortcuts'),
Option({ opt: options.theme.bar.menus.menu.dashboard.shortcuts.background, title: 'Primary', type: 'color' }),
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' }),
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',
}),
Header('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' }),
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',
}),
Header('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' }),
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',
}),
Header('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' }),
]
})
})
}
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',
}),
],
}),
});
};

86
widget/settings/pages/theme/menus/index.ts
View File

@@ -1,13 +1,15 @@
import { Option } from "widget/settings/shared/Option";
import { Header } from "widget/settings/shared/Header";
import { Option } from 'widget/settings/shared/Option';
import { Header } from 'widget/settings/shared/Header';
import options from "options";
import options from 'options';
import Scrollable from 'types/widgets/scrollable';
import { Attribute, Child } from 'lib/types/widget';
export const MenuTheme = () => {
export const MenuTheme = (): Scrollable<Child, Attribute> => {
return Widget.Scrollable({
vscroll: "automatic",
hscroll: "automatic",
class_name: "menu-theme-page paged-container",
vscroll: 'automatic',
hscroll: 'automatic',
class_name: 'menu-theme-page paged-container',
vexpand: true,
child: Widget.Box({
vertical: true,
@@ -20,15 +22,42 @@ export const MenuTheme = () => {
type: 'config_import',
exportData: {
filePath: OPTIONS,
themeOnly: true
}
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: options.wallpaper.image.bind('value'),
type: 'wallpaper',
}),
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: options.wallpaper.image.bind("value"), 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.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' }),
@@ -46,7 +75,13 @@ export const MenuTheme = () => {
Option({ opt: options.theme.bar.menus.popover.background, title: 'Background', type: 'color' }),
Header('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.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' }),
Header('Icons'),
@@ -59,7 +94,11 @@ export const MenuTheme = () => {
Option({ opt: options.theme.bar.menus.switch.puck, title: 'Puck', type: 'color' }),
Header('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.background,
title: 'Background',
type: 'color',
}),
Option({ opt: options.theme.bar.menus.check_radio_button.active, title: 'Active', type: 'color' }),
Header('Buttons'),
@@ -79,7 +118,11 @@ export const MenuTheme = () => {
Header('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.backgroundhover,
title: 'Background (Hover)',
type: 'color',
}),
Option({ opt: options.theme.bar.menus.slider.puck, title: 'Puck', type: 'color' }),
Header('Dropdown Menu'),
@@ -90,8 +133,7 @@ export const MenuTheme = () => {
Header('Tooltips'),
Option({ opt: options.theme.bar.menus.tooltip.background, title: 'Background', type: 'color' }),
Option({ opt: options.theme.bar.menus.tooltip.text, title: 'Text', type: 'color' }),
]
})
})
}
],
}),
});
};

84
widget/settings/pages/theme/menus/matugen.ts
View File

@@ -1,53 +1,71 @@
import { Option } from "widget/settings/shared/Option";
import { Header } from "widget/settings/shared/Header";
import { Option } from 'widget/settings/shared/Option';
import { Header } from 'widget/settings/shared/Header';
import options from "options";
import options from 'options';
import Scrollable from 'types/widgets/scrollable';
import { Attribute, Child } from 'lib/types/widget';
export const Matugen = () => {
export const Matugen = (): Scrollable<Child, Attribute> => {
return Widget.Scrollable({
vscroll: "automatic",
hscroll: "automatic",
class_name: "menu-theme-page paged-container",
vscroll: 'automatic',
hscroll: 'automatic',
class_name: 'menu-theme-page paged-container',
vexpand: true,
child: Widget.Box({
vertical: true,
children: [
Header('Matugen Settings'),
Option({ opt: options.theme.matugen, title: 'Enable Matugen', subtitle: 'WARNING: THIS WILL REPLACE YOUR CURRENT COLOR SCHEME!!!', 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,
title: 'Enable Matugen',
subtitle: 'WARNING: THIS WILL REPLACE YOUR CURRENT COLOR SCHEME!!!',
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"
]
'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",
]
'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' }),
]
})
})
}
Option({
opt: options.theme.matugen_settings.contrast,
title: 'Contrast',
subtitle: 'Range: -1 to 1 (Default: 0)',
type: 'float',
}),
],
}),
});
};

77
widget/settings/pages/theme/menus/media.ts
View File

@@ -1,13 +1,15 @@
import { Option } from "widget/settings/shared/Option";
import { Header } from "widget/settings/shared/Header";
import { Option } from 'widget/settings/shared/Option';
import { Header } from 'widget/settings/shared/Header';
import options from "options";
import options from 'options';
import Scrollable from 'types/widgets/scrollable';
import { Attribute, Child } from 'lib/types/widget';
export const MediaMenuTheme = () => {
export const MediaMenuTheme = (): Scrollable<Child, Attribute> => {
return Widget.Scrollable({
vscroll: "automatic",
hscroll: "automatic",
class_name: "menu-theme-page media paged-container",
vscroll: 'automatic',
hscroll: 'automatic',
class_name: 'menu-theme-page media paged-container',
vexpand: true,
child: Widget.Box({
vertical: true,
@@ -18,27 +20,64 @@ export const MediaMenuTheme = () => {
Option({ opt: options.theme.bar.menus.menu.media.album, title: 'Album', type: 'color' }),
Header('Background'),
Option({ opt: options.theme.bar.menus.menu.media.background.color, title: 'Background', type: 'color' }),
Option({
opt: options.theme.bar.menus.menu.media.background.color,
title: 'Background',
type: 'color',
}),
Header('Border'),
Option({ opt: options.theme.bar.menus.menu.media.border.color, title: 'Border', type: 'color' }),
Header('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 }),
Option({
opt: options.theme.bar.menus.menu.media.card.tint,
title: 'Tint',
type: 'number',
increment: 5,
min: 0,
max: 100,
}),
Header('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.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' }),
Header('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: 'Backround (Hover)', type: 'color' }),
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: 'Backround (Hover)',
type: 'color',
}),
Option({ opt: options.theme.bar.menus.menu.media.slider.puck, title: 'Puck', type: 'color' }),
]
})
})
}
],
}),
});
};

60
widget/settings/pages/theme/menus/network.ts
View File

@@ -1,13 +1,15 @@
import { Option } from "widget/settings/shared/Option";
import { Header } from "widget/settings/shared/Header";
import { Option } from 'widget/settings/shared/Option';
import { Header } from 'widget/settings/shared/Header';
import options from "options";
import options from 'options';
import Scrollable from 'types/widgets/scrollable';
import { Attribute, Child } from 'lib/types/widget';
export const NetworkMenuTheme = () => {
export const NetworkMenuTheme = (): Scrollable<Child, Attribute> => {
return Widget.Scrollable({
vscroll: "automatic",
hscroll: "automatic",
class_name: "menu-theme-page network paged-container",
vscroll: 'automatic',
hscroll: 'automatic',
class_name: 'menu-theme-page network paged-container',
vexpand: true,
child: Widget.Box({
vertical: true,
@@ -19,7 +21,11 @@ export const NetworkMenuTheme = () => {
Option({ opt: options.theme.bar.menus.menu.network.card.color, title: 'Card', type: 'color' }),
Header('Background'),
Option({ opt: options.theme.bar.menus.menu.network.background.color, title: 'Background', type: 'color' }),
Option({
opt: options.theme.bar.menus.menu.network.background.color,
title: 'Background',
type: 'color',
}),
Header('Border'),
Option({ opt: options.theme.bar.menus.menu.network.border.color, title: 'Border', type: 'color' }),
@@ -28,20 +34,40 @@ export const NetworkMenuTheme = () => {
Option({ opt: options.theme.bar.menus.menu.network.label.color, title: 'Label', type: 'color' }),
Header('Status'),
Option({ opt: options.theme.bar.menus.menu.network.status.color, title: 'Connection Status', type: 'color' }),
Option({
opt: options.theme.bar.menus.menu.network.status.color,
title: 'Connection Status',
type: 'color',
}),
Header('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' }),
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',
}),
Header('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' }),
Header('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' }),
]
})
})
}
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',
}),
],
}),
});
};

84
widget/settings/pages/theme/menus/notifications.ts
View File

@@ -1,13 +1,15 @@
import { Option } from "widget/settings/shared/Option";
import { Header } from "widget/settings/shared/Header";
import { Option } from 'widget/settings/shared/Option';
import { Header } from 'widget/settings/shared/Header';
import options from "options";
import options from 'options';
import Scrollable from 'types/widgets/scrollable';
import { Attribute, Child } from 'lib/types/widget';
export const NotificationsMenuTheme = () => {
export const NotificationsMenuTheme = (): Scrollable<Child, Attribute> => {
return Widget.Scrollable({
vscroll: "automatic",
hscroll: "automatic",
class_name: "menu-theme-page notifications paged-container",
vscroll: 'automatic',
hscroll: 'automatic',
class_name: 'menu-theme-page notifications paged-container',
vexpand: true,
child: Widget.Box({
vertical: true,
@@ -15,25 +17,65 @@ export const NotificationsMenuTheme = () => {
Header('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.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' }),
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',
}),
Header('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.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' }),
Header('Scrollbar'),
Option({ opt: options.theme.bar.menus.menu.notifications.scrollbar.color, title: 'Scrollbar Color', type: 'color' }),
Option({
opt: options.theme.bar.menus.menu.notifications.scrollbar.color,
title: 'Scrollbar Color',
type: 'color',
}),
Header('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' }),
]
})
})
}
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',
}),
],
}),
});
};

102
widget/settings/pages/theme/menus/power.ts
View File

@@ -1,47 +1,101 @@
import { Option } from "widget/settings/shared/Option";
import { Header } from "widget/settings/shared/Header";
import { Option } from 'widget/settings/shared/Option';
import { Header } from 'widget/settings/shared/Header';
import options from "options";
import options from 'options';
import Scrollable from 'types/widgets/scrollable';
import { Attribute, Child } from 'lib/types/widget';
export const PowerMenuTheme = () => {
export const PowerMenuTheme = (): Scrollable<Child, Attribute> => {
return Widget.Scrollable({
vscroll: "automatic",
hscroll: "automatic",
class_name: "menu-theme-page power paged-container",
vscroll: 'automatic',
hscroll: 'automatic',
class_name: 'menu-theme-page power paged-container',
vexpand: true,
child: Widget.Box({
vertical: true,
children: [
Header('Background'),
Option({ opt: options.theme.bar.menus.menu.power.background.color, title: 'Background', type: 'color' }),
Option({
opt: options.theme.bar.menus.menu.power.background.color,
title: 'Background',
type: 'color',
}),
Header('Border'),
Option({ opt: options.theme.bar.menus.menu.power.border.color, title: 'Border', type: 'color' }),
Header('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.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' }),
Header('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.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' }),
Header('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.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' }),
Header('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.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' }),
]
})
})
}
],
}),
});
};

36
widget/settings/pages/theme/menus/systray.ts
View File

@@ -1,22 +1,32 @@
import { Option } from "widget/settings/shared/Option";
import { Header } from "widget/settings/shared/Header";
import { Option } from 'widget/settings/shared/Option';
import { Header } from 'widget/settings/shared/Header';
import options from "options";
import options from 'options';
import Scrollable from 'types/widgets/scrollable';
import { Attribute, Child } from 'lib/types/widget';
export const SystrayMenuTheme = () => {
export const SystrayMenuTheme = (): Scrollable<Child, Attribute> => {
return Widget.Scrollable({
vscroll: "automatic",
hscroll: "automatic",
class_name: "menu-theme-page systray paged-container",
vscroll: 'automatic',
hscroll: 'automatic',
class_name: 'menu-theme-page systray paged-container',
vexpand: true,
child: Widget.Box({
vertical: true,
children: [
Header('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.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' }),
]
})
})
}
Option({
opt: options.theme.bar.menus.menu.systray.dropdownmenu.divider,
title: 'Section Divider',
type: 'color',
}),
],
}),
});
};

85
widget/settings/pages/theme/menus/volume.ts
View File

@@ -1,13 +1,15 @@
import { Option } from "widget/settings/shared/Option";
import { Header } from "widget/settings/shared/Header";
import { Option } from 'widget/settings/shared/Option';
import { Header } from 'widget/settings/shared/Header';
import options from "options";
import options from 'options';
import Scrollable from 'types/widgets/scrollable';
import { Attribute, Child } from 'lib/types/widget';
export const VolumeMenuTheme = () => {
export const VolumeMenuTheme = (): Scrollable<Child, Attribute> => {
return Widget.Scrollable({
vscroll: "automatic",
hscroll: "automatic",
class_name: "menu-theme-page volume paged-container",
vscroll: 'automatic',
hscroll: 'automatic',
class_name: 'menu-theme-page volume paged-container',
vexpand: true,
child: Widget.Box({
vertical: true,
@@ -19,7 +21,11 @@ export const VolumeMenuTheme = () => {
Option({ opt: options.theme.bar.menus.menu.volume.card.color, title: 'Card', type: 'color' }),
Header('Background'),
Option({ opt: options.theme.bar.menus.menu.volume.background.color, title: 'Background', type: 'color' }),
Option({
opt: options.theme.bar.menus.menu.volume.background.color,
title: 'Background',
type: 'color',
}),
Header('Border'),
Option({ opt: options.theme.bar.menus.menu.volume.border.color, title: 'Border', type: 'color' }),
@@ -28,30 +34,65 @@ export const VolumeMenuTheme = () => {
Option({ opt: options.theme.bar.menus.menu.volume.label.color, title: 'Label', type: 'color' }),
Header('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.active,
title: 'Active/Hover',
type: 'color',
}),
Option({ opt: options.theme.bar.menus.menu.volume.listitems.passive, title: 'Passive', type: 'color' }),
Header('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' }),
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',
}),
Header('Icons'),
Option({ opt: options.theme.bar.menus.menu.volume.icons.active, title: 'Active', type: 'color' }),
Option({ opt: options.theme.bar.menus.menu.volume.icons.passive, title: 'Passive', type: 'color' }),
Header('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.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' }),
Header('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.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' }),
]
})
})
}
],
}),
});
};

65
widget/settings/pages/theme/notifications/index.ts
View File

@@ -1,30 +1,61 @@
import { Option } from "widget/settings/shared/Option";
import { Header } from "widget/settings/shared/Header";
import { Option } from 'widget/settings/shared/Option';
import { Header } from 'widget/settings/shared/Header';
import options from "options";
import options from 'options';
import Scrollable from 'types/widgets/scrollable';
import { Attribute, Child } from 'lib/types/widget';
export const NotificationsTheme = () => {
export const NotificationsTheme = (): Scrollable<Child, Attribute> => {
return Widget.Scrollable({
vscroll: "automatic",
hscroll: "automatic",
class_name: "notifications-theme-page paged-container",
vscroll: 'automatic',
hscroll: 'automatic',
class_name: 'notifications-theme-page paged-container',
vexpand: true,
child: Widget.Box({
vertical: true,
children: [
Header('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.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' }),
]
})
})
}
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',
}),
],
}),
});
};

40
widget/settings/pages/theme/osd/index.ts
View File

@@ -1,27 +1,41 @@
import { Option } from "widget/settings/shared/Option";
import { Header } from "widget/settings/shared/Header";
import { Option } from 'widget/settings/shared/Option';
import { Header } from 'widget/settings/shared/Header';
import options from "options";
import options from 'options';
import Scrollable from 'types/widgets/scrollable';
import { Attribute, Child } from 'lib/types/widget';
export const OsdTheme = () => {
export const OsdTheme = (): Scrollable<Child, Attribute> => {
return Widget.Scrollable({
vscroll: "automatic",
hscroll: "automatic",
class_name: "osd-theme-page paged-container",
vscroll: 'automatic',
hscroll: 'automatic',
class_name: 'osd-theme-page paged-container',
vexpand: true,
child: Widget.Box({
vertical: true,
children: [
Header('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.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_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' }),
]
})
})
}
],
}),
});
};

163
widget/settings/shared/FileChooser.ts
View File

@@ -1,43 +1,42 @@
import Gtk from "gi://Gtk?version=3.0";
import Gio from "gi://Gio"
import { bash, Notify } from "lib/utils";
import icons from "lib/icons"
import { Config } from "lib/types/filechooser";
import { hexColorPattern } from "globals/useTheme";
import { isHexColor } from "globals/variables";
import Gtk from 'gi://Gtk?version=3.0';
import Gio from 'gi://Gio';
import { bash, Notify } from 'lib/utils';
import icons from 'lib/icons';
import { Config } from 'lib/types/filechooser';
import { hexColorPattern } from 'globals/useTheme';
import { isHexColor } from 'globals/variables';
const whiteListedThemeProp = [
"theme.bar.buttons.style"
];
const whiteListedThemeProp = ['theme.bar.buttons.style'];
export const loadJsonFile = (filePath: string): Config | null => {
let file = Gio.File.new_for_path(filePath as string);
let [success, content] = file.load_contents(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;
}
let jsonString = new TextDecoder("utf-8").decode(content);
const jsonString = new TextDecoder('utf-8').decode(content);
return JSON.parse(jsonString);
}
};
export const saveConfigToFile = (config: object, filePath: string): void => {
let file = Gio.File.new_for_path(filePath);
let outputStream = file.replace(null, false, Gio.FileCreateFlags.NONE, null);
let dataOutputStream = new Gio.DataOutputStream({ base_stream: outputStream });
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 });
let jsonString = JSON.stringify(config, null, 2);
const jsonString = JSON.stringify(config, null, 2);
dataOutputStream.put_string(jsonString, null);
dataOutputStream.close(null);
}
};
export const filterConfigForThemeOnly = (config: Config): Config => {
let filteredConfig: Config = {};
const filteredConfig: Config = {};
for (let key in config) {
if (typeof config[key] === 'string' && hexColorPattern.test(config[key])) {
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];
@@ -47,12 +46,14 @@ export const filterConfigForThemeOnly = (config: Config): Config => {
};
export const filterConfigForNonTheme = (config: Config): Config => {
let filteredConfig: Config = {};
for (let key in config) {
const filteredConfig: Config = {};
for (const key in config) {
if (whiteListedThemeProp.includes(key)) {
continue;
}
if (!(typeof config[key] === 'string' && hexColorPattern.test(config[key]))) {
const value = config[key];
if (!(typeof value === 'string' && hexColorPattern.test(value))) {
filteredConfig[key] = config[key];
}
}
@@ -62,44 +63,45 @@ export const filterConfigForNonTheme = (config: Config): Config => {
export const saveFileDialog = (filePath: string, themeOnly: boolean): void => {
const original_file_path = filePath;
let file = Gio.File.new_for_path(original_file_path);
let [success, content] = file.load_contents(null);
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;
}
let jsonString = new TextDecoder("utf-8").decode(content);
let jsonObject = JSON.parse(jsonString);
const jsonString = new TextDecoder('utf-8').decode(content);
const jsonObject = JSON.parse(jsonString);
// Function to filter hex color pairs
const filterHexColorPairs = (jsonObject: Config) => {
let filteredObject: Config = {};
const filterHexColorPairs = (jsonObject: Config): Config => {
const filteredObject: Config = {};
for (let key in jsonObject) {
if (typeof jsonObject[key] === 'string' && isHexColor(jsonObject[key])) {
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;
};
// Function to filter out hex color pairs (keep only non-hex color value)
const filterOutHexColorPairs = (jsonObject: Config) => {
let filteredObject: Config = {};
const filterOutHexColorPairs = (jsonObject: Config): Config => {
const filteredObject: Config = {};
for (let key in jsonObject) {
for (const key in jsonObject) {
// do not add key-value pair if its in whiteListedThemeProp
if (whiteListedThemeProp.includes(key)) {
continue;
}
if (!(typeof jsonObject[key] === 'string' && isHexColor(jsonObject[key]))) {
const value = jsonObject[key];
if (!(typeof value === 'string' && isHexColor(value))) {
filteredObject[key] = jsonObject[key];
}
}
@@ -108,29 +110,29 @@ export const saveFileDialog = (filePath: string, themeOnly: boolean): void => {
};
// Filter the JSON object based on the themeOnly flag
let filteredJsonObject = themeOnly ? filterHexColorPairs(jsonObject) : filterOutHexColorPairs(jsonObject);
let filteredContent = JSON.stringify(filteredJsonObject, null, 2);
const filteredJsonObject = themeOnly ? filterHexColorPairs(jsonObject) : filterOutHexColorPairs(jsonObject);
const filteredContent = JSON.stringify(filteredJsonObject, null, 2);
let dialog = new Gtk.FileChooserDialog({
title: "Save File As",
const dialog = new Gtk.FileChooserDialog({
title: 'Save File As',
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.set_current_name(themeOnly ? 'hyprpanel_theme.json' : 'hyprpanel_config.json');
let response = dialog.run();
const response = dialog.run();
if (response === Gtk.ResponseType.ACCEPT) {
let file_path = dialog.get_filename();
const file_path = dialog.get_filename();
console.info(`Original file path: ${file_path}`);
const getIncrementedFilePath = (filePath: string) => {
const getIncrementedFilePath = (filePath: string): string => {
let increment = 1;
let baseName = filePath.replace(/(\.\w+)$/, '');
let match = filePath.match(/(\.\w+)$/);
let extension = match ? match[0] : '';
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);
@@ -144,14 +146,14 @@ export const saveFileDialog = (filePath: string, themeOnly: boolean): void => {
return newFilePath;
};
let finalFilePath = getIncrementedFilePath(file_path as string);
const finalFilePath = getIncrementedFilePath(file_path as string);
console.info(`File will be saved at: ${finalFilePath}`);
try {
let save_file = Gio.File.new_for_path(finalFilePath);
let outputStream = save_file.replace(null, false, Gio.FileCreateFlags.NONE, null);
let dataOutputStream = new Gio.DataOutputStream({
base_stream: outputStream
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);
@@ -159,49 +161,50 @@ export const saveFileDialog = (filePath: string, themeOnly: boolean): void => {
dataOutputStream.close(null);
Notify({
summary: "File Saved Successfully",
summary: 'File Saved Successfully',
body: `At ${finalFilePath}.`,
iconName: icons.ui.info,
timeout: 5000
timeout: 5000,
});
} catch (e: any) {
console.error("Failed to write to file:", e.message);
} catch (e) {
if (e instanceof Error) {
console.error('Failed to write to file:', e.message);
}
}
}
dialog.destroy();
}
};
export const importFiles = (themeOnly: boolean = false): void => {
let dialog = new Gtk.FileChooserDialog({
title: `Import ${themeOnly ? "Theme" : "Config"}`,
const dialog = new Gtk.FileChooserDialog({
title: `Import ${themeOnly ? 'Theme' : 'Config'}`,
action: Gtk.FileChooserAction.OPEN,
});
dialog.set_current_folder(`${App.configDir}/themes`)
dialog.set_current_folder(`${App.configDir}/themes`);
dialog.add_button(Gtk.STOCK_CANCEL, Gtk.ResponseType.CANCEL);
dialog.add_button(Gtk.STOCK_OPEN, Gtk.ResponseType.ACCEPT);
let response = dialog.run();
const response = dialog.run();
if (response === Gtk.ResponseType.CANCEL) {
dialog.destroy();
return;
}
if (response === Gtk.ResponseType.ACCEPT) {
let filePath: string | null = dialog.get_filename();
const filePath: string | null = dialog.get_filename();
if (filePath === null) {
Notify({
summary: "Failed to import",
body: "No file selected.",
summary: 'Failed to import',
body: 'No file selected.',
iconName: icons.ui.warning,
timeout: 5000
timeout: 5000,
});
return;
}
let importedConfig = loadJsonFile(filePath);
const importedConfig = loadJsonFile(filePath);
if (!importedConfig) {
dialog.destroy();
@@ -209,26 +212,26 @@ export const importFiles = (themeOnly: boolean = false): void => {
}
Notify({
summary: `Importing ${themeOnly ? "Theme" : "Config"}`,
summary: `Importing ${themeOnly ? 'Theme' : 'Config'}`,
body: `Importing: ${filePath}`,
iconName: icons.ui.info,
timeout: 7000
timeout: 7000,
});
let tmpConfigFile = Gio.File.new_for_path(`${TMP}/config.json`);
let optionsConfigFile = Gio.File.new_for_path(OPTIONS);
const tmpConfigFile = Gio.File.new_for_path(`${TMP}/config.json`);
const optionsConfigFile = Gio.File.new_for_path(OPTIONS);
let [tmpSuccess, tmpContent] = tmpConfigFile.load_contents(null);
let [optionsSuccess, optionsContent] = optionsConfigFile.load_contents(null);
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.");
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));
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);
@@ -244,5 +247,5 @@ export const importFiles = (themeOnly: boolean = false): void => {
saveConfigToFile(optionsConfig, OPTIONS);
}
dialog.destroy();
bash("pkill ags && ags");
}
bash('pkill ags && ags');
};

32
widget/settings/shared/Header.ts
View File

@@ -1,16 +1,18 @@
export const Header = (headerName: string) => {
return Widget.Box({
class_name: "options-header",
children: [
Widget.Label({
class_name: "label-name",
label: headerName,
}),
Widget.Separator({
vpack: "center",
hexpand: true,
class_name: "menu-separator",
}),
],
});
import { GBox } from 'lib/types/widget';
export const Header = (headerName: string): GBox => {
return Widget.Box({
class_name: 'options-header',
children: [
Widget.Label({
class_name: 'label-name',
label: headerName,
}),
Widget.Separator({
vpack: 'center',
hexpand: true,
class_name: 'menu-separator',
}),
],
});
};

273
widget/settings/shared/Inputter.ts
View File

@@ -1,220 +1,63 @@
import { Opt } from "lib/option"
import Gdk from "gi://Gdk"
import icons from "lib/icons"
import { RowProps } from "lib/types/options"
import { Variable } from "types/variable";
import Wallpaper from "services/Wallpaper";
import { dependencies as checkDependencies } from "lib/utils";
import options from "options";
import { importFiles, saveFileDialog } from "./FileChooser";
import { RowProps } from 'lib/types/options';
import { Variable } from 'types/variable';
import { BoxWidget } from 'lib/types/widget';
import { numberInputter } from './components/number';
import { objectInputter } from './components/object';
import { stringInputter } from './components/string';
import { booleanInputter } from './components/boolean';
import { imageInputter } from './components/image';
import { importInputter } from './components/import';
import { wallpaperInputter } from './components/wallpaper';
import { colorInputter } from './components/color';
import { enumInputter } from './components/enum';
import { fontInputter } from './components/font';
const EnumSetter = (opt: Opt<string>, values: string[]) => {
const lbl = Widget.Label({ label: opt.bind().as(v => `${v}`) })
const step = (dir: 1 | -1) => {
const i = values.findIndex(i => i === lbl.label)
opt.setValue(dir > 0
? i + dir > values.length - 1 ? values[0] : values[i + dir]
: i + dir < 0 ? values[values.length - 1] : values[i + dir],
)
}
const next = Widget.Button({
child: Widget.Icon(icons.ui.arrow.right),
on_clicked: () => step(+1),
})
const prev = Widget.Button({
child: Widget.Icon(icons.ui.arrow.left),
on_clicked: () => step(-1),
})
return Widget.Box({
class_name: "enum-setter",
children: [lbl, prev, next],
})
}
export const Inputter = <T>({
opt,
type = typeof opt.value as RowProps<T>["type"],
enums,
max = 1000000,
min = 0,
increment = 1,
disabledBinding,
dependencies,
exportData,
}: RowProps<T>,
export const Inputter = <T extends string | number | boolean | object>(
{
opt,
type = typeof opt.value as RowProps<T>['type'],
enums,
disabledBinding,
dependencies,
exportData,
min = 0,
max = 1000000,
increment = 1,
}: RowProps<T>,
className: string,
isUnsaved: Variable<boolean>
) => {
isUnsaved: Variable<boolean>,
): BoxWidget => {
return Widget.Box({
vpack: "center",
class_name: /export|import/.test(type || "") ? "" : "inputter-container",
setup: self => {
vpack: 'center',
class_name: /export|import/.test(type || '') ? '' : 'inputter-container',
setup: (self) => {
switch (type) {
case "number": return self.children = [
Widget.Box({
class_name: "unsaved-icon-container",
child: isUnsaved.bind("value").as(unsvd => {
if (unsvd) {
return Widget.Icon({
class_name: "unsaved-icon",
icon: icons.ui.warning,
tooltipText: "Press 'Enter' to apply your changes."
})
}
return Widget.Box();
}),
}),
Widget.SpinButton({
setup(self) {
self.set_range(min, max)
self.set_increments(1 * increment, 5 * increment)
self.on("value-changed", () => {
opt.value = self.value as T;
})
self.hook(opt, () => {
self.value = opt.value as number;
isUnsaved.value = Number(self.text) !== opt.value as number;
})
self.connect("key-release-event", () => {
isUnsaved.value = Number(self.text) !== opt.value as number;
})
},
})
]
case "float":
case "object": return self.children = [
Widget.Box({
class_name: "unsaved-icon-container",
child: isUnsaved.bind("value").as(unsvd => {
if (unsvd) {
return Widget.Icon({
class_name: "unsaved-icon",
icon: icons.ui.warning,
tooltipText: "Press 'Enter' to apply your changes."
})
}
return Widget.Box();
}),
}),
Widget.Entry({
class_name: className,
on_change: self => isUnsaved.value = self.text !== JSON.stringify(opt.value),
on_accept: self => opt.value = JSON.parse(self.text || ""),
setup: self => self.hook(opt, () => {
self.text = JSON.stringify(opt.value);
isUnsaved.value = self.text !== JSON.stringify(opt.value);
})
})
]
case "string": return self.children = [
Widget.Box({
class_name: "unsaved-icon-container",
child: isUnsaved.bind("value").as(unsvd => {
if (unsvd) {
return Widget.Icon({
class_name: "unsaved-icon",
icon: icons.ui.warning,
tooltipText: "Press 'Enter' to apply your changes."
})
}
return Widget.Box();
}),
}),
Widget.Entry({
class_name: isUnsaved.bind("value").as(unsaved => unsaved ? "unsaved" : ""),
on_change: self => isUnsaved.value = self.text !== opt.value,
on_accept: self => {
opt.value = self.text as T;
},
setup: self => self.hook(opt, () => {
isUnsaved.value = self.text !== opt.value;
self.text = opt.value as string;
}),
})
]
case "enum": return self.child = EnumSetter(opt as unknown as Opt<string>, enums!)
case "boolean": return self.child = Widget.Switch({
sensitive: disabledBinding !== undefined ? disabledBinding.bind("value").as(disabled => !disabled) : true,
})
.on("notify::active", self => {
if (disabledBinding !== undefined && disabledBinding.value) {
return;
}
if (self.active && dependencies !== undefined && !dependencies.every(d => checkDependencies(d))) {
self.active = false;
return;
}
opt.value = self.active as T
})
.hook(opt, self => {
self.active = opt.value as boolean
})
case "img": return self.child = Widget.FileChooserButton({
class_name: "image-chooser",
on_file_set: ({ uri }) => { opt.value = uri!.replace("file://", "") as T },
})
case "config_import": return self.child = Widget.Box({
children: [
Widget.Button({
class_name: "options-import",
label: "import",
on_clicked: () => {
importFiles(exportData?.themeOnly as boolean);
}
}),
Widget.Button({
class_name: "options-export",
label: "export",
on_clicked: () => {
saveFileDialog(exportData?.filePath as string, exportData?.themeOnly as boolean);
}
}),
]
})
case "wallpaper": return self.child = Widget.FileChooserButton({
on_file_set: ({ uri }) => {
opt.value = uri!.replace("file://", "") as T;
if (options.wallpaper.enable.value) {
Wallpaper.set(uri!.replace("file://", ""));
}
},
})
case "font": return self.child = Widget.FontButton({
show_size: false,
use_size: false,
setup: self => self
.hook(opt, () => self.font = opt.value as string)
.on("font-set", ({ font }) => opt.value = font!
.split(" ").slice(0, -1).join(" ") as T),
})
case "color": return self.child = Widget.ColorButton()
.hook(opt, self => {
const rgba = new Gdk.RGBA()
rgba.parse(opt.value as string)
self.rgba = rgba
})
.on("color-set", ({ rgba: { red, green, blue } }) => {
const hex = (n: number) => {
const c = Math.floor(255 * n).toString(16)
return c.length === 1 ? `0${c}` : c
}
opt.value = `#${hex(red)}${hex(green)}${hex(blue)}` as T
})
default: return self.child = Widget.Label({
label: `no setter with type ${type}`,
})
case 'number':
return numberInputter(self, opt, min, max, increment, isUnsaved);
case 'float':
case 'object':
return objectInputter(self, opt, isUnsaved, className);
case 'string':
return stringInputter(self, opt, isUnsaved);
case 'enum':
return enumInputter(self, opt, enums!);
case 'boolean':
return booleanInputter(self, opt, disabledBinding, dependencies);
case 'img':
return imageInputter(self, opt);
case 'config_import':
return importInputter(self, exportData);
case 'wallpaper':
return wallpaperInputter(self, opt);
case 'font':
return fontInputter(self, opt);
case 'color':
return colorInputter(self, opt);
default:
return (self.child = Widget.Label({
label: `No setter with type ${type}`,
}));
}
}
})
}
},
});
};

45
widget/settings/shared/Label.ts
View File

@@ -1,33 +1,34 @@
export const Label = (name: string, sub = "", subtitleLink = '') => {
const subTitle = () => {
import { GBox, GButton, GLabel } from 'lib/types/widget';
export const Label = (name: string, sub = '', subtitleLink = ''): GBox => {
const subTitle = (): GButton | GLabel => {
if (subtitleLink.length) {
return Widget.Button({
hpack: "start",
vpack: "center",
class_name: "options-sublabel-link",
hpack: 'start',
vpack: 'center',
class_name: 'options-sublabel-link',
label: sub,
// run a bash command to open the link in the default browswer
on_primary_click: () => Utils.execAsync(`bash -c 'xdg-open ${subtitleLink}'`),
})
});
}
return Widget.Label({
hpack: "start",
vpack: "center",
class_name: "options-sublabel",
label: sub
})
}
hpack: 'start',
vpack: 'center',
class_name: 'options-sublabel',
label: sub,
});
};
return Widget.Box({
vertical: true,
hpack: "start",
hpack: 'start',
children: [
Widget.Label({
hpack: "start",
vpack: "center",
class_name: "options-label",
label: name
hpack: 'start',
vpack: 'center',
class_name: 'options-label',
label: name,
}),
subTitle()
]
})
}
subTitle(),
],
});
};

34
widget/settings/shared/Option.ts
View File

@@ -1,29 +1,33 @@
import { Label } from "./Label";
import { Inputter } from "./Inputter";
import icons from "lib/icons";
import { RowProps } from "lib/types/options";
import { Label } from './Label';
import { Inputter } from './Inputter';
import icons from 'lib/icons';
import { RowProps } from 'lib/types/options';
import { GBox } from 'lib/types/widget';
export const Option = <T>(props: RowProps<T>, className: string = '') => {
export const Option = <T extends string | number | boolean | object>(
props: RowProps<T>,
className: string = '',
): GBox => {
const isUnsaved = Variable(false);
return Widget.Box({
class_name: "option-item",
class_name: 'option-item',
hexpand: true,
children: [
Widget.Box({
hpack: "start",
vpack: "center",
hpack: 'start',
vpack: 'center',
hexpand: true,
child: Label(props.title, props.subtitle || "", props.subtitleLink),
child: Label(props.title, props.subtitle || '', props.subtitleLink),
}),
Inputter(props, className, isUnsaved),
Widget.Button({
vpack: "center",
class_name: "reset-options",
vpack: 'center',
class_name: 'reset-options',
child: Widget.Icon(icons.ui.refresh),
on_clicked: () => props.opt.reset(),
sensitive: props.opt.bind().as(v => v !== props.opt.initial),
sensitive: props.opt.bind().as((v) => v !== props.opt.initial),
}),
]
})
}
],
});
};

29
widget/settings/shared/components/boolean.ts Normal file
View File

@@ -0,0 +1,29 @@
import { Opt } from 'lib/option';
import { Attribute, BoxWidget } from 'lib/types/widget';
import { Variable } from 'types/variable';
import { dependencies as checkDependencies } from 'lib/utils';
export const booleanInputter = <T>(
self: BoxWidget,
opt: Opt<T>,
disabledBinding: Variable<boolean> | undefined,
dependencies: string[] | undefined,
): Attribute => {
return (self.child = Widget.Switch({
sensitive: disabledBinding !== undefined ? disabledBinding.bind('value').as((disabled) => !disabled) : true,
})
.on('notify::active', (self) => {
if (disabledBinding !== undefined && disabledBinding.value) {
return;
}
if (self.active && dependencies !== undefined && !dependencies.every((d) => checkDependencies(d))) {
self.active = false;
return;
}
opt.value = self.active as T;
})
.hook(opt, (self) => {
self.active = opt.value as boolean;
}));
};

19
widget/settings/shared/components/color.ts Normal file
View File

@@ -0,0 +1,19 @@
import Gdk from 'gi://Gdk';
import { Opt } from 'lib/option';
import { Attribute, BoxWidget } from 'lib/types/widget';
export const colorInputter = <T>(self: BoxWidget, opt: Opt<T>): Attribute => {
return (self.child = Widget.ColorButton()
.hook(opt, (self) => {
const rgba = new Gdk.RGBA();
rgba.parse(opt.value as string);
self.rgba = rgba;
})
.on('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.value = `#${hex(red)}${hex(green)}${hex(blue)}` as T;
}));
};

36
widget/settings/shared/components/enum.ts Normal file
View File

@@ -0,0 +1,36 @@
import { Opt } from 'lib/option';
import { BoxWidget } from 'lib/types/widget';
import icons from 'lib/icons';
import { Box } from 'types/@girs/gtk-3.0/gtk-3.0.cjs';
export const enumInputter = <T extends string | number | boolean | object>(
self: BoxWidget,
opt: Opt<T>,
values: T[],
): Box => {
const lbl = Widget.Label({ label: opt.bind().as((v) => `${v}`) });
const step = (dir: 1 | -1): void => {
const i = values.findIndex((i) => i === lbl.label);
opt.setValue(
dir > 0
? i + dir > values.length - 1
? values[0]
: values[i + dir]
: i + dir < 0
? values[values.length - 1]
: values[i + dir],
);
};
const next = Widget.Button({
child: Widget.Icon(icons.ui.arrow.right),
on_clicked: () => step(+1),
});
const prev = Widget.Button({
child: Widget.Icon(icons.ui.arrow.left),
on_clicked: () => step(-1),
});
return (self.child = Widget.Box({
class_name: 'enum-setter',
children: [lbl, prev, next],
}));
};

14
widget/settings/shared/components/font.ts Normal file
View File

@@ -0,0 +1,14 @@
import { Opt } from 'lib/option';
import { Attribute, BoxWidget, Child } from 'lib/types/widget';
import FontButton from 'types/widgets/fontbutton';
export const fontInputter = <T>(self: BoxWidget, opt: Opt<T>): FontButton<Child, Attribute> => {
return (self.child = Widget.FontButton({
show_size: false,
use_size: false,
setup: (self) =>
self
.hook(opt, () => (self.font = opt.value as string))
.on('font-set', ({ font }) => (opt.value = font!.split(' ').slice(0, -1).join(' ') as T)),
}));
};

11
widget/settings/shared/components/image.ts Normal file
View File

@@ -0,0 +1,11 @@
import { Opt } from 'lib/option';
import { Attribute, BoxWidget } from 'lib/types/widget';
export const imageInputter = <T>(self: BoxWidget, opt: Opt<T>): Attribute => {
return (self.child = Widget.FileChooserButton({
class_name: 'image-chooser',
on_file_set: ({ uri }) => {
opt.value = uri!.replace('file://', '') as T;
},
}));
};

24
widget/settings/shared/components/import.ts Normal file
View File

@@ -0,0 +1,24 @@
import { ThemeExportData } from 'lib/types/options';
import { Attribute, BoxWidget } from 'lib/types/widget';
import { importFiles, saveFileDialog } from '../FileChooser';
export const importInputter = (self: BoxWidget, exportData?: ThemeExportData): Attribute => {
return (self.child = Widget.Box({
children: [
Widget.Button({
class_name: 'options-import',
label: 'import',
on_clicked: () => {
importFiles(exportData?.themeOnly as boolean);
},
}),
Widget.Button({
class_name: 'options-export',
label: 'export',
on_clicked: () => {
saveFileDialog(exportData?.filePath as string, exportData?.themeOnly as boolean);
},
}),
],
}));
};

45
widget/settings/shared/components/number.ts Normal file
View File

@@ -0,0 +1,45 @@
import icons from 'lib/icons';
import { Opt } from 'lib/option';
import { Attribute, BoxWidget } from 'lib/types/widget';
import { Variable } from 'types/variable';
export const numberInputter = <T>(
self: BoxWidget,
opt: Opt<T>,
min: number,
max: number,
increment = 1,
isUnsaved: Variable<boolean>,
): Attribute => {
return (self.children = [
Widget.Box({
class_name: 'unsaved-icon-container',
child: isUnsaved.bind('value').as((unsvd) => {
if (unsvd) {
return Widget.Icon({
class_name: 'unsaved-icon',
icon: icons.ui.warning,
tooltipText: "Press 'Enter' to apply your changes.",
});
}
return Widget.Box();
}),
}),
Widget.SpinButton({
setup(self) {
self.set_range(min, max);
self.set_increments(1 * increment, 5 * increment);
self.on('value-changed', () => {
opt.value = self.value as T;
});
self.hook(opt, () => {
self.value = opt.value as number;
isUnsaved.value = Number(self.text) !== (opt.value as number);
});
self.connect('key-release-event', () => {
isUnsaved.value = Number(self.text) !== (opt.value as number);
});
},
}),
]);
};

37
widget/settings/shared/components/object.ts Normal file
View File

@@ -0,0 +1,37 @@
import icons from 'lib/icons';
import { Opt } from 'lib/option';
import { Attribute, BoxWidget } from 'lib/types/widget';
import { Variable } from 'types/variable';
export const objectInputter = <T>(
self: BoxWidget,
opt: Opt<T>,
isUnsaved: Variable<boolean>,
className: string,
): Attribute => {
return (self.children = [
Widget.Box({
class_name: 'unsaved-icon-container',
child: isUnsaved.bind('value').as((unsvd) => {
if (unsvd) {
return Widget.Icon({
class_name: 'unsaved-icon',
icon: icons.ui.warning,
tooltipText: "Press 'Enter' to apply your changes.",
});
}
return Widget.Box();
}),
}),
Widget.Entry({
class_name: className,
on_change: (self) => (isUnsaved.value = self.text !== JSON.stringify(opt.value)),
on_accept: (self) => (opt.value = JSON.parse(self.text || '')),
setup: (self) =>
self.hook(opt, () => {
self.text = JSON.stringify(opt.value);
isUnsaved.value = self.text !== JSON.stringify(opt.value);
}),
}),
]);
};

34
widget/settings/shared/components/string.ts Normal file
View File

@@ -0,0 +1,34 @@
import icons from 'lib/icons';
import { Opt } from 'lib/option';
import { Attribute, BoxWidget } from 'lib/types/widget';
import { Variable } from 'types/variable';
export const stringInputter = <T>(self: BoxWidget, opt: Opt<T>, isUnsaved: Variable<boolean>): Attribute => {
return (self.children = [
Widget.Box({
class_name: 'unsaved-icon-container',
child: isUnsaved.bind('value').as((unsvd) => {
if (unsvd) {
return Widget.Icon({
class_name: 'unsaved-icon',
icon: icons.ui.warning,
tooltipText: "Press 'Enter' to apply your changes.",
});
}
return Widget.Box();
}),
}),
Widget.Entry({
class_name: isUnsaved.bind('value').as((unsaved) => (unsaved ? 'unsaved' : '')),
on_change: (self) => (isUnsaved.value = self.text !== opt.value),
on_accept: (self) => {
opt.value = self.text as T;
},
setup: (self) =>
self.hook(opt, () => {
isUnsaved.value = self.text !== opt.value;
self.text = opt.value as string;
}),
}),
]);
};

20
widget/settings/shared/components/wallpaper.ts Normal file
View File

@@ -0,0 +1,20 @@
import { Opt } from 'lib/option';
import { Attribute, BoxWidget } from 'lib/types/widget';
import Wallpaper from 'services/Wallpaper';
export const wallpaperInputter = <T extends string | number | boolean | object>(
self: BoxWidget,
opt: Opt<T>,
): Attribute | void => {
if (typeof opt.value === 'string') {
return (self.child = Widget.FileChooserButton({
on_file_set: ({ uri }) => {
const newValue: string = uri!.replace('file://', '');
opt.value = newValue as T;
if (options.wallpaper.enable.value) {
Wallpaper.set(newValue);
}
},
}));
}
};

14
widget/settings/side_effects/index.ts
View File

@@ -1,25 +1,25 @@
import options from "options";
import options from 'options';
const { show_numbered, show_icons } = options.bar.workspaces;
const { monochrome: monoBar } = options.theme.bar.buttons;
const { monochrome: monoMenu } = options.theme.bar.menus;
const { matugen } = options.theme;
show_numbered.connect("changed", ({ value }) => {
show_numbered.connect('changed', ({ value }) => {
if (value === true) {
show_icons.value = false;
}
})
});
show_icons.connect("changed", ({ value }) => {
show_icons.connect('changed', ({ value }) => {
if (value === true) {
show_numbered.value = false;
}
})
});
matugen.connect("changed", ({ value }) => {
matugen.connect('changed', ({ value }) => {
if (value === true) {
monoBar.value = false;
monoMenu.value = false;
}
})
});