MAGETWO-32250: Header

- Fixed header notifications counter, grid breakpoints, header search overlay and split buttons styles

Author: Bogdan Plieshka

app/code/Magento/AdminNotification/view/adminhtml/web/toolbar_entry.js

@@ -39,7 +39,10 @@ define([
                 notificationIcon.off('click.dropdown');
                 $('.notifications-action .notifications-counter').text('').hide();
             } else {
-                $('.notifications-action .notifications-counter').text(notificationCount);
+                // Change top counter only for allowable range
+                if (notificationCount <= 99) {
+                    $('.notifications-action .notifications-counter').text(notificationCount);
+                }
                 $('.notifications-entry-last .notifications-counter').text(notificationCount);
                 // Modify caption of the 'See All' link
                 var actionElement = $('.notifications-wrapper .notifications-list .last .action-more');

app/design/adminhtml/Magento/backend/Magento_Backend/layout/default.xml

@@ -22,8 +22,8 @@
         </referenceContainer>
 
         <referenceContainer name="header" htmlClass="page-header row">
-            <container name="header.inner.left" before="-" htmlTag="div" htmlClass="page-header-hgroup col-m-8"/>
-            <container name="header.inner.right" after="header.inner.left" htmlTag="div" htmlClass="page-header-actions col-m-4"/>
+            <container name="header.inner.left" before="-" htmlTag="div" htmlClass="page-header-hgroup col-l-8 col-m-6"/>
+            <container name="header.inner.right" after="header.inner.left" htmlTag="div" htmlClass="page-header-actions col-l-4 col-m-6"/>
         </referenceContainer>
 
         <move element="page.menu" destination="menu.wrapper" />

app/design/adminhtml/Magento/backend/Magento_Backend/web/css/source/module/_menu.less

@@ -11,6 +11,8 @@
 //  Variables
 //  ---------------------------------------------
 
+@menu-wrapper__z-index: @menu__z-index - 1;
+
 @menu__background-color: @color-very-dark-grayish-orange;
 
 @menu-logo__margin-bottom: 2.2rem;
@@ -28,9 +30,12 @@
 @menu-line-before__background-color: @color-brownie-vanilla;
 @menu-line-before__height: 1px;
 
+@menu-overlay__z-index: @menu__z-index - 3;
+
 @submenu__background-color: @menu-item__active__background-color;
 @submenu__padding-horizontal: 1.5rem;
 @submenu__padding-vertical: 2rem;
+@submenu__z-index: @menu__z-index - 2;
 @submenu-column__width: 23.8rem;
 @submenu-column__width__l: 19.8rem;
 @submenu-title__color: @color-white;

app/design/adminhtml/Magento/backend/Magento_Backend/web/css/source/module/header/actions-group/_notifications.less

@@ -20,6 +20,7 @@
 @notifications-action__padding-top: (@page-header-action__height - @notifications-action-icon__size) / 2 + .05rem;
 @notifications-action__hover__color: darken(@page-header-action__color, 20%);
 @notifications-action-icon__size: 1.9rem;
+@notifications-action-menu__z-index: @header__z-index;
 
 @notifications-close__color: @color-gray80;
 @notifications-counter__background-color: @color-tomato-brick;

app/design/adminhtml/Magento/backend/Magento_Backend/web/css/source/module/header/actions-group/_search.less

@@ -11,6 +11,8 @@
 //  Variables
 //  ---------------------------------------------
 
+@search-global__z-index: @user-account-menu__z-index - 10; // Should be lower than user account
+
 @search-global-field__width: @search-global-input__width;
 
 @search-global-input__font-size: @font-size__base;

app/design/adminhtml/Magento/backend/Magento_Backend/web/css/source/module/header/actions-group/_user.less

@@ -12,11 +12,14 @@
 //  ---------------------------------------------
 
 @user__font-size: round(@font-size__base - .1rem, 1);
+
 @user-account__padding-bottom: .4rem;
 @user-account__padding-left: 4rem;
 @user-account__padding-top: .7rem;
 @user-account__padding-right: 2.8rem;
-@user-menu__min-width: 20rem;
+
+@user-account-menu__min-width: 20rem;
+@user-account-menu__z-index: @notifications-action-menu__z-index - 10; // Should be lower than notifications
 
 //
 
@@ -78,7 +81,7 @@
 
 .admin-user-account-text {
     display: inline-block;
-    max-width: @user-menu__min-width - @user-account__padding-left - @user-account__padding-right - 2rem;
+    max-width: @user-account-menu__min-width - @user-account__padding-left - @user-account__padding-right - 2rem;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -89,7 +92,7 @@
 
     &:extend(.abs-page-header-action-menu all);
     line-height: @line-height__base;
-    min-width: @user-menu__min-width;
+    min-width: @user-account-menu__min-width;
     padding: .5em @_user-menu__inden-side;
     z-index: 1;
     &:before {
@@ -116,7 +119,7 @@
     }
     .admin-user-name {
         display: inline-block;
-        max-width: @user-menu__min-width;
+        max-width: @user-account-menu__min-width;
         overflow: hidden;
         text-overflow: ellipsis;
         vertical-align: text-top;

app/design/adminhtml/Magento/backend/Magento_Theme/web/css/source/module.less

@@ -71,22 +71,22 @@ button {
     }
 }
 
-.actions-split {
-    button {
-        margin-left: 0 !important;
-    }
-    .dropdown-split(
-    @_toggle-selector: ~".action-toggle",
-    @_button-selector: ~".action-default",
-    @_options-selector :  ~".dropdown-menu",
-    @_dropdown-split-button-border-radius-fix: true,
-    @_dropdown-split-list-min-width: 175px
-    );
-    vertical-align: middle;
-    .action-toggle:after {
-        height: 13px;
-    }
-}
+//.actions-split {
+//    button {
+//        margin-left: 0 !important;
+//    }
+//    .dropdown-split(
+//        @_toggle-selector: ~".action-toggle",
+//        @_button-selector: ~".action-default",
+//        @_options-selector :  ~".dropdown-menu",
+//        @_dropdown-split-button-border-radius-fix: true,
+//        @_dropdown-split-list-min-width: 175px
+//    );
+//    vertical-align: middle;
+//    .action-toggle:after {
+//        height: 13px;
+//    }
+//}
 
 //
 // Icons

app/design/adminhtml/Magento/backend/web/css/override.less

@@ -1021,13 +1021,20 @@ fieldset[disabled] .address-list .action-delete {
 }
 .actions-split {
   position: relative;
-  z-index: 200;
+  z-index: 300;
 }
 .actions-split.active,
 .actions-split._active,
 .actions-split:hover {
   box-shadow: 0 0 0 1px #007bdb;
 }
+.actions-split.active .action-toggle.action-primary,
+.actions-split._active .action-toggle.action-primary,
+.actions-split.active .action-toggle.primary,
+.actions-split._active .action-toggle.primary {
+  background-color: #ba4000;
+  border-color: #ba4000;
+}
 .actions-split.active .dropdown-menu,
 .actions-split._active .dropdown-menu {
   opacity: 1;
@@ -1083,6 +1090,10 @@ fieldset[disabled] .address-list .action-delete {
 .actions-split .action-toggle:hover:after {
   border-color: #000000 transparent transparent transparent;
 }
+.actions-split .action-toggle._active:after,
+.actions-split .action-toggle.active:after {
+  transform: none;
+}
 .actions-split .action-toggle.action-secondary:after,
 .actions-split .action-toggle.secondary:after,
 .actions-split .action-toggle.action-primary:after,
@@ -1102,6 +1113,7 @@ fieldset[disabled] .address-list .action-delete {
 .actions-split .dropdown-menu {
   background-color: #ffffff;
   border: 1px solid #007bdb;
+  border-radius: 1px;
   box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
   display: block;
   left: 0;
@@ -1121,10 +1133,10 @@ fieldset[disabled] .address-list .action-delete {
   padding: .6875em;
 }
 .actions-split .dropdown-menu > li:hover {
-  background-color: #e0f6fe;
+  background-color: #e3e3e3;
 }
 .actions-split .dropdown-menu > li:active {
-  background-color: #c7effd;
+  background-color: #cacaca;
 }
 .abs-action-reset,
 .admin__menu .submenu-close,
@@ -2952,7 +2964,7 @@ fieldset[disabled] .admin__control-text + .ui-datepicker-trigger {
   position: absolute;
   right: 0;
   top: 0;
-  z-index: 600;
+  z-index: 699;
 }
 .menu-wrapper .logo {
   display: block;
@@ -3040,7 +3052,7 @@ fieldset[disabled] .admin__control-text + .ui-datepicker-trigger {
   top: -7.5rem;
   transition: all .7s linear;
   visibility: hidden;
-  z-index: 500;
+  z-index: 698;
 }
 .admin__menu .level-0 > .submenu._show {
   left: 100%;
@@ -3164,14 +3176,14 @@ fieldset[disabled] .admin__control-text + .ui-datepicker-trigger {
   position: absolute;
   right: 0;
   top: 0;
-  z-index: 500;
+  z-index: 697;
 }
 .admin-user {
   float: right;
   line-height: 1.4;
   margin-left: .3rem;
   position: relative;
-  z-index: 300;
+  z-index: 390;
 }
 .admin-user.active .admin-user-account {
   border-color: #007bdb;
@@ -3276,7 +3288,7 @@ fieldset[disabled] .admin__control-text + .ui-datepicker-trigger {
   float: right;
   margin-right: -0.3rem;
   position: relative;
-  z-index: 200;
+  z-index: 380;
 }
 .search-global-field {
   min-width: 5rem;

app/design/adminhtml/Magento/backend/web/css/source/actions/_actions-split.less

@@ -9,6 +9,7 @@
 
 .actions-split {
     @_action-split__min-width: @_action-toggle__width + @_action-default__min-width;
+    @_action-split-dropdown__hover__background-color: @color-gray89;
     @_action-default__min-width: 9.3rem;
     @_action-toggle__width: 4rem;
 
@@ -22,6 +23,13 @@
     }
     &.active,
     &._active {
+        .action-toggle {
+            &.action-primary,
+            &.primary {
+                background-color: @button-primary__hover__background-color;
+                border-color: @button-primary__hover__background-color;
+            }
+        }
         .dropdown-menu {
             opacity: 1;
             visibility: visible;
@@ -53,6 +61,13 @@
         position: absolute;
         right: 0;
         top: 0;
+        //  Disable triangle rotation
+        &._active,
+        &.active {
+            &:after {
+                transform: none;
+            }
+        }
         &.action-secondary,
         &.secondary,
         &.action-primary,
@@ -68,6 +83,7 @@
     .dropdown-menu {
         background-color: @page-wrapper__background-color;
         border: 1px solid @button__hover__border-color;
+        border-radius: 1px;
         box-shadow: @component__box-shadow__base;
         display: block; // ToDo UI: Should be deleted with old styles
         left: 0;
@@ -85,10 +101,10 @@
             border: none; // ToDo UI: Should be deleted with old styles
             padding: .6875em;
             &:hover {
-                background-color: @dropdown-menu__hover__background-color;
+                background-color: @_action-split-dropdown__hover__background-color;
             }
             &:active {
-                background-color: @dropdown-menu__active__background-color;
+                background-color: darken(@_action-split-dropdown__hover__background-color, 10%);
             }
         }
     }

app/design/adminhtml/Magento/backend/web/css/source/variables/_structure.less

@@ -33,33 +33,21 @@
 @z-index-9: 900;
 @z-index-10: 1000;
 
-// z-index 2
-@search-global__z-index: @z-index-2;
-@split-button__z-index: @z-index-2;
-
 // z-index 3
-@user-account-menu__z-index: @z-index-3;
+@split-button__z-index: @z-index-3;
 
 // z-index 4
-@notifications-action-menu__z-index: @z-index-4;
+@header__z-index: @z-index-4;
 @page-actions__fixed__z-index: @z-index-4;
 
 // z-index 5
 @field-tooltip__z-index: @z-index-5;
-@submenu__z-index: @z-index-5;
-@menu-overlay__z-index: @z-index-5;
-
-// z-index 6
-@menu-wrapper__z-index: @z-index-6;
 
 // z-index 7
 @menu__z-index: @z-index-7;
 
 // z-index 8
-@overlay__z-index: @z-index-8; // example
-
-// z-index 9
-@modal__z-index: @z-index-9; // example
+@overlay__z-index: @z-index-8;
 
 //  Base z-index for page wrapper to prevent inner page element overlap with pop-ups
 @page-wrapper__z-index__base: 1;