mirror of
https://github.com/hcengineering/platform.git
synced 2024-11-22 03:14:40 +03:00
Update layouts, icons. CSS optimize (#926)
Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov
GitHub
parent
8c51a4ec2c
commit
f01f30fc1d
@ -21,12 +21,13 @@
|
||||
|
||||
export let object: Doc
|
||||
export let keys: (string|KeyedAttribute)[]
|
||||
export let showHeader: boolean = true
|
||||
</script>
|
||||
|
||||
<div class="flex-row-center text-sm">
|
||||
<div class="flex-row-center h-full text-sm">
|
||||
{#each keys as key}
|
||||
<div class="column">
|
||||
<AttributeBarEditor {key} {object} />
|
||||
<div class="flex-center h-9 column">
|
||||
<AttributeBarEditor {key} {object} {showHeader} />
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
@ -44,6 +44,14 @@
|
||||
.antiPanel-component { flex-grow: 1; }
|
||||
|
||||
/* Navigation */
|
||||
.antiNav-header {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 1.75rem;
|
||||
height: 4rem;
|
||||
}
|
||||
.antiNav-divider {
|
||||
flex-shrink: 0;
|
||||
margin: 1.5rem 0;
|
||||
|
||||
@ -20,24 +20,71 @@
|
||||
height: 100%;
|
||||
|
||||
.ac-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
padding: 0 1.75rem 0 2.5rem;
|
||||
height: 4rem;
|
||||
min-height: 4rem;
|
||||
border-bottom: 1px solid var(--theme-menu-divider);
|
||||
|
||||
&.short {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
&.full {
|
||||
display: grid;
|
||||
grid-template-columns: auto;
|
||||
grid-auto-flow: column;
|
||||
grid-auto-columns: min-content;
|
||||
gap: .75rem;
|
||||
align-items: center;
|
||||
}
|
||||
&.divide { border-bottom: 1px solid var(--theme-menu-divider); }
|
||||
|
||||
.ac-header__wrap-description {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
}
|
||||
.ac-header__wrap-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.ac-header__icon {
|
||||
margin-right: .75rem;
|
||||
margin-right: .5rem;
|
||||
color: var(--theme-content-color);
|
||||
}
|
||||
.ac-header__title {
|
||||
font-weight: 500;
|
||||
font-size: 1rem;
|
||||
color: var(--theme-caption-color);
|
||||
user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.ac-header__description {
|
||||
font-size: .75rem;
|
||||
color: var(--theme-content-dark-color);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.ac-header__icon-button {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
color: var(--theme-content-trans-color);
|
||||
background-color: transparent;
|
||||
border-radius: .5rem;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover { color: var(--theme-caption-color); }
|
||||
&.selected {
|
||||
color: var(--theme-content-accent-color);
|
||||
background-color: var(--theme-button-bg-enabled);
|
||||
cursor: default;
|
||||
&:hover { color: var(--theme-caption-color); }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ac-body {
|
||||
@ -86,7 +133,20 @@
|
||||
cursor: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__cards-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(20rem, auto));
|
||||
grid-auto-rows: minmax(12.5rem, auto);
|
||||
grid-gap: 1.5rem;
|
||||
padding: 3rem;
|
||||
}
|
||||
&__space-3 {
|
||||
flex-shrink: 0;
|
||||
min-height: .75rem;
|
||||
height: .75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ac-column__list-item + .ac-column__list-item { margin-top: .75rem; }
|
||||
|
||||
@ -29,10 +29,12 @@
|
||||
d="M4,0h8c2.2,0,4,1.8,4,4v8c0,2.2-1.8,4-4,4H4c-2.2,0-4-1.8-4-4V4C0,1.8,1.8,0,4,0z"
|
||||
/>
|
||||
{/if}
|
||||
{#if symbol === 'minus'}
|
||||
<rect class="check" class:primary x="4" y="7.4" width="8" height="1.2" />
|
||||
{:else}
|
||||
<polygon class="check" class:primary points="7.3,11.5 4,8.3 5,7.4 7.3,9.7 11.8,5.1 12.7,6.1 " />
|
||||
{#if checked}
|
||||
{#if symbol === 'minus'}
|
||||
<rect class="check" class:primary x="4" y="7.4" width="8" height="1.2" />
|
||||
{:else}
|
||||
<polygon class="check" class:primary points="7.3,11.5 4,8.3 5,7.4 7.3,9.7 11.8,5.1 12.7,6.1 " />
|
||||
{/if}
|
||||
{/if}
|
||||
</svg>
|
||||
</label>
|
||||
|
||||
@ -39,75 +39,31 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="contacts-header-container">
|
||||
<div class="header-container">
|
||||
<div class="flex-row-center">
|
||||
<span class="icon"><Icon icon={contact.icon.Person} size={'small'}/></span>
|
||||
<span class="label"><Label label={contact.string.Contacts}/></span>
|
||||
<div class="antiPanel-component filled">
|
||||
<div class="ac-header full">
|
||||
<div class="ac-header__wrap-title">
|
||||
<div class="ac-header__icon"><Icon icon={contact.icon.Person} size={'small'}/></div>
|
||||
<span class="ac-header__title"><Label label={contact.string.Contacts}/></span>
|
||||
</div>
|
||||
|
||||
<SearchEdit bind:value={search} on:change={() => {
|
||||
updateResultQuery(search)
|
||||
}}/>
|
||||
<Button icon={IconAdd} label={contact.string.Create} primary={true} size={'small'} on:click={(ev) => showCreateDialog(ev)}/>
|
||||
</div>
|
||||
|
||||
<SearchEdit bind:value={search} on:change={() => {
|
||||
updateResultQuery(search)
|
||||
}}/>
|
||||
<Button icon={IconAdd} label={contact.string.Create} primary={true} size={'small'} on:click={(ev) => showCreateDialog(ev)}/>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="antiPanel-component">
|
||||
<ScrollBox vertical stretch noShift>
|
||||
{#await tableDescriptor then descr}
|
||||
{#if descr}
|
||||
<Table
|
||||
_class={contact.class.Contact}
|
||||
config={descr.config}
|
||||
options={descr.options}
|
||||
query={ resultQuery }
|
||||
enableChecking
|
||||
/>
|
||||
{/if}
|
||||
{/await}
|
||||
<ScrollBox vertical stretch noShift>
|
||||
{#await tableDescriptor then descr}
|
||||
{#if descr}
|
||||
<Table
|
||||
_class={contact.class.Contact}
|
||||
config={descr.config}
|
||||
options={descr.options}
|
||||
query={ resultQuery }
|
||||
enableChecking
|
||||
/>
|
||||
{/if}
|
||||
{/await}
|
||||
</ScrollBox>
|
||||
</div>
|
||||
<div class="ac-body__space-3" />
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
padding-bottom: 1.25rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
.contacts-header-container {
|
||||
display: grid;
|
||||
grid-template-columns: auto;
|
||||
grid-auto-flow: column;
|
||||
grid-auto-columns: min-content;
|
||||
gap: .75rem;
|
||||
align-items: center;
|
||||
padding: 0 1.75rem 0 2.5rem;
|
||||
height: 4rem;
|
||||
min-height: 4rem;
|
||||
|
||||
.header-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
|
||||
.icon {
|
||||
margin-right: .5rem;
|
||||
opacity: .6;
|
||||
}
|
||||
.label {
|
||||
flex-grow: 1;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
max-width: 35rem;
|
||||
font-weight: 500;
|
||||
font-size: 1rem;
|
||||
color: var(--theme-caption-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,21 +1,14 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
|
||||
<symbol id="inventory" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M13.1716 3H9C7.11438 3 6.17157 3 5.58579 3.58579C5 4.17157 5 5.11438 5 7V17C5 18.8856 5 19.8284 5.58579 20.4142C6.17157 21 7.11438 21 9 21H15C16.8856 21 17.8284 21 18.4142 20.4142C19 19.8284 19 18.8856 19 17V8.82843C19 8.41968 19 8.2153 18.9239 8.03153C18.8478 7.84776 18.7032 7.70324 18.4142 7.41421L14.5858 3.58579C14.2968 3.29676 14.1522 3.15224 13.9685 3.07612C13.7847 3 13.5803 3 13.1716 3Z" stroke="currentColor" stroke-width="1.3"/>
|
||||
<path d="M9 13L15 13" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/>
|
||||
<path d="M9 17L13 17" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/>
|
||||
<path d="M13 3V7C13 7.94281 13 8.41421 13.2929 8.70711C13.5858 9 14.0572 9 15 9H19" stroke="currentColor" stroke-width="1.3"/></symbol>
|
||||
<symbol id="categories" viewBox="0 0 16 16" fill="none">
|
||||
<path d="M2 6.66669C2 4.78107 2 3.83826 2.58579 3.25247C3.17157 2.66669 4.11438 2.66669 6 2.66669H10C11.8856 2.66669 12.8284 2.66669 13.4142 3.25247C14 3.83826 14 4.78107 14 6.66669V9.33335C14 11.219 14 12.1618 13.4142 12.7476C12.8284 13.3334 11.8856 13.3334 10 13.3334H6C4.11438 13.3334 3.17157 13.3334 2.58579 12.7476C2 12.1618 2 11.219 2 9.33335V6.66669Z" stroke="white"/>
|
||||
<path d="M5.33398 2.66669V2.66669C5.42787 2.66669 5.47482 2.66669 5.51834 2.66858C6.21284 2.69886 6.8418 3.08757 7.17946 3.69521C7.20062 3.73329 7.22161 3.77528 7.2636 3.85926L7.75628 4.8446C8.10324 5.53853 8.27672 5.88549 8.54248 6.13227C8.73342 6.30957 8.95717 6.44786 9.20115 6.53935C9.54072 6.66669 9.92864 6.66669 10.7045 6.66669V6.66669C11.9155 6.66669 12.5209 6.66669 12.9753 6.92023C13.2991 7.10097 13.5664 7.3682 13.7471 7.69206C14.0007 8.1464 14.0007 8.75189 14.0007 9.96287V10.6667" stroke="white"/>
|
||||
<symbol id="inventory" viewBox="0 0 24 24">
|
||||
<path d="M21.3,7l-9-4.5c-0.2-0.1-0.4-0.1-0.5,0L2.7,7C2.5,7.1,2.4,7.3,2.4,7.5v9c0,0.2,0.1,0.4,0.3,0.5l9,4.5c0.2,0.1,0.4,0.1,0.5,0 l9-4.5c0.2-0.1,0.3-0.3,0.3-0.5v-9C21.6,7.3,21.5,7.1,21.3,7z M20.4,16.1L12.6,20v-7.7l3.8-1.9V13c0,0.3,0.3,0.6,0.6,0.6 s0.6-0.3,0.6-0.6V9.9l2.8-1.4V16.1z M8,5.7l7.7,3.8L12,11.3L4.3,7.5L8,5.7z M3.6,8.5l7.8,3.9V20l-7.8-3.9V8.5z M19.7,7.5L17,8.8 L9.3,5L12,3.7L19.7,7.5z"/>
|
||||
</symbol>
|
||||
<symbol id="products" viewBox="0 0 16 16" fill="none">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.54693 13.1966L2.80604 9.45673C2.6101 9.26106 2.5 8.99554 2.5 8.71866C2.5 8.44178 2.6101 8.17626 2.80604 7.98059L8.28258 2.5L13.5 2.5L13.5 7.71605L8.01824 13.1966C7.61124 13.6011 6.95392 13.6011 6.54693 13.1966Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<symbol id="categories" viewBox="0 0 16 16">
|
||||
<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.6z 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"/>
|
||||
</symbol>
|
||||
<symbol id="variant" viewBox="0 0 16 16" fill="none">
|
||||
<rect x="12" y="6" width="2.66667" height="2.66667" rx="1.33333" transform="rotate(90 12 6)" stroke="currentColor"/>
|
||||
<rect x="12" y="11.3333" width="2.66667" height="2.66667" rx="1.33333" transform="rotate(90 12 11.3333)" stroke="currentColor"/>
|
||||
<rect x="2" y="4.66675" width="2.66667" height="2.66667" rx="1.33333" transform="rotate(-90 2 4.66675)" stroke="currentColor"/>
|
||||
<path d="M3.3335 5.33325V8.66658C3.3335 10.5522 3.3335 11.495 3.91928 12.0808C4.50507 12.6666 5.44788 12.6666 7.3335 12.6666H9.3335" stroke="currentColor"/>
|
||||
<path d="M3.3335 4.66675V4.66675C3.3335 5.28673 3.3335 5.59672 3.40164 5.85105C3.58658 6.54124 4.12567 7.08033 4.81586 7.26527C5.07019 7.33342 5.38018 7.33342 6.00016 7.33342H9.3335" stroke="currentColor"/>
|
||||
<symbol id="products" viewBox="0 0 16 16">
|
||||
<path d="M2.5,9.8l3.7,3.7c0,0,0,0,0,0c0.6,0.6,1.6,0.6,2.2,0l5.5-5.5C13.9,8,14,7.8,14,7.7V2.5C14,2.2,13.8,2,13.5,2H8.3 C8.1,2,8,2.1,7.9,2.1L2.5,7.6C2.2,7.9,2,8.3,2,8.7C2,9.1,2.2,9.5,2.5,9.8z M3.2,8.3L8.5,3H13v4.5l-5.3,5.3c-0.2,0.2-0.6,0.2-0.8,0 L3.2,9.1C3.1,9,3,8.9,3,8.7S3.1,8.4,3.2,8.3z"/>
|
||||
</symbol>
|
||||
<symbol id="variant" viewBox="0 0 24 24">
|
||||
<path d="M16,16c-1.3,0-2.4,0.8-2.8,2H9c-1.5,0-2.4,0-2.7-0.3S6,16.5,6,15v-3.2C6.7,12,7.7,12,9,12h4.2c0.4,1.2,1.5,2,2.8,2 c1.7,0,3-1.3,3-3s-1.3-3-3-3c-1.3,0-2.4,0.8-2.8,2H9c-1.5,0-2.4,0-2.7-0.3C6.1,9.5,6,8.8,6,7.8C7.2,7.4,8,6.3,8,5c0-1.7-1.3-3-3-3 S2,3.3,2,5c0,1.3,0.8,2.4,2,2.8C4,7.9,4,7.9,4,8h0v7c0,2.1,0,3.2,0.9,4.1S6.9,20,9,20h4.2c0.4,1.2,1.5,2,2.8,2c1.7,0,3-1.3,3-3 S17.7,16,16,16z M16,10c0.6,0,1,0.4,1,1s-0.4,1-1,1s-1-0.4-1-1S15.4,10,16,10z M5,4c0.6,0,1,0.4,1,1S5.6,6,5,6S4,5.6,4,5S4.4,4,5,4z M16,20c-0.6,0-1-0.4-1-1s0.4-1,1-1s1,0.4,1,1S16.6,20,16,20z"/>
|
||||
</symbol>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 3.0 KiB After Width: | Height: | Size: 2.3 KiB |
@ -6,11 +6,11 @@
|
||||
"string": {
|
||||
"Categories": "Categories",
|
||||
"Category": "Category",
|
||||
"CreateCategoryShort": "+ Category",
|
||||
"CreateCategoryShort": "Category",
|
||||
"CreateCategory": "Create category",
|
||||
"CreateSubcategory": "Create subcategory",
|
||||
"Inventory": "Inventory",
|
||||
"CreateProductShort": "+ Product",
|
||||
"CreateProductShort": "Product",
|
||||
"CreateProduct": "Create product",
|
||||
"Products": "Products",
|
||||
"Product": "Product",
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
-->
|
||||
<script lang="ts">
|
||||
import { DocumentQuery } from '@anticrm/core'
|
||||
import { Button, Icon, Label, ScrollBox, SearchEdit, showPopup } from '@anticrm/ui'
|
||||
import { Button, Icon, Label, ScrollBox, SearchEdit, showPopup, IconAdd } from '@anticrm/ui'
|
||||
import type { Category } from '@anticrm/inventory'
|
||||
import inventory from '../plugin'
|
||||
import CreateCategory from './CreateCategory.svelte'
|
||||
@ -33,12 +33,10 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="categories-header-container">
|
||||
<div class="header-container">
|
||||
<div class="flex-row-center">
|
||||
<span class="icon"><Icon icon={inventory.icon.Categories} size={'small'} /></span>
|
||||
<span class="label"><Label label={inventory.string.Categories} /></span>
|
||||
</div>
|
||||
<div class="ac-header full">
|
||||
<div class="ac-header__wrap-title">
|
||||
<div class="ac-header__icon"><Icon icon={inventory.icon.Categories} size={'small'} /></div>
|
||||
<span class="ac-header__title"><Label label={inventory.string.Categories} /></span>
|
||||
</div>
|
||||
|
||||
<SearchEdit bind:value={search} on:change={() => {
|
||||
@ -46,59 +44,14 @@
|
||||
}}/>
|
||||
<Button
|
||||
label={inventory.string.CreateCategoryShort}
|
||||
icon={IconAdd}
|
||||
primary={true}
|
||||
size={'small'}
|
||||
on:click={(ev) => showCreateDialog(ev)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="antiPanel-component">
|
||||
<ScrollBox vertical stretch noShift>
|
||||
<HierarchyView _class={inventory.class.Category} config={['', 'modifiedOn']} options={{}} query={resultQuery} />
|
||||
</ScrollBox>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
padding-bottom: 1.25rem;
|
||||
}
|
||||
.categories-header-container {
|
||||
display: grid;
|
||||
grid-template-columns: auto;
|
||||
grid-auto-flow: column;
|
||||
grid-auto-columns: min-content;
|
||||
gap: 0.75rem;
|
||||
align-items: center;
|
||||
padding: 0 1.75rem 0 2.5rem;
|
||||
height: 4rem;
|
||||
min-height: 4rem;
|
||||
white-space: nowrap;
|
||||
|
||||
.header-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
|
||||
.icon {
|
||||
margin-right: 0.5rem;
|
||||
opacity: 0.6;
|
||||
}
|
||||
.label {
|
||||
flex-grow: 1;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
max-width: 35rem;
|
||||
}
|
||||
.label {
|
||||
font-weight: 500;
|
||||
font-size: 1rem;
|
||||
color: var(--theme-caption-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<ScrollBox vertical stretch noShift>
|
||||
<HierarchyView _class={inventory.class.Category} config={['', 'modifiedOn']} options={{}} query={resultQuery} />
|
||||
</ScrollBox>
|
||||
<div class="ac-body__space-3" />
|
||||
|
||||
@ -20,6 +20,7 @@
|
||||
import { EditDoc } from '@anticrm/view-resources'
|
||||
|
||||
export let value: Product
|
||||
export let inline: boolean = false
|
||||
|
||||
function show () {
|
||||
closeTooltip()
|
||||
@ -28,23 +29,8 @@
|
||||
</script>
|
||||
|
||||
{#if value}
|
||||
<div class="sm-tool-icon container" on:click={show}>
|
||||
<Icon icon={inventory.icon.Products} size="medium" />
|
||||
<div class="overflow-label name">{value.name}</div>
|
||||
<div class="flex-presenter" class:inline-presenter={inline} on:click={show}>
|
||||
<div class="icon"><Icon icon={inventory.icon.Products} size={'small'} /></div>
|
||||
<span class="label">{value.name}</span>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
.name {
|
||||
margin-left: 0.5rem;
|
||||
font-weight: 500;
|
||||
text-align: left;
|
||||
color: var(--theme-content-accent-color);
|
||||
}
|
||||
&:hover .name {
|
||||
text-decoration: underline;
|
||||
color: var(--theme-caption-color);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -14,7 +14,7 @@
|
||||
// limitations under the License.
|
||||
-->
|
||||
<script lang="ts">
|
||||
import ui, { Button, EditWithIcon, Icon, IconSearch, Label, ScrollBox, showPopup } from '@anticrm/ui'
|
||||
import ui, { Button, EditWithIcon, Icon, IconSearch, Label, ScrollBox, showPopup, IconAdd } from '@anticrm/ui'
|
||||
import CreateProduct from './CreateProduct.svelte'
|
||||
import inventory from '../plugin'
|
||||
import { Table } from '@anticrm/view-resources'
|
||||
@ -35,12 +35,10 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="products-header-container">
|
||||
<div class="header-container">
|
||||
<div class="flex-row-center">
|
||||
<span class="icon"><Icon icon={inventory.icon.Products} size={'small'} /></span>
|
||||
<span class="label"><Label label={inventory.string.Products} /></span>
|
||||
</div>
|
||||
<div class="ac-header full">
|
||||
<div class="ac-header__wrap-title">
|
||||
<span class="ac-header__icon"><Icon icon={inventory.icon.Products} size={'small'} /></span>
|
||||
<span class="ac-header__title"><Label label={inventory.string.Products} /></span>
|
||||
</div>
|
||||
|
||||
<EditWithIcon
|
||||
@ -53,79 +51,24 @@
|
||||
/>
|
||||
<Button
|
||||
label={inventory.string.CreateProductShort}
|
||||
icon={IconAdd}
|
||||
primary={true}
|
||||
size={'small'}
|
||||
on:click={(ev) => showCreateDialog(ev)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="antiPanel-component">
|
||||
<ScrollBox vertical stretch noShift>
|
||||
{#await tableDescriptor then descr}
|
||||
{#if descr}
|
||||
<Table
|
||||
_class={inventory.class.Product}
|
||||
config={descr.config}
|
||||
options={descr.options}
|
||||
query={resultQuery}
|
||||
enableChecking
|
||||
/>
|
||||
{/if}
|
||||
{/await}
|
||||
</ScrollBox>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
padding-bottom: 1.25rem;
|
||||
|
||||
.antiPanel-component {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
border-radius: 1.25rem;
|
||||
background-color: var(--theme-bg-color);
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
.products-header-container {
|
||||
display: grid;
|
||||
grid-template-columns: auto;
|
||||
grid-auto-flow: column;
|
||||
grid-auto-columns: min-content;
|
||||
gap: 0.75rem;
|
||||
align-items: center;
|
||||
padding: 0 1.75rem 0 2.5rem;
|
||||
height: 4rem;
|
||||
min-height: 4rem;
|
||||
white-space: nowrap;
|
||||
|
||||
.header-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
|
||||
.icon {
|
||||
margin-right: 0.5rem;
|
||||
opacity: 0.6;
|
||||
}
|
||||
.label {
|
||||
flex-grow: 1;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
max-width: 35rem;
|
||||
}
|
||||
.label {
|
||||
font-weight: 500;
|
||||
font-size: 1rem;
|
||||
color: var(--theme-caption-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<ScrollBox vertical stretch noShift>
|
||||
{#await tableDescriptor then descr}
|
||||
{#if descr}
|
||||
<Table
|
||||
_class={inventory.class.Product}
|
||||
config={descr.config}
|
||||
options={descr.options}
|
||||
query={resultQuery}
|
||||
enableChecking
|
||||
/>
|
||||
{/if}
|
||||
{/await}
|
||||
</ScrollBox>
|
||||
<div class="ac-body__space-3" />
|
||||
|
||||
@ -33,12 +33,10 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="customers-header-container">
|
||||
<div class="header-container">
|
||||
<div class="flex-row-center">
|
||||
<span class="icon"><Icon icon={lead.icon.Lead} size={'small'}/></span>
|
||||
<span class="label"><Label label={lead.string.Customers}/></span>
|
||||
</div>
|
||||
<div class="ac-header full">
|
||||
<div class="ac-header__wrap-title">
|
||||
<div class="ac-header__icon"><Icon icon={lead.icon.Lead} size={'small'} /></div>
|
||||
<span class="ac-header__title"><Label label={lead.string.Customers} /></span>
|
||||
</div>
|
||||
|
||||
<SearchEdit bind:value={search} on:change={() => {
|
||||
@ -46,59 +44,17 @@
|
||||
}}/>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="antiPanel-component">
|
||||
<ScrollBox vertical stretch noShift>
|
||||
{#await tableDescriptor then descr}
|
||||
{#if descr}
|
||||
<Table
|
||||
_class={lead.mixin.Customer}
|
||||
config={descr.config}
|
||||
options={descr.options}
|
||||
query={ resultQuery }
|
||||
enableChecking
|
||||
/>
|
||||
{/if}
|
||||
{/await}
|
||||
</ScrollBox>
|
||||
</div>
|
||||
</div>
|
||||
<style lang="scss">
|
||||
.container {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
padding-bottom: 1.25rem;
|
||||
}
|
||||
.customers-header-container {
|
||||
display: grid;
|
||||
grid-template-columns: auto;
|
||||
grid-auto-flow: column;
|
||||
grid-auto-columns: min-content;
|
||||
gap: .75rem;
|
||||
align-items: center;
|
||||
padding: 0 1.75rem 0 2.5rem;
|
||||
height: 4rem;
|
||||
min-height: 4rem;
|
||||
|
||||
.header-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
|
||||
.icon {
|
||||
margin-right: .5rem;
|
||||
opacity: .6;
|
||||
}
|
||||
.label {
|
||||
flex-grow: 1;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
max-width: 35rem;
|
||||
font-weight: 500;
|
||||
font-size: 1rem;
|
||||
color: var(--theme-caption-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<ScrollBox vertical stretch noShift>
|
||||
{#await tableDescriptor then descr}
|
||||
{#if descr}
|
||||
<Table
|
||||
_class={lead.mixin.Customer}
|
||||
config={descr.config}
|
||||
options={descr.options}
|
||||
query={ resultQuery }
|
||||
enableChecking
|
||||
/>
|
||||
{/if}
|
||||
{/await}
|
||||
</ScrollBox>
|
||||
<div class="ac-body__space-3" />
|
||||
|
||||
@ -40,73 +40,29 @@
|
||||
|
||||
</script>
|
||||
|
||||
<div class="candidates-header-container">
|
||||
<div class="header-container">
|
||||
<div class="flex-row-center">
|
||||
<span class="icon"><Icon icon={contact.icon.Person} size={'small'}/></span>
|
||||
<span class="label"><Label label={recruit.string.Candidates}/></span>
|
||||
</div>
|
||||
<div class="ac-header full">
|
||||
<div class="ac-header__wrap-title">
|
||||
<div class="ac-header__icon"><Icon icon={contact.icon.Person} size={'small'} /></div>
|
||||
<span class="ac-title"><Label label={recruit.string.Candidates} /></span>
|
||||
</div>
|
||||
|
||||
|
||||
<SearchEdit bind:value={search} on:change={() => {
|
||||
updateResultQuery(search)
|
||||
}}/>
|
||||
<Button label={recruit.string.Create} primary={true} size={'small'} on:click={(ev) => showCreateDialog(ev)}/>
|
||||
}} />
|
||||
<Button label={recruit.string.Create} primary={true} size={'small'} on:click={(ev) => showCreateDialog(ev)} />
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="antiPanel-component">
|
||||
<ScrollBox vertical stretch noShift>
|
||||
{#await tableDescriptor then descr}
|
||||
{#if descr}
|
||||
<Table
|
||||
_class={recruit.mixin.Candidate}
|
||||
config={descr.config}
|
||||
options={descr.options}
|
||||
query={ resultQuery }
|
||||
enableChecking
|
||||
/>
|
||||
{/if}
|
||||
{/await}
|
||||
</ScrollBox>
|
||||
</div>
|
||||
</div>
|
||||
<style lang="scss">
|
||||
.container {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
padding-bottom: 1.25rem;
|
||||
}
|
||||
.candidates-header-container {
|
||||
display: grid;
|
||||
grid-template-columns: auto;
|
||||
grid-auto-flow: column;
|
||||
grid-auto-columns: min-content;
|
||||
gap: .75rem;
|
||||
align-items: center;
|
||||
padding: 0 1.75rem 0 2.5rem;
|
||||
height: 4rem;
|
||||
min-height: 4rem;
|
||||
|
||||
.header-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
|
||||
.icon {
|
||||
margin-right: .5rem;
|
||||
opacity: .6;
|
||||
}
|
||||
.label {
|
||||
flex-grow: 1;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
max-width: 35rem;
|
||||
font-weight: 500;
|
||||
font-size: 1rem;
|
||||
color: var(--theme-caption-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<ScrollBox vertical stretch noShift>
|
||||
{#await tableDescriptor then descr}
|
||||
{#if descr}
|
||||
<Table
|
||||
_class={recruit.mixin.Candidate}
|
||||
config={descr.config}
|
||||
options={descr.options}
|
||||
query={ resultQuery }
|
||||
enableChecking
|
||||
/>
|
||||
{/if}
|
||||
{/await}
|
||||
</ScrollBox>
|
||||
<div class="ac-body__space-3" />
|
||||
|
||||
@ -32,23 +32,13 @@
|
||||
</script>
|
||||
|
||||
<div class="antiComponent">
|
||||
<div class="ac-header">
|
||||
<div class="ac-header short divide">
|
||||
<div class="ac-header__icon"><Icon icon={setting.icon.Integrations} size={'medium'} /></div>
|
||||
<div class="ac-header__title"><Label label={setting.string.Integrations}/></div>
|
||||
</div>
|
||||
<div class="cards-container">
|
||||
<div class="ac-body__cards-container">
|
||||
{#each integrationTypes as integrationType (integrationType._id)}
|
||||
<PluginCard integration={integrations.find((p) => p.type === integrationType._id)} {integrationType} />
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.cards-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(20rem, auto));
|
||||
grid-auto-rows: minmax(12.5rem, auto);
|
||||
grid-gap: 1.5rem;
|
||||
padding: 3rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -41,7 +41,7 @@
|
||||
</script>
|
||||
|
||||
<div class="antiComponent">
|
||||
<div class="ac-header">
|
||||
<div class="ac-header short divide">
|
||||
<div class="ac-header__icon"><Icon icon={setting.icon.Password} size={'medium'} /></div>
|
||||
<div class="ac-header__title"><Label label={setting.string.ChangePassword} /></div>
|
||||
</div>
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
</script>
|
||||
|
||||
<div class="antiComponent">
|
||||
<div class="ac-header">
|
||||
<div class="ac-header short divide">
|
||||
<div class="ac-header__icon"><Icon icon={setting.icon.Privacy} size={'medium'} /></div>
|
||||
<div class="ac-header__title"><Label label={setting.string.Privacy}/></div>
|
||||
</div>
|
||||
|
||||
@ -89,7 +89,7 @@
|
||||
</script>
|
||||
|
||||
<div class="antiComponent">
|
||||
<div class="ac-header">
|
||||
<div class="ac-header short divide">
|
||||
<div class="ac-header__icon"><Icon icon={setting.icon.EditProfile} size={'medium'} /></div>
|
||||
<div class="ac-header__title"><Label label={setting.string.EditProfile} /></div>
|
||||
</div>
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
</script>
|
||||
|
||||
<div class="antiComponent">
|
||||
<div class="ac-header">
|
||||
<div class="ac-header short divide">
|
||||
<div class="ac-header__icon"><Icon icon={setting.icon.Setting} size={'medium'} /></div>
|
||||
<div class="ac-header__title"><Label label={setting.string.Setting}/></div>
|
||||
</div>
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
</script>
|
||||
|
||||
<div class="antiComponent">
|
||||
<div class="ac-header">
|
||||
<div class="ac-header short divide">
|
||||
<div class="ac-header__icon"><Icon icon={setting.icon.Support} size={'medium'} /></div>
|
||||
<div class="ac-header__title"><Label label={setting.string.Support}/></div>
|
||||
</div>
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
</script>
|
||||
|
||||
<div class="antiComponent">
|
||||
<div class="ac-header">
|
||||
<div class="ac-header short divide">
|
||||
<div class="ac-header__icon"><Icon icon={setting.icon.Terms} size={'medium'} /></div>
|
||||
<div class="ac-header__title"><Label label={setting.string.Terms}/></div>
|
||||
</div>
|
||||
|
||||
@ -53,7 +53,7 @@
|
||||
</script>
|
||||
|
||||
<div class="antiComponent">
|
||||
<div class="ac-header">
|
||||
<div class="ac-header short divide">
|
||||
<div class="ac-header__icon"><Icon icon={task.icon.ManageStatuses} size={'medium'} /></div>
|
||||
<div class="ac-header__title"><Label label={setting.string.ManageStatuses}/></div>
|
||||
</div>
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
<script lang="ts">
|
||||
import contact from '@anticrm/contact'
|
||||
import core, { Class, Doc, Ref, RefTo } from '@anticrm/core'
|
||||
import { AttributeBarEditor, AttributesBar, getClient, KeyedAttribute, UserBox } from '@anticrm/presentation'
|
||||
import { AttributesBar, getClient, KeyedAttribute, UserBox } from '@anticrm/presentation'
|
||||
import { Task } from '@anticrm/task'
|
||||
import task from '../plugin'
|
||||
|
||||
@ -66,14 +66,13 @@
|
||||
<AttributesBar {object} keys={filtredKeys} />
|
||||
</div>
|
||||
</div>
|
||||
<AttributeBarEditor key={'state'} {object} showHeader={false} />
|
||||
<AttributeBarEditor key={'doneState'} {object} showHeader={false} />
|
||||
<AttributesBar {object} keys={['doneState', 'state']} showHeader={false} />
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.header {
|
||||
width: 100%;
|
||||
padding: 0 0.5rem;
|
||||
// padding: 0 0.5rem;
|
||||
|
||||
.column {
|
||||
position: relative;
|
||||
|
||||
@ -59,7 +59,7 @@
|
||||
</script>
|
||||
|
||||
<div class="antiComponent">
|
||||
<div class="ac-header">
|
||||
<div class="ac-header short divide">
|
||||
<div class="ac-header__icon"><Icon icon={templatesPlugin.icon.Templates} size={'medium'} /></div>
|
||||
<div class="ac-header__title"><Label label={templatesPlugin.string.Templates} /></div>
|
||||
</div>
|
||||
|
||||
@ -127,7 +127,7 @@
|
||||
<div class="checkCell" class:checkall={checked.size > 0}>
|
||||
<CheckBox
|
||||
symbol={'minus'}
|
||||
checked={objects?.length === checked.size}
|
||||
checked={objects?.length === checked.size && objects?.length > 0}
|
||||
on:change={(e) => {
|
||||
objects.map((o) => check(o._id, e))
|
||||
}}
|
||||
|
||||
@ -22,39 +22,10 @@
|
||||
export let description: IntlString | undefined
|
||||
</script>
|
||||
|
||||
<div class="header-container">
|
||||
<div class="flex-row-center">
|
||||
{#if icon }<span class="icon"><Icon {icon} size={'small'}/></span>{/if}
|
||||
<span class="label"><Label {label}/></span>
|
||||
<div class="ac-header__wrap-description">
|
||||
<div class="ac-header__wrap-title">
|
||||
{#if icon }<div class="ac-header__icon"><Icon {icon} size={'small'}/></div>{/if}
|
||||
<span class="ac-header__title"><Label {label}/></span>
|
||||
</div>
|
||||
{#if description }<div class="description">{description}</div>{/if}
|
||||
{#if description }<span class="ac-header__description">{description}</span>{/if}
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.header-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
|
||||
.icon {
|
||||
margin-right: .5rem;
|
||||
opacity: .6;
|
||||
}
|
||||
.label, .description {
|
||||
flex-grow: 1;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
max-width: 35rem;
|
||||
}
|
||||
.label {
|
||||
font-weight: 500;
|
||||
font-size: 1rem;
|
||||
color: var(--theme-caption-color);
|
||||
}
|
||||
.description {
|
||||
font-size: .75rem;
|
||||
color: var(--theme-content-trans-color);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -21,14 +21,7 @@
|
||||
// export let action: () => Promise<void> | void
|
||||
</script>
|
||||
|
||||
<div class="flex-between navheader-container flex-no-shrink">
|
||||
<div class="antiNav-header">
|
||||
<span class="fs-title overflow-label"><Label {label}></Label></span>
|
||||
<!-- <ActionIcon label={workbench.string.More} icon={IconMoreH} size={'small'} {action}/> -->
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.navheader-container {
|
||||
padding: 0 1.75rem;
|
||||
height: 4rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -27,23 +27,12 @@
|
||||
|
||||
{#if viewlet}
|
||||
{#key space}
|
||||
<div class="spacecontent-container">
|
||||
<Component is={viewlet.$lookup?.descriptor?.component} props={ {
|
||||
_class,
|
||||
space,
|
||||
options: viewlet.options,
|
||||
config: viewlet.config,
|
||||
search
|
||||
} } />
|
||||
</div>
|
||||
<Component is={viewlet.$lookup?.descriptor?.component} props={ {
|
||||
_class,
|
||||
space,
|
||||
options: viewlet.options,
|
||||
config: viewlet.config,
|
||||
search
|
||||
} } />
|
||||
{/key}
|
||||
{/if}
|
||||
|
||||
<style lang="scss">
|
||||
.spacecontent-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -55,16 +55,16 @@
|
||||
|
||||
</script>
|
||||
|
||||
<div class="spaceheader-container">
|
||||
<div class="ac-header full">
|
||||
{#if space}
|
||||
<Header icon={classIcon(client, space._class)} label={space.name} description={space.description} />
|
||||
{#if viewlets.length > 1}
|
||||
<div class="flex">
|
||||
{#each viewlets as viewlet, i}
|
||||
<Tooltip label={viewlet.$lookup?.descriptor?.label} direction={'top'}>
|
||||
<div class="flex-center btn" class:selected={selectedViewlet === i} on:click={() => { selectedViewlet = i }}>
|
||||
<button class="ac-header__icon-button" class:selected={selectedViewlet === i} on:click={() => { selectedViewlet = i }}>
|
||||
<Icon icon={viewlet.$lookup?.descriptor?.icon} size={'small'}/>
|
||||
</div>
|
||||
</button>
|
||||
</Tooltip>
|
||||
{/each}
|
||||
</div>
|
||||
@ -77,34 +77,3 @@
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.spaceheader-container {
|
||||
display: grid;
|
||||
grid-template-columns: auto;
|
||||
grid-auto-flow: column;
|
||||
grid-auto-columns: min-content;
|
||||
gap: .75rem;
|
||||
align-items: center;
|
||||
padding: 0 1.75rem 0 2.5rem;
|
||||
height: 4rem;
|
||||
min-height: 4rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
background-color: transparent;
|
||||
border-radius: .5rem;
|
||||
cursor: pointer;
|
||||
|
||||
color: var(--theme-content-trans-color);
|
||||
&:hover { color: var(--theme-caption-color); }
|
||||
&.selected {
|
||||
color: var(--theme-content-accent-color);
|
||||
background-color: var(--theme-button-bg-enabled);
|
||||
cursor: default;
|
||||
&:hover { color: var(--theme-caption-color); }
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -143,28 +143,20 @@
|
||||
let employee: Employee | undefined
|
||||
const accountQ = createQuery()
|
||||
const employeeQ = createQuery()
|
||||
$: accountQ.query(
|
||||
contact.class.EmployeeAccount,
|
||||
{
|
||||
_id: getCurrentAccount()._id as Ref<EmployeeAccount>
|
||||
},
|
||||
(res) => {
|
||||
account = res[0]
|
||||
},
|
||||
{ limit: 1 }
|
||||
)
|
||||
$: accountQ.query(contact.class.EmployeeAccount, {
|
||||
_id: getCurrentAccount()._id as Ref<EmployeeAccount>
|
||||
}, (res) => {
|
||||
account = res[0]
|
||||
}, { limit: 1 })
|
||||
|
||||
$: account &&
|
||||
employeeQ.query(
|
||||
contact.class.Employee,
|
||||
{
|
||||
_id: account.employee
|
||||
},
|
||||
(res) => {
|
||||
employee = res[0]
|
||||
},
|
||||
{ limit: 1 }
|
||||
)
|
||||
$: account && employeeQ.query(contact.class.Employee, {
|
||||
_id: account.employee
|
||||
}, (res) => {
|
||||
employee = res[0]
|
||||
}, { limit: 1 })
|
||||
|
||||
let isNavigate: boolean = false
|
||||
$: isNavigate = navigatorModel ? true : false
|
||||
</script>
|
||||
|
||||
{#if client}
|
||||
@ -219,7 +211,7 @@
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
<div class="antiPanel-component filled indent">
|
||||
<div class="antiPanel-component indent antiComponent" class:filled={isNavigate}>
|
||||
{#if currentApplication && currentApplication.component}
|
||||
<Component is={currentApplication.component} />
|
||||
{:else if specialComponent}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user