Added the ability to track when submap is enabled or disabled. (#282)

* Added submap custom module.

* Captilazation is muy importante.

* Add border config

customModules/config.ts

@@ -410,6 +410,73 @@ export const CustomModuleSettings = (): Scrollable<GtkWidget, Attribute> =>
                     type: 'string',
                 }),
 
+                /*
+                 ************************************
+                 *            SUBMAP                *
+                 ************************************
+                 */
+                Header('Submap'),
+                Option({
+                    opt: options.theme.bar.buttons.modules.submap.enableBorder,
+                    title: 'Button Border',
+                    type: 'boolean',
+                }),
+                Option({
+                    opt: options.bar.customModules.submap.enabledIcon,
+                    title: 'Enabled Icon',
+                    type: 'string',
+                }),
+                Option({
+                    opt: options.bar.customModules.submap.disabledIcon,
+                    title: 'Disabled Icon',
+                    type: 'string',
+                }),
+                Option({
+                    opt: options.bar.customModules.submap.enabledText,
+                    title: 'Enabled Text',
+                    type: 'string',
+                }),
+                Option({
+                    opt: options.bar.customModules.submap.disabledText,
+                    title: 'Disabled Text',
+                    type: 'string',
+                }),
+                Option({
+                    opt: options.bar.customModules.submap.label,
+                    title: 'Show Label',
+                    type: 'boolean',
+                }),
+                Option({
+                    opt: options.theme.bar.buttons.modules.submap.spacing,
+                    title: 'Spacing',
+                    type: 'string',
+                }),
+                Option({
+                    opt: options.bar.customModules.submap.leftClick,
+                    title: 'Left Click',
+                    type: 'string',
+                }),
+                Option({
+                    opt: options.bar.customModules.submap.rightClick,
+                    title: 'Right Click',
+                    type: 'string',
+                }),
+                Option({
+                    opt: options.bar.customModules.submap.middleClick,
+                    title: 'Middle Click',
+                    type: 'string',
+                }),
+                Option({
+                    opt: options.bar.customModules.submap.scrollUp,
+                    title: 'Scroll Up',
+                    type: 'string',
+                }),
+                Option({
+                    opt: options.bar.customModules.submap.scrollDown,
+                    title: 'Scroll Down',
+                    type: 'string',
+                }),
+
                 /*
                  ************************************
                  *            WEATHER               *

customModules/submap/index.ts

@@ -0,0 +1,76 @@
+const hyprland = await Service.import('hyprland');
+import options from 'options';
+import { module } from '../module';
+
+import { inputHandler } from 'customModules/utils';
+import Button from 'types/widgets/button';
+import { Variable as VariableType } from 'types/variable';
+import { Attribute, Child } from 'lib/types/widget';
+import { BarBoxChild } from 'lib/types/bar';
+
+const {
+    label,
+    enabledIcon,
+    disabledIcon,
+    enabledText,
+    disabledText,
+    leftClick,
+    rightClick,
+    middleClick,
+    scrollUp,
+    scrollDown,
+} = options.bar.customModules.submap;
+
+const submapStatus: VariableType<boolean> = Variable(false);
+
+hyprland.connect('submap', () => {
+    submapStatus.value = !submapStatus.value;
+});
+
+export const Submap = (): BarBoxChild => {
+    const submapModule = module({
+        textIcon: Utils.merge(
+            [submapStatus.bind('value'), enabledIcon.bind('value'), disabledIcon.bind('value')],
+            (status, enabled, disabled) => {
+                return status ? enabled : disabled;
+            },
+        ),
+        tooltipText: Utils.merge(
+            [submapStatus.bind('value'), enabledText.bind('value'), disabledText.bind('value')],
+            (status, enabled, disabled) => {
+                return status ? enabled : disabled;
+            },
+        ),
+        boxClass: 'submap',
+        label: Utils.merge(
+            [submapStatus.bind('value'), enabledText.bind('value'), disabledText.bind('value')],
+            (status, enabled, disabled) => {
+                return status ? enabled : disabled;
+            },
+        ),
+        showLabelBinding: label.bind('value'),
+        props: {
+            setup: (self: Button<Child, Attribute>) => {
+                inputHandler(self, {
+                    onPrimaryClick: {
+                        cmd: leftClick,
+                    },
+                    onSecondaryClick: {
+                        cmd: rightClick,
+                    },
+                    onMiddleClick: {
+                        cmd: middleClick,
+                    },
+                    onScrollUp: {
+                        cmd: scrollUp,
+                    },
+                    onScrollDown: {
+                        cmd: scrollDown,
+                    },
+                });
+            },
+        },
+    });
+
+    return submapModule;
+};

customModules/theme.ts

@@ -116,6 +116,23 @@ export const CustomModuleTheme = (): Scrollable<GtkWidget, Attribute> => {
                 }),
                 Option({ opt: options.theme.bar.buttons.modules.updates.border, title: 'Border', type: 'color' }),
 
+                Header('Submap'),
+                Option({ opt: options.theme.bar.buttons.modules.submap.text, title: 'Text', type: 'color' }),
+                Option({ opt: options.theme.bar.buttons.modules.submap.icon, title: 'Icon', type: 'color' }),
+                Option({
+                    opt: options.theme.bar.buttons.modules.submap.background,
+                    title: 'Label Background',
+                    type: 'color',
+                }),
+                Option({
+                    opt: options.theme.bar.buttons.modules.submap.icon_background,
+                    title: 'Icon Background',
+                    subtitle:
+                        "Applies a background color to the icon section of the button.\nRequires 'split' button styling.",
+                    type: 'color',
+                }),
+                Option({ opt: options.theme.bar.buttons.modules.submap.border, title: 'Border', type: 'color' }),
+
                 Header('Weather'),
                 Option({ opt: options.theme.bar.buttons.modules.weather.icon, title: 'Icon', type: 'color' }),
                 Option({ opt: options.theme.bar.buttons.modules.weather.text, title: 'Text', type: 'color' }),

modules/bar/Bar.ts

@@ -20,6 +20,7 @@ import {
     Netstat,
     KbInput,
     Updates,
+    Submap,
     Weather,
     Power,
 } from './Exports';
@@ -57,6 +58,7 @@ type Section =
     | 'netstat'
     | 'kbinput'
     | 'updates'
+    | 'submap'
     | 'weather'
     | 'power'
     | 'systray';
@@ -108,6 +110,7 @@ const widget = {
     netstat: (): Button<Child, Attribute> => WidgetContainer(Netstat()),
     kbinput: (): Button<Child, Attribute> => WidgetContainer(KbInput()),
     updates: (): Button<Child, Attribute> => WidgetContainer(Updates()),
+    submap: (): Button<Child, Attribute> => WidgetContainer(Submap()),
     weather: (): Button<Child, Attribute> => WidgetContainer(Weather()),
     power: (): Button<Child, Attribute> => WidgetContainer(Power()),
 };

modules/bar/Exports.ts

@@ -17,6 +17,7 @@ import { Storage } from 'customModules/storage/index';
 import { Netstat } from 'customModules/netstat/index';
 import { KbInput } from 'customModules/kblayout/index';
 import { Updates } from 'customModules/updates/index';
+import { Submap } from 'customModules/submap/index';
 import { Weather } from 'customModules/weather/index';
 import { Power } from 'customModules/power/index';
 
@@ -40,6 +41,7 @@ export {
     Netstat,
     KbInput,
     Updates,
+    Submap,
     Weather,
     Power,
 };

options.ts

@@ -350,6 +350,15 @@ const options = mkOptions(OPTIONS, {
                         icon_background: opt(colors.base2),
                         spacing: opt('0.45em'),
                     },
+                    submap: {
+                        enableBorder: opt(false),
+                        border: opt(colors.teal),
+                        background: opt(colors.base2),
+                        text: opt(colors.teal),
+                        icon: opt(colors.teal),
+                        icon_background: opt(colors.base2),
+                        spacing: opt('0.45em'),
+                    },
                 },
             },
             menus: {
@@ -993,6 +1002,18 @@ const options = mkOptions(OPTIONS, {
                 scrollUp: opt(''),
                 scrollDown: opt(''),
             },
+            submap: {
+                label: opt(true),
+                enabledIcon: opt('󰌐'),
+                disabledIcon: opt('󰌌'),
+                enabledText: opt('Submap On'),
+                disabledText: opt('Submap off'),
+                leftClick: opt(''),
+                rightClick: opt(''),
+                middleClick: opt(''),
+                scrollUp: opt(''),
+                scrollDown: opt(''),
+            },
             weather: {
                 label: opt(true),
                 unit: opt<UnitType>('imperial'),

scss/style/customModules/style.scss

@@ -279,6 +279,33 @@
     1.2em //
 );
 
+/* 
+ * #################################
+ * #    Submap Module Styling      #
+ * #################################
+ */
+@include styleModule(
+    //
+    // class name
+    'submap',
+    // label color
+    $bar-buttons-modules-submap-text,
+    // icon color
+    $bar-buttons-modules-submap-icon,
+    // icon background if split style is used
+    $bar-buttons-modules-submap-icon_background,
+    // label background
+    $bar-buttons-modules-submap-background,
+    // inner spacing
+    $bar-buttons-modules-submap-spacing,
+    // if border enabled
+    $bar-buttons-modules-submap-enableBorder,
+    // border color
+    $bar-buttons-modules-submap-border,
+    // custom font size
+    1.2em //
+);
+
 /* 
  * #################################
  * #    Weather Module Styling     #