add editbox component with icon prop, remove finder component, fix space options

packages/sparkling-controls/src/EditBox.svelte

@@ -14,7 +14,7 @@
 -->
 
 <script lang="ts">
-  export let width: string = '300px';
+  export let width: string = '300px'
   export let value: string
   export let placeholder: string
   export let id: string

packages/sparkling-theme/src/components/Theme.svelte

@@ -121,11 +121,10 @@
   .editbox {
     border: 1px solid var(--theme-bg-dark-color);
     border-radius: 4px;
-    padding: 1em 1em;
+    padding: 0.75em 1em;
     background-color: var(--theme-bg-accent-color);
     box-sizing: border-box;
     color: var(--theme-content-color);
-    font: inherit;
     transition: all .2s ease-in-out;
 
     &:focus-within {

plugins/platform-ui/src/components/EditBox.svelte

@@ -0,0 +1,70 @@
+<!--
+// 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 Icon from './Icon.svelte'
+  import { Asset } from "@anticrm/platform-ui";
+
+  export let icon: Asset | undefined  
+  export let width: string = '300px'
+  export let value: string
+  export let placeholder: string
+  export let right: boolean = false
+
+  let input: HTMLElement
+</script>
+
+<div class="editbox wIcon" style='width: {width}' on:click={input.focus()}>
+  {#if (!right)}
+    <Icon {icon} clazz="icon-embed" />
+    <div class="separator"></div>
+  {/if}
+  <input
+    bind:this={input}
+    type="text"
+    bind:value={value}
+    {placeholder}
+    on:input
+    on:focus
+    on:change
+  />
+  {#if (right)}
+    <div class="separator"></div>
+    <Icon {icon} clazz="icon-embed" />
+  {/if}
+</div>
+
+<style lang="scss">
+  .wIcon {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+  .separator {
+    width: 7px;
+  }
+
+  input {
+    border: none;
+    width: 100%;
+    color: var(--theme-content-color);
+    background-color: transparent;
+    font: inherit;
+
+    &:focus {
+      outline: none;
+    }
+  }
+</style>

plugins/workbench/src/__meta__.ts

@@ -24,6 +24,9 @@ export default (platform: Platform) => {
     Pages: spritesUrl + '#pages',
     Resize: spritesUrl + '#resize',
     Close: spritesUrl + '#close',
-    Finder: spritesUrl + '#finder'
+    Finder: spritesUrl + '#finder',
+    Lock: spritesUrl + '#lock',
+    Sharp: spritesUrl + '#sharp',
+    Burger: spritesUrl + '#burger'
   })
 }

plugins/workbench/src/components/internal/Application.svelte

@@ -22,11 +22,11 @@
   import ScrollView from '@anticrm/sparkling-controls/src/ScrollView.svelte'
   import Table from '@anticrm/presentation/src/components/internal/Table.svelte'
   import Icon from '@anticrm/platform-ui/src/components/Icon.svelte'
-  import Finder from './Finder.svelte'
   import ObjectForm from './ObjectForm.svelte'
   import CreateForm from './CreateForm.svelte'
   import { Ref } from '@anticrm/model'
   import IconButton from '@anticrm/platform-ui/src/components/IconButton.svelte';
+  import EditBox from '@anticrm/platform-ui/src/components/EditBox.svelte';
 
   export let application: Ref<WorkbenchApplication>
   export let space: Ref<Space>
@@ -60,7 +60,7 @@
         <IconButton icon={workbench.icon.Add} label={getLabel(appInstance.label)} />
       </a>
       <div style='flex-grow:1'></div>
-      <Finder placeholder='Поиск по {appInstance.label}...' />
+      <EditBox icon={workbench.icon.Finder} placeholder='Поиск по {appInstance.label}...' right='true' />
     </div>
     <ScrollView stylez='height:100%; margin: 2em'>
       <div class='table'>

plugins/workbench/src/components/internal/spaces/CreateSpace.svelte

@@ -19,7 +19,7 @@
   import { _getCoreService, getPresentationService } from '../../../utils'
   import CheckBox from '@anticrm/sparkling-controls/src/CheckBox.svelte'
   import EditBox from '@anticrm/sparkling-controls/src/EditBox.svelte'
-
+  import EditIconBox from '@anticrm/platform-ui/src/components/EditBox.svelte'
   import IconButton from '@anticrm/platform-ui/src/components/IconButton.svelte'
   import workbench from '@anticrm/workbench'
 

plugins/workbench/src/components/internal/spaces/SpaceItem.svelte

@@ -4,6 +4,9 @@
   import { archivedSpaceUpdate, getCurrentUserSpace, getSpaceName, leaveSpace } from './utils'
   import { _getCoreService, getUIService } from '../../../utils'
   import SpaceOptions from './SpaceOptions.svelte'
+  import ToolbarButton from '@anticrm/sparkling-controls/src/toolbar/Button.svelte'
+  import Icon from '@anticrm/platform-ui/src/components/Icon.svelte'
+  import workbench from '../../..'
 
   export let link: string = '/'
   export let selected: boolean = false
@@ -24,23 +27,29 @@
   }
 </script>
 
-<div class='spaces-space-item'>
-  <LinkTo href={link}>
-    <div class='item' class:selected={selected}>
-      {getSpaceName(space)}
-      <div class='separator'></div>
-      {#if count > 0}
-        <div class='counter'>{count}</div>
-      {/if}
-      {#if selected}
-        <div bind:this={optionsButton} class='options' on:click|preventDefault={() => {
+<LinkTo href={link}>
+  <div class='item' class:selected={selected}>
+    {getSpaceName(space)}
+    <div class="separator"></div>
+    {#if count > 0}
+      <div class='counter'>{count}</div>
+    {/if}
+    {#if selected}
+      <div bind:this={optionsButton}>
+        <ToolbarButton style="padding:0; width:16px; height:16px"
+          on:click={() => {
+            uiService.showModal(SpaceOptions, {space}, optionsButton)
+          }}>
+          <Icon icon={workbench.icon.Burger} clazz="icon-embed" />
+        </ToolbarButton>
+      </div>
+      <!-- <div bind:this={optionsButton} class='options' on:click|preventDefault={() => {
             uiService.showModal(SpaceOptions, {space}, optionsButton)
           }}>︙
-        </div>
-      {/if}
-    </div>
-  </LinkTo>
-</div>
+      </div> -->
+    {/if}
+  </div>
+</LinkTo>
 
 <style lang='scss'>
   .spaces-space-item {

plugins/workbench/src/index.ts

@@ -43,7 +43,10 @@ export default plugin('workbench' as Plugin<WorkbenchService>, { core: core.id,
     Pages: '' as Asset,
     Resize: '' as Asset,
     Close: '' as Asset,
-    Finder: '' as Asset
+    Finder: '' as Asset,
+    Lock: '' as Asset,
+    Sharp: '' as Asset,
+    Burger: '' as Asset
   },
   component: {
     Workbench: '' as AnyComponent,