style fixes for viewer (#2858)

* style fixes for viewer

* use theme colors

* initial theme support for PDF viewer

lib/core/styles/_index.scss

@@ -19,6 +19,7 @@
 @import '../viewer/components/viewer.component';
 @import '../form/components/form.component';
 @import '../sidebar/sidebar-action-menu.component';
+@import '../viewer/components/pdfViewer.component';
 
 @mixin adf-core-theme($theme) {
     @include adf-colors-theme($theme);
@@ -38,6 +39,7 @@
     @include adf-toolbar-theme($theme);
     @include adf-userinfo-theme($theme);
     @include adf-viewer-theme($theme);
+    @include adf-pdf-viewer-theme($theme);
     @include adf-form-component-theme($theme);
     @include adf-sidebar-action-menu-theme($theme);
 }

lib/core/viewer/components/pdfViewer.component.html

@@ -34,15 +34,14 @@
             <mat-icon>keyboard_arrow_down</mat-icon>
         </button>
 
-        <div>
+        <div class="adf-pdf-viewer__toolbar-page-selector">
-            {{ 'ADF_VIEWER.PAGE_LABEL.SHOWING' | translate }}
+            <span>{{ 'ADF_VIEWER.PAGE_LABEL.SHOWING' | translate }}</span>
             <input #page
-                class="adf-pdf-viewer__toolbar-page-selector"
                 type="text"
                 pattern="-?[0-9]*(\.[0-9]+)?"
                 value="{{ displayPage }}"
                 (keyup.enter)="inputPage(page.value)">
-            {{ 'ADF_VIEWER.PAGE_LABEL.OF' | translate }} {{ totalPages }}
+            <span>{{ 'ADF_VIEWER.PAGE_LABEL.OF' | translate }} {{ totalPages }}</span>
         </div>
 
         <adf-toolbar-divider></adf-toolbar-divider>

lib/core/viewer/components/pdfViewer.component.scss

@@ -1,3 +1,4 @@
+@mixin adf-pdf-viewer-theme($theme) {
     .adf-pdf-viewer {
         .loader-container {
             display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
@@ -19,20 +20,34 @@
 
         &__toolbar {
             position: absolute;
-        bottom: 0;
+            bottom: 5px;
 
             left: 50%;
             transform: translateX(-50%);
 
+            .adf-toolbar .mat-toolbar {
+                max-height: 48px;
+                background-color: mat-color($primary, default-contrast, 1);
+                border-width: 0;
+                border-radius: 2px;
+                box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12);
+            }
+
             &-page-selector {
-            font-size: 16px;
+                padding-left: 10px;
+                padding-right: 10px;
+                font-size: 14px;
+
+                & > input {
+                    font-size: 14px;
                     padding: 4px 0;
                     text-align: right;
                     width: 33px;
                     margin-right: 4px;
-            height: 20px;
                     outline-width: 1px;
                     outline-color: gray;
                 }
             }
         }
+    }
+}

lib/core/viewer/components/pdfViewerHost.component.scss

@@ -165,6 +165,11 @@
                 right: 0;
                 bottom: 0;
             }
+
+            * {
+                padding: 0;
+                margin: 0;
+            }
         }
 
         &.removePageBorders {
@@ -202,10 +207,7 @@
         }
     }
 
-    * {
+
-        padding: 0;
-        margin: 0;
-    }
 
     .hidden, [hidden] {
         display: none !important;

lib/core/viewer/components/txtViewer.component.scss

@@ -3,5 +3,4 @@
     width: 100vw;
     overflow: hidden;
     overflow-y: scroll;
-    margin-bottom: 42px;
 }

lib/core/viewer/components/viewer.component.html

@@ -18,7 +18,7 @@
                         <mat-icon>arrow_back</mat-icon>
                     </button>
                     <img class="adf-viewer__mimeicon" [src]="mimeType | adfMimeTypeIcon">
-                    <span id="adf-viewer-display-name">{{ displayName }}</span>
+                    <span class="adf-viewer__display-name" id="adf-viewer-display-name">{{ displayName }}</span>
                 </adf-toolbar-title>
 
                 <ng-container *ngIf="mnuOpenWith">

lib/core/viewer/components/viewer.component.scss

@@ -13,6 +13,24 @@
 
         &__mimeicon {
             vertical-align: middle;
+            height: 18px;
+            width: 18px;
+        }
+
+        &-toolbar {
+            .mat-toolbar {
+                background-color: mat-color($primary, default-contrast)
+            }
+        }
+
+        &__display-name {
+            font-size: 16px;
+            opacity: 0.87;
+            line-height: 1.5;
+            letter-spacing: -0.4px;
+            font-weight: normal;
+            font-style: normal;
+            font-stretch: normal;
         }
 
         &-container {
@@ -22,6 +40,7 @@
                 overflow-y: auto;
                 overflow-x: hidden;
                 z-index: 1;
+                background-color: mat-color($background, background);
 
                 display: flex;
                 flex-direction: row;