Problem/Motivation

List of improvements in UI proposals based on #2868225-33: UI for mobile devices is not looking nice :

  1. Add a margin-bottom to "Show row weights" link: ideally, add padding to this button link so it is easier to hit on mobile.
  2. Align the label "Content" vertically to the row, this will bring more balance.
  3. The collapse icon might be a usability problem since most people won't recognize it and some be afraid to click on it without knowing what it does. 2 solutions:
    1. Show a tooltip in the first login to educate users.
    2. Show the button with the written label "Collapse".
  4. Locked paragraphs icons are confusing. The left one should also be on grey, since blue is the colour for action, and it does not trigger any action. For the right one, replace it by the same action buttons present in every line, but show them in disabled colour/status, showing evidently that these actions are not available for this element.
  5. As a follow-up for previous locked icons colour we should thing not to use blue colour at all because this colour is connected with action elements. We should either use some grey variation or some other colour.

Proposed resolution

Discuss first proposals and ideally create some screenshot prototypes.

Remaining tasks

Do it.

User interface changes

Mostly just improvements of the same stuff, we should not introduce new elements,

API changes

None.

Data model changes

CommentFileSizeAuthor
#6 2904402-right-lock-removal-proposal.png24.75 KBpivica

Comments

pivica created an issue. See original summary.

pivica’s picture

pivica commented

As an addition, there was a discussion to hide table drag elements because we now have dedicated drag&drop support. However, we can not do this by default because not everybody is using an experimental widget or activated the new drag&drop feature.

Probably we should hide default drag&drop elements only when new drag&drop feature is active and is working properly (user has installed Sortable library).

miro_dietiker’s picture

miro_dietiker
Location Switzerland
commented

Hiding the drag & drop element is related to flattening and sticky headers (to keep the user aware of the parents of the nesting).
Removing handles doesn't necessarily mean we need to flatten completely, but less indentation limits awareness.

I would only care about drag & drop improvements as a dedicated issue.

The proposal for written text needs mockup / design. Not sure how you intend to have it. We could also expand it on hover...

If Autocollapse mode is on, we should display the collapse button in blue as primary action.

Agree about the locks. Make them look more disabled / greyish.
The right lock is a pure indication by Paragraphs: "This row is locked for you. No actions available."
The left lock should not be displayed by Paragraphs itself. Instead, the Paragraphs Collection lock plugin should provide it and indicate "This row is locked (for people with lower permissions)."

Thus, as an admin, you never see the right lock and you need the lock in summary on the left side to understand what is locked for others.
We could also only output the lock by the behavior plugins summary lock if the user can edit the Paragraph. So it only appears once.

miro_dietiker’s picture

miro_dietiker
Location Switzerland
commented

Ah, we should care about removing the left lock from the summary in #2903489: Allow plugins to extend summary icons

pivica’s picture

pivica commented

> I would only care about drag & drop improvements as a dedicated issue.

Agree, will not mention it here anymore.

> The proposal for written text needs mockup / design. Not sure how you intend to have it.

I think the idea from @poornananda was to show info text just the first time user is using paragraphs edit UI and then hide it later or offer a close action like "don't show this information anymore".

> We could also expand it on hover...

We already have title attribute for this which works on hover, the problem is that hover implementation for touch devices (mobile) is still very broken. So we would need this only for small screen touch users. Not sure really how this would work for now.

> The right lock is a pure indication by Paragraphs

Yes except most control UIs will show the disabled state of the control and will not show a new control instead of the old one (or in our case new information) - meaning we just show dropdown control in disabled mode (3 dots, but light grey disable colour and you can not click it).

> The left lock should not be displayed by Paragraphs itself.

Yeah, this is related to #2903489: Allow plugins to extend summary icons.

pivica’s picture

pivica commented
StatusFileSize
new 2904402-right-lock-removal-proposal.png24.75 KB

Discussed with Miro couple of things, here is a screenshot of clarification of the right lock removal proposal:

Here we are a regular editor and first paragraph container is in a locked state. Instead of not showing actions at all and introduce new info lock element we will still show Edit button but in a disabled state.

An additional problem we figure it out here is that we are still not certain what 'locked' paragraph is actually - are we disabling all actions or we are just saying that other users can not edit/delete locked paragraphs. Also, other modules can introduce additional actions over plugins which don't need to be lockable.

One problem we have with the disabled Edit button is that we don't like how seven is styling disabled button. At least dimensions of disabled control should not be different from not disabled control. But this is something we can fix with custom CSS for our case.