IBX-1789: Moved actions inside iframe in COTF (#149)

ibexa · Dec 30, 2021 · 737fa34 · 737fa34
1 parent 71a060c
commit 737fa34
Show file tree

Hide file tree

Showing 7 changed files with 68 additions and 103 deletions.
diff --git a/src/bundle/Resources/public/scss/ui/modules/universal-discovery/_content.create.scss b/src/bundle/Resources/public/scss/ui/modules/universal-discovery/_content.create.scss
@@ -5,6 +5,7 @@
         width: 100%;
         height: 100%;
         border: none;
+        border-radius: $ibexa-border-radius;
     }
 
     &__actions {
@@ -17,16 +18,4 @@
     &__cancel-button {
         margin-right: calculateRem(16px);
     }
-
-    &--footer-visible {
-        .m-content-create {
-            &__iframe {
-                height: calc(100% - #{calculateRem(60px)});
-            }
-
-            &__actions {
-                display: flex;
-            }
-        }
-    }
 }
diff --git a/src/bundle/Resources/public/scss/ui/modules/universal-discovery/_content.edit.scss b/src/bundle/Resources/public/scss/ui/modules/universal-discovery/_content.edit.scss
@@ -1,16 +1,11 @@
 .c-content-edit {
-    position: fixed;
-    left: 0;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    z-index: 5;
-    background-color: $ibexa-color-white;
+    height: 100%;
 
     &__iframe {
         width: 100%;
         height: 100%;
         border: none;
+        border-radius: $ibexa-border-radius;
     }
 
     &__actions {
@@ -23,16 +18,4 @@
     &__cancel-button {
         margin-right: calculateRem(16px);
     }
-
-    &--footer-visible {
-        .c-content-edit {
-            &__iframe {
-                height: calc(100% - #{calculateRem(60px)});
-            }
-
-            &__actions {
-                display: flex;
-            }
-        }
-    }
 }
diff --git a/src/bundle/Resources/translations/content_edit.en.xliff b/src/bundle/Resources/translations/content_edit.en.xliff
@@ -36,6 +36,16 @@
         <target state="new">Translating the %fieldName% Field is disabled. See Content Type definition for details.</target>
         <note>key: fieldtype.translation_is_disabled</note>
       </trans-unit>
+      <trans-unit id="39b4081643351e2a41c1b3b811b6dc78fb528520" resname="on_the_fly.cancel">
+        <source>Cancel</source>
+        <target state="new">Cancel</target>
+        <note>key: on_the_fly.cancel</note>
+      </trans-unit>
+      <trans-unit id="d466f97702d045f02d8b55379a9c6ea5270ecfef" resname="on_the_fly.confirm">
+        <source>Confirm</source>
+        <target state="new">Confirm</target>
+        <note>key: on_the_fly.confirm</note>
+      </trans-unit>
     </body>
   </file>
 </xliff>
diff --git a/src/bundle/Resources/translations/messages.en.xliff b/src/bundle/Resources/translations/messages.en.xliff
@@ -443,16 +443,6 @@
         <target state="new">Reset your password</target>
         <note>key: ezplatform.forgot_user_password.reset_your_password</note>
       </trans-unit>
-      <trans-unit id="36aa6723300a41ba80ee0096c0d2bcf34fd48aca" resname="ezplatform.forgot_user_password.success">
-        <source><![CDATA[<p>If you don’t receive the email, double check that you entered the correct email address and check your spam folder.</p>]]></source>
-        <target state="new"><![CDATA[<p>If you don’t receive the email, double check that you entered the correct email address and check your spam folder.</p>]]></target>
-        <note>key: ezplatform.forgot_user_password.success</note>
-      </trans-unit>
-      <trans-unit id="67603c970498409206e016279f7842369822af72" resname="ezplatform.forgot_user_password.success.alert">
-        <source>We’ve sent to your email account a link to reset your password.</source>
-        <target state="new">We’ve sent to your email account a link to reset your password.</target>
-        <note>key: ezplatform.forgot_user_password.success.alert</note>
-      </trans-unit>
       <trans-unit id="40dd2934190789b016771a0fc3b41dcdfe0bb920" resname="ezplatform.reset_user_password.change_password">
         <source>Change password</source>
         <target state="new">Change password</target>
@@ -498,6 +488,21 @@
         <target state="new">Search...</target>
         <note>key: header.search</note>
       </trans-unit>
+      <trans-unit id="1c83b9fb831b59adffc151e074e3940afb422d59" resname="ibexa.forgot_user_password.reset_your_password">
+        <source>Reset your password</source>
+        <target state="new">Reset your password</target>
+        <note>key: ibexa.forgot_user_password.reset_your_password</note>
+      </trans-unit>
+      <trans-unit id="621bf74d73c79b7c57b8a0ce6f46e3069e237ba6" resname="ibexa.forgot_user_password.success">
+        <source><![CDATA[<p>If you don’t receive the email, double check that you entered the correct email address and check your spam folder.</p>]]></source>
+        <target state="new"><![CDATA[<p>If you don’t receive the email, double check that you entered the correct email address and check your spam folder.</p>]]></target>
+        <note>key: ibexa.forgot_user_password.success</note>
+      </trans-unit>
+      <trans-unit id="7c3724a02caf347d184892eab61db61ec54c1439" resname="ibexa.forgot_user_password.success.alert">
+        <source>We’ve sent to your email account a link to reset your password.</source>
+        <target state="new">We’ve sent to your email account a link to reset your password.</target>
+        <note>key: ibexa.forgot_user_password.success.alert</note>
+      </trans-unit>
       <trans-unit id="8390c7c1adbff8a264583f6f060256c993023787" resname="language.delete">
         <source>Delete language</source>
         <target state="new">Delete language</target>

diff --git a/src/bundle/Resources/views/themes/admin/ui/on_the_fly/edit_on_the_fly.html.twig b/src/bundle/Resources/views/themes/admin/ui/on_the_fly/edit_on_the_fly.html.twig
@@ -9,6 +9,31 @@
 {% endblock %}
 
 {% set without_close_button = true %}
+{% set context_actions %}
+    <ul class="ibexa-context-menu">
+        <li class="ibexa-context-menu__item ibexa-adaptive-items__item">
+            <button class="btn ibexa-btn ibexa-btn--primary ibexa-btn--confirm">
+                <span class="ibexa-btn__label">{{ 'on_the_fly.confirm'|trans()|desc('Confirm') }}</span>
+            </button>
+        </li>
+        <li class="ibexa-context-menu__item ibexa-adaptive-items__item">
+            <button class="btn ibexa-btn ibexa-btn--secondary ibexa-btn--cancel">
+                <span class="ibexa-btn__label">{{'on_the_fly.cancel'|trans()|desc('Cancel') }}</span>
+            </button>
+        </li>
+        <li class="ibexa-context-menu__item ibexa-context-menu__item--more ibexa-adaptive-items__item ibexa-adaptive-items__item--selector">
+            <button class="btn ibexa-btn ibexa-btn--secondary ibexa-btn--no-text ibexa-btn--more">
+                <svg class="ibexa-icon ibexa-icon--small">
+                    <use xlink:href="{{ ibexa_icon_path('options') }}"></use>
+                </svg>
+            </button>
+
+            {{ include('@ibexadesign/ui/component/popup_menu/popup_menu.html.twig', {
+                'items': [],
+            }) }}
+        </li>
+    </ul>
+{% endset %}
 
 {% block header %}
     {% include '@ibexadesign/ui/edit_header.html.twig' with {
@@ -18,6 +43,7 @@
         show_autosave_status: true,
         description: content_type.description,
         subtitle: 'editing_details'|trans({ '%location_name%': parent_location.contentInfo.name, '%language%': language.name })|desc('under %location_name% in %language%'),
+        context_actions: context_actions,
     } %}
 {% endblock %}
 

diff --git a/src/bundle/ui-dev/src/modules/universal-discovery/content.create.tab.module.js b/src/bundle/ui-dev/src/modules/universal-discovery/content.create.tab.module.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useContext, createRef } from 'react';
+import React, { useContext, createRef } from 'react';
 
 import {
     ContentOnTheFlyDataContext,
@@ -25,7 +25,6 @@ const generateIframeUrl = ({ locationId, languageCode, contentTypeIdentifier })
 };
 
 const ContentCreateTabModule = () => {
-    const [footerVisible, setFooterVisible] = useState(true);
     const [contentOnTheFlyData, setContentOnTheFlyData] = useContext(ContentOnTheFlyDataContext);
     const tabs = useContext(TabsContext);
     const contentOnTheFlyConfig = useContext(ContentOnTheFlyConfigContext);
@@ -53,6 +52,9 @@ const ContentCreateTabModule = () => {
     };
     const handleIframeLoad = () => {
         const locationId = iframeRef.current.contentWindow.document.querySelector('meta[name="LocationID"]');
+        const iframeBody = iframeRef.current.contentWindow.document.body;
+        const iframeConfirmBtn = iframeBody.querySelector('.ibexa-context-menu .ibexa-btn--confirm');
+        const iframeCancelBtn = iframeBody.querySelector('.ibexa-context-menu .ibexa-btn--cancel');
 
         if (locationId) {
             findLocationsById({ ...restInfo, id: parseInt(locationId.content, 10) }, (createdItems) => {
@@ -79,43 +81,15 @@ const ContentCreateTabModule = () => {
             });
         }
 
-        const iframeBody = iframeRef.current.contentWindow.document.body;
-        const iframeCancelButton = iframeBody.querySelector('.ibexa-anchor-navigation-menu__back');
-
-        iframeBody.addEventListener('ibexa-udw-opened', hideFooter, false);
-        iframeBody.addEventListener('ibexa-udw-closed', showFooter, false);
-        iframeCancelButton.addEventListener('click', cancelContentCreate, false);
+        iframeConfirmBtn?.addEventListener('click', publishContent, false);
+        iframeCancelBtn?.addEventListener('click', cancelContentCreate, false);
     };
-    const hideFooter = () => setFooterVisible(false);
-    const showFooter = () => setFooterVisible(true);
     const cancelLabel = Translator.trans(/*@Desc("Cancel")*/ 'content_create.cancel.label', {}, 'universal_discovery_widget');
     const confirmLabel = Translator.trans(/*@Desc("Confirm")*/ 'content_create.confirm.label', {}, 'universal_discovery_widget');
-    const className = createCssClassNames({
-        'm-content-create': true,
-        'm-content-create--footer-visible': footerVisible,
-    });
-
-    useEffect(() => {
-        window.document.body.addEventListener('ibexa-udw-hide-footer', hideFooter, false);
-        window.document.body.addEventListener('ibexa-udw-show-footer', showFooter, false);
-
-        return () => {
-            window.document.body.removeEventListener('ibexa-udw-hide-footer', hideFooter, false);
-            window.document.body.removeEventListener('ibexa-udw-show-footer', showFooter, false);
-        };
-    });
 
     return (
-        <div className={className}>
+        <div className="m-content-create">
             <iframe src={iframeUrl} className="m-content-create__iframe" ref={iframeRef} onLoad={handleIframeLoad} />
-            <div className="m-content-create__actions">
-                <button className="m-content-create__cancel-button btn ibexa-btn ibexa-btn--secondary" onClick={cancelContentCreate}>
-                    {cancelLabel}
-                </button>
-                <button className="m-content-create__confirm-button btn ibexa-btn ibexa-btn--primary" onClick={publishContent}>
-                    {confirmLabel}
-                </button>
-            </div>
         </div>
     );
 };

diff --git a/src/bundle/ui-dev/src/modules/universal-discovery/content.edit.tab.module.js b/src/bundle/ui-dev/src/modules/universal-discovery/content.edit.tab.module.js
@@ -1,4 +1,4 @@
-import React, { useRef, useContext, useState, useEffect } from 'react';
+import React, { useRef, useContext } from 'react';
 
 import {
     TabsContext,
@@ -13,7 +13,6 @@ import deepClone from '../common/helpers/deep.clone.helper';
 import { createCssClassNames } from '../common/helpers/css.class.names';
 
 const ContentEditTabModule = () => {
-    const [footerVisible, setFooterVisible] = useState(true);
     const restInfo = useContext(RestInfoContext);
     const tabs = useContext(TabsContext);
     const [activeTab, setActiveTab] = useContext(ActiveTabContext);
@@ -70,16 +69,17 @@ const ContentEditTabModule = () => {
     };
     const handleIframeLoad = () => {
         const locationId = iframeRef.current.contentWindow.document.querySelector('meta[name="LocationID"]');
+        const iframeBody = iframeRef.current.contentWindow.document.body;
+        const iframeConfirmBtn = iframeBody.querySelector('.ibexa-context-menu .ibexa-btn--confirm');
+        const iframeCancelBtn = iframeBody.querySelector('.ibexa-context-menu .ibexa-btn--cancel');
 
         if (locationId) {
             handleContentPublished(parseInt(locationId.content, 10));
         }
 
-        iframeRef.current.contentWindow.document.body.addEventListener('ibexa-udw-opened', hideFooter, false);
-        iframeRef.current.contentWindow.document.body.addEventListener('ibexa-udw-closed', showFooter, false);
+        iframeConfirmBtn?.addEventListener('click', publishContent, false);
+        iframeCancelBtn?.addEventListener('click', cancelContentEdit, false);
     };
-    const hideFooter = () => setFooterVisible(false);
-    const showFooter = () => setFooterVisible(true);
     const iframeUrl = window.Routing.generate(
         'ezplatform.content_on_the_fly.edit',
         {
@@ -90,32 +90,10 @@ const ContentEditTabModule = () => {
         },
         true
     );
-    const className = createCssClassNames({
-        'c-content-edit': true,
-        'c-content-edit--footer-visible': footerVisible,
-    });
-
-    useEffect(() => {
-        window.document.body.addEventListener('ibexa-udw-hide-footer', hideFooter, false);
-        window.document.body.addEventListener('ibexa-udw-show-footer', showFooter, false);
-
-        return () => {
-            window.document.body.removeEventListener('ibexa-udw-hide-footer', hideFooter, false);
-            window.document.body.removeEventListener('ibexa-udw-show-footer', showFooter, false);
-        };
-    });
 
     return (
-        <div className={className}>
+        <div className="c-content-edit">
             <iframe src={iframeUrl} className="c-content-edit__iframe" ref={iframeRef} onLoad={handleIframeLoad} />
-            <div className="c-content-edit__actions">
-                <button className="c-content-edit__cancel-button btn ibexa-btn ibexa-btn--secondary" onClick={cancelContentEdit}>
-                    {cancelLabel}
-                </button>
-                <button className="c-content-edit__confirm-button btn ibexa-btn ibexa-btn--primary" onClick={publishContent}>
-                    {confirmLabel}
-                </button>
-            </div>
         </div>
     );
 };