-
-
+
+
+
+
+
+
+ 126,
+ 'lum-input w-full lum-pad-xs hover:': true,
+ }}
+ style={`background: ${color.hex};`}
+ value={color.hex}
+ onInput$={(e, el) => {
+ const picker = document.getElementById(`colorlist-color-${i + 1}-picker`)!;
+ picker.dataset.value = el.value;
+ picker.dispatchEvent(new Event('input'));
+ }}
+ onMouseUp$={() => {
+ const picker = document.getElementById(`colorlist-color-${i + 1}-picker`)!;
+ picker.dataset.value = color.hex;
+ picker.dispatchEvent(new Event('input'));
+ if (tmpstore.opened.id == i && tmpstore.opened.type == 1) return tmpstore.opened.id = -1;
+ else tmpstore.opened = { id: i, type: 1 };
+ const abortController = new AbortController();
+ document.addEventListener('click', (e) => {
+ if (e.target instanceof HTMLElement && !e.target.closest(`#colorlist-color-${i + 1}`) && !e.target.closest(`#colorlist-color-${i + 1}-popup`)) {
+ tmpstore.opened.id = -1;
+ abortController.abort();
+ }
+ }, { signal: abortController.signal });
+ }}
+ />
+
+
+
-
126,
- 'w-full': true,
- }}
- style={`background: ${color.hex};`}
- value={color.hex}
- onInput$={(e, el) => {
- const picker = document.getElementById(`colorlist-color-${i + 1}-picker`)!;
- picker.dataset.value = el.value;
- picker.dispatchEvent(new Event('input'));
- }}
- onMouseUp$={() => {
- const picker = document.getElementById(`colorlist-color-${i + 1}-picker`)!;
- picker.dataset.value = color.hex;
- picker.dispatchEvent(new Event('input'));
- if (tmpstore.opened.id == i && tmpstore.opened.type == 1) return tmpstore.opened.id = -1;
- else tmpstore.opened = { id: i, type: 1 };
- const abortController = new AbortController();
- document.addEventListener('click', (e) => {
- if (e.target instanceof HTMLElement && !e.target.closest(`#colorlist-color-${i + 1}`) && !e.target.closest(`#colorlist-color-${i + 1}-popup`)) {
- tmpstore.opened.id = -1;
- abortController.abort();
- }
- }, { signal: abortController.signal });
- }}
- >
- {t('color.hexColor@@Hex Color')} {i + 1}
-
-
{
{t('color.inputs@@Inputs')}
-
{ store.text = el.value; }}>
- {t('color.inputText@@Input Text')}
-
+
+
+ { store.text = el.value; }}/>
+
-
{
+
+ {
let json: Partial = {};
try {
const preset = loadPreset(el.value);
@@ -508,24 +522,25 @@ export default component$(() => {
json = {
...preset,
};
- } catch (error) {
+ } catch (err) {
const alert = {
class: 'text-red-500',
text: 'color.invalidPreset@@INVALID PRESET! Please report this to the Developers with the preset you tried to import.',
};
- tmpstore.alerts.push(alert);
+ const errtext = {
+ class: 'text-red-300',
+ text: `${err}`,
+ };
+ tmpstore.alerts.push(alert, errtext);
return setTimeout(() => {
tmpstore.alerts.splice(tmpstore.alerts.indexOf(alert), 1);
+ tmpstore.alerts.splice(tmpstore.alerts.indexOf(errtext), 1);
}, 5000);
}
(Object.keys(store) as Array).forEach(key => {
if (store[key] === undefined) return;
(store as any)[key] = json[key] ?? defaults[key];
});
- (Object.keys(animtabstore) as Array).forEach(key => {
- if (animtabstore[key] === undefined) return;
- (animtabstore as any)[key] = json[key] ?? defaults[key];
- });
const alert = {
class: 'text-green-500',
text: 'color.importedPreset@@Successfully imported preset!',
@@ -534,12 +549,10 @@ export default component$(() => {
setTimeout(() => {
tmpstore.alerts.splice(tmpstore.alerts.indexOf(alert), 1);
}, 2000);
- }}>
- {t('color.presets@@Presets')}
-
+ }}/>
-
-
{ store.format.color = el.value; }}>
+
+
+
{ store.format.color = el.value; }}/>
{t('color.placeholders@@Placeholders:')}
$1 = RRGGBB
@@ -639,30 +653,35 @@ export default component$(() => {
- {(store.format.char != undefined && !store.format.bold && !store.format.italic && !store.format.underline && !store.format.strikethrough) &&
-
{ store.format.char = el.value; }}>
- {t('color.format.character@@Format Character')}
-
- }
+ {(store.format.char != undefined && !store.format.bold && !store.format.italic && !store.format.underline && !store.format.strikethrough) && <>
+
+
{ store.format.char = el.value; }}/>
+ }
{!store.format.char &&
- <>
-
{ store.format.bold = el.value; }}>
- Bold
-
-
{ store.format.italic = el.value; }}>
- Italic
-
-
{ store.format.underline = el.value; }}>
- Underline
-
-
{ store.format.strikethrough = el.value; }}>
- Strikethrough
-
-
-
{t('color.placeholders@@Placeholders:')}
-
$t = Output Text
-
-
+ <>
+
+
{ store.format.bold = el.value; }}/>
+
+
{ store.format.italic = el.value; }}/>
+
+
{ store.format.underline = el.value; }}/>
+
+
{ store.format.strikethrough = el.value; }}/>
+
+
{t('color.placeholders@@Placeholders:')}
+
$t = Output Text
+
+
}
@@ -688,11 +707,12 @@ export default component$(() => {
onChange$={(e, el) => { store.strikethrough = el.checked; }}
label={`${t('color.strikethrough@@Strikethrough')} - ${store.format.char ? `${store.format.char}m` : store.format.strikethrough?.replace('$t', '')}`} />
- {store.customFormat &&
-
- }
+
+ { animtabstore.outputFormat = el.value; }}/>
+ }
diff --git a/src/routes/resources/rgb/index.tsx b/src/routes/resources/rgb/index.tsx
index 6ee8a4cf..d5cd0424 100644
--- a/src/routes/resources/rgb/index.tsx
+++ b/src/routes/resources/rgb/index.tsx
@@ -230,7 +230,7 @@ export default component$(() => {
'right-0 items-end': color.pos >= 50,
}}>
{store.colors.length > 2 &&
-