ptr.pet
+17
-22
src/components/BskyPost.svelte
+17
-22
src/components/BskyPost.svelte
···
324
324
onClick,
325
325
isFull,
326
326
hasSolid,
327
-
canBeDisabled = true
327
+
canBeDisabled = true,
328
+
iconColor = color
328
329
}: {
329
330
name: string;
330
331
icon: string;
···
332
333
isFull?: boolean;
333
334
hasSolid?: boolean;
334
335
canBeDisabled?: boolean;
336
+
iconColor?: string;
335
337
})}
336
338
<button
337
339
class="
338
-
px-2 py-1.5 text-(--nucleus-fg)/90 transition-all
340
+
px-1.75 py-1.5 text-(--nucleus-fg)/90 transition-all
339
341
duration-100 not-disabled:hover:[backdrop-filter:brightness(120%)]
340
342
disabled:cursor-not-allowed!
341
343
"
342
344
onclick={(e) => onClick(e)}
343
-
style="color: {isFull ? color : 'color-mix(in srgb, var(--nucleus-fg) 90%, transparent)'}"
345
+
style="color: {isFull ? iconColor : 'color-mix(in srgb, var(--nucleus-fg) 90%, transparent)'}"
344
346
title={name}
345
347
disabled={canBeDisabled ? selectedDid === null : false}
346
348
>
···
410
412
{/if}
411
413
412
414
{#snippet trigger()}
413
-
<div
414
-
class="
415
-
w-fit items-center rounded-sm transition-opacity
416
-
duration-100 ease-in-out group-hover:opacity-100
417
-
{!actionsOpen && !Device.isMobile ? 'opacity-0' : ''}
418
-
"
419
-
style="background: {color}1f;"
420
-
>
421
-
{@render control({
422
-
name: 'actions',
423
-
icon: 'heroicons:ellipsis-horizontal-16-solid',
424
-
onClick: (e: MouseEvent) => {
425
-
e.stopPropagation();
426
-
actionsOpen = !actionsOpen;
427
-
actionsPos = { x: 0, y: 0 };
428
-
},
429
-
canBeDisabled: false
430
-
})}
431
-
</div>
415
+
{@render control({
416
+
name: 'actions',
417
+
icon: 'heroicons:ellipsis-horizontal-16-solid',
418
+
onClick: (e: MouseEvent) => {
419
+
e.stopPropagation();
420
+
actionsOpen = !actionsOpen;
421
+
actionsPos = { x: 0, y: 0 };
422
+
},
423
+
canBeDisabled: false,
424
+
isFull: true,
425
+
iconColor: 'color-mix(in srgb, var(--nucleus-fg) 70%, transparent)'
426
+
})}
432
427
{/snippet}
433
428
</Dropdown>
434
429
</div>