Design structure fixes

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

apps/files/css/detailsView.scss

@@ -7,12 +7,6 @@
 	clear: both;
 }
 
-#app-sidebar .mainFileInfoView {
-	margin-right: 20px; /* accommodate for close icon */
-	float:left;
-	display:block;
-	width: 100%;
-}
 
 #app-sidebar .mainFileInfoView .icon {
 	display: inline-block;

core/css/apps.scss

@@ -74,6 +74,13 @@ kbd {
 /* Navigation: folder like structure */
 #app-navigation {
 	width: $navigation-width;
+	position: sticky;
+	top: $header-height;
+	left: 0;
+	z-index: 1500;
+	overflow-y: auto;
+	overflow-x: hidden;
+	height: calc(100vh - #{$header-height});
 	box-sizing: border-box;
 	background-color: var(--color-main-background);
 	-webkit-user-select: none;
@@ -320,9 +327,6 @@ kbd {
 	&.hidden {
 		display: none;
 	}
-	&.without-app-settings {
-		padding-bottom: 0;
-	}
 
 	/**
 	 * Button styling for menu, edit and undo
@@ -581,12 +585,7 @@ kbd {
 	padding-top: $header-height;
 	box-sizing: border-box;
 	position: relative;
-	overflow-x: hidden;
 	display: flex;
-	/* trick: scroll #app-content and not the body
-	 * to avoid double scrollbar with sidebar
-	 */
-	max-height: 100vh;
 }
 
 /* APP-CONTENT AND WRAPPER ------------------------------------------ */
@@ -637,17 +636,19 @@ kbd {
 	min-width: $sidebar-min-width;
 	max-width: $sidebar-max-width;
 	display: block;
-	position: relative;
+	position: sticky;
+	top: $header-height;
+	right:0;
+	overflow-y: auto;
+	overflow-x: hidden;
+	z-index: 1500;
+	height: calc(100vh - #{$header-height});
 	background: var(--color-main-background);
 	border-left: 1px solid var(--color-border);
-	overflow-x: hidden;
-	overflow-y: auto;
 	flex-shrink: 0;
-	transition: 300ms width ease-in-out,
+	// no animations possible, use OC.Apps.showAppSidebar
-				300ms min-width ease-in-out;
 	&.disappear {
-		width: 0;
+		display: none;
-		min-width: 0;
 	}
 }
 
@@ -880,6 +881,11 @@ $popovericon-size: 16px;
 	li {
 		display: flex;
 		flex: 0 0 auto;
+
+		&.hidden {
+			display: none;
+		}
+
 		> button,
 		> a,
 		> .menuitem {
@@ -895,6 +901,7 @@ $popovericon-size: 16px;
 			box-shadow: none;
 			width: 100%;
 			color: var(--color-main-text);
+			white-space: nowrap;
 			/* Override the app-navigation li opacity */
 			opacity: .7 !important;
 			span[class^='icon-'],
@@ -943,6 +950,7 @@ $popovericon-size: 16px;
 				width: 150px;
 				line-height: 1.6em;
 				padding: 8px 0;
+				white-space: normal;
 			}
 			> select {
 				margin: 0;
@@ -963,7 +971,6 @@ $popovericon-size: 16px;
 			> input.checkbox + label {
 				padding: 0 !important;
 				width: 100%;
-				white-space: nowrap;
 			}
 			> input.checkbox + label::before {
 				margin: -2px 13px 0;
@@ -999,11 +1006,6 @@ $popovericon-size: 16px;
 				}
 			}
 		}
-
-		&.hidden {
-			display: none;
-		}
-
 		/* css hack, only first not hidden*/
 		&:not(.hidden):not([style*='display:none']) {
 			&:first-of-type {

core/css/ie.scss

@@ -0,0 +1,11 @@
+
+#app-navigation,
+#app-sidebar {
+	position: fixed !important;
+}
+#app-content {
+	width: $navigation-width !important;
+}
+#app-sidebar.disappear {
+	right: -$sidebar-max-width !important;
+}

core/js/apps.js

@@ -27,8 +27,9 @@
 	 */
 	exports.Apps.showAppSidebar = function($el) {
 		var $appSidebar = $el || $('#app-sidebar');
-		$appSidebar.removeClass('disappear');
+		$appSidebar.removeClass('disappear')
-		$('#content').addClass('with-app-sidebar').trigger(new $.Event('appresized'));
+			.show('slide', { direction: 'right' }, 300);
+		$('#app-content').trigger(new $.Event('appresized'));
 	};
 
 	/**
@@ -39,8 +40,11 @@
 	 */
 	exports.Apps.hideAppSidebar = function($el) {
 		var $appSidebar = $el || $('#app-sidebar');
-		$appSidebar.addClass('disappear');
+		$appSidebar.hide('slide', { direction: 'right' }, 300,
-		$('#content').removeClass('with-app-sidebar').trigger(new $.Event('appresized'));
+			function() {
+				$appSidebar.addClass('disappear');
+			});
+		$('#app-content').trigger(new $.Event('appresized'));
 	};
 
 	/**

lib/private/TemplateLayout.php

@@ -42,6 +42,7 @@ use OC\Template\JSCombiner;
 use OC\Template\JSConfigHelper;
 use OC\Template\SCSSCacher;
 use OCP\Defaults;
+use OC\AppFramework\Http\Request;
 
 class TemplateLayout extends \OC_Template {
 
@@ -61,6 +62,9 @@ class TemplateLayout extends \OC_Template {
 		// yes - should be injected ....
 		$this->config = \OC::$server->getConfig();
 
+		if(\OCP\Util::isIE()) {
+			\OC_Util::addStyle('ie');
+		}
 
 		// Decide which page we show
 		if($renderAs == 'user') {

lib/private/legacy/util.php

@@ -64,6 +64,7 @@ use OCP\IConfig;
 use OCP\IGroupManager;
 use OCP\ILogger;
 use OCP\IUser;
+use OC\AppFramework\Http\Request;
 
 class OC_Util {
 	public static $scripts = array();
@@ -1528,4 +1529,13 @@ class OC_Util {
 		}
 	}
 
+	/**
+	 * is this Internet explorer ?
+	 *
+	 * @return boolean
+	 */
+	public static function isIe() {
+		return preg_match(Request::USER_AGENT_IE, $_SERVER['HTTP_USER_AGENT']) === 1;
+	}
+
 }

lib/public/Util.php

@@ -558,4 +558,13 @@ class Util {
 		}		
 		return self::$needUpgradeCache;
 	}
+
+	/**
+	 * is this Internet explorer ?
+	 *
+	 * @return boolean
+	 */
+	public static function isIe() {
+		return \OC_Util::isIe();
+	}
 }