Merge pull request #1777 from adrium/feat-gallery

Add gallery view mode

frontend/src/css/listing.css

@@ -110,6 +110,41 @@
   width: calc(100% - 5vw);
 }
 
+#listing.mosaic.gallery .item div:first-of-type {
+  width: 100%;
+  height: 12em;
+}
+
+#listing.mosaic.gallery .item div:last-of-type {
+  position: absolute;
+  bottom: 0.5em;
+  padding: 1em;
+  width: calc(100% - 1em);
+  text-align: center;
+}
+
+#listing.mosaic.gallery .item[data-type=image] div:last-of-type {
+  color: white;
+  background: linear-gradient(#0000, #0009);
+}
+
+#listing.mosaic.gallery .item i {
+    width: 100%;
+    margin-right: 0;
+    font-size: 8em;
+    text-align: center;
+}
+
+#listing.mosaic.gallery .item img {
+  width: 100%;
+  height: 100%;
+}
+
+#listing.gallery .size,
+#listing.gallery .modified {
+  display: none;
+}
+
 #listing.list {
   flex-direction: column;
   width: 100%;

frontend/src/views/files/Listing.vue

@@ -53,7 +53,7 @@
           @action="$store.commit('toggleShell')"
         />
         <action
-          :icon="user.viewMode === 'mosaic' ? 'view_list' : 'view_module'"
+          :icon="viewIcon"
           :label="$t('buttons.switchView')"
           @action="switchView"
         />
@@ -283,6 +283,7 @@ export default {
   data: function () {
     return {
       showLimit: 50,
+      columnWidth: 280,
       dragCounter: 0,
       width: window.innerWidth,
       itemWeight: 0,
@@ -356,6 +357,14 @@ export default {
 
       return "arrow_upward";
     },
+    viewIcon() {
+      const icons = {
+        list: "view_module",
+        mosaic: "grid_view",
+        "mosaic gallery": "view_list",
+      };
+      return icons[this.user.viewMode];
+    },
     headerButtons() {
       return {
         upload: this.user.perm.create,
@@ -591,7 +600,7 @@ export default {
     colunmsResize() {
       // Update the columns size based on the window width.
       let columns = Math.floor(
-        document.querySelector("main").offsetWidth / 300
+        document.querySelector("main").offsetWidth / this.columnWidth
       );
       let items = css(["#listing.mosaic .item", ".mosaic#listing .item"]);
       if (columns === 0) columns = 1;
@@ -807,9 +816,15 @@ export default {
     switchView: async function () {
       this.$store.commit("closeHovers");
 
+      const modes = {
+        list: "mosaic",
+        mosaic: "mosaic gallery",
+        "mosaic gallery": "list",
+      };
+
       const data = {
         id: this.user.id,
-        viewMode: this.user.viewMode === "mosaic" ? "list" : "mosaic",
+        viewMode: modes[this.user.viewMode] || "list",
       };
 
       users.update(data, ["viewMode"]).catch(this.$showError);

http/preview.go

@@ -129,8 +129,8 @@ func createPreview(imgSvc ImgService, fileCache FileCache,
 		height = 1080
 		options = append(options, img.WithMode(img.ResizeModeFit), img.WithQuality(img.QualityMedium))
 	case previewSize == PreviewSizeThumb:
-		width = 128
+		width = 256
-		height = 128
+		height = 256
 		options = append(options, img.WithMode(img.ResizeModeFill), img.WithQuality(img.QualityLow), img.WithFormat(img.FormatJpeg))
 	default:
 		return nil, img.ErrUnsupportedFormat