From 447ec4295530771097f3db7fcb493788764478bc Mon Sep 17 00:00:00 2001 From: end-4 <97237370+end-4@users.noreply.github.com> Date: Sun, 28 Apr 2024 23:23:14 +0700 Subject: [PATCH] add some config on sidebar --- .../modules/.commonwidgets/configwidgets.js | 42 ++-- .../modules/.configuration/user_options.js | 4 +- .config/ags/modules/indicators/colorscheme.js | 199 ++++++++++-------- .../sideright/centermodules/configure.js | 89 ++++++++ .config/ags/modules/sideright/sideright.js | 6 + .config/ags/user_options.js | 9 +- 6 files changed, 232 insertions(+), 117 deletions(-) create mode 100644 .config/ags/modules/sideright/centermodules/configure.js diff --git a/.config/ags/modules/.commonwidgets/configwidgets.js b/.config/ags/modules/.commonwidgets/configwidgets.js index 6c8ded17b..2d6c58fe4 100644 --- a/.config/ags/modules/.commonwidgets/configwidgets.js +++ b/.config/ags/modules/.commonwidgets/configwidgets.js @@ -151,29 +151,25 @@ export const ConfigMulipleSelection = ({ tooltipText: desc, className: 'multipleselection-container spacing-v-3', vertical: true, - children: optionsArr.map((options, grp) => { - return Box({ - className: 'spacing-h-5', - hpack: 'center', - children: options.map((option, id) => { - return Button({ - setup: setupCursorHover, - className: `multipleselection-btn ${id == initIndex[1] && grp == initIndex[0] ? 'multipleselection-btn-enabled' : ''}`, - label: option.name, - onClicked: (self) => { - const kidsg = widget.get_children(); - const kids = kidsg.flatMap(widget => widget.get_children()); - kids.forEach(kid => { - kid.toggleClassName('multipleselection-btn-enabled', false); - }); - lastSelected = id; - self.toggleClassName('multipleselection-btn-enabled', true); - onChange(option.value, option.name); - } - }) - }), - }) - }), + children: optionsArr.map((options, grp) => Box({ + className: 'spacing-h-5', + hpack: 'center', + children: options.map((option, id) => Button({ + setup: setupCursorHover, + className: `multipleselection-btn ${id == initIndex[1] && grp == initIndex[0] ? 'multipleselection-btn-enabled' : ''}`, + label: option.name, + onClicked: (self) => { + const kidsg = widget.get_children(); + const kids = kidsg.flatMap(widget => widget.get_children()); + kids.forEach(kid => { + kid.toggleClassName('multipleselection-btn-enabled', false); + }); + lastSelected = id; + self.toggleClassName('multipleselection-btn-enabled', true); + onChange(option.value, option.name); + } + })), + })), ...rest, }); return widget; diff --git a/.config/ags/modules/.configuration/user_options.js b/.config/ags/modules/.configuration/user_options.js index e7f636881..fcc7ee6c5 100644 --- a/.config/ags/modules/.configuration/user_options.js +++ b/.config/ags/modules/.configuration/user_options.js @@ -1,7 +1,7 @@ - import userOverrides from '../../user_options.js'; -// Defaults +// Default options. +// Add overrides in ~/.config/ags/user_options.js let configOptions = { // General stuff 'ai': { diff --git a/.config/ags/modules/indicators/colorscheme.js b/.config/ags/modules/indicators/colorscheme.js index e7b0a754f..be9fe6f9d 100644 --- a/.config/ags/modules/indicators/colorscheme.js +++ b/.config/ags/modules/indicators/colorscheme.js @@ -40,11 +40,11 @@ const ColorSchemeSettingsRevealer = () => { child: ColorSchemeSettings(), setup: (self) => self.hook(isHoveredColorschemeSettings, (revealer) => { if (isHoveredColorschemeSettings.value == false) { - setTimeout(() => { - if (isHoveredColorschemeSettings.value == false) - revealer.revealChild = false; + setTimeout(() => { + if (isHoveredColorschemeSettings.value == false) + revealer.revealChild = false; headerButtonIcon.label = 'expand_more'; - }, 1500); + }, 1500); } }), }); @@ -56,41 +56,41 @@ const ColorSchemeSettingsRevealer = () => { isHoveredColorschemeSettings.setValue(false); }, child: Widget.Box({ - vertical: true, - children: [ - header, - content, - ] + vertical: true, + children: [ + header, + content, + ] }), }); } function calculateSchemeInitIndex(optionsArr, searchValue = 'vibrant') { - if (searchValue == '') - searchValue = 'vibrant'; - const flatArray = optionsArr.flatMap(subArray => subArray); - const result = flatArray.findIndex(element => element.value === searchValue); - const rowIndex = Math.floor(result / optionsArr[0].length); - const columnIndex = result % optionsArr[0].length; - return [rowIndex, columnIndex]; + if (searchValue == '') + searchValue = 'vibrant'; + const flatArray = optionsArr.flatMap(subArray => subArray); + const result = flatArray.findIndex(element => element.value === searchValue); + const rowIndex = Math.floor(result / optionsArr[0].length); + const columnIndex = result % optionsArr[0].length; + return [rowIndex, columnIndex]; } const schemeOptionsArr = [ - [ - { name: 'Tonal Spot', value: 'tonalspot' }, - { name: 'Fruit Salad', value: 'fruitsalad' }, - { name: 'Fidelity', value: 'fidelity' }, - { name: 'Rainbow', value: 'rainbow' }, - ], - [ - { name: 'Neutral', value: 'neutral' }, - { name: 'Monochrome', value: 'monochrome' }, - { name: 'Expressive', value: 'expressive' }, - { name: 'Vibrant', value: 'vibrant' }, - ], - //[ - // { name: 'Content', value: 'content' }, - //] + [ + { name: 'Tonal Spot', value: 'tonalspot' }, + { name: 'Fruit Salad', value: 'fruitsalad' }, + { name: 'Fidelity', value: 'fidelity' }, + { name: 'Rainbow', value: 'rainbow' }, + ], + [ + { name: 'Neutral', value: 'neutral' }, + { name: 'Monochrome', value: 'monochrome' }, + { name: 'Expressive', value: 'expressive' }, + { name: 'Vibrant', value: 'vibrant' }, + ], + //[ + // { name: 'Content', value: 'content' }, + //] ]; const initColorMode = Utils.exec('bash -c "sed -n \'1p\' $HOME/.cache/ags/user/colormode.txt"'); @@ -101,46 +101,71 @@ const initScheme = Utils.exec('bash -c "sed -n \'3p\' $HOME/.cache/ags/user/colo const initSchemeIndex = calculateSchemeInitIndex(schemeOptionsArr, initScheme); const ColorSchemeSettings = () => Widget.Box({ - className: 'osd-colorscheme-settings spacing-v-5', - vertical: true, - vpack: 'center', - children: [ - Widget.Box({ - children: [ - ConfigToggle({ - name: 'Dark Mode', - initValue: initColorVal, - onChange: (self, newValue) => { - let lightdark = newValue == 0 ? "light" : "dark"; - execAsync([`bash`, `-c`, `mkdir -p ${GLib.get_user_cache_dir()}/ags/user && sed -i "1s/.*/${lightdark}/" ${GLib.get_user_cache_dir()}/ags/user/colormode.txt`]) - .then(execAsync(['bash', '-c', `${App.configDir}/scripts/color_generation/switchcolor.sh`])) - .catch(print); - }, - }), - ConfigToggle({ - name: 'Transparency', - initValue: initTransparencyVal, - onChange: (self, newValue) => { - let transparency = newValue == 0 ? "opaque" : "transparent"; - execAsync([`bash`, `-c`, `mkdir -p ${GLib.get_user_cache_dir()}/ags/user && sed -i "2s/.*/${transparency}/" ${GLib.get_user_cache_dir()}/ags/user/colormode.txt`]) - .then(execAsync(['bash', '-c', `${App.configDir}/scripts/color_generation/switchcolor.sh`])) - .catch(print); - }, - }), - ] - }), - ConfigMulipleSelection({ - hpack: 'center', - vpack: 'center', - optionsArr: schemeOptionsArr, - initIndex: initSchemeIndex, - onChange: (value, name) => { - execAsync([`bash`, `-c`, `mkdir -p ${GLib.get_user_cache_dir()}/ags/user && sed -i "3s/.*/${value}/" ${GLib.get_user_cache_dir()}/ags/user/colormode.txt`]) - .then(execAsync(['bash', '-c', `${App.configDir}/scripts/color_generation/switchcolor.sh`])) - .catch(print); - }, - }), - ] + className: 'osd-colorscheme-settings spacing-v-5', + vertical: true, + vpack: 'center', + children: [ + Widget.Box({ + vertical: true, + children: [ + Widget.Label({ + xalign: 0, + className: 'txt-norm titlefont txt', + label: 'Options', + hpack: 'center', + }), + ////////////////// + ConfigToggle({ + icon: 'dark_mode', + name: 'Dark Mode', + desc: 'Ya should go to sleep!', + initValue: initColorVal, + onChange: (self, newValue) => { + let lightdark = newValue == 0 ? "light" : "dark"; + execAsync([`bash`, `-c`, `mkdir -p ${GLib.get_user_cache_dir()}/ags/user && sed -i "1s/.*/${lightdark}/" ${GLib.get_user_cache_dir()}/ags/user/colormode.txt`]) + .then(execAsync(['bash', '-c', `${App.configDir}/scripts/color_generation/switchcolor.sh`])) + .catch(print); + }, + }), + ConfigToggle({ + icon: 'border_clear', + name: 'Transparency', + desc: 'Make shell elements transparent', + initValue: initTransparencyVal, + onChange: (self, newValue) => { + let transparency = newValue == 0 ? "opaque" : "transparent"; + execAsync([`bash`, `-c`, `mkdir -p ${GLib.get_user_cache_dir()}/ags/user && sed -i "2s/.*/${transparency}/" ${GLib.get_user_cache_dir()}/ags/user/colormode.txt`]) + .then(execAsync(['bash', '-c', `${App.configDir}/scripts/color_generation/switchcolor.sh`])) + .catch(print); + }, + }), + ] + }), + Widget.Box({ + vertical: true, + className: 'spacing-v-5', + children: [ + Widget.Label({ + xalign: 0, + className: 'txt-norm titlefont txt margin-top-5', + label: 'Scheme styles', + hpack: 'center', + }), + ////////////////// + ConfigMulipleSelection({ + hpack: 'center', + vpack: 'center', + optionsArr: schemeOptionsArr, + initIndex: initSchemeIndex, + onChange: (value, name) => { + execAsync([`bash`, `-c`, `mkdir -p ${GLib.get_user_cache_dir()}/ags/user && sed -i "3s/.*/${value}/" ${GLib.get_user_cache_dir()}/ags/user/colormode.txt`]) + .then(execAsync(['bash', '-c', `${App.configDir}/scripts/color_generation/switchcolor.sh`])) + .catch(print); + }, + }), + ] + }) + ] }); const ColorschemeContent = () => Widget.Box({ @@ -151,7 +176,7 @@ const ColorschemeContent = () => Widget.Box({ Widget.Label({ xalign: 0, className: 'txt-norm titlefont txt', - label: 'Colorscheme', + label: 'Color scheme', hpack: 'center', }), Widget.Box({ @@ -189,20 +214,20 @@ export default () => Widget.Revealer({ transitionDuration: userOptions.animations.durationLarge, child: ColorschemeContent(), setup: (self) => { - self - .hook(showColorScheme, (revealer) => { - if (showColorScheme.value == true) - revealer.revealChild = true; - else - revealer.revealChild = isHoveredColorschemeSettings.value; - }) - .hook(isHoveredColorschemeSettings, (revealer) => { - if (isHoveredColorschemeSettings.value == false) { - setTimeout(() => { - if (isHoveredColorschemeSettings.value == false) - revealer.revealChild = showColorScheme.value; - }, 2000); - } - }) + self + .hook(showColorScheme, (revealer) => { + if (showColorScheme.value == true) + revealer.revealChild = true; + else + revealer.revealChild = isHoveredColorschemeSettings.value; + }) + .hook(isHoveredColorschemeSettings, (revealer) => { + if (isHoveredColorschemeSettings.value == false) { + setTimeout(() => { + if (isHoveredColorschemeSettings.value == false) + revealer.revealChild = showColorScheme.value; + }, 2000); + } + }) }, }) diff --git a/.config/ags/modules/sideright/centermodules/configure.js b/.config/ags/modules/sideright/centermodules/configure.js new file mode 100644 index 000000000..dca3e5c05 --- /dev/null +++ b/.config/ags/modules/sideright/centermodules/configure.js @@ -0,0 +1,89 @@ +const { GLib } = imports.gi; +import Hyprland from 'resource:///com/github/Aylur/ags/service/hyprland.js'; +import Widget from 'resource:///com/github/Aylur/ags/widget.js'; +import * as Utils from 'resource:///com/github/Aylur/ags/utils.js'; +const { Box, Button, Icon, Label, Scrollable, Slider, Stack } = Widget; +const { execAsync, exec } = Utils; +import { MaterialIcon } from '../../.commonwidgets/materialicon.js'; +import { setupCursorHover } from '../../.widgetutils/cursorhover.js'; +import { ConfigToggle } from '../../.commonwidgets/configwidgets.js'; + +const HyprlandToggle = ({ icon, name, desc = null, option, enableValue = 1, disableValue = 0 }) => ConfigToggle({ + icon: icon, + name: name, + desc: desc, + initValue: JSON.parse(exec(`hyprctl getoption -j ${option}`))["int"] != 0, + onChange: (self, newValue) => { + execAsync(['hyprctl', 'keyword', option, `${newValue ? enableValue : disableValue}`]).catch(print); + } +}); + +export default (props) => { + const ConfigSection = ({ name, children }) => Box({ + vertical: true, + className: 'spacing-v-5', + children: [ + Label({ + hpack: 'start', + className: 'txt txt-large margin-left-10', + label: name, + }), + Box({ + className: 'margin-left-10 margin-right-10', + vertical: true, + children: children, + }) + ] + }) + const mainContent = Scrollable({ + vexpand: true, + child: Box({ + vertical: true, + className: 'spacing-v-10', + children: [ + ConfigSection({ + name: 'Effects', children: [ + ConfigToggle({ + icon: 'border_clear', + name: 'Transparency', + desc: 'Make shell elements transparent', + initValue: exec('bash -c "sed -n \'2p\' $HOME/.cache/ags/user/colormode.txt"') == "transparent", + onChange: (self, newValue) => { + const transparency = newValue == 0 ? "opaque" : "transparent"; + console.log(transparency); + execAsync([`bash`, `-c`, `mkdir -p ${GLib.get_user_cache_dir()}/ags/user && sed -i "2s/.*/${transparency}/" ${GLib.get_user_cache_dir()}/ags/user/colormode.txt`]) + .then(execAsync(['bash', '-c', `${App.configDir}/scripts/color_generation/switchcolor.sh`])) + .catch(print); + }, + }), + HyprlandToggle({ icon: 'blur_on', name: 'Blur', desc: "Enable blur on transparent elements\nDoesn't affect performance/power consumption unless you have transparent windows.", option: "decoration:blur:enabled" }), + ] + }), + ConfigSection({ + name: 'Developer', children: [ + HyprlandToggle({ icon: 'speed', name: 'Show FPS', desc: "[Nerd] Show Hyprland's FPS overlay", option: "debug:overlay" }), + HyprlandToggle({ icon: 'motion_sensor_active', name: 'Damage tracking', desc: "Enable damage tracking\nGenerally, leave it on.\nTurn off only when a shader doesn't work", option: "debug:damage_tracking", enableValue: 2 }), + HyprlandToggle({ icon: 'destruction', name: 'Damage blink', desc: "[Epilepsy warning!] [Nerd] Show screen damage flashes", option: "debug:damage_blink" }), + ] + }), + ] + }) + }); + const footNote = Box({ + homogeneous: true, + children: [Label({ + hpack: 'center', + className: 'txt txt-italic txt-subtext margin-5', + label: 'Not all changes are saved.', + })] + }) + return Box({ + ...props, + className: 'spacing-v-5', + vertical: true, + children: [ + mainContent, + footNote, + ] + }); +} diff --git a/.config/ags/modules/sideright/sideright.js b/.config/ags/modules/sideright/sideright.js index b3fb9e4df..e00f5f942 100644 --- a/.config/ags/modules/sideright/sideright.js +++ b/.config/ags/modules/sideright/sideright.js @@ -19,6 +19,7 @@ import ModuleNotificationList from "./centermodules/notificationlist.js"; import ModuleVolumeMixer from "./centermodules/volumemixer.js"; import ModuleWifiNetworks from "./centermodules/wifinetworks.js"; import ModuleBluetooth from "./centermodules/bluetooth.js"; +import ModuleConfigure from "./centermodules/configure.js"; import { ModuleCalendar } from "./calendar.js"; import { getDistroIcon } from '../.miscutils/system.js'; import { MaterialIcon } from '../.commonwidgets/materialicon.js'; @@ -47,6 +48,11 @@ const centerWidgets = [ contentWidget: ModuleWifiNetworks(), onFocus: () => execAsync('nmcli dev wifi list').catch(print), }, + { + name: 'Live config', + materialIcon: 'tune', + contentWidget: ModuleConfigure(), + }, ]; const timeRow = Box({ diff --git a/.config/ags/user_options.js b/.config/ags/user_options.js index 7e729c283..448348d0b 100644 --- a/.config/ags/user_options.js +++ b/.config/ags/user_options.js @@ -1,10 +1,9 @@ +// For every option, see ~/.config/ags/modules/.configuration/user_options.js +// (vscode users ctrl+click this: file://./modules/.configuration/user_options.js) +// (vim users: `:vsp` to split window, move cursor to this path, press `gf`. `Ctrl-w` twice to switch between) +// options listed in this file will override the default ones in the above file const userConfigOptions = { - // For every option, see ~/.config/ags/modules/.configuration/user_options.js - // (vscode users ctrl+click this: file://./modules/.configuration/user_options.js) - // (vim users: `:vsp` to split window, move cursor to this path, press `gf`. `Ctrl-w` twice to switch between) - // options listed in this file will override the default ones in the above file - // Here's an example 'keybinds': { 'sidebar': { 'pin': "Ctrl+p",