Merge remote-tracking branch 'origin/MAGETWO-34929' into PR

Natalia Momotenko · Natalia Momotenko · commit 897d425dfab9 · 2015-06-03T16:58:20.000+03:00
diff --git a/app/code/Magento/Backend/view/adminhtml/templates/menu.phtml b/app/code/Magento/Backend/view/adminhtml/templates/menu.phtml
@@ -8,7 +8,6 @@
 
 ?>
 
-
 <nav data-mage-init='{"globalNavigation": {}}' class="admin__menu" role="navigation">
     <?php echo $block->renderNavigation($block->getMenuModel(), 0, 12); ?>
 </nav>
diff --git a/app/design/adminhtml/Magento/backend/Magento_AdminNotification/web/css/source/_module.less b/app/design/adminhtml/Magento/backend/Magento_AdminNotification/web/css/source/_module.less
@@ -15,8 +15,8 @@
 //  ---------------------------------------------
 
 .message-system-inner {
+    &:extend(.abs-clearfix all);
     background: @message-system__background-color;
-    .extend__clearfix();
     .message-system-list {
         float: left;
         width: 75%;
diff --git a/app/design/adminhtml/Magento/backend/Magento_Backend/layout/default.xml b/app/design/adminhtml/Magento/backend/Magento_Backend/layout/default.xml
@@ -13,7 +13,7 @@
 
     <body>
 
-        <referenceContainer name="page.wrapper">
+        <referenceContainer name="root">
             <container name="menu.wrapper" before="-" htmlTag="div" htmlClass="menu-wrapper"/>
         </referenceContainer>
 
diff --git a/app/design/adminhtml/Magento/backend/Magento_Backend/web/css/source/module/_menu.less b/app/design/adminhtml/Magento/backend/Magento_Backend/web/css/source/module/_menu.less
@@ -50,22 +50,29 @@
 //  ---------------------------------------------
 
 .menu-wrapper {
-    height: 100%;
-    left: 0;
-    position: fixed;
-    top: 0;
+    float: left;
+    position: relative;
     width: @menu__width;
     z-index: @menu__z-index;
-    &:after {
+    &:before {
         background-color: @menu__background-color;
         bottom: 0;
         content: '';
         left: 0;
-        position: absolute;
-        right: 0;
+        position: fixed;
         top: 0;
+        width: @menu__width;
         z-index: @menu-wrapper__z-index;
     }
+    &._fixed {
+        left: 0;
+        position: fixed;
+        top: 0;
+        ~ .page-wrapper {
+            margin-left: @menu__width;
+        }
+    }
+
     .logo {
         display: block;
         height: @menu-logo-img__height + @menu-logo__padding-top + @menu-logo__padding-bottom;
@@ -117,7 +124,6 @@
 //  ---------------------------------------------
 
 .admin__menu {
-    position: relative;
     li {
         display: block;
     }
@@ -197,10 +203,19 @@
             min-height: ~'calc(@{menu-logo__outer-size} + 2rem + 100%)';
             padding: @submenu__padding-vertical 0 0;
             position: absolute;
-            top: -@menu-logo__outer-size;
-            transition: all .5s ease;
+            top: 0;
+            transition-duration: .5s;
+            transition-property: left, visibility;
+            transition-timing-function: ease;
             visibility: hidden;
             z-index: @submenu__z-index;
+            &._overlap {
+                overflow-y: auto;
+                height: 100%;
+                &::-webkit-scrollbar {
+                    width: 0;
+                }
+            }
         }
         &._show  {
             > .submenu {
@@ -395,7 +410,7 @@
 .admin__menu-overlay {
     bottom: 0;
     left: 0;
-    position: absolute;
+    position: fixed;
     right: 0;
     top: 0;
     z-index: @menu-overlay__z-index;
diff --git a/app/design/adminhtml/Magento/backend/Magento_Backend/web/css/source/module/main/_actions-bar.less b/app/design/adminhtml/Magento/backend/Magento_Backend/web/css/source/module/main/_actions-bar.less
@@ -26,7 +26,7 @@
 
 .page-main-actions:not(._hidden),
 .page-actions._fixed {
-    .extend__clearfix();
+    &:extend(.abs-clearfix all);
     background: @page-main-actions__background-color;
     border-bottom: 1px solid @page-main-actions__border-color;
     border-top: 1px solid @page-main-actions__border-color;
diff --git a/app/design/adminhtml/Magento/backend/Magento_Backend/web/css/source/module/pages/_dashboard.less b/app/design/adminhtml/Magento/backend/Magento_Backend/web/css/source/module/pages/_dashboard.less
@@ -131,8 +131,8 @@
 }
 
 .dashboard-totals-list {
+    &:extend(.abs-clearfix all);
     display: table;
-    .extend__clearfix();
     .extend__list-reset-styles();
     width: 100%;
 }
@@ -165,7 +165,7 @@
 
 .dashboard-store-stats {
     .ui-tabs {
-        .extend__clearfix();
+        &:extend(.abs-clearfix all);
         margin-bottom: 0;
         position: relative;
         &:before {
diff --git a/app/design/adminhtml/Magento/backend/Magento_Backend/web/css/source/module/pages/_login.less b/app/design/adminhtml/Magento/backend/Magento_Backend/web/css/source/module/pages/_login.less
@@ -35,6 +35,7 @@
         background-color: @login-box__background-color;
         border: @login-box__border;
         box-shadow: @login-box__shadow;
+        float: none;
         margin: auto;
         max-width: @login-box__max-width;
         min-height: @login-box__min-height;
diff --git a/app/design/adminhtml/Magento/backend/Magento_Ui/web/css/source/module/data-grid/data-grid-header/_data-grid-action-columns.less b/app/design/adminhtml/Magento/backend/Magento_Ui/web/css/source/module/data-grid/data-grid-header/_data-grid-action-columns.less
@@ -60,7 +60,7 @@
         }
     }
     .admin__action-dropdown-menu-content {
-        .extend__clearfix();
+        &:extend(.abs-clearfix all);
         max-height: (@data-grid-action-columns-menu-items-to-scroll / @data-grid-action-columns-menu-item__column) * (@data-grid-action-columns-menu-item__height + @data-grid-action-columns-menu-item__margin-bottom) + (@data-grid-action-columns-menu-item__height / 2 + @data-grid-action-columns-menu-item__margin-bottom);
         overflow-y: auto;
         padding-top: 1.5rem;
diff --git a/app/design/adminhtml/Magento/backend/web/css/source/_extends.less b/app/design/adminhtml/Magento/backend/web/css/source/_extends.less
@@ -56,15 +56,11 @@
     &:extend(.abs-visually-hidden-reset all);
 }
 
-//  Clearfix
+//  Clearfixes
 .abs-clearfix {
     .clearfix();
 }
 
-.extend__clearfix() {
-    &:extend(.abs-clearfix all);
-}
-
 //  Clearer - clearing container using only :after element
 .abs-clearer {
     .clearer();
diff --git a/app/design/adminhtml/Magento/backend/web/css/source/_structure.less b/app/design/adminhtml/Magento/backend/web/css/source/_structure.less
@@ -23,23 +23,31 @@
 
 //
 
+html {
+    height: 100%;
+}
+
 body {
+    &:extend(.abs-clearer all);
     background-color: @body__background-color;
+    min-height: 100%;
+    min-width: 102.4rem;
 }
 
 .page-wrapper {
     background-color: @page-wrapper__background-color;
-    min-width: 102.4rem;
-    padding-left: @page-wrapper__indent-left;
+    float: left;
+    width: ~'calc(100% - @{menu__width})';
 }
 
 .page-content {
-    .extend__clearfix();
+    &:extend(.abs-clearfix all);
     padding-bottom: @page-content__padding-vertical;
     padding-left: @page-content__padding-horizontal;
     padding-right: @page-content__padding-horizontal;
 }
 
+//  ToDo UI: should be moved to messages
 .notices-wrapper {
     margin: 0 3rem;
     .messages {
diff --git a/app/design/adminhtml/Magento/backend/web/css/source/_tabs.less b/app/design/adminhtml/Magento/backend/web/css/source/_tabs.less
@@ -10,7 +10,7 @@
 //  Are used in dashboard
 
 .tabs-horiz {
-    .extend__clearfix();
+    &:extend(.abs-clearfix all);
     margin: 0;
     padding: 0;
 
diff --git a/app/design/adminhtml/Magento/backend/web/css/source/_typography.less b/app/design/adminhtml/Magento/backend/web/css/source/_typography.less
@@ -46,11 +46,6 @@
 
 //
 
-html,
-body {
-    height: 100%;
-}
-
 html {
     font-size: 62.5%;
 }
diff --git a/app/design/adminhtml/Magento/backend/web/css/source/actions/_actions-split.less b/app/design/adminhtml/Magento/backend/web/css/source/actions/_actions-split.less
@@ -40,7 +40,7 @@
     @_action-default__min-width: 9.3rem;
     @_action-toggle__width: @action__height;
 
-    .extend__clearfix();
+    &:extend(.abs-clearfix all);
     position: relative;
     z-index: @actions-split__z-index;
     &.active,
diff --git a/app/design/adminhtml/Magento/backend/web/js/theme.js b/app/design/adminhtml/Magento/backend/web/js/theme.js
@@ -3,9 +3,145 @@
  * See COPYING.txt for license details.
  */
 
+define('globalNavigationScroll', [
+    'jquery'
+], function ($) {
+    'use strict';
+
+    var win = $(window),
+        subMenuClass = '.submenu',
+        overlapClassName = '_overlap',
+        fixedClassName = '_fixed',
+        menu = $('.menu-wrapper'),
+        content = $('.page-wrapper'),
+        menuItems = $('#nav').children('li'),
+        subMenus = menuItems.children(subMenuClass),
+        winHeight,
+        menuHeight = menu.height(),
+        menuHeightRest = 0,
+        menuScrollMax = 0,
+        submenuHeight = 0,
+        contentHeight,
+        winTop = 0,
+        winTopLast = 0,
+        scrollStep = 0,
+        nextTop = 0;
+
+    /**
+     * Check if menu is fixed
+     * @returns {boolean}
+     */
+    function isMenuFixed() {
+        return (menuHeight < contentHeight) && (contentHeight > winHeight);
+    }
+
+    /**
+     * Check if class exist than add or do nothing
+     * @param {jQuery} el
+     * @param $class string
+     */
+    function checkAddClass(el, $class) {
+        if (!el.hasClass($class)) {
+            el.addClass($class);
+        }
+    }
+
+    /**
+     * Check if class exist than remove or do nothing
+     * @param {jQuery} el
+     * @param $class string
+     */
+    function checkRemoveClass(el, $class) {
+        if (el.hasClass($class)) {
+            el.removeClass($class);
+        }
+    }
+
+    /**
+     * Calculate and apply menu position
+     */
+    function positionMenu() {
+
+        //  Spotting positions and heights
+        winHeight = win.height();
+        contentHeight = content.height();
+        winTop = win.scrollTop();
+        scrollStep = winTop - winTopLast;
+        menuHeightRest = menuHeight - winTop; // is a visible menu height
+
+        if (isMenuFixed()) { // fixed menu cases
+
+            checkAddClass(menu, fixedClassName);
+
+            if (menuHeight > winHeight) { // smart scroll cases
+
+                if (winTop > winTopLast) { //  scroll down
+
+                    menuScrollMax = menuHeight - winHeight;
+
+                    nextTop < (menuScrollMax - scrollStep) ?
+                        nextTop += scrollStep : nextTop = menuScrollMax;
+
+                    menu.css('top', -nextTop);
+
+                } else if (winTop < winTopLast) { // scroll up
+
+                    nextTop > -scrollStep ?
+                        nextTop += scrollStep : nextTop = 0;
+
+                    menu.css('top', -nextTop);
+
+                }
+
+            }
+
+        } else { // static menu cases
+            checkRemoveClass(menu, fixedClassName);
+        }
+
+        //  Save previous window scrollTop
+        winTopLast = winTop;
+
+    }
+
+    positionMenu(); // page start calculation
+
+    //  Change position on scroll
+    win.on('scroll', function () {
+        positionMenu();
+    });
+
+    win.on('resize', function () {
+
+        winHeight = win.height();
+
+        //  Reset position if fixed and out of smart scroll
+        if ((menuHeight < contentHeight) && (menuHeight <= winHeight)) {
+            menu.removeAttr('style');
+            //  Remove overlap classes from submenus and clear overlap adding event
+            subMenus.removeClass(overlapClassName);
+            menuItems.off();
+        }
+
+    });
+
+    //  Add event to menuItems to check submenu overlap
+    menuItems.on('click', function () {
+        
+        var submenu = $(this).children(subMenuClass);
+        submenuHeight = submenu.height();
+
+        if (isMenuFixed() && (submenuHeight > winHeight)) {
+            checkAddClass(submenu, overlapClassName);
+        }
+    });
+
+});
+
 define('globalNavigation', [
     'jquery',
-    'jquery/ui'
+    'jquery/ui',
+    'globalNavigationScroll'
 ], function ($) {
     'use strict';
 

Original file line number	Diff line number	Diff line change
`@@ -60,7 +60,7 @@`
`60`	`60`	`}`
`61`	`61`	`}`
`62`	`62`	`.admin__action-dropdown-menu-content {`
`63`		`- .extend__clearfix();`
	`63`	`+ &:extend(.abs-clearfix all);`
`64`	`64`	`max-height: (@data-grid-action-columns-menu-items-to-scroll / @data-grid-action-columns-menu-item__column) * (@data-grid-action-columns-menu-item__height + @data-grid-action-columns-menu-item__margin-bottom) + (@data-grid-action-columns-menu-item__height / 2 + @data-grid-action-columns-menu-item__margin-bottom);`
`65`	`65`	`overflow-y: auto;`
`66`	`66`	`padding-top: 1.5rem;`