diff --git a/src/app/workspace/resource/representation/still-image/still-image.component.html b/src/app/workspace/resource/representation/still-image/still-image.component.html index 18dfcc81be..9dacc0e9d0 100644 --- a/src/app/workspace/resource/representation/still-image/still-image.component.html +++ b/src/app/workspace/resource/representation/still-image/still-image.component.html @@ -1,52 +1,5 @@
-
-
-
- {{imageCaption}} -
-
-
- {{iiifUrl}} -
-
- -
-
-
- - - - - - - - - - - - - - -
- -
- +
+ + +
+ +
+ + +
+ +
+ + + + + Open file in new tab + + + + + + + + + + + + - - + + + + + + + + + + + + + + + + +
- diff --git a/src/app/workspace/resource/representation/still-image/still-image.component.scss b/src/app/workspace/resource/representation/still-image/still-image.component.scss index b54c2f3bbc..e2d0916537 100644 --- a/src/app/workspace/resource/representation/still-image/still-image.component.scss +++ b/src/app/workspace/resource/representation/still-image/still-image.component.scss @@ -1,12 +1,6 @@ @import "../../../../../assets/style/config"; -// sizes -$max-width: 800px; -$panelSize: 40px; - -$osd-height: 460px; :host { - // display: inline-flex; width: 100%; @media (max-height: 636px) { @@ -16,7 +10,7 @@ $osd-height: 460px; .osd-container { color: $bright; background-color: $dark; - height: 100%; + height: calc(100% - 64px); &.drawing { cursor: crosshair; @@ -25,33 +19,59 @@ $osd-height: 460px; &.fullscreen { max-width: 100vw; } + } - .captions-container { - .top, .bottom { - text-align: left; - .iiif-url, .copy-button { - display: inline-block; - } - .iiif-url { - a { - padding: 0px 0px 0px 16px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - max-width: 50%; - } - } - .copy-button button { - background: none; - border: none; - color: white; - mat-icon { - font-size: 16px; - } - } + .toolbar { + color: $primary_50; + background-color: $dark; + height: 64px; + + .action { + height: 40px; + bottom: 0; + padding: 8px 0; + } + } + + .navigation { + position: absolute; + z-index: 1; + + // vertical navigation + // on the left resp. on the right hand side of osd viewer + &.vertical { + height: calc(100% - #{$panel-height}); + width: $panel-height; + top: $panel-height; + &.previous { + left: 0; + } + &.next { + right: 0; } + .mat-button.full-size { + height: 100% !important; + width: $panel-height !important; + + padding: 0 !important; + min-width: $panel-height !important; + } + } + + // horizontal navigation + // slider control container + &.horizontal { + width: 100%; + + .mat-slider { + width: 100%; + height: 4px; + bottom: 20px; + } + } } + } .annotation-tooltip { diff --git a/src/app/workspace/resource/representation/still-image/still-image.component.spec.ts b/src/app/workspace/resource/representation/still-image/still-image.component.spec.ts index 9bf134b274..692bb65f90 100644 --- a/src/app/workspace/resource/representation/still-image/still-image.component.spec.ts +++ b/src/app/workspace/resource/representation/still-image/still-image.component.spec.ts @@ -7,6 +7,7 @@ import { Component, OnInit, ViewChild } from '@angular/core'; import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; import { MatDialogModule, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; import { MatIconModule } from '@angular/material/icon'; +import { MatMenuModule } from '@angular/material/menu'; import { MatSnackBarModule } from '@angular/material/snack-bar'; import { MatToolbarModule } from '@angular/material/toolbar'; import { By } from '@angular/platform-browser'; @@ -143,6 +144,7 @@ describe('StillImageComponent', () => { HttpClientModule, MatDialogModule, MatIconModule, + MatMenuModule, MatSnackBarModule, MatToolbarModule, ], @@ -201,31 +203,6 @@ describe('StillImageComponent', () => { }); - it('should display the image caption', () => { - - const hostCompDe = testHostFixture.debugElement; - const stillImageComponentDe = hostCompDe.query(By.directive(StillImageComponent)); - - const captionDebugElement = stillImageComponentDe.query(By.css('.caption')); - const captionEle = captionDebugElement.nativeElement; - - expect(captionEle.innerText).toEqual('test image'); - - }); - - it('should display the iiifUrl of the image', () => { - - const hostCompDe = testHostFixture.debugElement; - const stillImageComponentDe = hostCompDe.query(By.directive(StillImageComponent)); - - const iiifUrlDebugElement = stillImageComponentDe.query(By.css('.iiif-url a')); - const iiifUrlEle = iiifUrlDebugElement.nativeElement; - - expect(iiifUrlEle.innerText).toEqual('https://iiif.test.dasch.swiss:443/0803/incunabula_0000003840.jp2/full/3210,5144/0/default.jpg'); - expect(iiifUrlEle.getAttribute('target')).toEqual('_blank'); - expect(iiifUrlEle.getAttribute('href')).toEqual('https://iiif.test.dasch.swiss:443/0803/incunabula_0000003840.jp2/full/3210,5144/0/default.jpg'); - }); - it('should have 1 test region loaded (rectangle)', () => { const osd = testHostComponent.osdViewerComp['_viewer']; diff --git a/src/app/workspace/resource/representation/video/video.component.html b/src/app/workspace/resource/representation/video/video.component.html index 51c482f11b..272ae6b471 100644 --- a/src/app/workspace/resource/representation/video/video.component.html +++ b/src/app/workspace/resource/representation/video/video.component.html @@ -66,15 +66,13 @@ {{ muted ? "volume_mute" : "volume_up" }} - + diff --git a/src/app/workspace/resource/representation/video/video.component.scss b/src/app/workspace/resource/representation/video/video.component.scss index ca071cc384..c4f43a549c 100644 --- a/src/app/workspace/resource/representation/video/video.component.scss +++ b/src/app/workspace/resource/representation/video/video.component.scss @@ -73,11 +73,6 @@ color: rgba(255, 255, 255, 0.26); } - .empty-space { - display: block; - width: 48px; - } - .time { margin-top: 12px; padding: 0 6px; diff --git a/src/assets/style/_elements.scss b/src/assets/style/_elements.scss index 245f6ba9f5..d9e82618ed 100644 --- a/src/assets/style/_elements.scss +++ b/src/assets/style/_elements.scss @@ -10,6 +10,10 @@ .space-reducer { max-height: 14px; } +.empty-space { + display: block; + width: 48px; +} // -------------------------------------- @@ -306,12 +310,18 @@ a, max-width: 50%; } + .action, + .navigation { + .mat-button-disabled { + color: grey; + } + } + .action { z-index: 1; position: absolute; display: flex; flex-wrap: wrap; - // background: rgba(200, 200, 200, 0.3); color: $primary_50; a { @@ -345,51 +355,6 @@ a, } } - // first navigation implementation - // on the left resp. on the right hand side of osd viewer - .navigation { - position: absolute; - z-index: 1; - color: $primary_50; - - &.vertical { - height: calc(100% - #{$panel-height}); - width: $panel-height; - top: $panel-height; - &.previous { - left: 0; - } - - &.next { - right: 0; - } - .mat-button.full-size { - height: 100% !important; - width: $panel-height !important; - - padding: 0 !important; - min-width: $panel-height !important; - } - } - - &.horizontal { - width: 100%; - height: $panel-height; - background: $primary_900; - position: inherit; - - &.bottom { - position: absolute; - bottom: 0; - - .compound-nav { - bottom: 4px; - position: relative; - } - } - } - } - .pdfViewer { margin-top: $panel-height; }