Added edited field label to focus mode (#1000)

Author: OstafinL

src/bundle/Resources/public/scss/fieldType/edit/_base-field.scss

@@ -30,6 +30,10 @@
     &__focus-mode-control-container {
         display: flex;
         align-self: flex-end;
+
+        .ibexa-label {
+            display: none;
+        }
     }
 
     &__focus-mode-control-btn {
@@ -141,7 +145,15 @@
             }
 
             &__focus-mode-control-container {
+                display: flex;
+                justify-content: space-between;
+                width: 100%;
                 height: calculateRem(40px);
+
+                .ibexa-label {
+                    display: inline-flex;
+                    margin: calculateRem(8px) 0 0 0;
+                }
             }
 
             &__focus-mode-control-btn {

src/bundle/Resources/views/themes/admin/ui/form_fields.html.twig

@@ -524,28 +524,33 @@
             } only %}
         </div>
         <div class="ibexa-field-edit__focus-mode-control-container">
-            <button type="button" class="btn ibexa-btn ibexa-btn--ghost ibexa-btn--small ibexa-field-edit__focus-mode-control-btn ibexa-field-edit__focus-mode-control-btn--enable">
-                <svg class="ibexa-icon ibexa-icon--small">
-                    <use xlink:href="{{ ibexa_icon_path('focus') }}"></use>
-                </svg>
-                <span
-                    class="ibexa-btn__label"
-                    title="{{ 'focus_mode.enable.tooltip'|trans|desc('Enter focus mode. It shows only rich text editor toolbar and focuses your attention on editing text.') }}"
-                >
-                    {{ 'focus_mode.enable.label'|trans|desc('Focus mode') }}
-                </span>
-            </button>
-            <button type="button" class="btn ibexa-btn ibexa-btn--ghost ibexa-btn--small ibexa-field-edit__focus-mode-control-btn ibexa-field-edit__focus-mode-control-btn--disable">
-                <svg class="ibexa-icon ibexa-icon--small">
-                    <use xlink:href="{{ ibexa_icon_path('un-focus') }}"></use>
-                </svg>
-                <span
-                    class="ibexa-btn__label"
-                    title="{{ 'focus_mode.disable.tooltip'|trans|desc('Exit focus mode.') }}"
-                >
-                    {{ 'focus_mode.disable.label'|trans|desc('Exit focus mode') }}
-                </span>
-            </button>
+            <div class="ibexa-field-edit__focus-mode-label">
+                {{- form_label(form) -}}
+            </div>
+            <div class="ibexa-field-edit__focus-mode-btns">
+                 <button type="button" class="btn ibexa-btn ibexa-btn--ghost ibexa-btn--small ibexa-field-edit__focus-mode-control-btn ibexa-field-edit__focus-mode-control-btn--enable">
+                    <svg class="ibexa-icon ibexa-icon--small">
+                        <use xlink:href="{{ ibexa_icon_path('focus') }}"></use>
+                    </svg>
+                    <span
+                        class="ibexa-btn__label"
+                        title="{{ 'focus_mode.enable.tooltip'|trans|desc('Enter focus mode. It shows only rich text editor toolbar and focuses your attention on editing text.') }}"
+                    >
+                        {{ 'focus_mode.enable.label'|trans|desc('Focus mode') }}
+                    </span>
+                </button>
+                <button type="button" class="btn ibexa-btn ibexa-btn--ghost ibexa-btn--small ibexa-field-edit__focus-mode-control-btn ibexa-field-edit__focus-mode-control-btn--disable">
+                    <svg class="ibexa-icon ibexa-icon--small">
+                        <use xlink:href="{{ ibexa_icon_path('un-focus') }}"></use>
+                    </svg>
+                    <span
+                        class="ibexa-btn__label"
+                        title="{{ 'focus_mode.disable.tooltip'|trans|desc('Exit focus mode.') }}"
+                    >
+                        {{ 'focus_mode.disable.label'|trans|desc('Exit focus mode') }}
+                    </span>
+                </button>
+            </div>
         </div>
     </div>
 {%- endblock -%}