feat(system-tags): show inline in files

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

1 files changed, 40 insertions, 0 deletions

diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss
index 8205c63fc2c..67c8adff897 100644
--- a/apps/files/css/files.scss
+++ b/apps/files/css/files.scss
@@ -436,6 +436,41 @@ table {
 			z-index: 10;
 			padding: 0 20px 0 0;
 		}
+
+		/* System tags */
+		.system-tags {
+			--min-size: 32px;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			flex: 1 1 100%;
+			min-width: calc(var(--min-size) * 2);
+			max-width: 300px;
+
+			.system-tags__tag {
+				padding: 5px 10px;
+				border: 1px solid;
+				border-radius: var(--border-radius-pill);
+				border-color: var(--color-border);
+				color: var(--color-text-maxcontrast);
+				height: var(--min-size);
+				white-space: nowrap;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				line-height: 22px; // min-size - 2 * 5px padding
+				text-align: center;
+
+				&--more {
+					overflow: visible;
+					text-overflow: initial;
+				}
+
+				// Proper spacing if multiple shown
+				& + .system-tags__tag {
+					margin-left: 5px;
+				}
+			}
+		}
 	}
 }
 
@@ -1111,6 +1146,11 @@ table.dragshadow td.size {
 						}
 					}
 
+					/* System tags */
+					.system-tags {
+						display: none;
+					}
+
 					.fileactions {
 						height: initial;
 						margin-top: $grid-size - $grid-pad;