From 4701a0863f8260172c6f25583f325bd9bb3ded3e Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Sun, 18 Oct 2015 16:57:31 +0200
Subject: [PATCH] Overhauled ACP menu

---
 wcfsetup/install/files/acp/style/acpMenu.css  | 99 +++++++++++++++++++
 .../install/files/acp/templates/header.tpl    | 46 +--------
 .../files/acp/templates/pageHeader.tpl        |  8 +-
 .../install/files/acp/templates/pageMenu.tpl  | 46 +++++++++
 .../{userPanel.tpl => pageMenuUser.tpl}       |  0
 .../{searchArea.tpl => pageSearchArea.tpl}    |  6 +-
 6 files changed, 157 insertions(+), 48 deletions(-)
 create mode 100644 wcfsetup/install/files/acp/style/acpMenu.css
 create mode 100644 wcfsetup/install/files/acp/templates/pageMenu.tpl
 rename wcfsetup/install/files/acp/templates/{userPanel.tpl => pageMenuUser.tpl} (100%)
 rename wcfsetup/install/files/acp/templates/{searchArea.tpl => pageSearchArea.tpl} (77%)

diff --git a/wcfsetup/install/files/acp/style/acpMenu.css b/wcfsetup/install/files/acp/style/acpMenu.css
new file mode 100644
index 0000000000..130db172d0
--- /dev/null
+++ b/wcfsetup/install/files/acp/style/acpMenu.css
@@ -0,0 +1,99 @@
+.wcfAcpMenu {
+	font-size: 13px;
+	font-weight: 400;
+	padding: 5px;
+}
+
+.wcfAcpMenu.doubleColumned {
+	-webkit-columns: 2;
+	-moz-columns: 2;
+	columns: 2;
+	
+	/* 11px = 5px + border + 5px */
+	-webkit-column-gap: 11px;
+	-moz-column-gap: 11px;
+	column-gap: 11px;
+	
+	-webkit-column-rule: 1px solid rgb(238, 238, 238);
+	-moz-column-rule: 1px solid rgb(238, 238, 238);
+	column-rule: 1px solid rgb(238, 238, 238);
+}
+
+.wcfAcpMenu.doubleColumned > li {
+	-webkit-column-break-inside: avoid;
+	page-break-inside: avoid;
+	break-inside: avoid;
+}
+
+.wcfAcpMenu > li {
+	min-width: 250px;
+}
+
+.wcfAcpMenu > li:not(:first-child) {
+	border-top: 1px solid rgb(238, 238, 238);
+}
+
+.wcfAcpMenu > li > span {
+	background-color: rgb(236, 240, 241);
+	color: rgb(127, 140, 141);
+	font-size: 11px;
+	display: block;
+	padding: 10px;
+	text-transform: uppercase;
+}
+
+.menuItemList > li > a {
+	color: rgb(54, 54, 54);
+	display: block;
+	font-size: 13px;
+	padding: 10px 20px;
+	white-space: nowrap;
+}
+
+.menuItemList > li > a:hover {
+	background-color: rgb(66, 129, 244);
+	color: #fff;
+	text-decoration: none;
+}
+
+.menuItemList > li.active > a {
+	background-color: rgb(217, 237, 247);
+}
+
+.menuItemWrapper {
+	display: flex;
+}
+
+.menuItemWrapper:hover > a,
+.menuItemWrapper > .active {
+	background-color: rgb(217, 237, 247);
+}
+
+.menuItemWrapper > a {
+	color: rgb(54, 54, 54);
+	display: block;
+	flex: 0 auto;
+	padding: 10px;
+	white-space: nowrap;
+}
+
+.menuItemWrapper > a:first-child {
+	flex: 1 auto;
+	padding: 10px 20px;
+}
+
+.menuItemWrapper > a > .icon {
+	color: rgb(54, 54, 54);
+	opacity: .6;
+}
+
+.menuItemList .menuItemWrapper > a:hover {
+	background-color: rgb(66, 129, 244);
+	color: #fff;
+	text-decoration: none;
+}
+
+.menuItemList .menuItemWrapper > a:hover > .icon {
+	color: #fff;
+	opacity: 1;
+}
diff --git a/wcfsetup/install/files/acp/templates/header.tpl b/wcfsetup/install/files/acp/templates/header.tpl
index 9545d28f47..792d9fd548 100644
--- a/wcfsetup/install/files/acp/templates/header.tpl
+++ b/wcfsetup/install/files/acp/templates/header.tpl
@@ -7,8 +7,9 @@
 	<title>{if $pageTitle|isset}{@$pageTitle|language} - {/if}{lang}wcf.global.acp{/lang}{if PACKAGE_ID} - {PAGE_TITLE|language}{/if}</title>
 	
 	<!-- Stylesheets -->
-	<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600' rel='stylesheet' type='text/css'>
+	<!--<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600' rel='stylesheet' type='text/css'>-->
 	{@$__wcf->getStyleHandler()->getStylesheet(true)}
+	<link href="{@$__wcf->getPath()}acp/style/acpMenu.css" type="text/css" rel="stylesheet">
 	{event name='stylesheets'}
 	
 	<!-- Icons -->
@@ -124,7 +125,7 @@
 			{if PACKAGE_ID}
 				{assign var=activeMenuItems value=$__wcf->getACPMenu()->getActiveMenuItems()|array_reverse}
 				var $activeMenuItems = [{implode from=$activeMenuItems item=_menuItem}'{$_menuItem}'{/implode}];
-				new WCF.ACP.Menu($activeMenuItems);
+				//new WCF.ACP.Menu($activeMenuItems);
 			{/if}
 			
 			if (jQuery.browser.touch) $('html').addClass('touch');
@@ -260,43 +261,6 @@
 	</header>
 	*}
 	
-	<div id="main" class="layoutFluid{if PACKAGE_ID && $__wcf->user->userID && $__wcf->getACPMenu()->getMenuItems('')|count} sidebarOrientationLeft{/if}">
-		<div>
-			<div>
-				{hascontent}
-					<aside class="sidebar collapsibleMenu">
-						<div>
-							{content}
-								{* work-around for unknown core-object during WCFSetup *}
-								{if PACKAGE_ID && $__wcf->user->userID}
-									{foreach from=$__wcf->getACPMenu()->getMenuItems('') item=_parentMenuItem}
-										<div id="{$_parentMenuItem->menuItem}-container" style="display: none;" class="menuGroup collapsibleMenus" data-parent-menu-item="{$_parentMenuItem->menuItem}">
-											{foreach from=$__wcf->getACPMenu()->getMenuItems($_parentMenuItem->menuItem) item=_menuItem}
-												<fieldset>
-													<legend class="menuHeader" data-menu-item="{$_menuItem->menuItem}">{@$_menuItem}</legend>
-													
-													<nav class="menuGroupItems">
-														<ul id="{$_menuItem->menuItem}">
-															{foreach from=$__wcf->getACPMenu()->getMenuItems($_menuItem->menuItem) item=menuItemCategory}
-																{if $__wcf->getACPMenu()->getMenuItems($menuItemCategory->menuItem)|count > 0}
-																	{foreach from=$__wcf->getACPMenu()->getMenuItems($menuItemCategory->menuItem) item=subMenuItem}
-																		<li id="{$subMenuItem->menuItem}" data-menu-item="{$subMenuItem->menuItem}"><a href="{$subMenuItem->getLink()}">{@$subMenuItem}</a></li>
-																	{/foreach}
-																{else}
-																	<li id="{$menuItemCategory->menuItem}" data-menu-item="{$menuItemCategory->menuItem}"><a href="{$menuItemCategory->getLink()}">{@$menuItemCategory}</a></li>
-																{/if}
-															{/foreach}
-														</ul>
-													</nav>
-												</fieldset>
-											{/foreach}
-										</div>
-									{/foreach}
-								{/if}
-							{/content}
-						</div>
-					</aside>
-				{/hascontent}
-				
-				<section id="content" class="content">
+	<div class="layoutFluid">
+		<div id="content" class="content">
 				
diff --git a/wcfsetup/install/files/acp/templates/pageHeader.tpl b/wcfsetup/install/files/acp/templates/pageHeader.tpl
index b7711fe473..a9ac2cb917 100644
--- a/wcfsetup/install/files/acp/templates/pageHeader.tpl
+++ b/wcfsetup/install/files/acp/templates/pageHeader.tpl
@@ -1,13 +1,13 @@
-<header id="pageHeader" class="header">
+<header id="pageHeader" class="pageHeader">
 	<div>
 		<div class="{if $__wcf->getStyleHandler()->getStyle()->getVariable('useFluidLayout')}layoutFluid{else}layoutFixed{/if}">
 			{include file='pageLogo'}
 			
-			{include file='searchArea'}
+			{include file='pageSearchArea'}
 			
-			{include file='mainMenu'}
+			{include file='pageMenu'}
 			
-			{include file='userPanel'}
+			{include file='pageMenuUser'}
 		</div>
 	</div>
 	
diff --git a/wcfsetup/install/files/acp/templates/pageMenu.tpl b/wcfsetup/install/files/acp/templates/pageMenu.tpl
new file mode 100644
index 0000000000..5c66d2fd64
--- /dev/null
+++ b/wcfsetup/install/files/acp/templates/pageMenu.tpl
@@ -0,0 +1,46 @@
+{assign var=_activeMenuItems value=$__wcf->getACPMenu()->getActiveMenuItems()}
+<nav id="mainMenu" class="mainMenu jsMobileNavigation" data-button-label="{lang}wcf.page.mainMenu{/lang}">
+	<ul>
+		{foreach from=$__wcf->getACPMenu()->getMenuItems('') item=_sectionMenuItem}
+			<li class="subMenuItems{if $_sectionMenuItem->menuItem|in_array:$_activeMenuItems} active{/if}" data-menu-item="{$_sectionMenuItem->menuItem}">
+				<a href="#">{@$_sectionMenuItem}</a>
+				
+				{assign var=_menuItemCategories value=$__wcf->getACPMenu()->getMenuItems($_sectionMenuItem->menuItem)}
+				<ol class="wcfAcpMenu subMenu{if $_menuItemCategories|count > 3} doubleColumned {/if}">
+					{foreach from=$_menuItemCategories item=_menuItemCategory}
+						<li>
+							<span>{@$_menuItemCategory}</span>
+							
+							<ol class="menuItemList">
+								{foreach from=$__wcf->getACPMenu()->getMenuItems($_menuItemCategory->menuItem) item=_menuItem}
+									{assign var=_subMenuItems value=$__wcf->getACPMenu()->getMenuItems($_menuItem->menuItem)}
+									
+									{if $_subMenuItems|empty}
+										<li{if $_menuItem->menuItem|in_array:$_activeMenuItems} class="active"{/if}><a href="{$_menuItem->getLink()}">{@$_menuItem}</a></li>
+									{else}
+										{if $_menuItemCategory->menuItem === 'wcf.acp.menu.link.option'}
+										{* handle special option categories *}
+											{foreach from=$_subMenuItems item=_subMenuItem}
+												<li{if $_subMenuItem->menuItem|in_array:$_activeMenuItems} class="active"{/if}><a href="{$_subMenuItem->getLink()}">{@$_subMenuItem}</a></li>
+											{/foreach}
+										{else}
+											<li>
+												<div class="menuItemWrapper">
+													<a href="{$_menuItem->getLink()}"{if $_menuItem->menuItem|in_array:$_activeMenuItems && $_activeMenuItems[0] === $_menuItem->menuItem} class="active"{/if}>{@$_menuItem}</a>
+													
+													{foreach from=$_subMenuItems item=_subMenuItem}
+														<a href="{$_subMenuItem->getLink()}" class="jsTooltip{if $_subMenuItem->menuItem|in_array:$_activeMenuItems} active{/if}" title="{@$_subMenuItem}"><span class="icon icon16 {$_subMenuItem->icon}"></span></a>
+													{/foreach}
+												</div>
+											</li>
+										{/if}
+									{/if}
+								{/foreach}
+							</ol>
+						</li>
+					{/foreach}
+				</ol>
+			</li>
+		{/foreach}
+	</ul>
+</nav>
diff --git a/wcfsetup/install/files/acp/templates/userPanel.tpl b/wcfsetup/install/files/acp/templates/pageMenuUser.tpl
similarity index 100%
rename from wcfsetup/install/files/acp/templates/userPanel.tpl
rename to wcfsetup/install/files/acp/templates/pageMenuUser.tpl
diff --git a/wcfsetup/install/files/acp/templates/searchArea.tpl b/wcfsetup/install/files/acp/templates/pageSearchArea.tpl
similarity index 77%
rename from wcfsetup/install/files/acp/templates/searchArea.tpl
rename to wcfsetup/install/files/acp/templates/pageSearchArea.tpl
index 7a9e740a21..d379bb31e0 100644
--- a/wcfsetup/install/files/acp/templates/searchArea.tpl
+++ b/wcfsetup/install/files/acp/templates/pageSearchArea.tpl
@@ -7,13 +7,13 @@
 
 <div id="search" class="searchBar" data-disable-auto-focus="true">
 	<form method="post" action="{@$__searchFormLink}" class="dropdown">
-		<input type="search" name="q" placeholder="{@$__searchInputPlaceholder}" autocomplete="off" required="required" value="{if $query|isset}{$query}{/if}" class="dropdownToggle" data-toggle="search" />
+		<input type="search" name="q" id="pageHeaderSearch" placeholder="{@$__searchInputPlaceholder}" autocomplete="off" required="required" value="{if $query|isset}{$query}{/if}" class="dropdownToggle" data-toggle="search" />
 		
 		<ul class="dropdownMenu">
 			{hascontent}
 				<li class="dropdownText">
 					{content}
-						{@$__searchDropdownOptions}
+					{@$__searchDropdownOptions}
 					{/content}
 				</li>
 				<li class="dropdownDivider"></li>
@@ -30,7 +30,7 @@
 	<script data-relocate="true">
 		//<![CDATA[
 		$(function() {
-			new WCF.Search.Message.SearchArea($('#search'));
+			//new WCF.Search.Message.SearchArea($('#search'));
 		});
 		//]]>
 	</script>
-- 
2.20.1