feat(admin-ui): Implement asset list view

packages/admin-ui/src/lib/catalog/src/components/asset-list/asset-list.component.html

@@ -1,39 +1,40 @@
-<vdr-action-bar>
-    <vdr-ab-left [grow]="true">
-        <vdr-asset-search-input
-            class="pr4 mt-1"
-            [tags]="allTags$ | async"
-            (searchTermChange)="searchTerm$.next($event)"
-            (tagsChange)="filterByTags$.next($event)"
-        ></vdr-asset-search-input>
-    </vdr-ab-left>
-    <vdr-ab-right>
+<vdr-page-header>
+    <vdr-page-title>
         <vdr-action-bar-items locationId="asset-list"></vdr-action-bar-items>
         <vdr-asset-file-input
             (selectFiles)="filesSelected($event)"
             [uploading]="uploading"
             dropZoneTarget=".content-area"
         ></vdr-asset-file-input>
-    </vdr-ab-right>
-</vdr-action-bar>
-
-<vdr-asset-gallery
-    [assets]="(items$ | async)! | paginate: (paginationConfig$ | async) || {}"
-    [multiSelect]="true"
-    [canDelete]="['DeleteCatalog', 'DeleteAsset'] | hasPermission"
-    (deleteAssets)="deleteAssets($event)"
-></vdr-asset-gallery>
+    </vdr-page-title>
+</vdr-page-header>
+<vdr-page-body>
+    <div class="ml-4">
+        <vdr-asset-search-input
+            class="my-2"
+            [tags]="allTags$ | async"
+            (searchTermChange)="searchTerm$.next($event)"
+            (tagsChange)="filterByTags$.next($event)"
+        ></vdr-asset-search-input>
+        <vdr-asset-gallery
+            [assets]="(items$ | async)! | paginate : (paginationConfig$ | async) || {}"
+            [multiSelect]="true"
+            [canDelete]="['DeleteCatalog', 'DeleteAsset'] | hasPermission"
+            (deleteAssets)="deleteAssets($event)"
+        ></vdr-asset-gallery>
 
-<div class="paging-controls">
-    <vdr-items-per-page-controls
-        [itemsPerPage]="itemsPerPage$ | async"
-        (itemsPerPageChange)="setItemsPerPage($event)"
-    ></vdr-items-per-page-controls>
+        <div class="paging-controls">
+            <vdr-items-per-page-controls
+                [itemsPerPage]="itemsPerPage$ | async"
+                (itemsPerPageChange)="setItemsPerPage($event)"
+            ></vdr-items-per-page-controls>
 
-    <vdr-pagination-controls
-        [currentPage]="currentPage$ | async"
-        [itemsPerPage]="itemsPerPage$ | async"
-        [totalItems]="totalItems$ | async"
-        (pageChange)="setPageNumber($event)"
-    ></vdr-pagination-controls>
-</div>
+            <vdr-pagination-controls
+                [currentPage]="currentPage$ | async"
+                [itemsPerPage]="itemsPerPage$ | async"
+                [totalItems]="totalItems$ | async"
+                (pageChange)="setPageNumber($event)"
+            ></vdr-pagination-controls>
+        </div>
+    </div>
+</vdr-page-body>

packages/admin-ui/src/lib/catalog/src/components/collection-contents/collection-contents.component.html

@@ -1,6 +1,7 @@
 <div class="table-wrapper">
     <div class="progress loop" [class.visible]="isLoading"></div>
     <vdr-data-table-2
+        id="collection-contents"
         [class.loading]="isLoading"
         [items]="contents$ | async"
         [itemsPerPage]="contentsItemsPerPage$ | async"

packages/admin-ui/src/lib/core/src/shared/components/asset-gallery/asset-gallery.component.scss

@@ -2,7 +2,6 @@
 
 :host {
     display: flex;
-    overflow: hidden;
 }
 
 .gallery {
@@ -12,10 +11,6 @@
     grid-template-columns: repeat(auto-fill, 150px);
     grid-template-rows: repeat(auto-fill, 180px);
     grid-gap: 10px 20px;
-    overflow-y: auto;
-    padding-left: 12px;
-    padding-top: 12px;
-    padding-bottom: 12px;
 
     .card:hover {
         box-shadow: 0 0.125rem 0 0 var(--color-primary-500);
@@ -52,6 +47,9 @@ vdr-select-toggle {
 }
 
 .detail {
+    display: flex;
+    align-items: center;
+    gap: 4px;
     font-size: 12px;
     margin: 3px;
     overflow: hidden;

packages/admin-ui/src/lib/core/src/shared/components/page-body/page-body.component.scss

@@ -1,3 +1,4 @@
 :host {
     display: block;
+    padding-bottom: calc(var(--space-unit) * 4);
 }