forked from Shinonome/dots-hyprland
add some config on sidebar
This commit is contained in:
@@ -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': {
|
||||||
|
|||||||
@@ -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({
|
||||||
|
|||||||
@@ -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",
|
||||||
|
|||||||
Reference in New Issue
Block a user