add some config on sidebar

This commit is contained in:
end-4
2024-04-28 23:23:14 +07:00
parent a67bc5965a
commit 447ec42955
6 changed files with 232 additions and 117 deletions
@@ -151,29 +151,25 @@ export const ConfigMulipleSelection = ({
tooltipText: desc, tooltipText: desc,
className: 'multipleselection-container spacing-v-3', className: 'multipleselection-container spacing-v-3',
vertical: true, vertical: true,
children: optionsArr.map((options, grp) => { children: optionsArr.map((options, grp) => Box({
return Box({ className: 'spacing-h-5',
className: 'spacing-h-5', hpack: 'center',
hpack: 'center', children: options.map((option, id) => Button({
children: options.map((option, id) => { setup: setupCursorHover,
return Button({ className: `multipleselection-btn ${id == initIndex[1] && grp == initIndex[0] ? 'multipleselection-btn-enabled' : ''}`,
setup: setupCursorHover, label: option.name,
className: `multipleselection-btn ${id == initIndex[1] && grp == initIndex[0] ? 'multipleselection-btn-enabled' : ''}`, onClicked: (self) => {
label: option.name, const kidsg = widget.get_children();
onClicked: (self) => { const kids = kidsg.flatMap(widget => widget.get_children());
const kidsg = widget.get_children(); kids.forEach(kid => {
const kids = kidsg.flatMap(widget => widget.get_children()); kid.toggleClassName('multipleselection-btn-enabled', false);
kids.forEach(kid => { });
kid.toggleClassName('multipleselection-btn-enabled', false); lastSelected = id;
}); self.toggleClassName('multipleselection-btn-enabled', true);
lastSelected = id; onChange(option.value, option.name);
self.toggleClassName('multipleselection-btn-enabled', true); }
onChange(option.value, option.name); })),
} })),
})
}),
})
}),
...rest, ...rest,
}); });
return widget; return widget;
@@ -1,7 +1,7 @@
import userOverrides from '../../user_options.js'; import userOverrides from '../../user_options.js';
// Defaults // Default options.
// Add overrides in ~/.config/ags/user_options.js
let configOptions = { let configOptions = {
// General stuff // General stuff
'ai': { 'ai': {
+112 -87
View File
@@ -40,11 +40,11 @@ const ColorSchemeSettingsRevealer = () => {
child: ColorSchemeSettings(), child: ColorSchemeSettings(),
setup: (self) => self.hook(isHoveredColorschemeSettings, (revealer) => { setup: (self) => self.hook(isHoveredColorschemeSettings, (revealer) => {
if (isHoveredColorschemeSettings.value == false) { if (isHoveredColorschemeSettings.value == false) {
setTimeout(() => { setTimeout(() => {
if (isHoveredColorschemeSettings.value == false) if (isHoveredColorschemeSettings.value == false)
revealer.revealChild = false; revealer.revealChild = false;
headerButtonIcon.label = 'expand_more'; headerButtonIcon.label = 'expand_more';
}, 1500); }, 1500);
} }
}), }),
}); });
@@ -56,41 +56,41 @@ const ColorSchemeSettingsRevealer = () => {
isHoveredColorschemeSettings.setValue(false); isHoveredColorschemeSettings.setValue(false);
}, },
child: Widget.Box({ child: Widget.Box({
vertical: true, vertical: true,
children: [ children: [
header, header,
content, content,
] ]
}), }),
}); });
} }
function calculateSchemeInitIndex(optionsArr, searchValue = 'vibrant') { function calculateSchemeInitIndex(optionsArr, searchValue = 'vibrant') {
if (searchValue == '') if (searchValue == '')
searchValue = 'vibrant'; searchValue = 'vibrant';
const flatArray = optionsArr.flatMap(subArray => subArray); const flatArray = optionsArr.flatMap(subArray => subArray);
const result = flatArray.findIndex(element => element.value === searchValue); const result = flatArray.findIndex(element => element.value === searchValue);
const rowIndex = Math.floor(result / optionsArr[0].length); const rowIndex = Math.floor(result / optionsArr[0].length);
const columnIndex = result % optionsArr[0].length; const columnIndex = result % optionsArr[0].length;
return [rowIndex, columnIndex]; return [rowIndex, columnIndex];
} }
const schemeOptionsArr = [ const schemeOptionsArr = [
[ [
{ name: 'Tonal Spot', value: 'tonalspot' }, { name: 'Tonal Spot', value: 'tonalspot' },
{ name: 'Fruit Salad', value: 'fruitsalad' }, { name: 'Fruit Salad', value: 'fruitsalad' },
{ name: 'Fidelity', value: 'fidelity' }, { name: 'Fidelity', value: 'fidelity' },
{ name: 'Rainbow', value: 'rainbow' }, { name: 'Rainbow', value: 'rainbow' },
], ],
[ [
{ name: 'Neutral', value: 'neutral' }, { name: 'Neutral', value: 'neutral' },
{ name: 'Monochrome', value: 'monochrome' }, { name: 'Monochrome', value: 'monochrome' },
{ name: 'Expressive', value: 'expressive' }, { name: 'Expressive', value: 'expressive' },
{ name: 'Vibrant', value: 'vibrant' }, { name: 'Vibrant', value: 'vibrant' },
], ],
//[ //[
// { name: 'Content', value: 'content' }, // { name: 'Content', value: 'content' },
//] //]
]; ];
const initColorMode = Utils.exec('bash -c "sed -n \'1p\' $HOME/.cache/ags/user/colormode.txt"'); 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 initSchemeIndex = calculateSchemeInitIndex(schemeOptionsArr, initScheme);
const ColorSchemeSettings = () => Widget.Box({ const ColorSchemeSettings = () => Widget.Box({
className: 'osd-colorscheme-settings spacing-v-5', className: 'osd-colorscheme-settings spacing-v-5',
vertical: true, vertical: true,
vpack: 'center', vpack: 'center',
children: [ children: [
Widget.Box({ Widget.Box({
children: [ vertical: true,
ConfigToggle({ children: [
name: 'Dark Mode', Widget.Label({
initValue: initColorVal, xalign: 0,
onChange: (self, newValue) => { className: 'txt-norm titlefont txt',
let lightdark = newValue == 0 ? "light" : "dark"; label: 'Options',
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`]) hpack: 'center',
.then(execAsync(['bash', '-c', `${App.configDir}/scripts/color_generation/switchcolor.sh`])) }),
.catch(print); //////////////////
}, ConfigToggle({
}), icon: 'dark_mode',
ConfigToggle({ name: 'Dark Mode',
name: 'Transparency', desc: 'Ya should go to sleep!',
initValue: initTransparencyVal, initValue: initColorVal,
onChange: (self, newValue) => { onChange: (self, newValue) => {
let transparency = newValue == 0 ? "opaque" : "transparent"; let lightdark = newValue == 0 ? "light" : "dark";
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`]) 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`])) .then(execAsync(['bash', '-c', `${App.configDir}/scripts/color_generation/switchcolor.sh`]))
.catch(print); .catch(print);
}, },
}), }),
] ConfigToggle({
}), icon: 'border_clear',
ConfigMulipleSelection({ name: 'Transparency',
hpack: 'center', desc: 'Make shell elements transparent',
vpack: 'center', initValue: initTransparencyVal,
optionsArr: schemeOptionsArr, onChange: (self, newValue) => {
initIndex: initSchemeIndex, let transparency = newValue == 0 ? "opaque" : "transparent";
onChange: (value, name) => { 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`])
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`]))
.then(execAsync(['bash', '-c', `${App.configDir}/scripts/color_generation/switchcolor.sh`])) .catch(print);
.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({ const ColorschemeContent = () => Widget.Box({
@@ -151,7 +176,7 @@ const ColorschemeContent = () => Widget.Box({
Widget.Label({ Widget.Label({
xalign: 0, xalign: 0,
className: 'txt-norm titlefont txt', className: 'txt-norm titlefont txt',
label: 'Colorscheme', label: 'Color scheme',
hpack: 'center', hpack: 'center',
}), }),
Widget.Box({ Widget.Box({
@@ -189,20 +214,20 @@ export default () => Widget.Revealer({
transitionDuration: userOptions.animations.durationLarge, transitionDuration: userOptions.animations.durationLarge,
child: ColorschemeContent(), child: ColorschemeContent(),
setup: (self) => { setup: (self) => {
self self
.hook(showColorScheme, (revealer) => { .hook(showColorScheme, (revealer) => {
if (showColorScheme.value == true) if (showColorScheme.value == true)
revealer.revealChild = true; revealer.revealChild = true;
else else
revealer.revealChild = isHoveredColorschemeSettings.value; revealer.revealChild = isHoveredColorschemeSettings.value;
}) })
.hook(isHoveredColorschemeSettings, (revealer) => { .hook(isHoveredColorschemeSettings, (revealer) => {
if (isHoveredColorschemeSettings.value == false) { if (isHoveredColorschemeSettings.value == false) {
setTimeout(() => { setTimeout(() => {
if (isHoveredColorschemeSettings.value == false) if (isHoveredColorschemeSettings.value == false)
revealer.revealChild = showColorScheme.value; revealer.revealChild = showColorScheme.value;
}, 2000); }, 2000);
} }
}) })
}, },
}) })
@@ -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,
]
});
}
@@ -19,6 +19,7 @@ import ModuleNotificationList from "./centermodules/notificationlist.js";
import ModuleVolumeMixer from "./centermodules/volumemixer.js"; import ModuleVolumeMixer from "./centermodules/volumemixer.js";
import ModuleWifiNetworks from "./centermodules/wifinetworks.js"; import ModuleWifiNetworks from "./centermodules/wifinetworks.js";
import ModuleBluetooth from "./centermodules/bluetooth.js"; import ModuleBluetooth from "./centermodules/bluetooth.js";
import ModuleConfigure from "./centermodules/configure.js";
import { ModuleCalendar } from "./calendar.js"; import { ModuleCalendar } from "./calendar.js";
import { getDistroIcon } from '../.miscutils/system.js'; import { getDistroIcon } from '../.miscutils/system.js';
import { MaterialIcon } from '../.commonwidgets/materialicon.js'; import { MaterialIcon } from '../.commonwidgets/materialicon.js';
@@ -47,6 +48,11 @@ const centerWidgets = [
contentWidget: ModuleWifiNetworks(), contentWidget: ModuleWifiNetworks(),
onFocus: () => execAsync('nmcli dev wifi list').catch(print), onFocus: () => execAsync('nmcli dev wifi list').catch(print),
}, },
{
name: 'Live config',
materialIcon: 'tune',
contentWidget: ModuleConfigure(),
},
]; ];
const timeRow = Box({ const timeRow = Box({
+4 -5
View File
@@ -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 = { 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': { 'keybinds': {
'sidebar': { 'sidebar': {
'pin': "Ctrl+p", 'pin': "Ctrl+p",