hcengineering/platform
1
0
Fork 0
mirror of https://github.com/hcengineering/platform.git synced 2024-12-28 05:56:02 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Add ShowMore (#445)

Browse Source 
Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov 2021-11-30 23:55:28 +03:00 committed by GitHub
parent af096a0f66
commit e770c1219f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 101 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
plugins/activity-resources/src/components/ShowMore.svelte Normal file
View File

@ -0,0 +1,91 @@
<!--
// Copyright © 2020, 2021 Anticrm Platform Contributors.
// Copyright © 2021 Hardcore Engineering Inc.
//
// Licensed under the Eclipse Public License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License. You may
// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
//
// See the License for the specific language governing permissions and
// limitations under the License.
-->
<script lang="ts">
import { Label } from '@anticrm/ui'
import activity from '@anticrm/activity'
export let limit: number = 240
export let ignore: boolean = false
let cHeight: number
let bigger: boolean = false
let crop: boolean = false
const toggle = (): void => { crop = !crop }
$: if (cHeight > limit && !bigger) bigger = true
$: if (bigger && !ignore) crop = true
</script>
<div class="relative">
<div
bind:clientHeight={cHeight}
class="showMore-content"
class:crop={!ignore && crop}
><slot /></div>
{#if !ignore && bigger}
<div class="showMore" class:outter={cHeight > limit} on:click={toggle}>
<Label label={(cHeight > limit) ? activity.string.ShowLess : activity.string.ShowMore} />
</div>
{/if}
</div>
<style lang="scss">
.showMore-content {
max-height: max-content;
&.crop {
overflow: hidden;
max-height: 15rem;
mask: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 75%);
}
}
.showMore {
position: absolute;
left: 0;
right: 0;
bottom: 0;
margin: 0 auto;
padding: .5rem 1rem;
width: fit-content;
font-size: .75rem;
color: var(--theme-caption-color);
background: var(--theme-card-bg);
border: .5px solid var(--theme-card-divider);
box-shadow: 0px 8px 15px rgba(0, 0, 0, .1);
backdrop-filter: blur(120px);
border-radius: 2.5rem;
cursor: pointer;
opacity: .3;
transform: scale(.9);
transition: opacity .1s ease-in-out, transform .1s ease-in-out;
&:hover {
opacity: 1;
transform: scale(1);
}
&:active {
opacity: .9;
transform: scale(.95);
}
&.outter { bottom: -2.25rem; }
}
</style>

77
plugins/activity-resources/src/components/TxView.svelte
View File

@ -35,8 +35,8 @@
} from '@anticrm/ui'
import type { Action, AttributeModel } from '@anticrm/view'
import { buildModel, getActions, getObjectPresenter } from '@anticrm/view-resources'
import { afterUpdate } from 'svelte'
import { activityKey, ActivityKey, DisplayTx } from '../activity'
import ShowMore from './ShowMore.svelte'
export let tx: DisplayTx
export let viewlets: Map<ActivityKey, TxViewlet>
@ -56,20 +56,6 @@
let actions: Action[] = []
let edit = false
let contentHTML: HTMLElement
let bigMsg: boolean | undefined = undefined
let outterBtn: boolean | undefined = undefined
const showContent = (): void => { bigMsg = outterBtn = true }
const hideContent = (): void => { bigMsg = outterBtn = false }
const toggleContent = (): void => bigMsg ? hideContent() : showContent()
afterUpdate(() => {
if (contentHTML) {
if (contentHTML.scrollHeight !== contentHTML.clientHeight) (edit) ? showContent() : hideContent()
if (contentHTML.clientHeight < 240) bigMsg = outterBtn = undefined
}
})
$: if (tx.tx._id !== ptx?.tx._id) {
viewlet = undefined
@ -191,7 +177,7 @@
</div>
</div>
<div class="flex-grow flex-col relative">
<div class="flex-grow flex-col">
<div class="flex-between">
<div class="flex-grow label">
@ -238,20 +224,16 @@
</div>
{#if viewlet && viewlet.component && viewlet.display !== 'inline'}
<div bind:this={contentHTML} class={viewlet.display} class:full={bigMsg || edit} class:mask={bigMsg === false && !edit}>
{#if typeof viewlet.component === 'string'}
<Component is={viewlet.component} {props} on:close={onCancelEdit} />
{:else}
<svelte:component this={viewlet.component} {...props} on:close={onCancelEdit} />
{/if}
<div class={viewlet.display}>
<ShowMore ignore={viewlet.display !== 'content' || edit}>
{#if typeof viewlet.component === 'string'}
<Component is={viewlet.component} {props} on:close={onCancelEdit} />
{:else}
<svelte:component this={viewlet.component} {...props} on:close={onCancelEdit} />
{/if}
</ShowMore>
</div>
{#if typeof outterBtn !== 'undefined' && !edit}
<div class="showMore" class:outter={outterBtn} on:click={toggleContent}>
<Label label={(bigMsg) ? activity.string.ShowLess : activity.string.ShowMore} />
</div>
{/if}
{/if}
</div>
</div>
{/if}
@ -328,46 +310,7 @@
.content {
flex-shrink: 0;
overflow: hidden;
margin-top: .5rem;
height: max-content;
max-height: 15rem;
&.full { max-height: max-content; }
&.mask { mask: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 75%); }
}
.showMore {
position: absolute;
left: 0;
right: 0;
bottom: 0;
margin: 0 auto;
padding: .5rem 1rem;
width: fit-content;
font-size: .75rem;
color: var(--theme-caption-color);
background: var(--theme-card-bg);
border: .5px solid var(--theme-card-divider);
box-shadow: 0px 8px 15px rgba(0, 0, 0, .1);
backdrop-filter: blur(120px);
border-radius: 2.5rem;
cursor: pointer;
opacity: .3;
transform: scale(.9);
transition: opacity .1s ease-in-out, transform .1s ease-in-out;
&:hover {
opacity: 1;
transform: scale(1);
}
&:active {
opacity: .9;
transform: scale(.95);
}
&.outter { bottom: -1.5rem; }
}
.emphasized {