[CONTEDIT-71] Change "Add-block" pop-up dialog to icon bar Created: 22/Mar/17  Updated: 30/May/17  Resolved: 02/May/17

Status: Closed
Project: Content Editor
Component/s: None
Affects Version/s: None
Fix Version/s: 1.0.3

Type: Improvement Priority: Neutral
Reporter: Andreas Weder Assignee: Cedric Reichenbach
Resolution: Fixed Votes: 0
Labels: None
Remaining Estimate: Not Specified
Time Spent: Not Specified
Original Estimate: Not Specified

Attachments: PNG File 01 AE iconbar.png     PNG File 02 AE dialog.png     PNG File bug_position.png     PNG File bug_safari.png     PNG File embeb.png    
Issue Links:
Relates
relates to CONTEDIT-107 Inline block picker doesn't order AND... Closed
relates to MGNLUI-4255 Add new icons for inline block picker... Closed
supersession
supersedes CONTEDIT-94 Add block icon missing above the firs... Closed
Template:
Acceptance criteria:
Empty
Task DoD:
[ ]* Doc/release notes changes? Comment present?
[ ]* Downstream builds green?
[ ]* Solution information and context easily available?
[ ]* Tests
[ ]* FixVersion filled and not yet released
[ ]  Architecture Decision Record (ADR)
Documentation update required:
Yes
Date of First Response:
Epic Link: Content Editor fine-tuning
Sprint: Basel 90, Basel 91, Basel 92, Basel 93, Basel 94
Story Points: 13

 Description   

When you click on the +-icon we currently use a light dialog to provide users with a list of blocks they can add to the article. The "add block" menu is originally designed as an in-place visual icon-bar. This story is about adding the icon-bar when clicking the add button. It is a light-weight, visual menu that opens in-place (at the position where you click on the button) and features icons for the most commonly used blocks. Only when you click on the three dots (…) the light dialog opens. The dialog is still needed for the case if i.e. the list of block types needs to be extended.

The "add block" icon bar:

  • offers icons for text, image, video, tweet and general embed blocks
  • has the focus set on "image" by default, i.e. when you open the menu, so that you may quickly add an image by just hitting "ENTER"



 Comments   
Comment by Andreas Weder [ 22/Mar/17 ]

avongunten I've marked this issue as blocked, as there are two issues that still have to be solved or at least answered:

  1. How do I add a text block?
  2. Do we need a "more blocks" icon as well?

Add a text block needed?

This might be needed after a non-text block, e.g. after an embed, if there's no placeholder block, or in-between two images, if you intend to add a text there. Also, the "add block" menu should probably show all block options, not only non-text ones.

"More blocks" option needed?

It is perfectly valid to require that all blocks are represented by icons. Experience shows that there's always customers with many blocks or components, for which such a menu does not scale, however, most often because they have too many blocks: the more icons there are, the less effective such a menu works.

So it might be an option to add a "more blocks" or "all blocks" icon as the last entry, that falls back to open a light dialog (as we currently do) that shows the list of all blocks. In this scenario, the visual icon would only feature an icon for the most commonly used blocks.

Comment by Anja von Gunten [ 30/Mar/17 ]

I have answered the questions in the description and mockups. See above.

Comment by Anja von Gunten [ 07/Apr/17 ]

The icon for "embed content from another website" as shown in the mockup above should be replaced by this one:

The current one is more commonly used to create a link within a text.
This one is known for embed.

Comment by Cedric Reichenbach [ 26/Apr/17 ]

Docs: As of this change, each block has an icon, specified by a string property icon in its definition and a default if not set. The icon string refers to an icon font CSS class, analogous to what the icon property of app descriptors does.

Comment by Anja von Gunten [ 27/Apr/17 ]

In QA gefunden:

1. Safari stellt Icon und Picker nicht richtig dar

2. Position des Blocks nach Auswahl im Picker stimmt nicht
Manchmal setzt er den gewählten Block nicht an richtiger Stelle ein sondern zb. 2 Blocks weiter oben. Um es zu reproduzieren: Ich habe Text mit mehreren Paragraphen von einem txt File rein kopiert und dann den Picker benutzt. Da schien die Position, wo der gewählte Block eingesetzt wird, nicht mehr zu stimmen.

Generated at Mon Feb 12 00:16:47 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.