Add KanbanView. Move icons. (#143)

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

packages/theme/styles/global.scss

@@ -81,6 +81,9 @@
   background-color: var(--theme-scroll-bar);
   border-radius: .25rem;
 }
+.kanban-container .scroll::-webkit-scrollbar-track {
+  margin: 2.5rem;
+}
 
 .normal-font { font-size: 16px; }
 .small-font { font-size: 14px; }

packages/ui/src/index.ts

@@ -60,6 +60,8 @@ export { default as IconSearch } from './components/icons/Search.svelte'
 export { default as IconToDo } from './components/icons/ToDo.svelte'
 export { default as IconComments } from './components/icons/Comments.svelte'
 export { default as IconFolder } from './components/icons/Folder.svelte'
+export { default as IconMoreH } from './components/icons/MoreH.svelte'
+export { default as IconFile } from './components/icons/File.svelte'
 
 export * from './utils'
 

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

@@ -17,12 +17,12 @@
 <script lang="ts">
 
 import type { Attachment } from '@anticrm/chunter'
-import File from './icons/File.svelte'
+import { IconFile } from '@anticrm/ui'
 
 export let value: Attachment
 
 </script>
 
 {#if value}
-  <File size={'small'}/>
+  <IconFile size={'small'}/>
 {/if}

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

@@ -16,11 +16,10 @@
 <script lang="ts">
   import { Avatar } from '@anticrm/presentation'
   import type { Message } from '@anticrm/chunter'
-  import { ActionIcon } from '@anticrm/ui'
+  import { ActionIcon, IconMoreH } from '@anticrm/ui'
   import Emoji from './icons/Emoji.svelte'
   import Share from './icons/Share.svelte'
   import Bookmark from './icons/Bookmark.svelte'
-  import MoreH from './icons/MoreH.svelte'
   import Reactions from './Reactions.svelte'
   import Replies from './Replies.svelte'
 
@@ -49,7 +48,7 @@
   </div>
   {#if !thread}
     <div class="buttons">
-      <div class="tool"><ActionIcon icon={MoreH} size={'medium'} direction={'left'}/></div>
+      <div class="tool"><ActionIcon icon={IconMoreH} size={'medium'} direction={'left'}/></div>
       <div class="tool"><ActionIcon icon={Bookmark} size={'medium'} direction={'left'}/></div>
       <div class="tool"><ActionIcon icon={Share} size={'medium'} direction={'left'}/></div>
       <div class="tool"><ActionIcon icon={Emoji} size={'medium'} direction={'left'}/></div>

plugins/chunter-resources/src/components/icons/MoreH.svelte

@@ -1,10 +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="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>

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

@@ -16,14 +16,12 @@
 
 <script lang="ts">
 
-import { TextArea, EditBox, Dialog, Tabs, Section, Grid, IconComments } from '@anticrm/ui'
+import { TextArea, EditBox, Dialog, Tabs, Section, Grid, IconFile } from '@anticrm/ui'
 import { AttributeEditor, getClient, CommentViewer } from '@anticrm/presentation'
 import type { Candidate } from '@anticrm/recruit'
 
-import File from './icons/File.svelte'
 import Address from './icons/Address.svelte'
 
-
 import contact from '@anticrm/contact'
 
 export let object: Candidate
@@ -31,7 +29,7 @@ export let newValue: Candidate
 
 </script>
 
-<Section icon={File} label={'Personal Information'}>
+<Section icon={IconFile} label={'Personal Information'}>
   <Grid>
     <AttributeEditor _class={contact.class.Person} key={'firstName'} {newValue} oldValue={object} focus/>
     <AttributeEditor _class={contact.class.Person} key={'lastName'} {newValue} oldValue={object}/>

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

@@ -15,9 +15,9 @@
 
 <script lang="ts">
   import { Avatar } from '@anticrm/presentation'
+  import { IconFile } from '@anticrm/ui'
   import LabelStatus from './LabelStatus.svelte'
   import Tag from './Tag.svelte'
-  import File from './icons/File.svelte'
 
   interface Person {
     firstName: string
@@ -38,7 +38,7 @@
   <div class="name">{user.lastName} {user.firstName}</div>
   <div class="description">{user.description}</div>
   <div class="city">{user.city}</div>
-  <Tag icon={File} label={'Application'} />
+  <Tag icon={IconFile} label={'Application'} />
 </div>
 
 <style lang="scss">

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

@@ -16,10 +16,9 @@
 <script lang="ts">
   import { createEventDispatcher } from 'svelte'
   import type { Ref, Space } from '@anticrm/core'
-  import { DatePicker, EditBox, Card, Tabs, Section, Grid, Row, Button } from '@anticrm/ui'
+  import { DatePicker, EditBox, Card, Tabs, Section, Grid, Row, Button, IconFile } from '@anticrm/ui'
   import { UserBox, UserInfo, Avatar } from '@anticrm/presentation'
   import type { Employee, Person } from '@anticrm/contact'
-  import File from './icons/File.svelte'
   import Address from './icons/Address.svelte'
   import Attachment from './icons/Attachment.svelte'
 

plugins/recruit-resources/src/components/CreateCandidate copy.svelte

@@ -16,8 +16,7 @@
 <script lang="ts">
   import { createEventDispatcher } from 'svelte'
   import type { Ref, Space } from '@anticrm/core'
-  import { TextArea, EditBox, Dialog, Tabs, Section, Grid } from '@anticrm/ui'
+  import { TextArea, EditBox, Dialog, Tabs, Section, Grid, IconFile } from '@anticrm/ui'
-  import File from './icons/File.svelte'
   import Address from './icons/Address.svelte'
   import Attachment from './icons/Attachment.svelte'
   import DialogHeader from './DialogHeader.svelte'
@@ -54,7 +53,7 @@
         okAction={createCandidate}
         on:close={() => { dispatch('close') }}>
   <DialogHeader />
-  <Section icon={File} label={'Personal Information'}>
+  <Section icon={IconFile} label={'Personal Information'}>
     <Grid>
       <EditBox label={'First name *'} placeholder={'John'} bind:value={firstName} focus/>
       <EditBox label={'Last name *'} placeholder={'Smith'} bind:value={lastName}/>

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

@@ -15,10 +15,9 @@
 
 <script lang="ts">
   import { createEventDispatcher } from 'svelte'
-  import { TextArea, EditBox, Dialog, ToggleWithLabel, Tabs, Section, Grid } from '@anticrm/ui'
+  import { TextArea, EditBox, Dialog, ToggleWithLabel, Tabs, Section, Grid, IconFile } from '@anticrm/ui'
 
   import { getClient } from '@anticrm/presentation'
-  import File from './icons/File.svelte'
   import Recruiting from './icons/Recruiting.svelte'
 
   import recruit from '../plugin'
@@ -57,7 +56,7 @@
         okLabel={recruit.string.CreateVacancy} 
         okAction={createVacancy}
         on:close={() => { dispatch('close') }}>
-  <Section icon={File} label={'General Information'}>
+  <Section icon={IconFile} label={'General Information'}>
     <Grid column={1}>
       <EditBox label={recruit.string.VacancyName} bind:value={name} placeholder="Software Engineer" focus/>
       <TextArea label={recruit.string.VacancyDescription} bind:value={description} placeholder="Start typing..."/>

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

@@ -19,12 +19,11 @@
   
   import type { Ref, Space, Doc } from '@anticrm/core'
   import { generateId } from '@anticrm/core'
-  import { EditBox, Button, CircleButton, Grid, Label, Link, showPopup, Component } from '@anticrm/ui'
+  import { EditBox, Button, CircleButton, Grid, Label, Link, showPopup, Component, IconFile as FileIcon } from '@anticrm/ui'
   import type { AnyComponent } from '@anticrm/ui'
   import { getClient } from '@anticrm/presentation'
 
   import AvatarEditor from './AvatarEditor.svelte'
-  import FileIcon from './icons/File.svelte'
   import FileUpload from './icons/FileUpload.svelte'
   import Edit from './icons/Edit.svelte'
   import Twitter from './icons/Twitter.svelte'

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

@@ -15,11 +15,9 @@
 
 <script lang="ts">
   import { UserInfo } from '@anticrm/presentation'
-  import { ActionIcon } from '@anticrm/ui'
+  import { ActionIcon, IconMoreH, IconFile } from '@anticrm/ui'
   import IconWithLabel from './IconWithLabel.svelte'
   import Tag from './Tag.svelte'
-  import File from './icons/File.svelte'
-  import MoreH from './icons/MoreH.svelte'
 
   interface ICard {
     _id: number
@@ -37,13 +35,13 @@
 <div class="card-container" {draggable} class:draggable on:dragstart on:dragend>
   <div class="header">
     <UserInfo value={{firstName: card.firstName, lastName: card.lastName }} subtitle={'Candidate'} size={'small'} />
-    <ActionIcon icon={MoreH} label={'More..'} direction={'left'} />
+    <ActionIcon icon={IconMoreH} label={'More..'} direction={'left'} />
   </div>
   <div class="content">
-    <IconWithLabel icon={File} label={'Team Interview'} />
+    <IconWithLabel icon={IconFile} label={'Team Interview'} />
     <div class="description">{card.description}</div>
     <div class="tags">
-      <Tag icon={File} label={'Application'} />
+      <Tag icon={IconFile} label={'Application'} />
     </div>
   </div>
 </div>

plugins/recruit-resources/src/components/icons/File.svelte

@@ -1,24 +0,0 @@
-<!--
-// 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 = 'var(--theme-caption-color)'
-</script>
-
-<svg class="svg-{size}" {fill} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
-  <path d="M11.2,0C11.2,0,11.2,0,11.2,0H6C6,0,6,0,6,0s0,0-0.1,0H5.8C5.7,0,5.5,0.1,5.4,0.2L1.3,4.5C1.2,4.6,1.2,4.7,1.2,4.8v7.5 c0,2,1.5,3.6,3.5,3.7h6.5c0,0,0.1,0,0.1,0c2,0,3.6-1.7,3.5-3.7V3.5C14.8,1.6,13.2,0,11.2,0z M5.5,1.4v1.6c0,1-0.7,1.8-1.6,1.8H2.2 L5.5,1.4z M13.9,12.4c0,1.5-1.1,2.7-2.7,2.7H4.7c-1.5-0.1-2.6-1.2-2.6-2.7V5.8h1.8c1.4,0,2.6-1.2,2.6-2.8V1h4.8c0,0,0,0,0,0 c1.4,0,2.6,1.2,2.7,2.6V12.4z"/>
-</svg>

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

@@ -16,11 +16,10 @@
 <script lang="ts">
   import { createEventDispatcher } from 'svelte'
   import type { Ref, Space } from '@anticrm/core'
-  import { DatePicker, EditBox, Dialog, Tabs, Section, Grid, Row, TextArea, IconComments } from '@anticrm/ui'
+  import { DatePicker, EditBox, Dialog, Tabs, Section, Grid, Row, TextArea, IconFile } from '@anticrm/ui'
   import { UserBox } from '@anticrm/presentation'
   import { ReferenceInput } from '@anticrm/text-editor'
   import type { Person } from '@anticrm/contact'
-  import File from './icons/File.svelte'
   
   import { getClient } from '@anticrm/presentation'
 
@@ -49,7 +48,7 @@
         okAction={createCandidate}
         on:close={() => { dispatch('close') }}>
   <Tabs/>
-  <Section icon={File} label={'General Information'}>
+  <Section icon={IconFile} label={'General Information'}>
     <Grid>
       <Row><EditBox label={'Title *'} placeholder={'The Secret Project'} bind:value={title} focus /></Row>
       <UserBox _class={contact.class.Person} title='Assignee' caption='Employees' bind:value={assignee} />

plugins/task-resources/src/components/icons/File.svelte

@@ -1,24 +0,0 @@
-<!--
-// 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 = 'var(--theme-caption-color)'
-</script>
-
-<svg class="svg-{size}" {fill} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
-  <path d="M15.7,2.6C15.1,2,14.2,2,12.5,2H9.9C9.5,2,9.2,2,9,2.1S8.6,2.4,8.3,2.6l-4,4C4,6.9,3.9,7.1,3.8,7.3C3.7,7.6,3.7,7.8,3.7,8.2 v6c0,1.7,0,2.6,0.6,3.2S5.8,18,7.5,18h5c1.7,0,2.6,0,3.2-0.6s0.6-1.5,0.6-3.2V5.8C16.3,4.2,16.3,3.3,15.7,2.6z M5,7.4l4-4 C9.2,3.2,9.3,3.1,9.4,3c0,0,0.1,0,0.1,0v3.4c0,0.7,0,1.2-0.1,1.3C9.2,7.8,8.8,7.8,8.1,7.8H4.7c0,0,0-0.1,0-0.1 C4.7,7.7,4.8,7.5,5,7.4z M15.3,14.2c0,1.5,0,2.2-0.3,2.5S14,17,12.5,17h-5C6,17,5.3,17,5,16.7s-0.3-1-0.3-2.5V8.8h3.4 c1,0,1.6,0,2-0.4c0.4-0.4,0.4-1,0.4-2V3h2C14,3,14.7,3,15,3.3s0.3,1,0.3,2.5V14.2z"/>
-</svg>

plugins/view-assets/assets/icons.svg

@@ -1,29 +1,13 @@
 <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
   <symbol id="table" viewBox="0 0 16 16">
     <g>
-      <rect width="2.9" height="2.9" />
+      <rect width="16" height="1.7" />
-      <rect x="6.6" width="2.9" height="2.9" />
+      <rect y="7.2" width="16" height="1.7" />
-      <rect x="13.1" width="2.9" height="2.9" />
+      <rect y="14.3" width="16" height="1.7" />
-      <rect y="6.6" width="2.9" height="2.9" />
-      <rect x="6.6" y="6.6" width="2.9" height="2.9" />
-      <rect x="13.1" y="6.6" width="2.9" height="2.9" />
-      <rect y="13.1" width="2.9" height="2.9" />
-      <rect x="6.6" y="13.1" width="2.9" height="2.9" />
-      <rect x="13.1" y="13.1" width="2.9" height="2.9" />
     </g>
   </symbol>
   <symbol id="kanban" viewBox="0 0 16 16">
-    <g>
+    <path d="M14,0h-2.8H9.6H6.4H4.8H2C0.9,0,0,0.9,0,2v12c0,1.1,0.9,2,2,2h2.8h1.6h3.2h1.6H14c1.1,0,2-0.9,2-2V2C16,0.9,15.1,0,14,0z M2,14.8c-0.4,0-0.8-0.4-0.8-0.8V2c0-0.4,0.4-0.8,0.8-0.8h2.8v13.6H2z M6.4,14.8V1.2h3.2v13.6H6.4z M14.8,14c0,0.4-0.4,0.8-0.8,0.8 h-2.8V1.2H14c0.4,0,0.8,0.4,0.8,0.8V14z"/>
-      <rect width="2.9" height="2.9" />
-      <rect x="6.6" width="2.9" height="2.9" />
-      <rect x="13.1" width="2.9" height="2.9" />
-      <rect y="6.6" width="2.9" height="2.9" />
-      <rect x="6.6" y="6.6" width="2.9" height="2.9" />
-      <rect x="13.1" y="6.6" width="2.9" height="2.9" />
-      <rect y="13.1" width="2.9" height="2.9" />
-      <rect x="6.6" y="13.1" width="2.9" height="2.9" />
-      <rect x="13.1" y="13.1" width="2.9" height="2.9" />
-    </g>
   </symbol>
   <symbol id="card" viewBox="0 0 16 16">
     <g>

plugins/view-resources/src/components/KanbanCard.svelte

@@ -0,0 +1,114 @@
+<!--
+// Copyright © 2020, 2021 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 { UserInfo } from '@anticrm/presentation'
+  import { ActionIcon, Label, IconMoreH, IconFile } from '@anticrm/ui'
+
+  interface ICard {
+    _id: number
+    firstName: string
+    lastName: string
+    description: string
+    state: number
+  }
+
+  export let card: ICard
+  export let draggable: boolean
+
+</script>
+
+<div class="card-container" {draggable} class:draggable on:dragstart on:dragend>
+  <div class="header">
+    <UserInfo value={{firstName: card.firstName, lastName: card.lastName }} subtitle={'Candidate'} size={'small'} />
+    <ActionIcon icon={IconMoreH} label={'More..'} direction={'left'} />
+  </div>
+  <div class="content">
+    <div class="flex-row-center item">
+      <IconFile size={'large'} />
+      <span>Team Interview</span>
+    </div>
+    <div class="description">{card.description}</div>
+    <div class="tags">
+      <div class="tag">
+        <IconFile size={'small'} />
+        <span><Label label={'Application'} /></span>
+      </div>
+    </div>
+  </div>
+</div>
+
+<style lang="scss">
+  .card-container {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    background-color: var(--theme-button-bg-hovered);
+    border: 1px solid var(--theme-bg-accent-color);
+    border-radius: .75rem;
+    user-select: none;
+
+    .header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: .75rem 1rem;
+      width: 100%;
+      min-height: 3.75rem;
+      background-color: var(--theme-button-bg-focused);
+      border-radius: .75rem .75rem 0 0;
+    }
+    .content {
+      display: flex;
+      flex-direction: column;
+      align-items: stretch;
+      padding: 1rem;
+
+      .item {
+        font-weight: 500;
+        font-size: 1rem;
+        color: var(--theme-caption-color);
+        span { margin-left: .5em; }
+      }
+      .description {
+        margin-top: .5rem;
+      }
+      .tags {
+        display: flex;
+        margin-top: 1rem;
+
+        .tag {
+          display: flex;
+          align-items: center;
+          padding: .5rem .75rem;
+          font-size: .75rem;
+          text-align: center;
+          background-color: var(--theme-bg-accent-color);
+          color: var(--theme-caption-color);
+          border-radius: .5rem;
+
+          span { margin-left: .3em; }
+        }
+        .tag + .tag { margin-left: .75rem; }
+      }
+    }
+
+    &.draggable {
+      cursor: grab;
+    }
+  }
+
+  :global(.card-container + .card-container) { margin-top: .75rem; }
+</style>

plugins/view-resources/src/components/KanbanCardEmpty.svelte

@@ -0,0 +1,54 @@
+<!--
+// Copyright © 2020, 2021 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 } from '@anticrm/platform'
+  import { Label } from '@anticrm/ui'
+  import { IconAdd } from '@anticrm/ui'
+
+  export let label: IntlString
+</script>
+
+<div class="card-container">
+  <div class="icon">
+    <IconAdd size={'small'} />
+  </div>
+  <Label {label} />
+</div>
+
+<style lang="scss">
+  .card-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: .75rem 1.5rem;
+    color: var(--theme-content-dark-color);
+    background-color: var(--theme-button-bg-hovered);
+    border: 1px dotted var(--theme-bg-accent-color);
+    border-radius: .75rem;
+    cursor: pointer;
+
+    .icon {
+      margin-bottom: .25rem;
+      opacity: .4;
+    }
+
+    &:hover {
+      color: var(--theme-caption-color);
+      .icon { opacity: 1; }
+    }
+  }
+</style>

plugins/view-resources/src/components/KanbanPanel.svelte

@@ -0,0 +1,82 @@
+<!--
+// Copyright © 2020, 2021 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 } from '@anticrm/platform'
+  import { Label, ScrollBox } from '@anticrm/ui'
+
+  export let label: IntlString
+  export let color: string
+  export let counter: number
+</script>
+
+<div class="panel-container" on:dragover on:drop>
+  <div class="header" style="background-color: {color}">
+    <div class="title"><Label {label} /></div>
+    <div class="counter">{counter}</div>
+  </div>
+  <div class="scroll">
+    <ScrollBox vertical>
+      <slot />
+    </ScrollBox>
+  </div>
+</div>
+
+<style lang="scss">
+  .panel-container {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    width: 20rem;
+    height: 100%;
+    background-color: var(--theme-button-bg-enabled);
+    border: 1px solid var(--theme-bg-accent-color);
+    border-radius: .75rem;
+
+    .header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin: .75rem;
+      padding: .5rem;
+      min-height: 2.75rem;
+      font-weight: 500;
+      border: 1px solid rgba(0, 0, 0, .1);
+      border-radius: .5rem;
+
+      .title {
+        padding-left: .5rem;
+        color: var(--theme-caption-color);
+      }
+      .counter {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 1.75rem;
+        height: 1.75rem;
+        color: var(--theme-contnet-accent-color);
+        background-color: rgba(0, 0, 0, .08);
+        border-radius: 50%;
+      }
+    }
+
+    .scroll {
+      margin: .5rem .75rem .75rem;
+      height: 100%;
+    }
+  }
+
+  :global(.panel-container + .panel-container) { margin-left: .75rem; }
+</style>

plugins/view-resources/src/components/KanbanPanelEmpty.svelte

@@ -0,0 +1,68 @@
+<!--
+// Copyright © 2020, 2021 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 } from '@anticrm/platform'
+  import { Label } from '@anticrm/ui'
+  import { IconAdd } from '@anticrm/ui'
+
+  export let label: IntlString
+</script>
+
+<div class="panel-container">
+  <div class="circle">
+    <div class="icon">
+      <IconAdd size={'large'} />
+    </div>
+  </div>
+  <Label {label} />
+</div>
+
+<style lang="scss">
+  .panel-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 20rem;
+    height: 100%;
+    padding: .75rem;
+    color: var(--theme-caption-color);
+    background-color: var(--theme-button-bg-enabled);
+    border: 1px dotted var(--theme-bg-accent-color);
+    border-radius: .75rem;
+    cursor: pointer;
+
+    .circle {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin-bottom: 1.25rem;
+      width: 5rem;
+      height: 5rem;
+      background-color: var(--theme-bg-accent-color);
+      border-radius: 50%;
+
+      .icon { opacity: .6; }
+    }
+
+    &:hover {
+      background-color: var(--theme-bg-accent-hover);
+      box-shadow: 0 .75rem 2.5rem rgba(0, 0, 0, .15);
+
+      .circle .icon { opacity: 1; }
+    }
+  }
+</style>

plugins/view-resources/src/components/KanbanView.svelte

@@ -24,6 +24,11 @@
 
   import { createQuery } from '@anticrm/presentation'
 
+  import KanbanPanel from './KanbanPanel.svelte'
+  import KanbanPanelEmpty from './KanbanPanelEmpty.svelte'
+  import KanbanCard from './KanbanCard.svelte'
+  import KanbanCardEmpty from './KanbanCardEmpty.svelte'
+
   export let _class: Ref<Class<Doc>>
   export let space: Ref<Space>
   export let open: AnyComponent
@@ -52,78 +57,79 @@
   function onClick(object: Doc) {
     showPopup(open, { object, space }, 'float')
   }
+
+  interface ICard {
+    _id: number
+    firstName: string
+    lastName: string
+    description: string
+    state: number
+  }
+  let dragCard: ICard
+  let states: Array<Object> = [
+    { _id: 0, label: 'In progress', color: '#7C6FCD' },
+    { _id: 1, label: 'Under review', color: '#6F7BC5' },
+    { _id: 2, label: 'Interview', color: '#A5D179' },
+    { _id: 3, label: 'Offer', color: '#77C07B' },
+    { _id: 4, label: 'Assigned', color: '#F28469' }
+  ]
+  const cards: Array<ICard> = [
+    { _id: 0, firstName: 'Chen', lastName: 'Rosamund', description: '8:30AM, July 12 Voltron, San Francisco', state: 0 },
+    { _id: 1, firstName: 'Chen', lastName: 'Rosamund', description: '8:30AM, July 12 Voltron, San Francisco', state: 0 },
+    { _id: 2, firstName: 'Chen', lastName: 'Rosamund', description: '8:30AM, July 12 Voltron, San Francisco', state: 0 },
+    { _id: 3, firstName: 'Chen', lastName: 'Rosamund', description: '8:30AM, July 12 Voltron, San Francisco', state: 1 },
+    { _id: 4, firstName: 'Chen', lastName: 'Rosamund', description: '8:30AM, July 12 Voltron, San Francisco', state: 1 },
+    { _id: 5, firstName: 'Chen', lastName: 'Rosamund', description: '8:30AM, July 12 Voltron, San Francisco', state: 2 },
+    { _id: 6, firstName: 'Chen', lastName: 'Rosamund', description: '8:30AM, July 12 Voltron, San Francisco', state: 3 },
+  ]
 </script>
 
 {#await buildModel(client, _class, config, options)}
  <Loading/>
 {:then model}
-KANBAN
+<div class="kanban-container">
-<div class="container">
+  <ScrollBox>
-  <ScrollBox vertical stretch noShift>
+    <div class="kanban-content">
-    <table class="table-body">
+      {#each states as state}
-      <thead>
+        <KanbanPanel label={state.label} color={state.color} counter={4}
-        <tr class="tr-head">
+          on:dragover={(event) => {
-          {#each model as attribute}
+            event.preventDefault()
-            <th><Label label = {attribute.label}/></th>
+          }}
+          on:drop={(event) => {
+            event.preventDefault()
+            if (dragCard) {
+              dragCard.state = state._id
+              dragCard = undefined
+            }
+          }}
+        >
+          <KanbanCardEmpty label={'Create new application'} />
+          {#each cards.filter((c) => c.state === state._id) as card}
+            <KanbanCard {card} draggable={true}
+              on:dragstart={() => {
+                dragCard = card
+              }}
+              on:dragend={() => {
+                dragCard = undefined
+              }}
+            />
           {/each}
-        </tr>
+        </KanbanPanel>
-      </thead>
-      {#if objects}
-        <tbody>
-          {#each objects as object (object._id)}
-            <tr class="tr-body" on:click={() => onClick(object)}>
-            {#each model as attribute}
-              <td><svelte:component this={attribute.presenter} value={getValue(object, attribute.key)}/></td>
       {/each}
-            </tr>
+      <KanbanPanelEmpty label={'Add new column'} />
-          {/each}
+    </div>
-        </tbody>
-      {/if}
-    </table>
   </ScrollBox>
 </div>
 {/await}
 
 <style lang="scss">
-  .container {
+  .kanban-container {
-    flex-grow: 1;
+    margin-bottom: 1.25rem;
-    position: relative;
-    padding-bottom: 2.5rem;
     height: 100%;
-
-    &::before {
-      position: absolute;
-      content: '';
-      top: 2.5rem;
-      bottom: 0;
-      width: 100%;
-      background-color: var(--theme-table-bg-color);
-      border-radius: 0 0 1.25rem 1.25rem;
   }
-  }
+  .kanban-content {
-
+    display: flex;
-  th, td {
+    margin: 0 2.5rem;
-    padding: .5rem 1.5rem;
+    height: 100%;
-    text-align: left;
-    &:first-child { padding-left: 2.5rem; }
-  }
-
-  th {
-    position: sticky;
-    top: 0;
-    height: 2.5rem;
-    font-weight: 500;
-    font-size: .75rem;
-    color: var(--theme-content-dark-color);
-    background-color: var(--theme-bg-color);
-    box-shadow: inset 0 -1px 0 0 var(--theme-bg-focused-color);
-  }
-
-  .tr-body {
-    height: 3.75rem;
-    color: var(--theme-caption-color);
-    border-bottom: 1px solid var(--theme-button-border-hovered);
-    &:last-child { border-bottom: none; }
-    &:hover { background-color: var(--theme-table-bg-hover); }
   }
 </style>

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

@@ -15,8 +15,7 @@
 
 <script lang="ts">
   import type { IntlString } from '@anticrm/platform'
-  import { ActionIcon } from '@anticrm/ui'
+  import { ActionIcon, IconMoreH } from '@anticrm/ui'
-  import MoreH from './icons/MoreH.svelte'
 
   export let label: IntlString
   export let action: () => Promise<void>
@@ -24,7 +23,7 @@
 
 <div class="container">
   <span class="overflow-label label">{label}</span>
-  <ActionIcon label={'More...'} icon={MoreH} size={'small'} {action}/>
+  <ActionIcon label={'More...'} icon={IconMoreH} size={'small'} {action}/>
 </div>
 
 <style lang="scss">

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 } from '@anticrm/ui'
+  import { Icon, ActionIcon, Button, IconMoreH } from '@anticrm/ui'
   import type { AnyComponent } from '@anticrm/ui'
   import Header from './Header.svelte'
-  import MoreH from './icons/MoreH.svelte'
   import Add from './icons/Add.svelte'
   import Star from './icons/Star.svelte'
 
@@ -50,7 +49,7 @@
     {/if}
     <ActionIcon label={'Favorite'} icon={Star} size={'small'}/>
     <ActionIcon label={'Create'} icon={Add} size={'small'}/>
-    <ActionIcon label={'More...'} icon={MoreH} size={'small'}/>
+    <ActionIcon label={'More...'} icon={IconMoreH} size={'small'}/>
   {/if}
 </div>
 

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

@@ -1,10 +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="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>