From db40310092f5dd55f0531444703d6fdd9ae4f9af Mon Sep 17 00:00:00 2001
From: mdelez <60604010+mdelez@users.noreply.github.com>
Date: Wed, 3 Aug 2022 12:38:15 +0200
Subject: [PATCH] feat(archive): new archive representation view (DEV-1084)
(#785)
* feat(archive): add new view for archive representation
* feat(archive): add toolbar to archive representation & make minor adjustments to video viewer
* remove unnecessary class
* test(archive): remove now irrelevant tests
* style(_elements): fix css
* clarify comment
---
.../archive/archive.component.html | 41 ++++++++++++++++---
.../archive/archive.component.scss | 28 +++++++++++++
.../archive/archive.component.spec.ts | 21 ++--------
.../representation/video/video.component.scss | 2 +
src/assets/style/_elements.scss | 13 +++++-
5 files changed, 82 insertions(+), 23 deletions(-)
diff --git a/src/app/workspace/resource/representation/archive/archive.component.html b/src/app/workspace/resource/representation/archive/archive.component.html
index 755586342d..eb9afb423d 100644
--- a/src/app/workspace/resource/representation/archive/archive.component.html
+++ b/src/app/workspace/resource/representation/archive/archive.component.html
@@ -1,8 +1,40 @@
-
+
+
-
No valid file url found for this resource.
-
-
+
\ No newline at end of file
diff --git a/src/app/workspace/resource/representation/archive/archive.component.scss b/src/app/workspace/resource/representation/archive/archive.component.scss
index e69de29bb2..c6c58d40a4 100644
--- a/src/app/workspace/resource/representation/archive/archive.component.scss
+++ b/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;
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/app/workspace/resource/representation/archive/archive.component.spec.ts b/src/app/workspace/resource/representation/archive/archive.component.spec.ts
index 5b895bf416..3a6d3a882b 100644
--- a/src/app/workspace/resource/representation/archive/archive.component.spec.ts
+++ b/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);
- });
});
diff --git a/src/app/workspace/resource/representation/video/video.component.scss b/src/app/workspace/resource/representation/video/video.component.scss
index 454611b64c..25a29efbab 100644
--- a/src/app/workspace/resource/representation/video/video.component.scss
+++ b/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;
}
}
diff --git a/src/assets/style/_elements.scss b/src/assets/style/_elements.scss
index 40c3803d42..f459b3af37 100644
--- a/src/assets/style/_elements.scss
+++ b/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;
}
-}
+}
\ No newline at end of file