load color picker on click instead of document load and move arrows t…

…o end of colors and tweak numberinput
birdflop · Dec 27, 2023 · ccf08d7 · ccf08d7
1 parent c87efe2
commit ccf08d7
Show file tree

Hide file tree

Showing 7 changed files with 128 additions and 115 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "simplymc",
-  "version": "6.1.0",
+  "version": "6.2.0",
   "description": "The official website for the minecraft multitool simplymc.art",
   "repository": {
     "type": "git",
@@ -47,9 +47,9 @@
     "qwik-ionicons": "^1.0.5",
     "qwik-speak": "^0.19.0",
     "simple-color-picker": "^1.0.5",
-    "tailwindcss": "^3.3.7",
+    "tailwindcss": "^3.4.0",
     "typescript": "5.3.3",
-    "undici": "^6.0.1",
+    "undici": "^6.2.1",
     "vite": "5.0.10",
     "vite-tsconfig-paths": "4.2.2",
     "wrangler": "latest",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/renovate.json b/renovate.json
@@ -4,11 +4,5 @@
     "config:base"
   ],
   "groupName": "All",
-  "baseBranches": ["dev"],
-  "packageRules": [
-    {
-      "matchPackagePatterns": ["*"],
-      "automerge": true
-    }
-  ]
+  "baseBranches": ["dev"]
 }
diff --git a/src/components/elements/ColorInput.tsx b/src/components/elements/ColorInput.tsx
@@ -1,7 +1,8 @@
 
-import { component$, Slot, useVisibleTask$ } from '@builder.io/qwik';
+import { component$, Slot } from '@builder.io/qwik';
 import ColorPicker from 'simple-color-picker';
 import { RawTextInput } from './TextInput';
+import { isServer } from '@builder.io/qwik/build';
 
 // COLOR INPUT
 // ====================
@@ -22,42 +23,46 @@ import { RawTextInput } from './TextInput';
 // ====================
 
 export default component$(({ onInput$, ...props }: any) => {
-  useVisibleTask$(() => {
-    const picker = new ColorPicker({
-      el: document.getElementById(`${props.id}-color-picker`)!,
-      color: props.value,
-      background: '#1D1D1D',
-      width: 150,
-      height: 150,
-    });
-    const textinput = document.getElementById(props.id)! as HTMLInputElement;
-    picker.onChange((color: string) => {
-      textinput.value = color;
-      onInput$(color);
-    });
-    textinput.addEventListener('input', () => {
-      picker.setColor(textinput.value);
-    });
-  });
   return (
-    <div class="flex flex-col">
-      <label for={props.id} class="mb-2">
+    <div>
+      <label for={props.id} class="mb-2 flex">
         <Slot />
       </label>
       <RawTextInput {...props}
-        onFocus$={() => {
-          const picker = document.getElementById(`${props.id}-color-picker`)!;
-          picker.style.display = 'block';
+        onFocus$={(event: InputEvent) => {
+          const pickerDiv = document.getElementById(`${props.id}-color-picker`)!;
+
+          if (!pickerDiv.children.length) {
+            if (isServer) return;
+            const textinput = event.target as HTMLInputElement;
+            const picker = new ColorPicker({
+              el: pickerDiv,
+              color: props.value,
+              background: '#1D1D1D',
+              width: 150,
+              height: 150,
+            });
+            picker.onChange((color: string) => {
+              textinput.value = color;
+              onInput$(color);
+            });
+            textinput.addEventListener('input', () => {
+              picker.setColor(textinput.value);
+            });
+          }
+
+          pickerDiv.style.display = 'block';
         }}
         onBlur$={() => {
-          const picker = document.getElementById(`${props.id}-color-picker`)!;
-          picker.style.display = 'none';
+          const pickerDiv = document.getElementById(`${props.id}-color-picker`)!;
+          pickerDiv.style.display = 'none';
         }}
         style={{
           borderLeft: `40px solid ${props.value}`,
+          width: '100%',
         }}
       />
-      <div id={`${props.id}-color-picker`} class="hidden absolute mt-20" />
+      <div id={`${props.id}-color-picker`} class="hidden absolute mt-2" />
     </div>
   );
 });
diff --git a/src/components/elements/NumberInput.tsx b/src/components/elements/NumberInput.tsx
@@ -21,18 +21,18 @@ export const RawNumberInput = component$(({ input, onDecrement$, onIncrement$, .
     }}>
       <button data-action="decrement" aria-label="Decrement" disabled={props.value <= props.min} onClick$={onDecrement$} class={{
         'flex justify-center items-center transition ease-in-out border border-gray-700 bg-gray-800 text-2xl hover:bg-gray-600 h-full py-1.5 cursor-pointer': true,
-        'w-20 rounded-l-md border-r-0': input,
+        'px-3 rounded-l-md border-r-0': input,
         'w-[50%] rounded-md': !input,
         'opacity-50 pointer-events-none': props.value <= props.min,
       }}>
         <Remove width="24" class="fill-current" />
       </button>
       {
-        input && <input type="number" {...props} class="transition ease-in-out text-lg text-center border border-gray-600 bg-gray-700 text-gray-50 hover:bg-gray-600 focus:bg-gray-500 px-3 py-1 w-[calc(100%-10rem)]" />
+        input && <input type="number" {...props} class="transition ease-in-out text-lg text-center border border-gray-600 bg-gray-700 text-gray-50 hover:bg-gray-600 focus:bg-gray-500 px-3 py-1 w-full" />
       }
       <button data-action="increment" aria-label="Increment" disabled={props.value >= props.max} onClick$={onIncrement$} class={{
         'flex justify-center items-center transition ease-in-out border border-gray-700 bg-gray-800 text-2xl hover:bg-gray-600 h-full py-1.5 cursor-pointer': true,
-        'w-20 rounded-r-md border-l-0': input,
+        'px-3 rounded-r-md border-l-0': input,
         'w-[50%] rounded-md': !input,
         'opacity-50 pointer-events-none': props.value <= props.max,
       }}>

diff --git a/src/routes/animtab/index.tsx b/src/routes/animtab/index.tsx
@@ -13,7 +13,7 @@ import OutputField from '~/components/elements/OutputField';
 import { getAnimFrames, getRandomColor } from '~/components/util/RGBUtils';
 import { AnimationOutput } from '~/components/util/RGBUtils';
 
-import { ColorFillOutline, SettingsOutline, Text } from 'qwik-ionicons';
+import { ChevronDown, ChevronUp, ColorFillOutline, SettingsOutline, Text } from 'qwik-ionicons';
 
 import { inlineTranslate, useSpeak } from 'qwik-speak';
 import { getCookie } from '~/components/util/SharedUtils';
@@ -205,50 +205,61 @@ export default component$(() => {
           </div>
         </div>
 
-        <div class="grid sm:grid-cols-4 gap-2">
-          <div class="sm:pr-4 hidden sm:flex flex-col gap-3 relative" id="colors">
-            <NumberInput id="colorsinput" onIncrement$={() => { if (store.colors.length < store.text.length) { store.colors.push(getRandomColor()); setCookie(JSON.stringify(store)); } }} onDecrement$={() => { if (store.colors.length > 2) { store.colors.pop(); setCookie(JSON.stringify(store)); } }}>
+        <div class="grid sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+          <div class="hidden sm:flex flex-col gap-3 relative" id="colors">
+            <NumberInput id="colorsinput"
+              onIncrement$={() => {
+                if (store.colors.length < store.text.length) {
+                  store.colors.push(getRandomColor());
+                  setCookie(JSON.stringify(store));
+                }
+              }}
+              onDecrement$={() => {
+                if (store.colors.length > 2) {
+                  store.colors.pop();
+                  setCookie(JSON.stringify(store));
+                }
+              }}
+            >
               {t('color.colorAmount@@Color Amount')} - {store.colors.length}
             </NumberInput>
-            <NumberInput id="length" step={1} min={1} onIncrement$={() => { store.length++; setCookie(JSON.stringify(store)); }} onDecrement$={() => { if (store.length > 1) store.length--; setCookie(JSON.stringify(store)); }}>
+            <NumberInput id="length" step={1} min={1} onIncrement$={() => {
+              store.length++;
+              setCookie(JSON.stringify(store));
+            }} onDecrement$={() => {
+              if (store.length > 1) store.length--;
+              setCookie(JSON.stringify(store));
+            }}>
               {t('animtab.length@@Gradient Length')} - {store.length * store.text.length}
             </NumberInput>
             <div class="flex flex-col gap-2 overflow-auto sm:max-h-[500px]">
               {store.colors.map((color: string, i: number) => {
-                return (
+                return <div key={`color${i + 1}`} class="flex items-end">
                   <ColorInput
-                    key={`color${i + 1}`}
                     id={`color${i + 1}`}
                     value={color}
                     onInput$={(newColor: string) => {
                       store.colors[i] = newColor;
                       setCookie(JSON.stringify(store));
                     }}
                   >
-                    <button
-                      onClick$={() => {
-                        handleSwap(i, i - 1);
-                      }}
-                      class={'pe-2'}
-                    >
-                      ↑
-                    </button>
-                    <button
-                      onClick$={() => {
-                        handleSwap(i, i + 1);
-                      }}
-                      class={'pe-4'}
-                    >
-                      ↓
-                    </button>
                     {t('color.hexColor@@Hex Color')} {i + 1}
                   </ColorInput>
-                );
+                  <div class="bg-gray-800 flex ml-2 rounded-md border border-gray-700">
+                    <button onClick$={() => handleSwap(i, i - 1)} class="hover:bg-gray-700 px-2 py-3 rounded-l-md transition-all">
+                      <ChevronUp width="20" />
+                    </button>
+                    <div class="bg-gray-700 w-px" />
+                    <button onClick$={() => handleSwap(i, i + 1)} class="hover:bg-gray-700 px-2 py-3 rounded-r-md transition-all">
+                      <ChevronDown width="20" />
+                    </button>
+                  </div>
+                </div>;
               })}
             </div>
           </div>
-          <div class="sm:col-span-3">
-            <div class="flex sm:flex flex-col gap-3" id="inputs">
+          <div class="md:col-span-2 lg:col-span-3">
+            <div class="flex flex-col gap-3" id="inputs">
               <TextInput id="nameinput" value={store.name} placeholder="name" onInput$={(event: any) => { store.name = event.target!.value; setCookie(JSON.stringify(store)); }}>
                 {t('animtab.animationName@@Animation Name')}
               </TextInput>
@@ -257,7 +268,7 @@ export default component$(() => {
                 {t('color.inputText@@Input Text')}
               </TextInput>
 
-              <div class="grid sm:grid-cols-2 sm:gap-2">
+              <div class="flex flex-col md:grid grid-cols-2 gap-2">
                 <NumberInput id="speed" input value={store.speed} extraClass="w-full" step={50} min={50} onInput$={(event: any) => { store.speed = Number(event.target!.value); setCookie(JSON.stringify(store)); }} onIncrement$={() => { store.speed = Number(store.speed) + 50; setCookie(JSON.stringify(store)); }} onDecrement$={() => { store.speed = Number(store.speed) - 50; setCookie(JSON.stringify(store)); }}>
                   {t('animtab.speed@@Speed')}
                 </NumberInput>