hcengineering/platform
1
0
Fork 0
mirror of https://github.com/hcengineering/platform.git synced 2025-01-03 17:05:16 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Layout KanbanCard (#145)

Browse Source 
Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov 2021-09-07 10:48:41 +03:00 committed by GitHub
parent b73e2e1a4c
commit 951fd2ae10
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 149 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/theme/styles/_colors.scss
View File

@ -65,7 +65,7 @@
--theme-menu-divider: rgba(255, 255, 255, .05);
--theme-scroll-bar: #2C2C34;
--theme-bg-modal: #2C2B35;
--theme-card-bg: rgba(222, 222, 240, .2);
--theme-card-bg: #DEDEF0;
--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);
@ -121,7 +121,7 @@
--theme-menu-divider: rgba(255, 255, 255, .05);
--theme-scroll-bar: #494852;
--theme-bg-modal: #2C2B35;
--theme-card-bg: rgba(222, 222, 240, .2);
--theme-card-bg: #DEDEF0;
--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);
@ -176,7 +176,7 @@
--theme-menu-divider: rgba(0, 0, 0, .08);
--theme-scroll-bar: #CBCBCB;
--theme-bg-modal: #fff;
--theme-card-bg: rgba(255, 255, 255, .4);
--theme-card-bg: #DEDEF0;
--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);

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

@ -15,6 +15,7 @@
@import "./_colors.scss";
@import "./_layouts.scss";
@import "./mixins.scss";
@font-face {
font-family: 'IBM Plex Sans';
@ -65,7 +66,7 @@
::-webkit-scrollbar:horizontal {
height: 6px;
}
::-webkit-scrollbar-track {
::-webkit-scrollbar-track, .panel-container .scroll .scroll::-webkit-scrollbar-track {
margin: 6px;
// background-color: var(--theme-scroll-bar);
}

8
packages/theme/styles/mixins.scss
View File

@ -1,9 +1,9 @@
@mixin bg-fullsize {
position: absolute;
top: 0px;
left: 0px;
min-width: 100%;
min-height: 100%;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
@mixin bg-layer($color, $opacity) {

1
packages/ui/src/components/Card.svelte
View File

@ -105,6 +105,7 @@
right: 0;
background-color: var(--theme-card-bg);
border-radius: 1.25rem;
opacity: .2;
z-index: -1;
}
}

24
packages/ui/src/components/icons/Attachment.svelte Normal file
View File

@ -0,0 +1,24 @@
<!--
// 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} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path d="M2.2,8.5l5.9-6.2c1.2-1.3,3.3-1.3,4.5,0c1.2,1.3,1.2,3.5,0,4.8l-6.8,7.2c-0.5,0.5-1.3,0.5-1.8,0 c-0.5-0.5-0.5-1.4,0-1.9l6.8-7.2c0.2-0.3,0.2-0.7,0-1C10.6,4,10.2,4,9.9,4.2l-6.8,7.2c-1,1.1-1,2.8,0,3.8c1,1.1,2.6,1.1,3.6,0 l6.8-7.2c1.7-1.8,1.7-4.8,0-6.7c-1.7-1.8-4.6-1.8-6.3,0L1.3,7.6c-0.2,0.3-0.2,0.7,0,1C1.6,8.8,2,8.8,2.2,8.5z"/>
</svg>

24
packages/ui/src/components/icons/Thread.svelte Normal file
View File

@ -0,0 +1,24 @@
<!--
// 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} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path d="M8,16c-1.1,0-2.3-0.2-3.4-0.7C4.3,15.1,4,15,3.8,15c-0.2,0-0.6,0.1-0.9,0.2c-0.6,0.2-1.5,0.5-2.1-0.1 S0.5,13.7,0.8,13C0.9,12.7,1,12.4,1,12.2c0-0.2-0.1-0.4-0.2-0.8c-1.4-3-0.7-6.6,1.6-9C3.9,0.8,5.9,0,8,0c2.1,0,4.1,0.8,5.7,2.3 c3.1,3.1,3.1,8.2,0,11.3l0,0C12.1,15.2,10.1,16,8,16z M3.8,13.8c0.4,0,0.9,0.2,1.3,0.3c2.6,1.2,5.7,0.7,7.7-1.3 c2.6-2.6,2.6-6.9,0-9.6c-1.3-1.3-3-2-4.8-2c-1.8,0-3.5,0.7-4.8,2c-2,2-2.5,5.1-1.4,7.6c0.2,0.4,0.3,0.9,0.3,1.3 c0,0.4-0.2,0.9-0.3,1.3c-0.1,0.2-0.3,0.8-0.2,0.8c0.1,0.1,0.6-0.1,0.8-0.2C3,13.9,3.4,13.8,3.8,13.8z M13.2,13.2L13.2,13.2 L13.2,13.2z"/>
</svg>

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

@ -62,6 +62,8 @@ 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 { default as IconAttachment } from './components/icons/Attachment.svelte'
export { default as IconThread } from './components/icons/Thread.svelte'
export * from './utils'

127
plugins/view-resources/src/components/KanbanCard.svelte
View File

@ -14,8 +14,8 @@
-->
<script lang="ts">
import { UserInfo } from '@anticrm/presentation'
import { ActionIcon, Label, IconMoreH, IconFile } from '@anticrm/ui'
import { UserInfo, Avatar } from '@anticrm/presentation'
import { Icon, Label, IconThread, IconAttachment } from '@anticrm/ui'
interface ICard {
_id: number
@ -31,83 +31,132 @@
</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="card-bg" />
<div class="content">
<div class="flex-row-center item">
<IconFile size={'large'} />
<span>Team Interview</span>
<div class="flex-center">
<div class="avatar">
<Avatar size={'large'} />
</div>
<div class="description">{card.description}</div>
</div>
<div class="flex-col">
<div class="name">{card.firstName} {card.lastName}</div>
<div class="city">{card.description}</div>
<div class="tags">
<div class="tag">
<IconFile size={'small'} />
<span><Label label={'Application'} /></span>
<div class="tag"><Label label={'Application'} /></div>
<div class="tag"><Label label={'Resume'} /></div>
</div>
</div>
</div>
<div class="footer">
<Avatar size={'small'} />
<div class="flex-row-center">
<div class="flex-row-center caption-color tool">
<span class="icon"><IconAttachment size={'small'} /></span>
4
</div>
<div class="flex-row-center caption-color tool">
<span class="icon"><IconThread size={'small'} /></span>
5
</div>
</div>
</div>
</div>
<style lang="scss">
@import '../../../../packages/theme/styles/mixins.scss';
.card-container {
position: relative;
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;
overflow: hidden;
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;
align-items: center;
padding: 1.25rem;
.item {
.avatar {
position: relative;
margin-right: 1rem;
width: 5rem;
height: 5rem;
border-radius: 50%;
filter: drop-shadow(0px 24px 94px rgba(50, 53, 47, 1));
&::after {
content: '';
@include bg-layer(transparent, .1);
border: 2px solid #fff;
border-radius: 50%;
}
}
.name {
margin: .25rem 0;
font-weight: 500;
font-size: 1rem;
color: var(--theme-caption-color);
span { margin-left: .5em; }
}
.description {
margin-top: .5rem;
.city {
font-weight: 500;
font-size: .75rem;
}
.tags {
display: flex;
margin-top: 1rem;
margin-top: .5rem;
.tag {
position: relative;
display: flex;
align-items: center;
padding: .5rem .75rem;
font-size: .75rem;
padding: .375rem .5rem;
font-weight: 500;
font-size: .625rem;
text-align: center;
background-color: var(--theme-bg-accent-color);
color: var(--theme-caption-color);
border-radius: .5rem;
span { margin-left: .3em; }
&::after {
content: '';
@include bg-layer(#fff, .04);
border-radius: .5rem;
}
.tag + .tag { margin-left: .75rem; }
}
.tag + .tag { margin-left: .5rem; }
}
}
.footer {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
padding: .75rem 1.25rem;
width: 100%;
min-height: 3rem;
&::after {
content: '';
@include bg-layer(#fff, .04);
}
.tool .icon {
margin-right: .25rem;
opacity: .4;
}
.tool + .tool {
margin-left: .75rem;
}
}
&.draggable {
cursor: grab;
}
.card-bg {
@include bg-layer(var(--theme-card-bg), .06);
}
}
:global(.card-container + .card-container) { margin-top: .75rem; }