MAGETWO-32250: Header

- CR changes

Author: Bogdan Plieshka

app/code/Magento/AdminNotification/Block/ToolbarEntry.php

@@ -20,6 +20,11 @@ class ToolbarEntry extends \Magento\Backend\Block\Template
      */
     const NOTIFICATIONS_NUMBER = 3;
 
+    /**
+     * Number of notifications showed on icon
+     */
+    const NOTIFICATIONS_COUNTER_MAX = 99;
+
     /**
      * Length of notification description showed by default
      */
@@ -56,6 +61,16 @@ public function getNotificationDescriptionLength()
         return self::NOTIFICATION_DESCRIPTION_LENGTH;
     }
 
+    /**
+     * Retrieve notification counter max value
+     *
+     * @return int
+     */
+    public function getNotificationCounterMax()
+    {
+        return self::NOTIFICATIONS_COUNTER_MAX;
+    }
+
     /**
      * Retrieve number of unread notifications
      *

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

@@ -8,7 +8,10 @@
 
 ?>
 <?php /** @var $this \Magento\AdminNotification\Block\ToolbarEntry */ ?>
-<?php $notificationCount = $block->getUnreadNotificationCount(); ?>
+<?php
+    $notificationCount = $block->getUnreadNotificationCount();
+    $notificationCounterMax = $block->getNotificationCounterMax();
+?>
 <div
     data-mage-init='{"toolbarEntry": {}}'
     class="notifications-wrapper"
@@ -21,7 +24,7 @@
             title="<?php echo __('Notifications'); ?>"
             data-toggle="dropdown">
             <span class="notifications-counter">
-                <?php echo ($block->escapeHtml($notificationCount) > 99) ? '99+' : $block->escapeHtml($notificationCount); ?>
+                <?php echo ($notificationCount > $notificationCounterMax) ? $notificationCounterMax . '+' : $notificationCount; ?>
             </span>
         </a>
         <ul
@@ -30,7 +33,7 @@
             <?php foreach ($block->getLatestUnreadNotifications() as $notification) : ?>
             <?php /** @var $notification \Magento\AdminNotification\Model\Inbox*/ ?>
             <li class="notifications-entry<?php if ($notification->getSeverity() == 1): ?> notifications-critical<?php endif; ?>"
-                data-notification-id="<?php echo $block->escapeHtml($notification->getId()); ?>"
+                data-notification-id="<?php echo $notification->getId(); ?>"
                 data-notification-severity="<?php if ($notification->getSeverity() == 1): ?>1<?php endif; ?>">
                 <?php
                     $notificationDescription = $block->escapeHtml($notification->getDescription());
@@ -39,7 +42,7 @@
                 <strong class="notifications-entry-title">
                     <?php echo $block->escapeHtml($notification->getTitle()); ?>
                 </strong>
-                <?php if (strlen($notificationDescription) > $block->escapeHtml($notificationDescriptionLength)) : ?>
+                <?php if (strlen($notificationDescription) > $notificationDescriptionLength) : ?>
                     <p class="notifications-entry-description _cutted">
                         <span class="notifications-entry-description-start">
                             <?php echo substr($notificationDescription, 0, $notificationDescriptionLength); ?>
@@ -54,7 +57,7 @@
                     </p>
                 <?php endif; ?>
                 <time class="notifications-entry-time">
-                    <?php echo $block->escapeHtml($block->formatNotificationDate($notification->getDateAdded())); ?>
+                    <?php echo $block->formatNotificationDate($notification->getDateAdded()); ?>
                 </time>
                 <button
                     type="button"

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

@@ -63,12 +63,19 @@
         }
         &:before {
             &:extend(.abs-icon all);
+            .transition(color);
             color: @primary__color;
             content: @icon-logo__content;
+            display: block;
             font-size: 2.5rem;
             position: relative;
             top: -.2rem;
         }
+        &:active {
+            &:before {
+                .scale();
+            }
+        }
     }
 }
 

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

@@ -7,8 +7,6 @@
 //  Page header -> Headings group -> Breadcrumbs
 //  _____________________________________________
 
-//
-
 .page-title-breadcrumbs {
     font-size: @page-title-breadcrumb__font-size;
     min-height: @page-title-breadcrumbs__min-height;

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

@@ -5,10 +5,13 @@
 //
 //  Main elements -> Actions bar
 //  _____________________________________________
+
 //  ToDo UI: Consist old styles, should be changed with new design
+
 //
 //  Components
 //  ---------------------------------------------
+
 @import 'actions_bar/_store-switcher';
 
 //
@@ -23,10 +26,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;
 }
 

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

@@ -6,6 +6,7 @@
 //
 //  Main elements -> Actions bar -> Store Switcher
 //  _____________________________________________
+
 //  ToDo UI: Consist old styles, should be changed with new design
 
 .store-switcher {

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

@@ -945,8 +945,8 @@ option:empty {
 }
 .actions-split.active .dropdown-menu,
 .actions-split._active .dropdown-menu {
-  visibility: visible;
   opacity: 1;
+  visibility: visible;
 }
 .actions-split .action-toggle,
 .actions-split .action-default {
@@ -967,12 +967,12 @@ option:empty {
 }
 .actions-split .action-toggle {
   padding-right: 4rem;
+  border-left-color: rgba(0, 0, 0, 0.2);
   bottom: 0;
   padding-left: 0;
   position: absolute;
   right: 0;
   top: 0;
-  border-left-color: rgba(0, 0, 0, 0.2);
 }
 .actions-split .action-toggle._active:after,
 .actions-split .action-toggle.active:after {
@@ -1015,25 +1015,25 @@ option:empty {
   width: 1px;
 }
 .actions-split .dropdown-menu {
+  background-color: #ffffff;
+  border: 1px solid #007bdb;
+  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
   display: block;
-  visibility: hidden;
-  position: absolute;
+  left: 0;
   list-style: none;
-  min-width: 0;
   margin: 2px 0 0;
+  min-width: 0;
+  opacity: 0;
   padding: 0;
+  position: absolute;
   right: 0;
-  left: 0;
   top: 100%;
-  border: 1px solid #007bdb;
-  background-color: #ffffff;
-  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
-  opacity: 0;
   transition: opacity 0.15s ease;
+  visibility: hidden;
 }
 .actions-split .dropdown-menu > li {
-  padding: .6875em;
   border: none;
+  padding: .6875em;
 }
 .actions-split .dropdown-menu > li:hover {
   background-color: #e0f6fe;
@@ -2945,12 +2945,17 @@ fieldset[disabled] .admin__control-text + .ui-datepicker-trigger {
   color: #fd6e23;
 }
 .copyright .link-copyright:before {
+  transition: color 0.1s linear;
   color: #eb5202;
   content: '\e606';
+  display: block;
   font-size: 2.5rem;
   position: relative;
   top: -0.2rem;
 }
+.copyright .link-copyright:active:before {
+  transform: scale(0.9);
+}
 .footer-legal {
   padding-top: 1rem;
   text-align: right;

app/design/adminhtml/Magento/backend/web/css/source/_tooltip-temp.less

@@ -6,6 +6,7 @@
 //
 //  Main elements -> Tooltip
 //  _____________________________________________
+
 //  ToDo UI: Consist old styles, should be changed with new design
 
 .tooltip {
@@ -20,7 +21,6 @@
         display: inline-block;
         vertical-align: middle;
         cursor: pointer;
-
         &:before {
             content: "?";
             font-weight: 500;
@@ -42,7 +42,7 @@
             .visually-hidden();
         }
     }
-    //TODO Tooltips
+    //  TODO Tooltips
     .tooltip-content {
         display: none;
         position: absolute;

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

@@ -23,8 +23,8 @@
     &.active,
     &._active {
         .dropdown-menu {
-            visibility: visible;
             opacity: 1;
+            visibility: visible;
         }
     }
     .action-toggle,
@@ -47,12 +47,12 @@
             @_triangle__height: .9rem;
             @_triangle__width: 1.2rem;
         );
+        border-left-color: rgba(0, 0, 0, .2);
         bottom: 0;
         padding-left: 0;
         position: absolute;
         right: 0;
         top: 0;
-        border-left-color: rgba(0,0,0,.2);
         &.action-secondary,
         &.secondary,
         &.action-primary,
@@ -66,24 +66,24 @@
         }
     }
     .dropdown-menu {
+        background-color: @page-wrapper__background-color;
+        border: 1px solid @button__hover__border-color;
+        box-shadow: @component__box-shadow__base;
         display: block; // ToDo UI: Should be deleted with old styles
-        visibility: hidden;
-        position: absolute;
+        left: 0;
         list-style: none;
-        min-width: 0; // ToDo UI: Should be deleted with old styles
         margin: 2px 0 0; // Action box-shadow + 1px indent
+        min-width: 0; // ToDo UI: Should be deleted with old styles
+        opacity: 0;
         padding: 0;
+        position: absolute;
         right: 0;
-        left: 0;
         top: 100%;
-        border: 1px solid @button__hover__border-color;
-        background-color: @page-wrapper__background-color;
-        box-shadow: @component__box-shadow__base;
-        opacity: 0;
         transition: opacity @appering__transition-duration @apperaing__transition-timing-function;
+        visibility: hidden;
         > li {
+            border: none; // ToDo UI: Should be deleted with old styles
             padding: .6875em;
-            border: none;  // ToDo UI: Should be deleted with old styles
             &:hover {
                 background-color: @dropdown-menu__hover__background-color;
             }