feat(archive): new archive representation view (DEV-1084)

src/app/workspace/resource/representation/archive/archive.component.html

@@ -1,18 +1,49 @@
 <div *ngIf="src && src.fileValue.fileUrl">
     <!-- in case of an error -->
-    <app-status [status]="404" [url]="src.fileValue.fileUrl" [representation]="'archive'" *ngIf="failedToLoad"></app-status>
+    <app-status [status]="404" [url]="src.fileValue.fileUrl" [representation]="'archive'" *ngIf="failedToLoad">
+    </app-status>
 
-    <button class="download" mat-button (click)="downloadArchive(src.fileValue.fileUrl)" [disabled]="failedToLoad">
+    <div class="file-representation">
+        <div class="container">
+            <div class="contents">
+                <div class="icon">
+                    <mat-icon>
+                        description
+                    </mat-icon>
+                </div>
+                <div class="file">
+                    <p>{{originalFilename}}</p>
+                </div>
+            </div>
+        </div>
+        <div class="toolbar">
+            <!-- toolbar -->
+            <div class="action horizontal bottom">
+                <!-- three dot menu to downlaod and replace file -->
+                <button mat-icon-button [matMenuTriggerFor]="more">
+                    <mat-icon>more_vert</mat-icon>
+                </button>
+                <mat-menu #more="matMenu">
+                    <button mat-menu-item (click)="downloadArchive(src.fileValue.fileUrl)">
+                        Download file
+                    </button>
+                    <button mat-menu-item (click)="openReplaceFileDialog()">
+                        Replace file
+                    </button>
+                </mat-menu>
+            </div>
+        </div>
+    </div>
+    <!-- <button class="download" mat-button (click)="downloadArchive(src.fileValue.fileUrl)" [disabled]="failedToLoad">
         <mat-icon>
             file_download
         </mat-icon>
         Click to download
     </button>
     <button mat-button matTooltip="Replace archive file" (click)="openReplaceFileDialog()">
         <mat-icon>cloud_upload</mat-icon>
-    </button>
+    </button> -->
 </div>
 <div *ngIf="!src || !src.fileValue.fileUrl">
     No valid file url found for this resource.
-</div>
-
+</div>

src/app/workspace/resource/representation/archive/archive.component.scss

@@ -0,0 +1,28 @@
+@import "../../../../../assets/style/responsive";
+@import "../../../../../assets/style/config";
+
+.file-representation {
+    width: 100%;
+
+    .container {
+        background: #292929;
+        border-radius: 8px 8px 0px 0px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: 15.5% 0%;
+
+        .contents {
+            color: #FFFFFF;
+
+            .icon {
+                mat-icon {
+                    height: 90px;
+                    width: 90px;
+                    font-size: 90px;
+                    line-height: 90px;
+                }
+            }
+        }
+    }
+}

src/app/workspace/resource/representation/archive/archive.component.spec.ts

@@ -4,8 +4,8 @@ import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { MatButtonHarness } from '@angular/material/button/testing';
 import { MatDialogModule } from '@angular/material/dialog';
+import { MatMenuModule } from '@angular/material/menu';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { AppInitService } from 'src/app/app-init.service';
 import { DspApiConfigToken, DspApiConnectionToken } from 'src/app/main/declarations/dsp-api-tokens';
@@ -14,6 +14,7 @@ import { FileRepresentation } from '../file-representation';
 
 import { ArchiveComponent } from './archive.component';
 
+
 const archiveFileValue = {
     'arkUrl': 'http://0.0.0.0:3336/ark:/72163/1/0123/6c=f69h6Ss6GXPME565EqAS/dDHcFHlwQ9K46255QfUGrQ8',
     'attachedToUser': 'http://rdfh.ch/users/root',
@@ -64,7 +65,8 @@ describe('ArchiveComponent', () => {
             imports: [
                 HttpClientTestingModule,
                 MatDialogModule,
-                MatSnackBarModule
+                MatSnackBarModule,
+                MatMenuModule
             ],
             providers: [
                 AppInitService,
@@ -92,19 +94,4 @@ describe('ArchiveComponent', () => {
     it('should have a file url', () => {
         expect(testHostComponent.archiveFileRepresentation.fileValue.fileUrl).toEqual('http://0.0.0.0:1024/0123/Eu71soNXOAL-DVweVgODkFh.zip/file');
     });
-
-    it('should show a download button if the file url is provided', async () => {
-        const downloadButtonElement = await loader.getHarness(MatButtonHarness.with({ selector: '.download' }));
-
-        expect(downloadButtonElement).toBeTruthy();
-    });
-
-    it('should NOT show a download button if the file url is NOT provided', async () => {
-        testHostComponent.archiveFileRepresentation = undefined;
-        testHostFixture.detectChanges();
-
-        const downloadButtonElement = await loader.getAllHarnesses(MatButtonHarness.with({ selector: '.download' }));
-
-        expect(downloadButtonElement.length).toEqual(0);
-    });
 });

src/app/workspace/resource/representation/video/video.component.scss

@@ -73,6 +73,7 @@
     .action {
       position: inherit;
       height: 40px;
+      flex-wrap: nowrap;
 
       .mat-icon-button[disabled][disabled] {
         color: rgba(255, 255, 255, 0.26);
@@ -120,6 +121,7 @@
 
     .action {
       margin: 24px 0 0;
+      flex-wrap: nowrap;
     }
   }
 

src/assets/style/_elements.scss

@@ -296,6 +296,7 @@ a,
   display: block;
   position: relative;
   padding: 0;
+  margin-bottom: 10px;
 
   &.video,
   &.audio,
@@ -311,6 +312,14 @@ a,
     max-width: 50%;
   }
 
+  .toolbar {
+    color: $primary_50;
+    background-color: $dark;
+    height: 64px;
+    border-radius: 0px 0px 8px 8px;
+    box-shadow: 0px 4px 4px 0px #888888;
+  }
+
   .action,
   .navigation {
     .mat-button-disabled {
@@ -324,6 +333,8 @@ a,
     display: flex;
     flex-wrap: wrap;
     color: $primary_50;
+    height: 40px;
+    padding: 8px 0;
 
     a {
       color: $primary_50 !important;
@@ -809,4 +820,4 @@ $gc-small: $form-width - $gc-large - 4;
   .mat-slider-thumb {
     background-color: $primary_400;
   }
-}
+}