From d2a5a2ef53278bea5e6ae73b8e2736ac4ec0ce61 Mon Sep 17 00:00:00 2001 From: Kristina Date: Mon, 18 Aug 2025 23:22:39 +0400 Subject: [PATCH] Fix inbox ui (#9688) --- communication | 2 +- models/communication/src/applets.ts | 3 +- models/communication/src/types.ts | 4 +- .../ui/src/components/TooltipInstance.svelte | 3 +- packages/ui/src/tooltips.ts | 18 +++++--- packages/ui/src/types.ts | 1 + plugins/communication-resources/src/index.ts | 3 +- plugins/communication-resources/src/plugin.ts | 4 +- plugins/communication-resources/src/poll.ts | 7 ++- plugins/communication/src/types.ts | 13 +++++- .../src/components/InboxCard.svelte | 2 +- .../components/ReactionNotification.svelte | 5 ++- .../components/preview/AttachmentName.svelte | 43 +++++++++++++++++++ ...eview.svelte => AttachmentsPreview.svelte} | 25 +++++++---- .../preview/AttachmentsTooltip.svelte | 9 ++-- .../preview/NotificationPreview.svelte | 16 ++++--- .../components/preview/PreviewTemplate.svelte | 22 ++++++---- 17 files changed, 135 insertions(+), 45 deletions(-) create mode 100644 plugins/inbox-resources/src/components/preview/AttachmentName.svelte rename plugins/inbox-resources/src/components/preview/{AttachmentPreview.svelte => AttachmentsPreview.svelte} (70%) diff --git a/communication b/communication index 5a3d9e7076..f7d1b98df4 160000 --- a/communication +++ b/communication @@ -1 +1 @@ -Subproject commit 5a3d9e707623c597f3f5184a9044a9cb6f98f688 +Subproject commit f7d1b98df46f277396ba9b22b084adf28203ac84 diff --git a/models/communication/src/applets.ts b/models/communication/src/applets.ts index fdb23f2f92..cc2b9ab05d 100644 --- a/models/communication/src/applets.ts +++ b/models/communication/src/applets.ts @@ -28,7 +28,8 @@ export function buildApplets (builder: Builder): void { createLabel: communication.string.CreatePoll, createComponent: communication.poll.CreatePoll, previewComponent: communication.poll.PollPreview, - createFn: communication.poll.CreatePollFn + createFn: communication.poll.CreatePollFn, + getTitleFn: communication.poll.GetPollTitleFn }, communication.ids.PollApplet ) diff --git a/models/communication/src/types.ts b/models/communication/src/types.ts index 8f86514579..7de5ec70ac 100644 --- a/models/communication/src/types.ts +++ b/models/communication/src/types.ts @@ -24,7 +24,8 @@ import { type PollAnswer, type Poll, type CustomActivityPresenter, - type GuestCommunicationSettings + type GuestCommunicationSettings, + type AppletGetTitleFnResource } from '@hcengineering/communication' import { PaletteColorIndexes } from '@hcengineering/ui/src/colors' import { type AppletType } from '@hcengineering/communication-types' @@ -58,6 +59,7 @@ class TApplet extends TDoc implements Applet { createLabel!: IntlString createComponent!: AnyComponent previewComponent!: AnyComponent + getTitleFn!: AppletGetTitleFnResource createFn?: AppletCreateFnResource } diff --git a/packages/ui/src/components/TooltipInstance.svelte b/packages/ui/src/components/TooltipInstance.svelte index 5274a41d1f..d1a41390b6 100644 --- a/packages/ui/src/components/TooltipInstance.svelte +++ b/packages/ui/src/components/TooltipInstance.svelte @@ -424,8 +424,9 @@ style:transform={options.transform} style:visibility={options.visibility} style:z-index={($modals.findIndex((t) => t.type === 'tooltip') ?? 1) + 10000} + style:text-align={$tooltip.textAlign} > - + {#if $tooltip.keys !== undefined} diff --git a/packages/ui/src/tooltips.ts b/packages/ui/src/tooltips.ts index eb4697a631..dab9994a95 100644 --- a/packages/ui/src/tooltips.ts +++ b/packages/ui/src/tooltips.ts @@ -14,7 +14,8 @@ const emptyTooltip: LabelAndProps = { keys: undefined, kind: 'tooltip', style: undefined, - noArrow: false + noArrow: false, + textAlign: undefined } let storedValue: LabelAndProps = emptyTooltip export const tooltipstore = derived(modalStore, (modals) => { @@ -50,7 +51,8 @@ export function tooltip (node: HTMLElement, options?: LabelAndProps): any { opt.kind, opt.keys, opt.style, - opt.noArrow + opt.noArrow, + opt.textAlign ) }, opt.timeout ?? 10) } else { @@ -65,7 +67,8 @@ export function tooltip (node: HTMLElement, options?: LabelAndProps): any { opt.kind, opt.keys, opt.style, - opt.noArrow + opt.noArrow, + opt.textAlign ) } } @@ -92,7 +95,8 @@ export function tooltip (node: HTMLElement, options?: LabelAndProps): any { opt.kind, opt.keys, opt.style, - opt.noArrow + opt.noArrow, + opt.textAlign ) } }, @@ -119,7 +123,8 @@ export function showTooltip ( kind?: 'tooltip' | 'submenu' | 'popup', keys?: string[], style?: 'default' | 'modern', - noArrow?: boolean + noArrow?: boolean, + textAlign?: 'left' | 'center' | 'right' ): void { storedValue = { label, @@ -133,7 +138,8 @@ export function showTooltip ( keys, type: 'tooltip', style, - noArrow + noArrow, + textAlign } modalStore.update((old) => { const tooltip = old.find((m) => m?.type === 'tooltip') as LabelAndProps | undefined diff --git a/packages/ui/src/types.ts b/packages/ui/src/types.ts index 608d7ca0e8..0740e09b9a 100644 --- a/packages/ui/src/types.ts +++ b/packages/ui/src/types.ts @@ -312,6 +312,7 @@ export interface LabelAndProps { timeout?: number style?: 'default' | 'modern' noArrow?: boolean + textAlign?: 'left' | 'center' | 'right' } export interface ListItem { diff --git a/plugins/communication-resources/src/index.ts b/plugins/communication-resources/src/index.ts index f09059a647..7cf211585e 100644 --- a/plugins/communication-resources/src/index.ts +++ b/plugins/communication-resources/src/index.ts @@ -38,7 +38,7 @@ import { showOriginalMessage, translateMessage } from './actions' -import { createPoll } from './poll' +import { createPoll, getPollTitle } from './poll' export { isActivityMessage } from './activity' export * from './stores' @@ -56,6 +56,7 @@ export default async (): Promise => ({ CreatePoll, PollPreview, CreatePollFn: createPoll, + GetPollTitleFn: getPollTitle, UserVoteActivityPresenter, UserVotesPresenter }, diff --git a/plugins/communication-resources/src/plugin.ts b/plugins/communication-resources/src/plugin.ts index 6b691606c9..433317374e 100644 --- a/plugins/communication-resources/src/plugin.ts +++ b/plugins/communication-resources/src/plugin.ts @@ -17,7 +17,8 @@ import communication, { type MessageAction, type MessageActionFunctionResource, type MessageActionVisibilityTesterResource, - type AppletCreateFnResource + type AppletCreateFnResource, + type AppletGetTitleFnResource } from '@hcengineering/communication' import { type AnyComponent } from '@hcengineering/ui' import { type Ref } from '@hcengineering/core' @@ -31,6 +32,7 @@ export default mergeIds(communicationId, communication, { CreatePoll: '' as AnyComponent, PollPreview: '' as AnyComponent, CreatePollFn: '' as AppletCreateFnResource, + GetPollTitleFn: '' as AppletGetTitleFnResource, UserVoteActivityPresenter: '' as AnyComponent, UserVotesPresenter: '' as AnyComponent }, diff --git a/plugins/communication-resources/src/poll.ts b/plugins/communication-resources/src/poll.ts index 1d91e6f14e..c6a72c337d 100644 --- a/plugins/communication-resources/src/poll.ts +++ b/plugins/communication-resources/src/poll.ts @@ -25,7 +25,7 @@ import { type Poll, type PollAnswer } from '@hcengineering/communication' import { getClient } from '@hcengineering/presentation' import card, { type Card } from '@hcengineering/card' import { makeRank } from '@hcengineering/rank' -import { type MessageID } from '@hcengineering/communication-types' +import { type AppletAttachment, type MessageID } from '@hcengineering/communication-types' import communication from './plugin' @@ -87,6 +87,11 @@ export async function createPoll (parent: Card, message: MessageID, params: Poll await client.createDoc(communication.type.Poll, parent.space, filledData, params.id) } +export function getPollTitle (attachment: AppletAttachment): string { + const params = attachment.params as PollConfig + return params.question +} + export function isVotedByMe (result: Poll | undefined, anonymous: boolean = false, answers: PollAnswer[] = []): boolean { if (result == null) return false if (anonymous) { diff --git a/plugins/communication/src/types.ts b/plugins/communication/src/types.ts index 6bd0ff0948..6fafb9e40c 100644 --- a/plugins/communication/src/types.ts +++ b/plugins/communication/src/types.ts @@ -11,7 +11,14 @@ // See the License for the specific language governing permissions and // limitations under the License. -import { AccountID, AppletParams, AppletType, Message, MessageID } from '@hcengineering/communication-types' +import { + AccountID, + AppletAttachment, + AppletParams, + AppletType, + Message, + MessageID +} from '@hcengineering/communication-types' import { AttachedDoc, Configuration, Doc, Ref } from '@hcengineering/core' import { Asset, IntlString, Resource } from '@hcengineering/platform' import { Card, MasterTag } from '@hcengineering/card' @@ -59,12 +66,16 @@ export interface Applet extends Doc { createLabel: IntlString createComponent: AnyComponent previewComponent: AnyComponent + getTitleFn: AppletGetTitleFnResource createFn?: AppletCreateFnResource } export type AppletCreateFn = (parent: Card, message: MessageID, params: AppletParams) => Promise export type AppletCreateFnResource = Resource +export type AppletGetTitleFn = (attachment: AppletAttachment) => string +export type AppletGetTitleFnResource = Resource + export interface PollAnswer extends AttachedDoc { options: string[] space: Ref diff --git a/plugins/inbox-resources/src/components/InboxCard.svelte b/plugins/inbox-resources/src/components/InboxCard.svelte index 93b6b43943..eb32914676 100644 --- a/plugins/inbox-resources/src/components/InboxCard.svelte +++ b/plugins/inbox-resources/src/components/InboxCard.svelte @@ -104,7 +104,7 @@ &__header { display: flex; align-items: center; - gap: 0.75rem; + gap: 0.5rem; margin-left: var(--spacing-0_5); } diff --git a/plugins/inbox-resources/src/components/ReactionNotification.svelte b/plugins/inbox-resources/src/components/ReactionNotification.svelte index c06222fb0f..dfeaef4c3e 100644 --- a/plugins/inbox-resources/src/components/ReactionNotification.svelte +++ b/plugins/inbox-resources/src/components/ReactionNotification.svelte @@ -45,7 +45,10 @@ {#if notification.message}
-
diff --git a/plugins/inbox-resources/src/components/preview/AttachmentName.svelte b/plugins/inbox-resources/src/components/preview/AttachmentName.svelte new file mode 100644 index 0000000000..8c55c868a9 --- /dev/null +++ b/plugins/inbox-resources/src/components/preview/AttachmentName.svelte @@ -0,0 +1,43 @@ + + + + + + + + + + + + + + + +{#if isBlobAttachment(attachment)} + {attachment.params.fileName} +{/if} + +{#if isAppletAttachment(attachment)} + {@const applet = applets.find((it) => it.type === attachment.type)} + {#if applet} + + + {#await getResource(applet.getTitleFn) then fn} + {fn(attachment)} + {/await} + {/if} +{/if} diff --git a/plugins/inbox-resources/src/components/preview/AttachmentPreview.svelte b/plugins/inbox-resources/src/components/preview/AttachmentsPreview.svelte similarity index 70% rename from plugins/inbox-resources/src/components/preview/AttachmentPreview.svelte rename to plugins/inbox-resources/src/components/preview/AttachmentsPreview.svelte index 22c0bbbb7e..66c5ca5876 100644 --- a/plugins/inbox-resources/src/components/preview/AttachmentPreview.svelte +++ b/plugins/inbox-resources/src/components/preview/AttachmentsPreview.svelte @@ -15,27 +15,33 @@ import { Message } from '@hcengineering/communication-types' import { Icon, Label, tooltip } from '@hcengineering/ui' import communication from '@hcengineering/communication' - import { isBlobAttachment } from '@hcengineering/communication-shared' + import { isAppletAttachment, isBlobAttachment } from '@hcengineering/communication-shared' + import { getEmbeddedLabel } from '@hcengineering/platform' import AttachmentsTooltip from './AttachmentsTooltip.svelte' + import AttachmentName from './AttachmentName.svelte' export let message: Message - $: blobs = message.attachments.filter(isBlobAttachment) ?? [] - $: showFiles = blobs.length > 0 + $: attachments = message.attachments.filter((it) => isBlobAttachment(it) || isAppletAttachment(it)) ?? [] -{#if showFiles} +{#if attachments.length > 0} {#if message.content.trim().length > 0} - - {blobs.length} + + {attachments.length} {:else} -