TSK-1046 Gmail/telegram messages collaborators TSK-1097 Inbox scroll (#2928)

Signed-off-by: Denis Bykhov <bykhov.denis@gmail.com>

plugins/activity-resources/src/components/TxView.svelte

@@ -203,7 +203,7 @@
             {/if}
             <span class="time ml-1"><TimeSince value={tx.tx.modifiedOn} /></span>
           {:else if viewlet && viewlet.label}
-            <span class="lower">
+            <span class="lower whitespace-nowrap">
               <Label label={viewlet.label} params={viewlet.labelParams ?? {}} />
             </span>
           {/if}

plugins/contact-resources/src/components/ChannelPanel.svelte

@@ -0,0 +1,45 @@
+<!--
+// Copyright © 2023 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 contact, { Channel } from '@hcengineering/contact'
+  import { Class, Ref } from '@hcengineering/core'
+  import { createQuery, getClient } from '@hcengineering/presentation'
+  import { AnyComponent, Component } from '@hcengineering/ui'
+
+  export let _id: Ref<Channel>
+  export let _class: Ref<Class<Channel>>
+  export let embedded = false
+
+  const client = getClient()
+
+  let channel: Channel | undefined = undefined
+
+  const query = createQuery()
+  $: query.query(_class, { _id }, (res) => {
+    ;[channel] = res
+  })
+
+  async function getPresenter (channel: Channel | undefined): Promise<AnyComponent | undefined> {
+    if (channel === undefined) return
+    const provider = await client.findOne(contact.class.ChannelProvider, { _id: channel.provider })
+    return provider?.presenter
+  }
+</script>
+
+{#await getPresenter(channel) then presenter}
+  {#if presenter}
+    <Component is={presenter} props={{ embedded, _id: channel?.attachedTo, _class: channel?.attachedToClass }} />
+  {/if}
+{/await}

plugins/contact-resources/src/components/activity/ActivityChannelPresenter.svelte

@@ -0,0 +1,43 @@
+<!--
+// Copyright © 2023 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 contact, { Channel, ChannelProvider, Contact, getName } from '@hcengineering/contact'
+  import { Ref } from '@hcengineering/core'
+  import { getEmbeddedLabel } from '@hcengineering/platform'
+  import { createQuery } from '@hcengineering/presentation'
+  import { CircleButton, tooltip } from '@hcengineering/ui'
+  import { DocNavLink } from '@hcengineering/view-resources'
+
+  export let value: Channel
+  let provider: ChannelProvider | undefined
+  const providerQuery = createQuery()
+  $: providerQuery.query(contact.class.ChannelProvider, { _id: value.provider }, (res) => ([provider] = res))
+  let target: Contact | undefined
+  const query = createQuery()
+  $: query.query(contact.class.Contact, { _id: value.attachedTo as Ref<Contact> }, (res) => ([target] = res))
+</script>
+
+<div class="flex-row-center" use:tooltip={{ label: getEmbeddedLabel(value.value) }}>
+  {#if provider}
+    <CircleButton icon={provider.icon} size={'small'} />
+  {/if}
+  {#if target}
+    <div class="ml-1">
+      <DocNavLink object={target}>
+        {getName(target)}
+      </DocNavLink>
+    </div>
+  {/if}
+</div>

plugins/contact-resources/src/index.ts

@@ -70,6 +70,9 @@ import UsersPopup from './components/UsersPopup.svelte'
 import ActivityChannelMessage from './components/activity/ActivityChannelMessage.svelte'
 import ExpandRightDouble from './components/icons/ExpandRightDouble.svelte'
 import IconMembers from './components/icons/Members.svelte'
+import ChannelPresenter from './components/ChannelPresenter.svelte'
+import ChannelPanel from './components/ChannelPanel.svelte'
+import ActivityChannelPresenter from './components/activity/ActivityChannelPresenter.svelte'
 
 import contact from './plugin'
 import {
@@ -276,7 +279,10 @@ export default async (): Promise<Resources> => ({
     MergeEmployee,
     Avatar,
     UserBoxList,
-    ActivityChannelMessage
+    ActivityChannelMessage,
+    ChannelPresenter,
+    ChannelPanel,
+    ActivityChannelPresenter
   },
   completion: {
     EmployeeQuery: async (

plugins/contact/src/index.ts

@@ -182,7 +182,8 @@ export const contactPlugin = plugin(contactId, {
     ChannelsPresenter: '' as AnyComponent,
     MembersPresenter: '' as AnyComponent,
     Avatar: '' as AnyComponent,
-    UserBoxList: '' as AnyComponent
+    UserBoxList: '' as AnyComponent,
+    ChannelPresenter: '' as AnyComponent
   },
   channelProvider: {
     Email: '' as Ref<ChannelProvider>,

plugins/gmail-resources/src/components/Main.svelte

@@ -35,6 +35,7 @@
 
   export let _id: Ref<Contact>
   export let _class: Ref<Class<Contact>>
+  export let embedded = false
   export let message: Message | undefined = undefined
 
   let object: Contact
@@ -112,6 +113,7 @@
     isHeader={true}
     isAside={false}
     isFullSize
+    {embedded}
     on:fullsize
     on:close={() => {
       dispatch('close')

plugins/gmail-resources/src/components/activity/TxWriteMessage.svelte

@@ -29,4 +29,4 @@
   }
 </script>
 
-<span class="over-underline overflow-label max-w-80" on:click={click}>{value.subject}</span>
+<span class="over-underline overflow-label" on:click={click}>{value.subject}</span>

plugins/notification-resources/src/components/Inbox.svelte

@@ -83,7 +83,7 @@
           <Label label={notification.string.Inbox} />
         </span>
       </div>
-      <div class="top-divider">
+      <div class="top-divider clear-mins h-full">
         <Scroller>
           {#if loading}
             <Loading />

plugins/notification-resources/src/components/TxView.svelte

@@ -104,8 +104,8 @@
 
 {#if (viewlet !== undefined && !((viewlet?.hideOnRemove ?? false) && ptx?.removed)) || model.length > 0}
   <div class="msgactivity-container">
-    <div class="msgactivity-content" class:content={isColumn} class:comment={isComment}>
-      <div class="msgactivity-content__header">
+    <div class="msgactivity-content clear-mins" class:content={isColumn} class:comment={isComment}>
+      <div class="msgactivity-content__header clear-mins">
         <div class="msgactivity-content__title labels-row">
           {#if viewlet && viewlet?.editable}
             {#if viewlet.label}
@@ -115,12 +115,12 @@
               <span class="lower"><Label label={activity.string.Edited} /></span>
             {/if}
           {:else if viewlet && viewlet.label}
-            <span class="lower">
+            <span class="lower whitespace-nowrap">
               <Label label={viewlet.label} params={viewlet.labelParams ?? {}} />
             </span>
-            {#if viewlet.labelComponent}
-              <Component is={viewlet.labelComponent} {props} />
-            {/if}
+          {/if}
+          {#if viewlet && viewlet.labelComponent}
+            <Component is={viewlet.labelComponent} {props} />
           {/if}
 
           {#if viewlet === undefined && model.length > 0 && ptx?.updateTx}
@@ -248,6 +248,7 @@
       }
       .msgactivity-content__title {
         display: inline-flex;
+        flex-wrap: nowrap;
         align-items: baseline;
         flex-grow: 1;
       }

plugins/telegram-resources/src/components/Chat.svelte

@@ -51,6 +51,7 @@
 
   export let _id: Ref<Contact>
   export let _class: Ref<Class<Contact>>
+  export let embedded = false
 
   let object: Contact
   let channel: Channel | undefined = undefined
@@ -245,6 +246,7 @@
   <Panel
     isHeader={true}
     isAside={false}
+    {embedded}
     isFullSize
     on:fullsize
     on:close={() => {

plugins/telegram-resources/src/components/activity/TxMessage.svelte

@@ -0,0 +1,29 @@
+<!--
+// Copyright © 2023 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 { MessageViewer } from '@hcengineering/presentation'
+  import { TelegramMessage } from '@hcengineering/telegram'
+  export let value: TelegramMessage
+</script>
+
+<div class="overflow-label content">
+  <MessageViewer message={value.content} />
+</div>
+
+<style lang="scss">
+  .content {
+    height: 1rem;
+  }
+</style>

plugins/telegram-resources/src/index.ts

@@ -20,6 +20,7 @@ import presentation from '@hcengineering/presentation'
 import Chat from './components/Chat.svelte'
 import Connect from './components/Connect.svelte'
 import Reconnect from './components/Reconnect.svelte'
+import TxMessage from './components/activity/TxMessage.svelte'
 import IconTelegram from './components/icons/TelegramColor.svelte'
 import TxSharedCreate from './components/activity/TxSharedCreate.svelte'
 import { concatLink } from '@hcengineering/core'
@@ -32,7 +33,8 @@ export default async (): Promise<Resources> => ({
     IconTelegram
   },
   activity: {
-    TxSharedCreate
+    TxSharedCreate,
+    TxMessage
   },
   handler: {
     DisconnectHandler: async () => {

plugins/telegram-resources/src/plugin.ts

@@ -17,6 +17,7 @@
 import { IntlString, mergeIds } from '@hcengineering/platform'
 
 import telegram, { telegramId } from '@hcengineering/telegram'
+import { AnyComponent } from '@hcengineering/ui'
 
 export default mergeIds(telegramId, telegram, {
   string: {
@@ -35,5 +36,8 @@ export default mergeIds(telegramId, telegram, {
     Share: '' as IntlString,
     PublishSelected: '' as IntlString,
     MessagesSelected: '' as IntlString
+  },
+  component: {
+    MessagePresenter: '' as AnyComponent
   }
 })