- Created on 2020-06-22, last edited by Dai Ha on 2020-06-22
I. Intro
Create a POC which implements a ControlPanel to replace current ActionBar
- POC requested via MGNLUI-5861 - Getting issue details... STATUS
- Mockup https://zpl.io/VqJdXjm
II. New ControlPanel
1. Class diagram
- Introduce ControlPanel which reads ControlPanelDefinition (and it sub/child definitions/implementation). This ControlPanel should be used as 1-1 replacement wherever a ActionBar need to be removed. Main component of ControlPanel is a TabSheet.
- TabPanel is a wrapped VerticalLayout which reads TabPanelDefinition for necessary nested actions/components. TabPanel presents a Tab of the TabSheet in ControlPanel .
- By default, there are PreviewTabPanel to present a TabPanel has preview control and GroupActionTabPanel to present a TabPanel with actions.
- The PreviewTabPanel communicates with DetailSubappPresenter by PreviewContext by manipulating PreviewPayload
Main code change on UI side: ControlPanel facilities
2. Usage in M6 Pages app
- Use M6 pages-app as one example to apply new control panel
- The changes that need to be done quite small on the side of pages-app
- Refer Pages app with control panel integrated
3. Sample configuration
actionbar-app
Expand source
icon: icon-webpages-app class: info.magnolia.ui.contentapp.configuration.ContentAppDescriptor appClass: info.magnolia.ui.framework.app.BaseApp datasource: $type: jcrDatasource workspace: website allowedNodeTypes: - mgnl:page subApps: browser: class: info.magnolia.ui.contentapp.configuration.BrowserDescriptor actions: add: $type: openDialogAction icon: icon-add-item populate: false dialogId: pages-app:createPage availability: root: true writePermissionRequired: true nodeTypes: page: mgnl:page rules: notDeleted: ¬Deleted $type: jcrIsDeletedRule negate: true confirmDeletion: $type: deleteNodesConfirmationAction icon: icon-delete successActionName: delete availability: multiple: true writePermissionRequired: true nodeTypes: page: mgnl:page rules: notDeleted: *notDeleted delete: $type: markAsDeletedAction availability: ¬DeletedAvailability rules: notDeleted: *notDeleted preview: icon: icon-instant_preview $type: openDetailSubappAction appName: pages-app subAppName: detail viewType: view availability: *notDeletedAvailability edit: &edit icon: icon-edit $type: openDetailSubappAction appName: actionbar-app subAppName: detail viewType: edit availability: *notDeletedAvailability rename: icon: icon-edit $type: openDialogAction dialogId: pages-app:renamePage availability: *notDeletedAvailability duplicate: icon: icon-duplicate $type: duplicateNodeAction availability: *notDeletedAvailability changeTemplate: icon: icon-templating-app $type: openDialogAction dialogId: pages-app:changePageTemplate availability: *notDeletedAvailability move: icon: icon-move class: info.magnolia.ui.contentapp.action.MoveActionDefinition availability: ¬DeletedMultipleAvailability multiple: true rules: notDeleted: *notDeleted copy: icon: icon-copy $type: copyContentAction availability: *notDeletedMultipleAvailability # paste: # icon: icon-paste # $type: pasteContentAction # availability: # root: true # nodeTypes: # page: mgnl:page # rules: # canPasteRule: # $type: canPasteContentRule # notDeleted: *notDeleted publish: &publish icon: icon-publish $type: jcrCommandAction command: publish catalog: versioned availability: rules: notDeleted: *notDeleted isPublishable: &isPublishable $type: jcrPublishableRule publishDeletion: icon: icon-publish $type: jcrCommandAction command: publish availability: multiple: true rules: isDeleted: &isDeleted $type: jcrIsDeletedRule negate: false publishRecursive: icon: icon-publish-incl-sub $type: jcrCommandAction command: publish asynchronous: true params: recursive: true availability: rules: notDeleted: *notDeleted hasSubPages: $type: jcrHasChildrenRule isPublishable: *isPublishable unpublish: &unpublish icon: icon-unpublish $type: jcrCommandAction command: unpublish availability: rules: notDeleted: *notDeleted isPublished: $type: jcrPublishedRule export: icon: icon-export $type: exportAction availability: *notDeletedAvailability import: icon: icon-import $type: openDialogAction dialogId: ui-framework-jcr:import availability: root: true rules: notDeleted: *notDeleted versionShow: icon: icon-show-versions $type: openDialogAction dialogId: pages-app:versions availability: rules: notDeleted: *notDeleted hasVersionsRule: &hasVersionsRule class: info.magnolia.ui.availability.rule.JcrHasVersionsRuleDefinition versionRestore: icon: icon-retrieve-versions $type: openDialogAction dialogId: ui-framework-jcr:restoreVersion availability: writePermissionRequired: true rules: hasVersionsRule: *hasVersionsRule isDeleted: *notDeleted restorePreviousVersion: icon: icon-undo parentNodeTypeOnly: true $type: restorePreviousJcrVersionAction availability: writePermissionRequired: true rules: hasVersionsRule: *hasVersionsRule isDeleted: *isDeleted showPreviousVersion: icon: icon-view $type: showPreviousJcrVersionAction appName: pages-app subAppName: detail viewType: version availability: writePermissionRequired: true rules: hasVersionsRule: *hasVersionsRule isDeleted: *isDeleted actionbar: defaultAction: edit deleteAction: confirmDeletion sections: - name: crud availability: root: true rules: notDeleted: *notDeleted groups: - name: add-delete items: - name: add - name: confirmDeletion - name: edit items: - name: preview - name: edit - name: rename - name: duplicate - name: changeTemplate - name: move - name: copy - name: paste - name: publish items: - name: publish - name: publishRecursive - name: unpublish - name: exportimport items: - name: export - name: import - name: versioning items: - name: versionShow - name: versionRestore - name: pageDelete availability: rules: isDeleted: *isDeleted groups: - name: add-delete items: - name: add - name: confirmDeletion - name: edit items: - name: preview - name: edit - name: rename - name: duplicate - name: changeTemplate - name: move - name: copy - name: paste - name: publish items: - name: publishDeletion - name: publishRecursive - name: unpublish - name: exportimport items: - name: export - name: import - name: versioning items: - name: showPreviousVersion - name: restorePreviousVersion workbench: contentViews: - name: tree dropConstraint: class: info.magnolia.pages.app.TemplateTypeRestrictionDropConstraintDefinition multiSelect: true $type: treeView columns: jcrName: &jcrNameColumn $type: jcrTitleColumn nodeTypeToIcon: mgnl:page: icon-webpages-app title: &titleColumn filterComponent: $type: textField mgnl:template: &templateColumn editable: false class: info.magnolia.pages.app.column.TemplateNameColumnDefinition filterComponent: $type: comboBoxField emptySelectionAllowed: true textInputAllowed: true filteringMode: CONTAINS datasource: name: available-page-templates jcrPublishingStatus: &activationStatusColumn $type: jcrStatusColumn width: 130 mgnl:lastModified: &lastModifiedColumn $type: dateColumn editable: false width: 200 - name: list $type: listView multiSelect: true columns: jcrName: *jcrNameColumn jcrPath: $type: jcrPathColumn title: *titleColumn mgnl:template: *templateColumn jcrPublishingStatus: *activationStatusColumn mgnl:lastModified: *lastModifiedColumn detail: class: info.magnolia.pages.app.detail.PageDetailDescriptor extensionViews: title: class: info.magnolia.pages.app.detail.extension.PageTitleViewDefinition status: class: info.magnolia.pages.app.detail.extension.PublishingStatusViewDefinition platform: class: info.magnolia.pages.app.detail.extension.PlatformSelectorViewDefinition link: class: info.magnolia.pages.app.detail.extension.NativePagePreviewLinkViewDefinition language: class: info.magnolia.pages.app.detail.extension.LanguageSelectorViewDefinition datasource: $type: jcrDatasource workspace: website itemProvider: $type: jcrNodeFromLocationProvider actions: editComponent: &edit icon: icon-edit class: info.magnolia.pages.app.detail.action.EditElementActionDefinition availability: rules: editable: &isEditable class: info.magnolia.pages.app.detail.action.availability.IsElementEditableRuleDefinition editPage: *edit editElement: *edit editArea: icon: icon-edit class: info.magnolia.pages.app.detail.action.EditElementActionDefinition availability: rules: editable: *isEditable created: class: info.magnolia.pages.app.detail.action.availability.IsAreaCreatedRuleDefinition startMoveComponent: class: info.magnolia.pages.app.detail.action.MoveComponentActionDefinition icon: icon-move start: true availability: rules: movable: class: info.magnolia.pages.app.detail.action.availability.IsComponentMovableRuleDefinition isNotMoving: class: info.magnolia.pages.app.detail.action.availability.IsComponentMovingRuleDefinition negate: true stopMoveComponent: class: info.magnolia.pages.app.detail.action.MoveComponentActionDefinition icon: icon-delete start: false serverSide: true availability: rules: isMoving: class: info.magnolia.pages.app.detail.action.availability.IsComponentMovingRuleDefinition sortComponent: class: info.magnolia.pages.app.detail.action.SortComponentActionDefinition preview: class: info.magnolia.pages.app.detail.action.ReopenPageActionDefinition appName: actionbar-app icon: icon-switch-preview viewType: view editMode: class: info.magnolia.pages.app.detail.action.ReopenPageActionDefinition appName: actionbar-app icon: icon-edit viewType: edit delete: class: info.magnolia.pages.app.detail.action.DeleteElementActionDefinition deleteComponent: icon: icon-delete $type: confirmationAction successActionName: delete availability: rules: deletable: class: info.magnolia.pages.app.detail.action.availability.IsComponentDeletableRuleDefinition deleteArea: icon: icon-delete $type: confirmationAction successActionName: delete availability: rules: isOptional: class: info.magnolia.pages.app.detail.action.availability.IsAreaOptionalRuleDefinition created: class: info.magnolia.pages.app.detail.action.availability.IsAreaCreatedRuleDefinition addArea: class: info.magnolia.pages.app.detail.action.CreateAreaActionDefinition icon: icon-add-item availability: rules: isOptional: class: info.magnolia.pages.app.detail.action.availability.IsAreaOptionalRuleDefinition notCreated: class: info.magnolia.pages.app.detail.action.availability.IsAreaCreatedRuleDefinition negate: true addComponent: $type: openDialogAction dialogId: pages-app:newComponent icon: icon-add-item availability: rules: addible: class: info.magnolia.pages.app.detail.action.availability.IsAreaAddibleRuleDefinition changeComponentTemplate: $type: openDialogAction dialogId: pages-app:componentTemplate icon: icon-edit copy: $type: copyContentAction icon: icon-copy availability: root: true rules: CanCopyContentRuleDefinition: class: info.magnolia.ui.contentapp.action.clipboard.CanCopyContentRuleDefinition paste: class: info.magnolia.pages.app.detail.action.PasteComponentsActionDefinition icon: icon-paste activate: *publish deactivate: *unpublish controlPanel: panels: edit: label: Edit panelActiveAction: editMode icon: icon-edit class: info.magnolia.ui.controlpanel.definition.GroupActionTabPanelDefinition sections: pageActions: groups: edit: items: - name: editPage - name: preview availability: nodeTypes: page: mgnl:page rules: inEdit: class: info.magnolia.pages.app.detail.action.availability.IsEditRuleDefinition pagePreviewActions: groups: preview: items: - name: editMode publish: items: - name: activate - name: deactivate availability: rules: inPreview: class: info.magnolia.pages.app.detail.action.availability.IsPreviewRuleDefinition areaActions: groups: preview: items: - name: preview addingActions: items: - name: addArea - name: deleteArea - name: addComponent edit: items: - name: editArea - name: copy - name: paste availability: nodeTypes: area: mgnl:area componentActions: groups: preview: items: - name: preview delete: items: - name: deleteComponent edit: items: - name: editComponent - name: changeComponentTemplate - name: startMoveComponent - name: stopMoveComponent - name: copy availability: nodeTypes: area: mgnl:component preview: label: Preview panelActiveAction: preview icon: icon-instant_preview class: info.magnolia.ui.controlpanel.definition.PreviewTabPanelDefinition previewPayloadClass: info.magnolia.ui.controlpanel.context.DefaultPreviewPayload fields: # channel: # $type: channelCompositeView template: $type: comboBoxField label: Template datasource: name: available-page-templates country: $type: comboBoxField label: Country datasource: $type: optionListDatasource options: - name: vi value: vn label: Vietnam - name: de value: de label: Germany visitorType: $type: comboBoxField label: Visistor Type datasource: $type: optionListDatasource options: - name: new-visistors value: new-visistors label: New visistors - name: public-users value: public-users label: Users date: $type: dateField label: Date travelInterest: $type: comboBoxField label: Travel Interest datasource: $type: optionListDatasource options: - name: active value: active label: Active - name: sporty value: Sporty label: Sporty
4. POC Outcome samples
- No labels
Overview
Content Tools
Apps
Activity