refac: styling

This commit is contained in:
Timothy J. Baek 2024-10-17 00:33:53 -07:00
parent 87d2738864
commit 86adcf33b0
3 changed files with 27 additions and 9 deletions

View File

@ -16,13 +16,21 @@
export let title = null;
export let disabled = false;
export let hide = false;
</script>
<div class={className}>
{#if title !== null}
<!-- svelte-ignore a11y-no-static-element-interactions -->
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div class={buttonClassName} on:pointerup={() => (open = !open)}>
<div
class={buttonClassName}
on:pointerup={() => {
if (!disabled) {
open = !open;
}
}}
>
<div class=" w-fit font-medium transition flex items-center justify-between gap-2">
<div>
{title}
@ -40,7 +48,14 @@
{:else}
<!-- svelte-ignore a11y-no-static-element-interactions -->
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div class={buttonClassName} on:pointerup={() => (open = !open)}>
<div
class={buttonClassName}
on:pointerup={() => {
if (!disabled) {
open = !open;
}
}}
>
<div
class="flex items-center gap-2 text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 transition"
>
@ -49,7 +64,7 @@
</div>
{/if}
{#if open && !disabled}
{#if open && !hide}
<div transition:slide={{ duration: 300, easing: quintOut, axis: 'y' }}>
<slot name="content" />
</div>

View File

@ -637,7 +637,7 @@
name={$i18n.t('Pinned')}
>
<div
class="ml-3 pl-1 mt-[1px] flex flex-col overflow-y-auto scrollbar-hidden border-s dark:border-gray-850"
class="ml-3 pl-1 mt-[1px] flex flex-col overflow-y-auto scrollbar-hidden border-s border-gray-100 dark:border-gray-900"
>
{#each $pinnedChats as chat, idx}
<ChatItem

View File

@ -281,7 +281,7 @@
bind:open
className="w-full"
buttonClassName="w-full"
disabled={(folders[folderId]?.childrenIds ?? []).length === 0 &&
hide={(folders[folderId]?.childrenIds ?? []).length === 0 &&
(folders[folderId].items?.chats ?? []).length === 0}
on:change={(e) => {
dispatch('open', e.detail);
@ -334,8 +334,11 @@
{/if}
</div>
<div
class="absolute z-10 right-2 invisible group-hover:visible self-center flex items-center dark:text-gray-300 touch-auto pointer-events-auto"
<button
class="absolute z-10 right-2 invisible group-hover:visible self-center flex items-center dark:text-gray-300"
on:pointerup={(e) => {
e.stopPropagation();
}}
>
<FolderMenu
on:rename={() => {
@ -345,11 +348,11 @@
deleteHandler();
}}
>
<button class="p-0.5 dark:hover:bg-gray-850 rounded-lg" on:click={(e) => {}}>
<button class="p-0.5 dark:hover:bg-gray-850 rounded-lg touch-auto" on:click={(e) => {}}>
<EllipsisHorizontal className="size-4" strokeWidth="2.5" />
</button>
</FolderMenu>
</div>
</button>
</button>
</div>