From f01f30fc1dea630d1b97877f1aa775b26baabda3 Mon Sep 17 00:00:00 2001 From: Alexander Platov Date: Thu, 3 Feb 2022 16:16:15 +0700 Subject: [PATCH] Update layouts, icons. CSS optimize (#926) Signed-off-by: Alexander Platov --- .../src/components/AttributesBar.svelte | 7 +- packages/theme/styles/common.scss | 8 ++ packages/theme/styles/components.scss | 74 ++++++++++++-- packages/ui/src/components/CheckBox.svelte | 10 +- .../src/components/Contacts.svelte | 90 +++++------------ plugins/inventory-assets/assets/icons.svg | 25 ++--- plugins/inventory-assets/lang/en.json | 4 +- .../src/components/Categories.svelte | 67 ++----------- .../src/components/ProductPresenter.svelte | 22 +---- .../src/components/Products.svelte | 97 ++++--------------- .../src/components/Customers.svelte | 80 ++++----------- .../src/components/Candidates.svelte | 86 ++++------------ .../src/components/Integrations.svelte | 14 +-- .../src/components/Password.svelte | 2 +- .../src/components/Privacy.svelte | 2 +- .../src/components/Profile.svelte | 2 +- .../src/components/Setting.svelte | 2 +- .../src/components/Support.svelte | 2 +- .../src/components/Terms.svelte | 2 +- .../components/statuses/ManageStatuses.svelte | 2 +- .../src/components/TaskHeader.svelte | 7 +- .../src/components/Templates.svelte | 2 +- .../src/components/Table.svelte | 2 +- .../src/components/Header.svelte | 39 +------- .../src/components/NavHeader.svelte | 9 +- .../src/components/SpaceContent.svelte | 25 ++--- .../src/components/SpaceHeader.svelte | 37 +------ .../src/components/Workbench.svelte | 36 +++---- 28 files changed, 236 insertions(+), 519 deletions(-) diff --git a/packages/presentation/src/components/AttributesBar.svelte b/packages/presentation/src/components/AttributesBar.svelte index 696fb46e23..16331cf669 100644 --- a/packages/presentation/src/components/AttributesBar.svelte +++ b/packages/presentation/src/components/AttributesBar.svelte @@ -21,12 +21,13 @@ export let object: Doc export let keys: (string|KeyedAttribute)[] + export let showHeader: boolean = true -
+
{#each keys as key} -
- +
+
{/each}
diff --git a/packages/theme/styles/common.scss b/packages/theme/styles/common.scss index 4c24fa4a5c..23d8412979 100644 --- a/packages/theme/styles/common.scss +++ b/packages/theme/styles/common.scss @@ -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; diff --git a/packages/theme/styles/components.scss b/packages/theme/styles/components.scss index d11626f17a..6acfd483ff 100644 --- a/packages/theme/styles/components.scss +++ b/packages/theme/styles/components.scss @@ -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; } diff --git a/packages/ui/src/components/CheckBox.svelte b/packages/ui/src/components/CheckBox.svelte index 0f3bb70838..efd4046bfb 100644 --- a/packages/ui/src/components/CheckBox.svelte +++ b/packages/ui/src/components/CheckBox.svelte @@ -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'} - - {:else} - + {#if checked} + {#if symbol === 'minus'} + + {:else} + + {/if} {/if} diff --git a/plugins/contact-resources/src/components/Contacts.svelte b/plugins/contact-resources/src/components/Contacts.svelte index 01e0c268a4..1b366b2c6d 100644 --- a/plugins/contact-resources/src/components/Contacts.svelte +++ b/plugins/contact-resources/src/components/Contacts.svelte @@ -39,75 +39,31 @@ } -
-
-
- - +
+
+
+
+
+ + { + updateResultQuery(search) + }}/> +
- - { - updateResultQuery(search) - }}/> -
-
-
- - {#await tableDescriptor then descr} - {#if descr} - - {/if} - {/await} + + {#await tableDescriptor then descr} + {#if descr} +
+ {/if} + {/await} - +
- - diff --git a/plugins/inventory-assets/assets/icons.svg b/plugins/inventory-assets/assets/icons.svg index 79c76c5aaa..9e77c4644e 100644 --- a/plugins/inventory-assets/assets/icons.svg +++ b/plugins/inventory-assets/assets/icons.svg @@ -1,21 +1,14 @@ - - - - - - - - + + - - + + - - - - - - + + + + + diff --git a/plugins/inventory-assets/lang/en.json b/plugins/inventory-assets/lang/en.json index 06c7261e8a..cba08ff82a 100644 --- a/plugins/inventory-assets/lang/en.json +++ b/plugins/inventory-assets/lang/en.json @@ -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", diff --git a/plugins/inventory-resources/src/components/Categories.svelte b/plugins/inventory-resources/src/components/Categories.svelte index b30d8ea902..7018d728da 100644 --- a/plugins/inventory-resources/src/components/Categories.svelte +++ b/plugins/inventory-resources/src/components/Categories.svelte @@ -15,7 +15,7 @@ --> -
-
-
- - -
+
+
+
+
{ @@ -46,59 +44,14 @@ }}/>
-
-
- - - -
-
- - + + + +
diff --git a/plugins/inventory-resources/src/components/ProductPresenter.svelte b/plugins/inventory-resources/src/components/ProductPresenter.svelte index adf27826b3..85315d89a4 100644 --- a/plugins/inventory-resources/src/components/ProductPresenter.svelte +++ b/plugins/inventory-resources/src/components/ProductPresenter.svelte @@ -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 @@ {#if value} -
- -
{value.name}
+
+
+ {value.name}
{/if} - - diff --git a/plugins/inventory-resources/src/components/Products.svelte b/plugins/inventory-resources/src/components/Products.svelte index 332989bb41..4abf931335 100644 --- a/plugins/inventory-resources/src/components/Products.svelte +++ b/plugins/inventory-resources/src/components/Products.svelte @@ -14,7 +14,7 @@ // limitations under the License. --> -
-
-
- - -
+
+
+ +
-
-
- - {#await tableDescriptor then descr} - {#if descr} -
- {/if} - {/await} - - - - - + + {#await tableDescriptor then descr} + {#if descr} +
+ {/if} + {/await} + +
diff --git a/plugins/lead-resources/src/components/Customers.svelte b/plugins/lead-resources/src/components/Customers.svelte index 87b88fa69a..a924293b7f 100644 --- a/plugins/lead-resources/src/components/Customers.svelte +++ b/plugins/lead-resources/src/components/Customers.svelte @@ -33,12 +33,10 @@ } -
-
-
- - -
+
+
+
+
{ @@ -46,59 +44,17 @@ }}/>
-
-
- - {#await tableDescriptor then descr} - {#if descr} -
- {/if} - {/await} - - - - + + {#await tableDescriptor then descr} + {#if descr} +
+ {/if} + {/await} + +
diff --git a/plugins/recruit-resources/src/components/Candidates.svelte b/plugins/recruit-resources/src/components/Candidates.svelte index 72dbf6a1dc..cf8d48a9df 100644 --- a/plugins/recruit-resources/src/components/Candidates.svelte +++ b/plugins/recruit-resources/src/components/Candidates.svelte @@ -40,73 +40,29 @@ -
-
-
- - -
+
+
+
+
- + { updateResultQuery(search) - }}/> -
-
-
- - {#await tableDescriptor then descr} - {#if descr} -
- {/if} - {/await} - - - - + + {#await tableDescriptor then descr} + {#if descr} +
+ {/if} + {/await} + +
diff --git a/plugins/setting-resources/src/components/Integrations.svelte b/plugins/setting-resources/src/components/Integrations.svelte index 2176336423..336f9d503e 100644 --- a/plugins/setting-resources/src/components/Integrations.svelte +++ b/plugins/setting-resources/src/components/Integrations.svelte @@ -32,23 +32,13 @@
-
+
-
+
{#each integrationTypes as integrationType (integrationType._id)} p.type === integrationType._id)} {integrationType} /> {/each}
- - diff --git a/plugins/setting-resources/src/components/Password.svelte b/plugins/setting-resources/src/components/Password.svelte index 73f1755f5c..6a6b3414b6 100644 --- a/plugins/setting-resources/src/components/Password.svelte +++ b/plugins/setting-resources/src/components/Password.svelte @@ -41,7 +41,7 @@
-
+
diff --git a/plugins/setting-resources/src/components/Privacy.svelte b/plugins/setting-resources/src/components/Privacy.svelte index 6011d175fc..a6619e456f 100644 --- a/plugins/setting-resources/src/components/Privacy.svelte +++ b/plugins/setting-resources/src/components/Privacy.svelte @@ -19,7 +19,7 @@
-
+
diff --git a/plugins/setting-resources/src/components/Profile.svelte b/plugins/setting-resources/src/components/Profile.svelte index b109b1fcb8..1997dfdc74 100644 --- a/plugins/setting-resources/src/components/Profile.svelte +++ b/plugins/setting-resources/src/components/Profile.svelte @@ -89,7 +89,7 @@
-
+
diff --git a/plugins/setting-resources/src/components/Setting.svelte b/plugins/setting-resources/src/components/Setting.svelte index 5d5fae956e..2dae5e4be4 100644 --- a/plugins/setting-resources/src/components/Setting.svelte +++ b/plugins/setting-resources/src/components/Setting.svelte @@ -19,7 +19,7 @@
-
+
diff --git a/plugins/setting-resources/src/components/Support.svelte b/plugins/setting-resources/src/components/Support.svelte index 2e8fb70bd5..f31feed05e 100644 --- a/plugins/setting-resources/src/components/Support.svelte +++ b/plugins/setting-resources/src/components/Support.svelte @@ -19,7 +19,7 @@
-
+
diff --git a/plugins/setting-resources/src/components/Terms.svelte b/plugins/setting-resources/src/components/Terms.svelte index 6db7df7904..ee2f3f509e 100644 --- a/plugins/setting-resources/src/components/Terms.svelte +++ b/plugins/setting-resources/src/components/Terms.svelte @@ -19,7 +19,7 @@
-
+
diff --git a/plugins/setting-resources/src/components/statuses/ManageStatuses.svelte b/plugins/setting-resources/src/components/statuses/ManageStatuses.svelte index 008905cbbe..44c33a87d1 100644 --- a/plugins/setting-resources/src/components/statuses/ManageStatuses.svelte +++ b/plugins/setting-resources/src/components/statuses/ManageStatuses.svelte @@ -53,7 +53,7 @@
-
+
diff --git a/plugins/task-resources/src/components/TaskHeader.svelte b/plugins/task-resources/src/components/TaskHeader.svelte index 0f4dce92d1..8bbedf6824 100644 --- a/plugins/task-resources/src/components/TaskHeader.svelte +++ b/plugins/task-resources/src/components/TaskHeader.svelte @@ -16,7 +16,7 @@
-
+
diff --git a/plugins/view-resources/src/components/Table.svelte b/plugins/view-resources/src/components/Table.svelte index 37469a8d9f..f3aeb14ef6 100644 --- a/plugins/view-resources/src/components/Table.svelte +++ b/plugins/view-resources/src/components/Table.svelte @@ -127,7 +127,7 @@
0}> 0} on:change={(e) => { objects.map((o) => check(o._id, e)) }} diff --git a/plugins/workbench-resources/src/components/Header.svelte b/plugins/workbench-resources/src/components/Header.svelte index 223b2a4292..93b69809fd 100644 --- a/plugins/workbench-resources/src/components/Header.svelte +++ b/plugins/workbench-resources/src/components/Header.svelte @@ -22,39 +22,10 @@ export let description: IntlString | undefined -
-
- {#if icon }{/if} - +
+
+ {#if icon }
{/if} +
- {#if description }
{description}
{/if} + {#if description }{description}{/if}
- - diff --git a/plugins/workbench-resources/src/components/NavHeader.svelte b/plugins/workbench-resources/src/components/NavHeader.svelte index 650370721f..068963b008 100644 --- a/plugins/workbench-resources/src/components/NavHeader.svelte +++ b/plugins/workbench-resources/src/components/NavHeader.svelte @@ -21,14 +21,7 @@ // export let action: () => Promise | void -
+
- - diff --git a/plugins/workbench-resources/src/components/SpaceContent.svelte b/plugins/workbench-resources/src/components/SpaceContent.svelte index 15eef5bd28..38aad528dd 100644 --- a/plugins/workbench-resources/src/components/SpaceContent.svelte +++ b/plugins/workbench-resources/src/components/SpaceContent.svelte @@ -27,23 +27,12 @@ {#if viewlet} {#key space} -
- -
+ {/key} {/if} - - diff --git a/plugins/workbench-resources/src/components/SpaceHeader.svelte b/plugins/workbench-resources/src/components/SpaceHeader.svelte index 4f9e259cc5..14161aa03e 100644 --- a/plugins/workbench-resources/src/components/SpaceHeader.svelte +++ b/plugins/workbench-resources/src/components/SpaceHeader.svelte @@ -55,16 +55,16 @@ -
+
{#if space}
{#if viewlets.length > 1}
{#each viewlets as viewlet, i} -
{ selectedViewlet = i }}> +
+ {/each}
@@ -77,34 +77,3 @@ {/if} {/if}
- - diff --git a/plugins/workbench-resources/src/components/Workbench.svelte b/plugins/workbench-resources/src/components/Workbench.svelte index 635e3945fb..54285ddac0 100644 --- a/plugins/workbench-resources/src/components/Workbench.svelte +++ b/plugins/workbench-resources/src/components/Workbench.svelte @@ -143,28 +143,20 @@ let employee: Employee | undefined const accountQ = createQuery() const employeeQ = createQuery() - $: accountQ.query( - contact.class.EmployeeAccount, - { - _id: getCurrentAccount()._id as Ref - }, - (res) => { - account = res[0] - }, - { limit: 1 } - ) + $: accountQ.query(contact.class.EmployeeAccount, { + _id: getCurrentAccount()._id as Ref + }, (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 {#if client} @@ -219,7 +211,7 @@ />
{/if} -
+
{#if currentApplication && currentApplication.component} {:else if specialComponent}