Allow end users to magnify certain Compose page blocks [PlanID:2023.3/18/2.7]

[darh]

Integrators can configure certain block types to allow magnification, showing the content of the block inside a modal window or in fullscreen mode (not an actual new page, just extending block boundaries to the edge of the window.

• [x] Add a dropdown element with options to a general tab on the existing block
  • [x] Options: Disabled, Show in a modal window, Show in a full window
  • [x] Block types where magnification is enabled:
    • [x] calendar
    • [x] chart
    • [x] content
    • [x] comments
    • [x] file
    • [x] iframe
    • [x] record list
    • [x] report
    • [x] record revisions
• [x] Add support for modal window
• [x] Add support for full window mode
• [x] Show magnifying glass 🔍 icon in the top right corner of the block with enabled magnification
• [x] Preserve the magnification status of a block in the URL; when the user refreshes the browser, Compose must magnify the block again

[yonkov]

Pull request at: https://github.com/cortezaproject/corteza/pull/576

[yonkov]

Changelog

What was added?

The administrators can now add an option to magnify certain page blocks when viewing a public Compose page. In order to do this, a select dropdown has been added in the general tab of page block configuration modal for the following blocks: calendar, chart, content, comments, file, iframe, record list, report and record revisions. If the administrator has selected the Fullwidth or Modal select option, when the user goes to a public page, the user will see a magnify icon at the top of the block. Upon clicking on that icon, he will be able to magnify the block to a regular modal or fullwidth modal.

How was added?

Magnify icon has been added to the page block wrap component and a select dropdown has been added to the block configurator. An event is being emitted from the wrap component, cointaining the block id. Upon clicking to the magnifying icon, the event is being passed and the modal is triggered. It gets the block id from the event and the page and namespace as props from the current page. In this way, the correct block is being displayed inside the modal.

Why was added?

Adding an option to magnify certain page blocks increases user experience and user satisfaction. This option should help users to find the info they are looking for much faster and easier.

[Bojan-Svirkov]

Everything works as expected. Moving the card to Done and @yonkov when you merge everything feel free to close the issue.