refac: styling

This commit is contained in:
Timothy Jaeryang Baek
2025-01-19 12:46:02 -08:00
parent bdc60e7850
commit 59c349de00
4 changed files with 103 additions and 87 deletions

View File

@@ -37,6 +37,18 @@
});
$: onChange(accessControl);
$: if (selectedGroupId) {
onSelectGroup();
}
const onSelectGroup = () => {
if (selectedGroupId !== '') {
accessControl.read.group_ids = [...accessControl.read.group_ids, selectedGroupId];
selectedGroupId = '';
}
};
</script>
<div class=" rounded-lg flex flex-col gap-2">
@@ -126,7 +138,42 @@
</div>
</div>
<div class="flex flex-col gap-2">
<div class="mb-1">
<div class="flex w-full">
<div class="flex flex-1 items-center">
<div class="w-full px-0.5">
<select
class="outline-none bg-transparent text-sm rounded-lg block w-full pr-10 max-w-full
{selectedGroupId ? '' : 'text-gray-500'}
dark:placeholder-gray-500"
bind:value={selectedGroupId}
>
<option class=" text-gray-700" value="" disabled selected
>{$i18n.t('Select a group')}</option
>
{#each groups.filter((group) => !accessControl.read.group_ids.includes(group.id)) as group}
<option class=" text-gray-700" value={group.id}>{group.name}</option>
{/each}
</select>
</div>
<!-- <div>
<Tooltip content={$i18n.t('Add Group')}>
<button
class=" p-1 rounded-xl bg-transparent dark:hover:bg-white/5 hover:bg-black/5 transition font-medium text-sm flex items-center space-x-1"
type="button"
on:click={() => {}}
>
<Plus className="size-3.5" />
</button>
</Tooltip>
</div> -->
</div>
</div>
</div>
<hr class=" border-gray-100 dark:border-gray-700/10 mt-1.5 mb-2.5 w-full" />
<div class="flex flex-col gap-2 mb-1 px-0.5">
{#if accessGroups.length > 0}
{#each accessGroups as group}
<div class="flex items-center gap-3 justify-between text-xs w-full transition">
@@ -140,9 +187,9 @@
</div>
</div>
<div class="w-full flex justify-end">
<div class="w-full flex justify-end items-center gap-0.5">
<button
class=" translate-y-0.5"
class=""
type="button"
on:click={() => {
if (accessControl.write.group_ids.includes(group.id)) {
@@ -188,48 +235,6 @@
{/if}
</div>
</div>
<hr class=" my-2 border-black/5 dark:border-white/5" />
<div class="mb-1">
<div class="flex w-full">
<div class="flex flex-1 items-center">
<div class="w-full">
<select
class="outline-none bg-transparent text-sm font-medium rounded-lg block w-full pr-10 max-w-full dark:placeholder-gray-700"
bind:value={selectedGroupId}
>
<option class=" text-gray-700" value="" disabled selected
>{$i18n.t('Select a group')}</option
>
{#each groups.filter((group) => !accessControl.read.group_ids.includes(group.id)) as group}
<option class=" text-gray-700" value={group.id}>{group.name}</option>
{/each}
</select>
</div>
<div>
<Tooltip content={$i18n.t('Add Group')}>
<button
class=" p-1 rounded-xl bg-transparent dark:hover:bg-white/5 hover:bg-black/5 transition font-medium text-sm flex items-center space-x-1"
type="button"
on:click={() => {
if (selectedGroupId !== '') {
accessControl.read.group_ids = [
...accessControl.read.group_ids,
selectedGroupId
];
selectedGroupId = '';
}
}}
>
<Plus className="size-3.5" />
</button>
</Tooltip>
</div>
</div>
</div>
</div>
</div>
{/if}
</div>