wieerwill/platform
1
0
Fork 0
mirror of https://github.com/hcengineering/platform.git synced 2025-04-25 18:02:04 +00:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Add KanbanView. Move icons. (#143)

Browse Source 
Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov 2021-09-06 19:00:43 +03:00 committed by GitHub
parent e9f12766c1
commit bb08165fef
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
26 changed files with 417 additions and 184 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
packages/theme/styles/global.scss
View File

@ -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; }

0
plugins/chunter-resources/src/components/icons/File.svelte → packages/ui/src/components/icons/File.svelte
View File

0
plugins/recruit-resources/src/components/icons/MoreH.svelte → packages/ui/src/components/icons/MoreH.svelte
View File

2
packages/ui/src/index.ts
View File

@ -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'

4
plugins/chunter-resources/src/components/AttachmentPresenter.svelte
View File

@ -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}

5
plugins/chunter-resources/src/components/Message.svelte
View File

@ -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>

10
plugins/chunter-resources/src/components/icons/MoreH.svelte
View File

@ -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>

6
plugins/recruit-resources/src/components/CandidateGeneral.svelte
View File

@ -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}/>

4
plugins/recruit-resources/src/components/Card.svelte
View File

@ -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">

3
plugins/recruit-resources/src/components/CreateApplication.svelte
View File

@ -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'

5
plugins/recruit-resources/src/components/CreateCandidate copy.svelte
View File

@ -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 File from './icons/File.svelte'
import { TextArea, EditBox, Dialog, Tabs, Section, Grid, IconFile } from '@anticrm/ui'
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}/>

5
plugins/recruit-resources/src/components/CreateVacancy.svelte
View File

@ -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..."/>

3
plugins/recruit-resources/src/components/DialogHeader.svelte
View File

@ -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'

10
plugins/recruit-resources/src/components/KanbanCard.svelte
View File

@ -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>

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

@ -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>

5
plugins/task-resources/src/components/CreateTask.svelte
View File

@ -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} />

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

@ -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>

24
plugins/view-assets/assets/icons.svg
View File

@ -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 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" />
<rect width="16" height="1.7" />
<rect y="7.2" width="16" height="1.7" />
<rect y="14.3" width="16" height="1.7" />
</g>
</symbol>
<symbol id="kanban" viewBox="0 0 16 16">
<g>
<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>
<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"/>
</symbol>
<symbol id="card" viewBox="0 0 16 16">
<g>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

114
plugins/view-resources/src/components/KanbanCard.svelte Normal file
View File

@ -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>

54
plugins/view-resources/src/components/KanbanCardEmpty.svelte Normal file
View File

@ -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>

82
plugins/view-resources/src/components/KanbanPanel.svelte Normal file
View File

@ -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>

68
plugins/view-resources/src/components/KanbanPanelEmpty.svelte Normal file
View File

@ -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>

126
plugins/view-resources/src/components/KanbanView.svelte
View File

@ -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="container">
<ScrollBox vertical stretch noShift>
<table class="table-body">
<thead>
<tr class="tr-head">
{#each model as attribute}
<th><Label label = {attribute.label}/></th>
<div class="kanban-container">
<ScrollBox>
<div class="kanban-content">
{#each states as state}
<KanbanPanel label={state.label} color={state.color} counter={4}
on:dragover={(event) => {
event.preventDefault()
}}
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>
</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>
{/each}
</tbody>
{/if}
</table>
</KanbanPanel>
{/each}
<KanbanPanelEmpty label={'Add new column'} />
</div>
</ScrollBox>
</div>
{/await}
<style lang="scss">
.container {
flex-grow: 1;
position: relative;
padding-bottom: 2.5rem;
.kanban-container {
margin-bottom: 1.25rem;
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;
}
}
th, td {
padding: .5rem 1.5rem;
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); }
.kanban-content {
display: flex;
margin: 0 2.5rem;
height: 100%;
}
</style>

5
plugins/workbench-resources/src/components/NavHeader.svelte
View File

@ -15,8 +15,7 @@
<script lang="ts">
import type { IntlString } from '@anticrm/platform'
import { ActionIcon } from '@anticrm/ui'
import MoreH from './icons/MoreH.svelte'
import { ActionIcon, IconMoreH } from '@anticrm/ui'
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">

5
plugins/workbench-resources/src/components/SpaceHeader.svelte
View File

@ -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>

10
plugins/workbench-resources/src/components/icons/MoreH.svelte
View File

@ -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>