kenji/illogical-impulse
1
0
Fork 0
forked from Shinonome/dots-hyprland
Code Pull Requests Activity

Added color Schemes support. Added settings GUI in colorscheme-osd

Browse Source
This commit is contained in:
midn8hustlr
2024-03-16 21:00:17 +05:30
parent 36e706be01
commit 4904cfbe71
14 changed files with 485 additions and 217 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.config/ags/modules/.commonwidgets/configwidgets.js
+47 -1
View File
@@ -120,7 +120,53 @@ export const ConfigSegmentedSelection = ({
}
export const ConfigMulipleSelection = ({
icon, name, desc = '',
optionsArr = [
[ { name: 'Option 1', value: 0 }, { name: 'Option 2', value: 1 } ],
[ { name: 'Option 3', value: 0 }, { name: 'Option 4', value: 1 } ],
],
initIndex = [0, 0],
onChange,
...rest
}) => {
let lastSelected = initIndex;
let value = optionsArr[initIndex[0]][initIndex[1]].value;
const widget = Box({
tooltipText: desc,
className: 'multipleselection-container spacing-v-3',
//homogeneous: true,
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);
}
})
}),
})
}),
...rest,
});
return widget;
}
export const ConfigGap = ({ vertical = true, size = 5, ...rest }) => Box({
className: `gap-${vertical ? 'v' : 'h'}-${size}`,
...rest,
})
})
.config/ags/modules/indicators/colorscheme.js
+170 -15
View File
@@ -1,51 +1,206 @@
const { Gio, GLib } = imports.gi;
import Variable from 'resource:///com/github/Aylur/ags/variable.js';
import Widget from 'resource:///com/github/Aylur/ags/widget.js';
const { Box, EventBox, Icon, Scrollable, Label, Button, Revealer } = Widget;
import { ConfigToggle, ConfigMulipleSelection } from '../.commonwidgets/configwidgets.js';
import * as Utils from 'resource:///com/github/Aylur/ags/utils.js';
const { execAsync } = Utils;
import { setupCursorHover } from '../.widgetutils/cursorhover.js';
import { showColorScheme } from '../../variables.js';
import { MaterialIcon } from '../.commonwidgets/materialicon.js';
const ColorBox = ({
name = 'Color',
...rest
}) => Box({
}) => Widget.Box({
...rest,
homogeneous: true,
children: [
Label({
Widget.Label({
label: `${name}`,
})
]
})
const ColorschemeContent = () => Box({
const ColorSchemeSettingsRevealer = () => {
const headerButtonIcon = MaterialIcon('expand_more', 'norm');
const header = Widget.Button({
className: 'osd-settings-btn-arrow',
onClicked: () => {
content.revealChild = !content.revealChild;
headerButtonIcon.label = content.revealChild ? 'expand_less' : 'expand_more';
},
setup: setupCursorHover,
hpack: 'end',
child: headerButtonIcon,
});
const content = Widget.Revealer({
revealChild: false,
transition: 'slide_down',
transitionDuration: 200,
child: ColorSchemeSettings(),
setup: (self) => self.hook(isHoveredColorschemeSettings, (revealer) => {
if (isHoveredColorschemeSettings.value == false) {
setTimeout(() => {
if (isHoveredColorschemeSettings.value == false)
revealer.revealChild = false;
headerButtonIcon.label = 'expand_more';
}, 1500);
}
}),
});
return Widget.EventBox({
onHover: (self) => {
isHoveredColorschemeSettings.setValue(true);
},
onHoverLost: (self) => {
isHoveredColorschemeSettings.setValue(false);
},
child: Widget.Box({
vertical: true,
children: [
header,
content,
]
}),
});
}
function calculateSchemeInitIndex(optionsArr, searchValue = 'monochrome') {
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' },
//]
];
const initColorMode = Utils.exec('bash -c "sed -n \'1p\' $HOME/.cache/ags/user/colormode.txt"');
const initColorVal = (initColorMode == "dark") ? 1 : 0;
const initTransperancy = Utils.exec('bash -c "sed -n \'2p\' $HOME/.cache/ags/user/colormode.txt"');
const initTransperancyVal = (initTransperancy == "transparent") ? 1 : 0;
const initScheme = Utils.exec('bash -c "sed -n \'3p\' $HOME/.cache/ags/user/colormode.txt"');
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: 'Transperancy',
initValue: initTransperancyVal,
onChange: (self, newValue) => {
let transperancy = newValue == 0 ? "opaque" : "transparent";
execAsync([`bash`, `-c`, `mkdir -p ${GLib.get_user_cache_dir()}/ags/user && sed -i "2s/.*/${transperancy}/" ${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);
},
}),
]
});
const ColorschemeContent = () => Widget.Box({
className: 'osd-colorscheme spacing-v-5',
vertical: true,
hpack: 'center',
children: [
Label({
Widget.Label({
xalign: 0,
className: 'txt-norm titlefont txt',
label: 'Colorscheme',
hpack: 'center',
}),
Box({
Widget.Box({
className: 'spacing-h-5',
hpack: 'center',
children: [
ColorBox({ name: 'P', className: 'osd-color osd-color-primary' }),
ColorBox({ name: 'P-c', className: 'osd-color osd-color-primaryContainer' }),
ColorBox({ name: 'S', className: 'osd-color osd-color-secondary' }),
ColorBox({ name: 'S-c', className: 'osd-color osd-color-secondaryContainer' }),
ColorBox({ name: 'Sf-v', className: 'osd-color osd-color-surfaceVariant' }),
ColorBox({ name: 'T', className: 'osd-color osd-color-tertiary' }),
ColorBox({ name: 'Sf', className: 'osd-color osd-color-surface' }),
ColorBox({ name: 'Bg', className: 'osd-color osd-color-background' }),
ColorBox({ name: 'Sf-i', className: 'osd-color osd-color-inverseSurface' }),
ColorBox({ name: 'E', className: 'osd-color osd-color-error' }),
]
})
}),
Widget.Box({
className: 'spacing-h-5',
hpack: 'center',
children: [
ColorBox({ name: 'P-c', className: 'osd-color osd-color-primaryContainer' }),
ColorBox({ name: 'S-c', className: 'osd-color osd-color-secondaryContainer' }),
ColorBox({ name: 'T-c', className: 'osd-color osd-color-tertiaryContainer' }),
ColorBox({ name: 'Sf-c', className: 'osd-color osd-color-surfaceContainer' }),
ColorBox({ name: 'Sf-v', className: 'osd-color osd-color-surfaceVariant' }),
ColorBox({ name: 'E-c', className: 'osd-color osd-color-errorContainer' }),
]
}),
ColorSchemeSettingsRevealer(),
]
});
const isHoveredColorschemeSettings = Variable(false);
export default () => Widget.Revealer({
transition: 'slide_down',
transitionDuration: 200,
child: ColorschemeContent(),
setup: (self) => self.hook(showColorScheme, (revealer) => {
revealer.revealChild = showColorScheme.value;
}),
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);
}
})
},
})
.config/ags/modules/overview/miscfunctions.js
+2 -2
View File
@@ -19,7 +19,7 @@ export function launchCustomCommand(command) {
execAsync([`bash`, `-c`, `${App.configDir}/scripts/color_generation/switchwall.sh`, `&`]).catch(print);
}
else if (args[0] == '>color') { // Generate colorscheme from color picker
execAsync([`bash`, `-c`, `${App.configDir}/scripts/color_generation/switchcolor.sh`, `&`]).catch(print);
execAsync([`bash`, `-c`, `${App.configDir}/scripts/color_generation/switchcolor.sh --pick`, `&`]).catch(print);
}
else if (args[0] == '>light') { // Light mode
execAsync([`bash`, `-c`, `mkdir -p ${GLib.get_user_cache_dir()}/ags/user && echo "-l" > ${GLib.get_user_cache_dir()}/ags/user/colormode.txt`])
@@ -138,4 +138,4 @@ export function ls({ path = '~', silent = false }) {
if (!silent) console.log(e);
}
return contents;
}
}
.config/ags/modules/sideleft/tools/module.js
+1 -1
View File
@@ -53,4 +53,4 @@ export default ({
content,
]
});
}
}
.config/ags/modules/sideleft/tools/quickscripts.js
+1 -1
View File
@@ -90,4 +90,4 @@ export default () => SidebarModule({
})
}),
})
});
});