mirror of
https://github.com/hcengineering/platform.git
synced 2024-12-23 11:31:57 +03:00
New layout EditStatuses (#212)
Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov
GitHub
parent
343aa5828e
commit
2520da1215
@ -76,7 +76,7 @@
|
||||
--theme-avatar-bg: #E0DAD5;
|
||||
--theme-avatar-hover: radial-gradient(86.62% 86.62% at 50% 13.38%, rgba(196, 196, 204, 0.4) 0%, rgba(137, 140, 150, 0.4) 100%);
|
||||
--theme-avatar-border: rgba(255, 255, 255, .1);
|
||||
--theme-avatar-shadow: drop-shadow(0px 0px 10px rgba(46, 41, 40, .8)) drop-shadow(0px 10px 54px rgba(125, 112, 105, 1));
|
||||
--theme-avatar-shadow: drop-shadow(0px 14px 44px rgba(74, 67, 64, .8));
|
||||
|
||||
--theme-bg-accent-color: rgba(255, 255, 255, .03);
|
||||
--theme-bg-accent-hover: rgba(255, 255, 255, .06);
|
||||
@ -140,7 +140,7 @@
|
||||
--theme-avatar-bg: #E0DAD5;
|
||||
--theme-avatar-hover: radial-gradient(86.62% 86.62% at 50% 13.38%, rgba(196, 196, 204, 0.4) 0%, rgba(137, 140, 150, 0.4) 100%);
|
||||
--theme-avatar-border: rgba(255, 255, 255, .1);
|
||||
--theme-avatar-shadow: drop-shadow(0px 0px 10px rgba(46, 41, 40, .8)) drop-shadow(0px 10px 54px rgba(125, 112, 105, 1));
|
||||
--theme-avatar-shadow: drop-shadow(0px 14px 44px rgba(74, 67, 64, .8));
|
||||
|
||||
--theme-bg-accent-color: rgba(255, 255, 255, .03);
|
||||
--theme-bg-accent-hover: rgba(255, 255, 255, .06);
|
||||
@ -203,7 +203,7 @@
|
||||
--theme-avatar-bg: #C4C4C4;
|
||||
--theme-avatar-hover: #EEEDED;
|
||||
--theme-avatar-border: rgba(255, 255, 255, .7);
|
||||
--theme-avatar-shadow: drop-shadow(0px 0px 10px rgba(46, 41, 40, .4)) drop-shadow(0px 10px 54px rgba(125, 112, 105, 1));
|
||||
--theme-avatar-shadow: drop-shadow(0px 14px 44px rgba(74, 67, 64, .8));
|
||||
|
||||
--theme-bg-accent-color: rgba(0, 0, 0, .03);
|
||||
--theme-bg-accent-hover: rgba(0, 0, 0, .05);
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
import Icon from './Icon.svelte'
|
||||
|
||||
export let icon: Asset | AnySvelteComponent
|
||||
export let size: 'small' | 'medium' = 'medium'
|
||||
export let size: 'small' | 'medium' | 'large' = 'large'
|
||||
</script>
|
||||
|
||||
<div class="icon-button icon-{size}" on:click>
|
||||
@ -55,6 +55,10 @@
|
||||
height: 1.5rem;
|
||||
}
|
||||
.icon-medium {
|
||||
width: 1.75rem;
|
||||
height: 1.75rem;
|
||||
}
|
||||
.icon-large {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
}
|
||||
|
||||
@ -80,7 +80,7 @@
|
||||
border-radius: .5rem;
|
||||
user-select: none;
|
||||
text-align: center;
|
||||
z-index: 10;
|
||||
z-index: 1000;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
|
||||
@ -144,17 +144,30 @@
|
||||
on:close={() => { dispatch('close') }}>
|
||||
|
||||
<div class="flex-row-center">
|
||||
<div class="avatar" on:click={() => { (kl < 3) ? kl++ : kl = 0 }}>
|
||||
<div class="border"/>
|
||||
{#if kl === 0}
|
||||
<Avatar />
|
||||
{:else if kl === 1}
|
||||
<img src={Girl} alt="Avatar" />
|
||||
{:else if kl === 2}
|
||||
<img src={Elon} alt="Avatar" />
|
||||
{:else}
|
||||
<img src={Bond} alt="Avatar" />
|
||||
{/if}
|
||||
<div class="avatar-container">
|
||||
<div class="flex-center avatar-shadow">
|
||||
{#if kl === 0}
|
||||
<div class="bg-avatar"><Avatar /></div>
|
||||
{:else if kl === 1}
|
||||
<div class="bg-avatar"><img src={Girl} alt="Avatar" /></div>
|
||||
{:else if kl === 2}
|
||||
<div class="bg-avatar"><img src={Elon} alt="Avatar" /></div>
|
||||
{:else}
|
||||
<div class="bg-avatar"><img src={Bond} alt="Avatar" /></div>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="flex-center avatar" on:click={() => { (kl < 3) ? kl++ : kl = 0 }}>
|
||||
<div class="border"/>
|
||||
{#if kl === 0}
|
||||
<Avatar />
|
||||
{:else if kl === 1}
|
||||
<img src={Girl} alt="Avatar" />
|
||||
{:else if kl === 2}
|
||||
<img src={Elon} alt="Avatar" />
|
||||
{:else}
|
||||
<img src={Bond} alt="Avatar" />
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-col">
|
||||
@ -190,16 +203,30 @@
|
||||
<style lang="scss">
|
||||
@import '../../../../packages/theme/styles/mixins.scss';
|
||||
|
||||
.avatar {
|
||||
.avatar-container {
|
||||
flex-shrink: 0;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-right: 1rem;
|
||||
width: 6rem;
|
||||
height: 6rem;
|
||||
user-select: none;
|
||||
}
|
||||
.avatar-shadow {
|
||||
position: absolute;
|
||||
width: 6rem;
|
||||
height: 6rem;
|
||||
|
||||
.bg-avatar {
|
||||
transform: scale(1.1);
|
||||
filter: blur(10px);
|
||||
opacity: .75;
|
||||
}
|
||||
}
|
||||
.avatar {
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
width: 6rem;
|
||||
height: 6rem;
|
||||
border-radius: 50%;
|
||||
filter: var(--theme-avatar-shadow);
|
||||
cursor: pointer;
|
||||
|
||||
@ -16,8 +16,12 @@
|
||||
|
||||
<script lang="ts">
|
||||
import type { Ref, SpaceWithStates, State } from '@anticrm/core'
|
||||
import { Dialog } from '@anticrm/ui'
|
||||
import { CircleButton, IconAdd, Label, IconMoreH, ActionIcon } from '@anticrm/ui'
|
||||
import { createQuery, getClient } from '@anticrm/presentation'
|
||||
import { createEventDispatcher } from 'svelte'
|
||||
import Close from './icons/Close.svelte'
|
||||
import Circles from './icons/Circles.svelte'
|
||||
import Status from './icons/Status.svelte'
|
||||
|
||||
import core from '@anticrm/core'
|
||||
|
||||
@ -86,41 +90,128 @@
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const dispatch = createEventDispatcher()
|
||||
</script>
|
||||
|
||||
|
||||
<Dialog label="Edit Statuses">
|
||||
{#each states as state, i}
|
||||
{#if state}
|
||||
<div bind:this={elements[i]} class="flex-center states" style="background-color: {state.color}; height: 60px" draggable={true}
|
||||
on:dragover|preventDefault={(ev) => {
|
||||
dragover(ev, i)
|
||||
}}
|
||||
on:drop|preventDefault={() => {
|
||||
console.log('DROP')
|
||||
move(i)
|
||||
}}
|
||||
on:dragstart={() => {
|
||||
dragStateInitialPosition = selected = i
|
||||
dragState = states[i]._id
|
||||
}}
|
||||
on:dragend={() => {
|
||||
console.log('DRAGEND')
|
||||
selected = undefined
|
||||
}}
|
||||
>
|
||||
{state.title}
|
||||
<div class="flex-col floatdialog-container">
|
||||
<div class="flex-between header">
|
||||
<div class="flex-grow flex-col">
|
||||
<div class="flex-row-center">
|
||||
<div class="icon"><Status size={'small'} /></div>
|
||||
<span class="overflow-label title">Manage application statuses within vacancy</span>
|
||||
</div>
|
||||
<div class="overflow-label subtitle">Vacancy name</div>
|
||||
</div>
|
||||
{/if}
|
||||
{/each}
|
||||
</Dialog>
|
||||
<div class="tool" on:click={() => dispatch('close')}><Close size={'small'} /></div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="flex-between states-header">
|
||||
<Label label={'ACTIVE STATUSES'} />
|
||||
<CircleButton icon={IconAdd} size={'medium'} />
|
||||
</div>
|
||||
{#each states as state, i}
|
||||
{#if state}
|
||||
<div bind:this={elements[i]} class="flex-between states" draggable={true}
|
||||
on:dragover|preventDefault={(ev) => {
|
||||
dragover(ev, i)
|
||||
}}
|
||||
on:drop|preventDefault={() => {
|
||||
console.log('DROP')
|
||||
move(i)
|
||||
}}
|
||||
on:dragstart={() => {
|
||||
dragStateInitialPosition = selected = i
|
||||
dragState = states[i]._id
|
||||
}}
|
||||
on:dragend={() => {
|
||||
console.log('DRAGEND')
|
||||
selected = undefined
|
||||
}}
|
||||
>
|
||||
<div class="bar"><Circles /></div>
|
||||
<div class="color" style="background-color: {state.color}" />
|
||||
<div class="flex-grow caption-color">{state.title}</div>
|
||||
<div class="tool"><ActionIcon icon={IconMoreH} label={'More...'} size={'medium'} /></div>
|
||||
</div>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.states {
|
||||
padding: .25rem .5rem;
|
||||
color: #fff;
|
||||
border-radius: .5rem;
|
||||
user-select: none;
|
||||
cursor: grabbing;
|
||||
.floatdialog-container {
|
||||
margin: 2rem 1rem 1.25rem 0;
|
||||
height: calc(100% - 3.25rem);
|
||||
background-color: rgba(31, 31, 37, .8);
|
||||
border-radius: 1.25rem;
|
||||
box-shadow: 0px 44px 154px rgba(0, 0, 0, .75);
|
||||
backdrop-filter: blur(30px);
|
||||
|
||||
.header {
|
||||
padding: 0 2rem 0 2.5rem;
|
||||
height: 4.5rem;
|
||||
min-height: 4.5rem;
|
||||
|
||||
.icon {
|
||||
margin-right: .5rem;
|
||||
opacity: .6;
|
||||
}
|
||||
.title {
|
||||
font-weight: 500;
|
||||
font-size: 1rem;
|
||||
color: var(--theme-caption-color);
|
||||
}
|
||||
.subtitle {
|
||||
font-size: .75rem;
|
||||
color: var(--theme-content-dark-color);
|
||||
}
|
||||
.tool {
|
||||
margin-left: 2.5rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 1rem 2.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.states {
|
||||
padding: .625rem 1rem;
|
||||
color: #fff;
|
||||
background-color: rgba(67, 67, 72, .3);
|
||||
border: 1px solid var(--theme-bg-accent-color);
|
||||
border-radius: .75rem;
|
||||
user-select: none;
|
||||
|
||||
&-header {
|
||||
margin-bottom: 1rem;
|
||||
font-weight: 600;
|
||||
font-size: .75rem;
|
||||
color: var(--theme-content-trans-color);
|
||||
}
|
||||
|
||||
.bar {
|
||||
margin-right: .375rem;
|
||||
width: .375rem;
|
||||
height: 1rem;
|
||||
opacity: .4;
|
||||
cursor: grabbing;
|
||||
}
|
||||
.color {
|
||||
margin-right: .75rem;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border-radius: .25rem;
|
||||
}
|
||||
.tool {
|
||||
margin-left: 1rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.states + .states { margin-top: .5rem; }
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,16 @@
|
||||
<script lang="ts">
|
||||
const fill: string = 'var(--theme-caption-color)'
|
||||
</script>
|
||||
|
||||
<svg {fill} viewBox="0 0 6 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="1" cy="1" r="1"/>
|
||||
<circle cx="4.5" cy="1" r="1"/>
|
||||
<circle cx="1" cy="4.5" r="1"/>
|
||||
<circle cx="4.5" cy="4.5" r="1"/>
|
||||
<circle cx="1" cy="8" r="1"/>
|
||||
<circle cx="4.5" cy="8" r="1"/>
|
||||
<circle cx="1" cy="11.5" r="1"/>
|
||||
<circle cx="4.5" cy="11.5" r="1"/>
|
||||
<circle cx="1" cy="15" r="1"/>
|
||||
<circle cx="4.5" cy="15" r="1"/>
|
||||
</svg>
|
||||
@ -0,0 +1,9 @@
|
||||
<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="M14.4,8c0,3.5-2.9,6.4-6.4,6.4c-3.5,0-6.4-2.9-6.4-6.4c0-3.5,2.9-6.4,6.4-6.4c0.1-0.4,0.3-0.8,0.5-1.2c-0.2,0-0.3,0-0.5,0 C3.8,0.4,0.4,3.8,0.4,8c0,4.2,3.4,7.6,7.6,7.6s7.6-3.4,7.6-7.6c0-0.2,0-0.3,0-0.5C15.2,7.7,14.8,7.9,14.4,8z"/>
|
||||
<circle cx="13" cy="3" r="3"/>
|
||||
</svg>
|
||||
Loading…
Reference in New Issue
Block a user