Update telegram sharing UI as designed (#503)

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

packages/ui/src/components/CheckBox.svelte

@@ -16,11 +16,13 @@
 <script lang="ts">
   export let checked: boolean = false
   export let symbol: 'check' | 'minus' = 'check'
+  export let circle: boolean = false
+  export let primaryColor: boolean = false
 </script>
 
 <label class="checkbox">
   <input class="chBox" type="checkbox" bind:checked={checked}>
-  <svg class="checkSVG" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <svg class="checkSVG" class:circle class:primaryColor viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
     <path class="back" d="M4,0h8c2.2,0,4,1.8,4,4v8c0,2.2-1.8,4-4,4H4c-2.2,0-4-1.8-4-4V4C0,1.8,1.8,0,4,0z"/>
     {#if symbol === 'minus'}
       <rect class="check" x="4" y="7.4" width="8" height="1.2"/>
@@ -55,6 +57,12 @@
           visibility: visible;
           fill: var(--theme-button-bg-enabled);
         }
+        &.primaryColor > .back {
+          fill: var(--trans-primary-button-bg);
+        }
+        &.primaryColor > .check {
+          fill: var(--theme-caption-color);
+        }
         & > .border {
           visibility: hidden;
         }
@@ -75,6 +83,10 @@
       height: 1rem;
       border-radius: .25rem;
 
+      &.circle {
+        border-radius: 50%;
+      }
+
       .back {
         fill: var(--theme-button-bg-hovered);
       }

packages/ui/src/index.ts

@@ -74,6 +74,7 @@ export { default as IconExpand } from './components/icons/Expand.svelte'
 export { default as IconActivity } from './components/icons/Activity.svelte'
 export { default as IconUp } from './components/icons/Up.svelte'
 export { default as IconDown } from './components/icons/Down.svelte'
+export { default as IconShare } from './components/icons/Share.svelte'
 export { default as IconDelete } from './components/icons/Delete.svelte'
 export { default as IconEdit } from './components/icons/Edit.svelte'
 export { default as IconInfo } from './components/icons/Info.svelte'

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

@@ -21,7 +21,7 @@
   import type { TelegramMessage } from '@anticrm/telegram'
   import type { Contact, EmployeeAccount } from '@anticrm/contact'
   import contact from '@anticrm/contact'
-  import { Button, Grid, ScrollBox, showPopup } from '@anticrm/ui'
+  import { ActionIcon, IconShare, Button, Grid, ScrollBox, showPopup } from '@anticrm/ui'
   import Message from './Message.svelte'
   import TelegramIcon from './icons/Telegram.svelte'
   import { getCurrentAccount, Ref, Space } from '@anticrm/core'
@@ -40,6 +40,7 @@
   let account: EmployeeAccount | undefined
   let enabled: boolean
   let selected: Ref<TelegramMessage>[] = []
+  let selectable = false
   const url = getMetadata(login.metadata.TelegramUrl) ?? ''
 
   const messagesQuery = createQuery()
@@ -138,6 +139,7 @@
   }
 
   function select (id: Ref<TelegramMessage>): void {
+    if (!selectable) return
     const index = selected.indexOf(id)
     if (index === -1) {
       selected.push(id)
@@ -173,20 +175,19 @@
   }
 
   function clear (): void {
+    selectable = false
     selected = []
   }
 </script>
 
-<div class="flex-row-center header">
-  {#if selected.length}
-    <div class="flex-between actions">
-      <Button label={`Share ${selected.length}`} primary on:click={share} />
-      <Button label='Cancel' on:click={clear} />
-    </div>
-  {:else}
+<div class="flex-between header">
+  <div class="flex">
     <div class="icon"><TelegramIcon size={'small'} /></div>
     <div class="title">Telegram</div>
-  {/if}
+  </div>
+  <div>
+    <ActionIcon icon={IconShare} size='medium' label='Share messages' direction='bottom' action={() => { selectable = !selectable }} />
+  </div>
 </div>
 <div class="flex-col h-full right-content">
   <ScrollBox vertical stretch>
@@ -196,16 +197,30 @@
           {#if isNewDate(messages, i)}
             <DateView {message} />
           {/if}
-          <Message {message} selected={selected.includes(message._id)} name={getName(messages, account, i)} on:click={() => {select(message._id)}}/>
+          <Message {message} {selectable} selected={selected.includes(message._id)} name={getName(messages, account, i)} on:select={() => {select(message._id)}}/>
         {/each}
       </Grid>
     {/if}
   </ScrollBox>
 </div>
-<div class="ref-input">
-  {#if enabled}
+
+<div class="ref-input" class:selectable>
+  {#if selectable}
+    <div class="flex-between">
+      <span>{selected.length} messages selected</span>
+      <div class="flex">
+        <div>
+          <Button label='Cancel' on:click={clear} />
+        </div>
+        <div class="ml-3">
+          <Button label='Publish selected' primary disabled={!selected.length} on:click={share} />
+        </div>
+      </div>
+    </div>
+  {:else if enabled}
       <ReferenceInput on:message={onMessage}/>
   {:else}
+  <ReferenceInput on:message={onMessage}/>
     <div class="flex-center">
       <Button label='Connect' primary on:click={(e) => {
         showPopup(Connect, {}, e.target)
@@ -217,15 +232,10 @@
 <style lang="scss">
   .header {
     flex-shrink: 0;
-    padding: 0 2.5rem;
+    padding: 0 5.5rem 0 2.5rem;
     height: 4.5rem;
     border-bottom: 1px solid var(--theme-card-divider);
 
-    .actions {
-      width: 100%;
-      margin-right: 4rem;
-    }
-
     .icon {
       opacity: 0.6;
     }
@@ -241,6 +251,10 @@
 
   .ref-input {
     padding: 1.5rem 2.5rem;
+
+    &.selectable {
+      border-top: 1px solid var(--theme-card-divider);
+    }
   }
 
   .right-content {

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

@@ -17,10 +17,13 @@
   import type { TelegramMessage } from '@anticrm/telegram'
   import { MessageViewer } from '@anticrm/presentation'
   import { formatName } from '@anticrm/contact'
+  import { CheckBox } from '@anticrm/ui'
+  import { createEventDispatcher } from 'svelte'
 
   export let message: TelegramMessage
   export let name: string | undefined = undefined
   export let selected: boolean = false
+  export let selectable: boolean = false
 
   export let colors: string[] = ['#A5D179', '#77C07B', '#60B96E', '#45AEA3', '#46CBDE', '#47BDF6',
                                  '#5AADF6', '#73A6CD', '#B977CB', '#7C6FCD', '#6F7BC5', '#F28469']
@@ -34,9 +37,12 @@
     }
     return colors[Math.abs(hash) % colors.length]
   }
+
+  const dispatch = createEventDispatcher()
 </script>
 
-<div class="message" class:selected class:incoming={message.incoming} on:click>
+<div class={message.incoming ? "flex-between" : "flex-row-center"} class:outcoming={!message.incoming} on:click={() => { dispatch('select', message) }}>
+  <div class="message" class:incoming={message.incoming} class:mr-4={selectable} class:selected>
     {#if name}
       <div class="name" style="color: {getNameColor(name)}">{formatName(name)}</div>
     {/if}
@@ -44,24 +50,32 @@
       <div class="text"><MessageViewer message={message.content}/></div>
       <div class="time">{new Date(message.modifiedOn).toLocaleString('default', { hour: 'numeric', minute: 'numeric'})}</div>
     </div>
+  </div>
+  {#if selectable}
+    <div class="check">
+      <CheckBox circle primaryColor bind:checked={selected} />
+    </div>
+  {/if}
 </div>
 
 <style lang="scss">
+  .outcoming {
+    justify-content: end;
+  }
+
   .message {
     max-width: 66%;
     border-radius: .75rem;
     padding: .75rem;
     width: fit-content;
-    justify-self: flex-end;
     background-color: rgba(67, 67, 72, .6);
 
     &.incoming {
       background-color: rgba(67, 67, 72, .3);
-      justify-self: flex-start;
     }
 
     &.selected {
-      background-color: var(--theme-content-trans-color) !important;
+      background-color: var(--primary-button-enabled) !important;
     }
 
     .text {
@@ -78,4 +92,8 @@
     }
   }
 
+  .check {
+    justify-self: flex-end;
+  }
+
 </style>