Skip to content

Commit

Permalink
copy to animtab
Browse files Browse the repository at this point in the history
  • Loading branch information
@saboooor
saboooor committed Jun 12, 2024
1 parent 404e9aa commit fbaa760
Showing 1 changed file with 74 additions and 53 deletions.
127 changes: 74 additions & 53 deletions src/routes/resources/animtab/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,11 @@ import { $, component$, useStore, useTask$, useVisibleTask$ } from '@builder.io/
import { routeLoader$, type DocumentHead } from '@builder.io/qwik-city';

import { defaults, loadPreset, presets, types, v3formats } from '~/components/util/PresetUtils';
import { AnimationOutput, getAnimFrames, getRandomColor } from '~/components/util/RGBUtils';
import { AnimationOutput, convertToRGB, getAnimFrames, getBrightness, getRandomColor } from '~/components/util/RGBUtils';

import { ChevronDown, ChevronUp, ColorFillOutline, SettingsOutline, Text } from 'qwik-ionicons';
import { Add, ChevronDown, ChevronUp, ColorFillOutline, Remove, SettingsOutline, Text, TrashOutline } from 'qwik-ionicons';

import { Button, ColorInput, Header, NumberInput, Dropdown, TextArea, TextInput, Toggle } from '@luminescent/ui';
import { Button, Header, NumberInput, Dropdown, TextArea, TextInput, Toggle, ColorPicker } from '@luminescent/ui';
import { inlineTranslate, useSpeak } from 'qwik-speak';
import { getCookies, setCookies } from '~/components/util/SharedUtils';
import { isBrowser } from '@builder.io/qwik/build';
Expand Down Expand Up @@ -46,6 +46,7 @@ export default component$(() => {
...animTABDefaults,
...unsupportedDefaults,
...cookies,
opened: -1,
alerts: [] as {
class: string,
text: string,
Expand Down Expand Up @@ -173,11 +174,65 @@ export default component$(() => {
</div>
</div>

<div class="flex gap-2 my-4 items-center">
<Button square disabled={store.colors.length < 3} transparent aria-label="Remove Color" onClick$={() => {
const newColors = [...store.colors];
newColors.pop();
store.colors = newColors;
}}>
<Remove width="24" />
</Button>
<div class="w-full h-3 rounded-full flex justify-between items-center" style={`background: linear-gradient(to right, ${store.colors.join(', ')});`}>
{store.colors.map((color: string, i: number) => <div class="relative mt-1" key={i}>
<button key={`color${i + 1}`} id={`color${i + 1}`}
class={{
'transition-transform w-5 h-5 hover:scale-125 rounded-full shadow-md border': true,
'border-white': getBrightness(convertToRGB(color)) < 126,
'border-black': getBrightness(convertToRGB(color)) > 126,
}}
style={`background: ${color};`}
onFocus$={() => {
const abortController = new AbortController();
document.addEventListener('click', (e) => {
if (e.target instanceof HTMLElement && !e.target.closest(`#color${i + 1}`) && !e.target.closest(`#color${i + 1}-picker`)) {
if (store.opened == i) store.opened = -1;
abortController.abort();
}
}, { signal: abortController.signal });
store.opened = i;
}}
/>
<ColorPicker
id={`color${i + 1}`}
value={color}
class={{
'motion-safe:transition-all absolute top-full mt-2 gap-1 z-[1000]': true,
'opacity-0 scale-95 pointer-events-none': store.opened != i,
'left-0': i + 1 < Math.round(store.colors.length / 2),
'right-0': i + 1 >= Math.round(store.colors.length / 2),
}}
onInput$={(newColor: string) => {
const newColors = [...store.colors];
newColors[i] = newColor;
store.colors = newColors;
}}
horizontal
/>
</div>,
)}
</div>
<Button square disabled={store.colors.length > store.text.length} transparent aria-label="Add Color" onClick$={() => {
const newColors = [...store.colors, getRandomColor()];
store.colors = newColors;
}}>
<Add width="24" class="fill-white" />
</Button>
</div>

<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">
<h1 class="hidden sm:flex text-2xl font-bold text-gray-50 gap-4 items-center justify-center">
<ColorFillOutline width="32" />
{t('color.colors@@Colors')}
<h1>
idk where to put these buttons yet
</h1>
<Dropdown id="color-preset" class={{ 'w-full': true }} onChange$={
(event: any) => {
Expand All @@ -190,62 +245,28 @@ export default component$(() => {
]} value={Object.keys(presets).find((preset: any) => presets[preset as keyof typeof presets].toString() == store.colors.toString()) ?? 'custom'}>
{t('color.colorPreset@@Color Preset')}
</Dropdown>
<NumberInput id="length" input disabled value={store.length * store.text.length} min={store.text.length} class={{ 'w-full': true }}
onIncrement$={() => {
store.length++;
}}
onDecrement$={() => {
if (store.length > 1) store.length--;
}}
>
{t('animtab.length@@Gradient Length')}
</NumberInput>
<NumberInput input min={2} value={store.colors.length} id="colorsinput" class={{ 'w-full': true }}
onChange$={(event: any) => {
if (event.target!.value < 2) event.target!.value = 2;
const newColors = [];
for (let i = 0; i < event.target!.value; i++) {
if (store.colors[i]) newColors.push(store.colors[i]);
else newColors.push(getRandomColor());
}
store.colors = newColors;
}}
onIncrement$={() => {
const newColors = [...store.colors, getRandomColor()];
store.colors = newColors;
}}
onDecrement$={() => {
const newColors = [...store.colors];
newColors.pop();
store.colors = newColors;
}}
>
{t('color.colorAmount@@Color Amount')}
</NumberInput>
<div class="flex flex-col gap-2">
{store.colors.map((color: string, i: number) => {
return <div key={`color${i + 1}`} class="flex items-end">
<ColorInput
id={`color${i + 1}`}
value={color}
onInput$={(newColor: string) => {
<div class="flex rounded-md gap-2 p-1 w-full items-center" style={{
background: color,
color: getBrightness(convertToRGB(color)) > 126 ? 'black' : 'white',
}}>
<Button square size='sm' color="red" onClick$={() => {
const newColors = [...store.colors];
newColors[i] = newColor;
newColors.splice(i, 1);
store.colors = newColors;
}}
class={{ 'w-full': true }}
presetColors={store.colors}
>
{t('color.hexColor@@Hex Color')} {i + 1}
</ColorInput>
<div class="bg-gray-800 flex ml-2 rounded-md border border-gray-700">
<Button square onClick$={() => handleSwap(i, i - 1)} class={{ 'border-0': true }}>
}
}>
<TrashOutline width="20" />
</Button>
<Button square size='sm' onClick$={() => handleSwap(i, i - 1)}>
<ChevronUp width="20" />
</Button>
<div class="bg-gray-700 w-px" />
<Button square onClick$={() => handleSwap(i, i + 1)} class={{ 'border-0': true }}>
<Button square size='sm' onClick$={() => handleSwap(i, i + 1)}>
<ChevronDown width="20" />
</Button>
{color}
</div>
</div>;
})}
Expand Down

0 comments on commit fbaa760

Please sign in to comment.