New design for the ACP, first step …

- Implemented "toBottom"-link in the subbar.
- Attached a lot of the fu
ture design for ACP as in the design-sketch.
- Had to add some divs for
 the design.
- Renamed some IDs and added some new classes (beware, all
 this can still change!).
- Added some dummy-icons (for a better look).

- Old class "hidden" is not usable any more (conflicts with jQuery), s
et up "invisible" instead.
- Check-in may contain errors!

diff --git a/wcfsetup/install/files/acp/js/WCF.ACP.js b/wcfsetup/install/files/acp/js/WCF.ACP.js
index e3ed5b045de3adefefa88971ab40b38156471bfd..e8c2e7938376ca78c2fdf91aebf61b6a38221455 100644 (file)
--- a/wcfsetup/install/files/acp/js/WCF.ACP.js
+++ b/wcfsetup/install/files/acp/js/WCF.ACP.js
@@ -24,8 +24,8 @@ WCF.ACP.Menu.prototype = {
         * @param       array           activeMenuItems\r
         */\r
        init: function(activeMenuItems) {\r
-               this._headerNavigation = $('nav#navigationTop');\r
-               this._sidebarNavigation = $('nav#navigationSidebar');\r
+               this._headerNavigation = $('nav#mainMenu');\r
+               this._sidebarNavigation = $('nav#sidebarMenu');\r
                \r
                this._prepareElements(activeMenuItems);\r
        },\r
@@ -65,7 +65,7 @@ WCF.ACP.Menu.prototype = {
        },\r
        \r
        /**\r
-        * Handles clicks on top navigation.\r
+        * Handles clicks on main menu.\r
         *\r
         * @param       object          event\r
         */\r

diff --git a/wcfsetup/install/files/acp/style/testing.css b/wcfsetup/install/files/acp/style/testing.css
index 917cdd99b4859a4e2a476bbaf89687060acd3f40..21a8119a1e4d5c930a146322e8e1e8553e9b2075 100644 (file)
--- a/wcfsetup/install/files/acp/style/testing.css
+++ b/wcfsetup/install/files/acp/style/testing.css
@@ -10,6 +10,8 @@
 body {\r
        font-family: 'Trebuchet MS', Arial, sans-serif;\r
        font-size: .8em;\r
+       \r
+       background-color: #29374a;\r
 }\r
 \r
 img {\r
@@ -17,25 +19,40 @@ img {
 }\r
 \r
 a {\r
-       color: #00c;\r
+       color: #369;\r
        text-decoration: none;\r
 }\r
 \r
 a:hover {\r
-       color: #f80;\r
+       color: #036;\r
        text-decoration: underline;\r
 }\r
 \r
+.invisible {\r
+       position: absolute;\r
+       left: -9000px;\r
+       top: -9000px;\r
+}\r
+\r
+/* -- -- -- -- -- Header -- -- -- -- -- */\r
+\r
 header {\r
-       margin: 0 23px 23px 23px;\r
+       margin: 0 23px 0;\r
 }\r
 \r
 header div#logo h1 {\r
+       color: #d8e7f5;\r
+       text-shadow: 0 -1px 0 #000;\r
        font-size: 160%;\r
        position: relative;\r
        top: 45px;\r
 }\r
 \r
+header div#logo a:hover {\r
+       color: #d8e7f5;\r
+       text-decoration: none !important;\r
+}\r
+\r
 header div#logo img {\r
        float: left;\r
 }\r
@@ -47,108 +64,105 @@ header div#logo a {
        text-align: right;\r
 }\r
 \r
-aside {\r
-       float: left;\r
-       margin: 0 0 21px 21px;\r
-       width: 300px;\r
-}\r
-\r
 /* -- -- -- -- -- Tabs -- -- -- -- --  */\r
 \r
-nav#navigationTop {\r
-       margin: 0 10px;\r
+nav#mainMenu {\r
+       margin: 0 10px -7px;\r
+       background-color: rgba(0, 0, 0, .5);\r
+       border-radius: 7px 7px 0 0;\r
+       display: inline-block;\r
 }\r
 \r
-nav#navigationTop:after {\r
+nav#mainMenu:after {\r
        content: "";\r
        display: block;\r
        clear: both;\r
 }\r
 \r
-nav#navigationTop li {\r
+nav#mainMenu li {\r
        font-size: 110%;\r
        font-weight: normal;\r
        color: #ccc;\r
-       background-color: #000;\r
-       border-bottom: 0;\r
+       \r
        cursor: pointer;\r
        display: inline-block;\r
-       margin: 5px 0 0 0;\r
-       padding: 10px 20px;\r
+       margin: 5px -5px 0;\r
+       padding: 5px 20px;\r
        float: left;\r
+       position: relative;\r
+       z-index: 1;\r
 }\r
 \r
-nav#navigationTop li:after {\r
+nav#mainMenu li:after {\r
        content: "";\r
        display: block;\r
        clear: both;\r
 }\r
 \r
-nav#navigationTop li:hover {\r
+nav#mainMenu li:hover {\r
        color: #fff;\r
 }\r
 \r
-nav#navigationTop li.activeMenuItem {\r
+nav#mainMenu li.activeMenuItem {\r
        font-weight: bold;\r
        color: #369;\r
+       text-shadow: 0 1px 0 #fff;\r
        background-color: #e7f2fd;\r
-       border-color: #ff8800;\r
+       background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#e7f2fd));\r
+       background-image: -moz-linear-gradient(0% 0% 270deg, #fff, #e7f2fd);\r
+       background-image: -ms-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#e7f2fd));\r
+       background-image: -o-linear-gradient(#fff, #e7f2fd);\r
+       background-image: linear-gradient(#fff, #e7f2fd);\r
+       \r
        border-radius: 7px 7px 0 0;\r
        margin: 0;\r
+       padding: 15px 20px 10px;\r
        padding-top: 15px;\r
-}\r
-\r
-nav#navigationSidebar div.menuContainer h1 {\r
-       background-color: #eee;\r
-       background-image: url("../../icon/testing/arrowRightS.png");\r
-       background-position: 7px center;\r
-       background-repeat: no-repeat;\r
-       border: 1px solid #ccc;\r
-       border-top-width: 0;\r
-       color: #369;\r
-       cursor: pointer;\r
-       font-size: 120%;\r
-       font-weight: bold;\r
-       padding: 7px;\r
-       padding-left: 28px;\r
        position: relative;\r
+       top: -5px;\r
+       z-index: 10;\r
 }\r
 \r
-nav#navigationSidebar div.menuContainer h1.activeMenuItem {\r
-       background-image: url("../../icon/testing/arrowDownS.png");\r
-}\r
+/* -- -- -- -- -- Sub Bar -- -- -- -- --  */\r
 \r
-nav#navigationSidebar div.menuContainer h1:first-child {\r
-       border-top: 1px solid #ccc;\r
+menu.subbar {\r
+       display: block;\r
+       background-color: #e7f2fd;\r
+       border-bottom: 1px solid #bcd;\r
+       border-radius: 5px 5px 0 0;\r
+       padding: 3px 7px;\r
+       position: relative;\r
 }\r
 \r
-nav#navigationSidebar div.menuContainer div {\r
-       background-color: #fefefe;\r
-       border: 1px solid #ccc;\r
-       border-top-width: 0;\r
+menu.subbar:after {\r
+       content: "";\r
+       display: block;\r
+       clear: both;\r
 }\r
 \r
-nav#navigationSidebar div.menuContainer ul li {\r
-       padding: 7px 7px 7px 21px;\r
+menu.subbar ul {\r
+       display: block;\r
 }\r
 \r
-nav#navigationSidebar div.menuContainer ul li.activeMenuItem {\r
-       background-color: #faebd7;\r
+menu.subbar ul li {\r
+       float: right;\r
 }\r
 \r
-nav#navigationSidebar div.menuContainer ul li.activeMenuItem a {\r
-       color: #ff8800;\r
-       font-weight: bold;\r
-}\r
+/* -- -- -- -- -- Main -- -- -- -- -- */\r
 \r
-nav#navigationSidebar div.menuContainer ul li a {\r
-       text-decoration: none !important;\r
+div.main {\r
+       margin: 0 23px 0;\r
+       border-collapse: collapse;\r
+       display: table;\r
+       table-layout: fixed;\r
 }\r
 \r
-nav#navigationSidebar div.menuContainer ul li a:hover {\r
-       text-decoration: underline !important;\r
+div.mainInner {\r
+       display: table-row;\r
 }\r
 \r
+/* -- -- -- -- -- Content -- -- -- -- -- */\r
+\r
 div#content {\r
        background-color: #fefefe;\r
        background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#eee), to(#fefefe));\r
@@ -157,19 +171,76 @@ div#content {
        background-image: -o-linear-gradient(#eee, #fefefe);\r
        background-image: linear-gradient(#eee, #fefefe);\r
        \r
-       border: 1px solid #ccc;\r
-       margin: 0 21px 21px 340px;\r
+       display: table-cell;\r
        padding: 21px;\r
+       width: auto;\r
+}\r
+\r
+/* -- -- -- -- -- Sidebar -- -- -- -- -- */\r
+\r
+aside.sidebar {\r
+       width: 275px;\r
+       display: table-cell;\r
+       background-color: #d8e7f5;\r
+}\r
+\r
+/* -- -- -- -- -- Sidebar Menu -- -- -- -- -- */\r
+\r
+nav.sidebarMenu div.menuContainer {\r
+       background-color: #d8e7f5;\r
+       position: relative;\r
+       color: #69c;\r
+       text-shadow: 0 1px 0 #fff;\r
+}\r
+\r
+nav.sidebarMenu div.menuContainer a {\r
+       color: #69c;\r
+       text-shadow: 0 1px 0 #fff;\r
+}\r
+\r
+nav.sidebarMenu div.menuContainer a:hover {\r
+       color: #369;\r
+       text-decoration: none !important;\r
+}\r
+\r
+nav.sidebarMenu div.menuContainer h1 {\r
+       background-image: url("../../icon/testing/arrowRightS.png");\r
+       background-position: 7px center;\r
+       background-repeat: no-repeat;\r
+       color: #369;\r
+       cursor: pointer;\r
+       font-size: 130%;\r
+       font-weight: bold;\r
+       margin-top: 7px;\r
+       padding: 7px;\r
+       padding-left: 30px;\r
+       position: relative;\r
+}\r
+\r
+nav.sidebarMenu div.menuContainer h1.activeMenuItem {\r
+       background-image: url("../../icon/testing/arrowDownS.png");\r
+}\r
+\r
+nav.sidebarMenu div.menuContainer ul li {\r
+       padding: 7px 7px 7px 31px;\r
+}\r
+\r
+nav.sidebarMenu div.menuContainer ul li.activeMenuItem {\r
+       background-color: #fff;\r
+}\r
+\r
+nav.sidebarMenu div.menuContainer ul li.activeMenuItem a {\r
+       color: #036;\r
+       font-weight: bold;\r
 }\r
 \r
 /* -- -- -- -- -- Footer -- -- -- -- --  */\r
 \r
 footer {\r
-       background-color: #eee;\r
-       border: 1px solid #ccc;\r
        clear: both;\r
-       margin: 0 21px 0;\r
-       padding: 7px;\r
+       padding: 0 23px;\r
+       position: relative;\r
+       text-align: center;\r
 }\r
 \r
 footer:after {\r
@@ -178,11 +249,35 @@ footer:after {
        clear: both;\r
 }\r
 \r
+footer > div {\r
+       background-color: #e7f2fd;\r
+       border-top: 1px solid #bcd;\r
+       border-radius: 0 0 5px 5px;\r
+       clear: both;\r
+       padding: 3px 7px;\r
+}\r
+\r
+footer > div:after {\r
+       content: "";\r
+       display: block;\r
+       clear: both;\r
+}\r
+\r
 footer p.copyright {\r
-       display: inline-block;\r
-       float: left;\r
+       padding-top: 20px;\r
+       min-height: 40px;\r
+}\r
+\r
+footer p.copyright a:hover {\r
+       color: #69c;\r
+       text-decoration: none;\r
 }\r
 \r
+\r
+\r
+\r
+\r
+\r
 footer nav#navigationFooter {\r
        float: right;\r
 }\r

diff --git a/wcfsetup/install/files/acp/templates/footer.tpl b/wcfsetup/install/files/acp/templates/footer.tpl
index 504769ea03fe7dfce4029c1e0e53b97abfb6facb..39017ac9344dedb3fb07fd7a4f05f97e23284905 100644 (file)
--- a/wcfsetup/install/files/acp/templates/footer.tpl
+++ b/wcfsetup/install/files/acp/templates/footer.tpl
@@ -1,15 +1,19 @@
+                       </div>\r
                </div>\r
        </div>\r
        <!-- /CONTENT -->\r
        \r
        <!-- FOOTER -->\r
        <footer>\r
-               <p class="copyright"><a href="http://www.woltlab.com" title="www.woltlab.com">&copy; WoltLab&reg; GmbH</a></p>\r
-               <nav id="footerNavigation">\r
-                       <ul>\r
-                               <li id="toTopLink" class="toTopLink"><a href="#top" title="{lang}wcf.global.scrollUp{/lang}"><img src="{@RELATIVE_WCF_DIR}icon/upS.png" alt="{lang}wcf.global.scrollUp{/lang}" /> <span class="hidden">{lang}wcf.global.scrollUp{/lang}</span></a></li>\r
-                       </ul>\r
-               </nav>\r
+               <div>\r
+                       <nav id="footerNavigation">\r
+                               <ul>\r
+                                       <li id="toTopLink" class="toTopLink"><a href="#top" title="{lang}wcf.global.scrollUp{/lang}"><img src="{@RELATIVE_WCF_DIR}icon/upS.png" alt="{lang}wcf.global.scrollUp{/lang}" /> <span class="invisible">{lang}wcf.global.scrollUp{/lang}</span></a></li>\r
+                               </ul>\r
+                       </nav>\r
+               </div>\r
+               <p class="copyright"><a href="http://www.woltlab.com" title="www.woltlab.com">Copyright &copy; 2001-2011 WoltLab&reg; GmbH</a></p>\r
        </footer>\r
+       <a id="bottom"></a>\r
 </body>\r
 </html>
\ No newline at end of file

diff --git a/wcfsetup/install/files/acp/templates/header.tpl b/wcfsetup/install/files/acp/templates/header.tpl
index 8b7e767e579f0affe79b356b0875c4f2c2fc77e0..42ef5e2b6c3dc23e889c9223d462815b22b5e29a 100644 (file)
--- a/wcfsetup/install/files/acp/templates/header.tpl
+++ b/wcfsetup/install/files/acp/templates/header.tpl
@@ -63,8 +63,8 @@
        </script>\r
 </head>\r
 <body id="tpl{$templateName|ucfirst}">\r
+       <a id="top"></a>\r
        <header>\r
-               <a id="top"></a>\r
                \r
                <!-- top nav -->\r
                <!-- /top nav -->\r
@@ -79,7 +79,7 @@
                <!-- /logo -->\r
                \r
                <!-- top nav -->\r
-               <nav id="navigationTop">\r
+               <nav id="mainMenu">\r
                        {* work-around for unknown core-object during WCFSetup *}\r
                        {if PACKAGE_ID}\r
                                <ul>\r
@@ -90,38 +90,49 @@
                        {/if}\r
                </nav>\r
                <!-- /top nav -->\r
+               \r
+               <!-- sub bar -->\r
+               \r
+               <menu class="subbar">\r
+                       <ul>\r
+                               <li id="toBottomLink" class="toBottomLink"><a href="#bottom" title="{lang}wcf.global.scrollDown{/lang}"><img src="{@RELATIVE_WCF_DIR}icon/downS.png" alt="{lang}wcf.global.scrollDown{/lang}" /> <span class="invisible">{lang}wcf.global.scrollDown{/lang}</span></a></li>\r
+                       </ul>\r
+               </menu>\r
+               \r
+               <!-- /sub bar -->\r
        </header>\r
        \r
        <!-- CONTENT -->\r
        <div id="main" class="main">\r
-               <aside>\r
-                       <!-- sub nav -->\r
-                       <nav id="navigationSidebar" class="sideBar">\r
-                               {* work-around for unknown core-object during WCFSetup *}\r
-                               {if PACKAGE_ID}\r
-                                       {foreach from=$__wcf->getACPMenu()->getMenuItems('') item=parentMenuItem}\r
-                                               <div class="menuContainer" data-parentMenuItem="{$parentMenuItem->menuItem}" id="{$parentMenuItem->menuItem}-container" style="display: none;">\r
-                                                       {foreach from=$__wcf->getACPMenu()->getMenuItems($parentMenuItem->menuItem) item=menuItem}\r
-                                                               <h1 data-menuItem="{$menuItem->menuItem}" class="menuHeader">{lang}{@$menuItem->menuItem}{/lang}</h1>\r
-                                                               <div>\r
-                                                                       <ul id="{$menuItem->menuItem}">\r
-                                                                               {foreach from=$__wcf->getACPMenu()->getMenuItems($menuItem->menuItem) item=menuItemCategory}\r
-                                                                                       {if $__wcf->getACPMenu()->getMenuItems($menuItemCategory->menuItem)|count > 0}\r
-                                                                                               {foreach from=$__wcf->getACPMenu()->getMenuItems($menuItemCategory->menuItem) item=subMenuItem}\r
-                                                                                                       <li data-menuItem="{$subMenuItem->menuItem}" id="{$subMenuItem->menuItem}"><a href="{$subMenuItem->getLink()}">{lang}{$subMenuItem->menuItem}{/lang}</a></li>\r
-                                                                                               {/foreach}\r
-                                                                                       {else}\r
-                                                                                               <li data-menuItem="{$menuItemCategory->menuItem}" id="{$menuItemCategory->menuItem}"><a href="{$menuItemCategory->getLink()}">{lang}{$menuItemCategory->menuItem}{/lang}</a></li>\r
-                                                                                       {/if}\r
-                                                                               {/foreach}\r
-                                                                       </ul>\r
-                                                               </div>\r
-                                                       {/foreach}\r
-                                               </div>\r
-                                       {/foreach}\r
-                               {/if}\r
-                       </nav>\r
-                       <!-- /sub nav -->\r
-               </aside>\r
-               \r
-               <div id="content">\r
+               <div class="mainInner">\r
+                       <aside class="sidebar">\r
+                               <!-- sub nav -->\r
+                               <nav id="sidebarMenu" class="sidebarMenu">\r
+                                       {* work-around for unknown core-object during WCFSetup *}\r
+                                       {if PACKAGE_ID}\r
+                                               {foreach from=$__wcf->getACPMenu()->getMenuItems('') item=parentMenuItem}\r
+                                                       <div class="menuContainer" data-parentMenuItem="{$parentMenuItem->menuItem}" id="{$parentMenuItem->menuItem}-container" style="display: none;">\r
+                                                               {foreach from=$__wcf->getACPMenu()->getMenuItems($parentMenuItem->menuItem) item=menuItem}\r
+                                                                       <h1 data-menuItem="{$menuItem->menuItem}" class="menuHeader">{lang}{@$menuItem->menuItem}{/lang}</h1>\r
+                                                                       <div>\r
+                                                                               <ul id="{$menuItem->menuItem}">\r
+                                                                                       {foreach from=$__wcf->getACPMenu()->getMenuItems($menuItem->menuItem) item=menuItemCategory}\r
+                                                                                               {if $__wcf->getACPMenu()->getMenuItems($menuItemCategory->menuItem)|count > 0}\r
+                                                                                                       {foreach from=$__wcf->getACPMenu()->getMenuItems($menuItemCategory->menuItem) item=subMenuItem}\r
+                                                                                                               <li data-menuItem="{$subMenuItem->menuItem}" id="{$subMenuItem->menuItem}"><a href="{$subMenuItem->getLink()}">{lang}{$subMenuItem->menuItem}{/lang}</a></li>\r
+                                                                                                       {/foreach}\r
+                                                                                               {else}\r
+                                                                                                       <li data-menuItem="{$menuItemCategory->menuItem}" id="{$menuItemCategory->menuItem}"><a href="{$menuItemCategory->getLink()}">{lang}{$menuItemCategory->menuItem}{/lang}</a></li>\r
+                                                                                               {/if}\r
+                                                                                       {/foreach}\r
+                                                                               </ul>\r
+                                                                       </div>\r
+                                                               {/foreach}\r
+                                                       </div>\r
+                                               {/foreach}\r
+                                       {/if}\r
+                               </nav>\r
+                               <!-- /sub nav -->\r
+                       </aside>\r
+                       \r
+                       <div id="content">\r