Appwrite/console
1
0
Fork 0
mirror of https://github.com/appwrite/console.git synced 2026-06-06 19:27:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(messaging): show users w/o targets as disabled

Browse Source
This commit is contained in:
Steven Nguyen
2024-02-27 20:05:08 +01:00
committed by Torsten Dittmann
parent 02fdd950b6
commit f29089a748
2 changed files with 53 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/collapsibleItem.svelte
+31 -4
View File
@@ -3,10 +3,11 @@
export let withIndentation = false;
export let open = false;
export let disabled = false;
</script>
<li class="collapsible-item">
<details class="collapsible-wrapper" bind:open>
<details class="collapsible-wrapper" class:is-disabled={disabled} bind:open>
<!-- svelte-ignore a11y-no-redundant-roles -->
<summary
class="collapsible-button u-position-relative"
@@ -16,13 +17,18 @@
tabindex="0">
<slot name="beforetitle" />
<div>
<span class="text"><slot name="title" /></span>
<span class="text" class:u-color-text-disabled={disabled}
><slot name="title" /></span>
{#if $$slots.subtitle}
<span class="collapsible-button-optional"><slot name="subtitle" /></span>
<span class="collapsible-button-optional" class:u-color-text-disabled={disabled}
><slot name="subtitle" /></span>
{/if}
</div>
<div class="icon">
<span class="icon-cheveron-down u-font-size-20" aria-hidden="true" />
<span
class="icon-cheveron-down u-font-size-20"
class:u-color-text-disabled={disabled}
aria-hidden="true" />
</div>
</summary>
<div
@@ -33,3 +39,24 @@
</div>
</details>
</li>
<style lang="scss">
// TODO: remove once pink is updated
.collapsible-item {
.collapsible-wrapper.is-disabled {
&[open] .icon-cheveron-down {
rotate: unset;
}
cursor: not-allowed;
* {
cursor: not-allowed;
}
.collapsible {
&-content {
display: none !important;
}
}
}
}
</style>
src/routes/console/project-[project]/messaging/userTargetsModal.svelte
+22 -8
View File
@@ -132,22 +132,20 @@
{@const selectedCount = user.targets.filter(
(target) => selected[target.$id]
).length}
<CollapsibleItem withIndentation>
<CollapsibleItem withIndentation disabled={!user.targets.length}>
<svelte:fragment slot="beforetitle">
<InputCheckbox
id={userId}
size="small"
disabled={user.targets.length > 0 &&
user.targets.every((target) => targetsById[target.$id])}
disabled={!user.targets.length ||
(user.targets.length > 0 &&
user.targets.every((target) => targetsById[target.$id]))}
checked={selectedCount > 0 && selectedCount === user.targets.length}
on:change={(event) => onUserSelection(event, userId)} />
</svelte:fragment>
<svelte:fragment slot="title">
<span class="u-line-height-1-5">
<span
class="body-text-1 u-bold"
style="color:hsl(var(--color-neutral-80))"
data-private>
<span class="user-name body-text-1 u-bold" data-private>
{#if user.name}
{user.name}
{:else if user.email}
@@ -161,7 +159,11 @@
</span>
</svelte:fragment>
<svelte:fragment slot="subtitle">
({selectedCount}/{user.targets.length} targets)
{#if user.targets.length === 0}
(0 targets)
{:else}
({selectedCount}/{user.targets.length} targets)
{/if}
</svelte:fragment>
<FormList>
{#each user.targets as target}
@@ -235,3 +237,15 @@
<Button submit disabled={!hasSelection}>Add</Button>
</svelte:fragment>
</Modal>
<style lang="scss">
:global(.collapsible-wrapper:not(.is-disabled)) {
.user-name {
color: hsl(var(--color-neutral-80));
:global(.theme-dark) & {
color: hsl(var(--color-neutral-20));
}
}
}
</style>