feat: allow custom icons on custom modules (#351)

* feat: allow custom icons on custom modules * Update options.ts * Update customModules/config.ts --------- Co-authored-by: Jas Singh <jaskiratpal.singh@outlook.com>
2024-10-22 13:39:15 +05:45
parent 3bc8c0d2e1
commit 7c06b3e0f0
6 changed files with 30 additions and 36 deletions
--- a/customModules/config.ts
+++ b/customModules/config.ts
@@ -37,6 +37,11 @@ export const CustomModuleSettings = (): Scrollable<GtkWidget, Attribute> =>
                    title: 'Button Border',
                    type: 'boolean',
                }),
+                Option({
+                    opt: options.bar.customModules.ram.icon,
+                    title: 'Ram Icon',
+                    type: 'string',
+                }),
                Option({
                    opt: options.bar.customModules.ram.label,
                    title: 'Show Label',
@@ -93,6 +98,11 @@ export const CustomModuleSettings = (): Scrollable<GtkWidget, Attribute> =>
                    title: 'Button Border',
                    type: 'boolean',
                }),
+                Option({
+                    opt: options.bar.customModules.cpu.icon,
+                    title: 'Cpu Icon',
+                    type: 'string',
+                }),
                Option({
                    opt: options.bar.customModules.cpu.label,
                    title: 'Show Label',
@@ -156,8 +166,7 @@ export const CustomModuleSettings = (): Scrollable<GtkWidget, Attribute> =>
                Option({
                    opt: options.bar.customModules.storage.icon,
                    title: 'Storage Icon',
-                    type: 'enum',
-                    enums: ['󰋊', '', '󱛟', '', '', ''],
+                    type: 'string',
                }),
                Option({
                    opt: options.bar.customModules.storage.label,
@@ -225,8 +234,7 @@ export const CustomModuleSettings = (): Scrollable<GtkWidget, Attribute> =>
                Option({
                    opt: options.bar.customModules.netstat.icon,
                    title: 'Netstat Icon',
-                    type: 'enum',
-                    enums: ['󰖟', '󰇚', '󰕒', '󰛳', '', '󰣺', '󰖩', '', '󰈀'],
+                    type: 'string',
                }),
                Option({
                    opt: options.bar.customModules.netstat.label,
@@ -292,9 +300,8 @@ export const CustomModuleSettings = (): Scrollable<GtkWidget, Attribute> =>
                }),
                Option({
                    opt: options.bar.customModules.kbLayout.icon,
-                    title: 'kbLayout Icon',
-                    type: 'enum',
-                    enums: ['', '󰌌', '', '󰬴', '󰗊'],
+                    title: 'Keyboard Layout Icon',
+                    type: 'string',
                }),
                Option({
                    opt: options.bar.customModules.kbLayout.label,
@@ -357,8 +364,7 @@ export const CustomModuleSettings = (): Scrollable<GtkWidget, Attribute> =>
                Option({
                    opt: options.bar.customModules.updates.icon,
                    title: 'Updates Icon',
-                    type: 'enum',
-                    enums: ['󰚰', '󰇚', '', '󱑢', '󱑣', '󰏖', '', '󰏔', '󰏗'],
+                    type: 'string',
                }),
                Option({
                    opt: options.bar.customModules.updates.label,
@@ -557,8 +563,7 @@ export const CustomModuleSettings = (): Scrollable<GtkWidget, Attribute> =>
                Option({
                    opt: options.bar.customModules.power.icon,
                    title: 'Power Button Icon',
-                    type: 'enum',
-                    enums: ['', '', '󰍃', '󰿅', '󰒲', '󰤄'],
+                    type: 'string',
                }),
                Option({
                    opt: options.bar.customModules.power.leftClick,
--- a/customModules/cpu/index.ts
+++ b/customModules/cpu/index.ts
@@ -13,7 +13,7 @@ import { BarBoxChild } from 'lib/types/bar';
 import { Attribute, Child } from 'lib/types/widget';

 // All the user configurable options for the cpu module that are needed
-const { label, round, leftClick, rightClick, middleClick, scrollUp, scrollDown, pollingInterval } =
+const { label, round, leftClick, rightClick, middleClick, scrollUp, scrollDown, pollingInterval, icon } =
    options.bar.customModules.cpu;

 export const cpuUsage = Variable(0);
@@ -35,7 +35,7 @@ export const Cpu = (): BarBoxChild => {
    };

    const cpuModule = module({
-        textIcon: '',
+        textIcon: icon.bind('value'),
        label: Utils.merge([cpuUsage.bind('value'), round.bind('value')], (cpuUsg, rnd) => {
            return renderLabel(cpuUsg, rnd);
        }),
--- a/customModules/ram/index.ts
+++ b/customModules/ram/index.ts
@@ -20,7 +20,8 @@ import { pollVariable } from 'customModules/PollVar';
 import { Attribute, Child } from 'lib/types/widget';

 // All the user configurable options for the ram module that are needed
-const { label, labelType, round, leftClick, rightClick, middleClick, pollingInterval } = options.bar.customModules.ram;
+const { label, labelType, round, leftClick, rightClick, middleClick, pollingInterval, icon } =
+    options.bar.customModules.ram;

 const defaultRamData: GenericResourceData = { total: 0, used: 0, percentage: 0, free: 0 };
 const ramUsage = Variable<GenericResourceData>(defaultRamData);
@@ -29,7 +30,7 @@ pollVariable(ramUsage, [round.bind('value')], pollingInterval.bind('value'), cal

 export const Ram = (): BarBoxChild => {
    const ramModule = module({
-        textIcon: '',
+        textIcon: icon.bind('value'),
        label: Utils.merge(
            [ramUsage.bind('value'), labelType.bind('value'), round.bind('value')],
            (rmUsg: GenericResourceData, lblTyp: ResourceLabelType, round: boolean) => {
--- a/lib/types/bar.d.ts
+++ b/lib/types/bar.d.ts
@@ -36,12 +36,7 @@ export type Module = {

 export type ResourceLabelType = 'used/total' | 'used' | 'percentage' | 'free';

-export type StorageIcon = '󰋊' | '' | '󱛟' | '' | '' | '';
-
-export type NetstatIcon = '󰖟' | '󰇚' | '󰕒' | '󰛳' | '' | '󰣺' | '󰖩' | '' | '󰈀';
 export type NetstatLabelType = 'full' | 'in' | 'out';
 export type RateUnit = 'GiB' | 'MiB' | 'KiB' | 'auto';

-export type UpdatesIcon = '󰚰' | '󰇚' | '' | '󱑢' | '󱑣' | '󰏖' | '' | '󰏔' | '󰏗';

-export type PowerIcon = '' | '' | '󰍃' | '󰿅' | '󰒲' | '󰤄';
--- a/lib/types/customModules/kbLayout.d.ts
+++ b/lib/types/customModules/kbLayout.d.ts
@@ -1,7 +1,6 @@
 import { layoutMap } from 'customModules/kblayout/layouts';

 export type KbLabelType = 'layout' | 'code';
-export type KbIcon = '' | '󰌌' | '' | '󰬴' | '󰗊';

 export type HyprctlKeyboard = {
    address: string;
--- a/options.ts
+++ b/options.ts
@@ -1,14 +1,6 @@
 import { opt, mkOptions } from 'lib/option';
-import {
-    NetstatIcon,
-    NetstatLabelType,
-    PowerIcon,
-    RateUnit,
-    ResourceLabelType,
-    StorageIcon,
-    UpdatesIcon,
-} from 'lib/types/bar';
-import { KbIcon, KbLabelType } from 'lib/types/customModules/kbLayout';
+import { NetstatLabelType, RateUnit, ResourceLabelType } from 'lib/types/bar';
+import { KbLabelType } from 'lib/types/customModules/kbLayout';
 import {
    ActiveWsIndicator,
    BarButtonStyles,
@@ -951,6 +943,7 @@ const options = mkOptions(OPTIONS, {
        customModules: {
            scrollSpeed: opt(5),
            ram: {
+                icon: opt(''),
                label: opt(true),
                labelType: opt<ResourceLabelType>('percentage'),
                round: opt(true),
@@ -960,6 +953,7 @@ const options = mkOptions(OPTIONS, {
                middleClick: opt(''),
            },
            cpu: {
+                icon: opt(''),
                label: opt(true),
                round: opt(true),
                pollingInterval: opt(2000),
@@ -971,7 +965,7 @@ const options = mkOptions(OPTIONS, {
            },
            storage: {
                label: opt(true),
-                icon: opt<StorageIcon>('󰋊'),
+                icon: opt('󰋊'),
                round: opt(false),
                labelType: opt<ResourceLabelType>('percentage'),
                pollingInterval: opt(2000),
@@ -982,7 +976,7 @@ const options = mkOptions(OPTIONS, {
            netstat: {
                label: opt(true),
                networkInterface: opt(''),
-                icon: opt<NetstatIcon>('󰖟'),
+                icon: opt('󰖟'),
                round: opt(true),
                labelType: opt<NetstatLabelType>('full'),
                rateUnit: opt<RateUnit>('auto'),
@@ -994,7 +988,7 @@ const options = mkOptions(OPTIONS, {
            kbLayout: {
                label: opt(true),
                labelType: opt<KbLabelType>('code'),
-                icon: opt<KbIcon>('󰌌'),
+                icon: opt('󰌌'),
                leftClick: opt(''),
                rightClick: opt(''),
                middleClick: opt(''),
@@ -1005,7 +999,7 @@ const options = mkOptions(OPTIONS, {
                updateCommand: opt('$HOME/.config/ags/scripts/checkUpdates.sh -arch'),
                label: opt(true),
                padZero: opt(true),
-                icon: opt<UpdatesIcon>('󰏖'),
+                icon: opt('󰏖'),
                pollingInterval: opt(1000 * 60 * 60 * 6),
                leftClick: opt(''),
                rightClick: opt(''),
@@ -1036,7 +1030,7 @@ const options = mkOptions(OPTIONS, {
                scrollDown: opt(''),
            },
            power: {
-                icon: opt<PowerIcon>(''),
+                icon: opt(''),
                showLabel: opt(true),
                leftClick: opt('menu:powerdropdown'),
                rightClick: opt(''),