⚗️ Proof of concept: Redesign app-content

apps/comments/tests/js/filespluginSpec.js

@@ -26,7 +26,7 @@ describe('OCA.Comments.FilesPlugin tests', function() {
 	var testFiles;
 
 	beforeEach(function() {
-		var $content = $('<div id="content"></div>');
+		var $content = $('<div id="app-content"></div>');
 		$('#testArea').append($content);
 		// dummy file list
 		var $div = $(
@@ -36,7 +36,7 @@ describe('OCA.Comments.FilesPlugin tests', function() {
 			'<tbody class="files-fileList"></tbody>' +
 			'</table>' +
 			'</div>');
-		$('#content').append($div);
+		$('#app-content').append($div);
 
 		fileList = new OCA.Files.FileList($div);
 		OCA.Comments.FilesPlugin.attach(fileList);

apps/dashboard/src/DashboardApp.vue

@@ -1,5 +1,5 @@
 <template>
-	<div id="app-dashboard" :style="backgroundStyle">
+	<div id="app-dashboard">
 		<h2>{{ greeting.text }}</h2>
 		<ul class="statuses">
 			<div v-for="status in sortedRegisteredStatus"
@@ -172,7 +172,7 @@ export default {
 			}
 
 			return {
-				backgroundImage: this.background === 'default' ? 'var(--image-main-background)' : `url(${this.backgroundImage})`,
+				backgroundImage: this.background === 'default' ? 'var(--image-main-background)' : `url('${this.backgroundImage}')`,
 			}
 		},
 
@@ -365,10 +365,18 @@ export default {
 			if (isBackgroundBright) {
 				document.querySelector('#header').style.setProperty('--primary-invert-if-bright', 'invert(100%)')
 				document.querySelector('#header').style.setProperty('--color-primary-text', '#000000')
+				// document.body.removeAttribute('data-theme-dark')
+				// document.body.setAttribute('data-theme-light', 'true')
 			} else {
-				document.querySelector('#header').style.removeProperty('--primary-invert-if-bright')
-				document.querySelector('#header').style.removeProperty('--color-primary-text')
+				document.querySelector('#header').style.setProperty('--primary-invert-if-bright', 'no')
+				document.querySelector('#header').style.setProperty('--color-primary-text', '#ffffff')
+				// document.body.removeAttribute('data-theme-light')
+				// document.body.setAttribute('data-theme-dark', 'true')
 			}
+
+			document.documentElement.style.setProperty('--image-main-background', this.backgroundStyle.backgroundImage)
+			document.querySelector('#header').style.setProperty('--image-main-background', this.backgroundStyle.backgroundImage)
+			document.querySelector('body').style.setProperty('--image-main-background', this.backgroundStyle.backgroundImage)
 		},
 		updateSkipLink() {
 			// Make sure "Skip to main content" link points to the app content
@@ -426,7 +434,6 @@ export default {
 	background-position: center center;
 	background-repeat: no-repeat;
 	background-attachment: fixed;
-	background-color: var(--color-primary);
 
 	> h2 {
 		color: var(--color-primary-text);
@@ -675,3 +682,21 @@ export default {
 	}
 }
 </style>
+<style>
+html, body {
+	overflow: auto;
+	position: static;
+	height: auto;
+	background-attachment: fixed;
+}
+
+#body-user #header {
+	position: fixed;
+}
+
+#content {
+	height: auto;
+	overflow: auto;
+	position: static !important;;
+}
+</style>

apps/files/css/files.scss

@@ -68,8 +68,8 @@
 	thead {
 		position: -webkit-sticky;
 		position: sticky;
-		// header + breadcrumbs
-		top: variables.$header-height;
+		// breadcrumbs
+		top: 44px;
 		// under breadcrumbs, over file list
 		z-index: 60;
 		display: block;
@@ -307,12 +307,6 @@ table th.column-last, table td.column-last {
 	position: relative;
 	/* this can not be just width, both need to be set … table styling */
 	min-width: 130px;
-	max-width: 130px;
-}
-
-#app-content-files thead,
-#app-content-trashbin thead {
-	top: 94px;
 }
 
 #app-content-recent,
@@ -323,7 +317,9 @@ table th.column-last, table td.column-last {
 #app-content-sharinglinks,
 #app-content-deletedshares,
 #app-content-pendingshares {
-	margin-top: 22px;
+	thead {
+		top: 0;
+	}
 }
 
 table.multiselect thead th {
@@ -814,6 +810,49 @@ table.dragshadow td.size {
 	}
 }
 
+
+.files-controls {
+	box-sizing: border-box;
+	position: -webkit-sticky;
+	position: sticky;
+	height: 54px;
+	padding: 0;
+	margin: 0;
+	background-color: var(--color-main-background-translucent);
+	z-index: 62; /* must be above the filelist sticky header and texteditor menubar */
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+	display: flex;
+	top: 0;
+
+	.actions {
+		> div,
+		& {
+			> .button, button {
+				box-sizing: border-box;
+				display: inline-block;
+				display: flex;
+				height: 44px;
+				width: 44px;
+				padding: 9px; // width - border - icon width = 18px
+				align-items: center;
+				justify-content: center;
+			}
+			.button.hidden {
+				display: none;
+			}
+		}
+	}
+}
+
+/* position controls for apps with app-navigation */
+
+.viewer-mode #app-navigation + #app-content .files-controls {
+	left: 0;
+}
+
 .files-filestable .filename .action .icon,
 .files-filestable .selectedActions a .icon,
 .files-filestable .filename .favorite-mark .icon,
@@ -1197,7 +1236,8 @@ table.dragshadow td.size {
 	padding: 22px;
 	opacity: .5;
 	position: fixed;
-	right: 0;
+	right: calc(var(--default-grid-baseline) * 4);
+	top: calc(var(--header-height) + var(--default-grid-baseline));
 	z-index: 100;
 
 	&:hover,