Fix 1630. UI fixes. (#1651)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>

packages/theme/styles/components.scss

@@ -425,8 +425,9 @@
   }
 }
 
-// THead background-color in Tooltip
-.popup-tooltip .antiTable .scroller-thead { background-color: var(--accent-bg-color); }
+// THead background-color in Tooltip and Popups
+.popup-tooltip .antiTable .scroller-thead,
+.popup .antiTable .scroller-thead { background-color: var(--accent-bg-color); }
 
 // Hide row menu in Tooltip
 .popup-tooltip .antiTable .antiTable-body__row:hover .antiTable-cells__firstCell .antiTable-cells__firstCell-menuRow { visibility: hidden; }

plugins/activity-assets/src/tsdoc-metadata.json

@@ -1,11 +1,11 @@
-// This file is read by tools that parse documentation comments conforming to the TSDoc standard.
-// It should be published with your NPM package.  It should not be tracked by Git.
-{
-  "tsdocVersion": "0.12",
-  "toolPackages": [
-    {
-      "packageName": "@microsoft/api-extractor",
-      "packageVersion": "7.23.0"
-    }
-  ]
-}
+// This file is read by tools that parse documentation comments conforming to the TSDoc standard.
+// It should be published with your NPM package.  It should not be tracked by Git.
+{
+  "tsdocVersion": "0.12",
+  "toolPackages": [
+    {
+      "packageName": "@microsoft/api-extractor",
+      "packageVersion": "7.23.0"
+    }
+  ]
+}

plugins/attachment-resources/src/components/AttachmentPresenter.svelte

@@ -53,7 +53,8 @@
       {#if removable}
         <div
           class="remove-btn"
-          on:click|preventDefault={() => {
+          on:click|preventDefault={(ev) => {
+            ev.stopPropagation()
             dispatch('remove')
           }}
         >
@@ -68,7 +69,8 @@
         {#if removable}
           <div
             class="remove-btn"
-            on:click|preventDefault={() => {
+            on:click={(ev) => {
+              ev.stopPropagation()
               dispatch('remove')
             }}
           >
@@ -133,13 +135,14 @@
   }
 
   .name {
+    white-space: nowrap;
     font-weight: 500;
     color: var(--theme-content-accent-color);
-    white-space: nowrap;
     cursor: pointer;
   }
 
   .type {
+    white-space: nowrap;
     font-size: 0.75rem;
     color: var(--theme-content-dark-color);
   }

plugins/attachment-resources/src/components/AttachmentRefInput.svelte

@@ -22,8 +22,6 @@
   import { Account, Class, Doc, generateId, Ref, Space } from '@anticrm/core'
   import { Attachment } from '@anticrm/attachment'
   import AttachmentPresenter from './AttachmentPresenter.svelte'
-  import { IconClose } from '@anticrm/ui'
-  import { ActionIcon } from '@anticrm/ui'
 
   export let objectId: Ref<Doc>
   export let space: Ref<Space>
@@ -173,19 +171,16 @@
   on:drop|preventDefault|stopPropagation={fileDrop}
 >
   {#if attachments.size}
-    <div class="flex-row-center list">
+    <div class="flex-row-center list scroll-divider-color">
       {#each Array.from(attachments.values()) as attachment}
         <div class="item flex">
-          <AttachmentPresenter value={attachment} />
-          <div class="remove">
-            <ActionIcon
-              icon={IconClose}
-              action={() => {
-                removeAttachment(attachment)
-              }}
-              size="small"
-            />
-          </div>
+          <AttachmentPresenter
+            value={attachment}
+            removable
+            on:remove={(result) => {
+              if (result !== undefined) removeAttachment(attachment)
+            }}
+          />
         </div>
       {/each}
     </div>
@@ -204,30 +199,18 @@
 
 <style lang="scss">
   .list {
-    padding: 1rem;
+    padding: 0.5rem;
     color: var(--theme-caption-color);
     overflow-x: auto;
-    background-color: var(--theme-bg-accent-color);
-    border: 1px solid var(--theme-bg-accent-color);
-    border-radius: 0.75rem;
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
+    overflow-y: hidden;
+    background-color: var(--accent-bg-color);
+    border: 1px solid var(--divider-color);
+    border-radius: 0.5rem 0.5rem 0 0;
+    border-bottom: none;
 
     .item + .item {
       padding-left: 1rem;
-      border-left: 1px solid var(--theme-bg-accent-color);
-    }
-
-    .item {
-      .remove {
-        visibility: hidden;
-      }
-    }
-
-    .item:hover {
-      .remove {
-        visibility: visible;
-      }
+      border-left: 1px solid var(--divider-color);
     }
   }
 </style>

plugins/gmail-assets/src/tsdoc-metadata.json

@@ -1,11 +1,11 @@
-// This file is read by tools that parse documentation comments conforming to the TSDoc standard.
-// It should be published with your NPM package.  It should not be tracked by Git.
-{
-  "tsdocVersion": "0.12",
-  "toolPackages": [
-    {
-      "packageName": "@microsoft/api-extractor",
-      "packageVersion": "7.23.0"
-    }
-  ]
-}
+// This file is read by tools that parse documentation comments conforming to the TSDoc standard.
+// It should be published with your NPM package.  It should not be tracked by Git.
+{
+  "tsdocVersion": "0.12",
+  "toolPackages": [
+    {
+      "packageName": "@microsoft/api-extractor",
+      "packageVersion": "7.23.0"
+    }
+  ]
+}

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

@@ -19,10 +19,9 @@
   import gmail from '../plugin'
   import { Channel, Contact, EmployeeAccount, formatName } from '@anticrm/contact'
   import contact from '@anticrm/contact'
-  import plugin, { IconShare, Button, Tooltip, showPopup, Icon, Label, eventToHTMLElement, Scroller } from '@anticrm/ui'
+  import plugin, { IconShare, Button, Tooltip, Icon, Label, Scroller } from '@anticrm/ui'
   import { getCurrentAccount, Ref, SortingOrder, Space } from '@anticrm/core'
   import setting from '@anticrm/setting'
-  import Connect from './Connect.svelte'
   import Messages from './Messages.svelte'
   import { NotificationClientImpl } from '@anticrm/notification-resources'
   import IconInbox from './icons/Inbox.svelte'
@@ -30,13 +29,13 @@
   export let object: Contact
   export let channel: Channel
   export let newMessage: boolean
+  export let enabled: boolean
 
   const EMAIL_REGEX =
     /(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))/
 
   let messages: Message[] = []
   let accounts: EmployeeAccount[] = []
-  let enabled: boolean
   let selected: Set<Ref<SharedMessage>> = new Set<Ref<SharedMessage>>()
   let selectable = false
 
@@ -122,50 +121,42 @@
   }
 </script>
 
-<div class="popupPanel-body__main-header bottom-divider">
-  {#if selectable}
-    <div class="flex-between w-full">
-      <span><b>{selected.size}</b> <Label label={gmail.string.MessagesSelected} /></span>
-      <div class="flex">
-        <div>
-          <Button label={gmail.string.Cancel} on:click={clear} />
-        </div>
-        <div class="ml-3">
-          <Button label={gmail.string.PublishSelected} kind={'primary'} disabled={!selected.size} on:click={share} />
+{#if enabled}
+  <div class="popupPanel-body__main-header bottom-divider">
+    {#if selectable}
+      <div class="flex-between w-full">
+        <span><b>{selected.size}</b> <Label label={gmail.string.MessagesSelected} /></span>
+        <div class="flex">
+          <div>
+            <Button label={gmail.string.Cancel} on:click={clear} />
+          </div>
+          <div class="ml-3">
+            <Button label={gmail.string.PublishSelected} kind={'primary'} disabled={!selected.size} on:click={share} />
+          </div>
         </div>
       </div>
-    </div>
-  {:else if enabled}
-    <div class="flex-between">
-      <Button
-        label={gmail.string.CreateMessage}
-        kind={'primary'}
-        on:click={() => {
-          newMessage = true
-        }}
-      />
-      <Tooltip label={gmail.string.ShareMessages}>
+    {:else}
+      <div class="flex-between">
         <Button
-          icon={IconShare}
-          kind={'transparent'}
-          on:click={async () => {
-            selectable = !selectable
+          label={gmail.string.CreateMessage}
+          kind={'primary'}
+          on:click={() => {
+            newMessage = true
           }}
         />
-      </Tooltip>
-    </div>
-  {:else}
-    <div class="flex-center flex-grow">
-      <Button
-        label={gmail.string.Connect}
-        kind={'primary'}
-        on:click={(e) => {
-          showPopup(Connect, {}, eventToHTMLElement(e))
-        }}
-      />
-    </div>
-  {/if}
-</div>
+        <Tooltip label={gmail.string.ShareMessages}>
+          <Button
+            icon={IconShare}
+            kind={'transparent'}
+            on:click={async () => {
+              selectable = !selectable
+            }}
+          />
+        </Tooltip>
+      </div>
+    {/if}
+  </div>
+{/if}
 <Scroller>
   <div class="popupPanel-body__main-content py-4 clear-mins flex-no-shrink">
     {#if messages && messages.length > 0}

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

@@ -22,9 +22,10 @@
   import Chats from './Chats.svelte'
   import { createQuery, getClient } from '@anticrm/presentation'
   import { NotificationClientImpl } from '@anticrm/notification-resources'
-  import { Panel, Icon, Label } from '@anticrm/ui'
+  import { Panel, Icon, Label, Button, eventToHTMLElement, showPopup } from '@anticrm/ui'
   import { createEventDispatcher } from 'svelte'
   import gmail from '../plugin'
+  import Connect from './Connect.svelte'
 
   export let _id: Ref<Doc>
   export let _class: Ref<Class<Doc>>
@@ -35,6 +36,7 @@
   let currentMessage: SharedMessage | undefined = undefined
   let channel: Channel | undefined = undefined
   const notificationClient = NotificationClientImpl.getClient()
+  let enabled: boolean
 
   const client = getClient()
   const dispatch = createEventDispatcher()
@@ -90,12 +92,25 @@
         </div>
       </div>
     </svelte:fragment>
+
+    <svelte:fragment slot="utils">
+      {#if !enabled}
+        <Button
+          label={gmail.string.Connect}
+          kind={'primary'}
+          on:click={(e) => {
+            showPopup(Connect, {}, eventToHTMLElement(e))
+          }}
+        />
+      {/if}
+    </svelte:fragment>
+
     {#if newMessage}
       <NewMessage {object} {channel} {currentMessage} on:close={back} />
     {:else if currentMessage}
       <FullMessage {currentMessage} bind:newMessage on:close={back} />
     {:else}
-      <Chats {object} {channel} bind:newMessage on:select={selectHandler} />
+      <Chats {object} {channel} bind:newMessage bind:enabled on:select={selectHandler} />
     {/if}
   </Panel>
 {/if}

plugins/recruit-resources/src/components/CreateApplication.svelte

@@ -65,7 +65,7 @@
   }
 
   async function createApplication () {
-    const state = await client.findOne(task.class.State, { space: doc.space, _id: selectedState._id })
+    const state = await client.findOne(task.class.State, { space: doc.space, _id: doc.state })
     if (state === undefined) {
       throw new Error(`create application: state not found space:${doc.space}`)
     }
@@ -149,7 +149,7 @@
   let states: Array<{ id: number | string; color: number; label: string }> = []
   let selectedState: State
   const statesQuery = createQuery()
-  $: if (doc.space !== undefined) {
+  $: if (doc.space) {
     statesQuery.query(
       task.class.State,
       { space: doc.space },
@@ -158,6 +158,7 @@
           return { id: s._id, label: s.title, color: s.color }
         })
         selectedState = res.filter((s) => s._id === doc.state)[0] ?? res[0]
+        doc.state = selectedState._id
       },
       { sort: { rank: SortingOrder.Ascending } }
     )
@@ -211,9 +212,10 @@
             { value: states, searchable: true, placeholder: ui.string.SearchDots },
             eventToHTMLElement(ev),
             (result) => {
-              if (result && result.id !== doc.state) {
+              if (result && result.id) {
                 doc.state = result.id
                 selectedState = result
+                selectedState.title = result.label
               }
             }
           )

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

@@ -242,36 +242,36 @@
       {/if}
     </Scroller>
 
-    <div class="popupPanel-body__main-header ref-input" class:selectable>
-      {#if selectable}
-        <div class="flex-between">
-          <span>{selected.size} messages selected</span>
-          <div class="flex">
-            <div>
-              <Button label={telegram.string.Cancel} size={'medium'} on:click={clear} />
-            </div>
-            <div class="ml-3">
-              <Button
-                label={telegram.string.PublishSelected}
-                size={'medium'}
-                kind={'primary'}
-                disabled={!selected.size}
-                on:click={share}
-              />
+    {#if integration !== undefined && !integration.disabled}
+      <div class="popupPanel-body__main-header ref-input" class:selectable>
+        {#if selectable}
+          <div class="flex-between">
+            <span>{selected.size} messages selected</span>
+            <div class="flex">
+              <div>
+                <Button label={telegram.string.Cancel} size={'medium'} on:click={clear} />
+              </div>
+              <div class="ml-3">
+                <Button
+                  label={telegram.string.PublishSelected}
+                  size={'medium'}
+                  kind={'primary'}
+                  disabled={!selected.size}
+                  on:click={share}
+                />
+              </div>
             </div>
           </div>
-        </div>
-      {:else if integration === undefined || integration.disabled}
-        <div class="flex-center h-18" />
-      {:else}
-        <AttachmentRefInput
-          space={telegram.space.Telegram}
-          _class={telegram.class.NewMessage}
-          {objectId}
-          on:message={onMessage}
-        />
-      {/if}
-    </div>
+        {:else}
+          <AttachmentRefInput
+            space={telegram.space.Telegram}
+            _class={telegram.class.NewMessage}
+            {objectId}
+            on:message={onMessage}
+          />
+        {/if}
+      </div>
+    {/if}
   </Panel>
 {/if}