Add EditCandidates, EditVacancy and SpacePanel (#293)

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

models/chunter/src/index.ts

@@ -107,7 +107,8 @@ export function createModel (builder: Builder): void {
           label: chunter.string.Channels,
           spaceClass: chunter.class.Channel,
           addSpaceLabel: chunter.string.CreateChannel,
-          createComponent: chunter.component.CreateChannel
+          createComponent: chunter.component.CreateChannel,
+          editComponent: chunter.component.EditChannel
         }
       ]
     }

models/recruit/src/index.ts

@@ -93,13 +93,15 @@ export function createModel (builder: Builder): void {
           label: recruit.string.Vacancies,
           spaceClass: recruit.class.Vacancy,
           addSpaceLabel: recruit.string.CreateVacancy,
-          createComponent: recruit.component.CreateVacancy
+          createComponent: recruit.component.CreateVacancy,
+          editComponent: recruit.component.EditVacancy
         },
         {
           label: recruit.string.CandidatePools,
           spaceClass: recruit.class.Candidates,
           addSpaceLabel: recruit.string.CreateCandidates,
-          createComponent: recruit.component.CreateCandidates
+          createComponent: recruit.component.CreateCandidates,
+          editComponent: recruit.component.EditCandidates
         }
       ]
     }

models/recruit/src/plugin.ts

@@ -40,6 +40,8 @@ export default mergeIds(recruitId, recruit, {
     CreateCandidate: '' as AnyComponent,
     CreateApplication: '' as AnyComponent,
     EditCandidate: '' as AnyComponent,
+    EditCandidates: '' as AnyComponent,
+    EditVacancy: '' as AnyComponent,
     KanbanCard: '' as AnyComponent,
     ApplicationPresenter: '' as AnyComponent,
     ApplicationsPresenter: '' as AnyComponent

models/task/src/index.ts

@@ -74,7 +74,8 @@ export function createModel (builder: Builder): void {
           label: task.string.Projects,
           spaceClass: task.class.Project,
           addSpaceLabel: task.string.CreateProject,
-          createComponent: task.component.CreateProject
+          createComponent: task.component.CreateProject,
+          editComponent: task.component.EditTask
         }
       ]
     }

models/task/src/plugin.ts

@@ -26,7 +26,8 @@ export default mergeIds(taskId, task, {
   component: {
     ProjectView: '' as AnyComponent,
     CreateProject: '' as AnyComponent,
-    CreateTask: '' as AnyComponent
+    CreateTask: '' as AnyComponent,
+    EditTask: '' as AnyComponent
   },
   class: {
     Project: '' as Ref<Class<Project>>

packages/panel/src/components/Panel.svelte

@@ -136,14 +136,14 @@
   .dialog-container {
     overflow: hidden;
     position: fixed;
-    top: 1.5rem;
-    bottom: 1.5rem;
+    top: 32px;
+    bottom: 1.25rem;
     left: 50%;
-    right: 1.5rem;
+    right: 1rem;
 
     display: flex;
     flex-direction: column;
-    height: calc(100% - 3rem);
+    height: calc(100% - 32px - 1.25rem);
     background: rgba(31, 31, 37, 0.7);
     border-radius: 1.25rem;
     box-shadow: 0px 44px 154px rgba(0, 0, 0, .75);
@@ -201,7 +201,7 @@
 
   .fullSize {
     flex-direction: row;
-    left: 1.5rem;
+    left: 1rem;
   }
 
   .leftSection, .rightSection {

packages/presentation/src/components/SpacePanel.svelte

@@ -0,0 +1,164 @@
+<!--
+// Copyright © 2020, 2021 Anticrm Platform Contributors.
+// Copyright © 2021 Hardcore Engineering Inc.
+// 
+// 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, AnyComponent } from '@anticrm/ui'
+  import { IconClose, Label, ScrollBox, Icon, Tabs } from '@anticrm/ui'
+
+  import { createEventDispatcher } from 'svelte'
+
+  export let label: IntlString
+  export let icon: Asset | AnySvelteComponent
+
+  const dispatch = createEventDispatcher()
+
+  interface Tab {
+    id: number
+    label: IntlString
+  }
+  const tabs: Tab[] = [{ id: 0, label: 'General' as IntlString }, { id: 1, label: 'Members' as IntlString }]
+  let selected: Tab = tabs[0]
+</script>
+
+<div class="overlay" on:click={() => { dispatch('close') }}/>
+<div class="dialog-container">
+  <div class="flex-row-center header">
+    {#if typeof (icon) === 'string'}
+      <Icon {icon} size={'medium'} />
+    {:else}
+      <svelte:component this={icon} size={'medium'} />
+    {/if}
+    <div class="flex-grow fs-title ml-2"><Label {label} /></div>
+    <div class="tool" on:click={() => { dispatch('close') }}><IconClose size={'small'} /></div>
+  </div>
+  <div class="flex-row-center subtitle">
+    Subtitle
+  </div>
+  <div class="flex-stretch tab-container">
+    {#each tabs as tab}
+      <div class="flex-row-center tab" class:selected={tab === selected}
+           on:click={() => { selected = tab }}>
+        <Label label={tab.label}/>
+      </div>
+    {/each}
+    <div class="grow"/>
+  </div>
+  <div class="scroll">
+    <div class="flex-col box">
+      {#if !selected.id}
+        <slot />
+      {:else}
+        Members and other
+      {/if}
+    </div>
+  </div>
+</div>
+
+<style lang="scss">
+  .dialog-container {
+    overflow: hidden;
+    position: fixed;
+    top: 32px;
+    bottom: 1.25rem;
+    left: 50%;
+    right: 1rem;
+
+    display: flex;
+    flex-direction: column;
+    height: calc(100% - 32px - 1.25rem);
+    background: var(--theme-dialog-bg);
+    border-radius: 1.25rem;
+    box-shadow: var(--theme-dialog-shadow);
+    backdrop-filter: blur(10px);
+
+    .header {
+      flex-shrink: 0;
+      padding: 0 2rem 0 2.5rem;
+      height: 4.5rem;
+      border-bottom: 1px solid var(--theme-dialog-divider);
+
+      .tool {
+        margin-left: .75rem;
+        transform-origin: center center;
+        transform: scale(.75);
+        color: var(--theme-content-accent-color);
+        cursor: pointer;
+        &:hover { color: var(--theme-caption-color); }
+      }
+    }
+
+    .subtitle {
+      flex-shrink: 0;
+      padding: 0 2.5rem;
+      height: 3.5rem;
+      border-bottom: 1px solid var(--theme-dialog-divider);
+    }
+  }
+
+  .tab-container {
+    flex-shrink: 0;
+    flex-wrap: nowrap;
+    margin: 0 2.5rem;
+    height: 4.5rem;
+    border-bottom: 1px solid var(--theme-menu-divider);
+
+    .tab {
+      height: 4.5rem;
+      font-weight: 500;
+      color: var(--theme-content-trans-color);
+      cursor: pointer;
+      user-select: none;
+
+      &.selected {
+        border-top: .125rem solid transparent;
+        border-bottom: .125rem solid var(--theme-caption-color);
+        color: var(--theme-caption-color);
+        cursor: default;
+      }
+    }
+    .tab + .tab {
+      margin-left: 2.5rem;
+    }
+    .grow {
+      min-width: 2.5rem;
+      flex-grow: 1;
+    }
+  }
+
+  .scroll {
+    flex-grow: 1;
+    overflow-x: hidden;
+    overflow-y: auto;
+    margin: 1rem 0;
+    padding: 1.5rem 2.5rem;
+
+    .box {
+      margin-right: 1px;
+      height: 100%;
+    }
+  }
+
+  .overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: var(--theme-menu-color);
+    opacity: .6;
+  }
+</style>

packages/presentation/src/index.ts

@@ -28,3 +28,4 @@ export { default as Backlink } from './components/Backlink.svelte'
 export { default as PDFViewer } from './components/PDFViewer.svelte'
 export { default as MessageBox } from './components/MessageBox.svelte'
 export { default as SpaceCreateCard } from './components/SpaceCreateCard.svelte'
+export { default as SpacePanel } from './components/SpacePanel.svelte'

packages/theme/styles/_colors.scss

@@ -64,7 +64,9 @@
   --theme-menu-selection: #1D1D23;
   --theme-menu-divider: rgba(255, 255, 255, .05);
   --theme-scroll-bar: #2C2C34;
-  --theme-bg-modal: #2C2B35;
+  --theme-dialog-bg: rgba(47, 47, 53, .7);
+  --theme-dialog-divider: rgba(255, 255, 255, .06);
+  --theme-dialog-shadow: 0px 44px 154px rgba(0, 0, 0, 0.75);
   --theme-border-modal: rgba(0, 0, 0, 0.2);
   --theme-chat-selection: radial-gradient(135.96% 3333.35% at -2.36% -27.63%, rgba(210, 183, 156, 0.11) 0%, rgba(204, 196, 184, 0.0785128) 20.8%, rgba(104, 104, 114, 0.11) 100%);
   --theme-chat-divider: rgb(36, 36, 41);
@@ -134,7 +136,9 @@
   --theme-menu-selection: #37363F;
   --theme-menu-divider: rgba(255, 255, 255, .05);
   --theme-scroll-bar: #494852;
-  --theme-bg-modal: #2C2B35;
+  --theme-dialog-bg: rgba(47, 47, 53, .7);
+  --theme-dialog-divider: rgba(255, 255, 255, .06);
+  --theme-dialog-shadow: 0px 44px 154px rgba(0, 0, 0, 0.75);
   --theme-border-modal: rgba(0, 0, 0, 0.2);
   --theme-chat-selection: radial-gradient(135.96% 3333.35% at -2.36% -27.63%, rgba(210, 183, 156, 0.11) 0%, rgba(204, 196, 184, 0.0785128) 20.8%, rgba(104, 104, 114, 0.11) 100%);
   --theme-chat-divider: rgb(66, 65, 76);
@@ -203,7 +207,9 @@
   --theme-menu-selection: #DBDBDB;
   --theme-menu-divider: rgba(0, 0, 0, .08);
   --theme-scroll-bar: #CBCBCB;
-  --theme-bg-modal: #fff;
+  --theme-dialog-bg: #fff;
+  --theme-dialog-divider: rgba(31, 33, 43, .06);
+  --theme-dialog-shadow: 0px 44px 154px rgba(0, 0, 0, 0.75);
   --theme-border-modal: rgba(0, 0, 0, 0.2);
   --theme-chat-selection: radial-gradient(135.96% 3333.35% at -2.36% -27.63%, rgba(210, 183, 156, 0.11) 0%, rgba(204, 196, 184, 0.0785128) 20.8%, rgba(104, 104, 114, 0.11) 100%);
   --theme-chat-divider: rgb(233, 233, 233);

packages/theme/styles/_layouts.scss

@@ -240,6 +240,7 @@ a.no-line {
   font-weight: 500;
   font-size: 1rem;
   color: var(--theme-caption-color);
+  user-select: none;
 }
 .fs-subtitle { font-size: .75rem; }
 .over-underline {

packages/ui/src/components/ActionIcon.svelte

@@ -42,22 +42,25 @@
 
 <style lang="scss">
   .button {
+    color: var(--theme-caption-color);
     border-radius: .125rem;
 
     .icon {
-      opacity: .3;
+      // transform-origin: center center;
+      // transform: scale(.75);
+      color: var(--theme-content-trans-color);
       &.invisible {
         opacity: 0;
       }
     }
     &:hover .icon {
-      opacity: 1;
+      color: var(--theme-caption-color);
     }
     &:focus {
       border: 1px solid var(--primary-button-focused-border);
       box-shadow: 0 0 0 3px var(--primary-button-outline);
       .icon {
-        opacity: 1;
+        color: var(--theme-caption-color);
       }
     }
   }

packages/ui/src/components/Dropdown.svelte

@@ -76,6 +76,7 @@
 <style lang="scss">
   .container { cursor: pointer; }
   .btn {
+    flex-shrink: 0;
     width: 2.25rem;
     height: 2.25rem;
     color: var(--theme-caption-color);

packages/ui/src/components/Icon.svelte

@@ -19,7 +19,7 @@
 
   export let icon: Asset
   export let size: 'small' | 'medium' | 'large'
-  export let fill = 'var(--theme-caption-color)'
+  export let fill = 'currentColor'
 
   let url: string
   $: url = getMetadata(icon) ?? 'https://anticrm.org/logo.svg'

packages/ui/src/components/Tabs.svelte

@@ -39,11 +39,11 @@
 
 <style lang="scss">
   .container {
+    flex-shrink: 0;
     flex-wrap: nowrap;
-    margin-bottom: 1rem;
+    margin-bottom: 2.5rem;
     width: 100%;
     height: 4.5rem;
-    min-height: 4.5rem;
     border-bottom: 1px solid var(--theme-menu-divider);
 
     .tab {

packages/ui/src/components/icons/Add.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   export let size: 'small' | 'medium' | 'large'
-  const fill: string = 'var(--theme-caption-color)'
+  const fill: string = 'currentColor'
 </script>
 
 <svg class="svg-{size}" {fill} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">

packages/ui/src/components/icons/Close.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   export let size: 'small' | 'medium' | 'large'
-  const fill: string = 'var(--theme-caption-color)'
+  const fill: string = 'currentColor'
 </script>
 
 <svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">

packages/ui/src/components/icons/Edit.svelte

@@ -0,0 +1,25 @@
+<!--
+// Copyright © 2020, 2021 Anticrm Platform Contributors.
+// Copyright © 2021 Hardcore Engineering Inc.
+// 
+// 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">
+  export let size: 'small' | 'medium' | 'large'
+  const fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" {fill} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+  <path d="M15.4,14.5h-6c-0.3,0-0.6,0.3-0.6,0.6s0.3,0.6,0.6,0.6h6c0.3,0,0.6-0.3,0.6-0.6S15.7,14.5,15.4,14.5z"/>
+  <path d="M12.2,7.1C12.2,7.1,12.2,7.1,12.2,7.1c1.5-1.9,1.6-2,1.6-2c0.3-0.5,0.5-1.2,0.3-1.8c-0.1-0.6-0.5-1.2-1-1.5 c0,0-1.4-1.1-1.4-1.1c-1-0.8-2.6-0.7-3.4,0.3c0,0,0,0,0,0l-7.7,9.7c-0.4,0.5-0.5,1.1-0.4,1.7l0.7,2.8c0.1,0.3,0.3,0.5,0.6,0.5 c0,0,0,0,0,0l3,0c0.6,0,1.2-0.3,1.5-0.8C9.1,10.9,11,8.5,12.2,7.1C12.1,7.1,12.2,7.1,12.2,7.1z M9.1,1.9c0.4-0.5,1.2-0.6,1.7-0.2 c0,0,1.4,1.1,1.5,1.1c0.3,0.2,0.5,0.4,0.5,0.7c0.1,0.3,0,0.6-0.1,0.8c0,0.1-0.5,0.6-1.2,1.5L8.1,3.2L9.1,1.9z M4.9,14.2 c-0.1,0.2-0.4,0.3-0.6,0.3l-2.5,0l-0.6-2.4c-0.1-0.2,0-0.4,0.1-0.6l5.9-7.4l3.5,2.7C9.1,9,6.5,12.2,4.9,14.2z"/>
+</svg>

packages/ui/src/components/icons/MoreH.svelte

@@ -3,8 +3,8 @@
   const fill: string = 'currentColor'
 </script>
 
-<svg class="svg-{size}" {fill} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-  <path d="M11.8,10.3c-1,0-1.8,0.8-1.8,1.7s0.8,1.7,1.8,1.7c1,0,1.8-0.8,1.8-1.7S12.7,10.3,11.8,10.3z" />
-  <path d="M18,10.3c-1,0-1.8,0.8-1.8,1.7s0.8,1.7,1.8,1.7c1,0,1.8-0.8,1.8-1.7S18.9,10.3,18,10.3z" />
-  <path d="M5.5,10.3c-1,0-1.8,0.8-1.8,1.7s0.8,1.7,1.8,1.7c1,0,1.8-0.8,1.8-1.7S6.5,10.3,5.5,10.3z" />
+<svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path d="M8,6.6C7.2,6.6,6.6,7.2,6.6,8c0,0.8,0.6,1.4,1.4,1.4S9.4,8.8,9.4,8C9.4,7.2,8.8,6.6,8,6.6z" />
+  <path d="M3.2,6.6C2.4,6.6,1.8,7.2,1.8,8c0,0.8,0.6,1.4,1.4,1.4S4.6,8.8,4.6,8C4.6,7.2,4,6.6,3.2,6.6z" />
+  <path d="M12.8,6.6c-0.8,0-1.4,0.6-1.4,1.4c0,0.8,0.6,1.4,1.4,1.4s1.4-0.6,1.4-1.4C14.2,7.2,13.6,6.6,12.8,6.6z" />
 </svg>

packages/ui/src/components/icons/ToDo.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   export let size: 'small' | 'medium' | 'large'
-  const fill: string = 'var(--theme-caption-color)'
+  const fill: string = 'currentColor'
 </script>
 
 <svg class="svg-{size}" {fill} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">

packages/ui/src/index.ts

@@ -74,6 +74,7 @@ export { default as IconExpand } from './components/icons/Expand.svelte'
 export { default as IconActivity } from './components/icons/Activity.svelte'
 export { default as IconUp } from './components/icons/Up.svelte'
 export { default as IconDown } from './components/icons/Down.svelte'
+export { default as IconEdit } from './components/icons/Edit.svelte'
 
 export * from './utils'
 

plugins/chunter-resources/src/components/EditChannel.svelte

@@ -0,0 +1,40 @@
+<!--
+// 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 { createEventDispatcher } from 'svelte'
+  import { TextArea, EditBox, ToggleWithLabel, Grid, IconComments, IconThread } from '@anticrm/ui'
+  import { SpacePanel } from '@anticrm/presentation'
+  import type { Ref, Space, Doc, Class } from '@anticrm/core'
+
+  import chunter from '../plugin'
+
+  export let _id: Ref<Doc>
+  export let spaceClass: Ref<Class<Space>>
+
+  const dispatch = createEventDispatcher()
+
+  let name: string
+  let locked: boolean = false
+</script>
+
+<SpacePanel label={'Open'} 
+            icon={chunter.icon.Chunter}
+            on:close={() => { dispatch('close') }}>
+  <Grid column={1} rowGap={1.5}>
+    <EditBox label={chunter.string.ChannelName} icon={(locked) ? chunter.icon.Lock : chunter.icon.Hashtag} bind:value={name} placeholder={'Start type...'} focus/>
+    <ToggleWithLabel label={chunter.string.MakePrivate} description={chunter.string.MakePrivateDescription} bind:on={locked} />
+  </Grid>
+</SpacePanel>

plugins/chunter-resources/src/index.ts

@@ -14,6 +14,7 @@
 //
 
 import CreateChannel from './components/CreateChannel.svelte'
+import EditChannel from './components/EditChannel.svelte'
 import ChannelView from './components/ChannelView.svelte'
 import Activity from './components/Activity.svelte'
 import AttachmentsPresenter from './components/AttachmentsPresenter.svelte'
@@ -24,6 +25,7 @@ export { AttachmentsPresenter }
 export default async () => ({
   component: {
     CreateChannel,
+    EditChannel,
     ChannelView,
     Activity,
     AttachmentsPresenter,

plugins/chunter-resources/src/plugin.ts

@@ -24,6 +24,7 @@ import chunter, { chunterId } from '@anticrm/chunter'
 export default mergeIds(chunterId, chunter, {
   component: {
     CreateChannel: '' as AnyComponent,
+    EditChannel: '' as AnyComponent,
     ChannelView: '' as AnyComponent,
   },
   class: { 

plugins/recruit-resources/src/components/CreateVacancy.svelte.txt

@@ -1,98 +0,0 @@
-<!--
-// 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 { createEventDispatcher } from 'svelte'
-  import { TextArea, EditBox, Dialog, ToggleWithLabel, Tabs, Section, Grid, IconFile } from '@anticrm/ui'
-
-  import { getClient } from '@anticrm/presentation'
-  import Recruiting from './icons/Recruiting.svelte'
-
-  import recruit from '../plugin'
-  import core from '@anticrm/core'
-  import view from '@anticrm/view'
-
-  const dispatch = createEventDispatcher()
-
-  let name: string = ''
-  let description: string = ''
-
-  const client = getClient()
-
-  const colors = [
-    '#7C6FCD',
-    '#6F7BC5',
-    '#A5D179',
-    '#77C07B',
-    '#F28469'
-  ]
-
-  async function createVacancy() {
-    const id = await client.createDoc(recruit.class.Vacancy, core.space.Model, {
-      name,
-      description,
-      private: false,
-      members: [],
-      states: [],
-      order: []
-    })
-    const s1 = await client.createDoc(core.class.State, id, {
-      title: 'Initial',
-      color: colors[0]
-    })
-    const s2 = await client.createDoc(core.class.State, id, {
-      title: 'Interview 1',
-      color: colors[1]
-    })
-    const s3 = await client.createDoc(core.class.State, id, {
-      title: 'Interview 2',
-      color: colors[2]
-    })
-    const s4 = await client.createDoc(core.class.State, id, {
-      title: 'Interview 3',
-      color: colors[3]
-    })
-    const s5 = await client.createDoc(core.class.State, id, {
-      title: 'Interview 4',
-      color: colors[4]
-    })
-    const s6 = await client.createDoc(core.class.State, id, {
-      title: 'Final',
-      color: colors[0]
-    })
-    // await client.updateDoc(recruit.class.Vacancy, core.space.Model, id, {
-    // })
-    await client.createDoc(view.class.Kanban, id, {
-      attachedTo: id,
-      states: [s1, s2, s3, s4, s5, s6],
-      order: []
-    })
-  }
-</script>
-
-<Dialog label={recruit.string.CreateVacancy} 
-        okLabel={recruit.string.CreateVacancy} 
-        okAction={createVacancy}
-        on:close={() => { dispatch('close') }}>
-  <Section icon={IconFile} label={'General Information'}>
-    <Grid column={1}>
-      <EditBox label={recruit.string.VacancyName} bind:value={name} placeholder="Software Engineer" maxWidth="39rem" focus/>
-      <TextArea label={recruit.string.VacancyDescription} bind:value={description} placeholder="Start typing..."/>
-      <ToggleWithLabel label={recruit.string.MakePrivate} description={recruit.string.MakePrivateDescription}/>
-    </Grid>
-  </Section>
-  <Section icon={Recruiting} label={'Vacancy Members'}>
-  </Section>
-</Dialog>

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

@@ -0,0 +1,41 @@
+<!--
+// 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 { createEventDispatcher } from 'svelte'
+  import { TextArea, EditBox, ToggleWithLabel, Grid, IconFolder } from '@anticrm/ui'
+  import { SpacePanel } from '@anticrm/presentation'
+  import type { Ref, Space, Doc, Class } from '@anticrm/core'
+
+  import recruit from '../plugin'
+
+  export let _id: Ref<Doc>
+  export let spaceClass: Ref<Class<Space>>
+
+  const dispatch = createEventDispatcher()
+
+  let name: string
+  let description: string
+</script>
+
+<SpacePanel label={'Open'} 
+            icon={recruit.icon.RecruitApplication}
+            on:close={() => { dispatch('close') }}>
+  <Grid column={1} rowGap={1.5}>
+    <EditBox label={recruit.string.CandidatesName} icon={IconFolder} bind:value={name} placeholder={'The Boring Pool'} focus/>
+    <!-- <TextArea label={recruit.string.CandidatesDescription} bind:value={description}/> -->
+    <ToggleWithLabel label={recruit.string.MakePrivate} description={recruit.string.MakePrivateDescription}/>
+  </Grid>
+</SpacePanel>

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

@@ -0,0 +1,41 @@
+<!--
+// 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 { createEventDispatcher } from 'svelte'
+  import { EditBox, Dropdown, Grid } from '@anticrm/ui'
+  import { SpacePanel } from '@anticrm/presentation'
+  import type { Ref, Space, Doc, Class } from '@anticrm/core'
+  import Company from './icons/Company.svelte'
+  import Vacancy from './icons/Vacancy.svelte'
+
+  import recruit from '../plugin'
+
+  export let _id: Ref<Doc>
+  export let spaceClass: Ref<Class<Space>>
+
+  const dispatch = createEventDispatcher()
+
+  let name: string
+</script>
+
+<SpacePanel label={'Open'} 
+            icon={recruit.icon.Vacancy}
+            on:close={() => { dispatch('close') }}>
+  <Grid rowGap={1.5}>
+    <EditBox label={recruit.string.VacancyName} icon={Vacancy} bind:value={name} placeholder="Software Engineer" maxWidth="39rem" focus/>
+    <Dropdown icon={Company} label={'Company *'} placeholder={'The Boring Company'} />
+  </Grid>
+</SpacePanel>

plugins/recruit-resources/src/index.ts

@@ -20,6 +20,8 @@ import CreateCandidates from './components/CreateCandidates.svelte'
 import CreateCandidate from './components/CreateCandidate.svelte'
 import CreateApplication from './components/CreateApplication.svelte'
 import EditCandidate from './components/EditCandidate.svelte'
+import EditCandidates from './components/EditCandidates.svelte'
+import EditVacancy from './components/EditVacancy.svelte'
 import Attachments from './components/Attachments.svelte'
 import KanbanCard from './components/KanbanCard.svelte'
 import ApplicationPresenter from './components/ApplicationPresenter.svelte'
@@ -41,6 +43,8 @@ export default async () => ({
     CreateCandidate,
     CreateApplication,
     EditCandidate,
+    EditCandidates,
+    EditVacancy,
     Attachments,
     KanbanCard,
     ApplicationPresenter,

plugins/task-resources/package.json

@@ -23,6 +23,7 @@
     "@anticrm/ui": "~0.6.0",
     "@anticrm/presentation": "~0.6.1",
     "@anticrm/text-editor": "~0.6.0",
-    "@anticrm/contact": "~0.6.0"
+    "@anticrm/contact": "~0.6.0",
+    "@anticrm/core": "~0.6.11"
   }
 }

plugins/task-resources/src/components/EditTask.svelte

@@ -0,0 +1,40 @@
+<!--
+// 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 { createEventDispatcher } from 'svelte'
+  import { TextArea, EditBox, ToggleWithLabel, Grid, IconToDo } from '@anticrm/ui'
+  import { SpacePanel } from '@anticrm/presentation'
+  import type { Ref, Space, Doc, Class } from '@anticrm/core'
+
+  import task from '../plugin'
+
+  export let _id: Ref<Doc>
+  export let spaceClass: Ref<Class<Space>>
+
+  const dispatch = createEventDispatcher()
+
+  let name: string
+  let description: string
+</script>
+
+<SpacePanel label={'Open'} 
+            icon={task.icon.Task}
+            on:close={() => { dispatch('close') }}>
+  <Grid column={1} rowGap={1.5}>
+    <EditBox label={'Task name'} icon={IconToDo} bind:value={name} placeholder={'Task name'} focus/>
+    <ToggleWithLabel label={'MakePrivate'} description={'MakePrivateDescription'}/>
+  </Grid>
+</SpacePanel>

plugins/task-resources/src/index.ts

@@ -15,9 +15,11 @@
 //
 
 import CreateTask from './components/CreateTask.svelte'
+import EditTask from './components/EditTask.svelte'
 
 export default async () => ({
   component: {
-    CreateTask
+    CreateTask,
+    EditTask
   },
 })

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

@@ -51,32 +51,22 @@
       align-items: center;
       width: 3.25rem;
       height: 3.25rem;
-      opacity: .3;
+      color: var(--theme-content-trans-color);
 
-      .normal-font &.noty {
-        clip-path: url(#notify-normal);
-      }
-      .small-font &.noty {
-        clip-path: url(#notify-small);
-      }
+      .normal-font &.noty { clip-path: url(#notify-normal); }
+      .small-font &.noty { clip-path: url(#notify-small); }
     }
 
-    &:hover .icon-container {
-      opacity: 1;
-    }
+    &:hover .icon-container { color: var(--theme-caption-color); }
     &:focus {
       border: 1px solid var(--primary-button-focused-border);
       box-shadow: 0 0 0 3px var(--primary-button-outline);
-      .icon-container {
-        opacity: 1;
-      }
+      .icon-container { color: var(--theme-caption-color); }
     }
 
     &.selected {
       background-color: var(--theme-menu-selection);
-      .icon-container {
-        opacity: 1;
-      }
+      .icon-container { color: var(--theme-caption-color); }
     }
   }
 

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

@@ -14,8 +14,7 @@
 -->
 
 <script lang="ts">
-  import Close from './icons/Close.svelte'
-  import Add from './icons/Add.svelte'
+  import { IconAdd, IconClose } from '@anticrm/ui'
 
   export let title: string = 'Unknown'
 </script>
@@ -24,8 +23,8 @@
   <div class="title"><span>{title}</span></div>
   <div class="separator"/>
   <div class="buttons">
-    <div class="button"><Close/></div>
-    <div class="button"><Add/></div>
+    <div class="button"><IconClose size={'small'} /></div>
+    <div class="button"><IconAdd size={'small'} /></div>
   </div>
 </div>
 

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

@@ -32,7 +32,7 @@
     position: relative;
     display: flex;
     flex-direction: column;
-    padding: 1rem 1.5rem 1.25rem;
+    padding: 32px 1.5rem 1.25rem;
     border-radius: .75rem;
 
     .label {
@@ -63,4 +63,4 @@
       z-index: -1;
     }
   }
-</style>
+</style>

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

@@ -15,10 +15,9 @@
 
 <script lang="ts">
   import type { Ref, Space } from '@anticrm/core'
-  import { Icon, ActionIcon, Button, IconMoreH } from '@anticrm/ui'
+  import { Icon, ActionIcon, Button, IconMoreH, IconAdd } from '@anticrm/ui'
   import type { AnyComponent } from '@anticrm/ui'
   import Header from './Header.svelte'
-  import Add from './icons/Add.svelte'
   import Star from './icons/Star.svelte'
 
   import { getClient, createQuery } from '@anticrm/presentation'
@@ -48,7 +47,7 @@
       <Button label="Create" primary={true} size={'small'} on:click={(ev) => showCreateDialog(ev)}/>
     {/if}
     <ActionIcon label={'Favorite'} icon={Star} size={'small'}/>
-    <ActionIcon label={'Create'} icon={Add} size={'small'}/>
+    <ActionIcon label={'Create'} icon={IconAdd} size={'small'}/>
     <ActionIcon label={'More...'} icon={IconMoreH} size={'small'}/>
   {/if}
 </div>

plugins/workbench-resources/src/components/icons/Add.svelte

@@ -1,8 +0,0 @@
-<script lang="ts">
-  export let size: 'small' | 'medium' | 'large'
-  const fill: string = 'var(--theme-caption-color)'
-</script>
-
-<svg class="svg-{size}" {fill} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-  <path d="M20,11.2h-7.2V4c0-0.4-0.3-0.8-0.8-0.8S11.2,3.6,11.2,4v7.2H4c-0.4,0-0.8,0.3-0.8,0.8s0.3,0.8,0.8,0.8h7.2V20 c0,0.4,0.3,0.8,0.8,0.8s0.8-0.3,0.8-0.8v-7.2H20c0.4,0,0.8-0.3,0.8-0.8S20.4,11.2,20,11.2z"/>
-</svg>

plugins/workbench-resources/src/components/icons/Collapsed.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   export let size: 'small' | 'medium' | 'large'
-  const fill: string = 'var(--theme-caption-color)'
+  const fill: string = 'currentColor'
 </script>
 
 <svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">

plugins/workbench-resources/src/components/icons/Expanded.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   export let size: 'small' | 'medium' | 'large'
-  const fill: string = 'var(--theme-caption-color)'
+  const fill: string = 'currentColor'
 </script>
 
 <svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">

plugins/workbench-resources/src/components/icons/Star.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   export let size: 'small' | 'medium' | 'large'
-  const fill: string = 'var(--theme-caption-color)'
+  const fill: string = 'currentColor'
 </script>
 
 <svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">

plugins/workbench-resources/src/components/navigator/SpacesNav.svelte

@@ -19,7 +19,7 @@
   import type { Asset, IntlString } from '@anticrm/platform'
   import type { Ref, Space, Doc } from '@anticrm/core'
   import type { SpacesNavModel } from '@anticrm/workbench'
-  import { Action, navigate, getCurrentLocation, location, IconAdd } from '@anticrm/ui'
+  import { Action, navigate, getCurrentLocation, location, IconAdd, IconMoreH, IconEdit } from '@anticrm/ui'
 
   import { getClient, createQuery } from '@anticrm/presentation'
   import { showPopup } from '@anticrm/ui'
@@ -50,12 +50,20 @@
 
   const editStatuses: Action = {
     label: 'Edit Statuses' as IntlString,
-    icon: IconAdd,
+    icon: IconMoreH,
     action: async (_id: Ref<Doc>): Promise<void> => {
       showPopup(EditStatuses, { _id, spaceClass: model.spaceClass }, 'right')
     }
   }
 
+  const editSpace: Action = {
+    label: 'Open' as IntlString,
+    icon: IconEdit,
+    action: async (_id: Ref<Doc>): Promise<void> => {
+      showPopup(model.editComponent!, { _id, spaceClass: model.spaceClass }, 'right')
+    }
+  }
+
   function selectSpace(id: Ref<Space>) {
     const loc = getCurrentLocation()
     loc.path[2] = id
@@ -71,7 +79,7 @@
 <div>
   <TreeNode label={model.label} actions={[addSpace]}>
     {#each spaces as space}
-      <TreeItem _id={space._id} title={space.name} icon={classIcon(client, space._class)} selected={selected === space._id} actions={[editStatuses]} on:click={() => { selectSpace(space._id) }}/>
+      <TreeItem _id={space._id} title={space.name} icon={classIcon(client, space._class)} selected={selected === space._id} actions={[editSpace, editStatuses]} on:click={() => { selectSpace(space._id) }}/>
     {/each}
   </TreeNode>
 </div>

plugins/workbench-resources/src/components/navigator/TreeElement.svelte

@@ -77,7 +77,7 @@
 
     .icon {
       min-width: 1rem;
-      opacity: .3;
+      color: var(--theme-content-trans-color);
       margin: 0 1.125rem 0 .625rem;
       &.sub { margin: 0 .5rem 0 2.75rem }
     }

plugins/workbench/src/index.ts

@@ -37,6 +37,7 @@ export interface SpacesNavModel {
   spaceClass: Ref<Class<Space>>
   addSpaceLabel: IntlString
   createComponent: AnyComponent
+  editComponent: AnyComponent
   component?: AnyComponent
 }