still-image.component.html

<!-- openseadragon (osd) viewer -->
<div class="osd-container" [class.drawing]="regionDrawMode">

    <!-- navigation in case of compound object: previous and next page -->
    <div class="navigation vertical previous" *ngIf="compoundNavigation">
        <button mat-button class="full-size" [disabled]="compoundNavigation.page <= 1"
            (click)="goToPage.emit(compoundNavigation.page - 1)">
            <mat-icon>keyboard_arrow_left</mat-icon>
        </button>
    </div>
    <div class="navigation vertical next" *ngIf="compoundNavigation">
        <button mat-button class="full-size" [disabled]="compoundNavigation.page >= compoundNavigation.totalPages"
            (click)="goToPage.emit(compoundNavigation.page + 1)">
            <mat-icon>keyboard_arrow_right</mat-icon>
        </button>
    </div>

</div>
<!-- /openseadragon (osd) -->

<div class="toolbar bottom">
    <!-- 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)="goToPage.emit($event.value)">
        </mat-slider>
    </div>
    <!-- toolbar -->
    <div class="action horizontal">
        <!-- vertical more button with menu to open and copy iiif url -->
        <button mat-icon-button [matMenuTriggerFor]="more">
            <mat-icon>more_vert</mat-icon>
        </button>
        <mat-menu #more="matMenu">
            <a mat-menu-item href="{{iiifUrl}}" target="_blank">
                Open file in new tab
            </a>
            <button mat-menu-item [cdkCopyToClipboard]="iiifUrl"
            (click)="openSnackBar('IIIF URL copied to clipboard!')">
                Copy IIIF URL to clipboard
            </button>
        </mat-menu>
        <!-- empty placeholder to simulate two buttons; this helps to have the zoom buttons centered with fill-remaining-space setup -->
        <span class="empty-space"></span>
        <span class="empty-space"></span>

        <span class="fill-remaining-space"></span>

        <!-- navigation in case of compound object: first page and previous page -->
        <span class="compound-nav" *ngIf="compoundNavigation">
            <button mat-icon-button [disabled]="compoundNavigation.page <= 1" matTooltip="First page"
                (click)="goToPage.emit(1)">
                <mat-icon>first_page</mat-icon>
            </button>
            <button mat-icon-button [disabled]="compoundNavigation.page <= 1" matTooltip="Previous page"
                (click)="goToPage.emit(compoundNavigation.page - 1)">
                <mat-icon>navigate_before</mat-icon>
            </button>
        </span>

        <!-- zoom buttons: zoom out, home/reset, zoom in -->
        <span>
            <button mat-icon-button id="DSP_OSD_ZOOM_OUT" matTooltip="Zoom out">
                <mat-icon>remove_circle_outline</mat-icon>
            </button>
            <button mat-icon-button id="DSP_OSD_HOME" matTooltip="Reset zoom">
                <mat-icon>adjust</mat-icon>
            </button>
            <button mat-icon-button id="DSP_OSD_ZOOM_IN" matTooltip="Zoom in">
                <mat-icon>add_circle_outline</mat-icon>
            </button>
        </span>

        <!-- navigation in case of compound object: next page and last page -->
        <span class="compound-nav" *ngIf="compoundNavigation">
            <button mat-icon-button [disabled]="compoundNavigation.page >= compoundNavigation.totalPages"
                matTooltip="Next page" (click)="goToPage.emit(compoundNavigation.page + 1)">
                <mat-icon>navigate_next</mat-icon>
            </button>
            <button mat-icon-button [disabled]="compoundNavigation.page === compoundNavigation.totalPages"
                matTooltip="Last page" (click)="goToPage.emit(compoundNavigation.totalPages)">
                <mat-icon>last_page</mat-icon>
            </button>
        </span>

        <span class="fill-remaining-space"></span>

        <!-- action buttons: create annotation/region, replace file, fullscreen -->
        <span>
            <button mat-icon-button id="DSP_OSD_DRAW_REGION" matTooltip="Draw Region" (click)="drawButtonClicked()">
                <mat-icon svgIcon="draw_region_icon"></mat-icon>
            </button>
            <button mat-icon-button id="DSP_OSD_REPLACE_IMAGE" class="replace-image" matTooltip="Replace image"
                (click)="openReplaceFileDialog()">
                <mat-icon>cloud_upload</mat-icon>
            </button>
            <button mat-icon-button id="DSP_OSD_FULL_PAGE" matTooltip="Open in fullscreen">
                <mat-icon>fullscreen</mat-icon>
            </button>
        </span>
    </div>
</div>