Make inbox messages more compact (#4378)

Signed-off-by: Kristina Fefelova <kristin.fefelova@gmail.com>

plugins/activity-resources/src/components/activity-message/ActivityInfoMessagePresenter.svelte

@@ -37,6 +37,7 @@
   export let shouldScroll: boolean = false
   export let embedded: boolean = false
   export let withActions: boolean = true
+  export let withFlatActions: boolean = true
   export let excludedActions: string[] = []
   export let actions: Action[] = []
   export let onClick: (() => void) | undefined = undefined
@@ -70,6 +71,7 @@
   {withActions}
   {actions}
   {excludedActions}
+  {withFlatActions}
   viewlet={undefined}
   {onClick}
 >

plugins/activity-resources/src/components/activity-message/ActivityMessagePresenter.svelte

@@ -31,6 +31,7 @@
   export let skipLabel = false
   export let actions: Action[] = []
   export let excludedActions: string[] = []
+  export let withFlatActions: boolean = true
   export let onClick: (() => void) | undefined = undefined
   export let onReply: (() => void) | undefined = undefined
 
@@ -56,6 +57,7 @@
       hideReplies,
       actions,
       excludedActions,
+      withFlatActions,
       onClick,
       onReply
     }}

plugins/activity-resources/src/components/activity-message/ActivityMessageTemplate.svelte

@@ -46,8 +46,10 @@
   export let shouldScroll: boolean = false
   export let embedded: boolean = false
   export let withActions: boolean = true
+  export let withFlatActions: boolean = true
   export let showEmbedded = false
   export let hideReplies = false
+  export let skipLabel = false
   export let onClick: (() => void) | undefined = undefined
   export let onReply: (() => void) | undefined = undefined
 
@@ -150,8 +152,9 @@
             </div>
           {/if}
 
-          <slot name="header" />
+          {#if !skipLabel}
-
+            <slot name="header" />
+          {/if}
           <span class="text-sm">{getDisplayTime(message.createdOn ?? 0)}</span>
         </div>
 
@@ -175,17 +178,19 @@
         class:opened={isActionMenuOpened || message.isPinned}
       >
         {#if withActions}
-          <AddReactionAction object={message} />
+          {#if withFlatActions}
-          <PinMessageAction object={message} />
+            <AddReactionAction object={message} />
-          <SaveMessageAction object={message} />
+            <PinMessageAction object={message} />
+            <SaveMessageAction object={message} />
 
-          <ActivityMessageExtensionComponent
+            <ActivityMessageExtensionComponent
-            kind="action"
+              kind="action"
-            {extensions}
+              {extensions}
-            props={{ object: message }}
+              props={{ object: message }}
-            on:close={handleActionMenuClosed}
+              on:close={handleActionMenuClosed}
-            on:open={handleActionMenuOpened}
+              on:open={handleActionMenuOpened}
-          />
+            />
+          {/if}
           {#if withActionMenu}
             <ActionIcon icon={IconMoreH} size="small" action={showMenu} />
           {/if}

plugins/activity-resources/src/components/doc-update-message/DocUpdateMessagePresenter.svelte

@@ -46,6 +46,8 @@
   export let showEmbedded = false
   export let hideReplies = false
   export let actions: Action[] = []
+  export let skipLabel = false
+  export let withFlatActions: boolean = true
   export let excludedActions: string[] = []
   export let onClick: (() => void) | undefined = undefined
   export let onReply: (() => void) | undefined = undefined
@@ -157,6 +159,8 @@
     {showEmbedded}
     {hideReplies}
     {actions}
+    {skipLabel}
+    {withFlatActions}
     {onClick}
     {onReply}
   >

plugins/chunter-resources/src/components/chat-message/ChatMessagePresenter.svelte

@@ -41,6 +41,7 @@
   export let skipLabel = false
   export let actions: Action[] = []
   export let excludedActions: string[] = []
+  export let withFlatActions: boolean = true
   export let onClick: (() => void) | undefined = undefined
   export let onReply: (() => void) | undefined = undefined
 
@@ -164,6 +165,7 @@
     actions={additionalActions}
     {showEmbedded}
     {hideReplies}
+    {withFlatActions}
     {onClick}
     {onReply}
   >

plugins/chunter-resources/src/components/threads/ThreadMessagePresenter.svelte

@@ -25,6 +25,7 @@
   export let withActions: boolean = true
   export let showEmbedded = false
   export let skipLabel = false
+  export let withFlatActions: boolean = true
   export let onClick: (() => void) | undefined = undefined
   export let onReply: (() => void) | undefined = undefined
 </script>
@@ -39,6 +40,7 @@
   {showEmbedded}
   {embedded}
   {skipLabel}
+  {withFlatActions}
   {onClick}
   {onReply}
 />

plugins/notification-resources/src/components/inbox/ActivityInboxNotificationPresenter.svelte

@@ -23,7 +23,7 @@
   } from '@hcengineering/notification'
   import { ActivityMessagePresenter, combineActivityMessages } from '@hcengineering/activity-resources'
   import activity, { ActivityMessage, DisplayActivityMessage } from '@hcengineering/activity'
-  import { location, Action, CheckBox, getLocation, navigate, Component } from '@hcengineering/ui'
+  import { location, Action, getLocation, navigate, Component } from '@hcengineering/ui'
   import { getActions } from '@hcengineering/view-resources'
   import { getResource } from '@hcengineering/platform'
   import chunter from '@hcengineering/chunter'
@@ -35,7 +35,6 @@
   export let skipLabel = false
   export let viewlets: ActivityNotificationViewlet[] = []
   export let onClick: (() => void) | undefined = undefined
-  export let onCheck: ((isChecked: boolean) => void) | undefined = undefined
 
   const client = getClient()
   const messagesQuery = createQuery()
@@ -120,43 +119,23 @@
 </script>
 
 {#if displayMessage !== undefined}
-  <div class="notification gap-2 ml-2">
+  {#if viewlet}
-    {#if !embedded}
+    <Component is={viewlet.presenter} props={{ message: displayMessage, notification: value, embedded, onClick }} />
-      <div class="mt-6">
+  {:else}
-        <CheckBox
+    <ActivityMessagePresenter
-          circle
+      value={displayMessage}
-          kind="primary"
+      showNotify={!value.isViewed && !embedded}
-          on:value={(event) => {
+      isSelected={displayMessage._id === selectedMessageId}
-            if (onCheck) {
+      excludedActions={[chunter.action.ReplyToThread]}
-              onCheck(event.detail)
+      showEmbedded
-            }
+      {embedded}
-          }}
+      {skipLabel}
-        />
+      {actions}
-      </div>
+      withFlatActions={false}
-    {/if}
+      onReply={() => {
-    {#if viewlet}
+        handleReply(displayMessage)
-      <Component is={viewlet.presenter} props={{ message: displayMessage, notification: value, embedded, onClick }} />
+      }}
-    {:else}
+      {onClick}
-      <ActivityMessagePresenter
+    />
-        value={displayMessage}
+  {/if}
-        showNotify={!value.isViewed && !embedded}
-        isSelected={displayMessage._id === selectedMessageId}
-        excludedActions={[chunter.action.ReplyToThread]}
-        showEmbedded
-        {embedded}
-        {skipLabel}
-        {actions}
-        onReply={() => {
-          handleReply(displayMessage)
-        }}
-        {onClick}
-      />
-    {/if}
-  </div>
 {/if}
-
-<style lang="scss">
-  .notification {
-    display: flex;
-  }
-</style>

plugins/notification-resources/src/components/inbox/CommonInboxNotificationPresenter.svelte

@@ -29,15 +29,14 @@
   import { ActionIcon, CheckBox, IconMoreH, Label, showPopup } from '@hcengineering/ui'
   import { getDocLinkTitle, Menu } from '@hcengineering/view-resources'
   import { ActivityDocLink } from '@hcengineering/activity-resources'
-  import activity from '@hcengineering/activity'
   import view from '@hcengineering/view'
 
   import { InboxNotificationsClientImpl } from '../../inboxNotificationsClient'
 
   export let value: CommonInboxNotification
   export let embedded = false
+  export let skipLabel = false
   export let onClick: (() => void) | undefined = undefined
-  export let onCheck: ((isChecked: boolean) => void) | undefined = undefined
 
   const objectQuery = createQuery()
   const client = getClient()
@@ -92,48 +91,35 @@
   }
 </script>
 
-<div class="flex-presenter gap-2 ml-2">
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<div class="root clear-mins flex-grow" on:click={onClick}>
   {#if !embedded}
-    <CheckBox
+    {#if !value.isViewed}
-      circle
+      <div class="notify" />
-      kind="primary"
-      on:value={(event) => {
-        if (onCheck) {
-          onCheck(event.detail)
-        }
-      }}
-    />
-  {/if}
-  <!-- svelte-ignore a11y-no-static-element-interactions -->
-  <!-- svelte-ignore a11y-click-events-have-key-events -->
-  <div class="root clear-mins flex-grow" on:click={onClick}>
-    {#if !embedded}
-      {#if !value.isViewed}
-        <div class="notify" />
-      {/if}
-
-      {#if value.icon}
-        <SystemAvatar size="medium" icon={value.icon} iconProps={value.iconProps} />
-      {:else if person}
-        <Avatar size="medium" avatar={person.avatar} name={person.name} />
-      {:else}
-        <SystemAvatar size="medium" />
-      {/if}
-    {:else}
-      <div class="embeddedMarker" />
     {/if}
-    <div class="content ml-2 w-full clear-mins">
+
-      <div class="header clear-mins">
+    {#if value.icon}
-        {#if person}
+      <SystemAvatar size="medium" icon={value.icon} iconProps={value.iconProps} />
-          <EmployeePresenter value={person} shouldShowAvatar={false} />
+    {:else if person}
-        {:else}
+      <Avatar size="medium" avatar={person.avatar} name={person.name} />
-          <div class="strong">
+    {:else}
-            <Label label={core.string.System} />
+      <SystemAvatar size="medium" />
-          </div>
+    {/if}
-        {/if}
+  {:else}
-        {#if value.header}
+    <div class="embeddedMarker" />
-          <span class="text-sm lower"><Label label={value.header} /></span>
+  {/if}
-        {/if}
+  <div class="content ml-2 w-full clear-mins">
+    <div class="header clear-mins">
+      {#if person}
+        <EmployeePresenter value={person} shouldShowAvatar={false} />
+      {:else}
+        <div class="strong">
+          <Label label={core.string.System} />
+        </div>
+      {/if}
+      {#if !skipLabel && value.header}
+        <span class="text-sm lower"><Label label={value.header} /></span>
 
         {#if object}
           {#await getDocLinkTitle(client, object._id, object._class, object) then linkTitle}
@@ -144,23 +130,23 @@
             />
           {/await}
         {/if}
+      {/if}
 
-        <span class="text-sm">{getDisplayTime(value.createdOn ?? 0)}</span>
+      <span class="text-sm">{getDisplayTime(value.createdOn ?? 0)}</span>
-      </div>
-
-      <div class="flex-row-center">
-        <div class="customContent">
-          <MessageViewer message={content} />
-        </div>
-      </div>
     </div>
 
-    {#if !embedded}
+    <div class="flex-row-center">
-      <div class="actions clear-mins flex flex-gap-2 items-center" class:opened={isActionMenuOpened}>
+      <div class="customContent">
-        <ActionIcon icon={IconMoreH} size="small" action={showMenu} />
+        <MessageViewer message={content} />
       </div>
-    {/if}
+    </div>
   </div>
+
+  {#if !embedded}
+    <div class="actions clear-mins flex flex-gap-2 items-center" class:opened={isActionMenuOpened}>
+      <ActionIcon icon={IconMoreH} size="small" action={showMenu} />
+    </div>
+  {/if}
 </div>
 
 <style lang="scss">

plugins/notification-resources/src/components/inbox/InboxFlatListView.svelte

@@ -41,17 +41,33 @@
 <Scroller>
   {#each notifications as notification (notification._id)}
     <div animate:flip={{ duration: 500 }}>
-      <InboxNotificationPresenter
+      <div class="notification gap-2 ml-2">
-        value={notification}
+        <!--        <div class="mt-6">-->
-        {viewlets}
+        <!--          <CheckBox-->
-        onCheck={(isChecked) => handleCheck(notification, isChecked)}
+        <!--            circle-->
-        onClick={() => {
+        <!--            kind="primary"-->
-          dispatch('click', {
+        <!--            on:value={(event) => {-->
-            context: $notifyContextsStore.find(({ _id }) => _id === notification.docNotifyContext),
+        <!--              handleCheck(notification, event.detail)-->
-            notification
+        <!--            }}-->
-          })
+        <!--          />-->
-        }}
+        <!--        </div>-->
-      />
+        <InboxNotificationPresenter
+          value={notification}
+          {viewlets}
+          onClick={() => {
+            dispatch('click', {
+              context: $notifyContextsStore.find(({ _id }) => _id === notification.docNotifyContext),
+              notification
+            })
+          }}
+        />
+      </div>
     </div>
   {/each}
 </Scroller>
+
+<style lang="scss">
+  .notification {
+    display: flex;
+  }
+</style>