Added scrollable checkbox lists to replace multiselects in page/box management

diff --git a/wcfsetup/install/files/acp/templates/boxAdd.tpl b/wcfsetup/install/files/acp/templates/boxAdd.tpl
index 42d7f3f892dc325ae644037c9c76c06262643ef7..57ef98a87c57ab1d52b19c6857bd5ee1603f6833 100644 (file)
--- 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 c37c5fa3081ccfec29813f6dd4ccf8f28757ad81..bcf74ab7b2d4cbd31423dfe8041dd620ed210a6d 100644 (file)
--- 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 (file)
index 0000000..f21f352
--- /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;
+       }
+}