First basic grid view layout with toggle

Signed-off-by: Jan-Christoph Borchardt <[email protected]>
nextcloud · Sep 4, 2018 · f62701e · f62701e
1 parent 7c16b32
commit f62701e
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 1 deletion.
diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss
@@ -52,12 +52,73 @@
 	min-width: 500px;
 }
 
+#filestable #fileList {
+	display: flex;
+	flex-direction: column;
+}
+
 #filestable .list-element {
 	height: 51px;
 	display: flex;
 	flex-direction: row;
 }
 
+#filestable.view-grid {
+	#fileList {
+		display: flex;
+		flex-direction: row;
+		flex-wrap: wrap;
+
+		.list-element {
+			position: relative;
+			display: inline-block;
+			height: 200px;
+			width: 200px;
+			border-bottom: none;
+
+			.filename a.name {
+				flex-direction: column;
+				height: 100%;
+
+				.thumbnail-wrapper {
+					width: 100%;
+					max-width: 100%;
+					height: 150px;
+
+					.thumbnail {
+						width: 150px;
+						height: 150px;
+						background-size: 150px;
+						border-radius: 10px;
+					}
+				}
+
+				.nametext {
+					width: auto;
+					max-width: 100%;
+					margin: auto;
+				}
+			}
+
+			.selection {
+				position: absolute;
+				top: 0;
+				left: 0;
+				z-index: 100;
+			}
+
+			.fileactions {
+
+			}
+
+			.filesize,
+			.date {
+				display: none;
+			}
+		}
+	}
+}
+
 /* fit app list view heights */
 .app-files #app-content>.viewcontainer {
 	min-height: 0%;

diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js
@@ -332,6 +332,9 @@
 
 			this.$el.find('.list-header .columntitle').click(_.bind(this._onClickHeader, this));
 
+			// Toggle for grid view
+			$('#view-button').on('click', this._onGridToggle);
+
 			this._onResize = _.debounce(_.bind(this._onResize, this), 250);
 			$('#app-content').on('appresized', this._onResize);
 			$(window).resize(this._onResize);
@@ -584,6 +587,13 @@
 			this.$table.find('>thead').width($('#app-content').width() - OC.Util.getScrollBarWidth());
 		},
 
+		/**
+		 * Event handler for grid view toggle
+		 */
+		_onGridToggle: function() {
+			$('.list-container').toggleClass('view-grid');
+		},
+
 		/**
 		 * Event handler when leaving previously hidden state
 		 */

diff --git a/apps/files/templates/list.php b/apps/files/templates/list.php
@@ -24,6 +24,7 @@
 	<?php endif;?>
 	<input type="hidden" class="max_human_file_size"
 		   value="(max <?php isset($_['uploadMaxHumanFilesize']) ? p($_['uploadMaxHumanFilesize']) : ''; ?>)">
+	<button id="view-button" class="button view-switcher icon-toggle-pictures"><span class="hidden-visually"><?php p($l->t('Toggle grid view'))?></button>
 </div>
 
 <div id="emptycontent" class="hidden">
@@ -38,7 +39,7 @@
 	<p></p>
 </div>
 
-<div id="filestable" class="list-container" data-allow-public-upload="<?php p($_['publicUploadEnabled'])?>" data-preview-x="32" data-preview-y="32">
+<div id="filestable" class="view-grid list-container" data-allow-public-upload="<?php p($_['publicUploadEnabled'])?>" data-preview-x="32" data-preview-y="32">
 	<div class="list-header">
 		<div>
 			<div id="headerSelection" class="hidden list-column column-selection">