IBX-2925: [D&D] Functionality and design improvements #435

GrabowskiM · 2022-05-25T11:07:06Z

Question	Answer
Tickets	https://issues.ibexa.co/browse/IBX-2925
Bug fix?	no
New feature?	no
BC breaks?	no
Tests pass?	yes
Doc needed?	no
License	GPL-2.0

Checklist:

Coding standards ($ composer fix-cs)
Ready for Code Review

lucasOsti · 2022-05-26T07:18:37Z

src/bundle/Resources/public/js/scripts/admin.contenttype.edit.js

@@ -120,6 +127,12 @@
            group.reinit();
        });
    };
+    const insertFieldDefinitionNode = (fieldNode) => {
+        const fieldDefinitionNode = createFieldDefinitionNode(fieldNode);


Suggested change

const fieldDefinitionNode = createFieldDefinitionNode(fieldNode);

const fieldDefinitionNode = createFieldDefinitionNode(fieldNode);

lucasOsti · 2022-05-26T07:18:58Z

src/bundle/Resources/public/js/scripts/admin.contenttype.edit.js

                insertFieldDefinitionNode(response);
                afterChangeGroup();
            })
-            .catch(ibexa.helpers.notification.showErrorNotification);
+            .catch((error) => {
+                const field = doc.querySelector('.ibexa-collapse--field-definition-loading');


Suggested change

const field = doc.querySelector('.ibexa-collapse--field-definition-loading');

const field = doc.querySelector('.ibexa-collapse--field-definition-loading');

lucasOsti · 2022-05-26T07:19:15Z

src/bundle/Resources/public/js/scripts/admin.contenttype.edit.js

+                const field = doc.querySelector('.ibexa-collapse--field-definition-loading');
+                setErrorField(field);
+                ibexa.helpers.notification.showErrorNotification(error);
+            });
    };
    const reorderFields = () => {
        insertFieldDefinitionNode(currentDraggedItem);



Suggested change

lucasOsti · 2022-05-26T07:23:42Z

src/bundle/Resources/public/js/scripts/admin.contenttype.edit.js

            const targetContainerGroup = targetContainer.closest('.ibexa-collapse--field-definitions-group');
+            const targetContainerList = targetContainerGroup.closest('.ibexa-content-type-edit__field-definitions-group-list');
+            const fieldTemplate = targetContainerList.dataset.template.replace('{{ type }}', currentDraggedItem.dataset.itemIdentifier);


Suggested change

const fieldTemplate = targetContainerList.dataset.template.replace('{{ type }}', currentDraggedItem.dataset.itemIdentifier);

const fieldTemplate = targetContainerList.dataset.template;

const fieldRendered = fieldTemplate.replace('{{ type }}', currentDraggedItem.dataset.itemIdentifier);

?

lucasOsti · 2022-05-26T07:24:57Z

src/bundle/Resources/public/js/scripts/admin.contenttype.edit.js

+                return false;
+            }
+
+            // 0 makes that item is always inserted before anchored placeholder


Suggested change

// 0 makes that item is always inserted before anchored placeholder

lucasOsti · 2022-05-26T07:25:33Z

src/bundle/Resources/public/js/scripts/admin.contenttype.edit.js

@@ -432,6 +534,7 @@
        draggable.init();
        draggableGroups.push(draggable);
    });
+    fieldDefinitionsGroups.forEach((group) => group.addEventListener('click', () => setActiveGroup(group)));


Suggested change

fieldDefinitionsGroups.forEach((group) => group.addEventListener('click', () => setActiveGroup(group)));

fieldDefinitionsGroups.forEach((group) => group.addEventListener('click', () => setActiveGroup(group), false));

lucasOsti · 2022-05-26T07:26:51Z

src/bundle/Resources/views/themes/admin/content_type/field_definitions.html.twig

+            'is_expanded': false,
+            'is_draggable': true,
+            'class': 'ibexa-collapse--field-definition ibexa-collapse--field-definition-highlight ibexa-collapse--field-definition-loading',
+            'body_id': 'loading_collapse',


Suggested change

'body_id': 'loading_collapse',

'body_id': 'loading-collapse',

src/bundle/Resources/public/scss/mixins/_drag-and-drop.scss

src/bundle/Resources/views/themes/admin/content_type/field_definitions.html.twig

src/bundle/Resources/public/js/scripts/admin.contenttype.edit.js

dew326 · 2022-10-11T07:21:17Z

src/bundle/Resources/views/themes/admin/content_type/available_field_types.html.twig

                class="ibexa-available-field-type"
                data-item-identifier="{{ item.identifier }}"
+            >
+            <div


indent?
and
is not draggable? how will it work, the li element will stay after drag?

in this case, these are field types in right sidebar, this element always stay in its place, as you can add it multiple times

tischsoic · 2022-10-10T08:33:30Z

src/bundle/Resources/views/themes/admin/ui/component/collapse.html.twig

@@ -28,7 +28,7 @@
                {% if extra_actions is defined %}
                    {% for action in extra_actions %}
                        <button type="button" class="ibexa-collapse__extra-action-button btn ibexa-btn ibexa-btn--no-text {{ action.button_class|default('') }}">
-                            <svg class="ibexa-icon ibexa-icon--small">
+                            <svg class="ibexa-icon {{ action.icon_size_class|default('ibexa-icon--small') }}">


A thought: icon_size_class seems to lack flexibility in case of future changes and new variables.

Do you think it would be better to do

<svg class="{{ action.icon_class|default('ibexa-icon ibexa-icon--small') }}">

and later pass 'icon_class': 'ibexa-icon ibexa-icon--tiny-small', ? Or treat ibexa-icon as class that is always and only change icon_size_class to icon_class?

tischsoic · 2022-10-10T08:48:54Z

src/bundle/Resources/public/scss/mixins/_drag-and-drop.scss

+        }
+    }
+
+    &--is-highlighted {


Whereas I understand that "action" classes like --is-dragging-out sound better with is, here and in other "non-action" classes below it is not needed in my opinion and it is not consistent with our other classes.

src/bundle/Resources/public/js/scripts/admin.contenttype.edit.js

katarzynazawada

There are some issues, I will list all on this PR

1. Content Types

make d&d icon black when hover (in all d&d places)

when editing Content Type unnecessary grey background at the end

field is "jumping" when adding it by click, see https://recordit.co/80Aj0VjDOv

2. Attributes in PC

blue shadow when hover attribute

when d&d all attribute group, attributes are not listed, cannot remove it, see please: https://recordit.co/xgclZ2BJyk
when d&d attribute(the only or last one) attribute group is still visible, after removing attribute it is not visible on the list again, see https://recordit.co/JB3CWGeF0s

3. Perso

blue background, no animations

4. Page Builder

no blue highlight after dropping element
no grey highlight after removing element, waiting for server response
no animation of removing element
issue when wrapping groups, see please: https://recordit.co/HcOlaG408y

5. Form Builder

issue when wrapping groups, see please: https://recordit.co/TXAIRCEk5d

katarzynazawada

There are still some issues.

When adding two fields quickly(when blue highlight is visible) error occurs https://recordit.co/QJgTgqD0hW
Blue indicator is not visible when adding a second or additional field https://recordit.co/sqDPluh9r0
Cannot quickly remove field from Form Builder https://recordit.co/xsqN5rKESh
Perso: missing blue indicator and remove animation https://recordit.co/zRRMgtVxqZ

sonarcloud · 2022-11-03T12:19:11Z

Kudos, SonarCloud Quality Gate passed!

0 Bugs
0 Vulnerabilities
0 Security Hotspots
7 Code Smells

No Coverage information
0.0% Duplication

GrabowskiM requested review from tischsoic, dew326 and lucasOsti May 25, 2022 11:07

github-actions bot assigned mikadamczyk, Nattfarinn and dew326 May 25, 2022

lucasOsti requested changes May 26, 2022

View reviewed changes

GrabowskiM marked this pull request as draft June 9, 2022 08:20

GrabowskiM force-pushed the IBX-2925-dnd-improvements branch 2 times, most recently from bc08e89 to a1e7f10 Compare September 16, 2022 10:23

GrabowskiM requested a review from lucasOsti September 16, 2022 10:23

GrabowskiM marked this pull request as ready for review September 16, 2022 10:26

lucasOsti requested changes Sep 27, 2022

View reviewed changes

GrabowskiM force-pushed the IBX-2925-dnd-improvements branch 2 times, most recently from 6bc76e4 to bf9ba83 Compare October 3, 2022 12:15

GrabowskiM requested a review from lucasOsti October 3, 2022 12:19

lucasOsti approved these changes Oct 3, 2022

View reviewed changes

dew326 requested a review from Gengar-i October 11, 2022 06:05

GrabowskiM force-pushed the IBX-2925-dnd-improvements branch from 33e828f to 7fad749 Compare October 11, 2022 07:09

dew326 requested changes Oct 11, 2022

View reviewed changes

tischsoic reviewed Oct 11, 2022

View reviewed changes

GrabowskiM requested review from tischsoic and dew326 October 12, 2022 12:53

tischsoic approved these changes Oct 12, 2022

View reviewed changes

dew326 approved these changes Oct 13, 2022

View reviewed changes

GrabowskiM added the Ready for QA label Oct 13, 2022

katarzynazawada requested changes Oct 18, 2022

View reviewed changes

GrabowskiM force-pushed the IBX-2925-dnd-improvements branch from e94b76b to 329bf0a Compare October 20, 2022 14:37

GrabowskiM requested a review from katarzynazawada October 21, 2022 09:22

katarzynazawada requested changes Oct 24, 2022

View reviewed changes

katarzynazawada approved these changes Nov 3, 2022

View reviewed changes

katarzynazawada added QA approved and removed Ready for QA labels Nov 3, 2022

GrabowskiM and others added 23 commits November 3, 2022 13:05

microinteractions

620ef0d

temp

f4f4f6f

errors

1227ed7

reverted errors

2eda850

dnd main class fix

7be88d4

fixes for PB

f42d690

fixes to dnd

dc6f84a

full placeholder

cd8bbdf

linter

1b88e98

fix tests

6efeb9a

[Behat] Adapted drag and drop tests

a81c621

fixup! [Behat] Adapted drag and drop tests

a37ea59

after cr

6c48a13

retain last frame of animation

005c06a

after cr

86aa401

after cr

5c9beaf

fixed dnd empty

c7a1d81

removed anchor

16df36f

adjust shadow

234ff33

fix placeholder position

15fc13b

fix multi drag

002223a

[Behat] Adapted tests

8bf7e08

after qa

cdd5fb9

GrabowskiM force-pushed the IBX-2925-dnd-improvements branch from 7e7aad9 to cdd5fb9 Compare November 3, 2022 12:16

dew326 merged commit 6f249aa into main Nov 3, 2022

dew326 deleted the IBX-2925-dnd-improvements branch November 3, 2022 12:18

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

IBX-2925: [D&D] Functionality and design improvements #435

IBX-2925: [D&D] Functionality and design improvements #435

GrabowskiM commented May 25, 2022

lucasOsti May 26, 2022

lucasOsti May 26, 2022

lucasOsti May 26, 2022

lucasOsti May 26, 2022

lucasOsti May 26, 2022

lucasOsti May 26, 2022

lucasOsti May 26, 2022

dew326 Oct 11, 2022

GrabowskiM Oct 11, 2022

tischsoic Oct 10, 2022

GrabowskiM Oct 11, 2022

tischsoic Oct 10, 2022

katarzynazawada left a comment •

edited

Loading

katarzynazawada left a comment •

edited

Loading

sonarcloud bot commented Nov 3, 2022

	const fieldDefinitionNode = createFieldDefinitionNode(fieldNode);
	const fieldDefinitionNode = createFieldDefinitionNode(fieldNode);

	const field = doc.querySelector('.ibexa-collapse--field-definition-loading');
	const field = doc.querySelector('.ibexa-collapse--field-definition-loading');

	const fieldTemplate = targetContainerList.dataset.template.replace('{{ type }}', currentDraggedItem.dataset.itemIdentifier);
	const fieldTemplate = targetContainerList.dataset.template;
	const fieldRendered = fieldTemplate.replace('{{ type }}', currentDraggedItem.dataset.itemIdentifier);

	fieldDefinitionsGroups.forEach((group) => group.addEventListener('click', () => setActiveGroup(group)));
	fieldDefinitionsGroups.forEach((group) => group.addEventListener('click', () => setActiveGroup(group), false));

	'body_id': 'loading_collapse',
	'body_id': 'loading-collapse',

IBX-2925: [D&D] Functionality and design improvements #435

IBX-2925: [D&D] Functionality and design improvements #435

Conversation

GrabowskiM commented May 25, 2022

Checklist:

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

katarzynazawada left a comment • edited Loading

Choose a reason for hiding this comment

katarzynazawada left a comment • edited Loading

Choose a reason for hiding this comment

sonarcloud bot commented Nov 3, 2022

katarzynazawada left a comment •

edited

Loading

katarzynazawada left a comment •

edited

Loading