From: Alexander Ebert <ebert@woltlab.com>
Date: Wed, 9 Nov 2011 23:14:15 +0000 (+0100)
Subject: Implemented a toggleable sidebar for WCF
X-Git-Tag: 2.0.0_Beta_1~1613
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=38886714209484d5740534afc48fbe9e770ea9b0;p=GitHub%2FWoltLab%2FWCF.git

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 9a1fab0493..72f8697cbd 100644
--- 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 7aced9639d..f3f383e3b1 100644
--- 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 2c7237e7cc..e7859cc266 100644
--- 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 99b16236e2..b6bda14825 100644
--- 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.
  */