your personal website on atproto - mirror
blento.app
lala
+60
-5
+60
-5
src/lib/cards/BaseCard/BaseEditingCard.svelte
+60
-5
src/lib/cards/BaseCard/BaseEditingCard.svelte
···
3
3
import type { HTMLAttributes } from 'svelte/elements';
4
4
import BaseCard from './BaseCard.svelte';
5
5
import type { Item } from '$lib/types';
6
-
import { Button, Popover } from '@foxui/core';
7
-
import { getCanEdit, getIsMobile } from '$lib/helper';
6
+
import { Button, Input, Popover } from '@foxui/core';
7
+
import { getCanEdit } from '$lib/helper';
8
8
import { ColorSelect } from '@foxui/colors';
9
9
import { CardDefinitionsByType, getColor } from '..';
10
10
import { COLUMNS } from '$lib';
11
+
import { dev } from '$app/environment';
11
12
12
13
let colorsChoices = [
13
14
{ class: 'text-base-500', label: 'base' },
···
57
58
58
59
const cardDef = $derived(CardDefinitionsByType[item.cardType]);
59
60
60
-
const minW = $derived(cardDef.minW ?? 0);
61
-
const minH = $derived(cardDef.minH ?? 0);
61
+
const minW = $derived(cardDef.minW ?? 1);
62
+
const minH = $derived(cardDef.minH ?? 1);
62
63
63
64
const maxW = $derived(cardDef.maxW ?? COLUMNS);
64
65
const maxH = $derived(cardDef.maxH ?? COLUMNS);
···
68
69
69
70
return w >= minW && w <= maxW && h >= minH && h <= maxH;
70
71
}
72
+
73
+
let customSizePopoverOpen = $state(false);
71
74
</script>
72
75
73
76
<BaseCard {item} {...rest} isEditing={true} bind:ref>
···
104
107
<div
105
108
class={[
106
109
'absolute -bottom-7 z-50 w-full items-center justify-center text-xs group-focus-within:inline-flex group-hover:inline-flex',
107
-
colorPopoverOpen ? 'inline-flex' : 'hidden'
110
+
colorPopoverOpen || customSizePopoverOpen ? 'inline-flex' : 'hidden'
108
111
]}
109
112
>
110
113
<div
···
198
201
</button>
199
202
{/if}
200
203
204
+
{#if dev}
205
+
<Popover bind:open={customSizePopoverOpen}>
206
+
{#snippet child({ props })}
207
+
<button {...props} class="hover:bg-accent-500/10 cursor-pointer rounded-xl p-2">
208
+
<div
209
+
class="border-base-900 dark:border-base-50 h-5 w-5 rounded-sm border-2"
210
+
></div>
211
+
212
+
<span class="sr-only">set size to 2x2</span>
213
+
</button>
214
+
{/snippet}
215
+
216
+
<div class="flex flex-col gap-4">
217
+
<div>
218
+
<Button
219
+
onclick={() => {
220
+
if (canSetSize(item.w - 1, item.h)) {
221
+
onsetsize?.(item.w - 1, item.h);
222
+
}
223
+
}}>-</Button
224
+
>
225
+
226
+
<Button
227
+
onclick={() => {
228
+
if (canSetSize(item.w + 1, item.h)) {
229
+
onsetsize?.(item.w + 1, item.h);
230
+
}
231
+
}}>+</Button
232
+
>
233
+
</div>
234
+
235
+
<div>
236
+
<Button
237
+
onclick={() => {
238
+
if (canSetSize(item.w, item.h - 1)) {
239
+
onsetsize?.(item.w, item.h - 1);
240
+
}
241
+
}}>-</Button
242
+
>
243
+
244
+
<Button
245
+
onclick={() => {
246
+
if (canSetSize(item.w, item.h + 1)) {
247
+
onsetsize?.(item.w, item.h + 1);
248
+
}
249
+
}}>+</Button
250
+
>
251
+
</div>
252
+
</div>
253
+
</Popover>
254
+
{/if}
255
+
201
256
{#if onshowsettings}
202
257
<button
203
258
onclick={() => {