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

Update layouts, icons. CSS optimize (#926)

Browse Source 
Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov 2022-02-03 16:16:15 +07:00 committed by GitHub
parent 8c51a4ec2c
commit f01f30fc1d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
28 changed files with 236 additions and 519 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
packages/presentation/src/components/AttributesBar.svelte
View File

@ -21,12 +21,13 @@
export let object: Doc export let object: Doc
export let keys: (string|KeyedAttribute)[] export let keys: (string|KeyedAttribute)[]
export let showHeader: boolean = true
</script> </script>
<div class="flex-row-center text-sm"> <div class="flex-row-center h-full text-sm">
{#each keys as key} {#each keys as key}
<div class="column"> <div class="flex-center h-9 column">
<AttributeBarEditor {key} {object} /> <AttributeBarEditor {key} {object} {showHeader} />
</div> </div>
{/each} {/each}
</div> </div>

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

@ -44,6 +44,14 @@
.antiPanel-component { flex-grow: 1; } .antiPanel-component { flex-grow: 1; }
/* Navigation */ /* Navigation */
.antiNav-header {
flex-shrink: 0;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 1.75rem;
height: 4rem;
}
.antiNav-divider { .antiNav-divider {
flex-shrink: 0; flex-shrink: 0;
margin: 1.5rem 0; margin: 1.5rem 0;

74
packages/theme/styles/components.scss
View File

@ -20,24 +20,71 @@
height: 100%; height: 100%;
.ac-header { .ac-header {
display: flex;
align-items: center;
flex-wrap: nowrap;
padding: 0 1.75rem 0 2.5rem; padding: 0 1.75rem 0 2.5rem;
height: 4rem; height: 4rem;
min-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 { .ac-header__icon {
margin-right: .75rem; margin-right: .5rem;
color: var(--theme-content-color); color: var(--theme-content-color);
} }
.ac-header__title { .ac-header__title {
font-weight: 500; font-weight: 500;
font-size: 1rem; font-size: 1rem;
color: var(--theme-caption-color); 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 { .ac-body {
@ -86,7 +133,20 @@
cursor: auto; 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; } .ac-column__list-item + .ac-column__list-item { margin-top: .75rem; }

10
packages/ui/src/components/CheckBox.svelte
View File

@ -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" 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}
{#if symbol === 'minus'} {#if checked}
<rect class="check" class:primary x="4" y="7.4" width="8" height="1.2" /> {#if symbol === 'minus'}
{:else} <rect class="check" class:primary x="4" y="7.4" width="8" height="1.2" />
<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 " /> {: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} {/if}
</svg> </svg>
</label> </label>

90
plugins/contact-resources/src/components/Contacts.svelte
View File

@ -39,75 +39,31 @@
} }
</script> </script>
<div class="contacts-header-container"> <div class="antiPanel-component filled">
<div class="header-container"> <div class="ac-header full">
<div class="flex-row-center"> <div class="ac-header__wrap-title">
<span class="icon"><Icon icon={contact.icon.Person} size={'small'}/></span> <div class="ac-header__icon"><Icon icon={contact.icon.Person} size={'small'}/></div>
<span class="label"><Label label={contact.string.Contacts}/></span> <span class="ac-header__title"><Label label={contact.string.Contacts}/></span>
</div> </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>
<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"> <ScrollBox vertical stretch noShift>
<div class="antiPanel-component"> {#await tableDescriptor then descr}
<ScrollBox vertical stretch noShift> {#if descr}
{#await tableDescriptor then descr} <Table
{#if descr} _class={contact.class.Contact}
<Table config={descr.config}
_class={contact.class.Contact} options={descr.options}
config={descr.config} query={ resultQuery }
options={descr.options} enableChecking
query={ resultQuery } />
enableChecking {/if}
/> {/await}
{/if}
{/await}
</ScrollBox> </ScrollBox>
</div> <div class="ac-body__space-3" />
</div> </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>

25
plugins/inventory-assets/assets/icons.svg
View File

@ -1,21 +1,14 @@
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="inventory" viewBox="0 0 24 24" fill="none"> <symbol id="inventory" viewBox="0 0 24 24">
<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="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"/>
<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> </symbol>
<symbol id="products" viewBox="0 0 16 16" fill="none"> <symbol id="categories" viewBox="0 0 16 16">
<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"/> <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>
<symbol id="variant" viewBox="0 0 16 16" fill="none"> <symbol id="products" viewBox="0 0 16 16">
<rect x="12" y="6" width="2.66667" height="2.66667" rx="1.33333" transform="rotate(90 12 6)" stroke="currentColor"/> <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"/>
<rect x="12" y="11.3333" width="2.66667" height="2.66667" rx="1.33333" transform="rotate(90 12 11.3333)" stroke="currentColor"/> </symbol>
<rect x="2" y="4.66675" width="2.66667" height="2.66667" rx="1.33333" transform="rotate(-90 2 4.66675)" stroke="currentColor"/> <symbol id="variant" viewBox="0 0 24 24">
<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="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"/>
<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> </symbol>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.0 KiB

After

Width:  |  Height:  |  Size: 2.3 KiB

4
plugins/inventory-assets/lang/en.json
View File

@ -6,11 +6,11 @@
"string": { "string": {
"Categories": "Categories", "Categories": "Categories",
"Category": "Category", "Category": "Category",
"CreateCategoryShort": "+ Category", "CreateCategoryShort": "Category",
"CreateCategory": "Create category", "CreateCategory": "Create category",
"CreateSubcategory": "Create subcategory", "CreateSubcategory": "Create subcategory",
"Inventory": "Inventory", "Inventory": "Inventory",
"CreateProductShort": "+ Product", "CreateProductShort": "Product",
"CreateProduct": "Create product", "CreateProduct": "Create product",
"Products": "Products", "Products": "Products",
"Product": "Product", "Product": "Product",

67
plugins/inventory-resources/src/components/Categories.svelte
View File

@ -15,7 +15,7 @@
--> -->
<script lang="ts"> <script lang="ts">
import { DocumentQuery } from '@anticrm/core' 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 type { Category } from '@anticrm/inventory'
import inventory from '../plugin' import inventory from '../plugin'
import CreateCategory from './CreateCategory.svelte' import CreateCategory from './CreateCategory.svelte'
@ -33,12 +33,10 @@
} }
</script> </script>
<div class="categories-header-container"> <div class="ac-header full">
<div class="header-container"> <div class="ac-header__wrap-title">
<div class="flex-row-center"> <div class="ac-header__icon"><Icon icon={inventory.icon.Categories} size={'small'} /></div>
<span class="icon"><Icon icon={inventory.icon.Categories} size={'small'} /></span> <span class="ac-header__title"><Label label={inventory.string.Categories} /></span>
<span class="label"><Label label={inventory.string.Categories} /></span>
</div>
</div> </div>
<SearchEdit bind:value={search} on:change={() => { <SearchEdit bind:value={search} on:change={() => {
@ -46,59 +44,14 @@
}}/> }}/>
<Button <Button
label={inventory.string.CreateCategoryShort} label={inventory.string.CreateCategoryShort}
icon={IconAdd}
primary={true} primary={true}
size={'small'} size={'small'}
on:click={(ev) => showCreateDialog(ev)} on:click={(ev) => showCreateDialog(ev)}
/> />
</div> </div>
<div class="container"> <ScrollBox vertical stretch noShift>
<div class="antiPanel-component"> <HierarchyView _class={inventory.class.Category} config={['', 'modifiedOn']} options={{}} query={resultQuery} />
<ScrollBox vertical stretch noShift> </ScrollBox>
<HierarchyView _class={inventory.class.Category} config={['', 'modifiedOn']} options={{}} query={resultQuery} /> <div class="ac-body__space-3" />
</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>

22
plugins/inventory-resources/src/components/ProductPresenter.svelte
View File

@ -20,6 +20,7 @@
import { EditDoc } from '@anticrm/view-resources' import { EditDoc } from '@anticrm/view-resources'
export let value: Product export let value: Product
export let inline: boolean = false
function show () { function show () {
closeTooltip() closeTooltip()
@ -28,23 +29,8 @@
</script> </script>
{#if value} {#if value}
<div class="sm-tool-icon container" on:click={show}> <div class="flex-presenter" class:inline-presenter={inline} on:click={show}>
<Icon icon={inventory.icon.Products} size="medium" /> <div class="icon"><Icon icon={inventory.icon.Products} size={'small'} /></div>
<div class="overflow-label name">{value.name}</div> <span class="label">{value.name}</span>
</div> </div>
{/if} {/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>

97
plugins/inventory-resources/src/components/Products.svelte
View File

@ -14,7 +14,7 @@
// limitations under the License. // limitations under the License.
--> -->
<script lang="ts"> <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 CreateProduct from './CreateProduct.svelte'
import inventory from '../plugin' import inventory from '../plugin'
import { Table } from '@anticrm/view-resources' import { Table } from '@anticrm/view-resources'
@ -35,12 +35,10 @@
} }
</script> </script>
<div class="products-header-container"> <div class="ac-header full">
<div class="header-container"> <div class="ac-header__wrap-title">
<div class="flex-row-center"> <span class="ac-header__icon"><Icon icon={inventory.icon.Products} size={'small'} /></span>
<span class="icon"><Icon icon={inventory.icon.Products} size={'small'} /></span> <span class="ac-header__title"><Label label={inventory.string.Products} /></span>
<span class="label"><Label label={inventory.string.Products} /></span>
</div>
</div> </div>
<EditWithIcon <EditWithIcon
@ -53,79 +51,24 @@
/> />
<Button <Button
label={inventory.string.CreateProductShort} label={inventory.string.CreateProductShort}
icon={IconAdd}
primary={true} primary={true}
size={'small'} size={'small'}
on:click={(ev) => showCreateDialog(ev)} on:click={(ev) => showCreateDialog(ev)}
/> />
</div> </div>
<div class="container"> <ScrollBox vertical stretch noShift>
<div class="antiPanel-component"> {#await tableDescriptor then descr}
<ScrollBox vertical stretch noShift> {#if descr}
{#await tableDescriptor then descr} <Table
{#if descr} _class={inventory.class.Product}
<Table config={descr.config}
_class={inventory.class.Product} options={descr.options}
config={descr.config} query={resultQuery}
options={descr.options} enableChecking
query={resultQuery} />
enableChecking {/if}
/> {/await}
{/if} </ScrollBox>
{/await} <div class="ac-body__space-3" />
</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>

80
plugins/lead-resources/src/components/Customers.svelte
View File

@ -33,12 +33,10 @@
} }
</script> </script>
<div class="customers-header-container"> <div class="ac-header full">
<div class="header-container"> <div class="ac-header__wrap-title">
<div class="flex-row-center"> <div class="ac-header__icon"><Icon icon={lead.icon.Lead} size={'small'} /></div>
<span class="icon"><Icon icon={lead.icon.Lead} size={'small'}/></span> <span class="ac-header__title"><Label label={lead.string.Customers} /></span>
<span class="label"><Label label={lead.string.Customers}/></span>
</div>
</div> </div>
<SearchEdit bind:value={search} on:change={() => { <SearchEdit bind:value={search} on:change={() => {
@ -46,59 +44,17 @@
}}/> }}/>
</div> </div>
<div class="container"> <ScrollBox vertical stretch noShift>
<div class="antiPanel-component"> {#await tableDescriptor then descr}
<ScrollBox vertical stretch noShift> {#if descr}
{#await tableDescriptor then descr} <Table
{#if descr} _class={lead.mixin.Customer}
<Table config={descr.config}
_class={lead.mixin.Customer} options={descr.options}
config={descr.config} query={ resultQuery }
options={descr.options} enableChecking
query={ resultQuery } />
enableChecking {/if}
/> {/await}
{/if} </ScrollBox>
{/await} <div class="ac-body__space-3" />
</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>

86
plugins/recruit-resources/src/components/Candidates.svelte
View File

@ -40,73 +40,29 @@
</script> </script>
<div class="candidates-header-container"> <div class="ac-header full">
<div class="header-container"> <div class="ac-header__wrap-title">
<div class="flex-row-center"> <div class="ac-header__icon"><Icon icon={contact.icon.Person} size={'small'} /></div>
<span class="icon"><Icon icon={contact.icon.Person} size={'small'}/></span> <span class="ac-title"><Label label={recruit.string.Candidates} /></span>
<span class="label"><Label label={recruit.string.Candidates}/></span>
</div>
</div> </div>
<SearchEdit bind:value={search} on:change={() => { <SearchEdit bind:value={search} on:change={() => {
updateResultQuery(search) 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>
<div class="container"> <ScrollBox vertical stretch noShift>
<div class="antiPanel-component"> {#await tableDescriptor then descr}
<ScrollBox vertical stretch noShift> {#if descr}
{#await tableDescriptor then descr} <Table
{#if descr} _class={recruit.mixin.Candidate}
<Table config={descr.config}
_class={recruit.mixin.Candidate} options={descr.options}
config={descr.config} query={ resultQuery }
options={descr.options} enableChecking
query={ resultQuery } />
enableChecking {/if}
/> {/await}
{/if} </ScrollBox>
{/await} <div class="ac-body__space-3" />
</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>

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

@ -32,23 +32,13 @@
</script> </script>
<div class="antiComponent"> <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__icon"><Icon icon={setting.icon.Integrations} size={'medium'} /></div>
<div class="ac-header__title"><Label label={setting.string.Integrations}/></div> <div class="ac-header__title"><Label label={setting.string.Integrations}/></div>
</div> </div>
<div class="cards-container"> <div class="ac-body__cards-container">
{#each integrationTypes as integrationType (integrationType._id)} {#each integrationTypes as integrationType (integrationType._id)}
<PluginCard integration={integrations.find((p) => p.type === integrationType._id)} {integrationType} /> <PluginCard integration={integrations.find((p) => p.type === integrationType._id)} {integrationType} />
{/each} {/each}
</div> </div>
</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>

2
plugins/setting-resources/src/components/Password.svelte
View File

@ -41,7 +41,7 @@
</script> </script>
<div class="antiComponent"> <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__icon"><Icon icon={setting.icon.Password} size={'medium'} /></div>
<div class="ac-header__title"><Label label={setting.string.ChangePassword} /></div> <div class="ac-header__title"><Label label={setting.string.ChangePassword} /></div>
</div> </div>

2
plugins/setting-resources/src/components/Privacy.svelte
View File

@ -19,7 +19,7 @@
</script> </script>
<div class="antiComponent"> <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__icon"><Icon icon={setting.icon.Privacy} size={'medium'} /></div>
<div class="ac-header__title"><Label label={setting.string.Privacy}/></div> <div class="ac-header__title"><Label label={setting.string.Privacy}/></div>
</div> </div>

2
plugins/setting-resources/src/components/Profile.svelte
View File

@ -89,7 +89,7 @@
</script> </script>
<div class="antiComponent"> <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__icon"><Icon icon={setting.icon.EditProfile} size={'medium'} /></div>
<div class="ac-header__title"><Label label={setting.string.EditProfile} /></div> <div class="ac-header__title"><Label label={setting.string.EditProfile} /></div>
</div> </div>

2
plugins/setting-resources/src/components/Setting.svelte
View File

@ -19,7 +19,7 @@
</script> </script>
<div class="antiComponent"> <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__icon"><Icon icon={setting.icon.Setting} size={'medium'} /></div>
<div class="ac-header__title"><Label label={setting.string.Setting}/></div> <div class="ac-header__title"><Label label={setting.string.Setting}/></div>
</div> </div>

2
plugins/setting-resources/src/components/Support.svelte
View File

@ -19,7 +19,7 @@
</script> </script>
<div class="antiComponent"> <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__icon"><Icon icon={setting.icon.Support} size={'medium'} /></div>
<div class="ac-header__title"><Label label={setting.string.Support}/></div> <div class="ac-header__title"><Label label={setting.string.Support}/></div>
</div> </div>

2
plugins/setting-resources/src/components/Terms.svelte
View File

@ -19,7 +19,7 @@
</script> </script>
<div class="antiComponent"> <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__icon"><Icon icon={setting.icon.Terms} size={'medium'} /></div>
<div class="ac-header__title"><Label label={setting.string.Terms}/></div> <div class="ac-header__title"><Label label={setting.string.Terms}/></div>
</div> </div>

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

@ -53,7 +53,7 @@
</script> </script>
<div class="antiComponent"> <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__icon"><Icon icon={task.icon.ManageStatuses} size={'medium'} /></div>
<div class="ac-header__title"><Label label={setting.string.ManageStatuses}/></div> <div class="ac-header__title"><Label label={setting.string.ManageStatuses}/></div>
</div> </div>

7
plugins/task-resources/src/components/TaskHeader.svelte
View File

@ -16,7 +16,7 @@
<script lang="ts"> <script lang="ts">
import contact from '@anticrm/contact' import contact from '@anticrm/contact'
import core, { Class, Doc, Ref, RefTo } from '@anticrm/core' 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 '@anticrm/task'
import task from '../plugin' import task from '../plugin'
@ -66,14 +66,13 @@
<AttributesBar {object} keys={filtredKeys} /> <AttributesBar {object} keys={filtredKeys} />
</div> </div>
</div> </div>
<AttributeBarEditor key={'state'} {object} showHeader={false} /> <AttributesBar {object} keys={['doneState', 'state']} showHeader={false} />
<AttributeBarEditor key={'doneState'} {object} showHeader={false} />
</div> </div>
<style lang="scss"> <style lang="scss">
.header { .header {
width: 100%; width: 100%;
padding: 0 0.5rem; // padding: 0 0.5rem;
.column { .column {
position: relative; position: relative;

2
plugins/templates-resources/src/components/Templates.svelte
View File

@ -59,7 +59,7 @@
</script> </script>
<div class="antiComponent"> <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__icon"><Icon icon={templatesPlugin.icon.Templates} size={'medium'} /></div>
<div class="ac-header__title"><Label label={templatesPlugin.string.Templates} /></div> <div class="ac-header__title"><Label label={templatesPlugin.string.Templates} /></div>
</div> </div>

2
plugins/view-resources/src/components/Table.svelte
View File

@ -127,7 +127,7 @@
<div class="checkCell" class:checkall={checked.size > 0}> <div class="checkCell" class:checkall={checked.size > 0}>
<CheckBox <CheckBox
symbol={'minus'} symbol={'minus'}
checked={objects?.length === checked.size} checked={objects?.length === checked.size && objects?.length > 0}
on:change={(e) => { on:change={(e) => {
objects.map((o) => check(o._id, e)) objects.map((o) => check(o._id, e))
}} }}

39
plugins/workbench-resources/src/components/Header.svelte
View File

@ -22,39 +22,10 @@
export let description: IntlString | undefined export let description: IntlString | undefined
</script> </script>
<div class="header-container"> <div class="ac-header__wrap-description">
<div class="flex-row-center"> <div class="ac-header__wrap-title">
{#if icon }<span class="icon"><Icon {icon} size={'small'}/></span>{/if} {#if icon }<div class="ac-header__icon"><Icon {icon} size={'small'}/></div>{/if}
<span class="label"><Label {label}/></span> <span class="ac-header__title"><Label {label}/></span>
</div> </div>
{#if description }<div class="description">{description}</div>{/if} {#if description }<span class="ac-header__description">{description}</span>{/if}
</div> </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>

9
plugins/workbench-resources/src/components/NavHeader.svelte
View File

@ -21,14 +21,7 @@
// export let action: () => Promise<void> | void // export let action: () => Promise<void> | void
</script> </script>
<div class="flex-between navheader-container flex-no-shrink"> <div class="antiNav-header">
<span class="fs-title overflow-label"><Label {label}></Label></span> <span class="fs-title overflow-label"><Label {label}></Label></span>
<!-- <ActionIcon label={workbench.string.More} icon={IconMoreH} size={'small'} {action}/> --> <!-- <ActionIcon label={workbench.string.More} icon={IconMoreH} size={'small'} {action}/> -->
</div> </div>
<style lang="scss">
.navheader-container {
padding: 0 1.75rem;
height: 4rem;
}
</style>

25
plugins/workbench-resources/src/components/SpaceContent.svelte
View File

@ -27,23 +27,12 @@
{#if viewlet} {#if viewlet}
{#key space} {#key space}
<div class="spacecontent-container"> <Component is={viewlet.$lookup?.descriptor?.component} props={ {
<Component is={viewlet.$lookup?.descriptor?.component} props={ { _class,
_class, space,
space, options: viewlet.options,
options: viewlet.options, config: viewlet.config,
config: viewlet.config, search
search } } />
} } />
</div>
{/key} {/key}
{/if} {/if}
<style lang="scss">
.spacecontent-container {
display: flex;
flex-direction: column;
min-height: 0;
height: 100%;
}
</style>

37
plugins/workbench-resources/src/components/SpaceHeader.svelte
View File

@ -55,16 +55,16 @@
</script> </script>
<div class="spaceheader-container"> <div class="ac-header full">
{#if space} {#if space}
<Header icon={classIcon(client, space._class)} label={space.name} description={space.description} /> <Header icon={classIcon(client, space._class)} label={space.name} description={space.description} />
{#if viewlets.length > 1} {#if viewlets.length > 1}
<div class="flex"> <div class="flex">
{#each viewlets as viewlet, i} {#each viewlets as viewlet, i}
<Tooltip label={viewlet.$lookup?.descriptor?.label} direction={'top'}> <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'}/> <Icon icon={viewlet.$lookup?.descriptor?.icon} size={'small'}/>
</div> </button>
</Tooltip> </Tooltip>
{/each} {/each}
</div> </div>
@ -77,34 +77,3 @@
{/if} {/if}
{/if} {/if}
</div> </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>

36
plugins/workbench-resources/src/components/Workbench.svelte
View File

@ -143,28 +143,20 @@
let employee: Employee | undefined let employee: Employee | undefined
const accountQ = createQuery() const accountQ = createQuery()
const employeeQ = createQuery() const employeeQ = createQuery()
$: accountQ.query( $: accountQ.query(contact.class.EmployeeAccount, {
contact.class.EmployeeAccount, _id: getCurrentAccount()._id as Ref<EmployeeAccount>
{ }, (res) => {
_id: getCurrentAccount()._id as Ref<EmployeeAccount> account = res[0]
}, }, { limit: 1 })
(res) => {
account = res[0]
},
{ limit: 1 }
)
$: account && $: account && employeeQ.query(contact.class.Employee, {
employeeQ.query( _id: account.employee
contact.class.Employee, }, (res) => {
{ employee = res[0]
_id: account.employee }, { limit: 1 })
},
(res) => { let isNavigate: boolean = false
employee = res[0] $: isNavigate = navigatorModel ? true : false
},
{ limit: 1 }
)
</script> </script>
{#if client} {#if client}
@ -219,7 +211,7 @@
/> />
</div> </div>
{/if} {/if}
<div class="antiPanel-component filled indent"> <div class="antiPanel-component indent antiComponent" class:filled={isNavigate}>
{#if currentApplication && currentApplication.component} {#if currentApplication && currentApplication.component}
<Component is={currentApplication.component} /> <Component is={currentApplication.component} />
{:else if specialComponent} {:else if specialComponent}