Collapsible menu UX changes for "Remove" and "Edit" actions [#2850026]

Problem/Motivation

The goal here is to move remove button inside the collapsible button with other actions, and to move edit outside of it. There are multiple reasons for this:

X icon is mostly used as a "cancel" action and using it here as a delete can be misleading;
After clicking on "Edit" paragraph, it makes sense that the "Edit" icon is in focus, and that other icons are inside collapsible menu.

Now that #2829316: Implement "duplicate paragraphs" feature is committed, we should proceed to work on the changes on the collapsible button. Screenshot will be added.

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes

Comment	File	Size	Author
#9	interdiff-2850026-8-9.txt	4.72 KB	toncic
#9	collapsible_menu_ux-2850026-9.patch	5.73 KB	toncic
#9	8.x-1.x: PHP 5.5 & MySQL 5.5, D8.4 149 pass PHP 7 & MySQL 5.5, D8.4 149 pass
#8	interdiff-2850026-6-7.txt	2.31 KB	toncic
#8	collapsible_menu_ux-2850026-7.patch	6.18 KB	toncic
#8	8.x-1.x: PHP 5.5 & MySQL 5.5, D8.4 149 pass PHP 7 & MySQL 5.5, D8.4 149 pass
#6	interdiff-2850026-3-6.txt	1.56 KB	toncic
#6	collapsible_menu_ux-2850026-6.patch	5.62 KB	toncic
#6	8.x-1.x: PHP 5.5 & MySQL 5.5, D8.4 143 pass, 14 fail PHP 7 & MySQL 5.5, D8.4 143 pass, 14 fail
#3	collapsible_after.png	39.36 KB	toncic
#3	collapsible_menu_ux-2850026-3.patch	5.52 KB	toncic
#3	8.x-1.x: PHP 5.5 & MySQL 5.5, D8.4 143 pass, 14 fail PHP 7 & MySQL 5.5, D8.4 143 pass, 14 fail

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #1

6 February 2017 at 08:55

drobnjak created an issue. See original summary.

Comment #2

toncic CreditAttribution: toncic at MD Systems GmbH commented 6 February 2017 at 14:13

Assigned:

Unassigned

» toncic

Comment #3

toncic CreditAttribution: toncic at MD Systems GmbH commented 6 February 2017 at 14:31

Issue summary:	View changes
Status:	Active	» Needs review

File	Size
collapsible_menu_ux-2850026-3.patch	5.52 KB
8.x-1.x: PHP 5.5 & MySQL 5.5, D8.4 143 pass, 14 fail PHP 7 & MySQL 5.5, D8.4 143 pass, 14 fail
collapsible_after.png	39.36 KB

I did some changes and there is a screenshot how is looking now.

Comment #4

drobnjak CreditAttribution: drobnjak at MD Systems GmbH commented 6 February 2017 at 14:42

Status:

Needs review

» Needs work

+++ b/src/Plugin/Field/FieldWidget/ParagraphsWidget.php
@@ -380,37 +380,39 @@ class ParagraphsWidget extends WidgetBase {
+        if ($item_mode!= 'edit') {

Space missing.

+++ b/src/Plugin/Field/FieldWidget/ParagraphsWidget.php
@@ -380,37 +380,39 @@ class ParagraphsWidget extends WidgetBase {
+          $button_access = $paragraphs_entity->access('delete') && !$this->isTranslating;

This line shouldn't be in if statement.

Comment #5

drobnjak CreditAttribution: drobnjak at MD Systems GmbH commented 6 February 2017 at 14:44

+++ b/css/paragraphs.widget.css
@@ -92,32 +92,9 @@
+  .js .paragraphs-edit-button-container .js .paragraphs-edit-button-container

We shouldn't remove height and width properties here. Also here we are targeting button with the parent container, not container itself.

Comment #6

toncic CreditAttribution: toncic at MD Systems GmbH commented 6 February 2017 at 15:46

Status:

Needs work

» Needs review

File	Size
collapsible_menu_ux-2850026-6.patch	5.62 KB
8.x-1.x: PHP 5.5 & MySQL 5.5, D8.4 143 pass, 14 fail PHP 7 & MySQL 5.5, D8.4 143 pass, 14 fail
interdiff-2850026-3-6.txt	1.56 KB

Did small changes from previous comments.

Comment #7

6 February 2017 at 15:50

Status:

Needs review

» Needs work

The last submitted patch, 6: collapsible_menu_ux-2850026-6.patch, failed testing.

Comment #8

toncic CreditAttribution: toncic at MD Systems GmbH commented 7 February 2017 at 13:36

Status:

Needs work

» Needs review

File	Size
collapsible_menu_ux-2850026-7.patch	6.18 KB
8.x-1.x: PHP 5.5 & MySQL 5.5, D8.4 149 pass PHP 7 & MySQL 5.5, D8.4 149 pass
interdiff-2850026-6-7.txt	2.31 KB

Fixing test failing.

Comment #9

toncic CreditAttribution: toncic at MD Systems GmbH commented 8 February 2017 at 10:42

File	Size
collapsible_menu_ux-2850026-9.patch	5.73 KB
8.x-1.x: PHP 5.5 & MySQL 5.5, D8.4 149 pass PHP 7 & MySQL 5.5, D8.4 149 pass
interdiff-2850026-8-9.txt	4.72 KB

When I was checking previous patch I noticed that I am adding remove button twice. I changed that, and now is looking much better.

Comment #10

drobnjak CreditAttribution: drobnjak at MD Systems GmbH commented 8 February 2017 at 13:59

Status:

Needs review

» Reviewed & tested by the community

Applied patch and tested. Works as it is defined in the issue. I will add follow-ups for this.

Comment #11

miro_dietiker

Switzerland

CreditAttribution: miro_dietiker at MD Systems GmbH commented 8 February 2017 at 16:41

Status:

Reviewed & tested by the community

» Needs work

I can't see the Duplicate button anymore ... Strange, i also can't see it without this change...
The issue was committed before! :-!

Comment #12

8 February 2017 at 16:59

miro_dietiker committed 4edcb72 on 8.x-1.x authored by toncic

Issue #2850026 by toncic, drobnjak: Collapsible menu UX changes for "...

Comment #13

miro_dietiker

Switzerland

CreditAttribution: miro_dietiker at MD Systems GmbH commented 8 February 2017 at 16:59

OK, i checked wrong widget.

Committed as a small step.

Still, i'm confused why i still can only duplicate a paragraph when closed. When i switched to edit, the action is gone. Needs an update or follow-up. Close when created.