hcengineering/platform
1
0
Fork 0
mirror of https://github.com/hcengineering/platform.git synced 2024-12-23 03:22:19 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Update Kanban and Setting layouts (#651)

Browse Source 
Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov 2021-12-16 12:08:09 +03:00 committed by GitHub
parent 2a6f5f7390
commit 3be74a1751
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
24 changed files with 491 additions and 372 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
packages/theme/styles/_layouts.scss
View File

@ -193,14 +193,19 @@ p:last-child { margin-block-end: 0; }
.ml-6 { margin-left: 1.5rem; }
.mr-1 { margin-right: .25rem; }
.mr-2 { margin-right: .5rem; }
.mr-3 { margin-right: .75rem; }
.mr-4 { margin-right: 1rem; }
.mr-6 { margin-right: 1.5rem; }
.mr-8 { margin-right: 2rem; }
.mt-2 { margin-top: .5rem; }
.mt-3 { margin-top: .75rem; }
.mt-4 { margin-top: 1rem; }
.mt-5 { margin-top: 1.25rem; }
.mt-9 { margin-top: 2.25rem; }
.mt-10 { margin-top: 2.5rem; }
.mt-14 { margin-top: 3.5rem; }
.mb-1 { margin-bottom: .25rem; }
.mb-3 { margin-bottom: .75rem; }
.mb-4 { margin-bottom: 1rem; }
/* --------- */
@ -244,7 +249,7 @@ p:last-child { margin-block-end: 0; }
.square-36 { width: 2.25rem; height: 2.25rem; }
/* --------- */
.svg-xsmall {
.svg-x-small {
width: 0.857em;
height: 0.857em;
}
@ -300,6 +305,13 @@ a.no-line {
color: var(--theme-caption-color);
user-select: none;
}
.trans-title {
text-transform: uppercase;
font-weight: 600;
font-size: .75rem;
color: var(--theme-content-trans-color);
user-select: none;
}
.fs-bold { font-weight: 500; }
.over-underline {
@ -342,6 +354,11 @@ a.no-line {
}
}
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }
.scroll-m-10::-webkit-scrollbar-track { margin: 2.5rem; }
/* Backgrounds & Colors */
.background-theme-bg-color { background-color: var(--theme-bg-color); }
.background-highlight-red { background-color: var(--highlight-red); }

4
packages/ui/src/components/Icon.svelte
View File

@ -17,7 +17,7 @@
import { AnySvelteComponent } from '../types';
export let icon: Asset | AnySvelteComponent
export let size: 'xsmall' | 'small' | 'medium' | 'large'
export let size: 'x-small' | 'small' | 'medium' | 'large'
export let fill = 'currentColor'
export let filled: boolean = false
@ -42,7 +42,7 @@
{/if}
<style lang="scss">
.xsmall {
.x-small {
width: 0.857em;
height: 0.857em;
}

8
plugins/lead-assets/assets/icons.svg
View File

@ -1,11 +1,11 @@
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="funnel" viewBox="0 0 16 16">
<path d="M14,9.6h-3.2l0.4-3.2H14c0.3,0,0.6-0.3,0.6-0.6S14.3,5.2,14,5.2h-2.7l0.4-3.7c0-0.3-0.2-0.6-0.5-0.7 c-0.3,0-0.6,0.2-0.7,0.5l-0.4,3.8H6.9l0.4-3.7c0-0.3-0.2-0.6-0.5-0.7c-0.3,0-0.6,0.2-0.7,0.5L5.7,5.2H2.3C2,5.2,1.7,5.5,1.7,5.8 S2,6.4,2.3,6.4h3.2L5.2,9.6H2.3c-0.3,0-0.6,0.3-0.6,0.6s0.3,0.6,0.6,0.6h2.7l-0.4,3.7c0,0.3,0.2,0.6,0.5,0.7c0,0,0,0,0.1,0 c0.3,0,0.6-0.2,0.6-0.5l0.4-3.8h3.2L9,14.5c0,0.3,0.2,0.6,0.5,0.7c0,0,0,0,0.1,0c0.3,0,0.6-0.2,0.6-0.5l0.4-3.8H14 c0.3,0,0.6-0.3,0.6-0.6S14.3,9.6,14,9.6z M6.4,9.6l0.4-3.2h3.2L9.6,9.6H6.4z"/>
<path d="M13.2,9.4h-2.8l0.3-2.7h2.5c0.3,0,0.5-0.2,0.5-0.5s-0.2-0.5-0.5-0.5h-2.4l0.4-3.2c0-0.3-0.2-0.5-0.4-0.6 c-0.3,0-0.5,0.2-0.6,0.4L9.8,5.6H7.1l0.4-3.2c0-0.3-0.2-0.5-0.4-0.6c-0.3,0-0.5,0.2-0.6,0.4L6.1,5.6H3.2c-0.3,0-0.5,0.2-0.5,0.5 s0.2,0.5,0.5,0.5h2.8L5.6,9.4H3.2c-0.3,0-0.5,0.2-0.5,0.5s0.2,0.5,0.5,0.5h2.4l-0.4,3.2c0,0.3,0.2,0.5,0.4,0.6c0,0,0,0,0.1,0 c0.3,0,0.5-0.2,0.5-0.4l0.4-3.3h2.7l-0.4,3.2c0,0.3,0.2,0.5,0.4,0.6c0,0,0,0,0.1,0c0.3,0,0.5-0.2,0.5-0.4l0.4-3.3h2.9 c0.3,0,0.5-0.2,0.5-0.5S13.4,9.4,13.2,9.4z M6.6,9.4l0.3-2.7h2.7L9.4,9.4H6.6z"/>
</symbol>
<symbol id="leadapplication" viewBox="0 0 16 16">
<path d="M14,9.6h-3.2l0.4-3.2H14c0.3,0,0.6-0.3,0.6-0.6S14.3,5.2,14,5.2h-2.7l0.4-3.7c0-0.3-0.2-0.6-0.5-0.7 c-0.3,0-0.6,0.2-0.7,0.5l-0.4,3.8H6.9l0.4-3.7c0-0.3-0.2-0.6-0.5-0.7c-0.3,0-0.6,0.2-0.7,0.5L5.7,5.2H2.3C2,5.2,1.7,5.5,1.7,5.8 S2,6.4,2.3,6.4h3.2L5.2,9.6H2.3c-0.3,0-0.6,0.3-0.6,0.6s0.3,0.6,0.6,0.6h2.7l-0.4,3.7c0,0.3,0.2,0.6,0.5,0.7c0,0,0,0,0.1,0 c0.3,0,0.6-0.2,0.6-0.5l0.4-3.8h3.2L9,14.5c0,0.3,0.2,0.6,0.5,0.7c0,0,0,0,0.1,0c0.3,0,0.6-0.2,0.6-0.5l0.4-3.8H14 c0.3,0,0.6-0.3,0.6-0.6S14.3,9.6,14,9.6z M6.4,9.6l0.4-3.2h3.2L9.6,9.6H6.4z"/>
<path d="M13.2,9.4h-2.8l0.3-2.7h2.5c0.3,0,0.5-0.2,0.5-0.5s-0.2-0.5-0.5-0.5h-2.4l0.4-3.2c0-0.3-0.2-0.5-0.4-0.6 c-0.3,0-0.5,0.2-0.6,0.4L9.8,5.6H7.1l0.4-3.2c0-0.3-0.2-0.5-0.4-0.6c-0.3,0-0.5,0.2-0.6,0.4L6.1,5.6H3.2c-0.3,0-0.5,0.2-0.5,0.5 s0.2,0.5,0.5,0.5h2.8L5.6,9.4H3.2c-0.3,0-0.5,0.2-0.5,0.5s0.2,0.5,0.5,0.5h2.4l-0.4,3.2c0,0.3,0.2,0.5,0.4,0.6c0,0,0,0,0.1,0 c0.3,0,0.5-0.2,0.5-0.4l0.4-3.3h2.7l-0.4,3.2c0,0.3,0.2,0.5,0.4,0.6c0,0,0,0,0.1,0c0.3,0,0.5-0.2,0.5-0.4l0.4-3.3h2.9 c0.3,0,0.5-0.2,0.5-0.5S13.4,9.4,13.2,9.4z M6.6,9.4l0.3-2.7h2.7L9.4,9.4H6.6z"/>
</symbol>
<symbol id="lead" viewBox="0 0 16 16">
<path d="M14,9.6h-3.2l0.4-3.2H14c0.3,0,0.6-0.3,0.6-0.6S14.3,5.2,14,5.2h-2.7l0.4-3.7c0-0.3-0.2-0.6-0.5-0.7 c-0.3,0-0.6,0.2-0.7,0.5l-0.4,3.8H6.9l0.4-3.7c0-0.3-0.2-0.6-0.5-0.7c-0.3,0-0.6,0.2-0.7,0.5L5.7,5.2H2.3C2,5.2,1.7,5.5,1.7,5.8 S2,6.4,2.3,6.4h3.2L5.2,9.6H2.3c-0.3,0-0.6,0.3-0.6,0.6s0.3,0.6,0.6,0.6h2.7l-0.4,3.7c0,0.3,0.2,0.6,0.5,0.7c0,0,0,0,0.1,0 c0.3,0,0.6-0.2,0.6-0.5l0.4-3.8h3.2L9,14.5c0,0.3,0.2,0.6,0.5,0.7c0,0,0,0,0.1,0c0.3,0,0.6-0.2,0.6-0.5l0.4-3.8H14 c0.3,0,0.6-0.3,0.6-0.6S14.3,9.6,14,9.6z M6.4,9.6l0.4-3.2h3.2L9.6,9.6H6.4z"/>
<symbol id="lead" viewBox="0 0 16 16">
<path d="M13.2,9.4h-2.8l0.3-2.7h2.5c0.3,0,0.5-0.2,0.5-0.5s-0.2-0.5-0.5-0.5h-2.4l0.4-3.2c0-0.3-0.2-0.5-0.4-0.6 c-0.3,0-0.5,0.2-0.6,0.4L9.8,5.6H7.1l0.4-3.2c0-0.3-0.2-0.5-0.4-0.6c-0.3,0-0.5,0.2-0.6,0.4L6.1,5.6H3.2c-0.3,0-0.5,0.2-0.5,0.5 s0.2,0.5,0.5,0.5h2.8L5.6,9.4H3.2c-0.3,0-0.5,0.2-0.5,0.5s0.2,0.5,0.5,0.5h2.4l-0.4,3.2c0,0.3,0.2,0.5,0.4,0.6c0,0,0,0,0.1,0 c0.3,0,0.5-0.2,0.5-0.4l0.4-3.3h2.7l-0.4,3.2c0,0.3,0.2,0.5,0.4,0.6c0,0,0,0,0.1,0c0.3,0,0.5-0.2,0.5-0.4l0.4-3.3h2.9 c0.3,0,0.5-0.2,0.5-0.5S13.4,9.4,13.2,9.4z M6.6,9.4l0.3-2.7h2.7L9.4,9.4H6.6z"/>
</symbol>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

10
plugins/lead-resources/src/components/TemplatesIcon.svelte
View File

@ -3,16 +3,12 @@
import lead from '@anticrm/lead'
</script>
<div class="root">
<Icon icon={lead.icon.LeadApplication} size="xsmall" />
<div class="flex-center template-icon">
<Icon icon={lead.icon.LeadApplication} size="small" />
</div>
<style lang="scss">
.root {
display: flex;
align-items: center;
justify-content: center;
.template-icon {
width: 100%;
height: 100%;
color: #fff;

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

@ -2,16 +2,12 @@
import VacancyIcon from './icons/Vacancy.svelte'
</script>
<div class="root">
<VacancyIcon size="xsmall" />
<div class="flex-center template-icon">
<VacancyIcon size="small" />
</div>
<style lang="scss">
.root {
display: flex;
align-items: center;
justify-content: center;
.template-icon {
width: 100%;
height: 100%;
color: #fff;

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

@ -15,11 +15,11 @@
-->
<script lang="ts">
export let size: 'xsmall' | 'small' | 'medium' | 'large'
export let size: 'x-small' | 'small' | 'medium' | 'large'
const fill: string = 'currentColor'
</script>
<svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path d="M12.9,2.1h-1.5C11.2,0.9,10.2,0,9,0H7C5.8,0,4.8,0.9,4.6,2.1H3.1C1.4,2.1,0,3.5,0,5.2V8c0,0.2,0.1,0.5,0.3,0.6 c2.1,1.3,4.8,2,7.7,2c2.8,0,5.6-0.7,7.7-2C15.9,8.4,16,8.2,16,8V5.2C16,3.5,14.6,2.1,12.9,2.1z M7,1.3h2c0.5,0,0.9,0.3,1,0.7H6 C6.1,1.6,6.5,1.3,7,1.3z M14.7,7.6c-1.9,1-4.2,1.6-6.7,1.6c-2.4,0-4.8-0.6-6.7-1.6V5.2c0-1,0.8-1.8,1.8-1.8h9.8 c1,0,1.8,0.8,1.8,1.8V7.6z"/>
<path d="M15.4,10.2c-0.4,0-0.7,0.2-0.7,0.6l-0.1,2c-0.1,1-0.9,1.8-1.9,1.8H3.4c-1,0-1.8-0.8-1.9-1.8l-0.2-2 c0-0.4-0.3-0.6-0.7-0.6C0.3,10.3,0,10.6,0,11l0.2,2c0.1,1.7,1.5,3,3.2,3h9.2c1.7,0,3.1-1.3,3.2-3l0.1-2 C16,10.6,15.7,10.3,15.4,10.2z"/>
<path d="M11.7,3.6h-1.1C10.4,2.7,9.7,2,8.8,2H7.2C6.3,2,5.6,2.7,5.4,3.6H4.3C3,3.6,2,4.6,2,5.9V8c0,0.2,0.1,0.3,0.2,0.4 C3.8,9.4,5.9,9.9,8,9.9c2.1,0,4.2-0.5,5.8-1.5C13.9,8.3,14,8.2,14,8V5.9C14,4.6,13,3.6,11.7,3.6z M7.2,3h1.5c0.4,0,0.6,0.2,0.8,0.6 H6.5C6.6,3.2,6.9,3,7.2,3z M13,7.7c-1.4,0.8-3.2,1.2-5,1.2c-1.8,0-3.6-0.4-5-1.2V5.9c0-0.7,0.6-1.3,1.3-1.3h7.4 c0.7,0,1.3,0.6,1.3,1.3V7.7z"/>
<path d="M13.5,9.7c-0.3,0-0.5,0.2-0.5,0.5l-0.1,1.5c-0.1,0.8-0.7,1.3-1.4,1.3H4.5c-0.7,0-1.4-0.6-1.4-1.3L3,10.1 c0-0.3-0.3-0.5-0.5-0.5C2.2,9.7,2,9.9,2,10.2l0.1,1.5C2.2,13,3.3,14,4.5,14h6.9c1.3,0,2.3-1,2.4-2.3l0.1-1.5 C14,9.9,13.8,9.7,13.5,9.7z"/>
</svg>

5
plugins/setting-assets/assets/icons.svg
View File

@ -19,9 +19,8 @@
<path d="M4,7.7h0.8c0.3,0,0.6-0.3,0.6-0.6S5.1,6.5,4.8,6.5H4c-0.3,0-0.6,0.3-0.6,0.6S3.6,7.7,4,7.7z"/>
<path d="M6.4,9.7H4c-0.3,0-0.6,0.3-0.6,0.6s0.3,0.6,0.6,0.6h2.4c0.3,0,0.6-0.3,0.6-0.6S6.7,9.7,6.4,9.7z"/>
</symbol>
<symbol id="statuses" viewBox="0 0 16 16">
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.6974 5.2801C13.0712 3.98287 12.0184 2.93015 10.7212 2.30405C10.4726 2.53359 10.2795 2.82225 10.1641 3.14771C11.3555 3.68588 12.3155 4.64586 12.8537 5.83725C13.1792 5.72184 13.4678 5.52868 13.6974 5.2801ZM7.69387 2.68004C4.84738 2.81598 2.5813 5.16687 2.5813 8.04703C2.5813 11.0146 4.98696 13.4202 7.9545 13.4202C10.8347 13.4202 13.1857 11.154 13.3215 8.30742C13.6748 8.21476 14.0115 8.08119 14.3263 7.91209C14.3272 7.95696 14.3277 8.00193 14.3277 8.04703C14.3277 11.5668 11.4743 14.4202 7.9545 14.4202C4.43468 14.4202 1.5813 11.5668 1.5813 8.04703C1.5813 4.52721 4.43468 1.67383 7.9545 1.67383C7.9995 1.67383 8.04438 1.67429 8.08916 1.67522C7.92007 1.99002 7.78652 2.32675 7.69387 2.68004Z"/>
<ellipse cx="12.1497" cy="3.85107" rx="2.51709" ry="2.51708"/>
<path d="M13.3,8.3c-0.1,2.8-2.5,5.1-5.4,5.1C5,13.4,2.6,11,2.6,8c0-2.9,2.3-5.2,5.1-5.4c0.1-0.4,0.2-0.7,0.4-1c0,0-0.1,0-0.1,0 C4.4,1.7,1.6,4.5,1.6,8c0,3.5,2.9,6.4,6.4,6.4s6.4-2.9,6.4-6.4c0,0,0-0.1,0-0.1C14,8.1,13.7,8.2,13.3,8.3z"/>
<ellipse cx="12.1" cy="3.9" rx="2.5" ry="2.5"/>
</symbol>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.7 KiB

After

Width:  |  Height:  |  Size: 3.2 KiB

22
plugins/setting-resources/src/components/Integrations.svelte
View File

@ -18,6 +18,7 @@
import setting from '@anticrm/setting'
import type { Integration, IntegrationType } from '@anticrm/setting'
import PluginCard from './PluginCard.svelte'
import { Icon, Label } from '@anticrm/ui'
const accountId = getCurrentAccount()._id
const typeQuery = createQuery()
@ -30,13 +31,26 @@
integrationQuery.query(setting.class.Integration, { space: accountId as string as Ref<Space> }, (res) => (integrations = res))
</script>
<div class="cards-container">
{#each integrationTypes as integrationType (integrationType._id)}
<PluginCard integration={integrations.find((p) => p.type === integrationType._id)} {integrationType} />
{/each}
<div class="flex-col h-full">
<div class="flex-row-center header">
<div class="content-color mr-3"><Icon icon={setting.icon.Integrations} size={'medium'} /></div>
<div class="fs-title"><Label label={setting.string.Integrations}/></div>
</div>
<div class="cards-container">
{#each integrationTypes as integrationType (integrationType._id)}
<PluginCard integration={integrations.find((p) => p.type === integrationType._id)} {integrationType} />
{/each}
</div>
</div>
<style lang="scss">
.header {
padding: 0 1.75rem 0 2.5rem;
height: 4rem;
min-height: 4rem;
border-bottom: 1px solid var(--theme-menu-divider);
}
.cards-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(20rem, auto));

49
plugins/setting-resources/src/components/Privacy.svelte Normal file
View File

@ -0,0 +1,49 @@
<!--
// 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 { getCurrentAccount, Ref, Space } from '@anticrm/core';
import { createQuery } from '@anticrm/presentation'
import setting from '@anticrm/setting'
import type { Integration, IntegrationType } from '@anticrm/setting'
import PluginCard from './PluginCard.svelte'
import { Icon, Label } from '@anticrm/ui'
// const accountId = getCurrentAccount()._id
// const typeQuery = createQuery()
// const integrationQuery = createQuery()
// let integrations: Integration[] = []
// let integrationTypes: IntegrationType[] = []
// typeQuery.query(setting.class.IntegrationType, {}, (res) => (integrationTypes = res))
// integrationQuery.query(setting.class.Integration, { space: accountId as string as Ref<Space> }, (res) => (integrations = res))
</script>
<div class="flex-col h-full">
<div class="flex-row-center header">
<div class="content-color mr-3"><Icon icon={setting.icon.Privacy} size={'medium'} /></div>
<div class="fs-title"><Label label={setting.string.Privacy}/></div>
</div>
</div>
<style lang="scss">
.header {
padding: 0 1.75rem 0 2.5rem;
height: 4rem;
min-height: 4rem;
border-bottom: 1px solid var(--theme-menu-divider);
}
</style>

49
plugins/setting-resources/src/components/Setting.svelte Normal file
View File

@ -0,0 +1,49 @@
<!--
// 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 { getCurrentAccount, Ref, Space } from '@anticrm/core';
import { createQuery } from '@anticrm/presentation'
import setting from '@anticrm/setting'
import type { Integration, IntegrationType } from '@anticrm/setting'
import PluginCard from './PluginCard.svelte'
import { Icon, Label } from '@anticrm/ui'
// const accountId = getCurrentAccount()._id
// const typeQuery = createQuery()
// const integrationQuery = createQuery()
// let integrations: Integration[] = []
// let integrationTypes: IntegrationType[] = []
// typeQuery.query(setting.class.IntegrationType, {}, (res) => (integrationTypes = res))
// integrationQuery.query(setting.class.Integration, { space: accountId as string as Ref<Space> }, (res) => (integrations = res))
</script>
<div class="flex-col h-full">
<div class="flex-row-center header">
<div class="content-color mr-3"><Icon icon={setting.icon.Setting} size={'medium'} /></div>
<div class="fs-title"><Label label={setting.string.Setting}/></div>
</div>
</div>
<style lang="scss">
.header {
padding: 0 1.75rem 0 2.5rem;
height: 4rem;
min-height: 4rem;
border-bottom: 1px solid var(--theme-menu-divider);
}
</style>

49
plugins/setting-resources/src/components/Support.svelte Normal file
View File

@ -0,0 +1,49 @@
<!--
// 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 { getCurrentAccount, Ref, Space } from '@anticrm/core';
import { createQuery } from '@anticrm/presentation'
import setting from '@anticrm/setting'
import type { Integration, IntegrationType } from '@anticrm/setting'
import PluginCard from './PluginCard.svelte'
import { Icon, Label } from '@anticrm/ui'
// const accountId = getCurrentAccount()._id
// const typeQuery = createQuery()
// const integrationQuery = createQuery()
// let integrations: Integration[] = []
// let integrationTypes: IntegrationType[] = []
// typeQuery.query(setting.class.IntegrationType, {}, (res) => (integrationTypes = res))
// integrationQuery.query(setting.class.Integration, { space: accountId as string as Ref<Space> }, (res) => (integrations = res))
</script>
<div class="flex-col h-full">
<div class="flex-row-center header">
<div class="content-color mr-3"><Icon icon={setting.icon.Support} size={'medium'} /></div>
<div class="fs-title"><Label label={setting.string.Support}/></div>
</div>
</div>
<style lang="scss">
.header {
padding: 0 1.75rem 0 2.5rem;
height: 4rem;
min-height: 4rem;
border-bottom: 1px solid var(--theme-menu-divider);
}
</style>

49
plugins/setting-resources/src/components/Terms.svelte Normal file
View File

@ -0,0 +1,49 @@
<!--
// 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 { getCurrentAccount, Ref, Space } from '@anticrm/core';
import { createQuery } from '@anticrm/presentation'
import setting from '@anticrm/setting'
import type { Integration, IntegrationType } from '@anticrm/setting'
import PluginCard from './PluginCard.svelte'
import { Icon, Label } from '@anticrm/ui'
// const accountId = getCurrentAccount()._id
// const typeQuery = createQuery()
// const integrationQuery = createQuery()
// let integrations: Integration[] = []
// let integrationTypes: IntegrationType[] = []
// typeQuery.query(setting.class.IntegrationType, {}, (res) => (integrationTypes = res))
// integrationQuery.query(setting.class.Integration, { space: accountId as string as Ref<Space> }, (res) => (integrations = res))
</script>
<div class="flex-col h-full">
<div class="flex-row-center header">
<div class="content-color mr-3"><Icon icon={setting.icon.Terms} size={'medium'} /></div>
<div class="fs-title"><Label label={setting.string.Terms}/></div>
</div>
</div>
<style lang="scss">
.header {
padding: 0 1.75rem 0 2.5rem;
height: 4rem;
min-height: 4rem;
border-bottom: 1px solid var(--theme-menu-divider);
}
</style>

24
plugins/setting-resources/src/components/icons/ArrowRight.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 = 'currentColor'
</script>
<svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<polygon points="6.4,14.4 5.6,13.6 11.3,8 5.6,2.4 6.4,1.6 12.7,8 "/>
</svg>

101
plugins/setting-resources/src/components/statuses/Folders.svelte
View File

@ -19,6 +19,7 @@
import { Label, Component } from '@anticrm/ui'
import task, { KanbanTemplateSpace } from '@anticrm/task'
import setting from '@anticrm/setting'
import IconArrowRight from '../icons/ArrowRight.svelte'
export let folder: KanbanTemplateSpace | undefined
@ -35,86 +36,52 @@
}
</script>
<div class="root flex-col w-full">
<div class="header">
<Label label={setting.string.Folders}/>
</div>
<div class="content">
{#each folders as f (f._id)}
<div class="item" class:selected={f._id === folder?._id} on:click={() => select(f)}>
<div class="item-icon">
<Component is={f.icon}/>
<div class="flex-between trans-title header mb-3">
<Label label={setting.string.Folders}/>
</div>
<div class="flex-col overflow-y-auto">
{#each folders as f (f._id)}
<div class="flex-between item" class:selected={f._id === folder?._id} on:click={() => select(f)}>
<div class="icon mr-4">
<Component is={f.icon}/>
</div>
<div class="flex-grow flex-col">
<div class="fs-title overflow-label">
{f.name}
</div>
<div class="item-content">
<div class="item-name">
{f.name}
</div>
<div class="item-description">
{f.description}
</div>
<div class="small-text content-dark-color overflow-label">
{f.description}
</div>
</div>
{/each}
</div>
{#if f._id === folder?._id}
<div class="caption-color ml-4"><IconArrowRight size={'small'} /></div>
{/if}
</div>
{/each}
</div>
<style lang="scss">
.root {
gap: 1rem;
}
.header {
display: flex;
align-items: center;
font-weight: 600;
text-transform: uppercase;
color: var(--theme-content-trans-color);
font-size: 0.75rem;
height: 1.75rem;
}
.content {
display: flex;
flex-direction: column;
overflow-y: auto;
}
.header { min-height: 1.75rem; }
.item {
display: flex;
padding: 20px;
padding: 1.25rem 1rem 1.25rem 1.25rem;
background-color: var(--theme-button-bg-enabled);
border: 1px solid var(--theme-bg-accent-color);
border-radius: .75rem;
cursor: pointer;
&:hover, &.selected {
background-color: var(--theme-button-bg-enabled);
border-radius: 12px;
&:hover { background-color: var(--theme-button-bg-hovered); }
&.selected {
background-color: var(--theme-button-bg-pressed);
border-color: var(--theme-bg-accent-color);
cursor: auto;
}
}
.item + .item { margin-top: .75rem; }
.item-icon {
width: 36px;
height: 36px;
.icon {
width: 2.25rem;
height: 2.25rem;
border-radius: 50%;
overflow: hidden;
margin-right: 1rem;
}
.item-content {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.item-name {
color: var(--theme-caption-color);
font-size: 1rem;
font-weight: 500;
}
.item-description {
color: var(--theme-content-dark-color);
}
</style>

75
plugins/setting-resources/src/components/statuses/ManageStatuses.svelte
View File

@ -51,21 +51,21 @@
}
</script>
<div class="root">
<div class="header">
<Icon icon={setting.icon.Statuses} size="large"/>
<Label label={setting.string.ManageStatuses}/>
<div class="flex-col h-full">
<div class="flex-row-center header">
<div class="content-color mr-3"><Icon icon={setting.icon.Statuses} size={'medium'} /></div>
<div class="fs-title"><Label label={setting.string.ManageStatuses}/></div>
</div>
<div class="content">
<div class="folders flex-stretch">
<div class="flex-row-top h-full overflow-x-auto scroll-m-10">
<div class="flex-col section">
<Folders bind:folder={folder}/>
</div>
<div class="templates flex-stretch">
<div class="flex-col section">
{#if folder !== undefined}
<Templates {folder} bind:template={template}/>
{/if}
</div>
<div class="statuses flex-stretch">
<div class="flex-col section max">
{#if template !== undefined}
<KanbanTemplateEditor kanban={template} on:delete={(e) => deleteState(e.detail)}/>
{/if}
@ -74,52 +74,25 @@
</div>
<style lang="scss">
.root {
display: flex;
flex-direction: column;
height: 100%;
}
.header {
display: flex;
align-items: center;
gap: 10px;
padding: 24px 42px;
border-bottom: 1px solid var(--theme-bg-accent-hover);
font-size: 1rem;
font-weight: 500;
color: var(--theme-caption-color);
padding: 0 1.75rem 0 2.5rem;
height: 4rem;
min-height: 4rem;
border-bottom: 1px solid var(--theme-menu-divider);
}
.content {
display: flex;
align-items: stretch;
.section {
overflow-y: auto;
padding: 1.75rem 2.5rem;
min-width: 25rem;
max-width: 25rem;
height: 100%;
width: 100%;
overflow: auto;
}
.folders {
width: 380px;
padding: 2rem 2.5rem 1rem;
flex-shrink: 0;
flex-grow: 0;
border-right: 1px solid var(--theme-bg-accent-hover);
}
.templates {
width: 380px;
padding: 2rem 2.5rem 1rem;
flex-shrink: 0;
flex-grow: 0;
border-right: 1px solid var(--theme-bg-accent-hover);
}
.statuses {
width: 100%;
padding: 2rem 2.5rem 1rem;
flex-grow: 1;
border-right: 1px solid var(--theme-menu-divider);
&.max {
width: 40rem;
max-width: 40rem;
border-right: none;
}
}
</style>

70
plugins/setting-resources/src/components/statuses/Templates.svelte
View File

@ -100,60 +100,38 @@
}
</script>
<div class="root flex-col w-full">
<div class="header">
<Label label={setting.string.Templates}/>
<CircleButton icon={IconAdd} size="medium" on:click={createTemplate} />
</div>
<div class="content">
{#each templates as t (t._id)}
<div class="item flex-between" class:selected={t._id === template?._id} on:click={() => select(t)}>
<AttributeEditor maxWidth="20rem" _class={task.class.KanbanTemplate} object={t} key="title"/>
<div class="tool hover-trans"
on:click|stopPropagation={(ev) => {
showPopup(ContextMenu, { object: t }, ev.target, () => {})
}}
>
<IconMoreH size="medium" />
</div>
<div class="flex-between trans-title mb-3">
<Label label={setting.string.Templates}/>
<CircleButton icon={IconAdd} size="medium" on:click={createTemplate} />
</div>
<div class="flex-col overflow-y-auto">
{#each templates as t (t._id)}
<div class="flex-between item" class:selected={t._id === template?._id} on:click={() => select(t)}>
<AttributeEditor maxWidth={'18rem'} _class={task.class.KanbanTemplate} object={t} key="title"/>
<div class="hover-trans"
on:click|stopPropagation={(ev) => {
showPopup(ContextMenu, { object: t }, ev.target, () => {})
}}
>
<IconMoreH size={'medium'} />
</div>
{/each}
</div>
</div>
{/each}
</div>
<style lang="scss">
.root {
gap: 1rem;
}
.header {
display: flex;
align-items: center;
justify-content: space-between;
font-weight: 600;
text-transform: uppercase;
color: var(--theme-content-trans-color);
font-size: 0.75rem;
height: 1.75rem;
}
.content {
display: flex;
flex-direction: column;
overflow-y: auto;
}
.item {
padding: 10px 20px;
min-height: 2.5rem;
padding: 0 1.25rem;
border: 1px solid transparent;
border-radius: 12px;
cursor: pointer;
&:hover, &.selected {
&:hover { background-color: var(--theme-bg-accent-color); }
&.selected {
background-color: var(--theme-button-bg-enabled);
border-radius: 12px;
border-color: var(--theme-bg-accent-color);
cursor: auto;
}
}
</style>

10
plugins/setting-resources/src/index.ts
View File

@ -13,14 +13,22 @@
// limitations under the License.
//
import Setting from './components/Setting.svelte'
import Integrations from './components/Integrations.svelte'
import ConnectEmail from './components/integrations/ConnectEmail.svelte'
import ManageStatuses from './components/statuses/ManageStatuses.svelte'
import Support from './components/Support.svelte'
import Privacy from './components/Privacy.svelte'
import Terms from './components/Terms.svelte'
import ConnectEmail from './components/integrations/ConnectEmail.svelte'
import IconGmail from './components/icons/Gmail.svelte'
export default async () => ({
component: {
Setting,
Integrations,
Support,
Privacy,
Terms,
ConnectEmail,
IconGmail,
ManageStatuses

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

@ -120,52 +120,3 @@
/>
</Grid>
</Card>
<style lang="scss">
.channels {
margin-top: 1.25rem;
span {
margin-left: 0.5rem;
}
}
.locations {
span {
margin-bottom: 0.125rem;
font-weight: 500;
font-size: 0.75rem;
color: var(--theme-content-accent-color);
}
.row {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 0.75rem;
color: var(--theme-caption-color);
}
}
.separator {
margin: 1rem 0;
height: 1px;
background-color: var(--theme-card-divider);
}
.resume {
margin-top: 1rem;
padding: 0.75rem;
background: rgba(255, 255, 255, 0.05);
border: 1px dashed rgba(255, 255, 255, 0.2);
border-radius: 0.5rem;
backdrop-filter: blur(10px);
&.solid {
border-style: solid;
}
}
// .resume a {
// font-size: .75rem;
// color: var(--theme-content-dark-color);
// &:hover { color: var(--theme-content-color); }
// }
</style>

12
plugins/task-resources/src/components/TemplatesIcon.svelte
View File

@ -1,18 +1,14 @@
<script lang="ts">
import { Icon } from '@anticrm/ui'
import task from '@anticrm/task'
import IconFolder from './icons/Folder.svelte'
</script>
<div class="root">
<Icon icon={task.icon.Task} size="xsmall" />
<div class="flex-center template-icon">
<Icon icon={IconFolder} size="small" />
</div>
<style lang="scss">
.root {
display: flex;
align-items: center;
justify-content: center;
.template-icon {
width: 100%;
height: 100%;
color: #fff;

24
plugins/task-resources/src/components/icons/Folder.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 = 'currentColor'
</script>
<svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path d="M14.5,6.7c0-2,0-3-0.7-3.8C13,2.2,12,2.2,10,2.2H6c-0.2,0-0.4,0-0.6,0l-0.1,0v0c-1.5,0-2.5,0.1-3.1,0.7 C1.5,3.6,1.5,4.7,1.5,6.7v2.7c0,2,0,3,0.7,3.8C3,13.8,4,13.8,6,13.8h4c2,0,3,0,3.8-0.7c0.5-0.5,0.7-1.3,0.7-2.4h0V10 c0-0.1,0-0.3,0-0.4c0-0.1,0-0.2,0-0.3V6.7z M13.1,3.6c0.4,0.4,0.4,1.3,0.4,3.1v0c-0.1-0.1-0.2-0.2-0.3-0.2c-0.6-0.3-1.2-0.3-2.5-0.3 c-0.7,0-1.1,0-1.3-0.1C9.2,6,9,5.9,8.9,5.8C8.7,5.6,8.5,5.3,8.2,4.6L7.6,3.5C7.6,3.3,7.5,3.3,7.4,3.2H10C11.7,3.2,12.6,3.2,13.1,3.6 z M10,12.8H6c-1.7,0-2.6,0-3.1-0.4C2.5,12,2.5,11.1,2.5,9.3V6.7c0-1.7,0-2.6,0.4-3.1c0.4-0.4,1.1-0.4,2.5-0.4l0.1,0 c0.5,0,1,0.3,1.2,0.8l0.6,1.1c0.4,0.7,0.6,1.1,0.9,1.4C8.4,6.7,8.7,6.9,9,7c0.4,0.2,0.9,0.2,1.7,0.2c1.1,0,1.7,0,2,0.2 c0.2,0.1,0.4,0.3,0.6,0.6c0.2,0.3,0.2,0.9,0.2,1.9c0,1.4,0,2.2-0.4,2.6C12.6,12.8,11.7,12.8,10,12.8z"/>
</svg>

2
plugins/task-resources/src/components/kanban/KanbanPanel.svelte
View File

@ -50,7 +50,7 @@
align-items: stretch;
width: 20rem;
height: 100%;
background-color: var(--theme-button-bg-enabled);
background-color: var(--theme-bg-color);
border: 1px solid var(--theme-bg-accent-color);
border-radius: .75rem;

6
plugins/task-resources/src/components/kanban/KanbanPanelEmpty.svelte
View File

@ -40,7 +40,7 @@
height: 100%;
padding: .75rem;
color: var(--theme-caption-color);
background-color: var(--theme-button-bg-enabled);
background-color: var(--theme-bg-color);
border: 1px dotted var(--theme-bg-accent-color);
border-radius: .75rem;
cursor: pointer;
@ -59,9 +59,7 @@
}
&:hover {
background-color: var(--theme-bg-accent-hover);
box-shadow: 0 .75rem 2.5rem rgba(0, 0, 0, .15);
background-color: var(--theme-bg-accent-color);
.circle .icon { opacity: 1; }
}
}

51
plugins/task-resources/src/components/kanban/KanbanView.svelte
View File

@ -209,7 +209,7 @@
{#if isDragging && wonState !== undefined && lostState !== undefined}
<div class="done-panel">
<div
class="done-item flex-center w-full"
class="flex-grow flex-center done-item"
class:hovered={hoveredDoneState === wonState._id}
on:dragenter={() => {
hoveredDoneState = wonState?._id
@ -219,11 +219,11 @@
}}
on:dragover|preventDefault={() => {}}
on:drop={onDone(wonState)}>
<div class="done-icon won"/>
<div class="done-icon won mr-2"/>
{wonState.title}
</div>
<div
class="done-item flex-center w-full"
class="flex-grow flex-center done-item"
class:hovered={hoveredDoneState === lostState._id}
on:dragenter={() => {
console.log('enter')
@ -235,7 +235,7 @@
}}
on:dragover|preventDefault={() => {}}
on:drop={onDone(lostState)}>
<div class="done-icon lost"/>
<div class="done-icon lost mr-2"/>
{lostState.title}
</div>
</div>
@ -245,6 +245,7 @@
<style lang="scss">
.kanban-container {
position: relative;
height: 100%;
}
.kanban-content {
@ -254,42 +255,42 @@
}
.done-panel {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
display: flex;
align-items: stretch;
align-items: center;
justify-content: stretch;
height: 4rem;
border-top: 1px solid var(--theme-bg-accent-hover);
padding: .5rem 2.5rem;
background-color: var(--theme-bg-color);
border-top: 1px solid var(--theme-dialog-divider);
}
.done-item {
gap: 0.5rem;
color: var(--theme-content-accent-color);
margin: 0.5rem 2.5rem;
height: 3rem;
color: var(--theme-caption-color);
border: 1px dashed transparent;
border-radius: .75rem;
&.hovered {
background-color: var(--theme-bg-selection);
border-radius: 12px;
border: 1px dashed var(--theme-bg-accent-hover);
background-color: var(--theme-button-bg-enabled);
border-color: var(--theme-dialog-divider);
}
}
.done-icon {
width: 0.5rem;
height: 0.5rem;
width: .5rem;
height: .5rem;
border-radius: 50%;
&.won {
background-color: #a5d179;
}
&.lost {
background-color: #f28469;
}
&.won { background-color: #27B166; }
&.lost { background-color: #F96E50; }
}
.scrollable {
height: 100%;
margin-bottom: 0.25rem;
margin-bottom: .25rem;
}
</style>

159
plugins/task-resources/src/components/state/StatesEditor.svelte
View File

@ -13,6 +13,7 @@
// See the License for the specific language governing permissions and
// limitations under the License.
-->
<script lang="ts">
import { Ref } from '@anticrm/core'
import { AttributeEditor, getClient } from '@anticrm/presentation'
@ -72,106 +73,90 @@
}
</script>
<div class="root w-full">
<div class="flex-col w-full">
<div class="flex-no-shrink flex-between states-header">
<Label label={'ACTIVE STATUSES'} />
<div on:click={onAdd}><CircleButton icon={IconAdd} size={'medium'} /></div>
</div>
<div class="content">
{#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)
<div class="flex-col">
<div class="flex-no-shrink flex-between trans-title">
<Label label={'ACTIVE STATUSES'} />
<div on:click={onAdd}><CircleButton icon={IconAdd} size={'medium'} /></div>
</div>
<div class="overflow-y-auto mt-3">
{#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={() => {
onMove(i)
}}
on:dragstart={() => {
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], onColorChange(state))
}}
on:drop|preventDefault={() => {
onMove(i)
}}
on:dragstart={() => {
selected = i
dragState = states[i]._id
}}
on:dragend={() => {
selected = undefined
/>
<div class="flex-grow caption-color"><AttributeEditor maxWidth={'20rem'} _class={state._class} object={state} key="title"/></div>
<div class="tool hover-trans"
on:click={(ev) => {
showPopup(StatusesPopup, { onDelete: () => dispatch('delete', { state }) }, ev.target, () => {})
}}
>
<div class="bar"><Circles /></div>
<div class="color" style="background-color: {state.color}"
on:click={() => {
showPopup(ColorsPopup, {}, elements[i], onColorChange(state))
}}
/>
<div class="flex-grow caption-color"><AttributeEditor maxWidth="20rem" _class={state._class} object={state} key="title"/></div>
<div class="tool hover-trans"
on:click={(ev) => {
showPopup(StatusesPopup, { onDelete: () => dispatch('delete', { state }) }, ev.target, () => {})
}}
>
<IconMoreH size={'medium'} />
</div>
<IconMoreH size={'medium'} />
</div>
{/if}
{/each}
</div>
</div>
{/if}
{/each}
</div>
<div class="flex-col w-full">
<div class="flex-no-shrink states-header">
<Label label={'DONE STATUS / WON'} />
</div>
<div class="content">
{#each wonStates as state, i}
{#if state}
<div class="states flex-row-center">
<div class="bar"/>
<div class="color" style="background-color: #a5d179"/>
<div class="flex-grow caption-color"><AttributeEditor maxWidth="20rem" _class={state._class} object={state} key="title"/></div>
</div>
{/if}
{/each}
</div>
</div>
<div class="flex-col mt-9">
<div class="flex-no-shrink trans-title">
<Label label={'DONE STATUS / WON'} />
</div>
<div class="flex-col w-full">
<div class="flex-no-shrink states-header">
<Label label={'DONE STATUS / LOST'} />
</div>
<div class="content">
{#each lostStates as state, i}
{#if state}
<div class="states flex-row-center">
<div class="bar"/>
<div class="color" style="background-color: #f28469"/>
<div class="flex-grow caption-color"><AttributeEditor maxWidth="20rem" _class={state._class} object={state} key="title"/></div>
</div>
{/if}
{/each}
</div>
<div class="overflow-y-auto mt-4">
{#each wonStates as state, i}
{#if state}
<div class="states flex-row-center">
<div class="bar"/>
<div class="color" style="background-color: #a5d179"/>
<div class="flex-grow caption-color"><AttributeEditor maxWidth={'20rem'} _class={state._class} object={state} key="title"/></div>
</div>
{/if}
{/each}
</div>
</div>
<div class="flex-col mt-9">
<div class="flex-no-shrink trans-title">
<Label label={'DONE STATUS / LOST'} />
</div>
<div class="overflow-y-auto mt-4">
{#each lostStates as state, i}
{#if state}
<div class="states flex-row-center">
<div class="bar"/>
<div class="color" style="background-color: #f28469"/>
<div class="flex-grow caption-color"><AttributeEditor maxWidth="20rem" _class={state._class} object={state} key="title"/></div>
</div>
{/if}
{/each}
</div>
</div>
<style lang="scss">
.root {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: minmax(1px, max-content) min-content min-content;
gap: 2rem;
height: 100%;
}
.states {
padding: .625rem 1rem;
color: #fff;
background-color: rgba(67, 67, 72, .3);
padding: .5rem 1rem;
color: var(--theme-caption-color);
background-color: var(--theme-button-bg-enabled);
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;
@ -189,8 +174,4 @@
.tool { margin-left: 1rem; }
}
.states + .states { margin-top: .5rem; }
.content {
overflow-y: auto;
}
</style>