feat(admin-ui): Add asset preview links to asset gallery & asset detail

Closes #1305

packages/admin-ui/i18n-coverage.json

@@ -1,69 +1,69 @@
 {
-  "generatedOn": "2022-02-15T16:20:08.660Z",
-  "lastCommit": "6692b95e4769c58f828b01e2b3e4c1fff9281ba2",
+  "generatedOn": "2022-02-15T19:48:25.835Z",
+  "lastCommit": "f3a265411399551d08b71173ba493744f28f7219",
   "translationStatus": {
     "cs": {
-      "tokenCount": 637,
+      "tokenCount": 638,
       "translatedCount": 591,
       "percentage": 93
     },
     "de": {
-      "tokenCount": 637,
+      "tokenCount": 638,
       "translatedCount": 570,
       "percentage": 89
     },
     "en": {
-      "tokenCount": 637,
-      "translatedCount": 636,
+      "tokenCount": 638,
+      "translatedCount": 637,
       "percentage": 100
     },
     "es": {
-      "tokenCount": 637,
-      "translatedCount": 622,
+      "tokenCount": 638,
+      "translatedCount": 623,
       "percentage": 98
     },
     "fr": {
-      "tokenCount": 637,
-      "translatedCount": 612,
+      "tokenCount": 638,
+      "translatedCount": 613,
       "percentage": 96
     },
     "it": {
-      "tokenCount": 637,
-      "translatedCount": 620,
+      "tokenCount": 638,
+      "translatedCount": 621,
       "percentage": 97
     },
     "pl": {
-      "tokenCount": 637,
+      "tokenCount": 638,
       "translatedCount": 405,
-      "percentage": 64
+      "percentage": 63
     },
     "pt_BR": {
-      "tokenCount": 637,
-      "translatedCount": 588,
+      "tokenCount": 638,
+      "translatedCount": 589,
       "percentage": 92
     },
     "pt_PT": {
-      "tokenCount": 637,
-      "translatedCount": 633,
+      "tokenCount": 638,
+      "translatedCount": 634,
       "percentage": 99
     },
     "ru": {
-      "tokenCount": 637,
+      "tokenCount": 638,
       "translatedCount": 620,
       "percentage": 97
     },
     "uk": {
-      "tokenCount": 637,
+      "tokenCount": 638,
       "translatedCount": 620,
       "percentage": 97
     },
     "zh_Hans": {
-      "tokenCount": 637,
+      "tokenCount": 638,
       "translatedCount": 557,
       "percentage": 87
     },
     "zh_Hant": {
-      "tokenCount": 637,
+      "tokenCount": 638,
       "translatedCount": 385,
       "percentage": 60
     }

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

@@ -37,12 +37,17 @@
             <div>{{ 'asset.original-asset-size' | translate }}: {{ lastSelected().fileSize | filesize }}</div>
 
             <ng-container *ngIf="selection.length === 1">
-                <vdr-chip *ngFor="let tag of lastSelected().tags" [colorFrom]="tag.value"><clr-icon shape="tag" class="mr2"></clr-icon> {{ tag.value }}</vdr-chip>
+                <vdr-chip *ngFor="let tag of lastSelected().tags" [colorFrom]="tag.value"
+                    ><clr-icon shape="tag" class="mr2"></clr-icon> {{ tag.value }}</vdr-chip
+                >
                 <div>
                     <button (click)="previewAsset(lastSelected())" class="btn btn-link">
                         <clr-icon shape="eye"></clr-icon> {{ 'asset.preview' | translate }}
                     </button>
                 </div>
+                <div>
+                    <vdr-asset-preview-links class="" [asset]="lastSelected()"></vdr-asset-preview-links>
+                </div>
                 <div>
                     <a [routerLink]="['./', lastSelected().id]" class="btn btn-link">
                         <clr-icon shape="pencil"></clr-icon> {{ 'common.edit' | translate }}

packages/admin-ui/src/lib/core/src/shared/components/asset-preview-links/asset-preview-links.component.html

@@ -0,0 +1,17 @@
+<vdr-dropdown>
+    <button class="btn btn-link" vdrDropdownTrigger>
+        <clr-icon shape="link"></clr-icon> {{ 'catalog.asset-preview-links' | translate }}<clr-icon shape="caret" dir="down"></clr-icon>
+    </button>
+    <vdr-dropdown-menu vdrPosition="bottom-left">
+        <a
+            *ngFor="let size of sizes"
+            [href]="asset | assetPreview: size"
+            [title]="asset | assetPreview: size"
+            target="_blank"
+            class="asset-preview-link"
+            vdrDropdownItem
+        >
+            <vdr-chip><clr-icon shape="link"></clr-icon> {{ 'asset.preview' | translate }}: {{ size }}</vdr-chip>
+        </a>
+    </vdr-dropdown-menu></vdr-dropdown
+>

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

@@ -0,0 +1,3 @@
+.asset-preview-link {
+    font-size: 12px;
+}

packages/admin-ui/src/lib/core/src/shared/components/asset-preview-links/asset-preview-links.component.ts

@@ -0,0 +1,13 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { AssetLike } from '@vendure/admin-ui/core';
+
+@Component({
+    selector: 'vdr-asset-preview-links',
+    templateUrl: './asset-preview-links.component.html',
+    styleUrls: ['./asset-preview-links.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AssetPreviewLinksComponent {
+    @Input() asset: AssetLike;
+    sizes = ['tiny', 'thumb', 'small', 'medium', 'large', 'full'];
+}

packages/admin-ui/src/lib/core/src/shared/components/asset-preview/asset-preview.component.html

@@ -124,13 +124,15 @@
         </clr-select-container>
         <div class="asset-detail">{{ width }} x {{ height }}</div>
     </div>
-    <a
-        *ngIf="!editable"
-        class="btn btn-link btn-sm"
-        [routerLink]="['/catalog', 'assets', asset.id]"
-        (click)="editClick.emit()"
-    >
-        <clr-icon shape="edit"></clr-icon>
-        {{ 'common.edit' | translate }}
-    </a>
+    <vdr-asset-preview-links class="mb4" [asset]="asset"></vdr-asset-preview-links>
+    <div *ngIf="!editable" class="edit-button-wrapper">
+        <a
+            class="btn btn-link btn-sm"
+            [routerLink]="['/catalog', 'assets', asset.id]"
+            (click)="editClick.emit()"
+        >
+            <clr-icon shape="edit"></clr-icon>
+            {{ 'common.edit' | translate }}
+        </a>
+    </div>
 </div>

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

@@ -58,6 +58,7 @@
 
     ::ng-deep .clr-control-container {
         width: 100%;
+
         .clr-input {
             width: 100%;
         }
@@ -76,9 +77,14 @@
     .preview-select {
         display: flex;
         align-items: center;
-        margin-bottom: 12px;
         clr-select-container {
             margin-right: 12px;
         }
     }
 }
+
+.edit-button-wrapper {
+    padding-top: 6px;
+    border-top: 1px solid var(--color-component-border-100);
+    text-align: center;
+}

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

@@ -27,6 +27,7 @@ import { AssetFileInputComponent } from './components/asset-file-input/asset-fil
 import { AssetGalleryComponent } from './components/asset-gallery/asset-gallery.component';
 import { AssetPickerDialogComponent } from './components/asset-picker-dialog/asset-picker-dialog.component';
 import { AssetPreviewDialogComponent } from './components/asset-preview-dialog/asset-preview-dialog.component';
+import { AssetPreviewLinksComponent } from './components/asset-preview-links/asset-preview-links.component';
 import { AssetPreviewComponent } from './components/asset-preview/asset-preview.component';
 import { AssetSearchInputComponent } from './components/asset-search-input/asset-search-input.component';
 import { ChannelAssignmentControlComponent } from './components/channel-assignment-control/channel-assignment-control.component';
@@ -231,6 +232,7 @@ const DECLARATIONS = [
     TabbedCustomFieldsComponent,
     UiExtensionPointComponent,
     CustomDetailComponentHostComponent,
+    AssetPreviewLinksComponent,
 ];
 
 const DYNAMIC_FORM_INPUTS = [

packages/admin-ui/src/lib/static/i18n-messages/cs.json

@@ -55,6 +55,7 @@
     "add-facet-value": "Přidat hodnotu atributu",
     "add-facets": "Přidat atribut",
     "add-option": "Přidat možnost",
+    "asset-preview-links": "",
     "assign-product-to-channel-success": "Produkt byl úspěšně přiřazen do \"{ channel }\"",
     "assign-products-to-channel": "Přiřadit produkty do kanálu",
     "assign-to-channel": "Přiřadit do kanálu",

packages/admin-ui/src/lib/static/i18n-messages/de.json

@@ -55,6 +55,7 @@
     "add-facet-value": "Facettenwert hinzufügen",
     "add-facets": "Facetten hinzufügen",
     "add-option": "Option hinzufügen",
+    "asset-preview-links": "",
     "assign-product-to-channel-success": "Produkt erfolgreich an \"{ channel }\" zugewiesen",
     "assign-products-to-channel": "Produkte dem Kanal zuweisen",
     "assign-to-channel": "Zuweisung an Kanal",

packages/admin-ui/src/lib/static/i18n-messages/en.json

@@ -55,6 +55,7 @@
     "add-facet-value": "Add facet value",
     "add-facets": "Add facets",
     "add-option": "Add option",
+    "asset-preview-links": "Asset preview links",
     "assign-product-to-channel-success": "Successfully assigned product to \"{ channel }\"",
     "assign-products-to-channel": "Assign products to channel",
     "assign-to-channel": "Assign to channel",

packages/admin-ui/src/lib/static/i18n-messages/es.json

@@ -55,6 +55,7 @@
     "add-facet-value": "Añadir valor de faceta",
     "add-facets": "Añadir facetas",
     "add-option": "Añadir opción",
+    "asset-preview-links": "",
     "assign-product-to-channel-success": "Producto asignado a \"{ channel }\" con éxito",
     "assign-products-to-channel": "Asignar productos a canal de ventas",
     "assign-to-channel": "Asignar a canal de ventas",
@@ -668,4 +669,4 @@
     "job-result": "Resultado",
     "job-state": "Estado"
   }
-}
+}

packages/admin-ui/src/lib/static/i18n-messages/fr.json

@@ -55,6 +55,7 @@
     "add-facet-value": "Ajout valeur du composant",
     "add-facets": "Ajout composant",
     "add-option": "Ajout option",
+    "asset-preview-links": "",
     "assign-product-to-channel-success": "produit attribué au canal \"{ channel }\"",
     "assign-products-to-channel": "Attribuer les produits au canal",
     "assign-to-channel": "Attribuer au canal",
@@ -668,4 +669,4 @@
     "job-result": "Résultat de la tâche",
     "job-state": "Etat de la tâche"
   }
-}
+}

packages/admin-ui/src/lib/static/i18n-messages/it.json

@@ -55,6 +55,7 @@
     "add-facet-value": "Aggiungi valore attributo",
     "add-facets": "Aggiungi attributi",
     "add-option": "Aggiungi opzione",
+    "asset-preview-links": "",
     "assign-product-to-channel-success": "Prodotto assegnato correttamente a \"{ channel }\"",
     "assign-products-to-channel": "Assegna prodotto al canale",
     "assign-to-channel": "Assegna a un canale",
@@ -668,4 +669,4 @@
     "job-result": "Risultato operazione",
     "job-state": "Stato operazione"
   }
-}
+}

packages/admin-ui/src/lib/static/i18n-messages/pl.json

@@ -55,6 +55,7 @@
     "add-facet-value": "Dodaj nazwe faseta",
     "add-facets": "Dodaj faset",
     "add-option": "Dodaj opcje",
+    "asset-preview-links": "",
     "assign-product-to-channel-success": "Pomyślnie przypisano produkt do \"{ channel }\"",
     "assign-products-to-channel": "Przypisz produkt do kanału",
     "assign-to-channel": "Przypisz do kanału",

packages/admin-ui/src/lib/static/i18n-messages/pt_BR.json

@@ -55,6 +55,7 @@
     "add-facet-value": "Adiciona valor para etiqueta",
     "add-facets": "Adiciona etiqueta",
     "add-option": "Adiciona opção",
+    "asset-preview-links": "",
     "assign-product-to-channel-success": "Produto atribuído com sucesso a \"{ channel }\"",
     "assign-products-to-channel": "Atribuir produtos ao canal",
     "assign-to-channel": "Atribuir ao canal",
@@ -668,4 +669,4 @@
     "job-result": "Resultado do trabalho",
     "job-state": "Estado do trabalho"
   }
-}
+}

packages/admin-ui/src/lib/static/i18n-messages/pt_PT.json

@@ -55,6 +55,7 @@
     "add-facet-value": "Adicionar novo valor",
     "add-facets": "Adicionar etiqueta",
     "add-option": "Adicionar opção",
+    "asset-preview-links": "",
     "assign-product-to-channel-success": "Produto atribuído com sucesso a \"{ channel }\"",
     "assign-products-to-channel": "Atribuir produtos ao canal",
     "assign-to-channel": "Atribuir ao canal",
@@ -668,4 +669,4 @@
     "job-result": "Resultado do trabalho",
     "job-state": "Estado do trabalho"
   }
-}
+}

packages/admin-ui/src/lib/static/i18n-messages/ru.json

@@ -55,6 +55,7 @@
     "add-facet-value": "Добавить значение тега",
     "add-facets": "Добавить тег",
     "add-option": "Добавить опции",
+    "asset-preview-links": "",
     "assign-product-to-channel-success": "Товар успешно добавлен в канал \"{ channel }\"",
     "assign-products-to-channel": "Добавить товары в канал",
     "assign-to-channel": "Добавить в канал",

packages/admin-ui/src/lib/static/i18n-messages/uk.json

@@ -55,6 +55,7 @@
     "add-facet-value": "Додати значення тегу",
     "add-facets": "Додати тег",
     "add-option": "Додати опцію",
+    "asset-preview-links": "",
     "assign-product-to-channel-success": "Товар успішно доданий в канал \"{ channel }\"",
     "assign-products-to-channel": "Додати товари в канал",
     "assign-to-channel": "Додати в канал",

packages/admin-ui/src/lib/static/i18n-messages/zh_Hans.json

@@ -55,6 +55,7 @@
     "add-facet-value": "添加特征值",
     "add-facets": "添加特征",
     "add-option": "添加规格组",
+    "asset-preview-links": "",
     "assign-product-to-channel-success": "成功将产品添加至销售渠道\"{ channel }\"",
     "assign-products-to-channel": "分配产品到销售渠道",
     "assign-to-channel": "分配至销售渠道",

packages/admin-ui/src/lib/static/i18n-messages/zh_Hant.json

@@ -55,6 +55,7 @@
     "add-facet-value": "新增特徵值",
     "add-facets": "新增特徵",
     "add-option": "新增規格選項",
+    "asset-preview-links": "",
     "assign-product-to-channel-success": "成功將產品新增至渠道\"{ channel }\"",
     "assign-products-to-channel": "分配產品到渠道",
     "assign-to-channel": "分配至渠道",