From d60d3db401b2dabe0289666f6c1f47b000f81d6f Mon Sep 17 00:00:00 2001 From: Jas Singh Date: Mon, 23 Sep 2024 22:29:49 -0700 Subject: [PATCH] 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 | 67 +++++++++++++++++++++++++ customModules/submap/index.ts | 76 +++++++++++++++++++++++++++++ customModules/theme.ts | 17 +++++++ modules/bar/Bar.ts | 3 ++ modules/bar/Exports.ts | 2 + options.ts | 21 ++++++++ scss/style/customModules/style.scss | 27 ++++++++++ 7 files changed, 213 insertions(+) create mode 100644 customModules/submap/index.ts diff --git a/customModules/config.ts b/customModules/config.ts index e698805..07092ac 100644 --- a/customModules/config.ts +++ b/customModules/config.ts @@ -410,6 +410,73 @@ export const CustomModuleSettings = (): Scrollable => 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 * diff --git a/customModules/submap/index.ts b/customModules/submap/index.ts new file mode 100644 index 0000000..163bf5b --- /dev/null +++ b/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 = 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) => { + inputHandler(self, { + onPrimaryClick: { + cmd: leftClick, + }, + onSecondaryClick: { + cmd: rightClick, + }, + onMiddleClick: { + cmd: middleClick, + }, + onScrollUp: { + cmd: scrollUp, + }, + onScrollDown: { + cmd: scrollDown, + }, + }); + }, + }, + }); + + return submapModule; +}; diff --git a/customModules/theme.ts b/customModules/theme.ts index dfa1463..2ac92ff 100644 --- a/customModules/theme.ts +++ b/customModules/theme.ts @@ -116,6 +116,23 @@ export const CustomModuleTheme = (): Scrollable => { }), 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' }), diff --git a/modules/bar/Bar.ts b/modules/bar/Bar.ts index 7898985..b5eff25 100644 --- a/modules/bar/Bar.ts +++ b/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 => WidgetContainer(Netstat()), kbinput: (): Button => WidgetContainer(KbInput()), updates: (): Button => WidgetContainer(Updates()), + submap: (): Button => WidgetContainer(Submap()), weather: (): Button => WidgetContainer(Weather()), power: (): Button => WidgetContainer(Power()), }; diff --git a/modules/bar/Exports.ts b/modules/bar/Exports.ts index c6a540a..6a17b2f 100644 --- a/modules/bar/Exports.ts +++ b/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, }; diff --git a/options.ts b/options.ts index 6e601e3..7a5bd92 100644 --- a/options.ts +++ b/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('imperial'), diff --git a/scss/style/customModules/style.scss b/scss/style/customModules/style.scss index 69bd0d6..3132ff8 100644 --- a/scss/style/customModules/style.scss +++ b/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 #