From a9815b6d055c40f3b47bfecd64fe691e1b9b4fb5 Mon Sep 17 00:00:00 2001 From: Alexander Ebert Date: Thu, 17 Mar 2016 16:37:46 +0100 Subject: [PATCH] Added proper support for tab menus on mobile --- .../files/js/WoltLab/WCF/Ui/TabMenu.js | 37 ++++++++-- .../files/js/WoltLab/WCF/Ui/TabMenu/Simple.js | 10 +-- wcfsetup/install/files/style/ui/tabMenu.scss | 69 +++++++++++++------ 3 files changed, 84 insertions(+), 32 deletions(-) diff --git a/wcfsetup/install/files/js/WoltLab/WCF/Ui/TabMenu.js b/wcfsetup/install/files/js/WoltLab/WCF/Ui/TabMenu.js index c540becc54..3b5a13bb62 100644 --- a/wcfsetup/install/files/js/WoltLab/WCF/Ui/TabMenu.js +++ b/wcfsetup/install/files/js/WoltLab/WCF/Ui/TabMenu.js @@ -2,19 +2,20 @@ * Common interface for tab menu access. * * @author Alexander Ebert - * @copyright 2001-2015 WoltLab GmbH + * @copyright 2001-2016 WoltLab GmbH * @license GNU Lesser General Public License * @module WoltLab/WCF/Ui/TabMenu */ -define(['Dictionary', 'Dom/ChangeListener', 'Dom/Util', './TabMenu/Simple'], function(Dictionary, DomChangeListener, DomUtil, SimpleTabMenu) { +define(['Dictionary', 'Dom/ChangeListener', 'Dom/Util', 'Ui/CloseOverlay', './TabMenu/Simple'], function(Dictionary, DomChangeListener, DomUtil, UiCloseOverlay, SimpleTabMenu) { "use strict"; + var _activeList = null; var _tabMenus = new Dictionary(); /** * @exports WoltLab/WCF/Ui/TabMenu */ - var UiTabMenu = { + return { /** * Sets up tab menus and binds listeners. */ @@ -23,13 +24,21 @@ define(['Dictionary', 'Dom/ChangeListener', 'Dom/Util', './TabMenu/Simple'], fun this._selectErroneousTabs(); DomChangeListener.add('WoltLab/WCF/Ui/TabMenu', this._init.bind(this)); + UiCloseOverlay.add('WoltLab/WCF/Ui/TabMenu', function() { + if (_activeList) { + console.debug("b0rk!"); + _activeList.classList.remove('active'); + + _activeList = null; + } + }); }, /** * Initializes available tab menus. */ _init: function() { - var container, containerId, returnValue, tabMenu, tabMenus = elBySelAll('.tabMenuContainer:not(.staticTabMenuContainer)'); + var container, containerId, list, returnValue, tabMenu, tabMenus = elBySelAll('.tabMenuContainer:not(.staticTabMenuContainer)'); for (var i = 0, length = tabMenus.length; i < length; i++) { container = tabMenus[i]; containerId = DomUtil.identify(container); @@ -48,6 +57,24 @@ define(['Dictionary', 'Dom/ChangeListener', 'Dom/Util', './TabMenu/Simple'], fun tabMenu = this.getTabMenu(returnValue.parentNode.id); tabMenu.select(returnValue.id, null, true); } + + list = elBySel('#' + containerId + ' > nav > ul'); + (function(list) { + list.addEventListener(WCF_CLICK_EVENT, function(event) { + event.stopPropagation(); + + if (event.target === list) { + list.classList.add('active'); + + _activeList = list; + } + else { + list.classList.remove('active'); + + _activeList = null; + } + }); + })(list); } } }, @@ -78,6 +105,4 @@ define(['Dictionary', 'Dom/ChangeListener', 'Dom/Util', './TabMenu/Simple'], fun return _tabMenus.get(containerId); } }; - - return UiTabMenu; }); diff --git a/wcfsetup/install/files/js/WoltLab/WCF/Ui/TabMenu/Simple.js b/wcfsetup/install/files/js/WoltLab/WCF/Ui/TabMenu/Simple.js index f06cb884d2..a61bad5ce2 100644 --- a/wcfsetup/install/files/js/WoltLab/WCF/Ui/TabMenu/Simple.js +++ b/wcfsetup/install/files/js/WoltLab/WCF/Ui/TabMenu/Simple.js @@ -2,11 +2,11 @@ * Simple tab menu implementation with a straight-forward logic. * * @author Alexander Ebert - * @copyright 2001-2015 WoltLab GmbH + * @copyright 2001-2016 WoltLab GmbH * @license GNU Lesser General Public License * @module WoltLab/WCF/Ui/TabMenu/Simple */ -define(['Dictionary', 'Dom/Traverse', 'Dom/Util', 'EventHandler'], function(Dictionary, DomTraverse, DomUtil, EventHandler) { +define(['Dictionary', 'EventHandler', 'Dom/Traverse', 'Dom/Util'], function(Dictionary, EventHandler, DomTraverse, DomUtil) { "use strict"; /** @@ -172,7 +172,7 @@ define(['Dictionary', 'Dom/Traverse', 'Dom/Util', 'EventHandler'], function(Dict /** * Selects a tab. * - * @param {?(string|integer)} name tab name or sequence no + * @param {?(string|int)} name tab name or sequence no * @param {Element=} tab tab element * @param {boolean=} disableEvent suppress event handling */ @@ -244,8 +244,8 @@ define(['Dictionary', 'Dom/Traverse', 'Dom/Util', 'EventHandler'], function(Dict } if (span !== null) { - span.style.setProperty('transform', 'translateX(' + tab.offsetLeft + 'px)'); - span.style.setProperty('width', tab.clientWidth + 'px'); + span.style.setProperty('transform', 'translateX(' + tab.offsetLeft + 'px)', ''); + span.style.setProperty('width', tab.clientWidth + 'px', ''); } if (toggleHidden) { diff --git a/wcfsetup/install/files/style/ui/tabMenu.scss b/wcfsetup/install/files/style/ui/tabMenu.scss index 171c8fa671..04abfbfd05 100644 --- a/wcfsetup/install/files/style/ui/tabMenu.scss +++ b/wcfsetup/install/files/style/ui/tabMenu.scss @@ -1,36 +1,63 @@ /* main tabs */ .tabMenu { - //margin-bottom: 20px; position: relative; - > ul { - border-bottom: 1px solid $wcfContentBorderInner; - - @include inlineList; + > ul > li > a { + display: block; + padding: 5px 0; - > li { - &:not(:last-child) { - margin-right: 20px; - } + @include wcfFontSection; + } + + @include large-screen-only { + > ul { + border-bottom: 1px solid $wcfContentBorderInner; - &.active > a { - cursor: default; - } + @include inlineList; - > a { - display: block; - padding: 5px 0; + > li { + &:not(:last-child) { + margin-right: 20px; + } - @include wcfFontSection; + &.active > a { + cursor: default; + } } } + + > span { + border-top: 1px solid $wcfContentLink; + bottom: 0; + position: absolute; + transition: transform .2s linear, width .2s linear; + } } - > span { - border-top: 1px solid $wcfContentLink; - bottom: 0; - position: absolute; - transition: transform .2s linear, width .2s linear; + @include small-screen-only { + > ul { + border-bottom: 1px solid $wcfContentLink; + display: block; + + &:not(.active) > li:not(.active) { + display: none; + } + + > li { + &.active { + pointer-events: none; + > a::after { + content: $fa-var-caret-down; + font-family: FontAwesome; + margin-left: 7px; + } + } + } + } + + > span { + display: none; + } } } -- 2.20.1