Filepicker grid

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

1 files changed, 46 insertions, 2 deletions

diff --git a/core/css/styles.scss b/core/css/styles.scss
index 612fd779fcc..b5968015d6f 100644
--- a/core/css/styles.scss
+++ b/core/css/styles.scss
@@ -697,7 +697,6 @@ code {
 }
 
 /* ---- DIALOGS ---- */
-
 #oc-dialog-filepicker-content {
 	.dirtree {
 		width: 96%;
@@ -771,9 +770,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);
 	}
 }