mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2026-09-09 18:03:21 +00:00
[ADF-3746] Add style lint rules (#3975)
* add stylelint * fix style first part * fix style second part * fix style third part * fix style fourth part * Fix e2e tests first part * Fix e2e tests second part * Rebase branch * fix style third part * fix style fourth part * Fix list error * fix insights * fix style abotu component * Fix e2e tests second part * Rebase branch * fix style third part * fix style fourth part * Fix list error * Fix e2e tests second part * Rebase branch * fix style third part * fix style fourth part * Fix list error * [ADF-3746] Rebase branch * Fix e2e tests second part * Rebase branch * fix style third part * fix style fourth part * Fix list error * Fix e2e tests second part * Rebase branch * Fix list error * fix new style added * tslint fix * [ADF-3746] Fix scss errors on Process Filters Cloud component
This commit is contained in:
davidcanonieto
committed by
Eugenio Romano
Eugenio Romano
parent
5fc03cf26b
commit
1a21f234b6
@@ -1,4 +1,4 @@
|
||||
<div class="about-container">
|
||||
<div class="adf-about-container">
|
||||
<h3>Server settings</h3>
|
||||
<mat-list>
|
||||
<small>The values below are taken from the AppConfigService </small>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
.about-container {
|
||||
.adf-about-container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
&-desktop {
|
||||
&-desktop {
|
||||
display: flex;
|
||||
|
||||
button {
|
||||
@@ -23,10 +23,10 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
button > mat-icon.mat-icon.material-icons {
|
||||
button > mat-icon.mat-icon.adf-material-icons {
|
||||
color: black;
|
||||
margin: 0 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+12
-12
@@ -3,12 +3,12 @@
|
||||
|
||||
<div *ngIf="isEditable()">
|
||||
{{ 'CORE.CARDVIEW.KEYVALUEPAIRS.ADD' | translate }}
|
||||
<button (click)="add()" mat-icon-button class="card-view__key-value-pairs__add-btn" [attr.data-automation-id]="'card-key-value-pairs-button-' + property.key">
|
||||
<button (click)="add()" mat-icon-button class="adf-card-view__key-value-pairs__add-btn" [attr.data-automation-id]="'card-key-value-pairs-button-' + property.key">
|
||||
<mat-icon>add</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div *ngIf="!isEditable()" class="card-view__key-value-pairs__read-only">
|
||||
<div *ngIf="!isEditable()" class="adf-card-view__key-value-pairs__read-only">
|
||||
<mat-table #table [dataSource]="matTableValues" class="mat-elevation-z8">
|
||||
<ng-container matColumnDef="name">
|
||||
<mat-header-cell *matHeaderCellDef>{{ 'CORE.CARDVIEW.KEYVALUEPAIRS.NAME' | translate }}</mat-header-cell>
|
||||
@@ -25,15 +25,15 @@
|
||||
</div>
|
||||
|
||||
|
||||
<div class="card-view__key-value-pairs" *ngIf="isEditable() && values && values.length">
|
||||
<div class="card-view__key-value-pairs__row">
|
||||
<div class="card-view__key-value-pairs__col">{{ 'CORE.CARDVIEW.KEYVALUEPAIRS.NAME' | translate }}</div>
|
||||
<div class="card-view__key-value-pairs__col">{{ 'CORE.CARDVIEW.KEYVALUEPAIRS.VALUE' | translate }}</div>
|
||||
<div class="adf-card-view__key-value-pairs" *ngIf="isEditable() && values && values.length">
|
||||
<div class="adf-card-view__key-value-pairs__row">
|
||||
<div class="adf-card-view__key-value-pairs__col">{{ 'CORE.CARDVIEW.KEYVALUEPAIRS.NAME' | translate }}</div>
|
||||
<div class="adf-card-view__key-value-pairs__col">{{ 'CORE.CARDVIEW.KEYVALUEPAIRS.VALUE' | translate }}</div>
|
||||
</div>
|
||||
|
||||
<div class="card-view__key-value-pairs__row" *ngFor="let item of values; let i = index">
|
||||
<div class="card-view__key-value-pairs__col">
|
||||
<mat-form-field class="example-full-width">
|
||||
<div class="adf-card-view__key-value-pairs__row" *ngFor="let item of values; let i = index">
|
||||
<div class="adf-card-view__key-value-pairs__col">
|
||||
<mat-form-field class="adf-example-full-width">
|
||||
<input matInput
|
||||
placeholder="{{ 'CORE.CARDVIEW.KEYVALUEPAIRS.NAME' | translate }}"
|
||||
(blur)="onBlur(item.value)"
|
||||
@@ -41,8 +41,8 @@
|
||||
[(ngModel)]="values[i].name">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="card-view__key-value-pairs__col">
|
||||
<mat-form-field class="example-full-width">
|
||||
<div class="adf-card-view__key-value-pairs__col">
|
||||
<mat-form-field class="adf-example-full-width">
|
||||
<input matInput
|
||||
placeholder="{{ 'CORE.CARDVIEW.KEYVALUEPAIRS.VALUE' | translate }}"
|
||||
(blur)="onBlur(item.value)"
|
||||
@@ -50,7 +50,7 @@
|
||||
[(ngModel)]="values[i].value">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<button mat-icon-button (click)="remove(i)" class="card-view__key-value-pairs__remove-btn">
|
||||
<button mat-icon-button (click)="remove(i)" class="adf-card-view__key-value-pairs__remove-btn">
|
||||
<mat-icon>close</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
+1
-1
@@ -1,4 +1,4 @@
|
||||
.card-view {
|
||||
.adf-card-view {
|
||||
&__key-value-pairs {
|
||||
&__col {
|
||||
display: inline-block;
|
||||
|
||||
+9
-9
@@ -72,8 +72,8 @@ describe('CardViewKeyValuePairsItemComponent', () => {
|
||||
component.ngOnChanges();
|
||||
fixture.detectChanges();
|
||||
|
||||
const table = fixture.debugElement.query(By.css('.card-view__key-value-pairs__read-only'));
|
||||
const form = fixture.debugElement.query(By.css('.card-view__key-value-pairs'));
|
||||
const table = fixture.debugElement.query(By.css('.adf-card-view__key-value-pairs__read-only'));
|
||||
const form = fixture.debugElement.query(By.css('.adf-card-view__key-value-pairs'));
|
||||
|
||||
expect(table).not.toBeNull();
|
||||
expect(form).toBeNull();
|
||||
@@ -83,13 +83,13 @@ describe('CardViewKeyValuePairsItemComponent', () => {
|
||||
component.ngOnChanges();
|
||||
fixture.detectChanges();
|
||||
|
||||
const addButton = fixture.debugElement.query(By.css('.card-view__key-value-pairs__add-btn'));
|
||||
const addButton = fixture.debugElement.query(By.css('.adf-card-view__key-value-pairs__add-btn'));
|
||||
addButton.triggerEventHandler('click', null);
|
||||
fixture.detectChanges();
|
||||
|
||||
expect(JSON.stringify(component.values)).toBe(JSON.stringify(mockEmptyData));
|
||||
|
||||
const content = fixture.debugElement.query(By.css('.card-view__key-value-pairs'));
|
||||
const content = fixture.debugElement.query(By.css('.adf-card-view__key-value-pairs'));
|
||||
expect(content).not.toBeNull();
|
||||
|
||||
let nameInput = fixture.debugElement.query(By.css(`[data-automation-id="card-${component.property.key}-name-input-0"]`));
|
||||
@@ -104,16 +104,16 @@ describe('CardViewKeyValuePairsItemComponent', () => {
|
||||
component.ngOnChanges();
|
||||
fixture.detectChanges();
|
||||
|
||||
const addButton = fixture.debugElement.query(By.css('.card-view__key-value-pairs__add-btn'));
|
||||
const addButton = fixture.debugElement.query(By.css('.adf-card-view__key-value-pairs__add-btn'));
|
||||
addButton.triggerEventHandler('click', null);
|
||||
fixture.detectChanges();
|
||||
|
||||
const removeButton = fixture.debugElement.query(By.css('.card-view__key-value-pairs__remove-btn'));
|
||||
const removeButton = fixture.debugElement.query(By.css('.adf-card-view__key-value-pairs__remove-btn'));
|
||||
removeButton.triggerEventHandler('click', null);
|
||||
fixture.detectChanges();
|
||||
|
||||
expect(component.values.length).toBe(0);
|
||||
const content = fixture.debugElement.query(By.css('.card-view__key-value-pairs'));
|
||||
const content = fixture.debugElement.query(By.css('.adf-card-view__key-value-pairs'));
|
||||
expect(content).toBeNull();
|
||||
|
||||
expect(cardViewUpdateService.update).toHaveBeenCalled();
|
||||
@@ -125,7 +125,7 @@ describe('CardViewKeyValuePairsItemComponent', () => {
|
||||
component.ngOnChanges();
|
||||
fixture.detectChanges();
|
||||
|
||||
const addButton = fixture.debugElement.query(By.css('.card-view__key-value-pairs__add-btn'));
|
||||
const addButton = fixture.debugElement.query(By.css('.adf-card-view__key-value-pairs__add-btn'));
|
||||
addButton.triggerEventHandler('click', null);
|
||||
fixture.detectChanges();
|
||||
|
||||
@@ -153,7 +153,7 @@ describe('CardViewKeyValuePairsItemComponent', () => {
|
||||
component.ngOnChanges();
|
||||
fixture.detectChanges();
|
||||
|
||||
const addButton = fixture.debugElement.query(By.css('.card-view__key-value-pairs__add-btn'));
|
||||
const addButton = fixture.debugElement.query(By.css('.adf-card-view__key-value-pairs__add-btn'));
|
||||
addButton.triggerEventHandler('click', null);
|
||||
fixture.detectChanges();
|
||||
|
||||
|
||||
+1
-1
@@ -1,3 +1,3 @@
|
||||
.mat-form-field-type-mat-select {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<mat-list-item *ngFor="let comment of comments"
|
||||
(click)="selectComment(comment)"
|
||||
class="adf-comment-list-item"
|
||||
[class.is-selected]="comment.isSelected"
|
||||
[class.adf-is-selected]="comment.isSelected"
|
||||
id="adf-comment-{{comment?.id}}">
|
||||
<div id="comment-user-icon" class="adf-comment-img-container">
|
||||
<div
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
$primaryColor: mat-color($primary, 100);
|
||||
$rippleColor: mat-color($primary, 300);
|
||||
|
||||
.is-selected {
|
||||
.adf-is-selected {
|
||||
background: mat-color($primary, 100);
|
||||
}
|
||||
|
||||
@@ -19,7 +19,9 @@
|
||||
}
|
||||
|
||||
&-comment-list-item {
|
||||
/* stylelint-disable */
|
||||
white-space: initial;
|
||||
/* stylelint-enable */
|
||||
display: table-row-group;
|
||||
padding-top: 12px;
|
||||
overflow: hidden;
|
||||
@@ -28,7 +30,9 @@
|
||||
background-position: center;
|
||||
|
||||
&:hover {
|
||||
background: $primaryColor radial-gradient(circle, transparent 1%, $primaryColor 1%) center/15000%;
|
||||
background: $primaryColor
|
||||
radial-gradient(circle, transparent 1%, $primaryColor 1%)
|
||||
center/15000%;
|
||||
}
|
||||
&:active {
|
||||
background-color: $rippleColor;
|
||||
@@ -61,7 +65,9 @@
|
||||
width: calc(100% - 10px);
|
||||
padding: 2px 10px;
|
||||
font-style: italic;
|
||||
/* stylelint-disable */
|
||||
white-space: initial !important;
|
||||
/* stylelint-enable */
|
||||
font-size: 14px;
|
||||
letter-spacing: -0.2px;
|
||||
line-height: 1.43;
|
||||
|
||||
@@ -158,7 +158,7 @@ describe('CommentListComponent', () => {
|
||||
|
||||
commentList.clickRow.subscribe((selectedComment) => {
|
||||
fixture.detectChanges();
|
||||
let commentSelectedList = fixture.nativeElement.querySelectorAll('.is-selected');
|
||||
let commentSelectedList = fixture.nativeElement.querySelectorAll('.adf-is-selected');
|
||||
expect(commentSelectedList.length).toBe(1);
|
||||
expect(commentSelectedList[0].textContent).toContain('2nd Test Comment');
|
||||
});
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
<div
|
||||
*ngIf="data" class="full-width"
|
||||
*ngIf="data" class="adf-full-width"
|
||||
[class.adf-data-table-card]="display === 'gallery'"
|
||||
[class.adf-data-table]="display === 'list'"
|
||||
[class.adf-data-table--empty]="isEmpty()">
|
||||
<div *ngIf="isHeaderVisible()" class="adf-datatable-header">
|
||||
<div class="adf-datatable-row" *ngIf="display === 'list'">
|
||||
<!-- Actions (left) -->
|
||||
<div *ngIf="actions && actionsPosition === 'left'" class="actions-column adf-datatable-table-cell-header">
|
||||
<span class="sr-only">Actions</span>
|
||||
<div *ngIf="actions && actionsPosition === 'left'" class="adf-actions-column adf-datatable-table-cell-header">
|
||||
<span class="adf-sr-only">Actions</span>
|
||||
</div>
|
||||
<!-- Columns -->
|
||||
<div *ngIf="multiselect" class="adf-datatable-table-cell-header">
|
||||
@@ -15,7 +15,7 @@
|
||||
</div>
|
||||
<div class="adf-data-table-cell--{{col.type || 'text'}} {{col.cssClass}} adf-datatable-table-cell-header"
|
||||
*ngFor="let col of data.getColumns()"
|
||||
[class.sortable]="col.sortable"
|
||||
[class.adf-sortable]="col.sortable"
|
||||
[attr.data-automation-id]="'auto_id_' + col.key"
|
||||
[class.adf-data-table__header--sorted-asc]="isColumnSorted(col, 'asc')"
|
||||
[class.adf-data-table__header--sorted-desc]="isColumnSorted(col, 'desc')"
|
||||
@@ -24,12 +24,12 @@
|
||||
role="button"
|
||||
tabindex="0"
|
||||
title="{{ col.title | translate }}">
|
||||
<span *ngIf="col.srTitle" class="sr-only">{{ col.srTitle | translate }}</span>
|
||||
<span *ngIf="col.srTitle" class="adf-sr-only">{{ col.srTitle | translate }}</span>
|
||||
<span *ngIf="col.title">{{ col.title | translate}}</span>
|
||||
</div>
|
||||
<!-- Actions (right) -->
|
||||
<div *ngIf="actions && actionsPosition === 'right'" class="actions-column adf-datatable-table-cell-header">
|
||||
<span class="sr-only">Actions</span>
|
||||
<div *ngIf="actions && actionsPosition === 'right'" class="adf-actions-column adf-datatable-table-cell-header">
|
||||
<span class="adf-sr-only">Actions</span>
|
||||
</div>
|
||||
</div>
|
||||
<mat-form-field *ngIf="display === 'gallery'">
|
||||
@@ -50,7 +50,7 @@
|
||||
<div *ngFor="let row of data.getRows(); let idx = index"
|
||||
class="adf-datatable-row"
|
||||
role="button"
|
||||
[class.is-selected]="row.isSelected"
|
||||
[class.adf-is-selected]="row.isSelected"
|
||||
[adf-upload]="allowDropFiles && rowAllowsDrop(row)" [adf-upload-data]="row"
|
||||
[ngStyle]="rowStyle"
|
||||
[ngClass]="getRowStyle(row)"
|
||||
@@ -89,9 +89,9 @@
|
||||
(keydown.enter)="onEnterKeyPressed(row, $event)"
|
||||
[context-menu]="getContextMenuActions(row, col)"
|
||||
[context-menu-enabled]="contextMenu">
|
||||
<div *ngIf="!col.template" class="cell-container">
|
||||
<div *ngIf="!col.template" class="adf-cell-container">
|
||||
<ng-container [ngSwitch]="col.type">
|
||||
<div *ngSwitchCase="'image'" class="cell-value">
|
||||
<div *ngSwitchCase="'image'" class="adf-cell-value">
|
||||
<mat-icon *ngIf="isIconValue(row, col); else no_iconvalue">{{ asIconValue(row, col) }}
|
||||
</mat-icon>
|
||||
<ng-template #no_iconvalue>
|
||||
@@ -106,11 +106,11 @@
|
||||
</ng-template>
|
||||
</ng-template>
|
||||
</div>
|
||||
<div *ngSwitchCase="'icon'" class="cell-value">
|
||||
<span class="sr-only">{{ iconAltTextKey(data.getValue(row, col)) | translate }}</span>
|
||||
<div *ngSwitchCase="'icon'" class="adf-cell-value">
|
||||
<span class="adf-sr-only">{{ iconAltTextKey(data.getValue(row, col)) | translate }}</span>
|
||||
<mat-icon>{{ data.getValue(row, col) }}</mat-icon>
|
||||
</div>
|
||||
<div *ngSwitchCase="'date'" class="cell-value"
|
||||
<div *ngSwitchCase="'date'" class="adf-cell-value"
|
||||
[attr.data-automation-id]="'date_' + (data.getValue(row, col) | date: 'medium') ">
|
||||
<adf-date-cell
|
||||
[data]="data"
|
||||
@@ -119,7 +119,7 @@
|
||||
[tooltip]="getCellTooltip(row, col)">
|
||||
</adf-date-cell>
|
||||
</div>
|
||||
<div *ngSwitchCase="'location'" class="cell-value"
|
||||
<div *ngSwitchCase="'location'" class="adf-cell-value"
|
||||
[attr.data-automation-id]="'location' + data.getValue(row, col)">
|
||||
<adf-location-cell
|
||||
[data]="data"
|
||||
@@ -128,7 +128,7 @@
|
||||
[tooltip]="getCellTooltip(row, col)">
|
||||
</adf-location-cell>
|
||||
</div>
|
||||
<div *ngSwitchCase="'fileSize'" class="cell-value"
|
||||
<div *ngSwitchCase="'fileSize'" class="adf-cell-value"
|
||||
[attr.data-automation-id]="'fileSize_' + data.getValue(row, col)">
|
||||
<adf-filesize-cell
|
||||
[data]="data"
|
||||
@@ -137,7 +137,7 @@
|
||||
[tooltip]="getCellTooltip(row, col)">
|
||||
</adf-filesize-cell>
|
||||
</div>
|
||||
<div *ngSwitchCase="'text'" class="cell-value"
|
||||
<div *ngSwitchCase="'text'" class="adf-cell-value"
|
||||
[attr.data-automation-id]="'text_' + data.getValue(row, col)">
|
||||
<adf-datatable-cell
|
||||
[data]="data"
|
||||
@@ -146,12 +146,12 @@
|
||||
[tooltip]="getCellTooltip(row, col)">
|
||||
</adf-datatable-cell>
|
||||
</div>
|
||||
<span *ngSwitchDefault class="cell-value">
|
||||
<span *ngSwitchDefault class="adf-cell-value">
|
||||
<!-- empty cell for unknown column type -->
|
||||
</span>
|
||||
</ng-container>
|
||||
</div>
|
||||
<div *ngIf="col.template" class="cell-container">
|
||||
<div *ngIf="col.template" class="adf-cell-container">
|
||||
<ng-container
|
||||
[ngTemplateOutlet]="col.template"
|
||||
[ngTemplateOutletContext]="{ $implicit: { data: data, row: row, col: col }, value: data.getValue(row, col) }">
|
||||
@@ -161,7 +161,7 @@
|
||||
|
||||
<!-- Actions (right) -->
|
||||
<div *ngIf="actions && actionsPosition === 'right'"
|
||||
class="adf-datatable-table-cell alfresco-datatable__actions-cell">
|
||||
class="adf-datatable-table-cell adf-datatable__actions-cell">
|
||||
<button mat-icon-button [matMenuTriggerFor]="menu"
|
||||
[title]="'ADF-DATATABLE.CONTENT-ACTIONS.TOOLTIP' | translate"
|
||||
[attr.id]="'action_menu_right_' + idx"
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
$data-table-header-color: mat-color($foreground, text) !default;
|
||||
$data-table-header-sorted-color: mat-color($foreground, text) !default;
|
||||
$data-table-header-sorted-icon-hover-color: mat-color($foreground, disabled-text) !default;
|
||||
$data-table-divider-color: mat-color($foreground, text, .07) !default;
|
||||
$data-table-divider-color: mat-color($foreground, text, 0.07) !default;
|
||||
$data-table-hover-color: mat-color($background, 'hover') !default;
|
||||
$data-table-selection-color: mat-color($background, 'selected-button') !default;
|
||||
$data-table-dividers: 1px solid $data-table-divider-color !default;
|
||||
@@ -63,7 +63,7 @@
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.is-selected {
|
||||
.adf-is-selected {
|
||||
background: mat-color($primary, 100);
|
||||
padding-bottom: 31px;
|
||||
}
|
||||
@@ -104,7 +104,7 @@
|
||||
overflow: hidden;
|
||||
outline: none;
|
||||
|
||||
&:before {
|
||||
&::before {
|
||||
margin-left: 10px;
|
||||
text-align: left;
|
||||
content: attr(title);
|
||||
@@ -117,15 +117,16 @@
|
||||
}
|
||||
|
||||
}
|
||||
.alfresco-datatable__actions-cell {
|
||||
|
||||
.adf-datatable__actions-cell {
|
||||
position: absolute;
|
||||
height: 42px !important;
|
||||
width: 42px !important;
|
||||
right: 0px;
|
||||
right: 0;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.image-table-cell {
|
||||
.adf-image-table-cell {
|
||||
margin: 8px;
|
||||
padding: 4px;
|
||||
overflow: visible;
|
||||
@@ -133,12 +134,12 @@
|
||||
border-bottom-width: 1px;
|
||||
border-bottom-style: solid;
|
||||
|
||||
.cell-container {
|
||||
.adf-cell-container {
|
||||
float: left;
|
||||
width: 42px;
|
||||
}
|
||||
|
||||
&:after {
|
||||
&::after {
|
||||
margin: 2px;
|
||||
content: attr(filename);
|
||||
float: left;
|
||||
@@ -167,7 +168,7 @@
|
||||
width: 100%;
|
||||
position: relative;
|
||||
border: $data-table-dividers;
|
||||
border-collapse: collapse;
|
||||
// border-collapse: collapse;
|
||||
white-space: nowrap;
|
||||
font-size: $data-table-font-size;
|
||||
background-color: mat-color($background, card);
|
||||
@@ -216,7 +217,7 @@
|
||||
background-color: $data-table-hover-color;
|
||||
}
|
||||
|
||||
&.is-selected, &.is-selected:hover {
|
||||
&.adf-is-selected, &.adf-is-selected:hover {
|
||||
background-color: $data-table-selection-color;
|
||||
}
|
||||
|
||||
@@ -264,16 +265,15 @@
|
||||
padding-top: $data-table-cell-top;
|
||||
box-sizing: border-box;
|
||||
|
||||
@include no-select;
|
||||
@include adf-no-select;
|
||||
}
|
||||
|
||||
.adf-datatable-table-cell-header {
|
||||
@include no-select;
|
||||
@include adf-no-select;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
vertical-align: bottom;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
line-height: 24px;
|
||||
letter-spacing: 0;
|
||||
@@ -284,8 +284,8 @@
|
||||
box-sizing: border-box;
|
||||
white-space: nowrap;
|
||||
|
||||
&.sortable {
|
||||
@include no-select;
|
||||
&.adf-sortable {
|
||||
@include adf-no-select;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -294,16 +294,16 @@
|
||||
&.adf-data-table__header--sorted-asc,
|
||||
&.adf-data-table__header--sorted-desc {
|
||||
color: $data-table-header-sorted-color;
|
||||
&:before {
|
||||
&::before {
|
||||
@include typo-icon;
|
||||
font-size: $data-table-header-sort-icon-size;
|
||||
content: "\e5d8";
|
||||
content: '\e5d8';
|
||||
margin-right: 5px;
|
||||
vertical-align: sub;
|
||||
}
|
||||
}
|
||||
&.adf-data-table__header--sorted-desc:before {
|
||||
content: "\e5db";
|
||||
&.adf-data-table__header--sorted-desc::before {
|
||||
content: '\e5db';
|
||||
}
|
||||
}
|
||||
|
||||
@@ -329,7 +329,7 @@
|
||||
width: 10px;
|
||||
text-align: left;
|
||||
|
||||
.cell-value {
|
||||
.adf-cell-value {
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
@@ -338,7 +338,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.cell-container {
|
||||
.adf-cell-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
@@ -350,13 +350,13 @@
|
||||
color: mat-color($foreground, text);
|
||||
|
||||
&:hover {
|
||||
color: #2196F3;
|
||||
color: #2196f3;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.full-width {
|
||||
.adf-full-width {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@@ -392,12 +392,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
.ellipsis-cell {
|
||||
.cell-container {
|
||||
.adf-ellipsis-cell {
|
||||
.adf-cell-container {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.cell-container > * {
|
||||
.adf-cell-container > * {
|
||||
display: block;
|
||||
position: absolute;
|
||||
max-width: calc(100% - 2em);
|
||||
@@ -408,7 +408,7 @@
|
||||
}
|
||||
|
||||
/* visible content */
|
||||
.cell-value {
|
||||
.adf-cell-value {
|
||||
display: block;
|
||||
position: absolute;
|
||||
max-width: calc(100% - 2em);
|
||||
@@ -420,13 +420,13 @@
|
||||
|
||||
/* query for Microsoft IE 11*/
|
||||
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
|
||||
.cell-value {
|
||||
.adf-cell-value {
|
||||
top: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* cell stretching content */
|
||||
& > div:after {
|
||||
& > div::after {
|
||||
content: attr(title);
|
||||
overflow: hidden;
|
||||
height: 0;
|
||||
@@ -435,7 +435,7 @@
|
||||
}
|
||||
|
||||
/* [Accessibility] For screen reader only */
|
||||
.sr-only {
|
||||
.adf-sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
@@ -447,19 +447,19 @@
|
||||
}
|
||||
|
||||
/* Utils */
|
||||
.hidden {
|
||||
.adf-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* mobile phone */
|
||||
@media all and (max-width: 768px) {
|
||||
.desktop-only {
|
||||
.adf-desktop-only {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-device-width: 768px) {
|
||||
.desktop-only {
|
||||
.adf-desktop-only {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<adf-datatable *ngIf="!isEmpty()"
|
||||
[rows]="forms">
|
||||
<data-columns>
|
||||
<data-column key="name" type="text" title="Name" class="ellipsis-cell" [sortable]="true"></data-column>
|
||||
<data-column key="lastUpdatedByFullName" type="text" title="User" class="ellipsis-cell" [sortable]="true"></data-column>
|
||||
<data-column key="name" type="text" title="Name" class="adf-ellipsis-cell" [sortable]="true"></data-column>
|
||||
<data-column key="lastUpdatedByFullName" type="text" title="User" class="adf-ellipsis-cell" [sortable]="true"></data-column>
|
||||
<data-column key="lastUpdated" type="date" format="shortDate" title="Date"></data-column>
|
||||
</data-columns>
|
||||
</adf-datatable>
|
||||
|
||||
@@ -9,9 +9,9 @@
|
||||
<mat-card-title>
|
||||
<h4>
|
||||
<div *ngIf="showValidationIcon" class="adf-form-validation-button">
|
||||
<i id="adf-valid-form-icon" class="material-icons" *ngIf="form.isValid; else no_valid_form">check_circle</i>
|
||||
<i id="adf-valid-form-icon" class="adf-material-icons" *ngIf="form.isValid; else no_valid_form">check_circle</i>
|
||||
<ng-template #no_valid_form>
|
||||
<i id="adf-invalid-form-icon" class="material-icons invalid-color">error</i>
|
||||
<i id="adf-invalid-form-icon" class="adf-material-icons adf-invalid-color">error</i>
|
||||
</ng-template>
|
||||
</div>
|
||||
<div *ngIf="showRefreshButton" class="adf-form-reload-button">
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
}
|
||||
|
||||
& .mat-card-header-text {
|
||||
margin: 0px !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
& .mat-tab-body-content {
|
||||
@@ -36,7 +36,7 @@
|
||||
}
|
||||
|
||||
& .mat-form-field-wrapper {
|
||||
margin: 0px 12px 0px 0px;
|
||||
margin: 0 12px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -48,12 +48,12 @@
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
&-form-debug-container .debug-toggle-text {
|
||||
&-form-debug-container .adf-debug-toggle-text {
|
||||
padding-left: 15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&-form-debug-container .debug-toggle-text:hover {
|
||||
&-form-debug-container .adf-debug-toggle-text:hover {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@@ -69,7 +69,7 @@
|
||||
top: 39px;
|
||||
color: mat-color($accent);
|
||||
|
||||
& .invalid-color {
|
||||
& .adf-invalid-color {
|
||||
color: mat-color($warn);
|
||||
}
|
||||
}
|
||||
@@ -79,7 +79,7 @@
|
||||
}
|
||||
|
||||
&-task-title {
|
||||
text-align: center
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&-label {
|
||||
|
||||
@@ -10,17 +10,17 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mat-form-field-flex{
|
||||
.mat-form-field-flex {
|
||||
position: relative;
|
||||
padding-top: 18.5px;
|
||||
}
|
||||
|
||||
.mat-form-field-infix{
|
||||
.mat-form-field-infix {
|
||||
position: static;
|
||||
padding-top: 19px;
|
||||
}
|
||||
|
||||
.adf-label{
|
||||
.adf-label {
|
||||
position: absolute;
|
||||
top: 18.5px;
|
||||
left:0;
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<div [hidden]="!content?.isGroup()" class="container-widget__header">
|
||||
<h4 class="container-widget__header-text" id="container-header"
|
||||
[class.collapsible]="content?.isCollapsible()">
|
||||
<div [hidden]="!content?.isGroup()" class="adf-container-widget__header">
|
||||
<h4 class="adf-container-widget__header-text" id="container-header"
|
||||
[class.adf-collapsible]="content?.isCollapsible()">
|
||||
<button *ngIf="content?.isCollapsible()"
|
||||
mat-icon-button
|
||||
class="mdl-button--icon"
|
||||
@@ -11,8 +11,8 @@
|
||||
</h4>
|
||||
</div>
|
||||
|
||||
<section class="grid-list" *ngIf="content?.isExpanded">
|
||||
<div class="grid-list-item" *ngFor="let field of fields" [style.width]="getColumnWith(field)">
|
||||
<section class="adf-grid-list" *ngIf="content?.isExpanded">
|
||||
<div class="adf-grid-list-item" *ngFor="let field of fields" [style.width]="getColumnWith(field)">
|
||||
<adf-form-field *ngIf="field" [field]="field"></adf-form-field>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -4,11 +4,11 @@
|
||||
$accent: map-get($theme, accent);
|
||||
$warn: map-get($theme, warn);
|
||||
|
||||
.hidden{
|
||||
.adf-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.container-widget__header-text {
|
||||
.adf-container-widget__header-text {
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.87);
|
||||
padding-bottom: 10px;
|
||||
cursor: default;
|
||||
@@ -21,7 +21,7 @@
|
||||
/* IE/Edge */
|
||||
-webkit-touch-callout: none;
|
||||
/* iOS Safari */
|
||||
&.collapsible {
|
||||
&.adf-collapsible {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
@@ -34,14 +34,14 @@
|
||||
}
|
||||
|
||||
container-widget {
|
||||
.grid-list {
|
||||
.adf-grid-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-left: -1%;
|
||||
margin-right: -1%;
|
||||
}
|
||||
|
||||
.grid-list-item {
|
||||
.adf-grid-list-item {
|
||||
flex-grow: 1;
|
||||
box-sizing: border-box;
|
||||
padding-left: 1%;
|
||||
@@ -49,7 +49,7 @@
|
||||
}
|
||||
|
||||
@media screen and ($mat-small) {
|
||||
.grid-list-item {
|
||||
.adf-grid-list-item {
|
||||
flex: 1 0 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,12 +5,12 @@
|
||||
width: 100%;
|
||||
margin-top: 13px;
|
||||
|
||||
.adf-select{
|
||||
.adf-select {
|
||||
padding-top: 0 !important;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mat-select-value-text{
|
||||
.mat-select-value-text {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&-dropdown-required-message .adf-error-text-container{
|
||||
&-dropdown-required-message .adf-error-text-container {
|
||||
margin-top: 1px !important;
|
||||
}
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
|
||||
<div *ngIf="!editMode">
|
||||
<div class="adf-table-container">
|
||||
<table class="full-width adf-dynamic-table" id="dynamic-table-{{content.id}}">
|
||||
<table class="adf-full-width adf-dynamic-table" id="dynamic-table-{{content.id}}">
|
||||
<thead>
|
||||
<tr>
|
||||
<th *ngFor="let column of content.visibleColumns">
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
$dynamic-table-header-color: mat-color($foreground, text) !default;
|
||||
$dynamic-table-header-sorted-color: mat-color($foreground, text) !default;
|
||||
$dynamic-table-header-sorted-icon-hover-color: mat-color($foreground, disabled-text) !default;
|
||||
$dynamic-table-divider-color: mat-color($foreground, text, .07) !default;
|
||||
$dynamic-table-divider-color: mat-color($foreground, text, 0.07) !default;
|
||||
$dynamic-table-hover-color: #eeeeee !default;
|
||||
$dynamic-table-selection-color: #e0f7fa !default;
|
||||
$dynamic-table-dividers: 1px solid $dynamic-table-divider-color !default;
|
||||
@@ -56,7 +56,7 @@
|
||||
background-color: $dynamic-table-hover-color;
|
||||
}
|
||||
|
||||
&.is-selected, &.is-selected:hover {
|
||||
&.adf-is-selected, &.adf-is-selected:hover {
|
||||
background-color: $dynamic-table-selection-color;
|
||||
}
|
||||
|
||||
@@ -92,12 +92,12 @@
|
||||
padding-top: $dynamic-table-cell-top;
|
||||
box-sizing: border-box;
|
||||
|
||||
@include no-select;
|
||||
@include adf-no-select;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
th {
|
||||
@include no-select;
|
||||
@include adf-no-select;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
vertical-align: bottom;
|
||||
@@ -111,8 +111,8 @@
|
||||
padding-bottom: 8px;
|
||||
box-sizing: border-box;
|
||||
|
||||
&.sortable {
|
||||
@include no-select;
|
||||
&.adf-sortable {
|
||||
@include adf-no-select;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -121,22 +121,22 @@
|
||||
&.adf-dynamic-table__header--sorted-asc,
|
||||
&.adf-dynamic-table__header--sorted-desc {
|
||||
color: $dynamic-table-header-sorted-color;
|
||||
&:before {
|
||||
&::before {
|
||||
@include typo-icon;
|
||||
font-size: $dynamic-table-header-sort-icon-size;
|
||||
content: "\e5d8";
|
||||
content: '\e5d8';
|
||||
margin-right: 5px;
|
||||
vertical-align: sub;
|
||||
}
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
&:before {
|
||||
&::before {
|
||||
color: $dynamic-table-header-sorted-icon-hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.adf-dynamic-table__header--sorted-desc:before {
|
||||
content: "\e5db";
|
||||
&.adf-dynamic-table__header--sorted-desc::before {
|
||||
content: '\e5db';
|
||||
}
|
||||
}
|
||||
|
||||
@@ -162,7 +162,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.full-width {
|
||||
.adf-full-width {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
.adf-error-text{
|
||||
.adf-error-text {
|
||||
width: 85%;
|
||||
}
|
||||
|
||||
|
||||
@@ -57,14 +57,14 @@
|
||||
|
||||
.adf-label {
|
||||
color: mat-color($warn);
|
||||
&:after {
|
||||
&::after {
|
||||
background-color: mat-color($warn);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* query for Microsoft IE 11*/
|
||||
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
|
||||
adf-form-field {
|
||||
@@ -74,6 +74,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
overflow: hidden;
|
||||
transition: all .3s cubic-bezier(.55,0,.55,.2);
|
||||
transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
|
||||
opacity: 1;
|
||||
padding-top: 5px;
|
||||
text-align: right;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
.adf-unknown-text{
|
||||
.adf-unknown-text {
|
||||
margin-left: 10px;
|
||||
color: red;
|
||||
}
|
||||
|
||||
@@ -36,7 +36,7 @@
|
||||
|
||||
&-upload-files-row {
|
||||
.mat-line {
|
||||
margin-bottom: 0px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
$background: map-get($theme, background);
|
||||
$foreground: map-get($theme, foreground);
|
||||
$adf-info-drawer-layout-background-color: mat-color($background, background) !default;
|
||||
$adf-info-drawer-layout-title-color: mat-color($foreground, text, .54) !default;
|
||||
$adf-info-drawer-layout-title-color: mat-color($foreground, text, 0.54) !default;
|
||||
$adf-info-drawer-layout-title-font-size: 20px !default;
|
||||
|
||||
.adf {
|
||||
@@ -21,13 +21,13 @@
|
||||
}
|
||||
|
||||
&-header {
|
||||
padding: 13px 0px 0px 23px;
|
||||
padding: 13px 0 0 23px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 40px;
|
||||
|
||||
&-buttons {
|
||||
padding-right:18px;
|
||||
padding-right:18px;
|
||||
mat-icon {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@@ -43,10 +43,12 @@
|
||||
}
|
||||
|
||||
.mat-tab-body-content {
|
||||
/* stylelint-disable */
|
||||
overflow: initial;
|
||||
/* stylelint-enable */
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -43,7 +43,7 @@
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.adf-userinfo-name{
|
||||
.adf-userinfo-name {
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<mat-sidenav
|
||||
[position]="position"
|
||||
[disableClose]="!isMobileScreenSize"
|
||||
[ngClass]="{ 'sidenav--hidden': hideSidenav }"
|
||||
[ngClass]="{ 'adf-sidenav--hidden': hideSidenav }"
|
||||
[@sidenavAnimation]="sidenavAnimationState"
|
||||
[opened]="!isMobileScreenSize"
|
||||
[mode]="isMobileScreenSize ? 'over' : 'side'">
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
ng-content {
|
||||
display: block;
|
||||
@@ -16,7 +16,7 @@
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sidenav--hidden {
|
||||
.adf-sidenav--hidden {
|
||||
visibility: hidden !important;
|
||||
width: 0 !important;
|
||||
transform: unset !important;
|
||||
@@ -33,12 +33,12 @@
|
||||
.mat-sidenav {
|
||||
overflow: hidden;
|
||||
border-right: 1px solid mat-color($foreground, text, 0.07);
|
||||
background-color: mat-color($background,background);
|
||||
background-color: mat-color($background, background);
|
||||
}
|
||||
|
||||
mat-sidenav-content.mat-sidenav-content,
|
||||
.mat-drawer-transition .mat-drawer-content {
|
||||
margin-left: 0px !important;
|
||||
margin-left: 0 !important;
|
||||
transform: unset !important;
|
||||
transition-property: unset !important;
|
||||
transition-duration: unset !important;
|
||||
|
||||
@@ -34,7 +34,7 @@
|
||||
}
|
||||
}
|
||||
&-sidebar-action-menu-icon {
|
||||
margin: 18px 0px 0px 20px;
|
||||
margin: 18px 0 0 20px;
|
||||
color: mat-color($foreground, text, $adf-sidebar-action-menu-opacity);
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<div class="sidenav-layout">
|
||||
<div class="adf-sidenav-layout">
|
||||
<ng-container *ngIf="!isHeaderInside">
|
||||
<ng-container class="adf-sidenav-layout-outer-header"
|
||||
*ngTemplateOutlet="headerTemplate; context:templateContext"></ng-container>
|
||||
@@ -12,7 +12,7 @@
|
||||
[hideSidenav]="hideSidenav"
|
||||
[expandedSidenav]="expandedSidenav"
|
||||
data-automation-id="adf-layout-container"
|
||||
class="layout__content">
|
||||
class="adf-layout__content">
|
||||
|
||||
<ng-container app-layout-navigation
|
||||
*ngTemplateOutlet="navigationTemplate; context:templateContext"></ng-container>
|
||||
|
||||
@@ -2,12 +2,12 @@
|
||||
display: flex;
|
||||
flex: 1;
|
||||
|
||||
.sidenav-layout {
|
||||
.adf-sidenav-layout {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.layout__content {
|
||||
.adf-layout__content {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -144,8 +144,8 @@ describe('SidenavLayoutComponent', () => {
|
||||
|
||||
describe('adf-sidenav-layout-header', () => {
|
||||
|
||||
const outerHeaderSelector = By.css('.sidenav-layout > #header-test'),
|
||||
innerHeaderSelector = By.css('.sidenav-layout [data-automation-id="adf-layout-container"] #header-test');
|
||||
const outerHeaderSelector = By.css('.adf-sidenav-layout > #header-test'),
|
||||
innerHeaderSelector = By.css('.adf-sidenav-layout [data-automation-id="adf-layout-container"] #header-test');
|
||||
|
||||
it('should contain the transcluded header template outside of the layout-container', () => {
|
||||
mediaQueryList.matches = false;
|
||||
|
||||
@@ -6,15 +6,13 @@
|
||||
$foreground: map-get($theme, foreground);
|
||||
$text-color-primary: mat-color($foreground, text);
|
||||
|
||||
.adf-panel-login-dialog-component .adf-login-content {
|
||||
.adf-panel-login-dialog-component .adf-login-content {
|
||||
.mat-card-actions,
|
||||
.adf-login-button,
|
||||
.adf-login__remember-me,
|
||||
.copyright {
|
||||
.adf-copyright {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
|
||||
|
||||
.adf-login-dialog-content adf-login .adf-login-content .adf-login-card-wide {
|
||||
padding: 0px;
|
||||
padding: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<div class="adf-login-content" [style.background-image]="'url(' + backgroundImageUrl + ')'">
|
||||
<div class="ie11FixerParent">
|
||||
<div class="ie11FixerChild">
|
||||
<div class="adf-ie11FixerParent">
|
||||
<div class="adf-ie11FixerChild">
|
||||
|
||||
<mat-card class="adf-login-card-wide">
|
||||
<form id="adf-login-form" [formGroup]="form" (submit)="onSubmit(form.value)" autocomplete="off">
|
||||
@@ -25,15 +25,15 @@
|
||||
<!--ERRORS AREA-->
|
||||
<div class="adf-error-container">
|
||||
<div *ngIf="isError" id="login-error" data-automation-id="login-error"
|
||||
class="error adf-error-message">
|
||||
<mat-icon class="error-icon">warning</mat-icon>
|
||||
<span class="login-error-message">{{errorMsg | translate }}</span>
|
||||
class="adf-error adf-error-message">
|
||||
<mat-icon class="adf-error-icon">warning</mat-icon>
|
||||
<span class="adf-login-error-message">{{errorMsg | translate }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--USERNAME FIELD-->
|
||||
<div class="adf-login__field"
|
||||
[ngClass]="{'is-invalid': isErrorStyle(form.controls.username)}">
|
||||
[ngClass]="{'adf-is-invalid': isErrorStyle(form.controls.username)}">
|
||||
<mat-form-field class="adf-full-width" floatPlaceholder="never" color="primary">
|
||||
<input matInput placeholder="{{'LOGIN.LABEL.USERNAME' | translate }}"
|
||||
type="text"
|
||||
@@ -82,8 +82,8 @@
|
||||
<button type="submit" id="login-button" tabindex="4"
|
||||
class="adf-login-button"
|
||||
mat-raised-button color="primary"
|
||||
[class.isChecking]="actualLoginStep === LoginSteps.Checking"
|
||||
[class.isWelcome]="actualLoginStep === LoginSteps.Welcome"
|
||||
[class.adf-isChecking]="actualLoginStep === LoginSteps.Checking"
|
||||
[class.adf-isWelcome]="actualLoginStep === LoginSteps.Welcome"
|
||||
data-automation-id="login-button" [disabled]="!form.valid">
|
||||
|
||||
<span *ngIf="actualLoginStep === LoginSteps.Landing" class="adf-login-button-label">{{ 'LOGIN.BUTTON.LOGIN' | translate }}</span>
|
||||
@@ -101,15 +101,14 @@
|
||||
|
||||
<div *ngIf="actualLoginStep === LoginSteps.Welcome" class="adf-interactive-login-label">
|
||||
<span class="adf-login-button-label">{{ 'LOGIN.BUTTON.WELCOME' | translate }}</span>
|
||||
<mat-icon class="welcome-icon">done</mat-icon>
|
||||
<mat-icon class="adf-welcome-icon">done</mat-icon>
|
||||
</div>
|
||||
|
||||
</button>
|
||||
<div *ngIf="showRememberMe" class="adf-login__remember-me">
|
||||
<mat-checkbox id="adf-login-remember" color="primary" class="adf-login-rememberme"
|
||||
<mat-checkbox id="adf-login-remember" color="primary" class="adf-login-remember-me"
|
||||
[checked]="rememberMe"
|
||||
(change)="rememberMe = !rememberMe">{{ 'LOGIN.LABEL.REMEMBER' | translate
|
||||
}}
|
||||
(change)="rememberMe = !rememberMe">{{ 'LOGIN.LABEL.REMEMBER' | translate }}
|
||||
</mat-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
@@ -147,7 +146,7 @@
|
||||
</form>
|
||||
</mat-card>
|
||||
|
||||
<div class="copyright" data-automation-id="login-copyright">
|
||||
<div class="adf-copyright" data-automation-id="login-copyright">
|
||||
{{ copyrightText }}
|
||||
</div>
|
||||
|
||||
|
||||
@@ -28,7 +28,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.ie11FixerParent {
|
||||
.adf-ie11FixerParent {
|
||||
margin-top: 16px;
|
||||
min-width: 320px;
|
||||
|
||||
@@ -42,23 +42,23 @@
|
||||
}
|
||||
|
||||
// IE11 vertical centering
|
||||
.ie11FixerChild {
|
||||
.adf-ie11FixerChild {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.show {
|
||||
.adf-show {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.hide {
|
||||
.adf-hide {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.icon-inline {
|
||||
.adf-icon-inline {
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 31%;
|
||||
@@ -73,7 +73,7 @@
|
||||
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12);
|
||||
width: 450px;
|
||||
min-width: 320px;
|
||||
padding: 21px 64px 34px 64px;
|
||||
padding: 21px 64px 34px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@@ -94,16 +94,16 @@
|
||||
justify-content: flex-start;
|
||||
|
||||
color: mat-color($warn);
|
||||
padding: 0px;
|
||||
padding: 0;
|
||||
margin-bottom: 4px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.adf-error-message .error-icon {
|
||||
.adf-error-message .adf-error-icon {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.mat-card-header-text{
|
||||
.mat-card-header-text {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@@ -114,7 +114,7 @@
|
||||
}
|
||||
|
||||
.adf-alfresco-logo {
|
||||
padding: 24px 16px 24px 16px;
|
||||
padding: 24px 16px;
|
||||
}
|
||||
|
||||
.adf-alfresco-logo img {
|
||||
@@ -132,20 +132,20 @@
|
||||
color: rgb(255, 255, 255);
|
||||
}
|
||||
|
||||
.adf-login-button.isChecking {
|
||||
.adf-login-button.adf-isChecking {
|
||||
background-color: #e0f7fa;
|
||||
}
|
||||
|
||||
.adf-login-button.isChecking .adf-login-button-label {
|
||||
.adf-login-button.adf-isChecking .adf-login-button-label {
|
||||
color: #00bcd4;
|
||||
}
|
||||
|
||||
.adf-login-button.isWelcome {
|
||||
.adf-login-button.adf-isWelcome {
|
||||
background-color: #00bcd4;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.adf-login-button.isWelcome .welcome-icon {
|
||||
.adf-login-button.adf-isWelcome .adf-welcome-icon {
|
||||
margin: 5px 0 0 10px;
|
||||
}
|
||||
|
||||
@@ -167,18 +167,18 @@
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.adf-login-spinner-container{
|
||||
.adf-login-spinner-container {
|
||||
margin-left: 15px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
#checking-spinner > svg > circle{
|
||||
.adf-login-checking-spinner > svg > circle {
|
||||
stroke-width: 16% !important;
|
||||
|
||||
}
|
||||
|
||||
.adf-login-controls {
|
||||
padding: 0 0 26px 0;
|
||||
padding: 0 0 26px;
|
||||
overflow: visible;
|
||||
width: 100%;
|
||||
}
|
||||
@@ -206,7 +206,7 @@
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.is-active {
|
||||
.adf-is-active {
|
||||
background-color: transparent;
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
@@ -214,7 +214,7 @@
|
||||
color: mat-color($warn);
|
||||
}
|
||||
|
||||
.copyright {
|
||||
.adf-copyright {
|
||||
min-width: 320px;
|
||||
text-align: center;
|
||||
padding: 16px 0;
|
||||
@@ -227,12 +227,12 @@
|
||||
}
|
||||
|
||||
.adf-login__field .mat-form-field-wrapper {
|
||||
margin: 1em 0 0 0;
|
||||
margin: 1em 0 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.adf-login__field input:-webkit-autofill {
|
||||
-webkit-box-shadow: 0 0 0px 1000px mat-color($background, dialog) inset;
|
||||
-webkit-box-shadow: 0 0 0 1000px mat-color($background, dialog) inset;
|
||||
-webkit-text-fill-color: $text-color-primary !important;
|
||||
}
|
||||
|
||||
@@ -269,12 +269,12 @@
|
||||
padding-bottom: 18px;
|
||||
}
|
||||
|
||||
.adf-login-rememberme {
|
||||
.adf-login-remember-me {
|
||||
color: $text-color-primary !important;
|
||||
}
|
||||
|
||||
.adf-login-action-container {
|
||||
border-top: 1px solid rgba(0, 0, 0, .1);
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.1);
|
||||
margin-top: 23px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -50,7 +50,7 @@ describe('LoginComponent', () => {
|
||||
|
||||
const getLoginErrorMessage = () => {
|
||||
let errorMessage = undefined;
|
||||
let errorElement = element.querySelector('#login-error .login-error-message');
|
||||
let errorElement = element.querySelector('#login-error .adf-login-error-message');
|
||||
|
||||
if (errorElement) {
|
||||
return errorElement.innerText;
|
||||
|
||||
@@ -7,4 +7,4 @@
|
||||
margin-bottom: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
|
||||
$adf-pagination--height: 48px;
|
||||
$adf-pagination--icon-button-size: 32px;
|
||||
$adf-pagination--border: 1px solid mat-color($foreground, text, .07);
|
||||
$adf-pagination--border: 1px solid mat-color($foreground, text, 0.07);
|
||||
|
||||
.adf-pagination {
|
||||
display: flex;
|
||||
|
||||
@@ -25,7 +25,7 @@
|
||||
|
||||
<ng-container *ngIf="isALL() || isECM()">
|
||||
<mat-card-content>
|
||||
<mat-form-field class="full-width" floatLabel="{{'CORE.HOST_SETTINGS.CS-HOST' | translate }}">
|
||||
<mat-form-field class="adf-full-width" floatLabel="{{'CORE.HOST_SETTINGS.CS-HOST' | translate }}">
|
||||
<mat-label>{{'CORE.HOST_SETTINGS.CS-HOST' | translate }}</mat-label>
|
||||
<input matInput [formControl]="ecmHost" data-automation-id="ecmHost" type="text" tabindex="2"
|
||||
id="ecmHost" placeholder="http(s)://host|ip:port(/path)">
|
||||
@@ -42,7 +42,7 @@
|
||||
|
||||
<ng-container *ngIf="isALL() || isBPM()">
|
||||
<mat-card-content>
|
||||
<mat-form-field class="full-width" floatLabel="{{'CORE.HOST_SETTINGS.BP-HOST' | translate }}">
|
||||
<mat-form-field class="adf-full-width" floatLabel="{{'CORE.HOST_SETTINGS.BP-HOST' | translate }}">
|
||||
<mat-label>{{'CORE.HOST_SETTINGS.BP-HOST' | translate }}</mat-label>
|
||||
<input matInput [formControl]="bpmHost" data-automation-id="bpmHost" type="text" tabindex="2"
|
||||
id="bpmHost" placeholder="http(s)://host|ip:port(/path)">
|
||||
@@ -58,7 +58,7 @@
|
||||
|
||||
<ng-container *ngIf="isOAUTH()">
|
||||
<div formGroupName="oauthConfig">
|
||||
<mat-form-field class="full-width" floatLabel="Auth Host">
|
||||
<mat-form-field class="adf-full-width" floatLabel="Auth Host">
|
||||
<mat-label>Auth Host</mat-label>
|
||||
<input matInput name="host" id="oauthHost" formControlName="host"
|
||||
placeholder="http(s)://host|ip:port(/path)">
|
||||
@@ -69,7 +69,7 @@
|
||||
{{ 'CORE.HOST_SETTINGS.REQUIRED'| translate }}
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="full-width" floatLabel="Client Id">
|
||||
<mat-form-field class="adf-full-width" floatLabel="Client Id">
|
||||
<mat-label>{{ 'CORE.HOST_SETTINGS.CLIENT'| translate }}d</mat-label>
|
||||
<input matInput name="clientId" id="clientId" formControlName="clientId"
|
||||
placeholder="Client Id">
|
||||
@@ -78,7 +78,7 @@
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="full-width" floatLabel="Scope">
|
||||
<mat-form-field class="adf-full-width" floatLabel="Scope">
|
||||
<mat-label>{{ 'CORE.HOST_SETTINGS.SCOPE'| translate }}</mat-label>
|
||||
<input matInput name="{{ 'CORE.HOST_SETTINGS.SCOPE'| translate }}"
|
||||
formControlName="scope" placeholder="Scope Id">
|
||||
@@ -88,17 +88,17 @@
|
||||
</mat-form-field>
|
||||
|
||||
<label for="silentLogin">{{ 'CORE.HOST_SETTINGS.SILENT'| translate }}</label>
|
||||
<mat-slide-toggle class="full-width" name="silentLogin" [color]="'primary'"
|
||||
<mat-slide-toggle class="adf-full-width" name="silentLogin" [color]="'primary'"
|
||||
formControlName="silentLogin">
|
||||
</mat-slide-toggle>
|
||||
|
||||
<label for="implicitFlow">{{ 'CORE.HOST_SETTINGS.IMPLICIT-FLOW'| translate }}</label>
|
||||
<mat-slide-toggle class="full-width" name="implicitFlow" [color]="'primary'"
|
||||
<mat-slide-toggle class="adf-full-width" name="implicitFlow" [color]="'primary'"
|
||||
formControlName="implicitFlow">
|
||||
</mat-slide-toggle>
|
||||
|
||||
|
||||
<mat-form-field class="full-width" floatLabel="Redirect Uri">
|
||||
<mat-form-field class="adf-full-width" floatLabel="Redirect Uri">
|
||||
<mat-label>{{ 'CORE.HOST_SETTINGS.REDIRECT'| translate }}</mat-label>
|
||||
<input matInput placeholder="{{ 'CORE.HOST_SETTINGS.REDIRECT'| translate }}"
|
||||
name="redirectUri" formControlName="redirectUri">
|
||||
@@ -107,7 +107,7 @@
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="full-width" floatLabel="Redirect Uri Logout">
|
||||
<mat-form-field class="adf-full-width" floatLabel="Redirect Uri Logout">
|
||||
<mat-label>{{ 'CORE.HOST_SETTINGS.REDIRECT_LOGOUT'| translate }}</mat-label>
|
||||
<input matInput placeholder="{{ 'CORE.HOST_SETTINGS.REDIRECT_LOGOUT'| translate }}"
|
||||
name="redirectUriLogout" formControlName="redirectUriLogout">
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
|
||||
.adf-authentication-type{
|
||||
.adf-authentication-type {
|
||||
margin-bottom: 20px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
@@ -36,7 +36,7 @@
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.full-width {
|
||||
.adf-full-width {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
@import "variables";
|
||||
@import 'variables';
|
||||
|
||||
@mixin no-select {
|
||||
@mixin adf-no-select {
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
@@ -29,7 +29,7 @@
|
||||
transition-timing-function: $animation-curve-default;
|
||||
}
|
||||
|
||||
@mixin line-clamp($line-height: 1.25, $lines: 3) {
|
||||
@mixin adf-line-clamp($line-height: 1.25, $lines: 3) {
|
||||
position: relative;
|
||||
line-height: $line-height;
|
||||
padding: 0 !important;
|
||||
|
||||
@@ -16,4 +16,4 @@ $alfresco-typography: mat-typography-config(
|
||||
$button: mat-typography-level(14px, 14px, 500),
|
||||
// Line-height must be unit-less fraction of the font-size.
|
||||
$input: mat-typography-level(16px, 1.25, 400)
|
||||
);
|
||||
);
|
||||
|
||||
@@ -5,4 +5,4 @@ $animation-curve-fast-out-slow-in: cubic-bezier(0.4, 0, 0.2, 1) !default;
|
||||
$animation-curve-default: $animation-curve-fast-out-slow-in !default;
|
||||
|
||||
$swift-ease-in-duration: 300ms !default;
|
||||
$swift-ease-in-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2) !default;
|
||||
$swift-ease-in-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2) !default;
|
||||
|
||||
@@ -22,7 +22,7 @@
|
||||
height: 3px;
|
||||
opacity: 0.54;
|
||||
box-shadow: 0 10px 15px 0 rgba(0, 0, 0, 0.39);
|
||||
}
|
||||
}
|
||||
|
||||
&-title {
|
||||
font-size: 46px;
|
||||
@@ -56,15 +56,15 @@
|
||||
font-size: 50px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
|
||||
&-shadow {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&-title {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
|
||||
&-description {
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
@@ -10,13 +10,13 @@
|
||||
|
||||
.adf-toolbar {
|
||||
|
||||
&-title{
|
||||
&-title {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.mat-toolbar {
|
||||
min-height: $adf-toolbar-height;
|
||||
border: 1px solid mat-color($foreground, text, .07);
|
||||
border: 1px solid mat-color($foreground, text, 0.07);
|
||||
}
|
||||
|
||||
.mat-toolbar-row {
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
&-userinfo-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 5px 0 5px;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
&-userinfo-name-right {
|
||||
@@ -17,7 +17,7 @@
|
||||
}
|
||||
|
||||
&-userinfo-name {
|
||||
padding: 0 5px 0 5px;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
&-userinfo-pic {
|
||||
@@ -31,7 +31,7 @@
|
||||
font-size: 18px;
|
||||
text-transform: uppercase;
|
||||
vertical-align: middle;
|
||||
line-height: 40px
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
&-userinfo-profile-image {
|
||||
@@ -43,10 +43,10 @@
|
||||
margin-right: 0;
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
margin-left: 0px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&-userinfo-profile-container{
|
||||
&-userinfo-profile-container {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@@ -123,9 +123,9 @@
|
||||
text-overflow: ellipsis;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
letter-spacing: .04em;
|
||||
letter-spacing: 0.04em;
|
||||
line-height: 20px;
|
||||
align-items: flex-start
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
&-userinfo__secondary-info {
|
||||
@@ -142,7 +142,7 @@
|
||||
border-radius: 50%;
|
||||
height: 80px;
|
||||
width: 80px;
|
||||
margin-left: 0px;
|
||||
margin-left: 0;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
@@ -171,7 +171,7 @@
|
||||
}
|
||||
|
||||
&-userinfo-detail {
|
||||
text-align: left
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&-hide-tab .mat-tab-label-active {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<div class="image-container" [ngStyle]="{ transform: transform }" data-automation-id="adf-image-container">
|
||||
<div class="adf-image-container" [ngStyle]="{ transform: transform }" data-automation-id="adf-image-container">
|
||||
<img id="viewer-image" [src]="urlFile" [alt]="nameFile" [ngStyle]="{ 'cursor' : isDragged ? 'move': 'default' } " />
|
||||
</div>
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
$background: map-get($theme, background);
|
||||
|
||||
.adf-image-viewer {
|
||||
.image-container {
|
||||
.adf-image-container {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
<div class="pdf-thumbnails__content"
|
||||
data-automation-id='adf-thumbnails-content'
|
||||
<div class="adf-pdf-thumbnails__content"
|
||||
data-automation-id='adf-thumbnails-content'
|
||||
[style.height.px]="virtualHeight"
|
||||
[style.transform]="'translate(-50%, ' + translateY + 'px)'">
|
||||
<adf-pdf-thumb *ngFor="let page of renderItems; trackBy: trackByFn"
|
||||
class="pdf-thumbnails__thumb"
|
||||
[ngClass]="{'pdf-thumbnails__thumb--selected' : isSelected(page.id)}"
|
||||
class="adf-pdf-thumbnails__thumb"
|
||||
[ngClass]="{'adf-pdf-thumbnails__thumb--selected' : isSelected(page.id)}"
|
||||
[page]="page"
|
||||
(click)="goTo(page.id)">
|
||||
</adf-pdf-thumb>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
@mixin adf-pdf-thumbnails-theme($theme) {
|
||||
$background: map-get($theme, background);
|
||||
|
||||
.pdf-thumbnails {
|
||||
.adf-pdf-thumbnails {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
@@ -24,11 +24,11 @@
|
||||
}
|
||||
|
||||
&__thumb:hover {
|
||||
box-shadow: 0px 0px 5px 0px $black-87-opacity;
|
||||
box-shadow: 0 0 5px 0 $black-87-opacity;
|
||||
}
|
||||
|
||||
&__thumb--selected:not(:hover) {
|
||||
box-shadow: 0px 0px 5px 0px $black-87-opacity;
|
||||
box-shadow: 0 0 5px 0 $black-87-opacity;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -77,7 +77,7 @@ describe('PdfThumbListComponent', () => {
|
||||
fixture.nativeElement.style.display = 'block';
|
||||
fixture.nativeElement.style.height = '700px';
|
||||
fixture.nativeElement.style.overflow = 'scroll';
|
||||
fixture.debugElement.query(By.css('.pdf-thumbnails__content'))
|
||||
fixture.debugElement.query(By.css('.adf-pdf-thumbnails__content'))
|
||||
.nativeElement.style.height = '2000px';
|
||||
}));
|
||||
|
||||
|
||||
@@ -24,7 +24,7 @@ import {
|
||||
selector: 'adf-pdf-thumbnails',
|
||||
templateUrl: './pdfViewer-thumbnails.component.html',
|
||||
styleUrls: ['./pdfViewer-thumbnails.component.scss'],
|
||||
host: { 'class': 'pdf-thumbnails' },
|
||||
host: { 'class': 'adf-pdf-thumbnails' },
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class PdfThumbListComponent implements OnInit, AfterViewInit, OnDestroy {
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<div class="adf-pdf-viewer__container">
|
||||
<ng-container *ngIf="showThumbnails">
|
||||
<div class="adf-pdf-viewer__thumbnails">
|
||||
<div class="thumbnails-template__container">
|
||||
<div class="thumbnails-template__buttons">
|
||||
<div class="adf-thumbnails-template__container">
|
||||
<div class="adf-thumbnails-template__buttons">
|
||||
<button mat-icon-button data-automation-id='adf-thumbnails-close' (click)="toggleThumbnails()">
|
||||
<mat-icon>close</mat-icon>
|
||||
</button>
|
||||
@@ -20,10 +20,10 @@
|
||||
</ng-container>
|
||||
|
||||
<div class="adf-pdf-viewer__content">
|
||||
<div id="viewer-pdf-viewer" class="viewer-pdf-viewer" (window:resize)="onResize()">
|
||||
<div id="viewer-viewerPdf" class="pdfViewer">
|
||||
<div id="loader-container" class="loader-container">
|
||||
<div class="loader-item">
|
||||
<div id="viewer-pdf-viewer" class="adf-viewer-pdf-viewer" (window:resize)="onResize()">
|
||||
<div id="viewer-viewerPdf" class="adf-pdfViewer">
|
||||
<div id="loader-container" class="adf-loader-container">
|
||||
<div class="adf-loader-item">
|
||||
<mat-progress-bar mode="indeterminate"></mat-progress-bar>
|
||||
</div >
|
||||
</div>
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
|
||||
.loader-container {
|
||||
.adf-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 */
|
||||
@@ -29,7 +29,7 @@
|
||||
background-color: rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.thumbnails-template {
|
||||
.adf-thumbnails-template {
|
||||
&__container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -46,14 +46,16 @@
|
||||
}
|
||||
|
||||
&__container {
|
||||
display: flex; height: 100%;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&__content {
|
||||
flex: 1 1 auto; position: relative;
|
||||
flex: 1 1 auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.loader-item {
|
||||
.adf-loader-item {
|
||||
margin: auto;
|
||||
max-height:100px;
|
||||
max-width:300px;
|
||||
|
||||
@@ -159,7 +159,7 @@ describe('Test PdfViewer component', () => {
|
||||
});
|
||||
});
|
||||
it('should Loader be present', () => {
|
||||
expect(element.querySelector('.loader-container')).not.toBeNull();
|
||||
expect(element.querySelector('.adf-loader-container')).not.toBeNull();
|
||||
});
|
||||
|
||||
describe('Required values', () => {
|
||||
@@ -204,8 +204,8 @@ describe('Test PdfViewer component', () => {
|
||||
it('should Canvas be present', (done) => {
|
||||
fixtureUrlTestComponent.detectChanges();
|
||||
fixtureUrlTestComponent.whenStable().then(() => {
|
||||
expect(elementUrlTestComponent.querySelector('.pdfViewer')).not.toBeNull();
|
||||
expect(elementUrlTestComponent.querySelector('.viewer-pdf-viewer')).not.toBeNull();
|
||||
expect(elementUrlTestComponent.querySelector('.adf-pdfViewer')).not.toBeNull();
|
||||
expect(elementUrlTestComponent.querySelector('.adf-viewer-pdf-viewer')).not.toBeNull();
|
||||
done();
|
||||
});
|
||||
}, 5000);
|
||||
@@ -273,8 +273,8 @@ describe('Test PdfViewer component', () => {
|
||||
fixtureBlobTestComponent.detectChanges();
|
||||
|
||||
fixtureBlobTestComponent.whenStable().then(() => {
|
||||
expect(elementBlobTestComponent.querySelector('.pdfViewer')).not.toBeNull();
|
||||
expect(elementBlobTestComponent.querySelector('.viewer-pdf-viewer')).not.toBeNull();
|
||||
expect(elementBlobTestComponent.querySelector('.adf-pdfViewer')).not.toBeNull();
|
||||
expect(elementBlobTestComponent.querySelector('.adf-viewer-pdf-viewer')).not.toBeNull();
|
||||
done();
|
||||
});
|
||||
});
|
||||
@@ -294,8 +294,8 @@ describe('Test PdfViewer component', () => {
|
||||
|
||||
fixtureBlobTestComponent.whenStable().then(() => {
|
||||
/* cspell:disable-next-line */
|
||||
expect(elementBlobTestComponent.querySelector('.viewer-pagenumber-input')).toBeDefined();
|
||||
expect(elementBlobTestComponent.querySelector('.viewer-total-pages')).toBeDefined();
|
||||
expect(elementBlobTestComponent.querySelector('.adf-viewer-pagenumber-input')).toBeDefined();
|
||||
expect(elementBlobTestComponent.querySelector('.adf-viewer-total-pages')).toBeDefined();
|
||||
|
||||
expect(elementBlobTestComponent.querySelector('#viewer-previous-page-button')).not.toBeNull();
|
||||
expect(elementBlobTestComponent.querySelector('#viewer-next-page-button')).not.toBeNull();
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
bottom: 0;
|
||||
overflow: hidden;
|
||||
opacity: 0.2;
|
||||
line-height: 1.0;
|
||||
line-height: 1;
|
||||
border: 1px solid gray;
|
||||
|
||||
& > div {
|
||||
@@ -22,40 +22,40 @@
|
||||
transform-origin: 0% 0%;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
.adf-highlight {
|
||||
margin: -1px;
|
||||
padding: 1px;
|
||||
|
||||
background-color: rgb(180, 0, 170);
|
||||
border-radius: 4px;
|
||||
|
||||
&.begin {
|
||||
border-radius: 4px 0px 0px 4px;
|
||||
&.adf-begin {
|
||||
border-radius: 4px 0 0 4px;
|
||||
}
|
||||
|
||||
&.end {
|
||||
border-radius: 0px 4px 4px 0px;
|
||||
&.adf-end {
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
|
||||
&.middle {
|
||||
border-radius: 0px;
|
||||
&.adf-middle {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
&.adf-selected {
|
||||
background-color: rgb(0, 100, 0);
|
||||
}
|
||||
}
|
||||
|
||||
&::selection { background: rgb(0,0,255); }
|
||||
&::-moz-selection { background: rgb(0,0,255); }
|
||||
&::selection { background: rgb(0, 0, 255); }
|
||||
&::-moz-selection { background: rgb(0, 0, 255); }
|
||||
|
||||
.endOfContent {
|
||||
.adf-endOfContent {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
left: 0;
|
||||
top: 100%;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: -1;
|
||||
cursor: default;
|
||||
user-select: none;
|
||||
@@ -63,18 +63,18 @@
|
||||
-ms-user-select: none;
|
||||
-moz-user-select: none;
|
||||
|
||||
&.active {
|
||||
top: 0px;
|
||||
&.adf-active {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.annotationLayer {
|
||||
.adf-annotationLayer {
|
||||
section {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.linkAnnotation {
|
||||
.adf-linkAnnotation {
|
||||
& > a {
|
||||
position: absolute;
|
||||
font-size: 1em;
|
||||
@@ -82,34 +82,36 @@
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7") 0 0 repeat;
|
||||
/* stylelint-disable */
|
||||
background: url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7') 0 0 repeat;
|
||||
/* stylelint-enable */
|
||||
|
||||
&:hover {
|
||||
opacity: 0.2;
|
||||
background: #ff0;
|
||||
box-shadow: 0px 2px 10px #ff0;
|
||||
box-shadow: 0 2px 10px #ff0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.textAnnotation {
|
||||
.adf-textAnnotation {
|
||||
img {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.popupWrapper {
|
||||
.adf-popupWrapper {
|
||||
position: absolute;
|
||||
width: 20em;
|
||||
}
|
||||
|
||||
.popup {
|
||||
.adf-popup {
|
||||
position: absolute;
|
||||
z-index: 200;
|
||||
max-width: 20em;
|
||||
background-color: #FFFF99;
|
||||
box-shadow: 0px 2px 5px #333;
|
||||
background-color: #ffff99;
|
||||
box-shadow: 0 2px 5px #333;
|
||||
border-radius: 2px;
|
||||
padding: 0.6em;
|
||||
margin-left: 5px;
|
||||
@@ -127,21 +129,21 @@
|
||||
}
|
||||
}
|
||||
|
||||
.highlightAnnotation,
|
||||
.underlineAnnotation,
|
||||
.squigglyAnnotation,
|
||||
.strikeoutAnnotation,
|
||||
.fileAttachmentAnnotation {
|
||||
.adf-highlightAnnotation,
|
||||
.adf-underlineAnnotation,
|
||||
.adf-squigglyAnnotation,
|
||||
.adf-strikeoutAnnotation,
|
||||
.adf-fileAttachmentAnnotation {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.pdfViewer {
|
||||
canvasWrapper {
|
||||
.adf-pdfViewer {
|
||||
.canvasWrapper {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.page {
|
||||
.adf-page {
|
||||
direction: ltr;
|
||||
width: 816px;
|
||||
height: 1056px;
|
||||
@@ -157,7 +159,7 @@
|
||||
display: block;
|
||||
}
|
||||
|
||||
.loadingIcon {
|
||||
.adf-loadingIcon {
|
||||
position: absolute;
|
||||
display: block;
|
||||
left: 0;
|
||||
@@ -172,14 +174,14 @@
|
||||
}
|
||||
}
|
||||
|
||||
&.removePageBorders {
|
||||
.page {
|
||||
margin: 0px auto 10px auto;
|
||||
&.adf-removePageBorders {
|
||||
.adf-page {
|
||||
margin: 0 auto 10px;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.loadingIcon {
|
||||
.adf-loadingIcon {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
left: 50% !important;
|
||||
@@ -190,9 +192,9 @@
|
||||
|
||||
font-size: 5px;
|
||||
text-indent: -9999em;
|
||||
border-top: 1.1em solid rgba(3,0,2, 0.2);
|
||||
border-right: 1.1em solid rgba(3,0,2, 0.2);
|
||||
border-bottom: 1.1em solid rgba(3,0,2, 0.2);
|
||||
border-top: 1.1em solid rgba(3, 0, 2, 0.2);
|
||||
border-right: 1.1em solid rgba(3, 0, 2, 0.2);
|
||||
border-bottom: 1.1em solid rgba(3, 0, 2, 0.2);
|
||||
border-left: 1.1em solid #030002;
|
||||
-webkit-transform: translateZ(0);
|
||||
-ms-transform: translateZ(0);
|
||||
@@ -201,7 +203,7 @@
|
||||
animation: load8 1.1s infinite linear;
|
||||
|
||||
border-radius: 50%;
|
||||
&:after {
|
||||
&::after {
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
@@ -209,7 +211,7 @@
|
||||
|
||||
|
||||
|
||||
.hidden, [hidden] {
|
||||
.adf-hidden, [hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
@@ -235,7 +237,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.viewer-pdf-viewer {
|
||||
.adf-viewer-pdf-viewer {
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
position: absolute;
|
||||
@@ -245,9 +247,9 @@
|
||||
left: 0;
|
||||
outline: none;
|
||||
}
|
||||
html[dir='ltr'] .viewer-pdf-viewer {
|
||||
box-shadow: inset 1px 0 0 hsla(0,0%,100%,.05);
|
||||
html[dir='ltr'] .adf-viewer-pdf-viewer {
|
||||
box-shadow: inset 1px 0 0 hsla(0, 0%, 100%, 0.05);
|
||||
}
|
||||
html[dir='rtl'] .viewer-pdf-viewer {
|
||||
box-shadow: inset -1px 0 0 hsla(0,0%,100%,.05);
|
||||
html[dir='rtl'] .adf-viewer-pdf-viewer {
|
||||
box-shadow: inset -1px 0 0 hsla(0, 0%, 100%, 0.05);
|
||||
}
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
$foreground: map-get($theme, foreground);
|
||||
$adf-viewer-background-color: mat-color($background, card);
|
||||
|
||||
.full-screen {
|
||||
.adf-full-screen {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: $adf-viewer-background-color;
|
||||
@@ -58,7 +58,7 @@
|
||||
|
||||
&-container {
|
||||
.adf-viewer-layout-content {
|
||||
@extend .full-screen;
|
||||
@extend .adf-full-screen;
|
||||
position: relative;
|
||||
overflow-y: hidden;
|
||||
overflow-x: hidden;
|
||||
@@ -80,7 +80,7 @@
|
||||
}
|
||||
|
||||
.adf-viewer-layout {
|
||||
@extend .full-screen;
|
||||
@extend .adf-full-screen;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@@ -90,7 +90,7 @@
|
||||
}
|
||||
|
||||
.adf-viewer-content {
|
||||
@extend .full-screen;
|
||||
@extend .adf-full-screen;
|
||||
flex: 1;
|
||||
|
||||
& > div {
|
||||
@@ -102,14 +102,14 @@
|
||||
&-overlay-container {
|
||||
.adf-viewer-content {
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1000;
|
||||
}
|
||||
}
|
||||
|
||||
&-inline-container {
|
||||
@extend .full-screen;
|
||||
@extend .adf-full-screen;
|
||||
}
|
||||
|
||||
&-content-container {
|
||||
@@ -179,7 +179,7 @@
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.info-drawer-content {
|
||||
.adf-info-drawer-content {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user