From: Alexander Ebert Date: Fri, 19 May 2017 12:42:11 +0000 (+0200) Subject: Implemented `position: fixed` for ACP menu X-Git-Tag: 3.1.0_Alpha_1~455 X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=4e71a79b759c5b976d41816da8afb58201b78406;p=GitHub%2FWoltLab%2FWCF.git Implemented `position: fixed` for ACP menu See #2278 --- diff --git a/wcfsetup/install/files/acp/style/layout.scss b/wcfsetup/install/files/acp/style/layout.scss index 897bd36ff1..49bab44d2d 100644 --- 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 7dd699d1dd..acbf01c712 100644 --- a/wcfsetup/install/files/acp/templates/header.tpl +++ b/wcfsetup/install/files/acp/templates/header.tpl @@ -164,7 +164,12 @@ -
+ {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} +
{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 cf2bdc8958..2497b5838b 100644 --- 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 * @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');