From a8a8f80d620fe72de09305b9a154ee182c174bfa Mon Sep 17 00:00:00 2001 From: Alexander Platov Date: Wed, 30 Nov 2022 08:53:49 +0300 Subject: [PATCH] Update EditDoc layout (#2402) Signed-off-by: Alexander Platov --- models/contact/src/index.ts | 12 ++- models/view/src/index.ts | 1 + packages/panel/src/components/Panel.svelte | 5 +- packages/theme/styles/_layouts.scss | 2 + packages/theme/styles/panel.scss | 4 +- .../src/components/Attachments.svelte | 28 ++++++- .../src/components/Leads.svelte | 28 +++++-- .../src/components/Applications.svelte | 28 +++++-- .../src/components/EditApplication.svelte | 18 +++-- .../src/components/EditVacancy.svelte | 6 +- .../src/components/review/Reviews.svelte | 78 +++++++++++++------ .../src/components/todos/Todos.svelte | 52 +++++++++---- .../src/components/EditDoc.svelte | 78 ++++++++++++------- .../src/components/icons/Mixin.svelte | 32 ++++++++ .../src/components/icons/MoreV.svelte | 13 ++-- plugins/view/src/index.ts | 1 + 16 files changed, 277 insertions(+), 109 deletions(-) create mode 100644 plugins/view-resources/src/components/icons/Mixin.svelte diff --git a/models/contact/src/index.ts b/models/contact/src/index.ts index e9f56684a4..9997dc2dc9 100644 --- a/models/contact/src/index.ts +++ b/models/contact/src/index.ts @@ -225,7 +225,8 @@ export function createModel (builder: Builder): void { ) builder.mixin(contact.class.Member, core.class.Class, view.mixin.ObjectEditor, { - editor: contact.component.EditMember + editor: contact.component.EditMember, + pinned: true }) builder.createDoc( @@ -253,15 +254,18 @@ export function createModel (builder: Builder): void { ) builder.mixin(contact.class.Person, core.class.Class, view.mixin.ObjectEditor, { - editor: contact.component.EditPerson + editor: contact.component.EditPerson, + pinned: true }) builder.mixin(contact.class.Employee, core.class.Class, view.mixin.ObjectEditor, { - editor: contact.component.EditPerson + editor: contact.component.EditPerson, + pinned: true }) builder.mixin(contact.class.Organization, core.class.Class, view.mixin.ObjectEditor, { - editor: contact.component.EditOrganization + editor: contact.component.EditOrganization, + pinned: true }) builder.mixin(contact.class.Organization, core.class.Class, view.mixin.AttributeEditor, { diff --git a/models/view/src/index.ts b/models/view/src/index.ts index 816f17df04..70d8d8784e 100644 --- a/models/view/src/index.ts +++ b/models/view/src/index.ts @@ -136,6 +136,7 @@ export class TAttributePresenter extends TClass implements AttributePresenter { @Mixin(view.mixin.ObjectEditor, core.class.Class) export class TObjectEditor extends TClass implements ObjectEditor { editor!: AnyComponent + pinned?: boolean } @Mixin(view.mixin.ObjectEditorHeader, core.class.Class) diff --git a/packages/panel/src/components/Panel.svelte b/packages/panel/src/components/Panel.svelte index fc9ead5394..470d967f42 100644 --- a/packages/panel/src/components/Panel.svelte +++ b/packages/panel/src/components/Panel.svelte @@ -87,7 +87,7 @@ {#if $$slots.header}
{#if $$slots.header}{/if} -
+
@@ -95,6 +95,9 @@ {#if $$slots['custom-attributes'] && isCustomAttr} {#if isSub}
{/if} {/if} + {#if $$slots.subheader} + + {/if} diff --git a/packages/theme/styles/_layouts.scss b/packages/theme/styles/_layouts.scss index a8180a96cc..6d45308d49 100644 --- a/packages/theme/styles/_layouts.scss +++ b/packages/theme/styles/_layouts.scss @@ -368,6 +368,7 @@ input.search { .step-lr25 + .step-lr25 { margin-left: .25rem; } .step-lr75 + .step-lr75 { margin-left: .75rem; } .step-tb75 + .step-tb75 { margin-top: .75rem; } +.step-tb-6 + .step-tb-6 { margin-top: 1.5rem; } .ml-0-5 { margin-left: .125rem; } .ml-1 { margin-left: .25rem; } @@ -541,6 +542,7 @@ input.search { .max-h-50 { max-height: 12.5rem; } .max-h-60 { max-height: 15rem; } .max-h-125 { max-height: 31.25rem; } +.max-h-30vh { max-height: 30vh; } .clear-mins { min-width: 0; min-height: 0; diff --git a/packages/theme/styles/panel.scss b/packages/theme/styles/panel.scss index c873906fd3..2bddea3d87 100644 --- a/packages/theme/styles/panel.scss +++ b/packages/theme/styles/panel.scss @@ -161,7 +161,7 @@ flex-shrink: 0; padding: .5rem .75rem .75rem; width: 100%; - min-width: 700px; + min-width: 320px; } &.bottom-divider { border-bottom: 1px solid var(--divider-color); } @@ -179,7 +179,7 @@ } .popupPanel-body__mobile-content { padding: .5rem; - min-width: 700px; + min-width: 320px; } &__aside { diff --git a/plugins/attachment-resources/src/components/Attachments.svelte b/plugins/attachment-resources/src/components/Attachments.svelte index ffd1983038..de3a2de284 100644 --- a/plugins/attachment-resources/src/components/Attachments.svelte +++ b/plugins/attachment-resources/src/components/Attachments.svelte @@ -15,7 +15,7 @@ --> -
+
(wSection = element.clientWidth)}>
@@ -70,6 +71,29 @@
+ {:else if wSection < 640} + + { + attachments = evt.detail.length + }} + /> + {:else}
import type { Ref } from '@hcengineering/core' import type { Customer } from '@hcengineering/lead' - import { Button, IconAdd, Label, showPopup } from '@hcengineering/ui' + import { Button, IconAdd, Label, showPopup, resizeObserver, Scroller } from '@hcengineering/ui' import { Table } from '@hcengineering/view-resources' import lead from '../plugin' import CreateLead from './CreateLead.svelte' @@ -27,9 +27,10 @@ const createLead = (ev: MouseEvent): void => { showPopup(CreateLead, { candidate: objectId, preserveCandidate: true }, ev.target as HTMLElement) } + let wSection: number -
+
(wSection = element.clientWidth)}>
{#if leads !== undefined && leads > 0} -
+ {#if wSection < 640} + +
+ + {:else} +
+ {/if} {:else}
diff --git a/plugins/recruit-resources/src/components/Applications.svelte b/plugins/recruit-resources/src/components/Applications.svelte index 5c8d312002..6a9addde42 100644 --- a/plugins/recruit-resources/src/components/Applications.svelte +++ b/plugins/recruit-resources/src/components/Applications.svelte @@ -14,7 +14,7 @@ --> -
+
(wSection = element.clientWidth)}>
@@ -51,12 +52,23 @@
{#if applications > 0} -
+ {#if wSection < 640} + +
+ + {:else} +
+ {/if} {:else}
diff --git a/plugins/recruit-resources/src/components/EditApplication.svelte b/plugins/recruit-resources/src/components/EditApplication.svelte index a55b982afc..db6f00fd1e 100644 --- a/plugins/recruit-resources/src/components/EditApplication.svelte +++ b/plugins/recruit-resources/src/components/EditApplication.svelte @@ -17,6 +17,7 @@ import { createEventDispatcher, onMount } from 'svelte' import { createQuery } from '@hcengineering/presentation' import type { Candidate, Applicant, Vacancy } from '@hcengineering/recruit' + import { Scroller } from '@hcengineering/ui' import CandidateCard from './CandidateCard.svelte' import VacancyCard from './VacancyCard.svelte' import ExpandRightDouble from './icons/ExpandRightDouble.svelte' @@ -51,11 +52,13 @@ {#if object !== undefined && candidate !== undefined} -
-
-
-
-
+ +
+
+
+
+
+
@@ -63,11 +66,14 @@ diff --git a/plugins/recruit-resources/src/components/EditVacancy.svelte b/plugins/recruit-resources/src/components/EditVacancy.svelte index 85ec0bb144..bcf07cbec8 100644 --- a/plugins/recruit-resources/src/components/EditVacancy.svelte +++ b/plugins/recruit-resources/src/components/EditVacancy.svelte @@ -66,7 +66,7 @@ icon={clazz.icon} title={object.name} subtitle={object.description} - isHeader={false} + isHeader={true} isAside={true} {object} on:close={() => { @@ -88,7 +88,7 @@ {/if} - + - +
diff --git a/plugins/recruit-resources/src/components/review/Reviews.svelte b/plugins/recruit-resources/src/components/review/Reviews.svelte index cdc9207c00..82f9bee17e 100644 --- a/plugins/recruit-resources/src/components/review/Reviews.svelte +++ b/plugins/recruit-resources/src/components/review/Reviews.svelte @@ -17,7 +17,7 @@ import core from '@hcengineering/core' import { IntlString } from '@hcengineering/platform' import calendar from '@hcengineering/calendar' - import { Button, IconAdd, Label, showPopup } from '@hcengineering/ui' + import { Button, IconAdd, Label, showPopup, resizeObserver, Scroller } from '@hcengineering/ui' import { Table } from '@hcengineering/view-resources' import recruit from '../../plugin' import FileDuo from '../icons/FileDuo.svelte' @@ -30,9 +30,10 @@ const createApp = (ev: MouseEvent): void => { showPopup(CreateReview, { candidate: objectId, preserveCandidate: true }, ev.target as HTMLElement) } + let wSection: number -
+
(wSection = element.clientWidth)}>
{#if reviews > 0} -
+ {#if wSection < 640} + +
+ + {:else} +
+ {/if} {:else}
diff --git a/plugins/task-resources/src/components/todos/Todos.svelte b/plugins/task-resources/src/components/todos/Todos.svelte index 31b312c37f..1a3fdb5008 100644 --- a/plugins/task-resources/src/components/todos/Todos.svelte +++ b/plugins/task-resources/src/components/todos/Todos.svelte @@ -16,7 +16,7 @@ import type { Ref, Space, Doc, Class } from '@hcengineering/core' import type { TodoItem } from '@hcengineering/task' import { createQuery } from '@hcengineering/presentation' - import { Button, IconAdd, showPopup, Label } from '@hcengineering/ui' + import { Button, IconAdd, showPopup, Label, resizeObserver, Scroller } from '@hcengineering/ui' import CreateTodo from './CreateTodo.svelte' import { Table } from '@hcengineering/view-resources' @@ -37,9 +37,10 @@ const createApp = (ev: MouseEvent): void => { showPopup(CreateTodo, { objectId, _class, space }, ev.target as HTMLElement) } + let wSection: number -
+
(wSection = element.clientWidth)}>
{#if todos.length > 0} -
+ {#if wSection < 640} + +
+ + {:else} +
+ {/if} {:else}
diff --git a/plugins/view-resources/src/components/EditDoc.svelte b/plugins/view-resources/src/components/EditDoc.svelte index e84d5e2c01..cfd6b1b163 100644 --- a/plugins/view-resources/src/components/EditDoc.svelte +++ b/plugins/view-resources/src/components/EditDoc.svelte @@ -36,6 +36,7 @@ import ActionContext from './ActionContext.svelte' import DocAttributeBar from './DocAttributeBar.svelte' import UpDownNavigator from './UpDownNavigator.svelte' + import IconMixin from './icons/Mixin.svelte' export let _id: Ref export let _class: Ref> @@ -131,14 +132,19 @@ fieldEditors = editors.sort((a, b) => AttributeCategoryOrder[a.category] - AttributeCategoryOrder[b.category]) } - async function getEditor (_class: Ref>): Promise { + interface MixinEditor { + editor: AnyComponent + pinned?: boolean + } + + async function getEditor (_class: Ref>): Promise { const clazz = hierarchy.getClass(_class) const editorMixin = hierarchy.as(clazz, view.mixin.ObjectEditor) if (editorMixin?.editor == null && clazz.extends != null) return getEditor(clazz.extends) - return editorMixin.editor + return { editor: editorMixin.editor, pinned: editorMixin?.pinned } } - let mainEditor: AnyComponent | undefined + let mainEditor: MixinEditor | undefined $: getEditorOrDefault(realObjectClass, showAllMixins) async function getEditorOrDefault (_class: Ref>, showAllMixins: boolean): Promise { @@ -252,7 +258,7 @@ {icon} {title} {object} - isHeader={false} + isHeader={mainEditor?.pinned ?? false} isAside={true} bind:panelWidth bind:innerWidth @@ -265,7 +271,7 @@ - +
@@ -282,17 +288,7 @@ }} > - - - - - +
@@ -317,23 +313,45 @@ {/if} - {#if mainEditor} - { - ignoreKeys = ev.detail.ignoreKeys - ignoreMixins = new Set(ev.detail.ignoreMixins) - allowedCollections = ev.detail.allowedCollections ?? [] - collectionArrays = ev.detail.collectionArrays ?? [] - getMixins(parentClass, object, showAllMixins) - updateKeys(showAllMixins) - }} - /> + + {#if mainEditor && mainEditor.pinned} +
+ { + ignoreKeys = ev.detail.ignoreKeys + ignoreMixins = new Set(ev.detail.ignoreMixins) + allowedCollections = ev.detail.allowedCollections ?? [] + collectionArrays = ev.detail.collectionArrays ?? [] + getMixins(parentClass, object, showAllMixins) + updateKeys(showAllMixins) + }} + /> +
+ {/if} + + + {#if mainEditor && !mainEditor.pinned} +
+ { + ignoreKeys = ev.detail.ignoreKeys + ignoreMixins = new Set(ev.detail.ignoreMixins) + allowedCollections = ev.detail.allowedCollections ?? [] + collectionArrays = ev.detail.collectionArrays ?? [] + getMixins(parentClass, object, showAllMixins) + updateKeys(showAllMixins) + }} + /> +
{/if} + {#each fieldEditors as collection} {#if collection.editor} -
+
+ + + + + + + diff --git a/plugins/view-resources/src/components/icons/MoreV.svelte b/plugins/view-resources/src/components/icons/MoreV.svelte index fc44eb512e..47d98ed640 100644 --- a/plugins/view-resources/src/components/icons/MoreV.svelte +++ b/plugins/view-resources/src/components/icons/MoreV.svelte @@ -1,21 +1,22 @@ diff --git a/plugins/view/src/index.ts b/plugins/view/src/index.ts index b5d3824716..a9fb44dca3 100644 --- a/plugins/view/src/index.ts +++ b/plugins/view/src/index.ts @@ -133,6 +133,7 @@ export interface AttributePresenter extends Class { */ export interface ObjectEditor extends Class { editor: AnyComponent + pinned?: boolean } /**