inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

style fixes for viewer (#2858)

Browse Source 
* style fixes for viewer

* use theme colors

* initial theme support for PDF viewer
This commit is contained in:
Denys Vuika
2018-01-23 11:35:45 +00:00
committed by Eugenio Romano
parent a401ebd35d
commit 0ea7259988
7 changed files with 77 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
lib/core/styles/_index.scss
View File

@@ -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);
}

7
lib/core/viewer/components/pdfViewer.component.html
View File

@@ -34,15 +34,14 @@
<mat-icon>keyboard_arrow_down</mat-icon>
</button>
<div>
{{ 'ADF_VIEWER.PAGE_LABEL.SHOWING' | translate }}
<div class="adf-pdf-viewer__toolbar-page-selector">
<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>

77
lib/core/viewer/components/pdfViewer.component.scss
View File

@@ -1,38 +1,53 @@
.adf-pdf-viewer {
.loader-container {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
-webkit-box-flex-direction: row;
-moz-box-flex-direction: row;
-webkit-flex-direction: row;
flex-direction: row;
height:100%;
}
@mixin adf-pdf-viewer-theme($theme) {
.adf-pdf-viewer {
.loader-container {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
-webkit-box-flex-direction: row;
-moz-box-flex-direction: row;
-webkit-flex-direction: row;
flex-direction: row;
height:100%;
}
.loader-item {
margin: auto;
max-height:100px;
max-width:300px;
}
.loader-item {
margin: auto;
max-height:100px;
max-width:300px;
}
&__toolbar {
position: absolute;
bottom: 0;
&__toolbar {
position: absolute;
bottom: 5px;
left: 50%;
transform: translateX(-50%);
left: 50%;
transform: translateX(-50%);
&-page-selector {
font-size: 16px;
padding: 4px 0;
text-align: right;
width: 33px;
margin-right: 4px;
height: 20px;
outline-width: 1px;
outline-color: gray;
.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 {
padding-left: 10px;
padding-right: 10px;
font-size: 14px;
& > input {
font-size: 14px;
padding: 4px 0;
text-align: right;
width: 33px;
margin-right: 4px;
outline-width: 1px;
outline-color: gray;
}
}
}
}
}

10
lib/core/viewer/components/pdfViewerHost.component.scss
View File

@@ -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;

1
lib/core/viewer/components/txtViewer.component.scss
View File

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

2
lib/core/viewer/components/viewer.component.html
View File

@@ -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">

19
lib/core/viewer/components/viewer.component.scss
View File

@@ -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;