Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

style(file-representations): adjust styling of file representation components (DEV-1186) #797

Merged
merged 1 commit into from Aug 15, 2022
Merged

style(file-representations): adjust styling of file representation components (DEV-1186) #797

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
8 changes: 4 additions & 4 deletions src/app/workspace/resource/representation/archive/archive.component.html
View file
Open in desktop
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
Open in desktop
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
Open in desktop
@@ -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
Open in desktop
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
Open in desktop
@@ -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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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