Fix TooltipInstance horizontal position and other little fixes (#729)

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

packages/panel/src/components/Panel.svelte

@@ -24,7 +24,7 @@
 
   export let title: string
   export let icon: Asset | AnySvelteComponent
-  export let fullSize: boolean = false
+  export let fullSize: boolean = true
   export let rightSection: AnyComponent | undefined = undefined
   export let object: Doc
 
@@ -62,7 +62,7 @@
         <div class="fs-title">{title}</div>
         <div class="small-text content-dark-color">Candidate pool name</div>
       </div>
-      <ActionIcon icon={IconMoreH} size={'small'} />
+      <ActionIcon icon={IconMoreH} size={'medium'} />
     </div>
     {#if $$slots.subtitle}<div class="flex-row-center subtitle"><slot name="subtitle" /></div>{/if}
 

packages/ui/lang/en.json

@@ -4,7 +4,6 @@
     "Minutes": "{minutes, plural, =0 {less than a minute ago} =1 {a minute ago} other {# minutes ago}}",
     "Hours": "{hours, plural, =0 {less than an hour ago} =1 {an hour ago} other {# hours ago}}",
     "Days": "{days, plural, =0 {today} =1 {yesterday} other {# days ago}}",
-    "Clear": "Clear",
     "ShowMore": "Show more",
     "ShowLess": "Show less"
   }

packages/ui/src/components/EditWithIcon.svelte

@@ -17,9 +17,7 @@
   import type { Asset } from '@anticrm/platform'
   import type { AnySvelteComponent } from '../types'
   import Icon from './Icon.svelte'
-  import Tooltip from './Tooltip.svelte'
   import IconClose from './icons/Close.svelte'
-  import ui from '../plugin'
 
   export let icon: Asset | AnySvelteComponent
   export let width: string | undefined = undefined
@@ -34,9 +32,7 @@
   <input bind:this={textHTML} type="text" bind:value {placeholder} on:change/>
   {#if value}
     <div class="ml-2 btn" on:click={() => { textHTML.value = ''; textHTML.dispatchEvent(new Event('change')) }}>
-      <Tooltip label={ui.string.Clear}>
-        <div class="scale-75"><Icon icon={IconClose} size={'small'} /></div>
-      </Tooltip>
+      <Icon icon={IconClose} size={'x-small'} />
     </div>
   {/if}
 </div>

packages/ui/src/components/TooltipInstance.svelte

@@ -40,7 +40,7 @@
 
         if ($tooltip.component) {
 
-          tooltipHTML.style.top = tooltipHTML.style.bottom = tooltipHTML.style.height = ''
+          tooltipHTML.style.top = tooltipHTML.style.bottom = tooltipHTML.style.left = tooltipHTML.style.right = tooltipHTML.style.height = ''
           if (rect.bottom + tooltipHTML.clientHeight + 28 < doc.height) {
             tooltipHTML.style.top = `calc(${rect.bottom}px + 5px + .25rem)`
             dir = 'bottom'
@@ -60,13 +60,10 @@
             dir = 'bottom'
           }
 
-          if (rect.width / 2 + rect.left + clWidth / 2 > doc.width - 8)
-            tooltipHTML.style.right = '.5rem'
-          else if (rect.width / 2 + rect.left - clWidth / 2 < 8)
-            tooltipHTML.style.left = '.5rem'
-          else if ((rect.width / 2 + rect.left + clWidth / 2 < doc.width) && (rect.width / 2 + rect.left - clWidth / 2 > 0))
-            tooltipHTML.style.left = rect.width / 2 + rect.left - clWidth / 2 + 'px'
-          else tooltipHTML.style.left = tooltipHTML.style.right = '.5rem'
+          const tempLeft = rect.width / 2 + rect.left - clWidth / 2
+          if (tempLeft + clWidth > doc.width - 8) tooltipHTML.style.right = '.5rem'
+          else if (tempLeft < 8) tooltipHTML.style.left = '.5rem'
+          else tooltipHTML.style.left = `${tempLeft}px`
 
           if (nubHTML) {
             nubHTML.style.top = rect.top + 'px'

packages/ui/src/plugin.ts

@@ -28,7 +28,6 @@ export default plugin(uiId, {
     Minutes: '' as IntlString,
     Hours: '' as IntlString,
     Days: '' as IntlString,
-    Clear: '' as IntlString,
     ShowMore: '' as IntlString,
     ShowLess: '' as IntlString
   }

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

@@ -28,7 +28,7 @@
   export let _id: Ref<Contact>
   let object: Contact
   let rightSection: AnyComponent | undefined
-  let fullSize: boolean = false
+  let fullSize: boolean = true
 
   const client = getClient()
   const hierarchy = client.getHierarchy()
@@ -127,17 +127,3 @@
     {/each}
   </Panel>
 {/if}
-
-<style lang="scss">
-  .name {
-    font-weight: 500;
-    font-size: 1.25rem;
-    color: var(--theme-caption-color);
-  }
-  .channels {
-    margin-top: 0.75rem;
-    span {
-      margin-left: 0.5rem;
-    }
-  }
-</style>

plugins/task-resources/src/components/state/StatesBarElement.svelte

@@ -20,7 +20,7 @@
   export let color: string
 </script>
 
-<svg width=".5rem" height="2.25rem" viewBox="0 0 8 36" class:selected xmlns="http://www.w3.org/2000/svg">
+<svg class="svg-statesbar-element" viewBox="0 0 8 36" class:selected xmlns="http://www.w3.org/2000/svg">
   {#if side === 'left' && kind === 'arrow'}
     <path
       class="bg"
@@ -53,6 +53,10 @@
 </svg>
 
 <style lang="scss">
+  .svg-statesbar-element {
+    width: .5rem;
+    height: 2.25rem;
+  }
   .bg {
     fill: var(--theme-button-bg-enabled);
   }

plugins/workbench-resources/src/components/SpaceContent.svelte

@@ -27,7 +27,7 @@
 
 {#if viewlet}
   {#key space}
-    <div class="container">
+    <div class="spacecontent-container">
       <Component is={viewlet.$lookup?.descriptor?.component} props={ {
         _class,
         space,
@@ -41,28 +41,7 @@
 {/if}
 
 <style lang="scss">
-  .toolbar {
-    margin: 1.25rem 1.75rem 1.75rem 2.5rem;
-
-    .btn {
-      width: 2.5rem;
-      height: 2.5rem;
-      background-color: transparent;
-      border-radius: .5rem;
-      cursor: pointer;
-
-      color: var(--theme-content-trans-color);
-      &:hover { color: var(--theme-caption-color); }
-      &.selected {
-        color: var(--theme-content-accent-color);
-        background-color: var(--theme-button-bg-enabled);
-        cursor: default;
-        &:hover { color: var(--theme-caption-color); }
-      }
-    }
-  }
-
-  .container {
+  .spacecontent-container {
     display: flex;
     flex-direction: column;
     min-height: 0;