Some changes to the collapsible sidebar

There seems to be no way to animate the toggle, so i removed it for
now. Maybe someone finds a clean and simple solution.

diff --git a/wcfsetup/install/files/acp/style/style.css b/wcfsetup/install/files/acp/style/style.css
index abfa2e5b8b5920516fd7664279b9964c88ca1c8a..9239267b6df2dc1ce39e621a7083c3d3b81ade4f 100644 (file)
--- a/wcfsetup/install/files/acp/style/style.css
+++ b/wcfsetup/install/files/acp/style/style.css
@@ -3697,18 +3697,23 @@ div#profileButtonContainer button:hover {
 
 
 
-/* TODO: This is just a prototype for collapsible sidebars */
+/* ToDo: Collapsible Sidebar Button */
+
 .collapsibleSidebarButton {
-       background-color: rgb(216, 231, 245);
-       border: 1px solid rgb(192, 192, 192);
-       border-left-width: 0;
-       border-radius: 0 3px 3px 0;
+       border-right: 1px solid transparent;
+       border-left: 1px solid transparent;
+       background-image: url('../../icon/handle1.svg');
+       background-size: 48px;
+       background-position: left center;
+       background-repeat: no-repeat;
        padding: 3px;
-       opacity: 0.6;
        position: absolute;
+       top: 0;
        right: -15px;
-       top: 46%;
-       z-index: 101;
+       bottom: 0;
+       width: 7px;
+       z-index: 500;
+       opacity: .6;
        
        -webkit-transition: opacity .2s linear;
        -moz-transition: opacity .2s linear;
@@ -3719,22 +3724,22 @@ div#profileButtonContainer button:hover {
 
 .collapsibleSidebarButton:hover {
        cursor: pointer;
-       opacity: 1.0;
+       color: #999;    
+       border-right-color: #ccc;
+       border-left-color: #ccc;
+       background-color: rgba(0, 0, 0, .015);
+       opacity: 1;
 }
 
-.collapsibleSidebar {
-       -webkit-transition: width .5s linear;
-       -moz-transition: width .5s linear;
-       -ms-transition: width .5s linear;
-       -o-transition: width .5s linear;
-       transition: width .5s linear;
-       
-       width: 100%;
+.collapsedSidebar {
+       overflow: hidden;
+       width: 0;
 }
 
-.collapsibleSidebar.collapsedSidebar {
+.collapsedSidebar nav {
        overflow: hidden;
-       width: 0%;
+       width: 0;
+       display: none;
 }
 
 

diff --git a/wcfsetup/install/files/acp/templates/header.tpl b/wcfsetup/install/files/acp/templates/header.tpl
index e7859cc2668c8e1855e56d6a0d0272606ff9aed9..ba49b791b46e5d191b9d87c8fd0c18854d1901c3 100644 (file)
--- a/wcfsetup/install/files/acp/templates/header.tpl
+++ b/wcfsetup/install/files/acp/templates/header.tpl
@@ -64,7 +64,8 @@
                                'wcf.global.thousandsSeparator': '{capture assign=thousandsSeparator}{lang}wcf.global.thousandsSeparator{/lang}{/capture}{@$thousandsSeparator|encodeJS}',
                                'wcf.global.decimalPoint': '{capture assign=decimalPoint}{lang}wcf.global.decimalPoint{/lang}{/capture}{$decimalPoint|encodeJS}',
                                'wcf.global.page.next': '{capture assign=pageNext}{lang}wcf.global.page.next{/lang}{/capture}{@$pageNext|encodeJS}',
-                               'wcf.global.page.previous': '{capture assign=pagePrevious}{lang}wcf.global.page.previous{/lang}{/capture}{@$pagePrevious|encodeJS}'
+                               'wcf.global.page.previous': '{capture assign=pagePrevious}{lang}wcf.global.page.previous{/lang}{/capture}{@$pagePrevious|encodeJS}',
+                               'wcf.global.button.collapsible': '{lang}wcf.global.button.collapsible{/lang}'
                        });
                        new WCF.Date.Time();
                        new WCF.Effect.SmoothScroll();

diff --git a/wcfsetup/install/files/js/WCF.js b/wcfsetup/install/files/js/WCF.js
index 8a3449fafb2d5b6444b82229940ef24dc53059ae..a412b70c76ec176795285d7773da0ebcdc98af07 100644 (file)
--- a/wcfsetup/install/files/js/WCF.js
+++ b/wcfsetup/install/files/js/WCF.js
@@ -3015,7 +3015,7 @@ $.widget('ui.wcfSidebar', {
                this.element.wrap('<div class="collapsibleSidebar"></div>');
                
                // create toggle button
-               this._button = $('<span class="collapsibleSidebarButton">&laquo;</div>').appendTo(this.element.parent('div'));
+               this._button = $('<span class="collapsibleSidebarButton" title="' + WCF.Language.get('wcf.global.button.collapsible') + '"></span>').appendTo(this.element.parent('div'));
 
                // bind event
                this._button.click($.proxy(this._toggle, this));