wieerwill/platform
1
0
Fork 0
mirror of https://github.com/hcengineering/platform.git synced 2025-04-15 04:49:00 +00:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

TSK-1069. Displaying a Mention, as well as a Comment. Fixed MessageViewer. (#2915)

Browse Source 
Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov 2023-04-06 19:34:14 +03:00 committed by GitHub
parent 210d3eebc6
commit 33db59a5e2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 89 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
packages/presentation/src/components/message/Nodes.svelte
View File

@ -30,7 +30,7 @@
<strong><svelte:self nodes={node.childNodes} /></strong>
{:else if node.nodeName === 'P'}
{#if node.childNodes.length > 0}
<p class="p-inline">
<p class="p-inline contrast">
<svelte:self nodes={node.childNodes} />
</p>
{/if}
@ -138,4 +138,21 @@
.checkboxContainer {
padding-top: 0.125rem;
}
em,
strong,
blockquote,
pre,
h1,
h2,
h3,
h4,
h5,
h6,
ol,
li,
.checkboxContainer,
s {
color: var(--theme-accent-color);
}
</style>

2
packages/theme/styles/_colors.scss
View File

@ -74,6 +74,7 @@
--darker-color: rgba(255, 255, 255, .4);
--dark-color: #62666d;
--content-color: #8a8f98;
--theme-accent-color: rgba(255, 255, 255, .8);
--accent-color: #d7d8db;
--caption-color: #f7f8f8;
--white-color: #fff;
@ -157,6 +158,7 @@
--dark-color: #90959d;
--content-color: #3c4149;
--accent-color: #282a30;
--theme-accent-color: rgba(0, 0, 0, .8);
--caption-color: #131416;
--white-color: #fff;
--caret-color: #6e5ed2;

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

@ -113,7 +113,9 @@ p:last-child { margin-block-end: 0; }
word-wrap: break-word;
hyphens: auto;
line-height: 150%;
color: var(--content-color);
&.contrast { color: var(--theme-accent-color); }
&:not(.contrast) { color: var(--content-color); }
a {
word-break: break-all;
@ -378,7 +380,7 @@ input.search {
.bold {
font-weight: 500;
color: var(--caption-color);
color: var(--theme-accent-color);
}
.strong { color: var(--accent-color); }
.lower { text-transform: lowercase; }

6
packages/theme/styles/global.scss
View File

@ -126,9 +126,3 @@ body {
overflow: hidden;
touch-action: none;
}
// TSK-1026. Experiment, don't forget to delete.
.theme-dark .p-activity .msgactivity-content.comment .msgactivity-content__title.labels-row > .bold,
.theme-dark .p-activity .msgactivity-content.comment .activity-content.content .p-inline { color: rgba(255, 255, 255, .8); }
.theme-light .p-activity .msgactivity-content.comment .msgactivity-content__title.labels-row > .bold,
.theme-light .p-activity .msgactivity-content.comment .activity-content.content .p-inline { color: rgba(0, 0, 0, .8); }

1
packages/theme/styles/panel.scss
View File

@ -121,6 +121,7 @@
&:not(.embedded) {
border-radius: 0 0 .5rem .5rem;
}
&.embedded { border-left: none; }
&.main {
justify-content: stretch;

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

@ -32,6 +32,7 @@
} from '@hcengineering/ui'
import type { AttributeModel } from '@hcengineering/view'
import attachment from '@hcengineering/attachment'
import chunter from '@hcengineering/chunter'
import { Menu, ObjectPresenter } from '@hcengineering/view-resources'
import { ActivityKey, DisplayTx } from '../activity'
import activity from '../plugin'
@ -134,6 +135,9 @@
function isAttachment (_class?: Ref<Class<Doc>>): boolean {
return _class === attachment.class.Attachment
}
function isMention (_class?: Ref<Class<Doc>>): boolean {
return _class === chunter.class.Backlink
}
async function updateMessageType (model: AttributeModel[], tx: DisplayTx): Promise<boolean> {
for (const m of model) {
@ -152,21 +156,17 @@
hasMessageType = res
})
$: isComment = viewlet && viewlet?.editable
$: isAttach = isAttachment(tx.tx.objectClass)
$: isMention = viewlet?.display === 'emphasized' || isMessageType(model[0]?.attribute)
$: isColumn = isComment || isMention || hasMessageType
$: isAttached = isAttachment(tx.tx.objectClass)
$: isMentioned = isMention(tx.tx.objectClass)
$: withAvatar = isComment || isMentioned || isAttached
$: isEmphasized = viewlet?.display === 'emphasized' || model.every((m) => isMessageType(m.attribute))
$: isColumn = isComment || isEmphasized || hasMessageType
</script>
{#if (viewlet !== undefined && !((viewlet?.hideOnRemove ?? false) && tx.removed)) || model.length > 0}
<div
class="msgactivity-container"
class:showIcon
class:withAvatar={isComment || isAttach}
class:isNew
class:isNextNew
>
<div class="msgactivity-container" class:showIcon class:withAvatar class:isNew class:isNextNew>
{#if showIcon}
{#if isComment || isAttach}
{#if withAvatar}
<div class="msgactivity-avatar">
<Component is={contact.component.Avatar} props={{ avatar: employee?.avatar, size: 'medium' }} />
</div>
@ -183,10 +183,10 @@
{/if}
{/if}
<div class="msgactivity-content" class:content={isColumn} class:comment={isComment || isAttach}>
<div class="msgactivity-content" class:content={isColumn} class:comment={withAvatar}>
<div class="msgactivity-content__header">
<div class="msgactivity-content__title labels-row">
<span class={isComment || isAttach ? 'bold' : 'strong'}>
<span class={withAvatar ? 'bold' : 'strong'}>
{#if employee}
{getName(employee)}
{:else}
@ -306,7 +306,7 @@
{/if}
{#if viewlet && viewlet.display !== 'inline'}
<div class="activity-content content" class:indent={isAttach} class:contentHidden>
<div class="activity-content content" class:indent={isAttached} class:contentHidden>
<ShowMore ignore={edit}>
{#if tx.collectionAttribute !== undefined && (tx.txDocIds?.size ?? 0) > 1}
<div class="flex-row-center flex-grow flex-wrap clear-mins">
@ -321,7 +321,7 @@
</div>
{:else if hasMessageType && model.length > 0 && (tx.updateTx || tx.mixinTx)}
{#await getValue(client, model[0], tx) then value}
<div class="activity-content content" class:indent={isAttach} class:contentHidden>
<div class="activity-content content" class:indent={isAttached} class:contentHidden>
<ShowMore ignore={edit}>
{#if value.isObjectSet}
<ObjectPresenter value={value.set} inline />

2
plugins/notification-resources/src/components/Inbox.svelte
View File

@ -105,7 +105,7 @@
<style lang="scss">
.header {
min-height: 3rem;
min-height: 3.1rem;
display: flex;
flex-direction: column;
justify-content: center;

71
plugins/notification-resources/src/components/NotificationView.svelte
View File

@ -80,50 +80,48 @@
on:contextmenu|preventDefault={showMenu}
on:click={() => dispatch('click', { _id: value.attachedTo, _class: value.attachedToClass })}
>
<div class="content">
<div class="header flex">
<Avatar avatar={employee?.avatar} size="medium" />
<div class="ml-2 w-full clear-mins">
<div class="flex-between mb-1">
<div class="font-medium caption-color flex">
{#if employee}
{getName(employee)}
{:else}
<Label label={core.string.System} />
{/if}
{#if newTxes > 0}
<div class="counter ml-2">
{newTxes}
</div>
{/if}
</div>
<div class="flex-center">
<div class="time ml-2"><TimeSince value={tx?.modifiedOn} /></div>
</div>
<div class="header flex">
<Avatar avatar={employee?.avatar} size="medium" />
<div class="ml-2 w-full clear-mins">
<div class="flex-between mb-1">
<div class="labels-row">
{#if employee}
<span class="bold">{getName(employee)}</span>
{:else}
<span class="strong"><Label label={core.string.System} /></span>
{/if}
{#if newTxes > 0}
<div class="counter">
{newTxes}
</div>
{/if}
</div>
{#if presenter}
<svelte:component this={presenter} value={doc} />
{/if}
<div class="time ml-2"><TimeSince value={tx?.modifiedOn} /></div>
</div>
{#if presenter}
<svelte:component this={presenter} value={doc} inline />
{/if}
</div>
{#if tx}
<TxView {tx} {viewlets} />
{/if}
</div>
{#if tx}
<TxView {tx} {viewlets} />
{/if}
</div>
{/if}
<style lang="scss">
.content {
padding: 0.5rem;
}
.container {
padding: 0.5rem;
&:hover {
background-color: var(--board-card-bg-hover);
background-color: var(--highlight-hover);
}
&.selected {
background-color: var(--board-card-bg-hover);
background-color: var(--highlight-select);
&:hover {
background-color: var(--highlight-select-hover);
}
}
}
@ -131,10 +129,13 @@
display: flex;
align-items: center;
justify-content: center;
border: 1px solid;
border-color: var(--divider-color);
border-radius: 50%;
margin-left: 0.25rem;
height: 1.25rem;
width: 1.25rem;
font-weight: 600;
font-size: 0.75rem;
color: var(--theme-accent-color);
border: 1px solid var(--divider-color);
border-radius: 50%;
}
</style>

24
plugins/tracker-resources/src/components/issues/NotificationIssuePresenter.svelte
View File

@ -31,23 +31,23 @@
</script>
{#if value}
<div class="flex-between">
<div class="flex-presenter overflow-label mr-2">
<div class="flex-between clear-mins">
<div class="flex-presenter inline-presenter mr-2">
{#if currentProject}
<Icon icon={currentProject.icon ?? tracker.icon.Home} size="small" />
<div class="ml-1 mr-1 font-semi-bold">
{currentProject.name}
<div class="icon">
<Icon icon={currentProject.icon ?? tracker.icon.Home} size="small" />
</div>
<span class="label no-underline nowrap">
{currentProject.name}
</span>
{/if}
<span class="overflow-label">
{title}
<span class="overflow-label ml-2">
<span class="content-accent-color">{title}</span>
{value.title}
</span>
</div>
<div>
{#if status}
<IssueStatusIcon value={status} size="small" />
{/if}
</div>
{#if status}
<IssueStatusIcon value={status} size="small" />
{/if}
</div>
{/if}