From 299d9a9541c09bf0440517812b7f65233d2f6644 Mon Sep 17 00:00:00 2001 From: Andrey Sobolev Date: Fri, 22 Apr 2022 13:30:34 +0700 Subject: [PATCH] Keyboard edit action (#1487) Signed-off-by: Andrey Sobolev --- models/view/src/index.ts | 3 ++ models/view/src/plugin.ts | 12 ++++-- packages/panel/src/components/Panel.svelte | 23 ++++++---- packages/theme/styles/components.scss | 2 +- packages/theme/styles/panel.scss | 1 - packages/ui/src/components/Panel.svelte | 42 +++++++++++++------ .../ui/src/components/PanelInstance.svelte | 3 ++ packages/ui/src/popups.ts | 4 +- .../src/components/BoardPresenter.svelte | 2 +- .../src/components/CardPresenter.svelte | 2 +- .../src/components/PersonsPresenter.svelte | 2 +- .../src/components/ReminderPresenter.svelte | 2 +- .../activity/ReminderViewlet.svelte | 2 +- .../EmployeeAccountPresenter.svelte | 2 +- .../components/OrganizationPresenter.svelte | 2 +- .../src/components/PersonContent.svelte | 2 +- .../src/components/ProductPresenter.svelte | 2 +- .../src/components/KanbanCard.svelte | 2 +- .../src/components/LeadPresenter.svelte | 2 +- .../components/ApplicationPresenter.svelte | 2 +- .../src/components/CandidateCard.svelte | 2 +- .../src/components/KanbanCard.svelte | 4 +- .../src/components/review/EditReview.svelte | 2 +- .../components/review/PersonsPresenter.svelte | 2 +- .../components/review/ReviewPresenter.svelte | 2 +- .../src/components/TaskPresenter.svelte | 2 +- .../src/components/issues/EditIssue.svelte | 2 +- plugins/view-resources/src/actionImpl.ts | 25 ++++++++--- .../src/components/ActionContext.svelte | 2 +- .../src/components/ActionHandler.svelte | 1 + .../src/components/EditDoc.svelte | 22 +++++++++- plugins/view-resources/src/selection.ts | 1 - plugins/view/src/index.ts | 3 ++ .../src/components/Workbench.svelte | 28 ++++++++----- 34 files changed, 146 insertions(+), 66 deletions(-) diff --git a/models/view/src/index.ts b/models/view/src/index.ts index 4dce8a40ec..1420d83bc4 100644 --- a/models/view/src/index.ts +++ b/models/view/src/index.ts @@ -289,6 +289,9 @@ export function createModel (builder: Builder): void { singleInput: true }) actionTarget(builder, view.action.ShowPreview, core.class.Doc, { mode: 'browser' }) + + createAction(builder, view.action.Edit, view.string.Edit, view.actionImpl.Edit, { keyBinding: ['Enter'], singleInput: true }) + actionTarget(builder, view.action.Edit, core.class.Doc, { mode: ['browser', 'context'] }) } export default view diff --git a/models/view/src/plugin.ts b/models/view/src/plugin.ts index f4433a24c2..17f6cd2152 100644 --- a/models/view/src/plugin.ts +++ b/models/view/src/plugin.ts @@ -34,7 +34,10 @@ export default mergeIds(viewId, view, { SelectDown: '' as Ref, ShowPreview: '' as Ref, - ShowActions: '' as Ref + ShowActions: '' as Ref, + + // Edit document + Edit: '' as Ref }, actionImpl: { Delete: '' as ViewAction, @@ -51,7 +54,9 @@ export default mergeIds(viewId, view, { SelectDown: '' as ViewAction, ShowPreview: '' as ViewAction, - ShowActions: '' as ViewAction + ShowActions: '' as ViewAction, + + Edit: '' as ViewAction }, component: { StringEditor: '' as AnyComponent, @@ -84,6 +89,7 @@ export default mergeIds(viewId, view, { SelectUp: '' as IntlString, SelectDown: '' as IntlString, ShowPreview: '' as IntlString, - ShowActions: '' as IntlString + ShowActions: '' as IntlString, + Edit: '' as IntlString } }) diff --git a/packages/panel/src/components/Panel.svelte b/packages/panel/src/components/Panel.svelte index 52191ca7cb..81df5f25db 100644 --- a/packages/panel/src/components/Panel.svelte +++ b/packages/panel/src/components/Panel.svelte @@ -32,18 +32,26 @@ let innerWidth = 0 - $: allowFullSize = innerWidth > 900 && position === 'full' + $: allowFullSize = innerWidth > 900 && (position === 'full' || position === 'content') $: isFullSize = allowFullSize && fullSize - - + + + + + - -
- +
+ +
+
+ +
+ +
@@ -65,7 +73,7 @@ }} />
- {/if} + {/if} {#if isFullSize} @@ -77,4 +85,3 @@ {/if} - diff --git a/packages/theme/styles/components.scss b/packages/theme/styles/components.scss index fe5db9df18..db52229b63 100644 --- a/packages/theme/styles/components.scss +++ b/packages/theme/styles/components.scss @@ -39,7 +39,7 @@ } &.mirror { justify-content: space-between; - padding: 0 2.5rem; + padding: 0 0.5rem; &-tool { justify-content: space-between; diff --git a/packages/theme/styles/panel.scss b/packages/theme/styles/panel.scss index 891b8f066f..cc6d40990f 100644 --- a/packages/theme/styles/panel.scss +++ b/packages/theme/styles/panel.scss @@ -42,7 +42,6 @@ top: 1.375rem; right: 2rem; &.grow-reverse { - left: 0px; display: flex; flex-direction: row-reverse; justify-content: flex-end; diff --git a/packages/ui/src/components/Panel.svelte b/packages/ui/src/components/Panel.svelte index 1fc22c0e26..98a73f7b02 100644 --- a/packages/ui/src/components/Panel.svelte +++ b/packages/ui/src/components/Panel.svelte @@ -26,16 +26,28 @@ export let rightSection: boolean = false export let reverseCommands = false export let showHeader = true + export let innerWidth: number = 0 const dispatch = createEventDispatcher() -
-
+
+
{#if showHeader}
-
+
+ { + dispatch('close') + }} /> +
+ {#if $$slots['navigate-actions']} + + {/if} +
{#if icon}
@@ -52,6 +64,20 @@
{/if}
+ {:else} +
+
+ { + dispatch('close') + }} /> +
+ {#if $$slots['navigate-actions']} + + {/if} +
{/if} {#if $$slots.subtitle}
@@ -69,21 +95,13 @@ {/if} -
+
{#if !rightSection && $$slots.commands}
{/if} -
- { - dispatch('close') - }} /> -
diff --git a/packages/ui/src/components/PanelInstance.svelte b/packages/ui/src/components/PanelInstance.svelte index 5cb2863185..a0c58312b6 100644 --- a/packages/ui/src/components/PanelInstance.svelte +++ b/packages/ui/src/components/PanelInstance.svelte @@ -70,6 +70,9 @@ afterUpdate(() => { if (props) fitPopup(props, contentPanel) }) + export function fitPopupInstance (): void { + if (props) fitPopup(props, contentPanel) + }
diff --git a/plugins/board-resources/src/components/CardPresenter.svelte b/plugins/board-resources/src/components/CardPresenter.svelte index 808d3647ca..e8ba4132b2 100644 --- a/plugins/board-resources/src/components/CardPresenter.svelte +++ b/plugins/board-resources/src/components/CardPresenter.svelte @@ -27,7 +27,7 @@
diff --git a/plugins/calendar-resources/src/components/PersonsPresenter.svelte b/plugins/calendar-resources/src/components/PersonsPresenter.svelte index 11ddfd41de..c7ca810a0b 100644 --- a/plugins/calendar-resources/src/components/PersonsPresenter.svelte +++ b/plugins/calendar-resources/src/components/PersonsPresenter.svelte @@ -28,7 +28,7 @@ $: persons = Array.isArray(value) ? value : [value] async function onClick (p: Person) { - showPanel(view.component.EditDoc, p._id, Hierarchy.mixinOrClass(p), 'full') + showPanel(view.component.EditDoc, p._id, Hierarchy.mixinOrClass(p), 'content') } diff --git a/plugins/calendar-resources/src/components/ReminderPresenter.svelte b/plugins/calendar-resources/src/components/ReminderPresenter.svelte index 26977afde2..ae599d2ef2 100644 --- a/plugins/calendar-resources/src/components/ReminderPresenter.svelte +++ b/plugins/calendar-resources/src/components/ReminderPresenter.svelte @@ -22,7 +22,7 @@ export let value: Reminder function click (): void { - showPanel(view.component.EditDoc, value._id, value._class, 'full') + showPanel(view.component.EditDoc, value._id, value._class, 'content') } const objectPresenter = getResource(view.component.ObjectPresenter) diff --git a/plugins/calendar-resources/src/components/activity/ReminderViewlet.svelte b/plugins/calendar-resources/src/components/activity/ReminderViewlet.svelte index c841368d81..4119e77ad8 100644 --- a/plugins/calendar-resources/src/components/activity/ReminderViewlet.svelte +++ b/plugins/calendar-resources/src/components/activity/ReminderViewlet.svelte @@ -29,7 +29,7 @@ } function click (event: Event): void { - showPanel(view.component.EditDoc, event._id, event._class, 'full') + showPanel(view.component.EditDoc, event._id, event._class, 'content') } diff --git a/plugins/contact-resources/src/components/EmployeeAccountPresenter.svelte b/plugins/contact-resources/src/components/EmployeeAccountPresenter.svelte index c69a48d9cf..4544cb6461 100644 --- a/plugins/contact-resources/src/components/EmployeeAccountPresenter.svelte +++ b/plugins/contact-resources/src/components/EmployeeAccountPresenter.svelte @@ -27,7 +27,7 @@ async function onClick () { if (employee !== undefined) { - showPopup(EditDoc, { _id: employee._id, _class: employee._class }, 'full') + showPopup(EditDoc, { _id: employee._id, _class: employee._class }, 'content') } } const client = getClient() diff --git a/plugins/contact-resources/src/components/OrganizationPresenter.svelte b/plugins/contact-resources/src/components/OrganizationPresenter.svelte index b4757d3830..a2f2105777 100644 --- a/plugins/contact-resources/src/components/OrganizationPresenter.svelte +++ b/plugins/contact-resources/src/components/OrganizationPresenter.svelte @@ -28,7 +28,7 @@
{value.name} diff --git a/plugins/contact-resources/src/components/PersonContent.svelte b/plugins/contact-resources/src/components/PersonContent.svelte index 74fe5982db..a363ba1683 100644 --- a/plugins/contact-resources/src/components/PersonContent.svelte +++ b/plugins/contact-resources/src/components/PersonContent.svelte @@ -32,7 +32,7 @@
diff --git a/plugins/inventory-resources/src/components/ProductPresenter.svelte b/plugins/inventory-resources/src/components/ProductPresenter.svelte index 5f0a0e4673..d4d848523f 100644 --- a/plugins/inventory-resources/src/components/ProductPresenter.svelte +++ b/plugins/inventory-resources/src/components/ProductPresenter.svelte @@ -27,7 +27,7 @@
{value.name} diff --git a/plugins/lead-resources/src/components/KanbanCard.svelte b/plugins/lead-resources/src/components/KanbanCard.svelte index 1e74d3b043..c142a0e8cd 100644 --- a/plugins/lead-resources/src/components/KanbanCard.svelte +++ b/plugins/lead-resources/src/components/KanbanCard.svelte @@ -33,7 +33,7 @@ } function showLead () { - showPanel(view.component.EditDoc, object._id, object._class, 'full') + showPanel(view.component.EditDoc, object._id, object._class, 'content') } diff --git a/plugins/lead-resources/src/components/LeadPresenter.svelte b/plugins/lead-resources/src/components/LeadPresenter.svelte index 3d5c3c3ace..1032f46a3c 100644 --- a/plugins/lead-resources/src/components/LeadPresenter.svelte +++ b/plugins/lead-resources/src/components/LeadPresenter.svelte @@ -27,7 +27,7 @@
diff --git a/plugins/recruit-resources/src/components/ApplicationPresenter.svelte b/plugins/recruit-resources/src/components/ApplicationPresenter.svelte index e4fc1c02f5..b3ff3b7a7f 100644 --- a/plugins/recruit-resources/src/components/ApplicationPresenter.svelte +++ b/plugins/recruit-resources/src/components/ApplicationPresenter.svelte @@ -32,7 +32,7 @@
diff --git a/plugins/recruit-resources/src/components/CandidateCard.svelte b/plugins/recruit-resources/src/components/CandidateCard.svelte index 3cde92ee31..f3db0946e2 100644 --- a/plugins/recruit-resources/src/components/CandidateCard.svelte +++ b/plugins/recruit-resources/src/components/CandidateCard.svelte @@ -45,7 +45,7 @@ {#if candidate}
{ - if (!disabled) showPanel(view.component.EditDoc, candidate._id, candidate._class, 'full') + if (!disabled) showPanel(view.component.EditDoc, candidate._id, candidate._class, 'content') }}>{formatName(candidate.name)}
{candidate.title ?? ''}
{candidate.city ?? ''}
diff --git a/plugins/recruit-resources/src/components/KanbanCard.svelte b/plugins/recruit-resources/src/components/KanbanCard.svelte index b9848e8256..20fa1c4d81 100644 --- a/plugins/recruit-resources/src/components/KanbanCard.svelte +++ b/plugins/recruit-resources/src/components/KanbanCard.svelte @@ -21,7 +21,7 @@ import { Avatar } from '@anticrm/presentation' import type { Applicant } from '@anticrm/recruit' import task, { TodoItem } from '@anticrm/task' - import { ActionIcon, Component, IconMoreH, showPanel, Tooltip } from '@anticrm/ui' + import { Component, showPanel, Tooltip } from '@anticrm/ui' import view from '@anticrm/view' import ApplicationPresenter from './ApplicationPresenter.svelte' @@ -29,7 +29,7 @@ export let dragged: boolean function showCandidate () { - showPanel(view.component.EditDoc, object.attachedTo, object.attachedToClass, 'full') + showPanel(view.component.EditDoc, object.attachedTo, object.attachedToClass, 'content') } $: todoItems = (object.$lookup?.todoItems as TodoItem[]) ?? [] diff --git a/plugins/recruit-resources/src/components/review/EditReview.svelte b/plugins/recruit-resources/src/components/review/EditReview.svelte index ddbfac766a..044c5727a8 100644 --- a/plugins/recruit-resources/src/components/review/EditReview.svelte +++ b/plugins/recruit-resources/src/components/review/EditReview.svelte @@ -56,7 +56,7 @@ />
{ if (candidate !== undefined) { - showPanel(view.component.EditDoc, candidate._id, candidate._class, 'full') + showPanel(view.component.EditDoc, candidate._id, candidate._class, 'content') } }}> diff --git a/plugins/recruit-resources/src/components/review/ReviewPresenter.svelte b/plugins/recruit-resources/src/components/review/ReviewPresenter.svelte index 9a31bd2734..a232b5aa2d 100644 --- a/plugins/recruit-resources/src/components/review/ReviewPresenter.svelte +++ b/plugins/recruit-resources/src/components/review/ReviewPresenter.svelte @@ -40,7 +40,7 @@
diff --git a/plugins/task-resources/src/components/TaskPresenter.svelte b/plugins/task-resources/src/components/TaskPresenter.svelte index 77b19b3526..1de7613c4a 100644 --- a/plugins/task-resources/src/components/TaskPresenter.svelte +++ b/plugins/task-resources/src/components/TaskPresenter.svelte @@ -31,7 +31,7 @@
diff --git a/plugins/tracker-resources/src/components/issues/EditIssue.svelte b/plugins/tracker-resources/src/components/issues/EditIssue.svelte index 6e05cac9d4..45d7d4a1d8 100644 --- a/plugins/tracker-resources/src/components/issues/EditIssue.svelte +++ b/plugins/tracker-resources/src/components/issues/EditIssue.svelte @@ -73,7 +73,7 @@ {/if} - +
+
{#if !headerLoading} {#if headerEditor !== undefined} diff --git a/plugins/view-resources/src/selection.ts b/plugins/view-resources/src/selection.ts index 6170c5a700..371e61a163 100644 --- a/plugins/view-resources/src/selection.ts +++ b/plugins/view-resources/src/selection.ts @@ -62,7 +62,6 @@ export function updateFocus (selection?: FocusSelection): void { cur.focus = selection?.focus cur.provider = selection?.provider ;(cur as any).now = now - console.log('update focus', selection?.focus) previewDocument.update(old => { if (old !== undefined) { return selection?.focus diff --git a/plugins/view/src/index.ts b/plugins/view/src/index.ts index c57c528d3f..0b2db71e67 100644 --- a/plugins/view/src/index.ts +++ b/plugins/view/src/index.ts @@ -130,6 +130,9 @@ export interface ActionTarget extends Doc { action: Ref query?: DocumentQuery context: ViewContext + + // If specified, will be used instead of action from Action. + override?: ViewAction } /** diff --git a/plugins/workbench-resources/src/components/Workbench.svelte b/plugins/workbench-resources/src/components/Workbench.svelte index 28fee9acf2..32612b1c4d 100644 --- a/plugins/workbench-resources/src/components/Workbench.svelte +++ b/plugins/workbench-resources/src/components/Workbench.svelte @@ -38,7 +38,7 @@ } from '@anticrm/ui' import { ActionContext, ActionHandler } from '@anticrm/view-resources' import type { Application, NavigatorModel, SpecialNavModel, ViewConfiguration } from '@anticrm/workbench' - import { onDestroy } from 'svelte' + import { onDestroy, tick } from 'svelte' import workbench from '../plugin' import AccountPopup from './AccountPopup.svelte' import AppItem from './AppItem.svelte' @@ -75,10 +75,16 @@ apps = result }) + let panelInstance: PanelInstance + let visibileNav: boolean = true async function toggleNav (): Promise { visibileNav = !visibileNav closeTooltip() + if (currentApplication && navigatorModel && navigator) { + await tick() + panelInstance.fitPopupInstance() + } } const account = getCurrentAccount() as EmployeeAccount @@ -262,7 +268,7 @@ const resizing = (event: MouseEvent): void => { if (isResizing && aside) { - let X = event.clientX - dX + const X = event.clientX - dX const newWidth = asideWidth + oldX - X if (newWidth > 320 && componentWidth - (oldX - X) > 320) { aside.style.width = aside.style.maxWidth = aside.style.minWidth = newWidth + 'px' @@ -313,16 +319,16 @@
-
+
- +
- +