refactor(admin-ui): Split AssetPreview into dialog & component

packages/admin-ui/src/app/catalog/catalog.module.ts

@@ -7,7 +7,6 @@ import { SharedModule } from '../shared/shared.module';
 import { catalogRoutes } from './catalog.routes';
 import { ApplyFacetDialogComponent } from './components/apply-facet-dialog/apply-facet-dialog.component';
 import { AssetListComponent } from './components/asset-list/asset-list.component';
-import { AssetPreviewComponent } from './components/asset-preview/asset-preview.component';
 import { AssignProductsToChannelDialogComponent } from './components/assign-products-to-channel-dialog/assign-products-to-channel-dialog.component';
 import { CollectionContentsComponent } from './components/collection-contents/collection-contents.component';
 import { CollectionDetailComponent } from './components/collection-detail/collection-detail.component';
@@ -53,7 +52,6 @@ import { ProductVariantsResolver } from './providers/routing/product-variants-re
         CollectionTreeNodeComponent,
         CollectionContentsComponent,
         ProductVariantsTableComponent,
-        AssetPreviewComponent,
         ProductSearchInputComponent,
         OptionValueInputComponent,
         UpdateProductOptionDialogComponent,
@@ -62,7 +60,6 @@ import { ProductVariantsResolver } from './providers/routing/product-variants-re
     ],
     entryComponents: [
         ApplyFacetDialogComponent,
-        AssetPreviewComponent,
         UpdateProductOptionDialogComponent,
         AssignProductsToChannelDialogComponent,
     ],

packages/admin-ui/src/app/catalog/components/product-assets/product-assets.component.ts

@@ -1,11 +1,4 @@
-import {
-    CdkDrag,
-    CdkDragDrop,
-    CdkDragMove,
-    CdkDropList,
-    CdkDropListGroup,
-    moveItemInArray,
-} from '@angular/cdk/drag-drop';
+import { CdkDrag, CdkDragMove, CdkDropList, CdkDropListGroup, moveItemInArray } from '@angular/cdk/drag-drop';
 import { ViewportRuler } from '@angular/cdk/overlay';
 import {
     AfterViewInit,
@@ -22,8 +15,8 @@ import { unique } from 'shared/unique';
 
 import { Asset } from '../../../common/generated-types';
 import { AssetPickerDialogComponent } from '../../../shared/components/asset-picker-dialog/asset-picker-dialog.component';
+import { AssetPreviewDialogComponent } from '../../../shared/components/asset-preview-dialog/asset-preview-dialog.component';
 import { ModalService } from '../../../shared/providers/modal/modal.service';
-import { AssetPreviewComponent } from '../asset-preview/asset-preview.component';
 
 export interface AssetChange {
     assetIds: string[];
@@ -103,7 +96,7 @@ export class ProductAssetsComponent implements AfterViewInit {
 
     previewAsset(asset: Asset) {
         this.modalService
-            .fromComponent(AssetPreviewComponent, {
+            .fromComponent(AssetPreviewDialogComponent, {
                 size: 'xl',
                 closable: true,
                 locals: { asset },

packages/admin-ui/src/app/shared/components/asset-gallery/asset-gallery.component.ts

@@ -1,8 +1,8 @@
 import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
 
-import { AssetPreviewComponent } from '../../../catalog/components/asset-preview/asset-preview.component';
 import { Asset } from '../../../common/generated-types';
 import { ModalService } from '../../providers/modal/modal.service';
+import { AssetPreviewDialogComponent } from '../asset-preview-dialog/asset-preview-dialog.component';
 
 @Component({
     selector: 'vdr-asset-gallery',
@@ -52,7 +52,7 @@ export class AssetGalleryComponent {
 
     previewAsset(asset: Asset) {
         this.modalService
-            .fromComponent(AssetPreviewComponent, {
+            .fromComponent(AssetPreviewDialogComponent, {
                 size: 'xl',
                 closable: true,
                 locals: { asset },

packages/admin-ui/src/app/shared/components/asset-preview-dialog/asset-preview-dialog.component.html

@@ -0,0 +1,7 @@
+<ng-template vdrDialogTitle>
+    <div class="title-row">
+        {{ asset.name }}
+    </div>
+</ng-template>
+
+<vdr-asset-preview [asset]="asset"></vdr-asset-preview>

packages/admin-ui/src/app/shared/components/asset-preview-dialog/asset-preview-dialog.component.scss

@@ -0,0 +1,3 @@
+:host {
+    height: 70vh;
+}

packages/admin-ui/src/app/shared/components/asset-preview-dialog/asset-preview-dialog.component.ts

@@ -0,0 +1,15 @@
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+
+import { Asset } from '../../../common/generated-types';
+import { Dialog } from '../../providers/modal/modal.service';
+
+@Component({
+    selector: 'vdr-asset-preview-dialog',
+    templateUrl: './asset-preview-dialog.component.html',
+    styleUrls: ['./asset-preview-dialog.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AssetPreviewDialogComponent implements Dialog<void> {
+    asset: Asset;
+    resolveWith: (result?: void) => void;
+}

packages/admin-ui/src/app/catalog/components/asset-preview/asset-preview.component.html → packages/admin-ui/src/app/shared/components/asset-preview/asset-preview.component.html

@@ -1,15 +1,9 @@
-<ng-template vdrDialogTitle>
-    <div class="title-row">
-        {{ asset.name }}
-    </div>
-</ng-template>
-
 <div class="preview-image" #previewDiv [class.centered]="centered">
     <img class="" [src]="asset.preview + '?preset=' + size" #imageElement (load)="getDimensions()" />
 </div>
 
-<ng-template vdrDialogButtons>
-    <div class="controls">
+<div class="controls">
+    <div>
         <label>{{ 'catalog.preview-size' | translate }}:</label>
         <vdr-form-field>
             <select clrSelect name="options" [(ngModel)]="size">
@@ -29,9 +23,9 @@
             <label>{{ 'catalog.height' | translate }}:</label>
             {{ height }}px
         </div>
-        <div class="flex-spacer"></div>
-        <a [href]="asset.source" target="_blank" class="btn btn-link">
-            {{ 'catalog.open-asset-source' | translate }}
-        </a>
     </div>
-</ng-template>
+    <div class="flex-spacer"></div>
+    <a [href]="asset.source" target="_blank" class="btn btn-link">
+        {{ 'catalog.open-asset-source' | translate }}
+    </a>
+</div>

packages/admin-ui/src/app/catalog/components/asset-preview/asset-preview.component.scss → packages/admin-ui/src/app/shared/components/asset-preview/asset-preview.component.scss

@@ -1,8 +1,8 @@
-@import "variables";
+@import "src/styles/variables";
 
 :host {
     display: flex;
-    flex-direction: column;
+    height: 100%;
 }
 
 .preview-image {
@@ -13,6 +13,7 @@
     text-align: center;
     box-shadow: inset 0 0 5px 0 rgba(0,0,0,0.1);
     background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACuoAAArqAVDM774AAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTZEaa/1AAAAK0lEQVQ4T2P4jwP8xgFGNSADqDwGIF0DlMYAUH0YYFQDMoDKYwASNfz/DwB/JvcficphowAAAABJRU5ErkJggg==");
+    flex: 1;
 
     &.centered {
         display: flex;
@@ -28,8 +29,9 @@
 
 .controls {
     display: flex;
+    flex-direction: column;
     flex-wrap: wrap;
-    flex: 1;
+    margin-left: 12px;
 
     label {
         color: $color-grey-500;

packages/admin-ui/src/app/catalog/components/asset-preview/asset-preview.component.ts → packages/admin-ui/src/app/shared/components/asset-preview/asset-preview.component.ts

@@ -1,7 +1,7 @@
-import { ChangeDetectionStrategy, Component, ElementRef, ViewChild } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ElementRef, Input, ViewChild } from '@angular/core';
 
 import { Asset } from '../../../common/generated-types';
-import { Dialog } from '../../../shared/providers/modal/modal.service';
+import { Dialog } from '../../providers/modal/modal.service';
 
 @Component({
     selector: 'vdr-asset-preview',
@@ -9,8 +9,9 @@ import { Dialog } from '../../../shared/providers/modal/modal.service';
     styleUrls: ['./asset-preview.component.scss'],
     changeDetection: ChangeDetectionStrategy.Default,
 })
-export class AssetPreviewComponent implements Dialog<void> {
-    asset: Asset;
+export class AssetPreviewComponent {
+    @Input() asset: Asset;
+
     size = 'medium';
     resolveWith: (result?: void) => void;
     width = 0;

packages/admin-ui/src/app/shared/shared-declarations.ts

@@ -7,6 +7,10 @@ export { AffixedInputComponent } from './components/affixed-input/affixed-input.
 export { AssetFileInputComponent } from './components/asset-file-input/asset-file-input.component';
 export { AssetGalleryComponent } from './components/asset-gallery/asset-gallery.component';
 export { AssetPickerDialogComponent } from './components/asset-picker-dialog/asset-picker-dialog.component';
+export {
+    AssetPreviewDialogComponent,
+} from './components/asset-preview-dialog/asset-preview-dialog.component';
+export { AssetPreviewComponent } from './components/asset-preview/asset-preview.component';
 export { PercentageSuffixInputComponent } from './components/affixed-input/percentage-suffix-input.component';
 export {
     ChannelAssignmentControlComponent,

packages/admin-ui/src/app/shared/shared.module.ts

@@ -23,6 +23,8 @@ import {
     AssetFileInputComponent,
     AssetGalleryComponent,
     AssetPickerDialogComponent,
+    AssetPreviewComponent,
+    AssetPreviewDialogComponent,
     ChannelAssignmentControlComponent,
     ChannelBadgeComponent,
     ChannelLabelPipe,
@@ -89,6 +91,8 @@ const DECLARATIONS = [
     ActionBarComponent,
     ActionBarLeftComponent,
     ActionBarRightComponent,
+    AssetPreviewComponent,
+    AssetPreviewDialogComponent,
     ConfigurableInputComponent,
     AffixedInputComponent,
     ChipComponent,
@@ -158,7 +162,12 @@ const DECLARATIONS = [
         ModalService,
         CanDeactivateDetailGuard,
     ],
-    entryComponents: [ModalDialogComponent, SimpleDialogComponent, AssetPickerDialogComponent],
+    entryComponents: [
+        ModalDialogComponent,
+        SimpleDialogComponent,
+        AssetPickerDialogComponent,
+        AssetPreviewDialogComponent,
+    ],
     schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
 export class SharedModule {}