Bring StylishEdit back (#8)

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

packages/ui/src/components/CheckBoxWithLabel.svelte

@@ -92,10 +92,6 @@
       position: relative;
       margin-left: 16px;
       color: var(--theme-caption-color);
-      &.onEdit {
-        margin: 2px 0px 1px 17px;
-        text-decoration: none;
-      }
 
       .edit-item {
         max-width: 100%;

packages/ui/src/components/EditWithIcon.svelte

@@ -0,0 +1,76 @@
+<!--
+// Copyright © 2020 Anticrm Platform Contributors.
+// 
+// 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 type { IntlString, Asset } from '@anticrm/platform'
+  import type { AnySvelteComponent } from '../types'
+  import Icon from './Icon.svelte'
+
+  export let icon: Asset | AnySvelteComponent
+  export let width: string | undefined = undefined
+  export let value: string | undefined = undefined
+  export let placeholder: string = 'placeholder'
+</script>
+
+<div class="editbox" style={width ? 'width: ' + width : ''}>
+  <input type="text" bind:value {placeholder} />
+  <div class="icon">
+    {#if typeof (icon) === 'string'}
+      <Icon {icon} size={'small'} />
+    {:else}
+      <svelte:component this={icon} size={'small'} />
+    {/if}
+  </div>
+</div>
+
+<style lang="scss">
+  .editbox {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0;
+    min-width: 268px;
+    height: 40px;
+    background-color: var(--theme-bg-focused-color);
+    border: 1px solid var(--theme-bg-accent-color);
+    border-radius: 8px;
+
+    &:focus-within {
+      border-color: var(--theme-bg-focused-border);
+    }
+    input {
+      width: 100%;
+      height: 40px;
+      margin: 0;
+      padding: 10px 12px;
+      font-family: inherit;
+      color: var(--theme-caption-color);
+      background-color: transparent;
+      outline: none;
+      border: none;
+      border-radius: 8px;
+
+      &::placeholder {
+        color: var(--theme-content-trans-color);
+      }
+    }
+
+    .icon {
+      margin: 12px;
+      width: 16px;
+      height: 16px;
+      opacity: .3;
+    }
+  }
+</style>

packages/ui/src/components/StylishEdit.svelte

@@ -13,64 +13,81 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import type { IntlString, Asset } from '@anticrm/platform'
+  import type { IntlString } from '@anticrm/platform'
-  import type { AnySvelteComponent } from '../types'
+  import Label from './Label.svelte'
-  import Icon from './Icon.svelte'
 
-  export let icon: Asset | AnySvelteComponent
+  export let label: IntlString | undefined = undefined
   export let width: string | undefined = undefined
   export let value: string | undefined = undefined
-  export let placeholder: string = 'placeholder'
+  export let error: string | undefined = undefined
+  export let password: boolean | undefined = undefined
+  export let id: string | undefined = undefined
 </script>
 
-<div class="editbox" style={width ? 'width: ' + width : ''}>
+<div class="editbox{error ? ' error' : ''}" style={width ? 'width: ' + width : ''}>
-  <input type="text" bind:value {placeholder} />
+  {#if password}
-  <div class="icon">
+    <input type="password" class:nolabel={!label} {id} bind:value on:change on:keyup placeholder=" " />
-    {#if typeof (icon) === 'string'}
-      <Icon {icon} size={'small'} />
   {:else}
-      <svelte:component this={icon} size={'small'} />
+    <input type="text" class:nolabel={!label} {id} bind:value on:change on:keyup placeholder=" " />
+  {/if}
+  {#if label}
+    <div class="label"><Label {label} /></div>
   {/if}
-  </div>
 </div>
 
 <style lang="scss">
   .editbox {
+    position: relative;
     display: flex;
-    justify-content: space-between;
+    flex-direction: column;
-    align-items: center;
     padding: 0;
-    min-width: 268px;
+    min-width: 50px;
-    height: 40px;
+    height: 52px;
-    background-color: var(--theme-bg-focused-color);
+    background-color: var(--theme-bg-accent-color);
-    border: 1px solid var(--theme-bg-accent-color);
+    border: 1px solid var(--theme-bg-accent-hover);
-    border-radius: 8px;
+    border-radius: 12px;
-
     &:focus-within {
+      background-color: var(--theme-bg-focused-color);
       border-color: var(--theme-bg-focused-border);
     }
     input {
-      width: 100%;
+      height: 52px;
-      height: 40px;
       margin: 0;
-      padding: 10px 12px;
+      padding: 14px 20px 0px;
       font-family: inherit;
       color: var(--theme-caption-color);
       background-color: transparent;
       outline: none;
       border: none;
-      border-radius: 8px;
+      border-radius: 12px;
-
+      font-size: 14px;
-      &::placeholder {
+      line-height: 17px;
-        color: var(--theme-content-trans-color);
     }
+    .nolabel {
+      padding-top: 0;
     }
 
-    .icon {
+    .label {
-      margin: 12px;
+      position: absolute;
-      width: 16px;
+      top: 18px;
-      height: 16px;
+      left: 20px;
-      opacity: .3;
+      font-size: 12px;
+      line-height: 14px;
+      color: var(--theme-caption-color);
+      pointer-events: none;
+      opacity: 0.3;
+      transition: top 200ms;
+      user-select: none;
+    }
+    input:focus + .label,
+    input:not(:placeholder-shown) + .label {
+      top: 10px;
+    }
+  }
+  .error {
+    border: 1px solid var(--system-error-60-color);
+    &:focus-within {
+      border-color: var(--system-error-color);
     }
   }
 </style>

packages/ui/src/index.ts

@@ -50,6 +50,7 @@ export { default as DialogHeader } from './components/DialogHeader.svelte'
 export { default as CheckBoxWithLabel } from './components/CheckBoxWithLabel.svelte'
 export { default as CheckBoxList } from './components/CheckBoxList.svelte'
 export { default as IconSize } from './components/IconSize.svelte'
+export { default as EditWithIcon } from './components/EditWithIcon.svelte'
 
 export { default as IconAdd } from './components/icons/Add.svelte'
 export { default as IconSearch } from './components/icons/Search.svelte'

rush.json

@@ -124,7 +124,7 @@
    * LTS schedule: https://nodejs.org/en/about/releases/
    * LTS versions: https://nodejs.org/en/download/releases/
    */
-  "nodeSupportedVersionRange": ">=12.13.0 <13.0.0 || >=14.15.0 <15.0.0",
+  "nodeSupportedVersionRange": ">=12.13.0 <13.0.0 || >=14.15.0 <15.0.0 || >=16.0.0",
 
   /**
    * Odd-numbered major versions of Node.js are experimental.  Even-numbered releases