From: Alexander Ebert <ebert@woltlab.com>
Date: Wed, 17 Aug 2016 15:24:19 +0000 (+0200)
Subject: Added proper badge support for mobile menu
X-Git-Tag: 3.0.0_Beta_1~703
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=3fddb0bae0349e8460661594cdf141ada16a71f1;p=GitHub%2FWoltLab%2FWCF.git

Added proper badge support for mobile menu
---

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}
 			<li class="menuOverlayItemSpacer"></li>
 			<li class="menuOverlayItem" data-more="com.woltlab.wcf.notifications">
-				<a href="{link controller='NotificationList'}{/link}" class="menuOverlayItemLink box24">
+				<a href="{link controller='NotificationList'}{/link}" class="menuOverlayItemLink menuOverlayItemBadge box24" data-badge-identifier="userNotifications">
 					<span class="icon icon24 fa-bell-o"></span>
 					<span class="menuOverlayItemTitle">{lang}wcf.user.notification.notifications{/lang}</span>
+					{if $__wcf->getUserNotificationHandler()->getNotificationCount()}<span class="badge badgeUpdate">{#$__wcf->getUserNotificationHandler()->getNotificationCount()}</span>{/if}
 				</a>
 			</li>
 			{if $__wcf->user->userID && $__wcf->session->getPermission('mod.general.canUseModeration')}
 				<li class="menuOverlayItem" data-more="com.woltlab.wcf.moderation">
-					<a href="#" class="menuOverlayItemLink box24">
+					<a href="#" class="menuOverlayItemLink menuOverlayItemBadge box24" data-badge-identifier="outstandingModeration">
 						<span class="icon icon24 fa-exclamation-triangle"></span>
 						<span class="menuOverlayItemTitle">{lang}wcf.moderation.moderation{/lang}</span>
+						{if $__wcf->getModerationQueueManager()->getOutstandingModerationCount()}<span class="badge badgeUpdate">{#$__wcf->getModerationQueueManager()->getOutstandingModerationCount()}</span>{/if}
 					</a>
 				</li>
 			{/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);