Implemented a toggleable sidebar for WCF

diff --git a/wcfsetup/install/files/acp/js/WCF.ACP.js b/wcfsetup/install/files/acp/js/WCF.ACP.js
index 9a1fab0493c0821d905ed1fb2d0018d3668fbf6c..72f8697cbd20d39a96717c57bdb687f53a94cc65 100644 (file)
--- a/wcfsetup/install/files/acp/js/WCF.ACP.js
+++ b/wcfsetup/install/files/acp/js/WCF.ACP.js
@@ -75,8 +75,11 @@ WCF.ACP.Menu.prototype = {
                if ($target.hasClass('activeMenuItem')) {
                        return;
                }
-               
+
                this._renderSidebar($target.data('menuItem'), []);
+
+               // force sidebar to be displayed
+               this._sidebarNavigation.wcfSidebar('show');
        },
        
        /**

diff --git a/wcfsetup/install/files/acp/style/style.css b/wcfsetup/install/files/acp/style/style.css
index 7aced9639d6550049af0483e8c4c511c78407db4..f3f383e3b1ee796db7f9a14b0babfa068a9b55ae 100644 (file)
--- a/wcfsetup/install/files/acp/style/style.css
+++ b/wcfsetup/install/files/acp/style/style.css
@@ -3703,7 +3703,30 @@ div#profileButtonContainer button:hover {
 
 
 
+/* TODO: This is just a prototype for collapsible sidebars */
+.collapsibleSidebarButton {
+       background-color: rgb(216, 231, 245);
+       border: 1px solid rgb(192, 192, 192);
+       border-left-width: 0;
+       border-radius: 0 3px 3px 0;
+       padding: 3px;
+       opacity: 0.6;
+       position: absolute;
+       right: -15px;
+       top: 46%;
+       z-index: 101;
+       
+       -webkit-transition: opacity .2s linear;
+       -moz-transition: opacity .2s linear;
+       -ms-transition: opacity .2s linear;
+       -o-transition: opacity .2s linear;
+       transition: opacity .2s linear;
+}
 
+.collapsibleSidebarButton:hover {
+       cursor: pointer;
+       opacity: 1.0;
+}
 
 
 

diff --git a/wcfsetup/install/files/acp/templates/header.tpl b/wcfsetup/install/files/acp/templates/header.tpl
index 2c7237e7cc39187da22a79647fa64289154e0044..e7859cc2668c8e1855e56d6a0d0272606ff9aed9 100644 (file)
--- a/wcfsetup/install/files/acp/templates/header.tpl
+++ b/wcfsetup/install/files/acp/templates/header.tpl
@@ -70,6 +70,8 @@
                        new WCF.Effect.SmoothScroll();
                        new WCF.Effect.BalloonTooltip();
                        $('<span class="arrowOuter"><span class="arrowInner"></span></span>').appendTo('.innerError');
+
+                       $('#sidebarMenu').wcfSidebar();
                });
                //]]>
        </script>

diff --git a/wcfsetup/install/files/js/WCF.js b/wcfsetup/install/files/js/WCF.js
index 99b16236e21ad688b45ea814984adf46b42df9f7..b6bda1482557edaeb1dfec0916a65a7f77cb0c2c 100644 (file)
--- a/wcfsetup/install/files/js/WCF.js
+++ b/wcfsetup/install/files/js/WCF.js
@@ -2992,6 +2992,76 @@ WCF.DOMNodeInsertedHandler = {
        }
 };
 
+/**
+ * Provides a toggleable sidebar.
+ */
+$.widget('ui.wcfSidebar', {
+       /**
+        * toggle button
+        * @var jQuery
+        */
+       _button: null,
+
+       /**
+        * sidebar visibility
+        * @var boolean
+        */
+       _visible: true,
+
+       /**
+        * Creates a new toggleable sidebar.
+        */
+       _create: function() {
+               this.element.wrap('<div class="collapsibleSidebar"></div>');
+               
+               // create toggle button
+               this._button = $('<span class="collapsibleSidebarButton">&laquo;</div>').appendTo(this.element.parent('div'));
+
+               // bind event
+               this._button.click($.proxy(this._toggle, this));
+       },
+
+       /**
+        * Toggles visibility on button click.
+        */
+       _toggle: function() {
+               if (this._visible) {
+                       this.hide();
+               }
+               else {
+                       this.show();
+               }
+       },
+
+       /**
+        * Shows sidebar content.
+        */
+       show: function() {
+               if (this._visible) {
+                       return;
+               }
+
+               this._visible = true;
+               this.element.wcfBlindIn('horizontal', $.proxy(function() {
+                       this._button.html('&laquo;');
+               }, this));
+       },
+
+       /**
+        * Hides the sidebar content.
+        */
+       hide: function() {
+               if (!this._visible) {
+                       return;
+               }
+               
+               this._visible = false;
+               this.element.wcfBlindOut('horizontal',  $.proxy(function() {
+                       this._button.html('&raquo;');
+               }, this));
+       }
+});
+
 /**
  * Basic implementation for WCF dialogs.
  */