Fix Activity and ScrollBox components. Gap in Dialog footer. (#57)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov 2021-08-25 09:47:52 +03:00 committed by GitHub
parent 7e6ef57143
commit 9ac799f30a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 56 additions and 34 deletions

View File

@ -34,15 +34,15 @@
<div class="dialog-container">
<form class="dialog" on:submit|preventDefault={() => { okAction(); dispatch('close') }}>
<div class="flex-between header">
<div class="title"><Label {label}/></div>
<div class="tool" on:click={() => { dispatch('close') }}><Close size={'small'}/></div>
<div class="title"><Label {label} /></div>
<div class="tool" on:click={() => { dispatch('close') }}><Close size={'small'} /></div>
</div>
<div class="content">
<ScrollBox vertical gap={0}><slot/></ScrollBox>
<ScrollBox vertical stretch><slot /></ScrollBox>
</div>
<div class="footer">
<Button label={okLabel} primary/>
<Button label={'Cancel'} on:click={() => { dispatch('close') }}/>
<Button label={'Cancel'} on:click={() => { dispatch('close') }} />
<Button label={okLabel} primary />
</div>
</form>
</div>
@ -55,14 +55,14 @@
flex-direction: row-reverse;
width: 100vw;
min-height: 100vh;
height: 100vh;
max-height: 100vh;
.dialog {
display: flex;
flex-direction: column;
width: auto;
width: 45rem;
min-height: 100vh;
height: 100vh;
max-height: 100vh;
background-color: var(--theme-bg-color);
border-radius: 1.875rem 0 0 1.875rem;
box-shadow: 0px 3.125rem 7.5rem rgba(0, 0, 0, .4);
@ -90,21 +90,22 @@
.content {
flex-shrink: 0;
width: 40rem;
flex-grow: 1;
margin: 0 2.5rem;
height: calc(100vh - 10.5rem);
height: fit-content;
}
.footer {
display: flex;
overflow: hidden;
flex-direction: row-reverse;
align-items: center;
flex-shrink: 0;
gap: .75rem;
display: grid;
grid-auto-flow: column;
justify-content: end;
align-items: center;
column-gap: .75rem;
padding: 0 2.5rem;
height: 6rem;
mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 1.25rem, rgba(0, 0, 0, 1) 2.5rem);
overflow: hidden;
}
}
}

View File

@ -14,14 +14,14 @@
-->
<script lang="ts">
export let gap: number = .75
export let vertical: boolean = false
export let stretch: boolean = false
export let bothScroll: boolean = false
export let noShift: boolean = false
</script>
<div class="scroll" class:vertical={vertical} class:bothScroll={bothScroll}>
<div class="box" class:stretch={stretch} style="gap: {gap}rem">
<div class="scroll" class:vertical class:bothScroll class:noShift>
<div class="box" class:stretch>
<slot/>
</div>
</div>
@ -38,10 +38,8 @@
.box {
position: absolute;
display: grid;
grid-auto-flow: column;
display: flex;
padding: 0 0 .375rem 0;
gap: 1.5rem;
top: 0;
left: 0;
width: auto;
@ -56,7 +54,7 @@
overflow-x: hidden;
overflow-y: auto;
.box {
grid-auto-flow: row;
flex-direction: column;
padding: 0 .5rem 0 .5rem;
width: 100%;
height: auto;
@ -73,5 +71,10 @@
padding: 0 .375rem .375rem 0;
}
}
&.noShift {
margin: 0;
.box { padding: 0; }
}
}
</style>

View File

@ -20,9 +20,8 @@ import type { Doc, Ref, Space } from '@anticrm/core'
import type { Comment } from '@anticrm/chunter'
import { ReferenceInput } from '@anticrm/text-editor'
import { createQuery, getClient } from '@anticrm/presentation'
import { Section, IconComments, Grid } from '@anticrm/ui'
import { ScrollBox, Grid } from '@anticrm/ui'
import Bookmark from './icons/Bookmark.svelte'
import Backlink from './Backlink.svelte'
import chunter from '@anticrm/chunter'
@ -45,13 +44,32 @@ function onMessage(event: CustomEvent) {
}
</script>
<Section icon={IconComments} label={'Comments'}>
<Grid column={1} rowGap={1.5}>
<div class="container">
<div class="msg-board">
<ScrollBox vertical stretch noShift>
{#if comments}
<Grid column={1} rowGap={1.5}>
{#each comments as comment}
<Backlink {comment} />
{/each}
{/if}
<ReferenceInput on:message={onMessage}/>
</Grid>
</Section>
{/if}
</ScrollBox>
</div>
<ReferenceInput on:message={onMessage}/>
</div>
<style lang="scss">
.container {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
.msg-board {
margin-bottom: 1.5em;
min-height: 2rem;
height: 100%;
}
}
</style>