From 3fddb0bae0349e8460661594cdf141ada16a71f1 Mon Sep 17 00:00:00 2001 From: Alexander Ebert Date: Wed, 17 Aug 2016 17:24:19 +0200 Subject: [PATCH] Added proper badge support for mobile menu --- com.woltlab.wcf/templates/pageMenuMobile.tpl | 6 +++-- wcfsetup/install/files/js/WCF.User.js | 5 +++++ .../Core/Ui/Page/Menu/Abstract.js | 17 ++++++++++++-- .../js/WoltLabSuite/Core/Ui/Page/Menu/User.js | 22 +++++++++++++++++++ .../files/style/layout/pageHeader.scss | 14 ++++++++++++ .../install/files/style/ui/menuMobile.scss | 4 ++++ 6 files changed, 64 insertions(+), 4 deletions(-) diff --git a/com.woltlab.wcf/templates/pageMenuMobile.tpl b/com.woltlab.wcf/templates/pageMenuMobile.tpl index 04f22c351f..0549637505 100644 --- a/com.woltlab.wcf/templates/pageMenuMobile.tpl +++ b/com.woltlab.wcf/templates/pageMenuMobile.tpl @@ -94,16 +94,18 @@ {/if}
  • - + {lang}wcf.user.notification.notifications{/lang} + {if $__wcf->getUserNotificationHandler()->getNotificationCount()}{#$__wcf->getUserNotificationHandler()->getNotificationCount()}{/if}
    • {if $__wcf->user->userID && $__wcf->session->getPermission('mod.general.canUseModeration')}
  • - + {lang}wcf.moderation.moderation{/lang} + {if $__wcf->getModerationQueueManager()->getOutstandingModerationCount()}{#$__wcf->getModerationQueueManager()->getOutstandingModerationCount()}{/if}
    • {/if} diff --git a/wcfsetup/install/files/js/WCF.User.js b/wcfsetup/install/files/js/WCF.User.js index aa8d0b9cfd..c87c440558 100644 --- a/wcfsetup/install/files/js/WCF.User.js +++ b/wcfsetup/install/files/js/WCF.User.js @@ -402,6 +402,11 @@ WCF.User.Panel.Abstract = Class.extend({ this._markAllAsReadLink = null; } } + + WCF.System.Event.fireEvent('com.woltlab.wcf.userMenu', 'updateBadge', { + count: count, + identifier: this._identifier + }); }, /** diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Menu/Abstract.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Menu/Abstract.js index 2ceb9da6b7..4cf5f5d906 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Menu/Abstract.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Menu/Abstract.js @@ -36,8 +36,8 @@ define(['Environment', 'EventHandler', 'ObjectMap', 'Dom/Traverse', 'Dom/Util', this._removeActiveList = false; var callbackOpen = this.open.bind(this); - var button = elBySel(buttonSelector); - button.addEventListener(WCF_CLICK_EVENT, callbackOpen); + this._button = elBySel(buttonSelector); + this._button.addEventListener(WCF_CLICK_EVENT, callbackOpen); this._initItems(); this._initHeader(); @@ -76,6 +76,8 @@ define(['Environment', 'EventHandler', 'ObjectMap', 'Dom/Traverse', 'Dom/Util', backdrop.addEventListener(WCF_CLICK_EVENT, this.close.bind(this)); DomUtil.insertAfter(backdrop, this._menu); + + this._updateButtonState(); }, /** @@ -368,6 +370,17 @@ define(['Environment', 'EventHandler', 'ObjectMap', 'Dom/Traverse', 'Dom/Util', this._depth += (increase) ? 1 : -1; this._menu.children[0].style.setProperty('transform', 'translateX(' + (this._depth * -100) + '%)', ''); + }, + + _updateButtonState: function() { + var hasNewContent = false; + elBySelAll('.badgeUpdate', this._menu, function (badge) { + if (~~badge.textContent > 0) { + hasNewContent = true; + } + }); + + this._button.classList[(hasNewContent ? 'add' : 'remove')]('pageMenuMobileButtonHasContent'); } }; diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Menu/User.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Menu/User.js index 5392ef760e..bfe10c28aa 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Menu/User.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Menu/User.js @@ -24,6 +24,28 @@ define(['Core', 'EventHandler', './Abstract'], function(Core, EventHandler, UiPa 'pageUserMenuMobile', '#pageHeader .userPanel' ); + + EventHandler.add('com.woltlab.wcf.userMenu', 'updateBadge', (function (data) { + elBySelAll('.menuOverlayItemBadge', this._menu, (function (item) { + if (elData(item, 'badge-identifier') === data.identifier) { + var badge = elBySel('.badge', item); + if (data.count) { + if (badge === null) { + badge = elCreate('span'); + badge.className = 'badge badgeUpdate'; + item.appendChild(badge); + } + + badge.textContent = data.count; + } + else if (badge !== null) { + elRemove(badge); + } + + this._updateButtonState(); + } + }).bind(this)); + }).bind(this)); } }); diff --git a/wcfsetup/install/files/style/layout/pageHeader.scss b/wcfsetup/install/files/style/layout/pageHeader.scss index f07716dd1f..ec39766478 100644 --- a/wcfsetup/install/files/style/layout/pageHeader.scss +++ b/wcfsetup/install/files/style/layout/pageHeader.scss @@ -349,6 +349,14 @@ } } +@keyframes wcfMobileMenuNewContent { + 0% { box-shadow: 0 0 0 rgba(255, 0, 0, 0); } + 25% { box-shadow: 0 0 0 rgba(255, 0, 0, 1); } + 50% { box-shadow: 0 0 10px rgba(255, 0, 0, 1); } + 75% { box-shadow: 0 0 0 rgba(255, 0, 0, 1); } + 100% { box-shadow: 0 0 0 rgba(255, 0, 0, 0); } +} + @include screen-md-down { .pageHeader > div > div { padding-bottom: 10px; @@ -400,6 +408,7 @@ .userPanel { &::before { background-color: $wcfHeaderMenuBackground; + border-radius: 2px; color: $wcfHeaderMenuLink; font-family: FontAwesome; font-size: 28px; @@ -411,6 +420,11 @@ background-color: $wcfHeaderMenuLinkBackgroundActive; color: $wcfHeaderMenuLinkActive; } + + &.pageMenuMobileButtonHasContent::before { + animation: wcfMobileMenuNewContent 8s infinite; + animation-delay: 2s; + } } .pageHeaderSearch:not(.open) { diff --git a/wcfsetup/install/files/style/ui/menuMobile.scss b/wcfsetup/install/files/style/ui/menuMobile.scss index 354394ac52..d83e552da0 100644 --- a/wcfsetup/install/files/style/ui/menuMobile.scss +++ b/wcfsetup/install/files/style/ui/menuMobile.scss @@ -234,6 +234,10 @@ } } +.pageUserMenuMobile .menuOverlayItemBadge:last-child { + padding-right: 10px !important; +} + .menuOverlayItemLink.active, .menuOverlayItemLinkIcon.active { background-color: rgb(34, 49, 63); -- 2.20.1