Merge pull request #10363 from nextcloud/structure-mobile-and-public-fixes

Structure mobile and public fixes

apps/files/js/app.js

@@ -83,7 +83,6 @@
 			// TODO: ideally these should be in a separate class / app (the embedded "all files" app)
 			this.fileList = new OCA.Files.FileList(
 				$('#app-content-files'), {
-					scrollContainer: $('#app-content'),
 					dragOptions: dragOptions,
 					folderDropOptions: folderDropOptions,
 					fileActions: fileActions,

apps/files/js/favoritesplugin.js

@@ -67,7 +67,6 @@
 			return new OCA.Files.FavoritesFileList(
 				$el, {
 					fileActions: fileActions,
-					scrollContainer: $('#app-content')
 				}
 			);
 		},

apps/files/js/recentplugin.js

@@ -67,7 +67,6 @@
 			return new OCA.Files.RecentFileList(
 				$el, {
 					fileActions: fileActions,
-					scrollContainer: $('#app-content')
 				}
 			);
 		},

apps/files/tests/Controller/ViewControllerTest.php

@@ -203,6 +203,49 @@ class ViewControllerTest extends TestCase {
 				'type' => 'link',
 				'classes' => 'pinned',
 			],
+			'shareoverview' => [
+				'id' => 'shareoverview',
+				'appname' => 'files_sharing',
+				'script' => 'list.php',
+				'order' => 18,
+				'name' => \OC::$server->getL10N('files_sharing')->t('Shares'),
+				'classes' => 'collapsible',
+				'sublist' => [
+					[
+					'id' => 'sharingout',
+						'appname' => 'files_sharing',
+						'script' => 'list.php',
+						'order' => 16,
+						'name' => \OC::$server->getL10N('files_sharing')->t('Shared with others'),
+					],
+					[
+					'id' => 'sharingin',
+						'appname' => 'files_sharing',
+						'script' => 'list.php',
+						'order' => 15,
+						'name' => \OC::$server->getL10N('files_sharing')->t('Shared with you'),
+					],
+					[
+						'id' => 'sharinglinks',
+						'appname' => 'files_sharing',
+						'script' => 'list.php',
+						'order' => 17,
+						'name' => \OC::$server->getL10N('files_sharing')->t('Shared by link', []),
+					],
+					[
+						'id' => 'deletedshares',
+						'appname' => 'files_sharing',
+						'script' => 'list.php',
+						'order' => 19,
+						'name' => \OC::$server->getL10N('files_sharing')->t('Deleted shares'),
+					],
+				],
+				'active' => false,
+				'icon' => '',
+				'type' => 'link',
+				'expandedState' => 'show_sharing_menu',
+				'defaultExpandedState' => false,
+			]
 		]);
 
 		$expected = new Http\TemplateResponse(
@@ -240,6 +283,26 @@ class ViewControllerTest extends TestCase {
 						'id' => 'trashbin',
 						'content' => null,
 					],
+					'sharingout' => [
+						'id' => 'sharingout',
+						'content' => null,
+					],
+					'sharingin' => [
+						'id' => 'sharingin',
+						'content' => null,
+					],
+					'sharinglinks' => [
+						'id' => 'sharinglinks',
+						'content' => null,
+					],
+					'deletedshares' => [
+						'id' => 'deletedshares',
+						'content' => null,
+					],
+					'shareoverview' => [
+						'id' => 'shareoverview',
+						'content' => null,
+					],
 				],
 				'hiddenFields' => [],
 			]

apps/files_external/js/app.js

@@ -29,7 +29,6 @@ OCA.External.App = {
 		this.fileList = new OCA.External.FileList(
 			$el,
 			{
-				scrollContainer: $('#app-content'),
 				fileActions: this._createFileActions()
 			}
 		);

apps/files_sharing/js/app.js

@@ -32,7 +32,6 @@ OCA.Sharing.App = {
 			$el,
 			{
 				id: 'shares.self',
-				scrollContainer: $('#app-content'),
 				sharedWithUser: true,
 				fileActions: this._createFileActions(),
 				config: OCA.Files.App.getFilesConfig()
@@ -55,7 +54,6 @@ OCA.Sharing.App = {
 			$el,
 			{
 				id: 'shares.others',
-				scrollContainer: $('#app-content'),
 				sharedWithUser: false,
 				fileActions: this._createFileActions(),
 				config: OCA.Files.App.getFilesConfig()
@@ -78,7 +76,6 @@ OCA.Sharing.App = {
 			$el,
 			{
 				id: 'shares.link',
-				scrollContainer: $('#app-content'),
 				linksOnly: true,
 				fileActions: this._createFileActions(),
 				config: OCA.Files.App.getFilesConfig()
@@ -101,7 +98,6 @@ OCA.Sharing.App = {
 			$el,
 			{
 				id: 'shares.deleted',
-				scrollContainer: $('#app-content'),
 				showDeleted: true,
 				sharedWithUser: true,
 				fileActions: this._restoreShareAction(),
@@ -125,7 +121,6 @@ OCA.Sharing.App = {
 			$el,
 			{
 				id: 'shares.overview',
-				scrollContainer: $('#app-content'),
 				config: OCA.Files.App.getFilesConfig(),
 				isOverview: true
 			}

apps/files_sharing/js/public.js

@@ -67,7 +67,6 @@ OCA.Sharing.PublicApp = {
 				$el,
 				{
 					id: 'files.public',
-					scrollContainer: $('#app-content'),
 					dragOptions: dragOptions,
 					folderDropOptions: folderDropOptions,
 					fileActions: fileActions,

apps/files_sharing/templates/public.php

@@ -2,7 +2,7 @@
 /** @var $l \OCP\IL10N */
 /** @var $_ array */
 ?>
-
+<div id="app-content">
 <?php if ($_['previewSupported']): /* This enables preview images for links (e.g. on Facebook, Google+, ...)*/?>
 	<link rel="image_src" href="<?php p($_['previewImage']); ?>" />
 <?php endif; ?>
@@ -90,3 +90,4 @@ $maxUploadFilesize = min($upload_max_filesize, $post_max_size);
 			   data-url="<?php p(\OC::$server->getURLGenerator()->linkTo('files', 'ajax/upload.php')); ?>" />
 	</div>
 <?php endif; ?>
+</div>

apps/files_trashbin/js/app.js

@@ -26,7 +26,6 @@ OCA.Trashbin.App = {
 		var urlParams = OC.Util.History.parseUrlQuery();
 		this.fileList = new OCA.Trashbin.FileList(
 			$('#app-content-trashbin'), {
-				scrollContainer: $('#app-content'),
 				fileActions: this._createFileActions(),
 				detailsViewEnabled: false,
 				scrollTo: urlParams.scrollto,

apps/systemtags/js/app.js

@@ -27,7 +27,6 @@
 				$el,
 				{
 					id: 'systemtags',
-					scrollContainer: $('#app-content'),
 					fileActions: this._createFileActions(),
 					config: OCA.Files.App.getFilesConfig()
 				}

core/css/apps.scss

@@ -74,13 +74,15 @@ kbd {
 /* Navigation: folder like structure */
 #app-navigation {
 	width: $navigation-width;
-	position: sticky;
+	position: fixed;
 	top: $header-height;
 	left: 0;
-	z-index: 1500;
+	z-index: 500;
 	overflow-y: auto;
 	overflow-x: hidden;
-	height: calc(100vh - #{$header-height});
+	// Do not use vh because of mobile headers
+	// are included in the calculation
+	height: calc(100% - #{$header-height});
 	box-sizing: border-box;
 	background-color: var(--color-main-background);
 	-webkit-user-select: none;
@@ -170,6 +172,7 @@ kbd {
 				> ul {
 					opacity: 0;
 					max-height: 0;
+					overflow-y: hidden;
 					/* bezier override the hide/slow effect due to the 2000 max-height */
 					transition: max-height 1000ms cubic-bezier(0, 1, 0, 1),
 								opacity 250ms ease-in-out;
@@ -523,7 +526,7 @@ kbd {
 	.app-navigation-entry-deleted {
 		display: inline-flex;
 		padding-left: 44px;
-		transform: translateX(250px);
+		transform: translateX(#{$navigation-width});
 		.app-navigation-entry-deleted-description {
 			position: relative;
 			white-space: nowrap;
@@ -580,12 +583,19 @@ kbd {
 
 
 /* CONTENT  --------------------------------------------------------- */
+#content-wrapper {
+	// everything not related to content but needs to be on the window
+	// goes here (popups, tooltips...)
+	position: relative;
+	min-height: 100%;
+	display: unset;
+}
 #content {
-	/* header height */
-	padding-top: $header-height;
 	box-sizing: border-box;
 	position: relative;
 	display: flex;
+	margin-top: $header-height;
+	min-height: 100%;
 }
 
 /* APP-CONTENT AND WRAPPER ------------------------------------------ */
@@ -594,9 +604,13 @@ kbd {
 	z-index: 1000;
 	background-color: var(--color-main-background);
 	position: relative;
-	min-height: calc(100vh - #{$header-height});
+	min-height: 100%;
 	flex-basis: 100vw;
 	overflow: auto;
+	/* margin if navigation element is here */
+	#app-navigation  + & {
+		margin-left: $navigation-width;
+	}
 	/* no top border for first settings item */
 	> .section:first-child {
 		border-top: none;

core/css/header.scss

@@ -46,8 +46,7 @@
 	display: inline-flex;
 	position: fixed;
 	top: 0;
-	left: 0;
-	right: 0;
+	width: 100%;
 	z-index: 2000;
 	height: $header-height;
 	background-color: var(--color-primary);

core/css/ie.scss

@@ -1,5 +1,4 @@
 
-#app-navigation,
 #app-sidebar {
 	position: fixed !important;
 }

core/css/mobile.scss

@@ -20,7 +20,7 @@
 
 	/* APP SIDEBAR TOGGLE and SWIPE ----------------------------------------------*/
 	#app-navigation {
-		transform: translateX(-250px);
+		transform: translateX(-#{$navigation-width});
 	}
 	.snapjs-left {
 		#app-navigation {
@@ -28,8 +28,8 @@
 		}
 	}
 
-	#app-content {
-		margin-left: -$navigation-width;
+	#app-navigation + #app-content {
+		margin-left: 0;
 	}
 
 

core/css/public.scss

@@ -44,4 +44,19 @@
 	.ie #content {
 		display: inline-block;
 	}
+
+
+	p.info {
+		margin: 20px auto;
+		text-shadow: 0 0 2px rgba(0, 0, 0, .4);
+		-moz-user-select: none;
+		-ms-user-select: none;
+		user-select: none;
+	}
+	p.info, form fieldset legend,
+	#datadirContent label,
+	form fieldset .warning-info,
+	form input[type='checkbox']+label {
+		text-align: center;
+	}
 }

core/css/styles.scss

@@ -89,7 +89,6 @@ body {
 	line-height: 1.6em;
 	font-family: var(--font-face);
 	color: var(--color-main-text);
-	height: auto;
 }
 
 .two-factor-header {

core/js/js.js

@@ -1614,7 +1614,7 @@ function initCore() {
 		var snapper = new Snap({
 			element: document.getElementById('app-content'),
 			disable: 'right',
-			maxPosition: 250,
+			maxPosition: 300, // $navigation-width
 			minDragDistance: 100
 		});
 		$('#app-content').prepend('<div id="app-navigation-toggle" class="icon-menu" style="display:none;"></div>');

core/templates/layout.base.php

@@ -18,6 +18,10 @@
 	</head>
 	<body id="body-public">
 		<?php include 'layout.noscript.warning.php'; ?>
-		<?php print_unescaped($_['content']); ?>
+		<div id="content-wrapper">
+			<div id="content" class="app-public" role="main">
+				<?php print_unescaped($_['content']); ?>
+			</div>
+		</div>
 	</body>
 </html>

core/templates/layout.public.php

@@ -70,9 +70,11 @@
 		</div>
 		<?php } ?>
 	</header>
-	<div id="content" class="app-<?php p($_['appid']) ?>" role="main">
-		<?php print_unescaped($_['content']); ?>
-	</div>
+	<div id="content-wrapper">
+		<div id="content" class="app-<?php p($_['appid']) ?>" role="main">
+			<?php print_unescaped($_['content']); ?>
+		</div>
+	</div
 	<?php if($template->getFooterVisible()) { ?>
 	<footer>
 		<p class="info"><?php print_unescaped($theme->getLongFooter()); ?></p>

tests/acceptance/features/bootstrap/SettingsMenuContext.php

@@ -31,8 +31,17 @@ class SettingsMenuContext implements Context, ActorAwareInterface {
 	/**
 	 * @return Locator
 	 */
-	public static function settingsMenuButton() {
+	public static function settingsSectionInHeader() {
 		return Locator::forThe()->xpath("//*[@id = 'header']//*[@id = 'settings']")->
+				describedAs("Settings menu section in the header");
+	}
+
+	/**
+	 * @return Locator
+	 */
+	public static function settingsMenuButton() {
+		return Locator::forThe()->id("expand")->
+				descendantOf(self::settingsSectionInHeader())->
 				describedAs("Settings menu button");
 	}
 
@@ -40,7 +49,8 @@ class SettingsMenuContext implements Context, ActorAwareInterface {
 	 * @return Locator
 	 */
 	public static function settingsMenu() {
-		return Locator::forThe()->id("expanddiv")->descendantOf(self::settingsMenuButton())->
+		return Locator::forThe()->id("expanddiv")->
+				descendantOf(self::settingsSectionInHeader())->
 				describedAs("Settings menu");
 	}