Skip to content

Commit

Permalink
New layout (perhaps)
Browse files Browse the repository at this point in the history
  • Loading branch information
@saboooor
saboooor committed May 6, 2024
1 parent 580846e commit 8378151
Showing 1 changed file with 56 additions and 43 deletions.
99 changes: 56 additions & 43 deletions src/routes/resources/rgb/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -149,6 +149,10 @@ export default component$(() => {

<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>
<Dropdown id="color-preset" class={{ 'w-full': true }} onChange$={
(event: any) => {
if (event.target!.value == 'custom') return;
Expand Down Expand Up @@ -180,7 +184,7 @@ export default component$(() => {
>
{t('color.colorAmount@@Color Amount')}
</NumberInput>
<div class="flex flex-col gap-2 overflow-auto sm:h-[500px]">
<div class="flex flex-col gap-2 sm:overflow-auto sm:h-[500px]">
{store.colors.map((color: string, i: number) => {
return <div key={`color${i + 1}`} class="flex items-end">
<ColorInput
Expand All @@ -207,8 +211,12 @@ export default component$(() => {
})}
</div>
</div>
<div class="md:col-span-2 lg:col-span-3">
<div class="flex flex-col gap-3" id="inputs">
<div class="md:col-span-2 lg:col-span-3 sm:grid grid-cols-3 gap-4">
<div class="flex flex-col gap-3 col-span-2" id="inputs">
<h1 class="hidden sm:flex text-2xl font-bold text-gray-50 gap-4 items-center justify-center">
<SettingsOutline width="32" />
{t('color.inputs@@Inputs')}
</h1>
<TextInput id="input" value={store.text} placeholder="birdflop" onInput$={(event: any) => { store.text = event.target!.value; }}>
{t('color.inputText@@Input Text')}
</TextInput>
Expand Down Expand Up @@ -243,8 +251,8 @@ export default component$(() => {
]}>
{t('color.colorFormat@@Color Format')}
</Dropdown>
<TextInput id="formatchar" value={store.formatchar} placeholder="&" onInput$={(event: any) => { store.formatchar = event.target!.value; }}>
{t('color.formatCharacter@@Format Character')}
<TextInput id="prefix" value={store.prefix} placeholder={t('gradient.prefixPlaceholder@@example: \'/nick \'')} onInput$={(event: any) => { store.prefix = event.target!.value; }}>
{t('gradient.prefix@@Prefix (Usually used for commands)')}
</TextInput>
</div>

Expand All @@ -267,11 +275,7 @@ export default component$(() => {
</>
}

<TextInput id="prefix" value={store.prefix} placeholder={t('gradient.prefixPlaceholder@@example: \'/nick \'')} onInput$={(event: any) => { store.prefix = event.target!.value; }}>
{t('gradient.prefix@@Prefix (Usually used for commands)')}
</TextInput>

<div class="flex flex-col sm:flex-row sm:items-end gap-2">
<div class="flex flex-col gap-2">
<TextInput id="import" name="import" placeholder={t('color.import@@Import (Paste here)')} onInput$={async (event: any) => {
let json: any;
try {
Expand Down Expand Up @@ -301,44 +305,53 @@ export default component$(() => {
}}>
{t('color.presets@@Presets')}
</TextInput>
<Button id="export" size="sm" onClick$={() => {
navigator.clipboard.writeText(JSON.stringify({ version: presetVersion, ...store, alerts: undefined }));
const alert = {
class: 'text-green-500',
text: 'color.exportedPreset@@Successfully exported preset to clipboard!',
};
store.alerts.push(alert);
setTimeout(() => {
store.alerts.splice(store.alerts.indexOf(alert), 1);
}, 2000);
}}>
{t('color.export@@Export')}
</Button>
<Button id="createurl" size="sm" onClick$={() => {
const base_url = `${window.location.protocol}//${window.location.host}${window.location.pathname}`;
const url = new URL(base_url);
const params = { ...store, alerts: undefined };
Object.entries(params).forEach(([key, value]) => {
url.searchParams.set(key, String(value));
});
window.history.pushState({}, '', url.href);
const alert = {
class: 'text-green-500',
text: 'color.exportedPresetUrl@@Successfully exported preset to url!',
};
store.alerts.push(alert);
setTimeout(() => {
store.alerts.splice(store.alerts.indexOf(alert), 1);
}, 2000);
}}>
{t('color.url@@Export As URL')}
</Button>
<div class="flex gap-2">
<Button id="export" size="sm" onClick$={() => {
navigator.clipboard.writeText(JSON.stringify({ version: presetVersion, ...store, alerts: undefined }));
const alert = {
class: 'text-green-500',
text: 'color.exportedPreset@@Successfully exported preset to clipboard!',
};
store.alerts.push(alert);
setTimeout(() => {
store.alerts.splice(store.alerts.indexOf(alert), 1);
}, 2000);
}}>
{t('color.export@@Export')}
</Button>
<Button id="createurl" size="sm" onClick$={() => {
const base_url = `${window.location.protocol}//${window.location.host}${window.location.pathname}`;
const url = new URL(base_url);
const params = { ...store, alerts: undefined };
Object.entries(params).forEach(([key, value]) => {
url.searchParams.set(key, String(value));
});
window.history.pushState({}, '', url.href);
const alert = {
class: 'text-green-500',
text: 'color.exportedPresetUrl@@Successfully exported preset to url!',
};
store.alerts.push(alert);
setTimeout(() => {
store.alerts.splice(store.alerts.indexOf(alert), 1);
}, 2000);
}}>
{t('color.url@@Export As URL')}
</Button>
</div>
</div>
{store.alerts.map((alert: any, i: number) => (
<p key={`preset-alert${i}`} class={alert.class} dangerouslySetInnerHTML={t(alert.text)} />
))}
</div>
<div class="sm:mt-6 mb-4 hidden sm:flex flex-col gap-4" id="formatting">
<div class="mb-4 hidden sm:flex flex-col gap-3" id="formatting">
<h1 class="hidden sm:flex text-2xl font-bold fill-current text-gray-50 gap-4 items-center justify-center">
<Text width="32" />
{t('color.colors@@Formatting')}
</h1>
<TextInput id="formatchar" value={store.formatchar} placeholder="&" onInput$={(event: any) => { store.formatchar = event.target!.value; }}>
{t('color.formatCharacter@@Format Character')}
</TextInput>
<Toggle id="bold" checked={store.bold}
onChange$={(event: any) => { store.bold = event.target!.checked; }}
label={`${t('color.bold@@Bold')} - ${store.formatchar}l`} />
Expand Down

0 comments on commit 8378151

Please sign in to comment.