Update EditWithIcon, add clear (#537)

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

packages/theme/styles/_layouts.scss

@@ -187,6 +187,7 @@ p:last-child { margin-block-end: 0; }
 .ml-3 { margin-left: .75rem; }
 .ml-4 { margin-left: 1rem; }
 .mr-1 { margin-right: .25rem; }
+.mr-2 { margin-right: .5rem; }
 .mr-4 { margin-right: 1rem; }
 .mr-8 { margin-right: 2rem; }
 .mt-2 { margin-top: .5rem; }

packages/ui/lang/en.json

@@ -3,6 +3,7 @@
     "Cancel": "Cancel",
     "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}}"
+    "Days": "{days, plural, =0 {today} =1 {yesterday} other {# days ago}}",
+    "Clear": "Clear"
   }
 }

packages/ui/src/components/ActionIcon.svelte

@@ -44,6 +44,7 @@
   .button {
     color: var(--theme-caption-color);
     border-radius: .125rem;
+    cursor: pointer;
 
     .icon {
       // transform-origin: center center;

packages/ui/src/components/EditWithIcon.svelte

@@ -12,57 +12,61 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 -->
+
 <script lang="ts">
   import type { Asset } from '@anticrm/platform'
   import type { AnySvelteComponent } from '../types'
   import Icon from './Icon.svelte'
+  import Tooltip from './Tooltip.svelte'
+  import ActionIcon from './ActionIcon.svelte'
+  import IconClose from './icons/Close.svelte'
+  import ui from '../plugin'
+  import Label from './Label.svelte'
 
   export let icon: Asset | AnySvelteComponent
   export let width: string | undefined = undefined
   export let value: string | undefined = undefined
   export let placeholder: string = 'placeholder'
+
+  let textHTML: HTMLElement
 </script>
 
-<div class="editbox" style={width ? 'width: ' + width : ''}>
-  <input type="text" bind:value {placeholder} on:change/>
-  <div class="icon">
-    {#if typeof (icon) === 'string'}
-      <Icon {icon} size={'small'} />
-    {:else}
-      <svelte:component this={icon} size={'small'} />
-    {/if}
-  </div>
+<div class="flex-between editbox" style={width ? 'width: ' + width : ''} on:click={() => textHTML.focus()}>
+  <div class="mr-2"><Icon {icon} size={'small'} /></div>
+  <input bind:this={textHTML} type="text" bind:value {placeholder} on:change/>
+  {#if value}
+    <div class="ml-2 btn" on:click={() => { value = '' }}>
+      <Tooltip label={ui.string.Clear}>
+        <div class="scale-75"><Icon icon={IconClose} size={'small'} /></div>
+      </Tooltip>
+    </div>
+  {/if}
 </div>
 
 <style lang="scss">
   .editbox {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
+    padding: 0 1rem;
     min-width: 16.75rem;
     height: 2.5rem;
-    background-color: var(--theme-bg-focused-color);
-    border: 1px solid var(--theme-bg-accent-color);
-    border-radius: .5rem;
+    color: var(--theme-caption-color);
+    background-color: var(--theme-button-bg-enabled);
+    border: 1px solid var(--theme-bg-accent-hover);
+    border-radius: .75rem;
+
+    &:focus-within { border-color: var(--theme-content-trans-color); }
 
-    &:focus-within {
-      border-color: var(--theme-bg-focused-border);
-    }
     input {
       width: 100%;
-      height: 2.5rem;
-      padding-left: .75rem;
       border: none;
       border-radius: .5rem;
 
-      &::placeholder {
-        color: var(--theme-content-trans-color);
-      }
+      &::placeholder { color: var(--theme-content-accent-color); }
     }
 
-    .icon {
-      margin: .75rem;
-      opacity: .3;
+    .btn {
+      color: var(--theme-content-color);
+      cursor: pointer;
+      &:hover { color: var(--theme-caption-color); }
     }
   }
 </style>

packages/ui/src/plugin.ts

@@ -28,5 +28,6 @@ import { plugin } from '@anticrm/platform'
      Minutes: '' as IntlString,
      Hours: '' as IntlString,
      Days: '' as IntlString,
+     Clear: '' as IntlString
    }
  })

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

@@ -60,12 +60,12 @@ function onSearch(ev: Event) {
 {:then viewlets}
 
   {#if viewlets.length > 0}
-    <div class="toolbar">
-      <EditWithIcon icon={IconSearch} placeholder={'Search for something'} on:change={onSearch}/>
+    <div class="flex-between toolbar">
+      <EditWithIcon icon={IconSearch} placeholder={'Search'} on:change={onSearch}/>
 
       <div class="flex">
         {#each viewlets as viewlet, i}
-          <div class="btn" class:selected={selected === i} on:click={()=>{ selected = i }}>
+          <div class="flex-center btn" class:selected={selected === i} on:click={()=>{ selected = i }}>
             <div class="icon">
               <Tooltip label={viewlet.$lookup?.descriptor?.label} direction={'top'}>
                 <Icon icon={viewlet.$lookup?.descriptor?.icon} size={'small'}/>
@@ -93,32 +93,21 @@ function onSearch(ev: Event) {
 
 <style lang="scss">
   .toolbar {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin: 1.25rem 2.5rem;
-    height: 2.5rem;
+    margin: 1.25rem 1.75rem 1.75rem 2.5rem;
 
     .btn {
-      display: flex;
-      justify-content: center;
-      align-items: center;
       width: 2.5rem;
       height: 2.5rem;
       background-color: transparent;
       border-radius: .5rem;
       cursor: pointer;
 
-      .icon { opacity: .3; }
-      &:hover .icon {
-        opacity: 1;
-      }
+      .icon { color: var(--theme-content-trans-color); }
+      &:hover .icon { color: var(--theme-caption-color); }
       &.selected {
         background-color: var(--theme-button-bg-enabled);
         cursor: default;
-        &:hover .icon {
-          opacity: .8;
-        }
+        &:hover .icon { color: var(--theme-content-accent-color); }
       }
     }
   }