From 8f6b9ef60d2ea6b25c0b1164ca47c0ae0b9f5343 Mon Sep 17 00:00:00 2001
From: Marcel Werk <burntime@woltlab.com>
Date: Wed, 27 Apr 2016 18:34:32 +0200
Subject: [PATCH] Added scrollable checkbox lists to replace multiselects in
 page/box management

---
 wcfsetup/install/files/acp/templates/boxAdd.tpl   | 10 ++++++----
 wcfsetup/install/files/acp/templates/pageAdd.tpl  | 10 ++++++----
 .../files/style/ui/scrollableCheckboxList.scss    | 15 +++++++++++++++
 3 files changed, 27 insertions(+), 8 deletions(-)
 create mode 100644 wcfsetup/install/files/style/ui/scrollableCheckboxList.scss

diff --git a/wcfsetup/install/files/acp/templates/boxAdd.tpl b/wcfsetup/install/files/acp/templates/boxAdd.tpl
index 42d7f3f892..57ef98a87c 100644
--- a/wcfsetup/install/files/acp/templates/boxAdd.tpl
+++ b/wcfsetup/install/files/acp/templates/boxAdd.tpl
@@ -151,13 +151,15 @@
 		</dl>
 		
 		<dl>
-			<dt><label for="pageIDs">{lang}wcf.acp.box.pageIDs{/lang}</label></dt>
+			<dt>{lang}wcf.acp.box.pageIDs{/lang}</dt>
 			<dd>
-				<select name="pageIDs[]" id="pageIDs" multiple="multiple" size="20">
+				<ul class="scrollableCheckboxList">
 					{foreach from=$pageNodeList item=pageNode}
-						<option value="{@$pageNode->getPage()->pageID}"{if $pageNode->getPage()->pageID|in_array:$pageIDs} selected="selected"{/if}>{if $pageNode->getDepth() > 1}{@"&nbsp;&nbsp;&nbsp;&nbsp;"|str_repeat:($pageNode->getDepth() - 1)}{/if}{$pageNode->getPage()->name}</option>
+						<li{if $pageNode->getDepth() > 1} style="padding-left: {$pageNode->getDepth()*20-20}px"{/if}>
+							<label><input type="checkbox" name="pageIDs[]" value="{@$pageNode->getPage()->pageID}"{if $pageNode->getPage()->pageID|in_array:$pageIDs} checked="checked"{/if} /> {$pageNode->getPage()->name}</label>
+						</li>
 					{/foreach}
-				</select>
+				</ul>
 			</dd>
 		</dl>
 		
diff --git a/wcfsetup/install/files/acp/templates/pageAdd.tpl b/wcfsetup/install/files/acp/templates/pageAdd.tpl
index c37c5fa308..bcf74ab7b2 100644
--- a/wcfsetup/install/files/acp/templates/pageAdd.tpl
+++ b/wcfsetup/install/files/acp/templates/pageAdd.tpl
@@ -179,13 +179,15 @@
 		</dl>
 		
 		<dl{if $errorField == 'boxIDs'} class="formError"{/if}>
-			<dt><label for="boxIDs">{lang}wcf.acp.page.boxIDs{/lang}</label></dt>
+			<dt>{lang}wcf.acp.page.boxIDs{/lang}</dt>
 			<dd>
-				<select name="boxIDs[]" id="boxIDs" multiple="multiple" size="20">
+				<ul class="scrollableCheckboxList">
 					{foreach from=$availableBoxes item=availableBox}
-						<option value="{@$availableBox->boxID}"{if $availableBox->boxID|in_array:$boxIDs} selected="selected"{/if}>{$availableBox->name}</option>
+						<li>
+							<label><input type="checkbox" name="boxIDs[]" value="{@$availableBox->boxID}"{if $availableBox->boxID|in_array:$boxIDs} checked="checked"{/if} /> {$availableBox->name}</label>
+						</li>
 					{/foreach}
-				</select>
+				</ul>
 				{if $errorField == 'boxIDs'}
 					<small class="innerError">
 						{if $errorType == 'empty'}
diff --git a/wcfsetup/install/files/style/ui/scrollableCheckboxList.scss b/wcfsetup/install/files/style/ui/scrollableCheckboxList.scss
new file mode 100644
index 0000000000..f21f352a81
--- /dev/null
+++ b/wcfsetup/install/files/style/ui/scrollableCheckboxList.scss
@@ -0,0 +1,15 @@
+.scrollableCheckboxList {
+	background-color: $wcfInputBackground;
+	border: 1px solid $wcfInputBorder;
+	color: $wcfInputText;
+	max-height: 250px;
+	max-width: 400px;
+	overflow: auto;
+	padding: 5px;
+	
+	li {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+}
-- 
2.20.1