MAGETWO-32250: Header

- Fixed header notifications events

Author: Bogdan Plieshka

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

@@ -69,7 +69,9 @@
             <li class="notifications-entry notifications-entry-last">
                 <a
                     href="<?php echo $block->getUrl('adminhtml/notification/index'); ?>"
-                    class="action-tertiary action-more"><?php echo __('See All (%1 unread)', $notificationCount); ?></a>
+                    class="action-tertiary action-more">
+                    <?php echo __('See All (') ?><span class="notifications-counter"><?php echo $notificationCount ?></span><?php echo __(' unread)'); ?>
+                </a>
             </li>
         </ul>
     <?php else : ?>

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

@@ -40,13 +40,14 @@ define([
                 $('.notifications-action .notifications-counter').text('').hide();
             } else {
                 $('.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');
                 actionElement.text(actionElement.text().replace(/\d+/, notificationCount));
             }
         },
 
-        // Show popup with notification details
+        // Show notification details
         showNotificationDetails = function (notificationEntry) {
             var notificationDescription = notificationEntry.find('.notifications-entry-description'),
                 notificationDescriptionEnd = notificationEntry.find('.notifications-entry-description-end');
@@ -72,10 +73,21 @@ define([
 
     // Remove corresponding notification from the list and mark it as read
     $('.notifications-close').on('click.removeNotification', function (event) {
-        var notificationEntry = $(this).closest('.notifications-entry'),
+        var notificationsList = $(this).closest('.notifications-list'),
+            notificationEntries = notificationsList.find('.notifications-entry'),
+            notificationEntry = $(this).closest('.notifications-entry'),
             notificationId = notificationEntry.attr('data-notification-id');
+
         markNotificationAsRead(notificationId);
         removeNotificationFromList(notificationEntry);
+
+        // Checking for last unread notification to hide dropdown
+        if (notificationEntries.length == 2 && notificationCount == 0) {
+            $('.notifications-wrapper').removeClass('active')
+                                       .find('.notifications-action').removeAttr('data-toggle')
+                                                                     .off('click.dropdown');
+        }
+
         event.stopPropagation();
     });
 

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

@@ -25,7 +25,7 @@
             <ul class="admin-user-menu">
                 <?php if ($block->getAuthorization()->isAllowed('Magento_Backend::myaccount')): ?>
                 <li>
-                    <a href="<?php echo $block->getUrl('adminhtml/system_account/index') ?>" <?php echo $block->getUiId('user', 'account', 'settings')?> title="<?php echo __('Account Setting') ?>"><?php echo __('Account Setting') ?> <span> (<?php echo $block->escapeHtml($block->getUser()->getUsername()); ?>)</span></a>
+                    <a href="<?php echo $block->getUrl('adminhtml/system_account/index') ?>" <?php echo $block->getUiId('user', 'account', 'settings')?> title="<?php echo __('Account Setting') ?>"><?php echo __('Account Setting') ?>  (<span class="admin-user-name"><?php echo $block->escapeHtml($block->getUser()->getUsername()); ?></span>)</a>
                 </li>
                 <?php endif; ?>
                 <li><a href="<?php echo $block->getBaseUrl(); ?>" title="<?php echo __('Customer View'); ?>" target="_blank" class="store-front"><?php echo __('Customer View'); ?></a></li>

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

@@ -72,21 +72,20 @@
             top: 1px;
         }
     }
-}
-
-.notifications-counter {
-    background-color: @notifications-counter__background-color;
-    border-radius: 1em;
-    color: @color-white;
-    display: inline-block;
-    font-size: @notifications__font-size;
-    font-weight: @font-weight__bold;
-    left: 50%;
-    margin-left: .3em;
-    margin-top: -1.1em;
-    padding: .3em .5em;
-    position: absolute;
-    top: 50%;
+    .notifications-counter {
+        background-color: @notifications-counter__background-color;
+        border-radius: 1em;
+        color: @color-white;
+        display: inline-block;
+        font-size: @notifications__font-size;
+        font-weight: @font-weight__bold;
+        left: 50%;
+        margin-left: .3em;
+        margin-top: -1.1em;
+        padding: .3em .5em;
+        position: absolute;
+        top: 50%;
+    }
 }
 
 .notifications-list {
@@ -108,14 +107,17 @@
         background-color: @notifications-entry__hover__background-color;
     }
     &.notifications-entry-last {
-        border-top: 1px solid @color-light-gray;
         margin: 0 @notifications-action__padding-side;
-        padding: .3rem 0 .6rem;
+        padding: .3rem 0 1.3rem;
         text-align: center;
         &:hover {
             background-color: transparent;
         }
     }
+    + .notifications-entry-last {
+        padding-bottom: .6rem;
+        border-top: 1px solid @color-light-gray;
+    }
     //  Case with cutted message description
     ._cutted {
         cursor: pointer;
@@ -143,6 +145,9 @@
 
 .notifications-entry-description-end {
     display: none;
+    &._show {
+        display: inline;
+    }
 }
 
 .notifications-entry-time {

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

@@ -81,6 +81,7 @@
     max-width: @user-menu__min-width - @user-account__padding-left - @user-account__padding-right - 2rem;
     overflow: hidden;
     text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
 .admin-user-menu {
@@ -113,4 +114,12 @@
             }
         }
     }
+    .admin-user-name {
+        display: inline-block;
+        max-width: @user-menu__min-width;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        vertical-align: text-top;
+    }
 }

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

@@ -2599,6 +2599,7 @@ fieldset[disabled] .admin__control-text + .ui-datepicker-trigger {
   max-width: 11.2rem;
   overflow: hidden;
   text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .admin-user-menu {
   line-height: 1.4;
@@ -2626,6 +2627,14 @@ fieldset[disabled] .admin__control-text + .ui-datepicker-trigger {
   bottom: -1px;
   position: relative;
 }
+.admin-user-menu .admin-user-name {
+  display: inline-block;
+  max-width: 20rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  vertical-align: text-top;
+}
 .search-global {
   float: right;
   margin-right: -0.3rem;
@@ -2767,7 +2776,7 @@ fieldset[disabled] .admin__control-text + .ui-datepicker-trigger {
   position: relative;
   top: 1px;
 }
-.notifications-counter {
+.notifications-action .notifications-counter {
   background-color: #e22626;
   border-radius: 1em;
   color: #ffffff;
@@ -2799,14 +2808,17 @@ fieldset[disabled] .admin__control-text + .ui-datepicker-trigger {
   background-color: #e0f6fe;
 }
 .notifications-entry.notifications-entry-last {
-  border-top: 1px solid #dddddd;
   margin: 0 2rem;
-  padding: .3rem 0 .6rem;
+  padding: .3rem 0 1.3rem;
   text-align: center;
 }
 .notifications-entry.notifications-entry-last:hover {
   background-color: transparent;
 }
+.notifications-entry + .notifications-entry-last {
+  padding-bottom: .6rem;
+  border-top: 1px solid #dddddd;
+}
 .notifications-entry ._cutted {
   cursor: pointer;
 }
@@ -2828,6 +2840,9 @@ fieldset[disabled] .admin__control-text + .ui-datepicker-trigger {
 .notifications-entry-description-end {
   display: none;
 }
+.notifications-entry-description-end._show {
+  display: inline;
+}
 .notifications-entry-time {
   color: #777777;
   font-size: 1.1rem;