hcengineering/platform
1
0
Fork 0
mirror of https://github.com/hcengineering/platform.git synced 2024-11-22 03:14:40 +03:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Fix Activity text-overflow. (#1811)

Browse Source 
Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov 2022-05-20 22:40:24 +03:00 committed by GitHub
parent 2a2c5837c9
commit 250d22d261
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 75 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/presentation/src/components/EditAvatarPopup.svelte
View File

@ -91,7 +91,7 @@
}
.root {
position: fixed;
position: absolute;
top: 0;
bottom: 0;
left: 0;

2
packages/presentation/src/components/EditableAvatar.svelte
View File

@ -38,7 +38,7 @@
} else {
return inputRef.click()
}
showPopup(EditAvatarPopup, { file }, undefined, (blob) => {
showPopup(EditAvatarPopup, { file }, 'full', (blob) => {
if (blob === undefined) {
return
}

5
packages/theme/src/Theme.svelte
View File

@ -53,11 +53,16 @@
}
})
const setDocumentLanguage = (): void => {
document.documentElement.lang = currentLanguage
}
onMount(() => {
setRootColors(currentTheme)
setRootFontSize(currentFontSize)
setMetadata(platform.metadata.locale, currentLanguage)
loadPluginStrings(currentLanguage)
setDocumentLanguage()
})
</script>

3
packages/theme/styles/_layouts.scss
View File

@ -94,6 +94,9 @@ p:first-child { margin-block-start: 0; } // First and last padding
p:last-child { margin-block-end: 0; }
.p-inline {
overflow-wrap: break-word;
word-wrap: break-word;
hyphens: auto;
line-height: 150%;
a {
word-break: break-all;

3
packages/ui/src/components/PanelInstance.svelte
View File

@ -80,7 +80,7 @@
if ((fullSize || docSize) && (props.element === 'float' || props.element === 'content')) {
options = fitPopupElement(modalHTML, 'full')
options.props.width = '100vw'
options.props.maxHeight = 'max-content'
options.props.maxHeight = '100vh'
options.showOverlay = false
modalHTML.classList.add('fullsize')
} else {
@ -142,6 +142,7 @@
style:max-width={options.props.maxWidth}
style:max-height={options.props.maxHeight}
style:min-width={options.props.minWidth}
style:transform={options.props.transform}
>
<div class="panel-container" class:padding={props.element === 'content'}>
<svelte:component

2
packages/ui/src/components/PopupInstance.svelte
View File

@ -70,6 +70,7 @@
if (modalHTML) {
if ((fullSize || docSize) && (element === 'float' || element === 'content')) {
options = fitPopupElement(modalHTML, 'full')
options.props.maxHeight = '100vh'
modalHTML.classList.add('fullsize')
} else {
options = fitPopupElement(modalHTML, element)
@ -107,6 +108,7 @@
style:max-width={options.props.maxWidth}
style:max-height={options.props.maxHeight}
style:min-width={options.props.minWidth}
style:transform={options.props.transform}
>
<svelte:component
this={is}

61
packages/ui/src/components/Scroller.svelte
View File

@ -25,10 +25,8 @@
let divScroll: HTMLElement
let divBox: HTMLElement
let divBack: HTMLElement
let divBar: HTMLElement
let divTrack: HTMLElement
let isBack: boolean = false // ?
let isScrolling: boolean = false
let dY: number
let belowContent: number | undefined = undefined
@ -36,31 +34,6 @@
let scrolling: boolean = autoscroll
let firstScroll: boolean = autoscroll
const checkBack = (): void => {
if (divBox) {
const el = divBox.querySelector('.scroller-back')
if (el && divScroll) {
const rectScroll = divScroll.getBoundingClientRect()
const rectEl = el.getBoundingClientRect()
const bottom = document.body.clientHeight - rectScroll.bottom
let top = rectEl.top
if (top < rectScroll.top) top = rectScroll.top
if (top > rectScroll.bottom) top = rectScroll.top + rectScroll.height
divBack.style.left = rectScroll.left + 'px'
divBack.style.right = document.body.clientWidth - rectScroll.right + 'px'
divBack.style.top = top + 'px'
divBack.style.bottom = bottom + 'px'
divBack.style.height = 'auto'
divBack.style.width = 'auto'
divBack.style.visibility = 'visible'
isBack = true
} else {
divBack.style.visibility = 'hidden'
isBack = false
}
}
}
const checkBar = (): void => {
if (divBar && divScroll) {
const proc = (divScroll.clientHeight / divScroll.scrollHeight) * 100
@ -120,19 +93,20 @@
else if (belowContent > 1) mask = 'top'
else mask = 'none'
if (scrolling && divScroll.scrollHeight - divScroll.clientHeight - divScroll.scrollTop > 10 && !firstScroll) {
scrolling = false
if (autoscroll) {
if (scrolling && divScroll.scrollHeight - divScroll.clientHeight - divScroll.scrollTop > 10 && !firstScroll) {
scrolling = false
}
if (!scrolling && belowContent && belowContent <= 10) scrolling = true
}
if (!scrolling && belowContent && belowContent <= 10) scrolling = true
}
checkBack()
if (!isScrolling) checkBar()
}
const observer = new IntersectionObserver(() => checkFade(), { root: null, threshold: 0.1 })
const scrollDown = (): void => {
divScroll.scrollTop = divScroll.scrollHeight
divScroll.scrollTop = divScroll.scrollHeight - divHeight
}
$: if (scrolling && belowContent && belowContent > 10) scrollDown()
onMount(() => {
@ -140,13 +114,12 @@
divScroll.addEventListener('scroll', checkFade)
const tempEl = divBox.querySelector('*') as HTMLElement
if (tempEl) observer.observe(tempEl)
if (scrolling) {
if (autoscroll && scrolling) {
scrollDown()
firstScroll = false
}
checkFade()
}
if (divBack) checkBack()
})
onDestroy(() => {
if (divScroll) divScroll.removeEventListener('scroll', checkFade)
@ -155,21 +128,20 @@
if (divScroll && divBox) {
const tempEl = divBox.querySelector('*') as HTMLElement
if (tempEl) observer.observe(tempEl)
if (scrolling) scrollDown()
if (autoscroll && scrolling) scrollDown()
checkFade()
}
})
let divWidth: number = 0
let divHeight: number
const _resize = (): void => checkFade()
$: if (divWidth) _resize()
</script>
<svelte:window on:resize={_resize} />
<div class="scroller-container" class:bottomStart>
<div
bind:this={divScroll}
bind:clientWidth={divWidth}
bind:clientHeight={divHeight}
class="scroll relative"
class:tableFade
class:antiNav-topFade={mask === 'top'}
@ -181,7 +153,6 @@
<slot />
</div>
</div>
<div bind:this={divBack} class="back" />
<div class="bar" class:hovered={isScrolling} bind:this={divBar} on:mousedown={onScrollStart} />
<div class="track" class:hovered={isScrolling} bind:this={divTrack} />
</div>
@ -192,6 +163,7 @@
display: flex;
flex-direction: column;
height: 100%;
min-width: 0;
min-height: 0;
}
.scroll {
@ -208,7 +180,6 @@
.box {
display: flex;
flex-direction: column;
height: 100%;
}
.scroller-container.bottomStart {
justify-content: flex-end;
@ -269,14 +240,4 @@
transition: none;
}
}
.back {
visibility: hidden;
position: fixed;
width: 0;
height: 0;
// background-color: red;
background-color: var(--body-color);
z-index: -1;
}
</style>

11
packages/ui/src/components/ShowMore.svelte
View File

@ -33,7 +33,7 @@
$: if (bigger && !ignore) crop = true
</script>
<div class="relative">
<div class="relative clear-mins">
<div
bind:clientHeight={cHeight}
class="showMore-content"
@ -74,9 +74,9 @@
word-wrap: none;
font-size: 0.75rem;
color: var(--theme-caption-color);
background: var(--theme-showmore-color);
border: 0.5px solid var(--theme-card-divider);
color: var(--caption-color);
background: var(--popup-bg-color);
border: 0.5px solid var(--popup-divider);
box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
border-radius: 2.5rem;
user-select: none;
@ -86,5 +86,8 @@
bottom: -2.75rem;
transform: translateX(-50%);
}
&:hover {
background: var(--popup-bg-hover);
}
}
</style>

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

@ -19,7 +19,18 @@
import core, { AnyAttribute, Doc, getCurrentAccount, Ref } from '@anticrm/core'
import { Asset, getResource } from '@anticrm/platform'
import { getClient } from '@anticrm/presentation'
import { Component, Icon, IconEdit, IconMoreH, Label, Menu, ShowMore, showPopup, TimeSince } from '@anticrm/ui'
import {
Component,
Icon,
IconEdit,
IconMoreH,
Label,
Menu,
ShowMore,
showPopup,
TimeSince,
Button
} from '@anticrm/ui'
import type { AttributeModel } from '@anticrm/view'
import { getActions } from '@anticrm/view-resources'
import { ActivityKey, DisplayTx } from '../activity'
@ -122,7 +133,7 @@
</div>
{/if}
<div class="flex-grow flex-col">
<div class="flex-grow flex-col clear-mins">
<div class="flex-between">
<div class="flex-grow label">
<div class="bold">
@ -133,7 +144,7 @@
{/if}
</div>
{#if viewlet && viewlet?.editable}
<div class="edited">
<div class="buttons-group small-gap">
{#if viewlet.label}
<Label label={viewlet.label} params={viewlet.labelParams ?? {}} />
{/if}
@ -141,9 +152,13 @@
<Label label={activity.string.Edited} />
{/if}
{#if tx.tx.modifiedBy === getCurrentAccount()._id}
<div class="menuOptions" on:click={(ev) => showMenu(ev)}>
<IconMoreH size={'medium'} />
</div>
<Button
icon={IconMoreH}
kind={'transparent'}
shape={'circle'}
size={'medium'}
on:click={(ev) => showMenu(ev)}
/>
{/if}
</div>
{:else if viewlet && viewlet.label}
@ -188,11 +203,11 @@
</div>
</div>
{:else}
<span class="lower" class:flex-grow={hasMessageType}
><Label label={activity.string.Changed} />
<span class="lower" class:flex-grow={hasMessageType}>
<Label label={activity.string.Changed} />
<Label label={m.label} />
<Label label={activity.string.To} /></span
>
<Label label={activity.string.To} />
</span>
{#if hasMessageType}
<div class="time"><TimeSince value={tx.tx.modifiedOn} /></div>
{/if}
@ -236,7 +251,7 @@
{:else if viewlet && viewlet.display === 'inline' && viewlet.component}
{#if tx.collectionAttribute !== undefined && (tx.txDocIds?.size ?? 0) > 1}
<ShowMore ignore={edit}>
<div class="flex-row-center flex-grow flex-wrap">
<div class="flex-row-center flex-grow flex-wrap clear-mins">
<TxViewTx {tx} {onCancelEdit} {edit} {viewlet} />
</div>
</ShowMore>
@ -256,7 +271,7 @@
<div class={viewlet.display}>
<ShowMore ignore={edit}>
{#if tx.collectionAttribute !== undefined && (tx.txDocIds?.size ?? 0) > 1}
<div class="flex-row-center flex-grow flex-wrap">
<div class="flex-row-center flex-grow flex-wrap clear-mins">
<TxViewTx {tx} {onCancelEdit} {edit} {viewlet} />
</div>
{:else if typeof viewlet.component === 'string'}
@ -274,6 +289,7 @@
<style lang="scss">
.msgactivity-container {
position: relative;
min-width: 0;
}
.showIcon {
@ -317,12 +333,6 @@
border-radius: 50%;
}
.edited {
display: flex;
align-items: center;
flex-wrap: nowrap;
}
.label {
display: flex;
align-items: center;
@ -353,6 +363,8 @@
.content {
flex-shrink: 0;
margin-top: 0.5rem;
min-width: 0;
min-height: 0;
}
.emphasized {

1
plugins/activity-resources/src/components/TxViewTx.svelte
View File

@ -51,6 +51,7 @@
<style lang="scss">
.content {
padding: 1rem;
min-width: 0;
color: var(--accent-color);
background: var(--theme-bg-accent-color);
border: 1px solid var(--theme-bg-accent-color);

2
plugins/chunter-resources/src/components/Message.svelte
View File

@ -270,7 +270,7 @@
.header {
display: flex;
align-items: center;
align-items: baseline;
font-weight: 500;
font-size: 1rem;
line-height: 150%;

22
plugins/gmail-assets/src/tsdoc-metadata.json
View File

@ -1,11 +1,11 @@
// This file is read by tools that parse documentation comments conforming to the TSDoc standard.
// It should be published with your NPM package. It should not be tracked by Git.
{
"tsdocVersion": "0.12",
"toolPackages": [
{
"packageName": "@microsoft/api-extractor",
"packageVersion": "7.23.0"
}
]
}
// This file is read by tools that parse documentation comments conforming to the TSDoc standard.
// It should be published with your NPM package. It should not be tracked by Git.
{
"tsdocVersion": "0.12",
"toolPackages": [
{
"packageName": "@microsoft/api-extractor",
"packageVersion": "7.23.0"
}
]
}