Merge pull request #8159 from owncloud/mobile-sidebar-swipe

Mobile sidebar swipe

apps/files/css/files.css

@@ -97,15 +97,14 @@
  * to be more flexible / relative
  */
 #body-user .app-files #controls {
-	left: 230px; /* sidebar width */
+	left: 250px; /* sidebar width */
 	position: fixed;
 	padding-left: 0px;
 }
 
 /* this is mostly for file viewer apps, text editor, etc */
 #body-user .app-files.no-sidebar #controls {
 	left: 0px;
-	padding-left: 80px; /* main nav bar */
 }
 
 /* move Deleted Files to bottom of sidebar */

apps/files/css/upload.css

@@ -44,7 +44,6 @@
 	display: inline-block;
 	vertical-align: top;
 	height: 36px;
-	box-sizing: border-box;
 }
 #uploadprogresswrapper > input[type='button'] {
 	height: 36px;
@@ -53,7 +52,7 @@
 	position:relative;
 	float: left;
 	margin-left: 12px;
-	width: 130px;
+	width: 100%;
 	height: 36px;
 	display:inline-block;
 }

core/css/apps.css

@@ -1,4 +1,5 @@
-/* ---- APP STYLING ---- */
+/* APP STYLING -------------------------------------------------------------- */
+
 
 #app {
 	height: 100%;
@@ -8,15 +9,26 @@
 	-moz-box-sizing: border-box; box-sizing: border-box;
 }
 
+
+
+
+
+/* APP-NAVIGATION ------------------------------------------------------------*/
+
+
 /* Navigation: folder like structure */
 #app-navigation {
-	width: 230px;
+	width: 250px;
 	height: 100%;
 	float: left;
 	-moz-box-sizing: border-box; box-sizing: border-box;
 	background-color: #f8f8f8;
 	border-right: 1px solid #ccc;
 	padding-bottom: 44px;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
 }
 #app-navigation > ul {
 	position: relative;
@@ -166,6 +178,11 @@
 
 
 
+
+
+/* APP-CONTENT ---------------------------------------------------------------*/
+
+
 /* Part where the content will be loaded into */
 #app-content {
 	position: relative;
@@ -176,7 +193,7 @@
 /* settings area */
 #app-settings {
 	position: fixed;
-	width: 229px;
+	width: 249px;
 	bottom: 0;
 	border-top: 1px solid #ccc;
 }

core/css/header.css

@@ -122,10 +122,6 @@
 
 /* NAVIGATION --------------------------------------------------------------- */
 
-#content-wrapper {
-	padding-left: 0;
-}
-
 #navigation {
 	position: fixed;
 	top: 45px;

core/css/icons.css

@@ -90,6 +90,10 @@
 	background-image: url('../img/actions/mail.svg');
 }
 
+.icon-menu {
+	background-image: url('../img/actions/menu.svg');
+}
+
 .icon-more {
 	background-image: url('../img/actions/more.svg');
 }

core/css/mobile.css

@@ -60,4 +60,92 @@
 	box-sizing: border-box;
 }
 
+
+/* APP SIDEBAR TOGGLE and SWIPE ----------------------------------------------*/
+
+/* prevent scrollbar when sidebar is open */
+.snapjs-left #content-wrapper {
+	overflow-x: hidden;
+}
+
+#app-navigation,
+#app-content {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+}
+
+#app-navigation {
+	width: 250px !important;
+}
+
+#app-content {
+	width: 100% !important;
+	left: 0 !important;
+	background-color: #fff;
+	overflow-x: hidden !important;
+}
+
+#app-navigation-toggle {
+	position: fixed;
+	display: inline-block !important;
+	top: 45px;
+	left: 0;
+	width: 44px;
+	height: 44px;
+	z-index: 149;
+	background-color: rgba(255, 255, 255, .7);
+	cursor: pointer;
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
+	filter: alpha(opacity=60);
+	opacity: .6;
+}
+#app-navigation-toggle:hover,
+#app-navigation-toggle:focus {
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
+	filter: alpha(opacity=100);
+	opacity: 1;
+}
+
+/* fix controls bar for apps which don't use the standard */
+#body-user .app-files #controls,
+#user-controls {
+	left: 0 !important;
+	padding-left: 44px !important;
+}
+/* .viewer-mode is when text editor, PDF viewer, etc is open */
+#body-user .app-files.viewer-mode #controls {
+	padding-left: 0 !important;
+}
+.app-files.viewer-mode #app-navigation-toggle {
+	display: none !important;
+}
+
+table.multiselect thead {
+	left: 0 !important;
+}
+
+/* shorten elements for mobile */
+#uploadprogresswrapper {
+	width: 50px;
+}
+
+
+/* fix controls bar jumping when navigation is slid out */
+.snapjs-left #app-navigation-toggle {
+	top: 0;
+}
+.snapjs-left .app-files #controls,
+.snapjs-left #user-controls {
+	top: 0;
+}
+.snapjs-left table.multiselect thead {
+	top: 44px;
+}
+
+
+
+/* end of media query */
 }

core/css/styles.css

@@ -253,6 +253,10 @@ input[type="submit"].enabled {
 	background: #eee;
 	border-bottom: 1px solid #e7e7e7;
 	z-index: 50;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
 }
 #controls .button,
 #controls button,
@@ -272,14 +276,22 @@ input[type="submit"].enabled {
 	display: none;
 }
 
-#content { position:relative; height:100%; width:100%; }
+#content {
+	position: relative;
+	height: 100%;
+	width: 100%;
+}
 #content .hascontrols {
 	position: relative;
 	top: 45px;
 }
 #content-wrapper {
-	position:absolute; height:100%; width:100%; padding-left:80px; padding-top: 45px;
-	-moz-box-sizing:border-box; box-sizing:border-box;
+	position: absolute;
+	height: 100%;
+	width: 100%;
+	padding-top: 45px;
+	-moz-box-sizing:border-box;
+	box-sizing:border-box;
 }
 
 #emptycontent {

core/js/js.js

@@ -1131,6 +1131,60 @@ function initCore() {
 	}
 
 	setupMainMenu();
+
+	// just add snapper for logged in users
+	if($('#body-login, #body-public').length === 0) {
+
+		// App sidebar on mobile
+		var snapper = new Snap({
+			element: document.getElementById('app-content'),
+			disable: 'right',
+			maxPosition: 250
+		});
+		$('#app-content').prepend('<div id="app-navigation-toggle" class="icon-menu" style="display:none;"></div>');
+		$('#app-navigation-toggle').click(function(){
+			if(snapper.state().state == 'left'){
+				snapper.close();
+			} else {
+				snapper.open('left');
+			}
+		});
+		// close sidebar when switching navigation entry
+		var $appNavigation = $('#app-navigation');
+		$appNavigation.delegate('a', 'click', function(event) {
+			var $target = $(event.target);
+			// don't hide navigation when changing settings or adding things
+			if($target.is('.app-navigation-noclose') ||
+				$target.closest('.app-navigation-noclose').length) {
+				return;
+			}
+			if($target.is('.add-new') ||
+				$target.closest('.add-new').length) {
+				return;
+			}
+			if($target.is('#app-settings') ||
+				$target.closest('#app-settings').length) {
+				return;
+			}
+			snapper.close();
+		});
+
+		var toggleSnapperOnSize = function() {
+			if($(window).width() > 768) {
+				snapper.close();
+				snapper.disable();
+			} else {
+				snapper.enable();
+			}
+		};
+
+		$(window).resize(_.debounce(toggleSnapperOnSize, 250));
+
+		// initial call
+		toggleSnapperOnSize();
+
+	}
+
 }
 
 $(document).ready(initCore);