feat(document): make changes to text component (DEV-1147) (#791)

* feat(document): change style for text viewer * feat(document): change style for text viewer * chore: change typo in comment * fest(menu): add css classes * fest(menu): add css classes * refactor(text icon): Change text icon to text_snippet * refactor(tests): remove tests for button * refactor: add needed import of MatMenu to the spec * refactor(tests): change imports
dasch-swiss · Aug 11, 2022 · e8adde9 · e8adde9
1 parent 0cabfe3
commit e8adde9
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 28 deletions.
diff --git a/src/app/workspace/resource/representation/archive/archive.component.html b/src/app/workspace/resource/representation/archive/archive.component.html
@@ -19,7 +19,7 @@
         <div class="toolbar">
             <!-- toolbar -->
             <div class="action horizontal bottom">
-                <!-- three dot menu to downlaod and replace file -->
+                <!-- three dot menu to download and replace file -->
                 <button mat-icon-button [matMenuTriggerFor]="more">
                     <mat-icon>more_vert</mat-icon>
                 </button>
@@ -37,4 +37,4 @@
 </div>
 <div *ngIf="!src || !src.fileValue.fileUrl">
     No valid file url found for this resource.
-</div>
+</div>
diff --git a/src/app/workspace/resource/representation/text/text.component.html b/src/app/workspace/resource/representation/text/text.component.html
@@ -2,15 +2,37 @@
     <!-- in case of an error -->
     <app-status [status]="404" [url]="src.fileValue.fileUrl" [representation]="'text'" *ngIf="failedToLoad"></app-status>
 
-    <button class="download" mat-button (click)="downloadText(src.fileValue.fileUrl)" [disabled]="failedToLoad">
-        <mat-icon>
-            file_download
-        </mat-icon>
-        Click to download
-    </button>
-    <button mat-button matTooltip="Replace text file" (click)="openReplaceFileDialog()">
-        <mat-icon>cloud_upload</mat-icon>
-    </button>
+    <div class="file-representation">
+        <div class="container">
+            <div class="contents">
+                <div class="icon">
+                    <mat-icon>
+                        text_snippet
+                    </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 download and replace file -->
+                <button mat-icon-button [matMenuTriggerFor]="more">
+                    <mat-icon>more_vert</mat-icon>
+                </button>
+                <mat-menu #more="matMenu" class="mat-menu-custom-black">
+                    <button class="menu-content" mat-menu-item (click)="downloadText(src.fileValue.fileUrl)" [disabled]="failedToLoad">
+                        Download file
+                    </button>
+                    <button class="menu-content" mat-menu-item (click)="openReplaceFileDialog()">
+                        Replace file
+                    </button>
+                </mat-menu>
+            </div>
+        </div>
+    </div>
 </div>
 <div *ngIf="!src || !src.fileValue.fileUrl">
     No valid file url found for this resource.

diff --git a/src/app/workspace/resource/representation/text/text.component.scss b/src/app/workspace/resource/representation/text/text.component.scss
@@ -0,0 +1,36 @@
+@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;
+        }
+      }
+    }
+  }
+}
+
+
+::ng-deep .mat-menu-custom-black {
+  background: #292929;
+  .menu-content {
+    color: #FFFFFF;
+  }
+}
diff --git a/src/app/workspace/resource/representation/text/text.component.spec.ts b/src/app/workspace/resource/representation/text/text.component.spec.ts
@@ -3,7 +3,6 @@ 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 { MatSnackBarModule } from '@angular/material/snack-bar';
 import { KnoraApiConnection } from '@dasch-swiss/dsp-js';
@@ -13,6 +12,7 @@ import { TestConfig } from 'test.config';
 import { FileRepresentation } from '../file-representation';
 
 import { TextComponent } from './text.component';
+import { MatMenuModule } from '@angular/material/menu';
 
 const textFileValue = {
     'arkUrl': 'http://0.0.0.0:3336/ark:/72163/1/9876/=wcU1HzYTEKbJCYPybyKmAs/Kp81r_BPTHKa4oSd5iIxXgd',
@@ -63,7 +63,8 @@ describe('TextComponent', () => {
             imports: [
                 HttpClientTestingModule,
                 MatDialogModule,
-                MatSnackBarModule
+                MatSnackBarModule,
+                MatMenuModule
             ],
             providers: [
                 AppInitService,
@@ -91,19 +92,4 @@ describe('TextComponent', () => {
     it('should have a file url', () => {
         expect(testHostComponent.textFileRepresentation.fileValue.fileUrl).toEqual('http://0.0.0.0:1024/9876/Jjic1ixccX7-BUHCAFNlEts.txt/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.textFileRepresentation = undefined;
-        testHostFixture.detectChanges();
-
-        const downloadButtonElement = await loader.getAllHarnesses(MatButtonHarness.with({ selector: '.download' }));
-
-        expect(downloadButtonElement.length).toEqual(0);
-    });
 });