Add symlink icon to grid and details views

cockpit-project · Jun 7, 2024 · a175997 · a175997
1 parent ffb10be
commit a175997
Showing 1 changed file with 34 additions and 0 deletions.
diff --git a/src/files-card-body.scss b/src/files-card-body.scss
@@ -83,6 +83,40 @@
         }
     }
 
+    .symlink {
+        --symlink-size: 16px;
+
+        a {
+            position: relative;
+
+            &::after {
+                aspect-ratio: 1;
+                // Reuse default icon color
+                background-color: var(--color-icon);
+                block-size: var(--symlink-size);
+                content: '';
+                mask-repeat: no-repeat;
+                mask-position: center;
+                mask-image: url('data:image/svg+xml,%3Csvg title="symlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"%3E%3Cpath d="M81 81a248 248 0 1 1 350 350A248 248 0 0 1 81 81zm81 122 104-3-129 130c-9 9-9 24 0 33l12 12c9 9 24 9 33 0l130-129-3 104c0 14 11 25 24 25h16c13 0 24-11 24-24V163c0-13-11-24-24-24H161c-13 0-24 11-24 24v16c0 13 11 24 25 24z"/%3E%3C/svg%3E');
+            }
+        }
+    }
+
+    &.view-grid .symlink a::after {
+        --symlink-size: 22px;
+        inset-block-start: var(--pf-v5-global--spacer--sm);
+        inset-inline-end: var(--pf-v5-global--spacer--md);
+        position: absolute;
+    }
+
+    &.view-details .symlink a::after {
+        display: inline-block;
+        inset-block-start: -1px;
+        margin-inline-start: var(--pf-v5-global--spacer--sm);
+        position: relative;
+        vertical-align: middle;
+    }
+
     tr.folder {
         .item-name a::before {
             background-color: var(--color-folder);