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

color picker: refractor

Browse Source
This commit is contained in:
end-4
2024-02-16 16:55:45 +07:00
parent 6f884ae92f
commit 41124828df
1 changed files with 35 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.config/ags/widgets/sideleft/tools/colorpicker.js
+22 -84
View File
@@ -22,9 +22,6 @@ export default () => {
} }
const colorBlack = 'rgba(0,0,0,0.9)'; const colorBlack = 'rgba(0,0,0,0.9)';
const colorWhite = 'rgba(255,255,255,0.9)'; const colorWhite = 'rgba(255,255,255,0.9)';
const colorRed = '#be2222';
const colorGreen = '#51b932';
const colorBlue = '#2f87c2';
const hueRange = Box({ const hueRange = Box({
homogeneous: true, homogeneous: true,
className: 'sidebar-module-colorpicker-wrapper', className: 'sidebar-module-colorpicker-wrapper',
@@ -192,7 +189,9 @@ export default () => {
.hook(selectedColor, self.attribute.update, 'assigned') .hook(selectedColor, self.attribute.update, 'assigned')
, ,
}); });
const resultHex = Box({ const ResultBox = ({
colorSystemName, updateCallback, copyCallback
}) => Box({
children: [ children: [
Box({ Box({
vertical: true, vertical: true,
@@ -201,19 +200,15 @@ export default () => {
Label({ Label({
xalign: 0, xalign: 0,
className: 'txt-tiny', className: 'txt-tiny',
label: 'Hex', label: colorSystemName,
}), }),
Overlay({ Overlay({
child: Entry({ child: Entry({
widthChars: 10, widthChars: 10,
className: 'txt-small techfont', className: 'txt-small techfont',
// css: 'color: transparent;',
attribute: { attribute: {
id: 0, id: 0,
update: (self, id) => { update: updateCallback,
if (id && self.attribute.id === id) return;
self.text = hslToHex(selectedColor.hue, selectedColor.xAxis, selectedColor.yAxis / (1 + selectedColor.xAxis / 100));
}
}, },
setup: (self) => self setup: (self) => self
.hook(selectedColor, self.attribute.update, 'sl') .hook(selectedColor, self.attribute.update, 'sl')
@@ -232,7 +227,7 @@ export default () => {
Button({ Button({
child: MaterialIcon('content_copy', 'norm'), child: MaterialIcon('content_copy', 'norm'),
onClicked: (self) => { onClicked: (self) => {
Utils.execAsync(['wl-copy', `${hslToHex(selectedColor.hue, selectedColor.xAxis, selectedColor.yAxis / (1 + selectedColor.xAxis / 100))}`]) copyCallback(self);
self.child.label = 'done'; self.child.label = 'done';
Utils.timeout(1000, () => self.child.label = 'content_copy'); Utils.timeout(1000, () => self.child.label = 'content_copy');
}, },
@@ -240,87 +235,30 @@ export default () => {
}) })
] ]
}); });
const resultRgb = Box({ const resultHex = ResultBox({
children: [ colorSystemName: 'Hex',
Box({ updateCallback: (self, id) => {
vertical: true, if (id && self.attribute.id === id) return;
hexpand: true, self.text = hslToHex(selectedColor.hue, selectedColor.xAxis, selectedColor.yAxis / (1 + selectedColor.xAxis / 100));
children: [ },
Label({ copyCallback: () => Utils.execAsync(['wl-copy', `${hslToHex(selectedColor.hue, selectedColor.xAxis, selectedColor.yAxis / (1 + selectedColor.xAxis / 100))}`]),
xalign: 0, })
className: 'txt-tiny', const resultRgb = ResultBox({
label: 'RGB', colorSystemName: 'RGB',
}), updateCallback: (self, id) => {
Entry({
widthChars: 10,
className: 'txt-small techfont',
attribute: {
id: 1,
update: (self, id) => {
if (id && self.attribute.id === id) return; if (id && self.attribute.id === id) return;
self.text = hslToRgbValues(selectedColor.hue, selectedColor.xAxis, selectedColor.yAxis / (1 + selectedColor.xAxis / 100)); self.text = hslToRgbValues(selectedColor.hue, selectedColor.xAxis, selectedColor.yAxis / (1 + selectedColor.xAxis / 100));
}
}, },
setup: (self) => self copyCallback: () => Utils.execAsync(['wl-copy', `rgb(${hslToRgbValues(selectedColor.hue, selectedColor.xAxis, selectedColor.yAxis / (1 + selectedColor.xAxis / 100))})`]),
.hook(selectedColor, self.attribute.update, 'sl')
.hook(selectedColor, self.attribute.update, 'hue')
.hook(selectedColor, self.attribute.update, 'assigned')
,
}) })
] const resultHsl = ResultBox({
}), colorSystemName: 'HSL',
Button({ updateCallback: (self, id) => {
child: MaterialIcon('content_copy', 'norm'),
onClicked: (self) => {
Utils.execAsync(['wl-copy', `rgb(${hslToRgbValues(selectedColor.hue, selectedColor.xAxis, selectedColor.yAxis / (1 + selectedColor.xAxis / 100))})`])
self.child.label = 'done';
Utils.timeout(1000, () => self.child.label = 'content_copy');
},
setup: setupCursorHover,
})
]
});
const resultHsl = Box({
children: [
Box({
vertical: true,
hexpand: true,
children: [
Label({
xalign: 0,
className: 'txt-tiny',
label: 'HSL',
}),
Entry({
widthChars: 10,
className: 'txt-small techfont',
attribute: {
id: 2,
update: (self, id) => {
if (id && self.attribute.id === id) return; if (id && self.attribute.id === id) return;
self.text = `${selectedColor.hue},${selectedColor.xAxis}%,${Math.round(selectedColor.yAxis / (1 + selectedColor.xAxis / 100))}%`; self.text = `${selectedColor.hue},${selectedColor.xAxis}%,${Math.round(selectedColor.yAxis / (1 + selectedColor.xAxis / 100))}%`;
}
}, },
setup: (self) => self copyCallback: () => Utils.execAsync(['wl-copy', `hsl(${selectedColor.hue},${selectedColor.xAxis}%,${Math.round(selectedColor.yAxis / (1 + selectedColor.xAxis / 100))}%)`]),
.hook(selectedColor, self.attribute.update, 'sl')
.hook(selectedColor, self.attribute.update, 'hue')
.hook(selectedColor, self.attribute.update, 'assigned')
,
}) })
]
}),
Button({
child: MaterialIcon('content_copy', 'norm'),
onClicked: (self) => {
Utils.execAsync(['wl-copy', `hsl(${selectedColor.hue},${selectedColor.xAxis}%,${Math.round(selectedColor.yAxis / (1 + selectedColor.xAxis / 100))}%)`])
self.child.label = 'done';
Utils.timeout(1000, () => self.child.label = 'content_copy');
},
setup: setupCursorHover,
})
]
});
const result = Box({ const result = Box({
className: 'sidebar-module-colorpicker-result-area spacing-v-5 txt', className: 'sidebar-module-colorpicker-result-area spacing-v-5 txt',
hexpand: true, hexpand: true,