Fixed size and space for Collaborative users (#5506)

Signed-off-by: Alexander Platov <alexander.platov@hardcoreeng.com>
This commit is contained in:
Alexander Platov 2024-05-04 07:09:42 +03:00 committed by GitHub
parent 610bfda5e6
commit 0611820bbf
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 28 additions and 31 deletions

View File

@ -66,32 +66,22 @@
</script>
{#if states.length > 0}
<div class="container flex-col flex-gap-2 pt-2">
{#each states as state}
<Button
kind="icon"
shape="round-small"
padding="0"
size="x-small"
noFocus
on:click={(e) => {
e.preventDefault()
e.stopPropagation()
goToCursor(state)
}}
>
<svelte:fragment slot="icon">
<svelte:component this={component} user={state.user} lastUpdate={state.lastUpdate ?? 0} size={'x-small'} />
</svelte:fragment>
</Button>
{/each}
</div>
{#each states as state}
<Button
kind="icon"
shape="round-small"
padding="0"
size="x-small"
noFocus
on:click={(e) => {
e.preventDefault()
e.stopPropagation()
goToCursor(state)
}}
>
<svelte:fragment slot="icon">
<svelte:component this={component} user={state.user} lastUpdate={state.lastUpdate ?? 0} size={'x-small'} />
</svelte:fragment>
</Button>
{/each}
{/if}
<style lang="scss">
.container {
position: sticky;
top: 0;
width: 1.5rem;
}
</style>

View File

@ -556,9 +556,11 @@
<div class="textInput">
<div class="select-text" class:hidden={loading} style="width: 100%;" bind:this={element} />
{#if remoteProvider && editor && userComponent}
<CollaborationUsers provider={remoteProvider} {editor} component={userComponent} />
{/if}
<div class="collaborationUsers-container flex-col flex-gap-2 pt-2">
{#if remoteProvider && editor && userComponent}
<CollaborationUsers provider={remoteProvider} {editor} component={userComponent} />
{/if}
</div>
</div>
{#if refActions.length > 0}
@ -630,6 +632,11 @@
}
}
}
.collaborationUsers-container {
position: sticky;
top: 0;
min-width: 1.5rem;
}
.hidden {
display: none;