use shared Tooltip for room permission chips

This commit is contained in:
nayan9617
2026-04-05 00:45:28 +05:30
committed by hodlbod
parent 21122a795e
commit 3c28419217
+26 -25
View File
@@ -22,6 +22,7 @@
import Button from "@lib/components/Button.svelte" import Button from "@lib/components/Button.svelte"
import Popover from "@lib/components/Popover.svelte" import Popover from "@lib/components/Popover.svelte"
import Confirm from "@lib/components/Confirm.svelte" import Confirm from "@lib/components/Confirm.svelte"
import Tooltip from "@lib/components/Tooltip.svelte"
import Modal from "@lib/components/Modal.svelte" import Modal from "@lib/components/Modal.svelte"
import ModalBody from "@lib/components/ModalBody.svelte" import ModalBody from "@lib/components/ModalBody.svelte"
import ModalFooter from "@lib/components/ModalFooter.svelte" import ModalFooter from "@lib/components/ModalFooter.svelte"
@@ -206,39 +207,39 @@
<strong class="text-lg">Room Permissions</strong> <strong class="text-lg">Room Permissions</strong>
<div class="flex gap-2 flex-wrap"> <div class="flex gap-2 flex-wrap">
{#if $room?.isRestricted} {#if $room?.isRestricted}
<Button <Tooltip content="Only members can send messages.">
class="btn btn-neutral btn-xs rounded-full tooltip tooltip-right overflow-visible flex gap-2 items-center" <Button class="btn btn-neutral btn-xs rounded-full flex gap-2 items-center">
data-tip="Only members can send messages."> <Icon size={4} icon={Microphone} /> Restricted
<Icon size={4} icon={Microphone} /> Restricted </Button>
</Button> </Tooltip>
{/if} {/if}
{#if $room?.isPrivate} {#if $room?.isPrivate}
<Button <Tooltip content="Only members can view messages.">
class="btn btn-neutral btn-xs rounded-full tooltip tooltip-right overflow-visible flex gap-2 items-center" <Button class="btn btn-neutral btn-xs rounded-full flex gap-2 items-center">
data-tip="Only members can view messages."> <Icon size={4} icon={Lock} /> Private
<Icon size={4} icon={Lock} /> Private </Button>
</Button> </Tooltip>
{/if} {/if}
{#if $room?.isHidden} {#if $room?.isHidden}
<Button <Tooltip content="This room is not visible to non-members.">
class="btn btn-neutral btn-xs rounded-full tooltip tooltip-right overflow-visible flex gap-2 items-center" <Button class="btn btn-neutral btn-xs rounded-full flex gap-2 items-center">
data-tip="This room is not visible to non-members."> <Icon size={4} icon={EyeClosed} /> Hidden
<Icon size={4} icon={EyeClosed} /> Hidden </Button>
</Button> </Tooltip>
{/if} {/if}
{#if $room?.isClosed} {#if $room?.isClosed}
<Button <Tooltip content="Requests to join this room will be ignored.">
class="btn btn-neutral btn-xs rounded-full tooltip tooltip-right overflow-visible flex gap-2 items-center" <Button class="btn btn-neutral btn-xs rounded-full flex gap-2 items-center">
data-tip="Requests to join this room will be ignored."> <Icon size={4} icon={MinusCircle} /> Closed
<Icon size={4} icon={MinusCircle} /> Closed </Button>
</Button> </Tooltip>
{/if} {/if}
{#if !$room?.isRestricted && !$room?.isPrivate && !$room?.isHidden && !$room?.isClosed} {#if !$room?.isRestricted && !$room?.isPrivate && !$room?.isHidden && !$room?.isClosed}
<Button <Tooltip content="This room has no additional access controls.">
class="btn btn-neutral btn-xs rounded-full tooltip tooltip-right overflow-visible flex gap-2 items-center" <Button class="btn btn-neutral btn-xs rounded-full flex gap-2 items-center">
data-tip="This room has no additional access controls."> <Icon size={4} icon={Eye} /> Public
<Icon size={4} icon={Eye} /> Public </Button>
</Button> </Tooltip>
{/if} {/if}
</div> </div>
</div> </div>