IBX-7050: Frontend: top bar and change site switcher (#1049)

ibexa · Jan 8, 2024 · 9323d21 · 9323d21
1 parent 9ad2305
commit 9323d21
Show file tree

Hide file tree

Showing 11 changed files with 97 additions and 20 deletions.
diff --git a/src/bundle/Resources/public/js/scripts/admin.user.menu.js b/src/bundle/Resources/public/js/scripts/admin.user.menu.js
@@ -10,5 +10,6 @@
     new ibexa.core.PopupMenu({
         triggerElement: togglerElement,
         popupMenuElement,
+        openedMenuClass: 'ibexa-header-user-menu__toggler--expanded',
     });
 })(window, window.document, window.ibexa);
diff --git a/src/bundle/Resources/public/js/scripts/core/popup.menu.js b/src/bundle/Resources/public/js/scripts/core/popup.menu.js
@@ -4,6 +4,7 @@
         constructor(config) {
             this.popupMenuElement = config.popupMenuElement;
             this.triggerElement = config.triggerElement;
+            this.openedMenuClass = config.openedMenuClass;
             this.onItemClick = config.onItemClick || (() => {});
             this.position = config.position || (() => {});
 
@@ -79,6 +80,10 @@
         handleToggle() {
             this.popupMenuElement.classList.toggle(CLASS_POPUP_MENU_HIDDEN);
             this.updatePosition();
+
+            if (this.openedMenuClass) {
+                this.triggerElement.classList.toggle(this.openedMenuClass);
+            }
         }
 
         handleClickOutsidePopupMenu(event) {

diff --git a/src/bundle/Resources/public/scss/_global-search.scss b/src/bundle/Resources/public/scss/_global-search.scss
@@ -1,6 +1,6 @@
 .ibexa-global-search {
     width: 100%;
-    max-width: calculateRem(670px);
+    max-width: calculateRem(600px);
     position: relative;
 
     .ibexa-input-text-wrapper {
@@ -21,9 +21,9 @@
 
             &--search {
                 background: $ibexa-color-info-600;
-                width: calculateRem(58px);
-                height: calculateRem(48px);
-                transform: translateX(10px);
+                width: calculateRem(40px);
+                height: calculateRem(40px);
+                transform: translateX(calculateRem(8px));
 
                 &:hover {
                     box-shadow: 0 calculateRem(22px) calculateRem(24px) 0 rgba($ibexa-color-info, 0.2);
@@ -49,10 +49,11 @@
     }
 
     &__input {
-        height: calculateRem(48px);
+        height: calculateRem(40px);
+        padding: calculateRem(4px) calculateRem(56px) calculateRem(4px) calculateRem(16px);
         color: $ibexa-color-white;
         border-color: $ibexa-color-info;
-        background: $ibexa-color-info-800;
+        background: rgba($ibexa-color-white, 0.1);
 
         &.ibexa-input--text:not(:focus):placeholder-shown {
             border-color: transparent;
@@ -62,8 +63,7 @@
             &:not(:disabled) {
                 &:focus,
                 &:hover {
-                    border-color: $ibexa-color-info;
-                    background: $ibexa-color-info-800;
+                    border-color: $ibexa-color-info-600;
                 }
             }
         }

diff --git a/src/bundle/Resources/public/scss/_header-user-menu.scss b/src/bundle/Resources/public/scss/_header-user-menu.scss
@@ -2,6 +2,8 @@
     display: flex;
     justify-content: flex-end;
     align-items: center;
+    padding-left: calculateRem(16px);
+    border-left: calculateRem(1px) solid $ibexa-color-light;
 
     &__popup-menu {
         z-index: 1060;
@@ -26,29 +28,58 @@
     &__toggler {
         display: flex;
         align-items: center;
-        margin-left: calculateRem(8px);
-        border: none;
+        position: relative;
+        margin-left: calculateRem(16px);
+        padding: calculateRem(2px) calculateRem(20px) calculateRem(2px) calculateRem(2px);
+        border-radius: calculateRem(12px);
+        border: calculateRem(1px) solid transparent;
+        background: rgba($ibexa-color-white, 0.1);
 
+        &::before,
         &::after {
             content: '';
-            width: 0;
-            height: 0;
-            margin-left: calculateRem(8px);
-            border-left: calculateRem(4px) solid transparent;
-            border-right: calculateRem(4px) solid transparent;
-            border-top: calculateRem(4px) solid $ibexa-color-white;
+            position: absolute;
+            z-index: 1;
+            width: calculateRem(7px);
+            height: calculateRem(1px);
+            background: $ibexa-color-white;
+        }
+
+        &::before {
+            transform: rotate(135deg);
+            right: calculateRem(5px);
+        }
+
+        &::after {
+            transform: rotate(-135deg);
+            right: calculateRem(10px);
+        }
+
+        &:focus {
+            border-color: $ibexa-color-white;
+            box-shadow: 0 0 0 calculateRem(4px) rgba($ibexa-color-white, 0.2);
         }
 
         &:hover {
+            &::before,
+            &::after {
+                background: $ibexa-color-info;
+            }
+        }
+
+        &--expanded {
+            &::before {
+                transform: rotate(45deg);
+            }
+
             &::after {
-                border-top: calculateRem(4px) solid $ibexa-color-info;
+                transform: rotate(-45deg);
             }
         }
     }
 
     &__thumbnail-wrapper {
         display: flex;
-        border: calculateRem(3px) solid $ibexa-color-black;
         border-radius: 50%;
     }
 

diff --git a/src/bundle/Resources/public/scss/_main-header.scss b/src/bundle/Resources/public/scss/_main-header.scss
@@ -2,7 +2,7 @@
     width: 100%;
     display: flex;
     justify-content: space-between;
-    padding: calculateRem(12px) calculateRem(21px);
+    padding: calculateRem(16px) calculateRem(20px) calculateRem(15px);
     background: $ibexa-color-dark;
     border-bottom: calculateRem(1px) solid rgba($ibexa-color-info, 0.4);
 

diff --git a/src/bundle/Resources/public/scss/_user-mode-badge.scss b/src/bundle/Resources/public/scss/_user-mode-badge.scss
@@ -0,0 +1,13 @@
+.ibexa-user-mode-badge {
+    display: flex;
+    height: calculateRem(24px);
+    padding: calculateRem(4px) calculateRem(8px);
+    margin-left: calculateRem(24px);
+    align-items: center;
+    border-radius: calculateRem(16px);
+    border: calculateRem(0.5px) solid $ibexa-color-light-600;
+    background: $ibexa-color-dark;
+    color: $ibexa-color-light-600;
+    font-size: calculateRem(12px);
+    line-height: calculateRem(18px);
+}
diff --git a/src/bundle/Resources/public/scss/ibexa.scss b/src/bundle/Resources/public/scss/ibexa.scss
@@ -130,3 +130,4 @@
 @import 'global-search';
 @import 'user-name';
 @import 'user-profile';
+@import 'user-mode-badge';
diff --git a/src/bundle/Resources/translations/ibexa_user_mode_badge.en.xliff b/src/bundle/Resources/translations/ibexa_user_mode_badge.en.xliff
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<xliff xmlns="urn:oasis:names:tc:xliff:document:1.2" xmlns:jms="urn:jms:translation" version="1.2">
+  <file source-language="en" target-language="en" datatype="plaintext" original="not.available">
+    <header>
+      <tool tool-id="JMSTranslationBundle" tool-name="JMSTranslationBundle" tool-version="1.1.0-DEV"/>
+      <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="c508a02952c5583b9eaf96fb65e8e0d479c602f2" resname="user_mode_badge.focus">
+        <source>Focus mode</source>
+        <target state="new">Focus mode</target>
+        <note>key: user_mode_badge.focus</note>
+      </trans-unit>
+    </body>
+  </file>
+</xliff>
diff --git a/src/bundle/Resources/views/themes/admin/ui/layout.html.twig b/src/bundle/Resources/views/themes/admin/ui/layout.html.twig
@@ -127,6 +127,9 @@
                             <img class="ibexa-main-header__brand-image" src="{{ asset('bundles/ibexaadminui/img/ibexa-logo.svg') }}" alt="Ibexa" />
                         </a>
                     {% endblock %}
+                    {% block user_mode %}
+                        {{ include('@ibexadesign/ui/user_mode_badge.html.twig') }}
+                    {% endblock %}
                 </div>
                 <div class="ibexa-main-header__search-column">
                     {% block global_search %}

diff --git a/src/bundle/Resources/views/themes/admin/ui/user_mode_badge.html.twig b/src/bundle/Resources/views/themes/admin/ui/user_mode_badge.html.twig
@@ -0,0 +1,7 @@
+{% trans_default_domain 'ibexa_user_mode_badge' %}
+
+{% if ibexa_is_focus_mode_on() %}
+    <div class="ibexa-user-mode-badge">
+        {{ 'user_mode_badge.focus'|trans|desc('Focus mode') }}
+    </div>
+{% endif %}
diff --git a/src/lib/Behat/Component/UpperMenu.php b/src/lib/Behat/Component/UpperMenu.php
@@ -69,7 +69,7 @@ protected function specifyLocators(): array
         return [
             new VisibleCSSLocator('dashboardLink', '.ibexa-main-header__brand'),
             new VisibleCSSLocator('pendingNotification', '.ibexa-header-user-menu__notice-dot'),
-            new VisibleCSSLocator('userSettingsToggle', '.ibexa-header-user-menu'),
+            new VisibleCSSLocator('userSettingsToggle', '.ibexa-header-user-menu__toggler'),
             new VisibleCSSLocator('userNotifications', '.ibexa-header-user-menu__notifications-toggler'),
             new VisibleCSSLocator('userSettingsItem', '.ibexa-popup-menu__item'),
             new VisibleCSSLocator('userSettingsPopup', '.ibexa-header-user-menu .ibexa-header-user-menu__popup-menu'),