Skip to content
Permalink
Browse files
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
  • Loading branch information
mdelez committed Aug 3, 2022
1 parent f41e73f commit db40310092f5dd55f0531444703d6fdd9ae4f9af
Show file tree
Hide file tree
Showing 5 changed files with 82 additions and 23 deletions.
@@ -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>
@@ -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;
}
}
}
}
}
@@ -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);
});
});
@@ -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;
}
}

@@ -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;
}
}
}

0 comments on commit db40310

Please sign in to comment.