MAGETWO-32250: Header

- CR changes

Author: Bogdan Plieshka

app/code/Magento/AdminNotification/view/adminhtml/templates/toolbar_entry.phtml

@@ -12,7 +12,7 @@
 <div
     data-mage-init='{"toolbarEntry": {}}'
     class="notifications-wrapper"
-    data-notification-count="<?php echo $block->escapeHtml($notificationCount); ?>">
+    data-notification-count="<?php echo $notificationCount; ?>">
     <?php if ($notificationCount > 0) : ?>
         <a
             href="<?php echo $block->getUrl('adminhtml/notification/index'); ?>"
@@ -21,11 +21,7 @@
             title="<?php echo __('Notifications'); ?>"
             data-toggle="dropdown">
             <span class="notifications-counter">
-                <?php if ($block->escapeHtml($notificationCount) > 99) {
-                    echo '99+';
-                } else {
-                    echo $block->escapeHtml($notificationCount);
-                }?>
+                <?php echo ($block->escapeHtml($notificationCount) > 99) ? '99+' : $block->escapeHtml($notificationCount); ?>
             </span>
         </a>
         <ul
@@ -36,21 +32,25 @@
             <li class="notifications-entry<?php if ($notification->getSeverity() == 1): ?> notifications-critical<?php endif; ?>"
                 data-notification-id="<?php echo $block->escapeHtml($notification->getId()); ?>"
                 data-notification-severity="<?php if ($notification->getSeverity() == 1): ?>1<?php endif; ?>">
+                <?php
+                    $notificationDescription = $block->escapeHtml($notification->getDescription());
+                    $notificationDescriptionLength = $block->getNotificationDescriptionLength();
+                ?>
                 <strong class="notifications-entry-title">
                     <?php echo $block->escapeHtml($notification->getTitle()); ?>
                 </strong>
-                <?php if (strlen($block->escapeHtml($notification->getDescription())) > $block->escapeHtml($block->getNotificationDescriptionLength())) : ?>
+                <?php if (strlen($notificationDescription) > $block->escapeHtml($notificationDescriptionLength)) : ?>
                     <p class="notifications-entry-description _cutted">
                         <span class="notifications-entry-description-start">
-                            <?php echo substr($block->escapeHtml($notification->getDescription()), 0, $block->escapeHtml($block->getNotificationDescriptionLength())); ?>
+                            <?php echo substr($notificationDescription, 0, $notificationDescriptionLength); ?>
                         </span>
                         <span class="notifications-entry-description-end">
-                            <?php echo substr($block->escapeHtml($notification->getDescription()), $block->escapeHtml($block->getNotificationDescriptionLength())); ?>
+                            <?php echo substr($notificationDescription, $notificationDescriptionLength); ?>
                         </span>
                     </p>
                 <?php else : ?>
                     <p class="notifications-entry-description">
-                        <?php echo $block->escapeHtml($notification->getDescription()); ?>
+                        <?php echo $notificationDescription; ?>
                     </p>
                 <?php endif; ?>
                 <time class="notifications-entry-time">

app/code/Magento/Backend/view/adminhtml/templates/page/header.phtml

@@ -18,7 +18,9 @@
     <?php case 'user': ?>
         <div class="admin-user">
             <a href="<?php echo $block->getUrl('adminhtml/system_account/index') ?>" class="admin-user-account" title="<?php echo __('My Account') ?>" data-mage-init='{"dropdown":{}}' data-toggle="dropdown">
-                <span class="admin-user-account-text"><?php echo $block->escapeHtml($block->getUser()->getUsername()); ?></span>
+                <span class="admin-user-account-text-wrapper">
+                    <span class="admin-user-account-text"><?php echo $block->escapeHtml($block->getUser()->getUsername()); ?></span>
+                </span>
             </a>
             <ul class="admin-user-menu">
                 <?php if ($block->getAuthorization()->isAllowed('Magento_Backend::myaccount')): ?>

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

@@ -34,10 +34,9 @@
 .notifications-wrapper {
     float: right;
     line-height: 1;
-    margin-left: @component__shadow-size__base;
     position: relative;
-    z-index: @notifications-action-menu__z-index;
     &.active {
+        z-index: @notifications-action-menu__z-index; // Should be over global search when active
         .notifications-action {
             border-color: @page-header-action__active__border-color;
             box-shadow: @component__box-shadow__base;

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

@@ -32,6 +32,7 @@
 
 .search-global {
     float: right;
+    margin-right: -.3rem; // px perfect
     position: relative;
     z-index: @search-global__z-index;
 }
@@ -40,6 +41,7 @@
     min-width: @search-global-field__width;
     &._active {
         .search-global-input {
+            background-color: @page-header-action__background-color;
             border-color: @page-header-action__active__border-color;
             box-shadow: @component__box-shadow__base;
             padding-right: @search-global-input__active__padding-right;
@@ -51,8 +53,8 @@
             height: @search-global-input__height;
             position: absolute;
             right: 0;
-            top: 0;
             text-indent: -100%;
+            top: 0;
             width: @search-global-icon__width + @search-global-input__padding-side * 2;
             z-index: 3;
         }
@@ -127,7 +129,7 @@
 }
 
 .search-global-input {
-    background-color: @page-header-action__background-color;
+    background-color: transparent;
     border: 1px solid transparent;
     font-size: @search-global-input__font-size;
     height: @search-global-input__height;
@@ -137,7 +139,7 @@
     top: 0;
     transition: all .1s linear, width .3s linear;
     width: @search-global-input__width;
-    z-index: 1
+    z-index: 1;
 }
 
 .search-global-action {

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

@@ -12,24 +12,26 @@
 //  ---------------------------------------------
 
 @user__font-size: round(@font-size__base - .1rem, 1);
-@user-account__indent-right: 2.8rem;
 @user-account__padding-bottom: (@page-header-action__height - @user__font-size) / 2 - .05rem;
+@user-account__padding-left: 4rem;
 @user-account__padding-top: (@page-header-action__height - @user__font-size) / 2 + .05rem;
+@user-account__padding-right: 2.8rem;
+@user-menu__min-width: 20rem;
 
 //
 
 .admin-user {
     float: right;
     line-height: 1;
-    margin-left: @component__shadow-size__base;
+    margin-left: .3rem;
     position: relative;
     z-index: @user-account-menu__z-index;
     &.active {
         .admin-user-account {
             border-color: @page-header-action__active__border-color;
             box-shadow: @component__box-shadow__base;
         }
-        .admin-user-account-text {
+        .admin-user-account-text-wrapper {
             &:after {
                 background-color: @page-header-action__background-color;
                 content: '';
@@ -50,20 +52,20 @@
 .admin-user-account {
     &:extend(.abs-page-header-action all);
     .dropdown-triangle(
-        @_dropdown__padding-right: @user-account__indent-right;
-        @_triangle__color: @page-header-action__color;
-        @_triangle__hover__color: @page-header-action__hover__color;
-        @_triangle__right: 1.3rem;
+    @_dropdown__padding-right: @user-account__padding-right;
+    @_triangle__color: @page-header-action__color;
+    @_triangle__hover__color: @page-header-action__hover__color;
+    @_triangle__right: 1.3rem;
     );
     font-size: @user__font-size;
     letter-spacing: .05em;
     padding-bottom: @user-account__padding-bottom;
-    padding-left: 4rem;
+    padding-left: @user-account__padding-left;
     padding-top: @user-account__padding-top;
     z-index: 2;
     &:before {
         @_icon-user__size: 2rem;
-
+        
         &:extend(.abs-icon all);
         content: @icon-account__content;
         font-size: @_icon-user__size;
@@ -74,11 +76,19 @@
     }
 }
 
+.admin-user-account-text {
+    display: inline-block;
+    max-width: @user-menu__min-width - @user-account__padding-left - @user-account__padding-right - 2rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
 .admin-user-menu {
     @_user-menu__inden-side: 1rem;
-
+    
     &:extend(.abs-page-header-action-menu all);
     line-height: @line-height__base;
+    min-width: @user-menu__min-width;
     padding: .5em @_user-menu__inden-side;
     z-index: 1;
     &:before {
@@ -88,7 +98,7 @@
         > a {
             color: @page-header-action__color;
             display: block;
-            padding: .6rem (@user-account__indent-right - @_user-menu__inden-side) .6rem .5em;
+            padding: .6rem (@user-account__padding-right - @_user-menu__inden-side) .6rem .5em;
             text-decoration: none;
             transition: background-color .1s linear;
             white-space: nowrap;

app/design/adminhtml/Magento/backend/Magento_Backend/web/css/source/module/main/_actions-bar.less

@@ -23,10 +23,10 @@
 
 .page-main-actions,
 .page-actions.fixed {
-    .extend__clearfix();
     background: @page-main-actions__background-color;
     border-bottom: 1px solid @page-main-actions__border-color;
     border-top: 1px solid @page-main-actions__border-color;
+    .extend__clearfix();
     padding: @page-main-actions__padding-side;
 }
 
@@ -40,22 +40,21 @@
 
 .page-actions {
     @_page-action__indent: 1.3rem;
-
     float: right;
     &.fixed {
-        position: fixed;
-        top: 0;
         left: @page-wrapper__indent-left;
+        position: fixed;
         right: 0;
+        top: 0;
         z-index: @page-actions__fixed__z-index;
         .page-actions-inner {
             &:before {
+                color: @page-title__color;
                 content: attr(data-title);
                 float: left;
                 font-size: @page-title__font-size;
-                max-width: 50%;
                 margin-top: .3rem;
-                color: @page-title__color;
+                max-width: 50%;
                 overflow: hidden;
                 text-overflow: ellipsis;
                 white-space: nowrap;
@@ -103,8 +102,8 @@
         }
     }
     .actions-split {
-        margin-left: @_page-action__indent;
         float: right;
+        margin-left: @_page-action__indent;
         .vendor-prefix-order(2);
         .dropdown-menu {
             .item {
@@ -115,9 +114,9 @@
 }
 
 .page-actions-buttons {
-    .vendor-prefix-display(flex);
-    justify-content: flex-end;
     float: right;
+    justify-content: flex-end;
+    .vendor-prefix-display(flex);
     .customer-index-edit & {
         background-color: transparent;
     }

app/design/adminhtml/Magento/backend/Magento_Backend/web/css/source/module/main/actions_bar/_store-switcher.less

@@ -18,17 +18,17 @@
     }
     .dropdown {
         .dropdown(
-            @_options-selector :  ~".dropdown-menu",
-            @_dropdown-list-border: 1px #ada89e solid,
-            @_dropdown-list-pointer: false,
-            @_icon-font-line-height: 2,
-            @_icon-font-color: @text__color,
-            @_icon-font-color-hover: @text__color,
-            @_icon-font-color-active: @text__color,
-            @_dropdown-list-item-hover: transparent,
-            @_dropdown-list-item-padding: 0,
-            @_dropdown-list-min-width: 19.5rem,
-            @_dropdown-list-shadow: @component__box-shadow__base
+        @_options-selector: ~".dropdown-menu",
+        @_dropdown-list-border: 1px #ada89e solid,
+        @_dropdown-list-pointer: false,
+        @_icon-font-line-height: 2,
+        @_icon-font-color: @text__color,
+        @_icon-font-color-hover: @text__color,
+        @_icon-font-color-active: @text__color,
+        @_dropdown-list-item-hover: transparent,
+        @_dropdown-list-item-padding: 0,
+        @_dropdown-list-min-width: 19.5rem,
+        @_dropdown-list-shadow: @component__box-shadow__base
         );
     }
     .dropdown-menu {
@@ -225,8 +225,8 @@
         }
     }
     .tooltip-content {
-        background: #000;
         background: rgba(49, 48, 43, .8);
+        background: #000;
         border-radius: 3px;
         color: #fff;
         display: none;