Merge pull request #587 from nextcloud/sidebar-toggle

Always show sidebar toggle, also when sidebar is open

css/style.scss

@@ -8,7 +8,7 @@
 }
 
 .app-spreed #app-navigation {
-	padding-top: 46px;
+	padding-top: 45px;
 	padding-bottom: 0;
 }
 
@@ -453,10 +453,6 @@ video {
 	z-index: 90;
 }
 
-#video-fullscreen.public {
-	top: 89px;
-}
-
 #video-fullscreen,
 .nameIndicator button,
 #app-sidebar-trigger {
@@ -610,32 +606,6 @@ video {
 	display: none !important;
 }
 
-/* As there is no header in fullscreen the buttons can be moved to the top. */
-#app-content:-webkit-full-screen #app-sidebar-trigger {
-	top: 0;
-}
-#app-content:-moz-full-screen #app-sidebar-trigger {
-	top: 0;
-}
-#app-content:-ms-fullscreen #app-sidebar-trigger {
-	top: 0;
-}
-#app-content:fullscreen #app-sidebar-trigger {
-	top: 0;
-}
-#app-content:-webkit-full-screen #video-fullscreen {
-	top: 44px;
-}
-#app-content:-moz-full-screen #video-fullscreen {
-	top: 44px;
-}
-#app-content:-ms-fullscreen #video-fullscreen {
-	top: 44px;
-}
-#app-content:fullscreen #video-fullscreen {
-	top: 44px;
-}
-
 
 .localmediaerror h2 {
 	color: red;
@@ -711,8 +681,8 @@ video {
 }
 
 #app-sidebar-trigger {
-	position: fixed;
-	top: 45px;
+	position: absolute;
+	top: 0;
 	right: 0;
 	/* Higher than the z-index of the emptycontent */
 	z-index: 50;
@@ -770,6 +740,16 @@ video {
 	background: transparent;
 }
 
+/* Correctly position icons below header in public chat. */
+#body-public {
+	#app-sidebar-trigger {
+		top: 45px;
+	}
+	#video-fullscreen {
+		top: 89px;
+	}
+}
+
 /* As the header is hidden (except for the logo), move the fullscreen button and
  * sidebar to the top during calls */
 #body-public #app-content:not(.participants-1) #app-sidebar,

js/views/sidebarview.js

@@ -55,8 +55,7 @@
 	 *
 	 * In order for the user to be able to open the sidebar when it is closed,
 	 * the SidebarView shows a small icon ("#app-sidebar-trigger") on the right
-	 * border of the document that opens the sidebar when clicked. When the
-	 * sidebar is open the icon is hidden.
+	 * border of the document that opens the sidebar when clicked.
 	 *
 	 * By default the sidebar is disabled, that is, it is closed and can not be
 	 * opened, neither by the user nor programatically. Calling "enable()" will
@@ -78,7 +77,7 @@
 		},
 
 		events: {
-			'click @ui.trigger': 'open',
+			'click @ui.trigger': 'toggle',
 			'click @ui.sidebar a.close': 'close',
 		},
 
@@ -90,6 +89,7 @@
 
 		initialize: function() {
 			this._enabled = false;
+			this._open = false;
 
 			this._callInfoView = null;
 
@@ -126,16 +126,28 @@
 			this._enabled = false;
 		},
 
+		toggle: function() {
+			if (!this._open) {
+				this.open();
+			} else {
+				this.close();
+			}
+		},
+
 		open: function() {
 			if (!this._enabled) {
 				return;
 			}
 
 			OC.Apps.showAppSidebar();
+
+			this._open = true;
 		},
 
 		close: function() {
 			OC.Apps.hideAppSidebar();
+
+			this._open = false;
 		},
 
 		/**