Added missing template
authorAlexander Ebert <ebert@woltlab.com>
Thu, 20 Apr 2017 12:15:02 +0000 (14:15 +0200)
committerAlexander Ebert <ebert@woltlab.com>
Thu, 20 Apr 2017 12:15:02 +0000 (14:15 +0200)
See #2208

wcfsetup/install/files/acp/templates/pageBoxOrder.tpl
wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Page/BoxOrder.js
wcfsetup/install/files/lib/data/page/PageAction.class.php

index a88fb306ef5e12d8c13cab2c691f42eddb8fdaa6..683507f95aa348cb39f92d2561b7fa7a9a8314ab 100644 (file)
 {include file='header' pageTitle='wcf.acp.page.boxOrder'}
 
 <style>
+       #pbo {
+               border: 1px solid #ccc;
+               padding: 5px;
+       }
+       
        #pbo [data-placeholder] {
                background-color: rgb(224, 224, 224);
-               padding: 10px;
+               padding: 20px 10px;
+               position: relative;
+       }
+       
+       #pbo [data-placeholder]::before {
+               content: attr(data-title);
+               color: rgb(102, 102, 102);
+               font-size: 11px;
+               left: 50%;
+               position: absolute;
+               top: 5px;
+               transform: translateX(-50%);
+       }
+       
+       #pbo [data-placeholder] + [data-placeholder] {
+               margin-top: 10px;
+       }
+       
+       #pboMain {
+               display: flex;
+               justify-content: space-between;
+       }
+       
+       #pboMain:not(:first-child) {
+               margin-top: 20px;
+       }
+       
+       #pboMain:not(:last-child) {
+               margin-bottom: 20px;
+       }
+       
+       #pboMain > div {
+               flex: 0 0 calc(33% - 10px);
+               max-width: calc(33% - 10px);
+       }
+       
+       #pbo [data-placeholder] ul {
+               list-style-position: inside;
+               list-style-type: decimal;
+               margin-top: 20px;
+       }
+       
+       #pbo [data-placeholder] li {
+               padding: 5px;
+       }
+       
+       #pbo [data-placeholder] .ui-sortable > li {
+               cursor: move;
+       }
+       
+       #pbo [data-placeholder] .ui-sortable > li::before {
+               content: "\f047";
+               font-family: FontAwesome;
+               padding-right: 5px;
+       }
+       
+       #pbo [data-placeholder] li + li {
+               margin-top: 5px;
+       }
+       
+       #pbo [data-placeholder="headerBoxes"] > ul,
+       #pbo [data-placeholder="footerBoxes"] > ul {
+               display: flex;
+               flex-wrap: wrap;
+       }
+       
+       #pbo [data-placeholder="headerBoxes"] > ul > li,
+       #pbo [data-placeholder="footerBoxes"] > ul > li {
+               flex: 0 0 calc(25% - 10px);
+               max-width: calc(25% - 10px);
+       }
+       
+       #pbo [data-placeholder] .sortablePlaceholder::before {
+               /* this avoids the icon from being displayed, but will also
+                  enforce a matching height for the placeholder */
+               visibility: hidden;
+       }
+       
+       #pboContentContainer:first-child:not(:last-child),
+       #pboContentContainer:last-child:not(:first-child) {
+               flex: 0 0 calc(66% - 10px);
+               max-width: calc(66% - 10px);
+       }
+       
+       #pboContentContainer:first-child:last-child {
+               flex: 0 0 100%;
+               max-width: none;
+       }
+       
+       #pboContent {
+               background-color: #BBDEFB;
+               padding: 40px 20px;
+               text-align: center;
+       }
+       
+       #pboContent:not(:first-child) {
+               margin-top: 10px;
+       }
+       
+       #pboContent:not(:last-child) {
+               margin-bottom: 10px;
        }
 </style>
 
+<script data-relocate="true">
+       require(['Dictionary', 'Language', 'WoltLabSuite/Core/Acp/Ui/Page/BoxOrder'], function (Dictionary, Language, AcpUiPageBoxOrder) {
+               Language.addObject({
+                       'wcf.acp.page.boxOrder.discard.confirmMessage': '{lang}wcf.acp.page.boxOrder.discard.confirmMessage{/lang}'
+               });
+               
+               var boxes = new Dictionary();
+               {foreach from=$boxes key=position item=boxData}
+                       {if $position != 'mainMenu'}
+                               boxes.set('{$position}', [{implode from=$boxData item=box}{ boxID: {@$box->boxID}, name: '{$box->name|encodeJS}' }{/implode}]);
+                       {/if}
+               {/foreach}
+               
+               AcpUiPageBoxOrder.init({@$page->pageID}, boxes);
+       });
+       
+</script>
+
 <header class="contentHeader">
        <div class="contentHeaderTitle">
                <h1 class="contentTitle">{lang}wcf.acp.page.boxOrder{/lang}</h1>
+               <p class="contentHeaderDescription">{$page->name}</p>
        </div>
        
        <nav class="contentHeaderNavigation">
                <ul>
-                       <li><a href="{link controller='LabelAdd'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.label.add{/lang}</span></a></li>
+                       {if $hasCustomShowOrder}<li><a href="#" class="button jsButtonCustomShowOrder"><span class="icon icon16 fa-times"></span> <span>{lang}wcf.acp.page.boxOrder.discard{/lang}</span></a></li>{/if}
+                       <li><a href="{link controller='PageEdit' id=$page->pageID}{/link}" class="button"><span class="icon icon16 fa-pencil"></span> <span>{lang}wcf.acp.page.edit{/lang}</span></a></li>
                        
                        {event name='contentHeaderNavigation'}
                </ul>
        </nav>
 </header>
 
-<div class="section" id="pbo">
-       <div data-placeholder="hero"></div>
-       <div class="pbo-quad" data-placeholder="headerBoxes"></div>
-       <div data-placeholder="top"></div>
-       
-       <div class="pbo-main">
-               <div data-placeholder="sidebarLeft"></div>
-               <div>
-                       <div data-placeholder="contentTop"></div>
-                       <div class="pbo-content">{lang}wcf.acp.page.boxOrder.position.content{/lang}</div>
-                       <div data-placeholder="contentBottom"></div>
+<div class="section">
+       <div id="pbo">
+               {if $boxes[hero]|isset}<div data-placeholder="hero" data-title="{lang}wcf.acp.box.position.hero{/lang}"></div>{/if}
+               {if $boxes[headerBoxes]|isset}<div data-placeholder="headerBoxes" data-title="{lang}wcf.acp.box.position.headerBoxes{/lang}"></div>{/if}
+               {if $boxes[top]|isset}<div data-placeholder="top" data-title="{lang}wcf.acp.box.position.top{/lang}"></div>{/if}
+               
+               <div id="pboMain">
+                       {if $boxes[sidebarLeft]|isset}<div data-placeholder="sidebarLeft" data-title="{lang}wcf.acp.box.position.sidebarLeft{/lang}"></div>{/if}
+                       <div id="pboContentContainer">
+                               {if $boxes[contentTop]|isset}<div data-placeholder="contentTop" data-title="{lang}wcf.acp.box.position.contentTop{/lang}"></div>{/if}
+                               <div id="pboContent">{lang}wcf.acp.page.boxOrder.position.content{/lang}</div>
+                               {if $boxes[contentBottom]|isset}<div data-placeholder="contentBottom" data-title="{lang}wcf.acp.box.position.contentBottom{/lang}"></div>{/if}
+                       </div>
+                       {if $boxes[sidebarRight]|isset}<div data-placeholder="sidebarRight" data-title="{lang}wcf.acp.box.position.sidebarRight{/lang}"></div>{/if}
                </div>
-               <div data-placeholder="sidebarRight"></div>
+               
+               {if $boxes[bottom]|isset}<div data-placeholder="bottom" data-title="{lang}wcf.acp.box.position.bottom{/lang}"></div>{/if}
+               {if $boxes[footerBoxes]|isset}<div data-placeholder="footerBoxes" data-title="{lang}wcf.acp.box.position.footerBoxes{/lang}"></div>{/if}
+               {if $boxes[footer]|isset}<div data-placeholder="footer" data-title="{lang}wcf.acp.box.position.footer{/lang}"></div>{/if}
        </div>
        
-       <div data-placeholder="bottom"></div>
-       <div class="pbo-quad" data-placeholder="footerBoxes"></div>
-       <div data-placeholder="footer"></div>
+       <div class="formSubmit">
+               <button class="button buttonPrimary" data-type="submit">{lang}wcf.global.button.saveSorting{/lang}</button>
+       </div>
 </div>
 
 {include file='footer'}
index a898d8f4fa7e49bb311e64bbff122f97527f8e92..4528afcdfe2e1db81e8855af45f8213347ad235d 100644 (file)
@@ -1,10 +1,27 @@
+/**
+ * Provides helper functions to sort boxes per page.
+ *
+ * @author      Alexander Ebert
+ * @copyright   2001-2017 WoltLab GmbH
+ * @license     GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @module      WoltLabSuite/Core/Acp/Ui/Page/BoxOrder
+ */
 define(['Ajax', 'Language', 'Ui/Confirmation', 'Ui/Notification'], function (Ajax, Language, UiConfirmation, UiNotification) {
        "use strict";
        
        var _pageId = 0;
        var _pbo = elById('pbo');
        
+       /**
+        * @exports     WoltLabSuite/Core/Acp/Ui/Page/BoxOrder
+        */
        return {
+               /**
+                * Initializes the sorting capabilities.
+                * 
+                * @param       {int}           pageId          page id
+                * @param       {Dictionary}    boxes           list of boxes per position
+                */
                init: function (pageId, boxes) {
                        _pageId = pageId;
                        
@@ -34,6 +51,12 @@ define(['Ajax', 'Language', 'Ui/Confirmation', 'Ui/Notification'], function (Aja
                        if (buttonDiscard) buttonDiscard.addEventListener(WCF_CLICK_EVENT, this._discard.bind(this));
                },
                
+               /**
+                * Saves the order of all boxes per position.
+                * 
+                * @param       {Event}         event           event object
+                * @protected
+                */
                _save: function (event) {
                        event.preventDefault();
                        
@@ -57,6 +80,12 @@ define(['Ajax', 'Language', 'Ui/Confirmation', 'Ui/Notification'], function (Aja
                        });
                },
                
+               /**
+                * Shows an dialog to discard the individual box show order for this page.
+                * 
+                * @param       {Event}         event           event object
+                * @protected
+                */
                _discard: function (event) {
                        event.preventDefault();
                        
index 4e929f8d92dedb12c160f79309ca7c8f7d6774e0..95f3ed61420c83fc18757e3b1c2b4d7c9a2e4ab1 100644 (file)
@@ -1,11 +1,11 @@
 <?php
 namespace wcf\data\page;
 use wcf\data\box\Box;
-use wcf\data\ISortableAction;
 use wcf\data\page\content\PageContent;
 use wcf\data\page\content\PageContentEditor;
 use wcf\data\AbstractDatabaseObjectAction;
 use wcf\data\ISearchAction;
+use wcf\data\ISortableAction;
 use wcf\data\IToggleAction;
 use wcf\system\database\util\PreparedStatementConditionBuilder;
 use wcf\system\exception\PermissionDeniedException;