Location table attribute for assets

Resolves #11450

Author: brandonkelly

CHANGELOG-WIP.md

@@ -36,6 +36,7 @@
 - Live Preview now always shows a “Refresh” button, regardless of whether the preview target has auto-refresh enabled. ([#11160](https://github.com/craftcms/cms/discussions/11160)) 
 - Entry Type condition rules now allow multiple selections. ([#11124](https://github.com/craftcms/cms/pull/11124))
 - Element index filters now only show condition rules for the custom fields that are used by the field layouts in the selected source, if a native source is selected. ([#11187](https://github.com/craftcms/cms/discussions/11187))
+- Asset indexes now have a “Location” table attribute option. ([#11450](https://github.com/craftcms/cms/discussions/11450))
 - It’s now possible to sort entries by their section and type. ([#9192](https://github.com/craftcms/cms/discussions/9192), [#11335](https://github.com/craftcms/cms/discussions/11335))
 - It’s now possible to sort assets by their file kind.
 - Sites’ Language settings now display the locale IDs as option hints, rather than the languages’ native names. ([#11195](https://github.com/craftcms/cms/discussions/11195))

packages/craftcms-sass/_mixins.scss

@@ -193,14 +193,14 @@ $radioSize: 16px;
   opacity: var(--icon-opacity);
 }
 
-@mixin angle($dir: down, $color: currentColor) {
+@mixin angle($dir: down, $color: currentColor, $width: 2px) {
   display: block;
   content: '';
   font-size: 0;
   width: 7px;
   height: 7px;
   border: solid $color;
-  border-width: 0 2px 2px 0;
+  border-width: 0 $width $width 0;
   opacity: 0.8;
 
   @if $dir == up {

src/elements/Asset.php

@@ -490,6 +490,7 @@ protected static function defineTableAttributes(): array
             'width' => ['label' => Craft::t('app', 'Image Width')],
             'height' => ['label' => Craft::t('app', 'Image Height')],
             'alt' => ['label' => Craft::t('app', 'Alternative Text')],
+            'location' => ['label' => Craft::t('app', 'Location')],
             'link' => ['label' => Craft::t('app', 'Link'), 'icon' => 'world'],
             'id' => ['label' => Craft::t('app', 'ID')],
             'uid' => ['label' => Craft::t('app', 'UID')],
@@ -1992,6 +1993,9 @@ protected function tableAttributeHtml(string $attribute): string
             case 'height':
                 $size = $this->$attribute;
                 return ($size ? $size . 'px' : '');
+
+            case 'location':
+                return $this->locationHtml();
         }
 
         return parent::tableAttributeHtml($attribute);
@@ -2176,16 +2180,8 @@ protected function metaFieldsHtml(bool $static): string
      */
     protected function metadata(): array
     {
-        $volume = $this->getVolume();
-
         return [
-            Craft::t('app', 'Location') => function() use ($volume) {
-                $loc = [Craft::t('site', $volume->name)];
-                if ($this->folderPath) {
-                    array_push($loc, ...ArrayHelper::filterEmptyStringsFromArray(explode('/', $this->folderPath)));
-                }
-                return implode(' → ', $loc);
-            },
+            Craft::t('app', 'Location') => fn() => $this->locationHtml(),
             Craft::t('app', 'File size') => function() {
                 $size = $this->getFormattedSize(0);
                 if (!$size) {
@@ -2213,6 +2209,27 @@ protected function metadata(): array
         ];
     }
 
+    private function locationHtml(): string
+    {
+        $volume = $this->getVolume();
+        $uri = "assets/$volume->handle";
+        $items = [
+            Html::a(Craft::t('site', $volume->name), UrlHelper::cpUrl($uri)),
+        ];
+        if ($this->folderPath) {
+            $subfolders = ArrayHelper::filterEmptyStringsFromArray(explode('/', $this->folderPath));
+            foreach ($subfolders as $subfolder) {
+                $uri .= "/$subfolder";
+                $items[] = Html::a($subfolder, UrlHelper::cpUrl($uri));
+            }
+        }
+
+        return Html::ul($items, [
+            'encode' => false,
+            'class' => 'path',
+        ]);
+    }
+
     /**
      * @inheritdoc
      * @since 3.3.0

src/web/assets/cp/dist/css/cp.css

@@ -588,7 +588,7 @@ $systemInfoHoverBgColor: darken($grey800, 10%);
     }
 
     &:after {
-      margin: 0 var(--s);
+      @include margin(0, 8px, 0, 7px);
       @include angle(right, var(--medium-hairline-color));
     }
   }

src/web/assets/cp/dist/css/cp.css.map

@@ -1161,6 +1161,23 @@ td.right {
   @include margin-right(10px);
 }
 
+ul.path {
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  flex-wrap: wrap;
+
+  li {
+    display: inline-flex;
+    align-items: center;
+
+    &:not(:last-child):after {
+      @include margin(0, 5px, 0, 2px);
+      @include angle(right, var(--light-text-color), 1px);
+    }
+  }
+}
+
 /* ----------------------------------------
 /*  Icon lists
 /* ----------------------------------------*/