Merge pull request #11573 from nextcloud/gridview-table

Files grid view

4 files changed, 77 insertions, 4 deletions

diff --git a/core/css/css-variables.scss b/core/css/css-variables.scss
index 2f3e8aa648c..a2946672294 100644
--- a/core/css/css-variables.scss
+++ b/core/css/css-variables.scss
@@ -5,6 +5,7 @@
 :root {
 	--color-main-text: $color-main-text;
 	--color-main-background: $color-main-background;
+	--color-main-background-translucent: $color-main-background-translucent;
 
 	--color-background-dark: $color-background-dark;
 	--color-background-darker: $color-background-darker;
diff --git a/core/css/icons.scss b/core/css/icons.scss
index ca2a179d48f..5b96d1223a7 100644
--- a/core/css/icons.scss
+++ b/core/css/icons.scss
@@ -297,6 +297,7 @@ img, object, video, button, textarea, input, select, div[contenteditable='true']
 @include icon-black-white('toggle', 'actions', 1, true);
 @include icon-black-white('toggle-background', 'actions', 1, true);
 @include icon-black-white('toggle-pictures', 'actions', 1, true);
+@include icon-black-white('toggle-filelist', 'actions', 1, true);
 @include icon-black-white('triangle-e', 'actions', 1, true);
 @include icon-black-white('triangle-n', 'actions', 1, true);
 @include icon-black-white('triangle-s', 'actions', 1, true);
diff --git a/core/css/styles.scss b/core/css/styles.scss
index 6f65f00df19..5f68a0d08e0 100644
--- a/core/css/styles.scss
+++ b/core/css/styles.scss
@@ -167,7 +167,7 @@ body {
 	height: 44px;
 	padding: 0;
 	margin: 0;
-	background-color: var(--color-main-background);
+	background-color: var(--color-main-background-translucent);
 	z-index: 60;
 	-webkit-user-select: none;
 	-moz-user-select: none;
@@ -697,12 +697,15 @@ code {
 }
 
 /* ---- DIALOGS ---- */
-
 #oc-dialog-filepicker-content {
+	position: relative;
+
 	.dirtree {
-		width: 96%;
+		width: 100%;
 		flex-wrap: wrap;
 		padding-left: 12px;
+		padding-right: 44px;
+		box-sizing: border-box;
 
 		div:first-child a {
 			background-image: url('../img/places/home.svg?v=1');
@@ -722,6 +725,28 @@ code {
 			}
 		}
 	}
+
+	/* Grid view toggle */
+	#picker-view-toggle {
+		position: absolute;
+		background-color: transparent;
+		border: none;
+		margin: 0;
+		padding: 22px;
+		opacity: .5;
+		right: 0;
+		top: 0;
+
+		&:hover,
+		&:focus {
+			opacity: 1;
+		}
+	}
+	// keyboard focus
+	#picker-showgridview:focus + #picker-view-toggle {
+		opacity: 1;
+	}
+
 	.filelist-container {
 		box-sizing: border-box;
 		display: inline-block;
@@ -771,9 +796,54 @@ code {
 		.filesize {
 			text-align: right;
 		}
+		&.view-grid {
+			$grid-size: 120px;
+			$grid-pad: 10px;
+			$name-height: 20px;
+			display: flex;
+			flex-direction: column;
+
+			tbody {
+				display: grid;
+				grid-template-columns: repeat(auto-fill, $grid-size);
+				justify-content: space-around;
+				row-gap: 15px;
+				margin: 15px 0;
+
+				tr {
+					display: block;
+					position: relative;
+					border-radius: var(--border-radius);
+					padding: $grid-pad;
+					display: flex;
+					flex-direction: column;
+					width: $grid-size - 2 * $grid-pad;
+
+					td {
+						border: none;
+						padding: 0;
+
+						&.filename {
+							padding: #{$grid-size - 2 * $grid-pad} 0 0 0;
+							background-position: center top;
+							background-size: contain;
+							line-height: $name-height;
+							height: $name-height;
+						}
+						&.filesize {
+							line-height: $name-height;
+							text-align: left;
+						}
+						&.date {
+							display: none;
+						}
+					}
+				}
+			}
+		}
 	}
 	.filepicker_element_selected {
-		background-color: lightblue;
+		background-color: var(--color-background-darker);
 	}
 }
 
diff --git a/core/css/variables.scss b/core/css/variables.scss
index 5a25f07bc34..dffd6403471 100644
--- a/core/css/variables.scss
+++ b/core/css/variables.scss
@@ -33,6 +33,7 @@
 // DEPRECATED, please use CSS4 vars
 $color-main-text: #222 !default; // Not #000 for better readability
 $color-main-background: #fff !default;
+$color-main-background-translucent: rgba($color-main-background, .97) !default;
 
 // used for different active/disabled states
 $color-background-dark: nc-darken($color-main-background, 7%) !default;