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

View File

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