IBX-6725: Autosave notification is in wrong place (#938)

* IBX-6725: Autosave notification is in wrong place * adjust text * [behat] updated assertion * corrected texts * changed icon for edit --------- Co-authored-by: tomaszszopinski <[email protected]>
ibexa · Nov 3, 2023 · ebec6ea · ebec6ea
1 parent 135e8c9
commit ebec6ea
Show file tree

Hide file tree

Showing 12 changed files with 53 additions and 69 deletions.
diff --git a/features/standard/Autosave.feature b/features/standard/Autosave.feature
@@ -45,7 +45,7 @@ Feature: Content Items creation
       | label       | value                       |
       | Title       | Test Article Autosave Off draft |
       | Short title | Test Article Autosave Off draft |
-    And I check if "Autosave is off" notification is displayed
+    And I check if "Autosave is off, draft not created" notification is displayed
     And I open the "Dashboard" page in admin SiteAccess
     Then there's no draft "Test Article Autosave Off draft" on Dashboard list
 

diff --git a/src/bundle/Resources/public/js/scripts/admin.content.edit.js b/src/bundle/Resources/public/js/scripts/admin.content.edit.js
@@ -159,7 +159,7 @@
             const saveDate = ibexa.helpers.timezone.convertDateToTimezone(new Date(), userPreferredTimezone);
             const saveTime = moment(saveDate).formatICU('HH:mm');
             const saveMessage = Translator.trans(
-                /*@Desc("Draft saved %time%")*/ 'content_edit.autosave.status_saved.message.full',
+                /*@Desc("Autosave is on, draft saved %time%")*/ 'content_edit.autosave.status_saved.message.full',
                 { time: saveTime },
                 'ibexa_content',
             );

diff --git a/src/bundle/Resources/public/scss/_autosave.scss b/src/bundle/Resources/public/scss/_autosave.scss
@@ -39,14 +39,6 @@
         }
     }
 
-    &--saved {
-        color: $ibexa-color-success;
-
-        .ibexa-autosave__icon-saved {
-            fill: $ibexa-color-success;
-        }
-    }
-
     &--error {
         color: $ibexa-color-danger;
 

diff --git a/src/bundle/Resources/public/scss/_context-menu.scss b/src/bundle/Resources/public/scss/_context-menu.scss
@@ -1,5 +1,6 @@
 .ibexa-context-menu-wrapper {
     display: flex;
+    width: 100%;
 }
 
 .ibexa-context-menu {

diff --git a/src/bundle/Resources/public/scss/_edit-header.scss b/src/bundle/Resources/public/scss/_edit-header.scss
@@ -61,7 +61,10 @@
             display: flex;
             flex-direction: column;
             justify-content: center;
+            white-space: nowrap;
             padding-left: 0;
+            margin-top: calculateRem(20px);
+            height: calculateRem(48px);
 
             .ibexa-icon {
                 margin-right: calculateRem(8px);
@@ -77,22 +80,12 @@
                 color: $ibexa-color-dark-400;
             }
         }
-
-        &--right {
-            .ibexa-autosave {
-                position: absolute;
-                top: calculateRem(96px);
-                right: calculateRem(64px);
-            }
-        }
     }
 
     &__context-actions {
         display: flex;
-        position: absolute;
-        top: calculateRem(36px);
-        right: calculateRem(64px);
-        width: 55%;
+        margin-top: calculateRem(20px);
+        width: 100%;
     }
 
     &__tooltip {
@@ -110,6 +103,7 @@
         color: $ibexa-color-dark-400;
         opacity: 1;
         transition: all $ibexa-admin-transition-duration $ibexa-admin-transition;
+        margin: 0;
     }
 
     &__subtitle {
@@ -137,8 +131,10 @@
     }
 
     .ibexa-autosave {
-        opacity: 1;
-        transition: all $ibexa-admin-transition-duration $ibexa-admin-transition;
+        display: inline-block;
+        border-left: calculateRem(1px) solid $ibexa-color-light;
+        padding-left: calculateRem(12px);
+        margin-left: calculateRem(12px);
     }
 
     &--slim {
@@ -193,10 +189,5 @@
                 }
             }
         }
-
-        .ibexa-autosave {
-            opacity: 0;
-            height: 0;
-        }
     }
 }
diff --git a/src/bundle/Resources/translations/ibexa_content.en.xliff b/src/bundle/Resources/translations/ibexa_content.en.xliff
@@ -6,6 +6,11 @@
       <note>The source node in most cases contains the sample message as written by the developer. If it looks like a dot-delimitted string such as "form.label.firstname", then the developer has not provided a default message.</note>
     </header>
     <body>
+      <trans-unit id="0c103b4bcaaca67202176e8f5be544eb4c307e8e" resname="content.autosave.turn_off.message">
+        <source>You can turn autosave off in your user settings</source>
+        <target state="new">You can turn autosave off in your user settings</target>
+        <note>key: content.autosave.turn_off.message</note>
+      </trans-unit>
       <trans-unit id="8343cec7024fb459d738278aca82b39710b89c50" resname="content.create_draft.success">
         <source>Created a new draft for '%name%'.</source>
         <target state="new">Created a new draft for '%name%'.</target>
@@ -51,11 +56,31 @@
         <target state="new">Content item '%name%' revealed.</target>
         <note>key: content.reveal.success</note>
       </trans-unit>
+      <trans-unit id="6048a32d88dbcdd5a62e232ed092a8efd11ed375" resname="content_edit.autosave.status_error.message">
+        <source>Saving error</source>
+        <target state="new">Saving error</target>
+        <note>key: content_edit.autosave.status_error.message</note>
+      </trans-unit>
+      <trans-unit id="d364f97b275523fe571da0da612fdbc4a1064550" resname="content_edit.autosave.status_off.message">
+        <source>Autosave is off, draft not created</source>
+        <target state="new">Autosave is off, draft not created</target>
+        <note>key: content_edit.autosave.status_off.message</note>
+      </trans-unit>
+      <trans-unit id="93f0a5980aa14af989f4106ffda244ba02db1c32" resname="content_edit.autosave.status_on.message">
+        <source>Autosave is on, draft created</source>
+        <target state="new">Autosave is on, draft created</target>
+        <note>key: content_edit.autosave.status_on.message</note>
+      </trans-unit>
       <trans-unit id="123a6cff0d98d08927f6666246d451da50941a7b" resname="content_edit.autosave.status_saved.message.full">
-        <source>Draft saved %time%</source>
-        <target state="new">Draft saved %time%</target>
+        <source>Autosave is on, draft saved %time%</source>
+        <target state="new">Autosave is on, draft saved %time%</target>
         <note>key: content_edit.autosave.status_saved.message.full</note>
       </trans-unit>
+      <trans-unit id="da43c85269df161b340e92296642e18ec6af033e" resname="content_edit.autosave.status_saving.message">
+        <source>Saving</source>
+        <target state="new">Saving</target>
+        <note>key: content_edit.autosave.status_saving.message</note>
+      </trans-unit>
       <trans-unit id="750bead6705b295c7b7d66c27b2768c1b9329ed5" resname="editing_details">
         <source>Location: %location%</source>
         <target state="new">Location: %location%</target>

diff --git a/src/bundle/Resources/translations/messages.en.xliff b/src/bundle/Resources/translations/messages.en.xliff
@@ -121,11 +121,6 @@
         <target state="new">words</target>
         <note>key: character_counter.words</note>
       </trans-unit>
-      <trans-unit id="0c103b4bcaaca67202176e8f5be544eb4c307e8e" resname="content.autosave.turn_off.message">
-        <source>You can turn autosave off in your user settings</source>
-        <target state="new">You can turn autosave off in your user settings</target>
-        <note>key: content.autosave.turn_off.message</note>
-      </trans-unit>
       <trans-unit id="21e7545fc420d95a59a713437d9dc28d85d82ceb" resname="content.details.content_id">
         <source>Content ID: %contentId%</source>
         <target state="new">Content ID: %contentId%</target>
@@ -181,26 +176,6 @@
         <target state="new">In Trash</target>
         <note>key: content.in_trash</note>
       </trans-unit>
-      <trans-unit id="6048a32d88dbcdd5a62e232ed092a8efd11ed375" resname="content_edit.autosave.status_error.message">
-        <source>Saving error</source>
-        <target state="new">Saving error</target>
-        <note>key: content_edit.autosave.status_error.message</note>
-      </trans-unit>
-      <trans-unit id="d364f97b275523fe571da0da612fdbc4a1064550" resname="content_edit.autosave.status_off.message">
-        <source>Autosave is off</source>
-        <target state="new">Autosave is off</target>
-        <note>key: content_edit.autosave.status_off.message</note>
-      </trans-unit>
-      <trans-unit id="93f0a5980aa14af989f4106ffda244ba02db1c32" resname="content_edit.autosave.status_on.message">
-        <source>Autosave is on</source>
-        <target state="new">Autosave is on</target>
-        <note>key: content_edit.autosave.status_on.message</note>
-      </trans-unit>
-      <trans-unit id="da43c85269df161b340e92296642e18ec6af033e" resname="content_edit.autosave.status_saving.message">
-        <source>Saving</source>
-        <target state="new">Saving</target>
-        <note>key: content_edit.autosave.status_saving.message</note>
-      </trans-unit>
       <trans-unit id="02f6ddfcdd8bbd05cdd1b954503a3801288b74eb" resname="content_type.modal.message">
         <source>Do you want to delete the Content Type?</source>
         <target state="new">Do you want to delete the Content Type?</target>

diff --git a/src/bundle/Resources/views/themes/admin/content/edit/edit.html.twig b/src/bundle/Resources/views/themes/admin/content/edit/edit.html.twig
@@ -19,7 +19,7 @@
         action_name: 'editing'|trans|desc('Editing'),
         content_type_name: content_type.name,
         title: content.name,
-        icon_name: 'content-type',
+        icon_name: 'edit',
         show_autosave_status: true,
         description: content_type.description,
         subtitle: 'editing_details'|trans({

diff --git a/src/bundle/Resources/views/themes/admin/ui/component/autosave/autosave.html.twig b/src/bundle/Resources/views/themes/admin/ui/component/autosave/autosave.html.twig
@@ -1,3 +1,5 @@
+{% trans_default_domain 'ibexa_content' %}
+
 <div
     class="ibexa-autosave
         {{ is_enabled ? 'ibexa-autosave--on' : 'ibexa-autosave--off' }}
@@ -24,10 +26,10 @@
         {{ 'content_edit.autosave.status_error.message'|trans()|desc('Saving error') }}
     </div>
     <div class="ibexa-autosave__status-off">
-        {{ 'content_edit.autosave.status_off.message'|trans()|desc('Autosave is off') }}
+        {{ 'content_edit.autosave.status_off.message'|trans()|desc('Autosave is off, draft not created') }}
     </div>
     <div class="ibexa-autosave__status-on">
-        {{ 'content_edit.autosave.status_on.message'|trans()|desc('Autosave is on') }}
+        {{ 'content_edit.autosave.status_on.message'|trans|desc('Autosave is on, draft created') }}
     </div>
     <div class="ibexa-autosave__status-saved"></div>
     <div class="ibexa-autosave__status-saving">

diff --git a/src/bundle/Resources/views/themes/admin/ui/edit_header.html.twig b/src/bundle/Resources/views/themes/admin/ui/edit_header.html.twig
@@ -16,9 +16,12 @@
                         {{ action_object|default('') }}
                         {{ content_type_name|default('') }}
                     </label>
+                    {% if show_autosave_status|default(false) %}
+                        {% include '@ibexadesign/ui/autosave.html.twig' %}
+                    {% endif %}
                 </div>
             </div>
-            <div class="col-3 ibexa-edit-header__column ibexa-context-menu-wrapper">
+            <div class="ibexa-edit-header__column ibexa-context-menu-wrapper">
                 <div class="ibexa-edit-header__context-actions">
                     {{ context_actions|default('')|raw }}
                 </div>
@@ -58,11 +61,6 @@
                     <div class="ibexa-edit-header__subtitle">{{ subtitle }}</div>
                 {% endif %}
             </div>
-            <div class="ibexa-edit-header__column ibexa-edit-header__column--right">
-                {% if show_autosave_status|default(false) %}
-                    {% include '@ibexadesign/ui/autosave.html.twig' %}
-                {% endif %}
-            </div>
             {% if show_extra_bottom_content %}
                 <div class="ibexa-edit-header__extra-bottom-content">
                     {{ block('extra_bottom_content') }}

diff --git a/src/lib/Behat/BrowserContext/ContentUpdateContext.php b/src/lib/Behat/BrowserContext/ContentUpdateContext.php
@@ -134,7 +134,7 @@ public function iWaitForAutosaveNotification(): void
     }
 
     /**
-     * @When I check if "Autosave is off" notification is displayed
+     * @When I check if "Autosave is off, draft not created" notification is displayed
      */
     public function iCheckAutosaveNotification(): void
     {

diff --git a/src/lib/Behat/Page/ContentUpdateItemPage.php b/src/lib/Behat/Page/ContentUpdateItemPage.php
@@ -255,7 +255,7 @@ public function verifyAutosaveNotificationIsDisplayed(): void
     {
         $this->getHTMLPage()
             ->find($this->getLocator('autosaveIsOnInfo'))
-            ->assert()->textContains('Autosave is on');
+            ->assert()->textContains('Autosave is on, draft created');
     }
 
     public function verifyAutosaveDraftIsSavedNotificationIsDisplayed(): void
@@ -277,13 +277,13 @@ public function isAutosaveDraftSavedNotificationVisible(): bool
         return $this->getHTMLPage()
             ->setTimeout(0)
             ->findAll($this->getLocator('autosaveSavedInfo'))
-            ->filterBy(new ElementTextFragmentCriterion('Draft saved'))->any();
+            ->filterBy(new ElementTextFragmentCriterion('Autosave is on, draft saved'))->any();
     }
 
     public function verifyAutosaveIsOffNotificationIsDisplayed(): void
     {
         $this->getHTMLPage()
             ->find($this->getLocator('autosaveIsOffInfo'))
-            ->assert()->textContains('Autosave is off');
+            ->assert()->textContains('Autosave is off, draft not created');
     }
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -134,7 +134,7 @@ public function iWaitForAutosaveNotification(): void @@
         }
         /**
-         * @When I check if "Autosave is off" notification is displayed
+         * @When I check if "Autosave is off, draft not created" notification is displayed
          */
         public function iCheckAutosaveNotification(): void
         {
@@ Expand Down @@