projects / GitHub / WoltLab / WCF.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: b18c373)
Implemented `position: fixed` for ACP menu
authorAlexander Ebert <ebert@woltlab.com>
Fri, 19 May 2017 12:42:11 +0000 (14:42 +0200)
committerAlexander Ebert <ebert@woltlab.com>
Fri, 19 May 2017 12:42:11 +0000 (14:42 +0200)
See #2278

wcfsetup/install/files/acp/style/layout.scss patch | blob | blame | history
wcfsetup/install/files/acp/templates/header.tpl patch | blob | blame | history
wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Page/Menu.js patch | blob | blame | history

diff --git a/wcfsetup/install/files/acp/style/layout.scss b/wcfsetup/install/files/acp/style/layout.scss
index 897bd36ff1c07754ad1b11b6dddaac19618f6ce9..49bab44d2d25addc1e2c2509701ecc79489f4f4f 100644 (file)
--- a/wcfsetup/install/files/acp/style/layout.scss
+++ b/wcfsetup/install/files/acp/style/layout.scss
@@ -1,4 +1,5 @@
 $wcfAcpMenuWidth: 150px;
+$wcfAcpSubMenuWidth: 300px;
 
 .layoutBoundary {
        margin: 0;
@@ -137,7 +138,6 @@ $wcfAcpMenuWidth: 150px;
 
 
 .acpPageContentContainer {
-       display: flex;
        flex: 1 0 auto;
        
        #content {
@@ -153,9 +153,13 @@ $wcfAcpMenuWidth: 150px;
        
        .acpPageMenu {
                background-color: rgb(50, 92, 132);
-               flex: 0 0 $wcfAcpMenuWidth;
+               bottom: 0;
+               left: 0;
                text-align: center;
                overflow: hidden;
+               position: fixed;
+               top: 50px;
+               width: $wcfAcpMenuWidth;
                
                .acpPageMenuLink {
                        //background-color: rgb(43, 79, 113);
@@ -192,13 +196,16 @@ $wcfAcpMenuWidth: 150px;
        
        .acpPageSubMenu {
                background-color: rgb(36, 66, 95);
-               flex: 0 0 auto;
+               bottom: 0;
+               left: $wcfAcpMenuWidth;
+               overflow: hidden;
+               position: fixed;
+               top: 50px;
        }
        
        .acpPageSubMenuCategoryList {
-               flex: 0 0 300px;
                overflow: hidden;
-               width: 300px;
+               width: $wcfAcpSubMenuWidth;
                
                &:not(.active) {
                        display: none;
@@ -256,6 +263,23 @@ $wcfAcpMenuWidth: 150px;
                        color: rgb(44, 62, 80) !important;
                }
        }
+       
+       .pageContainer:not(.acpPageHiddenMenu) {
+               .acpPageContentContainer {
+                       padding-left: $wcfAcpMenuWidth;
+               }
+               
+               .pageFooter {
+                       padding-left: $wcfAcpMenuWidth;
+               }
+       }
+       
+       .pageContainer.acpPageSubMenuActive {
+               .acpPageContentContainer,
+               .pageFooter {
+                       padding-left: $wcfAcpMenuWidth + $wcfAcpSubMenuWidth;
+               }
+       }
 }
 
 @include screen-md-down {
diff --git a/wcfsetup/install/files/acp/templates/header.tpl b/wcfsetup/install/files/acp/templates/header.tpl
index 7dd699d1dda57f06ce3a266aed0103bd758b3c09..acbf01c712e2a613a9e7474ed506f7b64f648abf 100644 (file)
--- a/wcfsetup/install/files/acp/templates/header.tpl
+++ b/wcfsetup/install/files/acp/templates/header.tpl
@@ -164,7 +164,12 @@
 <body id="tpl{$templateName|ucfirst}" data-template="{$templateName}" data-application="{$templateNameApplication}" class="wcfAcp">
        <a id="top"></a>
        
-       <div id="pageContainer" class="pageContainer">
+       {assign var=_acpPageSubMenuActive value=false}
+       {assign var=_activeMenuItems value=$__wcf->getACPMenu()->getActiveMenuItems()}
+       {foreach from=$__wcf->getACPMenu()->getMenuItems('') item=_sectionMenuItem}
+               {if $_sectionMenuItem->menuItem|in_array:$_activeMenuItems}{assign var=_acpPageSubMenuActive value=true}{/if}
+       {/foreach}
+       <div id="pageContainer" class="pageContainer{if !PACKAGE_ID || !$__wcf->user->userID} acpPageHiddenMenu{elseif $_acpPageSubMenuActive} acpPageSubMenuActive{/if}">
                {event name='beforePageHeader'}
                
                {include file='pageHeader'}
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Page/Menu.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Page/Menu.js
index cf2bdc895822c7e516229d5673d6c5a857182f05..2497b5838b21da3441da048d39833875b2cd3214 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Page/Menu.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Page/Menu.js
@@ -6,12 +6,16 @@
  * @license    GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
  * @module     WoltLabSuite/Core/Acp/Ui/Page/Menu
  */
-define(['Dictionary', 'EventHandler'], function(Dictionary, EventHandler) {
+define(['Dictionary', 'EventHandler', 'perfect-scrollbar', 'Ui/Screen'], function(Dictionary, EventHandler, perfectScrollbar, UiScreen) {
        "use strict";
        
+       var _acpPageMenu = elById('acpPageMenu');
+       var _acpPageSubMenu = elById('acpPageSubMenu');
        var _activeMenuItem = '';
        var _menuItems = new Dictionary();
        var _menuItemContainers = new Dictionary();
+       var _pageContainer = elById('pageContainer');
+       var _perfectScrollbarActive = false;
        
        /**
         * @exports     WoltLabSuite/Core/Acp/Ui/Page/Menu
@@ -35,6 +39,37 @@ define(['Dictionary', 'EventHandler'], function(Dictionary, EventHandler) {
                        elBySelAll('.acpPageSubMenuCategoryList', null, function(container) {
                                _menuItemContainers.set(elData(container, 'menu-item'), container);
                        });
+                       
+                       var enablePerfectScrollbar = function () {
+                               var options = {
+                                       wheelPropagation: false,
+                                       swipePropagation: false,
+                                       suppressScrollX: true
+                               };
+                               
+                               perfectScrollbar.initialize(_acpPageMenu, options);
+                               perfectScrollbar.initialize(_acpPageSubMenu, options);
+                               
+                               _perfectScrollbarActive = true;
+                       };
+                       
+                       UiScreen.on('screen-lg', {
+                               match: enablePerfectScrollbar,
+                               unmatch: function () {
+                                       perfectScrollbar.destroy(_acpPageMenu);
+                                       perfectScrollbar.destroy(_acpPageSubMenu);
+                                       
+                                       _perfectScrollbarActive = true;
+                               },
+                               setup: enablePerfectScrollbar
+                       });
+                       
+                       window.addEventListener('resize', function () {
+                               if (_perfectScrollbarActive) {
+                                       perfectScrollbar.update(_acpPageMenu);
+                                       perfectScrollbar.update(_acpPageSubMenu);
+                               }
+                       })
                },
                
                /**
@@ -49,6 +84,7 @@ define(['Dictionary', 'EventHandler'], function(Dictionary, EventHandler) {
                        
                        var link = event.currentTarget;
                        var menuItem = elData(link, 'menu-item');
+                       var acpPageSubMenuActive = false;
                        
                        // remove active marking from currently active menu
                        if (_activeMenuItem) {
@@ -65,6 +101,13 @@ define(['Dictionary', 'EventHandler'], function(Dictionary, EventHandler) {
                                _menuItemContainers.get(menuItem).classList.add('active');
                                
                                _activeMenuItem = menuItem;
+                               acpPageSubMenuActive = true;
+                       }
+                       
+                       _pageContainer.classList[(acpPageSubMenuActive ? 'add' : 'remove')]('acpPageSubMenuActive');
+                       if (_perfectScrollbarActive) {
+                               _acpPageSubMenu.scrollTop = 0;
+                               perfectScrollbar.update(_acpPageSubMenu);
                        }
                        
                        EventHandler.fire('com.woltlab.wcf.AcpMenu', 'resize');
WoltLab Suite Core (previously WoltLab Community Framework)