Skip to content

Commit

Permalink
style(file-representations): adjust styling of file representation co…
Browse files Browse the repository at this point in the history 
…mponents (#797)
  • Loading branch information
@mdelez
mdelez committed Aug 15, 2022
1 parent f690a37 commit 18aa134
Show file tree
Hide file tree
Showing 9 changed files with 97 additions and 61 deletions.
8 changes: 4 additions & 4 deletions src/app/workspace/resource/representation/archive/archive.component.html
View file
Expand Up @@ -23,11 +23,11 @@
<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)">
<mat-menu #more="matMenu" class="mat-menu-custom-black">
<button class="menu-content" mat-menu-item (click)="downloadArchive(src.fileValue.fileUrl)">
Download file
</button>
<button mat-menu-item (click)="openReplaceFileDialog()">
<button class="menu-content" mat-menu-item (click)="openReplaceFileDialog()">
Replace file
</button>
</mat-menu>
Expand All @@ -37,4 +37,4 @@
</div>
<div *ngIf="!src || !src.fileValue.fileUrl">
No valid file url found for this resource.
</div>
</div>
9 changes: 8 additions & 1 deletion src/app/workspace/resource/representation/archive/archive.component.scss
View file
Expand Up @@ -25,4 +25,11 @@
}
}
}
}
}

::ng-deep .mat-menu-custom-black {
background: #292929;
.menu-content {
color: #FFFFFF;
}
}
20 changes: 11 additions & 9 deletions src/app/workspace/resource/representation/audio/audio.component.html
View file
@@ -1,6 +1,7 @@
<div class="controls">
<!-- in case of an error -->
<app-status [status]="404" [url]="src.fileValue.fileUrl" [representation]="'audio'" *ngIf="failedToLoad"></app-status>
<app-status [status]="404" [url]="src.fileValue.fileUrl" [representation]="'audio'" *ngIf="failedToLoad">
</app-status>

<div class="file-representation">
<div class="container">
Expand All @@ -9,7 +10,7 @@
<mat-icon>
audio_file
</mat-icon>
</div>
</div>
<div *ngIf="failedToLoad">Your browser does not support the audio element.</div>
<div class="audio-player">
<audio id="audio" preload="auto">
Expand All @@ -25,17 +26,17 @@
<button mat-icon-button [matMenuTriggerFor]="more">
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu #more="matMenu">
<button mat-menu-item (click)="openIIIFnewTab()">
<mat-menu #more="matMenu" class="mat-menu-custom-black">
<button class="menu-content" mat-menu-item (click)="openIIIFnewTab()">
Open IIIF URL in new tab
</button>
<button mat-menu-item [cdkCopyToClipboard]="src.fileValue.fileUrl">
<button class="menu-content" mat-menu-item [cdkCopyToClipboard]="src.fileValue.fileUrl">
Copy IIIF URL to clipboard
</button>
<button mat-menu-item (click)="downloadAudio(src.fileValue.fileUrl)">
<button class="menu-content" mat-menu-item (click)="downloadAudio(src.fileValue.fileUrl)">
Download audio
</button>
<button mat-menu-item (click)="openReplaceFileDialog()">
<button class="menu-content" mat-menu-item (click)="openReplaceFileDialog()">
Replace file
</button>
</mat-menu>
Expand All @@ -55,7 +56,8 @@
</span>
</div>
<div class="time-slider-container fill-remaining-space">
<mat-slider class="time-slider" min="0" [max]="getDuration()" step="1" [value]="currentTime" (input)="onSliderChangeEnd($event)"></mat-slider>
<mat-slider class="time-slider" min="0" [max]="getDuration()" step="1" [value]="currentTime"
(input)="onSliderChangeEnd($event)"></mat-slider>
</div>
<button mat-icon-button (click)="toggleMute()" *ngIf="!isMuted()">
<mat-icon>
Expand All @@ -70,4 +72,4 @@
</div>
</div>
</div>
</div>
</div>
10 changes: 9 additions & 1 deletion src/app/workspace/resource/representation/audio/audio.component.scss
View file
Expand Up @@ -27,6 +27,7 @@
}
}
}

.current-time-span {
padding-left: 2.5%;
font-weight: bold;
Expand All @@ -41,4 +42,11 @@
}
}
}
}
}

::ng-deep .mat-menu-custom-black {
background: #292929;
.menu-content {
color: #FFFFFF;
}
}
54 changes: 26 additions & 28 deletions src/app/workspace/resource/representation/document/document.component.html
View file
@@ -1,44 +1,47 @@
<div class="pdf-container">
<div class="action horizontal bottom overlay">
<!-- in case of an error -->
<app-status [status]="404" [url]="src.fileValue.fileUrl" [representation]="'document'" *ngIf="failedToLoad">
</app-status>

<pdf-viewer class="pdf-viewer" [src]="src.fileValue.fileUrl" [original-size]="false" [autoresize]="true"
[show-all]="true" [show-borders]="true" [zoom]="zoomFactor" [zoom-scale]="'page-width'">
</pdf-viewer>
</div>
<div class="toolbar">
<div class="action horizontal bottom">
<!-- caption -->
<span>
<button mat-icon-button [matMenuTriggerFor]="more">
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu #more="matMenu">
<a mat-menu-item (click)="downloadDocument(src.fileValue.fileUrl)">
<mat-menu #more="matMenu" class="mat-menu-custom-black">
<button class="menu-content" mat-menu-item (click)="downloadDocument(src.fileValue.fileUrl)">
Download file
</a>
<button mat-menu-item (click)="openReplaceFileDialog()">
</button>
<button class="menu-content" mat-menu-item (click)="openReplaceFileDialog()">
Replace file
</button>
</mat-menu>
</span>

<!-- input field for searching through document -->
<input matInput
#queryInp
type="text"
id="searchbox"
name="searchbox"
class="pdf-searchbox fill-remaining-space"
placeholder="Search in pdf..."
[value]="pdfQuery"
[disabled]="failedToLoad"
(input)="searchQueryChanged($event.target.value)"
(keyup.enter)="searchQueryChanged(queryInp.value)"
/>
<input matInput #queryInp type="text" id="searchbox" name="searchbox" class="pdf-searchbox fill-remaining-space"
placeholder="Search in pdf..." [value]="pdfQuery" [disabled]="failedToLoad"
(input)="searchQueryChanged($event.target.value)" (keyup.enter)="searchQueryChanged(queryInp.value)" />

<!-- image action tools e.g. zoom, rotate and flip -->
<span>
<!-- zoom buttons -->
<button mat-icon-button id="DSP_PDF_ZOOM_OUT" matTooltip="Zoom out" (click)="zoomFactor = zoomFactor - 0.2" [disabled]="failedToLoad">
<button mat-icon-button id="DSP_PDF_ZOOM_OUT" matTooltip="Zoom out" (click)="zoomFactor = zoomFactor - 0.2"
[disabled]="failedToLoad">
<mat-icon>remove_circle_outline</mat-icon>
</button>
<button mat-icon-button id="DSP_PDF_HOME" matTooltip="Reset zoom" (click)="zoomFactor = 1.0" [disabled]="failedToLoad">
<button mat-icon-button id="DSP_PDF_HOME" matTooltip="Reset zoom" (click)="zoomFactor = 1.0"
[disabled]="failedToLoad">
<mat-icon>adjust</mat-icon>
</button>
<button mat-icon-button id="DSP_PDF_ZOOM_IN" matTooltip="Zoom in" (click)="zoomFactor = zoomFactor + 0.2" [disabled]="failedToLoad">
<button mat-icon-button id="DSP_PDF_ZOOM_IN" matTooltip="Zoom in" (click)="zoomFactor = zoomFactor + 0.2"
[disabled]="failedToLoad">
<mat-icon>add_circle_outline</mat-icon>
</button>
</span>
Expand All @@ -51,15 +54,10 @@

<!-- full screen button -->
<span>
<button mat-icon-button id="DSP_PDF_FULL_SCREEN" matTooltip="Fullscreen" (click)="openFullscreen()" [disabled]="failedToLoad">
<button mat-icon-button id="DSP_PDF_FULL_SCREEN" matTooltip="Fullscreen" (click)="openFullscreen()"
[disabled]="failedToLoad">
<mat-icon>fullscreen</mat-icon>
</button>
</span>
</div>
<!-- in case of an error -->
<app-status [status]="404" [url]="src.fileValue.fileUrl" [representation]="'document'" *ngIf="failedToLoad"></app-status>

<pdf-viewer class="pdf-viewer" [src]="src.fileValue.fileUrl" [original-size]="false" [autoresize]="true" [show-all]="true"
[show-borders]="true" [zoom]="zoomFactor" [zoom-scale]="'page-width'">
</pdf-viewer>
</div>
</div>
18 changes: 14 additions & 4 deletions src/app/workspace/resource/representation/document/document.component.scss
View file
Expand Up @@ -7,7 +7,6 @@ $panelSize: 40px;
$osd-height: 460px;

:host {
border: 1px solid $black;

@media (max-height: 636px) {
height: 364px;
Expand All @@ -24,12 +23,17 @@ $osd-height: 460px;

.pdf-container {
color: $bright;
height: 100%;
background-color: $black;
height: 90%;
background-color: #292929;
border-radius: 8px 8px 0px 0px;

pdf-viewer {
position: inherit;
height: calc(100% - 4px);
height: 100%;

::ng-deep .ng2-pdf-viewer-container {
height: 90%;
}
}
}

Expand All @@ -44,6 +48,12 @@ $osd-height: 460px;
}
}

}

::ng-deep .mat-menu-custom-black {
background: #292929;
.menu-content {
color: #FFFFFF;
}
}

20 changes: 10 additions & 10 deletions src/app/workspace/resource/representation/still-image/still-image.component.html
View file
Expand Up @@ -24,8 +24,8 @@
<!-- navigation -->
<div class="navigation horizontal" *ngIf="compoundNavigation">
<mat-slider [color]="'primary'" [disabled]="compoundNavigation.totalPages < 2"
[max]="compoundNavigation.totalPages" [min]="1" [step]="1" [thumbLabel]="true" [tickInterval]="'auto'"
[(ngModel)]="compoundNavigation.page" (change)="openPage($event.value)">
[max]="compoundNavigation.totalPages" [min]="1" [step]="1" [thumbLabel]="true" [tickInterval]="'auto'"
[(ngModel)]="compoundNavigation.page" (change)="openPage($event.value)">
</mat-slider>
</div>
<!-- toolbar -->
Expand All @@ -34,18 +34,18 @@
<button mat-icon-button [matMenuTriggerFor]="more">
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu #more="matMenu">
<button mat-menu-item (click)="openImageInNewTab(iiifUrl)">
<mat-menu #more="matMenu" class="mat-menu-custom-black">
<button class="menu-content" mat-menu-item (click)="openImageInNewTab(iiifUrl)">
Open IIIF file in new tab
</button>
<button mat-menu-item [cdkCopyToClipboard]="iiifUrl"
(click)="openSnackBar('IIIF URL copied to clipboard!')">
<button class="menu-content" mat-menu-item [cdkCopyToClipboard]="iiifUrl"
(click)="openSnackBar('IIIF URL copied to clipboard!')">
Copy IIIF URL to clipboard
</button>
<button mat-menu-item (click)="downloadStillImage(images[0].fileValue.fileUrl)">
<button class="menu-content" mat-menu-item (click)="downloadStillImage(images[0].fileValue.fileUrl)">
Download file
</button>
<button mat-menu-item (click)="openReplaceFileDialog()">
<button class="menu-content" mat-menu-item (click)="openReplaceFileDialog()">
Replace file
</button>
</mat-menu>
Expand Down Expand Up @@ -97,12 +97,12 @@
<!-- action buttons: create annotation/region, fullscreen -->
<span>
<button mat-icon-button id="DSP_OSD_DRAW_REGION" matTooltip="Draw Region" [disabled]="failedToLoad"
(click)="drawButtonClicked()" [class.active]="regionDrawMode">
(click)="drawButtonClicked()" [class.active]="regionDrawMode">
<mat-icon svgIcon="draw_region_icon"></mat-icon>
</button>
<button mat-icon-button id="DSP_OSD_FULL_PAGE" matTooltip="Open in fullscreen" [disabled]="failedToLoad">
<mat-icon>fullscreen</mat-icon>
</button>
</span>
</div>
</div>
</div>
11 changes: 11 additions & 0 deletions src/app/workspace/resource/representation/still-image/still-image.component.scss
View file
Expand Up @@ -142,3 +142,14 @@
filter: alpha(opacity=100);
opacity: 1;
}

/*
Mat-menu styling
*/

::ng-deep .mat-menu-custom-black {
background: #292929;
.menu-content {
color: #FFFFFF;
}
}
8 changes: 4 additions & 4 deletions src/assets/style/_elements.scss
View file
Expand Up @@ -341,7 +341,7 @@ a,
}

&.overlay {
background: rgba(0, 0, 0, 0.48);
background: #292929;
}

&.vertical {
Expand Down Expand Up @@ -373,9 +373,9 @@ a,
}
}

.pdfViewer {
margin-top: $panel-height;
}
// .pdfViewer {
// margin-bottom: 64px;
// }
}

.no-results {
Expand Down

0 comments on commit 18aa134

Please sign in to comment.