mirror of
https://github.com/hcengineering/platform.git
synced 2024-12-23 19:44:59 +03:00
Add ColorsPopup (#247)
Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov
GitHub
parent
fe2d8176f1
commit
0cbd50b4ad
@ -0,0 +1,50 @@
|
||||
<!--
|
||||
// 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 { createEventDispatcher } from 'svelte'
|
||||
import PopupDialog from './PopupDialog.svelte'
|
||||
|
||||
export let colors: string[] = ['#A5D179', '#77C07B', '#60B96E', '#45AEA3', '#46CBDE', '#47BDF6',
|
||||
'#5AADF6', '#73A6CD', '#B977CB', '#7C6FCD', '#6F7BC5', '#F28469']
|
||||
export let columns: number = 5
|
||||
|
||||
const dispatch = createEventDispatcher()
|
||||
</script>
|
||||
|
||||
<PopupDialog label={'CHOOSE A COLOR'}>
|
||||
<div class="color-grid" style="grid-template-columns: repeat({columns}, 1.5rem)">
|
||||
{#each colors as color}
|
||||
<div class="color" style="background-color: {color}" on:click={() => { dispatch('close', color) }} />
|
||||
{/each}
|
||||
</div>
|
||||
</PopupDialog>
|
||||
|
||||
<style lang="scss">
|
||||
.color-grid {
|
||||
display: grid;
|
||||
grid-auto-rows: 1.5rem;
|
||||
gap: 1rem;
|
||||
|
||||
.color {
|
||||
border: 1px solid transparent;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover { border-color: var(--theme-button-border-focused); }
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -16,12 +16,13 @@
|
||||
|
||||
<script lang="ts">
|
||||
import type { Ref, SpaceWithStates, State } from '@anticrm/core'
|
||||
import { CircleButton, IconAdd, Label, IconMoreH, ActionIcon } from '@anticrm/ui'
|
||||
import { CircleButton, IconAdd, Label, IconMoreH, ActionIcon, showPopup, ScrollBox } from '@anticrm/ui'
|
||||
import { createQuery, getClient, AttributeEditor } 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 ColorsPopup from './ColorsPopup.svelte'
|
||||
|
||||
import core from '@anticrm/core'
|
||||
|
||||
@ -118,34 +119,40 @@
|
||||
<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'} />
|
||||
<div on:click={addStatus}><CircleButton icon={IconAdd} size={'medium'} /></div>
|
||||
</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={() => {
|
||||
move(i)
|
||||
}}
|
||||
on:dragstart={() => {
|
||||
dragStateInitialPosition = selected = i
|
||||
dragState = states[i]._id
|
||||
}}
|
||||
on:dragend={() => {
|
||||
selected = undefined
|
||||
}}
|
||||
>
|
||||
<div class="bar"><Circles /></div>
|
||||
<div class="color" style="background-color: {state.color}" />
|
||||
<div class="flex-grow caption-color"><AttributeEditor maxWidth="20rem" _class={core.class.State} object={state} key="title"/></div>
|
||||
<div class="tool"><ActionIcon icon={IconMoreH} label={'More...'} size={'medium'} /></div>
|
||||
</div>
|
||||
{/if}
|
||||
{/each}
|
||||
<ScrollBox vertical stretch>
|
||||
<div class="flex-between states-header">
|
||||
<Label label={'ACTIVE STATUSES'} />
|
||||
<div on:click={addStatus}><CircleButton icon={IconAdd} size={'medium'} /></div>
|
||||
</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={() => {
|
||||
move(i)
|
||||
}}
|
||||
on:dragstart={() => {
|
||||
dragStateInitialPosition = selected = i
|
||||
dragState = states[i]._id
|
||||
}}
|
||||
on:dragend={() => {
|
||||
selected = undefined
|
||||
}}
|
||||
>
|
||||
<div class="bar"><Circles /></div>
|
||||
<div class="color" style="background-color: {state.color}"
|
||||
on:click={() => {
|
||||
showPopup(ColorsPopup, {}, elements[i], (result) => { if (result) state.color = result })
|
||||
}}
|
||||
/>
|
||||
<div class="flex-grow caption-color"><AttributeEditor maxWidth="20rem" _class={core.class.State} object={state} key="title"/></div>
|
||||
<div class="tool"><ActionIcon icon={IconMoreH} label={'More...'} size={'medium'} /></div>
|
||||
</div>
|
||||
{/if}
|
||||
{/each}
|
||||
</ScrollBox>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -217,6 +224,7 @@
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border-radius: .25rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
.tool {
|
||||
margin-left: 1rem;
|
||||
|
||||
@ -0,0 +1,66 @@
|
||||
<!--
|
||||
// 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 } from '@anticrm/platform'
|
||||
import { Label } from '@anticrm/ui'
|
||||
|
||||
export let label: IntlString
|
||||
</script>
|
||||
|
||||
<div class="card-container">
|
||||
<div class="card-bg" />
|
||||
<div class="overflow-label label"><Label {label} /></div>
|
||||
<div class="content"><slot /></div>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.card-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 1rem 1.5rem 1.25rem;
|
||||
border-radius: .75rem;
|
||||
|
||||
.label {
|
||||
flex-shrink: 0;
|
||||
margin-bottom: 1.25rem;
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
font-size: .75rem;
|
||||
color: var(--theme-content-trans-color);
|
||||
}
|
||||
|
||||
.content {
|
||||
flex-shrink: 0;
|
||||
flex-grow: 1;
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
.card-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: var(--theme-card-bg);
|
||||
border-radius: .75rem;
|
||||
backdrop-filter: blur(24px);
|
||||
box-shadow: var(--theme-card-shadow);
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user