feat(admin-ui): Improve layout of data table & page components

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

@@ -34,7 +34,7 @@
                     <div *ngIf="isLast" class="column-picker">
                         <vdr-data-table-colum-picker
                             [uiLanguage]="uiLanguage$ | async"
-                            [columns]="allColumns"
+                            [columns]="sortedColumns"
                             (reorder)="onColumnReorder($event)"
                         ></vdr-data-table-colum-picker>
                     </div>

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

@@ -1,10 +1,11 @@
-<div class="flex wrap ml-4">
+<vdr-page-block>
     <vdr-language-selector
         [availableLanguageCodes]="availableLanguages$ | async"
         [currentLanguageCode]="contentLanguage$ | async"
         (languageCodeChange)="setLanguage($event)"
     ></vdr-language-selector>
-</div>
+    some content
+</vdr-page-block>
 <vdr-data-table-2
     class="mt-2"
     id="product-list"

packages/admin-ui/src/lib/core/src/components/app-shell/app-shell.component.scss

@@ -25,6 +25,7 @@
     align-items: center;
     justify-content: space-between;
     padding: calc(var(--space-unit) * 4);
+    padding-left: var(--surface-margin-left);
     background-color: var(--page-header-color);
 }
 

packages/admin-ui/src/lib/core/src/shared/components/data-table-2/data-table2.component.html

@@ -17,7 +17,10 @@
                         (change)="onToggleAllClick()"
                     />
                 </th>
-                <th *ngFor="let column of visibleSortedColumns; last as isLast" [class.expand]="column.expand">
+                <th
+                    *ngFor="let column of visibleSortedColumns; last as isLast"
+                    [class.expand]="column.expand"
+                >
                     <div class="cell-content" [ngClass]="column.align">
                         <span>{{ column.heading }}</span>
                         <div *ngIf="column.sort as sort" class="sort-toggle">
@@ -29,8 +32,9 @@
                             <div class="sort-label" *ngIf="sort.sortOrder">{{ sort.sortOrder }}</div>
                         </div>
                     </div>
-
-                    <div *ngIf="isLast" class="column-picker">
+                </th>
+                <th>
+                    <div class="column-picker">
                         <vdr-data-table-colum-picker
                             [uiLanguage]="uiLanguage$ | async"
                             [columns]="sortedColumns"
@@ -41,7 +45,7 @@
             </tr>
             <tr *ngIf="searchComponent || customSearchTemplate || filters?.length">
                 <th
-                    [attr.colspan]="visibleSortedColumns.length + (selectionManager ? 1 : 0)"
+                    [attr.colspan]="visibleSortedColumns.length + (selectionManager ? 2 : 1)"
                     class="filter-row"
                     [class.active]="showSearchFilterRow"
                 >
@@ -105,10 +109,11 @@
                         ></ng-container>
                     </div>
                 </td>
+                <td><!-- column select --></td>
             </tr>
             <ng-container>
                 <tr *ngIf="!items?.length">
-                    <td [attr.colspan]="visibleSortedColumns.length + (selectionManager ? 1 : 0)">
+                    <td [attr.colspan]="visibleSortedColumns.length + (selectionManager ? 2 : 1)">
                         <vdr-empty-placeholder [emptyStateLabel]="emptyStateLabel"></vdr-empty-placeholder>
                     </td>
                 </tr>
@@ -116,7 +121,7 @@
         </tbody>
     </table>
 </div>
-<div class="table-footer ml-4">
+<div class="table-footer">
     <vdr-items-per-page-controls
         *ngIf="totalItems"
         [itemsPerPage]="itemsPerPage"

packages/admin-ui/src/lib/core/src/shared/components/data-table-2/data-table2.component.scss

@@ -1,3 +1,5 @@
+@import 'variables';
+
 :host {
     display: block;
     max-width: 100%;
@@ -6,7 +8,13 @@
 }
 
 .bulk-actions {
-    margin-left: calc(var(--space-unit) * 8);
+    margin-left: calc(var(--space-unit) * 5);
+    @media screen and (min-width: $breakpoint-medium) {
+        margin-left: calc(var(--space-unit) * 8.5);
+    }
+    @media screen and (min-width: $breakpoint-large) {
+        margin-left: calc(var(--space-unit) * 10.5);
+    }
     // gradient bg from white to transparent
     background-image: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
     z-index: 10;
@@ -28,9 +36,7 @@ table.no-select {
 }
 
 .column-picker {
-    position: absolute;
-    right: 2px;
-    top: 12px;
+    width: 24px;
 }
 
 .heading-row th {
@@ -68,6 +74,9 @@ table.no-select {
     position: absolute;
     top: -12px;
     left: 4px;
+    @media screen and (min-width: $breakpoint-large) {
+        left: 8px;
+    }
     &.active {
         background-color: var(--color-primary-700);
         color: var(--color-primary-100);
@@ -123,7 +132,7 @@ td {
 
 tr td:first-of-type,
 tr th:first-of-type {
-    padding-left: calc(var(--space-unit) * 4);
+    padding-left: var(--surface-margin-left);
 }
 
 th:last-of-type,
@@ -190,4 +199,5 @@ vdr-empty-placeholder {
     align-items: baseline;
     justify-content: space-between;
     margin-top: 6px;
+    margin-left: var(--surface-margin-left);
 }

packages/admin-ui/src/lib/core/src/shared/components/page-block/page-block.component.html

@@ -0,0 +1 @@
+<div class="page-block"><ng-content></ng-content></div>

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

@@ -0,0 +1,5 @@
+@import "variables";
+
+.page-block {
+    margin-left: var(--surface-margin-left);
+}

packages/admin-ui/src/lib/core/src/shared/components/page-block/page-block.component.ts

@@ -0,0 +1,9 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+    selector: 'vdr-page-block',
+    templateUrl: './page-block.component.html',
+    styleUrls: ['./page-block.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class PageBlockComponent {}

packages/admin-ui/src/lib/core/src/shared/components/page-header/page-header.component.html

@@ -1,3 +1,3 @@
-<div class="max-w-layout px-4">
+<div class="max-w-layout page-header">
 <ng-content />
 </div>

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

@@ -3,3 +3,7 @@
     border-bottom: 1px solid var(--color-weight-150);
     background-color: var(--page-header-color);
 }
+
+.page-header {
+    padding-left: var(--surface-margin-left);
+}

packages/admin-ui/src/lib/core/src/shared/shared.module.ts

@@ -160,6 +160,7 @@ import { TimeAgoPipe } from './pipes/time-ago.pipe';
 import { CanDeactivateDetailGuard } from './providers/routing/can-deactivate-detail-guard';
 import { PageComponent } from './components/page/page.component';
 import { LocalizedTextComponent } from './components/localized-text/localized-text.component';
+import { PageBlockComponent } from './components/page-block/page-block.component';
 
 const IMPORTS = [
     ClarityModule,
@@ -317,6 +318,7 @@ const DYNAMIC_FORM_INPUTS = [
     PageHeaderDescriptionComponent,
     PageHeaderTabsComponent,
     PageBodyComponent,
+    PageBlockComponent,
     LocalizedTextComponent,
 ];
 

packages/admin-ui/src/lib/static/styles/theme/default.scss

@@ -114,20 +114,24 @@
     --layout-content-max-width: 1600px;
     --left-nav-width: 0px;
     --surface-width: 100vw;
+    --surface-margin-left: 4px;
 
     @media screen and (min-width: $breakpoint-small) {
         --left-nav-width: 100px;
         --surface-width: calc(100vw - 100px);
+        --surface-margin-left: 4px;
     }
 
     @media screen and (min-width: $breakpoint-medium) {
         --left-nav-width: 250px;
         --surface-width: calc(100vw - 250px);
+        --surface-margin-left: calc(var(--space-unit) * 4);
     }
 
     @media screen and (min-width: $breakpoint-large) {
         --left-nav-width: 300px;
         --surface-width: calc(100vw - 300px);
+        --surface-margin-left: calc(var(--space-unit) * 6);
     }
 
     // Login page