Added styling for structured lists
authorAlexander Ebert <ebert@woltlab.com>
Sat, 23 Jul 2016 17:37:31 +0000 (19:37 +0200)
committerAlexander Ebert <ebert@woltlab.com>
Sat, 23 Jul 2016 17:37:31 +0000 (19:37 +0200)
wcfsetup/install/files/acp/templates/labelGroupAdd.tpl
wcfsetup/install/files/style/ui/listStructured.scss [new file with mode: 0644]

index 07db3c77a64d293db05e33b2aef798169f7c9912..dd181bb92df92dafdf075b71bdeb69d90e0ba69a 100644 (file)
                <div id="connect" class="tabMenuContent">
                        <div class="section">
                                {foreach from=$labelObjectTypeContainers item=container}
-                                       {if $container->isBooleanOption()}
-                                               <!-- TODO: Implement boolean option mode -->
-                                       {else}
-                                               <dl>
-                                                       <dt>{lang}wcf.acp.label.container.{$container->getObjectTypeName()}{/lang}</dt>
-                                                       <dd>
-                                                               <ul class="structuredList">
-                                                                       {foreach from=$container item=objectType}
-                                                                               <li class="{if $objectType->isCategory()} category{/if}"{if $objectType->getDepth()} style="padding-left: {21 * $objectType->getDepth()}px"{/if} data-depth="{@$objectType->getDepth()}">
-                                                                                       <span>{$objectType->getLabel()}</span>
-                                                                                       <label><input id="checkbox_{@$container->getObjectTypeID()}_{@$objectType->getObjectID()}" type="checkbox" name="objectTypes[{@$container->getObjectTypeID()}][]" value="{@$objectType->getObjectID()}"{if $objectType->getOptionValue()} checked{/if}></label>
-                                                                               </li>
-                                                                       {/foreach}
-                                                               </ul>
-                                                       </dd>
-                                               </dl>
-                                       {/if}
+                                       <dl>
+                                               <dt>{lang}wcf.acp.label.container.{$container->getObjectTypeName()}{/lang}</dt>
+                                               <dd>
+                                                       <ul class="structuredList">
+                                                               {foreach from=$container item=objectType}
+                                                                       <li class="{if $objectType->isCategory()} category{/if}"{if $objectType->getDepth()} style="padding-left: {$objectType->getDepth() * 20}px"{/if} data-depth="{@$objectType->getDepth()}">
+                                                                               <span>{$objectType->getLabel()}</span>
+                                                                               <label><input id="checkbox_{@$container->getObjectTypeID()}_{@$objectType->getObjectID()}" type="checkbox" name="objectTypes[{@$container->getObjectTypeID()}][]" value="{@$objectType->getObjectID()}"{if $objectType->getOptionValue()} checked{/if}></label>
+                                                                       </li>
+                                                               {/foreach}
+                                                       </ul>
+                                               </dd>
+                                       </dl>
                                {/foreach}
                        </div>
                        
diff --git a/wcfsetup/install/files/style/ui/listStructured.scss b/wcfsetup/install/files/style/ui/listStructured.scss
new file mode 100644 (file)
index 0000000..028c110
--- /dev/null
@@ -0,0 +1,32 @@
+/* element list with checkboxes */
+.structuredList {
+       border: 1px solid rgb(79, 129, 189);
+       border-width: 1px 0;
+       
+       li {
+               display: flex;
+               padding: 10px 0;
+               
+               &:not(:first-child) {
+                       border-top: 1px solid rgb(238, 238, 238);
+               }
+               
+               &:hover {
+                       background-color: $wcfTabularBoxBackgroundActive
+               }
+               
+               > span {
+                       flex: 1 1 auto;
+               }
+               
+               > label {
+                       cursor: pointer;
+                       flex: 0 0 auto;
+               }
+               
+               > span,
+               > label {
+                       padding: 0 5px;
+               }
+       }
+}