[GitHub/WoltLab/WCF.git] / com.woltlab.wcf / templates / pageHeaderUser.tpl

<nav id="topMenu" class="userPanel{if $__wcf->user->userID} userPanelLoggedIn{/if}">
	{if $__wcf->user->userID}
		<span class="userPanelAvatar" aria-hidden="true">{@$__wcf->getUserProfileHandler()->getAvatar()->getImageTag(32)}</span>
	{else}
		<a href="{link controller='Login' url=$__wcf->getRequestURI()}{/link}" class="userPanelLoginLink jsTooltip" title="{lang}wcf.user.loginOrRegister{/lang}">
			<span class="icon icon32 fa-sign-in" aria-hidden="true"></span>
		</a>
	{/if}
	
	<ul class="userPanelItems">
		{if $__wcf->user->userID}
			<!-- user menu -->
			<li id="userMenu">
				<a
					class="jsTooltip"
					href="{$__wcf->user->getLink()}"
					title="{lang}wcf.user.controlPanel{/lang}"
					role="button"
					tabindex="0"
					aria-haspopup="true"
					aria-expanded="false"
				>
					{@$__wcf->getUserProfileHandler()->getAvatar()->getImageTag(32)} <span>{lang}wcf.user.userNote{/lang}</span>
				</a>
				<div class="userMenu userMenuControlPanel" data-origin="userMenu" tabindex="-1" hidden>
					<div class="userMenuHeader">
						<div class="userMenuTitle">{lang}wcf.user.controlPanel{/lang}</div>
					</div>
					<div class="userMenuContent">
						<div class="userMenuItem{if !MODULE_USER_RANK} userMenuItemSingleLine{/if}">
							<div class="userMenuItemImage">
								{@$__wcf->getUserProfileHandler()->getUserProfile()->getAvatar()->getImageTag(48)}
							</div>
							<div class="userMenuItemContent">
								{* This is the unformatted username, custom styles might not work nicely here and
								   the consistent styling is used to provide visual anchors to identify links. *}
								<a href="{$__wcf->user->getLink()}" class="userMenuItemLink">{$__wcf->user->username}</a>
							</div>
							{if MODULE_USER_RANK}
							<div class="userMenuItemMeta">
								{if $__wcf->getUserProfileHandler()->getUserTitle()}
									<span class="badge userTitleBadge{if $__wcf->getUserProfileHandler()->getRank() && $__wcf->getUserProfileHandler()->getRank()->cssClassName} {@$__wcf->getUserProfileHandler()->getRank()->cssClassName}{/if}">{$__wcf->getUserProfileHandler()->getUserTitle()}</span>
								{/if}
								{if $__wcf->getUserProfileHandler()->getRank() && $__wcf->getUserProfileHandler()->getRank()->rankImage}
									<span class="userRankImage">{@$__wcf->getUserProfileHandler()->getRank()->getImage()}</span>
								{/if}
							</div>
							{/if}
						</div>
					</div>
					<div class="userMenuContentDivider"></div>
					<div class="userMenuContent">
						<div class="userMenuItem userMenuItemNarrow userMenuItemSingleLine">
							<div class="userMenuItemImage">
								<span class="icon icon32 fa-user-circle-o"></span>
							</div>
							<div class="userMenuItemContent">
								<a href="{$__wcf->user->getLink()}" class="userMenuItemLink">{lang}wcf.user.myProfile{/lang}</a>
							</div>
						</div>
						{if $__wcf->session->getPermission('admin.general.canUseAcp')}
						<div class="userMenuItem userMenuItemNarrow userMenuItemSingleLine">
							<div class="userMenuItemImage">
								<span class="icon icon32 fa-wrench"></span>
							</div>
							<div class="userMenuItemContent">
								<a href="{link isACP=true}{/link}" class="userMenuItemLink">{lang}wcf.global.acp{/lang}</a>
							</div>
						</div>
						{/if}
					</div>
					<div class="userMenuContentDivider"></div>
					<div class="userMenuContent userMenuContentScrollable">
						{foreach from=$__wcf->getUserMenu()->getUserMenuItems() item=menuItem}
						<div class="userMenuItem userMenuItemNarrow userMenuItemSingleLine" data-category="{$menuItem[category]->menuItem}">
							<div class="userMenuItemImage">
								<span class="icon icon32 {$menuItem[category]->getIconClassName()}"></span>
							</div>
							<div class="userMenuItemContent">
								<a href="{$menuItem[link]}" class="userMenuItemLink">
									{$menuItem[category]->getTitle()}
								</a>
							</div>
						</div>
						{/foreach}
					</div>
					<div class="userMenuFooter">
						<form method="post" action="{link controller='Logout'}{/link}">
							<a href="#" class="userMenuFooterLink" role="button">{lang}wcf.user.logout{/lang}</a>
							{csrfToken}
						</form>
					</div>
				</div>
				<script data-relocate="true">
					require(["WoltLabSuite/Core/Ui/User/Menu/ControlPanel"], ({ setup }) => setup());
				</script>
			</li>
			
			<!-- user notifications -->
			{if !$__hideUserMenu|isset}
				<li id="userNotifications" data-count="{#$__wcf->getUserNotificationHandler()->getNotificationCount()}" data-title="Benachrichtigungen">
					<a
						class="jsTooltip"
						href="{link controller='NotificationList'}{/link}"
						title="{lang}wcf.user.notification.notifications{/lang}"
						role="button"
						tabindex="0"
						aria-haspopup="true"
						aria-expanded="false"
					>
						<span class="icon icon32 fa-bell-o"></span> <span>{lang}wcf.user.notification.notifications{/lang}</span>{if $__wcf->getUserNotificationHandler()->getNotificationCount()} <span class="badge badgeUpdate">{#$__wcf->getUserNotificationHandler()->getNotificationCount()}</span>{/if}
					</a>
					{if !OFFLINE || $__wcf->session->getPermission('admin.general.canViewPageDuringOfflineMode')}
						<script data-relocate="true">
							require(["WoltLabSuite/Core/Language", "WoltLabSuite/Core/Ui/User/Menu/Data/Notification"], (Language, { setup }) => {
								Language.addObject({
									"wcf.user.notification.enableDesktopNotifications": "{jslang}wcf.user.notification.enableDesktopNotifications{/jslang}",
									"wcf.user.notification.enableDesktopNotifications.button": "{jslang}wcf.user.notification.enableDesktopNotifications.button{/jslang}",
								});

								setup({
									noItems: '{jslang}wcf.user.notification.noMoreNotifications{/jslang}',
									settingsLink: '{link controller='NotificationSettings' encode=false}{/link}',
									settingsTitle: '{jslang}wcf.user.notification.settings{/jslang}',
									showAllLink: '{link controller='NotificationList' encode=false}{/link}',
									showAllTitle: '{jslang}wcf.user.notification.showAll{/jslang}',
									title: '{jslang}wcf.user.notification.notifications{/jslang}',
								});
							});
						</script>
					{/if}
				</li>
			{/if}
		{else}
			{if $__wcf->getLanguage()->getLanguages()|count > 1}
				<li id="pageLanguageContainer">
					<script data-relocate="true">
						require(['WoltLabSuite/Core/Language/Chooser'], function(LanguageChooser) {
							var languages = {
								{implode from=$__wcf->getLanguage()->getLanguages() item=_language}
									'{@$_language->languageID}': {
										iconPath: '{@$_language->getIconPath()|encodeJS}',
										languageName: '{@$_language|encodeJS}',
										languageCode: '{@$_language->languageCode|encodeJS}'
									}
								{/implode}
							};
								
							var callback = function(listItem) {
								var location;
								var languageCode = elData(listItem, 'language-code');
								var link = elBySel('link[hreflang="' + languageCode + '"]');
								if (link !== null) {
									location = link.href;
								}
								else {
									location = window.location.toString().replace(/#.*/, '').replace(/(\?|&)l=[0-9]+/g, '');
								}
								
								var delimiter = (location.indexOf('?') == -1) ? '?' : '&';
								window.location = location + delimiter + 'l=' + elData(listItem, 'language-id') + window.location.hash;
							};
							
							LanguageChooser.init('pageLanguageContainer', 'pageLanguageID', {@$__wcf->getLanguage()->languageID}, languages, callback);
						});
					</script>
				</li>
			{/if}
			<li id="userLogin">
				<a class="loginLink" href="{link controller='Login' url=$__wcf->getRequestURI()}{/link}">{lang}wcf.user.loginOrRegister{/lang}</a>
			</a>
		{/if}
		
		{if !$__hideUserMenu|isset}
			{if $__wcf->user->userID && $__wcf->session->getPermission('mod.general.canUseModeration')}
				<li id="outstandingModeration" data-count="{#$__wcf->getModerationQueueManager()->getUnreadModerationCount()}">
					<a
						class="jsTooltip"
						href="{link controller='ModerationList'}{/link}"
						title="{lang}wcf.moderation.moderation{/lang}"
						role="button"
						tabindex="0"
						aria-haspopup="true"
						aria-expanded="false"
					>
						<span class="icon icon32 fa-exclamation-triangle"></span>
						<span>{lang}wcf.moderation.moderation{/lang}</span>
						{if $__wcf->getModerationQueueManager()->getUnreadModerationCount()}<span class="badge badgeUpdate">{#$__wcf->getModerationQueueManager()->getUnreadModerationCount()}</span>{/if}
					</a>
					{if !OFFLINE || $__wcf->session->getPermission('admin.general.canViewPageDuringOfflineMode')}
						<script data-relocate="true">
							require(["WoltLabSuite/Core/Ui/User/Menu/Data/ModerationQueue"], ({ setup }) => {
								setup({
									deletedContent: '{jslang}wcf.moderation.showDeletedContent{/jslang}',
									deletedContentLink: '{link controller='DeletedContentList' encode=false}{/link}',
									noItems: '{jslang}wcf.moderation.noMoreItems{/jslang}',
									showAllLink: '{link controller='ModerationList' encode=false}{/link}',
									showAllTitle: '{jslang}wcf.moderation.showAll{/jslang}',
									title: '{jslang}wcf.moderation.moderation{/jslang}'
								});
							});
						</script>
					{/if}
				</li>
			{/if}
			
			{event name='menuItems'}
		{/if}
		
		<!-- page search -->
		<li>
			<a href="{link controller='Search'}{/link}" id="userPanelSearchButton" class="jsTooltip" title="{lang}wcf.global.search{/lang}"><span class="icon icon32 fa-search"></span> <span>{lang}wcf.global.search{/lang}</span></a>
		</li>
	</ul>
</nav>
Commit	Line	Data
0a6f84dc MW	1	<nav id="topMenu" class="userPanel{if $__wcf->user->userID} userPanelLoggedIn{/if}">
0a6f84dc MW	2	{if $__wcf->user->userID}
690e409d	3	<span class="userPanelAvatar" aria-hidden="true">{@$__wcf->getUserProfileHandler()->getAvatar()->getImageTag(32)}</span>
6e5b3652	4	{else}
931a1eff	5	<a href="{link controller='Login' url=$__wcf->getRequestURI()}{/link}" class="userPanelLoginLink jsTooltip" title="{lang}wcf.user.loginOrRegister{/lang}">
690e409d	6	<span class="icon icon32 fa-sign-in" aria-hidden="true"></span>
6e5b3652	7	</a>
0a6f84dc MW	8	{/if}
0a6f84dc MW	9
b8eab696 AE	10	<ul class="userPanelItems">
	11	{if $__wcf->user->userID}
	12	<!-- user menu -->
	13	<li id="userMenu">
677bdb69 AE	14	<a
	15	class="jsTooltip"
	16	href="{$__wcf->user->getLink()}"
	17	title="{lang}wcf.user.controlPanel{/lang}"
	18	role="button"
	19	tabindex="0"
	20	aria-haspopup="true"
	21	aria-expanded="false"
	22	>
	23	{@$__wcf->getUserProfileHandler()->getAvatar()->getImageTag(32)} <span>{lang}wcf.user.userNote{/lang}</span>
	24	</a>
	25	<div class="userMenu userMenuControlPanel" data-origin="userMenu" tabindex="-1" hidden>
	26	<div class="userMenuHeader">
	27	<div class="userMenuTitle">{lang}wcf.user.controlPanel{/lang}</div>
b8eab696	28	</div>
677bdb69	29	<div class="userMenuContent">
f9ea63e5	30	<div class="userMenuItem{if !MODULE_USER_RANK} userMenuItemSingleLine{/if}">
677bdb69 AE	31	<div class="userMenuItemImage">
	32	{@$__wcf->getUserProfileHandler()->getUserProfile()->getAvatar()->getImageTag(48)}
	33	</div>
	34	<div class="userMenuItemContent">
	35	{* This is the unformatted username, custom styles might not work nicely here and
	36	the consistent styling is used to provide visual anchors to identify links. *}
	37	<a href="{$__wcf->user->getLink()}" class="userMenuItemLink">{$__wcf->user->username}</a>
677bdb69	38	</div>
f9ea63e5	39	{if MODULE_USER_RANK}
677bdb69	40	<div class="userMenuItemMeta">
f9ea63e5 AE	41	{if $__wcf->getUserProfileHandler()->getUserTitle()}
	42	<span class="badge userTitleBadge{if $__wcf->getUserProfileHandler()->getRank() && $__wcf->getUserProfileHandler()->getRank()->cssClassName} {@$__wcf->getUserProfileHandler()->getRank()->cssClassName}{/if}">{$__wcf->getUserProfileHandler()->getUserTitle()}</span>
	43	{/if}
	44	{if $__wcf->getUserProfileHandler()->getRank() && $__wcf->getUserProfileHandler()->getRank()->rankImage}
	45	<span class="userRankImage">{@$__wcf->getUserProfileHandler()->getRank()->getImage()}</span>
	46	{/if}
677bdb69	47	</div>
f9ea63e5	48	{/if}
677bdb69 AE	49	</div>
	50	</div>
	51	<div class="userMenuContentDivider"></div>
677bdb69	52	<div class="userMenuContent">
f9ea63e5 AE	53	<div class="userMenuItem userMenuItemNarrow userMenuItemSingleLine">
	54	<div class="userMenuItemImage">
	55	<span class="icon icon32 fa-user-circle-o"></span>
	56	</div>
	57	<div class="userMenuItemContent">
	58	<a href="{$__wcf->user->getLink()}" class="userMenuItemLink">{lang}wcf.user.myProfile{/lang}</a>
	59	</div>
	60	</div>
	61	{if $__wcf->session->getPermission('admin.general.canUseAcp')}
677bdb69 AE	62	<div class="userMenuItem userMenuItemNarrow userMenuItemSingleLine">
	63	<div class="userMenuItemImage">
	64	<span class="icon icon32 fa-wrench"></span>
	65	</div>
	66	<div class="userMenuItemContent">
	67	<a href="{link isACP=true}{/link}" class="userMenuItemLink">{lang}wcf.global.acp{/lang}</a>
	68	</div>
	69	</div>
f9ea63e5	70	{/if}
677bdb69 AE	71	</div>
677bdb69 AE	72	<div class="userMenuContentDivider"></div>
4996d792	73	<div class="userMenuContent userMenuContentScrollable">
677bdb69	74	{foreach from=$__wcf->getUserMenu()->getUserMenuItems() item=menuItem}
f9ea63e5	75	<div class="userMenuItem userMenuItemNarrow userMenuItemSingleLine" data-category="{$menuItem[category]->menuItem}">
677bdb69 AE	76	<div class="userMenuItemImage">
	77	<span class="icon icon32 {$menuItem[category]->getIconClassName()}"></span>
	78	</div>
	79	<div class="userMenuItemContent">
	80	<a href="{$menuItem[link]}" class="userMenuItemLink">
	81	{$menuItem[category]->getTitle()}
	82	</a>
	83	</div>
677bdb69 AE	84	</div>
	85	{/foreach}
	86	</div>
	87	<div class="userMenuFooter">
372f863c AE	88	<form method="post" action="{link controller='Logout'}{/link}">
	89	<a href="#" class="userMenuFooterLink" role="button">{lang}wcf.user.logout{/lang}</a>
	90	{csrfToken}
	91	</form>
b8eab696	92	</div>
b8eab696	93	</div>
51547f2c	94	<script data-relocate="true">
677bdb69	95	require(["WoltLabSuite/Core/Ui/User/Menu/ControlPanel"], ({ setup }) => setup());
51547f2c	96	</script>
b8eab696 AE	97	</li>
b8eab696 AE	98
b8eab696 AE	99	<!-- user notifications -->
b8eab696 AE	100	{if !$__hideUserMenu\|isset}
f030cb76	101	<li id="userNotifications" data-count="{#$__wcf->getUserNotificationHandler()->getNotificationCount()}" data-title="Benachrichtigungen">
ea0c0ef6 AE	102	<a
	103	class="jsTooltip"
	104	href="{link controller='NotificationList'}{/link}"
	105	title="{lang}wcf.user.notification.notifications{/lang}"
	106	role="button"
	107	tabindex="0"
	108	aria-haspopup="true"
	109	aria-expanded="false"
	110	>
	111	<span class="icon icon32 fa-bell-o"></span> <span>{lang}wcf.user.notification.notifications{/lang}</span>{if $__wcf->getUserNotificationHandler()->getNotificationCount()} <span class="badge badgeUpdate">{#$__wcf->getUserNotificationHandler()->getNotificationCount()}</span>{/if}
	112	</a>
b8eab696 AE	113	{if !OFFLINE \|\| $__wcf->session->getPermission('admin.general.canViewPageDuringOfflineMode')}
b8eab696 AE	114	<script data-relocate="true">
f99a0caf AE	115	require(["WoltLabSuite/Core/Language", "WoltLabSuite/Core/Ui/User/Menu/Data/Notification"], (Language, { setup }) => {
	116	Language.addObject({
	117	"wcf.user.notification.enableDesktopNotifications": "{jslang}wcf.user.notification.enableDesktopNotifications{/jslang}",
	118	"wcf.user.notification.enableDesktopNotifications.button": "{jslang}wcf.user.notification.enableDesktopNotifications.button{/jslang}",
	119	});
	120
8eaab6e0	121	setup({
9f663473	122	noItems: '{jslang}wcf.user.notification.noMoreNotifications{/jslang}',
b8eab696	123	settingsLink: '{link controller='NotificationSettings' encode=false}{/link}',
8eaab6e0	124	settingsTitle: '{jslang}wcf.user.notification.settings{/jslang}',
b8eab696	125	showAllLink: '{link controller='NotificationList' encode=false}{/link}',
8eaab6e0 AE	126	showAllTitle: '{jslang}wcf.user.notification.showAll{/jslang}',
8eaab6e0 AE	127	title: '{jslang}wcf.user.notification.notifications{/jslang}',
677bdb69	128	});
b8eab696	129	});
b8eab696	130	</script>
320f4a6d	131	{/if}
b8eab696 AE	132	</li>
	133	{/if}
	134	{else}
d4e8bc05 AE	135	{if $__wcf->getLanguage()->getLanguages()\|count > 1}
	136	<li id="pageLanguageContainer">
	137	<script data-relocate="true">
6e5b3652	138	require(['WoltLabSuite/Core/Language/Chooser'], function(LanguageChooser) {
d4e8bc05	139	var languages = {
fb062f13 MS	140	{implode from=$__wcf->getLanguage()->getLanguages() item=_language}
	141	'{@$_language->languageID}': {
	142	iconPath: '{@$_language->getIconPath()\|encodeJS}',
	143	languageName: '{@$_language\|encodeJS}',
	144	languageCode: '{@$_language->languageCode\|encodeJS}'
d4e8bc05 AE	145	}
	146	{/implode}
	147	};
ff110591	148
d4e8bc05	149	var callback = function(listItem) {
ff110591 MW	150	var location;
	151	var languageCode = elData(listItem, 'language-code');
	152	var link = elBySel('link[hreflang="' + languageCode + '"]');
	153	if (link !== null) {
	154	location = link.href;
	155	}
	156	else {
	157	location = window.location.toString().replace(/#.*/, '').replace(/(\?\|&)l=[0-9]+/g, '');
	158	}
d4e8bc05	159
ff110591	160	var delimiter = (location.indexOf('?') == -1) ? '?' : '&';
d4e8bc05 AE	161	window.location = location + delimiter + 'l=' + elData(listItem, 'language-id') + window.location.hash;
	162	};
	163
51ab1086	164	LanguageChooser.init('pageLanguageContainer', 'pageLanguageID', {@$__wcf->getLanguage()->languageID}, languages, callback);
b2e0e0cd	165	});
b8eab696 AE	166	</script>
	167	</li>
	168	{/if}
6e5b3652	169	<li id="userLogin">
931a1eff	170	<a class="loginLink" href="{link controller='Login' url=$__wcf->getRequestURI()}{/link}">{lang}wcf.user.loginOrRegister{/lang}</a>
6e5b3652	171	</a>
b8eab696 AE	172	{/if}
	173
	174	{if !$__hideUserMenu\|isset}
	175	{if $__wcf->user->userID && $__wcf->session->getPermission('mod.general.canUseModeration')}
0882d872	176	<li id="outstandingModeration" data-count="{#$__wcf->getModerationQueueManager()->getUnreadModerationCount()}">
ea0c0ef6 AE	177	<a
	178	class="jsTooltip"
	179	href="{link controller='ModerationList'}{/link}"
	180	title="{lang}wcf.moderation.moderation{/lang}"
	181	role="button"
	182	tabindex="0"
	183	aria-haspopup="true"
	184	aria-expanded="false"
	185	>
e2368a74	186	<span class="icon icon32 fa-exclamation-triangle"></span>
b8eab696	187	<span>{lang}wcf.moderation.moderation{/lang}</span>
e2368a74	188	{if $__wcf->getModerationQueueManager()->getUnreadModerationCount()}<span class="badge badgeUpdate">{#$__wcf->getModerationQueueManager()->getUnreadModerationCount()}</span>{/if}
b8eab696 AE	189	</a>
	190	{if !OFFLINE \|\| $__wcf->session->getPermission('admin.general.canViewPageDuringOfflineMode')}
	191	<script data-relocate="true">
cf9e11c3 AE	192	require(["WoltLabSuite/Core/Ui/User/Menu/Data/ModerationQueue"], ({ setup }) => {
cf9e11c3 AE	193	setup({
9f663473	194	deletedContent: '{jslang}wcf.moderation.showDeletedContent{/jslang}',
b8eab696	195	deletedContentLink: '{link controller='DeletedContentList' encode=false}{/link}',
9f663473	196	noItems: '{jslang}wcf.moderation.noMoreItems{/jslang}',
b8eab696	197	showAllLink: '{link controller='ModerationList' encode=false}{/link}',
cf9e11c3	198	showAllTitle: '{jslang}wcf.moderation.showAll{/jslang}',
9f663473	199	title: '{jslang}wcf.moderation.moderation{/jslang}'
677bdb69	200	});
b8eab696	201	});
b8eab696 AE	202	</script>
	203	{/if}
	204	</li>
51547f2c	205	{/if}
b8eab696 AE	206
	207	{event name='menuItems'}
	208	{/if}
74029e21 AE	209
74029e21 AE	210	<!-- page search -->
e7500593 AE	211	<li>
e7500593 AE	212	<a href="{link controller='Search'}{/link}" id="userPanelSearchButton" class="jsTooltip" title="{lang}wcf.global.search{/lang}"><span class="icon icon32 fa-search"></span> <span>{lang}wcf.global.search{/lang}</span></a>
ee983961	213	</li>
b8eab696	214	</ul>
bf1461c2	215	</nav>