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

[ADF-3746] Add style lint rules (#3975)

Browse Source 
* 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
2018-11-28 14:43:18 +00:00
committed by Eugenio Romano
parent 5fc03cf26b
commit 1a21f234b6
234 changed files with 2328 additions and 1058 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
demo-shell/src/app/app.component.scss
View File

@@ -1,4 +1,4 @@
router-outlet[name="overlay"] + * {
router-outlet[name='overlay'] + * {
width: 100%;
height: 100%;
z-index: 999;

2
demo-shell/src/app/components/about/about.component.html
View File

@@ -1,5 +1,5 @@
<h3>Plugins</h3>
<div class="extension-details-container">
<div class="adf-extension-details-container">
<mat-table [dataSource]="extensions$ | async">
<!-- $id Column -->
<ng-container matColumnDef="$id">

2
demo-shell/src/app/components/about/about.component.scss
View File

@@ -1,3 +1,3 @@
.extension-details-container {
.adf-extension-details-container {
padding: 4px;
}

10
demo-shell/src/app/components/app-layout/app-layout.component.html
View File

@@ -3,7 +3,7 @@
[position]="position">
<adf-sidenav-layout-header>
<ng-template let-toggleMenu=" toggleMenu">
<ng-template let-toggleMenu="toggleMenu">
<adf-layout-header id="adf-header"
[title]="title | translate"
@@ -45,13 +45,13 @@
<a mat-list-item *ngFor="let link of links" [attr.data-automation-id]="link.title | translate"
[routerLink]="link.href" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }"
class="adf-sidenav-link">
<mat-icon matListIcon class="sidenav-menu-icon">{{link.icon}}</mat-icon>
<div class="sidenav-menu-label" *ngIf="!isMenuMinimized()">{{link.title | translate }}</div>
<mat-icon matListIcon class="adf-sidenav-menu-icon">{{link.icon}}</mat-icon>
<div class="adf-sidenav-menu-label" *ngIf="!isMenuMinimized()">{{link.title | translate }}</div>
</a>
<a mat-list-item adf-logout [enableRedirect]="enableRedirect" redirectUri="/logout"
class="adf-sidenav-link">
<mat-icon matListIcon class="sidenav-menu-icon">exit_to_app</mat-icon>
<div class="sidenav-menu-label" *ngIf="!isMenuMinimized()">Logout</div>
<mat-icon matListIcon class="adf-sidenav-menu-icon">exit_to_app</mat-icon>
<div class="adf-sidenav-menu-label" *ngIf="!isMenuMinimized()">Logout</div>
</a>
</mat-nav-list>

10
demo-shell/src/app/components/app-layout/app-layout.component.scss
View File

@@ -43,16 +43,16 @@
}
.adf-sidenav-link {
&.active {
&.adf-active {
color: mat-color($primary);
}
.sidenav-menu-icon {
.adf-sidenav-menu-icon {
margin-right: 20px;
font-size: 14px;
}
.sidenav-menu-label {
.adf-sidenav-menu-label {
font-size: 14px;
white-space: nowrap;
}
@@ -85,7 +85,7 @@
min-width: 0;
line-height: $toolbarHeight;
&.active {
&.adf-active {
background-color: rgba(0, 0, 0, 0.12);
}
}
@@ -98,7 +98,7 @@
}
.adf-menu {
padding-top: 0px;
padding-top: 0;
}
}

6
demo-shell/src/app/components/breadcrumb-demo/breadcrumb-demo.component.html
View File

@@ -8,7 +8,7 @@
<h2>1. Standalone (fixed size)</h2>
<small>Component is used in the fixed-width layout</small>
<div class="breadcrumb-container-restricted">
<div class="adf-breadcrumb-container-restricted">
<adf-breadcrumb root="APP.PERSONAL-FILES" [target]="documentList" [folderNode]="documentList.folderNode">
</adf-breadcrumb>
</div>
@@ -57,7 +57,7 @@
Buttons do nothing and are present for layout purposes.
</small>
<adf-toolbar class="full-content-toolbar">
<adf-toolbar class="adf-full-content-toolbar">
<adf-toolbar-title fxFlex="0 1 auto">
<adf-breadcrumb root="APP.PERSONAL-FILES" [target]="documentList" [folderNode]="documentList.folderNode">
</adf-breadcrumb>
@@ -76,7 +76,7 @@
</div>
</adf-toolbar>
<div class="content">
<div class="adf-content">
<adf-document-list #documentList currentFolderId="-my-">
</adf-document-list>
</div>

6
demo-shell/src/app/components/breadcrumb-demo/breadcrumb-demo.component.scss
View File

@@ -1,14 +1,14 @@
.breadcrumb-container-restricted {
.adf-breadcrumb-container-restricted {
width: 800px;
max-width: 800px;
border: 1px solid lightgray;
}
.content {
.adf-content {
margin: 10px 0;
}
.full-content-toolbar {
.adf-full-content-toolbar {
.adf-toolbar-title {
display: flex;
width: 100%;

8
demo-shell/src/app/components/card-view/card-view.component.html
View File

@@ -1,21 +1,21 @@
<div class="main-content">
<div class="adf-main-content">
<h1>CardView Component</h1>
<mat-card class="card-view">
<mat-card class="adf-card-view">
<adf-card-view
[properties]="properties"
[editable]="true">
</adf-card-view>
</mat-card>
<div class="console" #console>
<div class="adf-console" #console>
<h3>Changes log:</h3>
<p *ngFor="let log of logs">{{ log }}</p>
</div>
</div>
<p class="toggle">
<p class="adf-toggle">
<mat-slide-toggle
id="adf-toggle-editable"
[color]="'primary'"

8
demo-shell/src/app/components/card-view/card-view.component.scss
View File

@@ -1,13 +1,13 @@
.main-content {
.adf-main-content {
padding: 0 15px;
}
.card-view {
.adf-card-view {
width: 30%;
display: inline-block;
}
.console {
.adf-console {
width: 60%;
display: inline-block;
vertical-align: top;
@@ -25,4 +25,4 @@
font-family: monospace, monospace;
margin: 0;
}
}
}

2
demo-shell/src/app/components/cloud/process-list-cloud-example.component.scss
View File

@@ -2,7 +2,7 @@
margin: 15px;
}
.app-process-cloud-spacing {
.adf-process-cloud-spacing {
margin: 10px;
}

34
demo-shell/src/app/components/content-node-selector/content-node-selector.component.html
View File

@@ -8,13 +8,13 @@
<h2>Plain picker</h2>
</mat-panel-title>
<mat-panel-description>
<label class="content-node-selector-demo-basic-label">
<label class="adf-content-node-selector-demo-basic-label">
dropdownHideMyFiles: {{dropdownHideMyFiles}}
</label>
</mat-panel-description>
</mat-expansion-panel-header>
<div class="content-node-selector-demo-basic-table">
<div class="adf-content-node-selector-demo-basic-table">
<adf-content-node-selector-panel
[currentFolderId]="'-root-'">
</adf-content-node-selector-panel>
@@ -26,13 +26,13 @@
<h2>Hide My files</h2>
</mat-panel-title>
<mat-panel-description>
<label class="content-node-selector-demo-basic-label">
<label class="adf-content-node-selector-demo-basic-label">
My Files site will be hided from dropdown
</label>
</mat-panel-description>
</mat-expansion-panel-header>
<div class="content-node-selector-demo-basic-table">
<div class="adf-content-node-selector-demo-basic-table">
<adf-content-node-selector-panel
[currentFolderId]="'-root-'"
[dropdownHideMyFiles]="true">
@@ -45,7 +45,7 @@
<h2>Custom Site List</h2>
</mat-panel-title>
<mat-panel-description>
<label class="content-node-selector-demo-basic-label">
<label class="adf-content-node-selector-demo-basic-label">
Adding a custom site list
</label>
</mat-panel-description>
@@ -54,7 +54,7 @@
<div>
<mat-list>
<h3 mat-subheader>Add Site</h3>
<form class="content-node-selector-demo-example-form">
<form class="adf-content-node-selector-demo-example-form">
<mat-form-field>
<label>Site Guid</label>
<input matInput [(ngModel)]="customSideGuid" [ngModelOptions]="{standalone: true}">
@@ -79,7 +79,7 @@
</div>
<div class="content-node-selector-demo-basic-table">
<div class="adf-content-node-selector-demo-basic-table">
<adf-content-node-selector-panel
[currentFolderId]="'-root-'"
[dropdownSiteList]="customSites">
@@ -92,7 +92,7 @@
<h2>Row Filtering</h2>
</mat-panel-title>
<mat-panel-description>
<label class="content-node-selector-demo-basic-label">
<label class="adf-content-node-selector-demo-basic-label">
Will automatically filter the row on the list
</label>
</mat-panel-description>
@@ -105,7 +105,7 @@
Slide Folders
</mat-slide-toggle>
<div class="content-node-selector-demo-basic-table">
<div class="adf-content-node-selector-demo-basic-table">
<adf-content-node-selector-panel
[rowFilter]="rowFilterFunction"
[currentFolderId]="'-root-'">
@@ -118,7 +118,7 @@
<h2>Custom Image Resolving</h2>
</mat-panel-title>
<mat-panel-description>
<label class="content-node-selector-demo-basic-label">
<label class="adf-content-node-selector-demo-basic-label">
A function to manage the way folder/file icons and thumbnails are resolved
</label>
</mat-panel-description>
@@ -128,7 +128,7 @@
Add Custom Images Resolver
</mat-slide-toggle>
<div class="content-node-selector-demo-basic-table">
<div class="adf-content-node-selector-demo-basic-table">
<adf-content-node-selector-panel
[imageResolver]="customImageResolver"
[currentFolderId]="'-root-'">
@@ -141,12 +141,12 @@
<h2>Set Page Size</h2>
</mat-panel-title>
<mat-panel-description>
<label class="content-node-selector-demo-basic-label">
<label class="adf-content-node-selector-demo-basic-label">
Number of items shown per page in the list. actual page {{actualPageSize}}
</label>
</mat-panel-description>
</mat-expansion-panel-header>
<div class="content-node-selector-demo-basic-table">
<div class="adf-content-node-selector-demo-basic-table">
<adf-content-node-selector-panel
[currentFolderId]="'-root-'"
[pageSize]="actualPageSize"
@@ -160,14 +160,14 @@
<h2>Is Valid Selection Function </h2>
</mat-panel-title>
<mat-panel-description>
<label class="content-node-selector-demo-basic-label">
<label class="adf-content-node-selector-demo-basic-label">
Function used to decide if the selected node has permission to be selected
</label>
</mat-panel-description>
</mat-expansion-panel-header>
<label>Only folder starting with the letter 'a' or 'A' are valid selections</label>
<label>Actual Selection is : {{validSelection}}</label>
<div class="content-node-selector-demo-basic-table">
<div class="adf-content-node-selector-demo-basic-table">
<adf-content-node-selector-panel
(select)="onNodeSelect($event)"
[isSelectionValid]="customIsValidFunction"
@@ -181,13 +181,13 @@
<h2>BreadCrumb Transform Function </h2>
</mat-panel-title>
<mat-panel-description>
<label class="content-node-selector-demo-basic-label">
<label class="adf-content-node-selector-demo-basic-label">
Transformation to be performed on the chosen/folder node before building the breadcrumb UI
</label>
</mat-panel-description>
</mat-expansion-panel-header>
<label>Folder starting with letter 'd' or 'D' won't be displayed in the breadcrumb dropdown</label>
<div class="content-node-selector-demo-basic-table">
<div class="adf-content-node-selector-demo-basic-table">
<adf-content-node-selector-panel
[breadcrumbTransform]="customBreadcrumbFunction"
[currentFolderId]="'-root-'">

4
demo-shell/src/app/components/content-node-selector/content-node-selector.component.scss
View File

@@ -1,4 +1,4 @@
.content-node-selector-demo {
.adf-content-node-selector-demo {
&-main {
display: flex;
@@ -11,7 +11,7 @@
&-basic-table {
height:400px;
width:700px
width:700px;
}
&-basic-label {

2
demo-shell/src/app/components/datatable/datatable.component.html
View File

@@ -19,7 +19,7 @@
<data-column type="image" key="icon" [sortable]="false"></data-column>
<data-column key="id" title="Id"></data-column>
<data-column key="createdOn" title="Created"></data-column>
<data-column key="name" title="Name" class="full-width name-column"></data-column>
<data-column key="name" title="Name" class="adf-full-width name-column"></data-column>
<data-column key="createdBy.name" title="Created By"></data-column>
</data-columns>
-->

6
demo-shell/src/app/components/datatable/datatable.component.ts
View File

@@ -108,10 +108,10 @@ export class DataTableComponent {
],
[
{ type: 'image', key: 'icon', title: '', srTitle: 'Thumbnail' },
{ type: 'text', key: 'id', title: 'Id', sortable: true , cssClass: 'desktop-only'},
{ type: 'text', key: 'id', title: 'Id', sortable: true , cssClass: 'adf-desktop-only'},
{ type: 'text', key: 'createdOn', title: 'Created On', sortable: true },
{ type: 'text', key: 'name', title: 'Name', cssClass: 'full-width name-column', sortable: true },
{ type: 'text', key: 'createdBy.name', title: 'Created By', sortable: true, cssClass: 'desktop-only'}
{ type: 'text', key: 'name', title: 'Name', cssClass: 'adf-full-width adf-name-column', sortable: true },
{ type: 'text', key: 'createdBy.name', title: 'Created By', sortable: true, cssClass: 'adf-desktop-only'}
]
);

40
demo-shell/src/app/components/files/files.component.html
View File

@@ -1,4 +1,4 @@
<div class="container">
<div class="adf-container">
<mat-accordion *ngIf="showRecentFiles" class="adf-container-recent">
<mat-expansion-panel hideToggle="true">
@@ -18,9 +18,9 @@
selectionMode="null">
<empty-folder-content>
<ng-template>
<div class="empty-list__block">
<div class="adf-empty-list__block">
<mat-icon>history</mat-icon>
<p class="empty-list__title">{{ 'DOCUMENT_LIST.RECENT.EMPTY_STATE.TITLE' | translate}}</p>
<p class="adf-empty-list__title">{{ 'DOCUMENT_LIST.RECENT.EMPTY_STATE.TITLE' | translate}}</p>
</div>
</ng-template>
</empty-folder-content>
@@ -33,7 +33,7 @@
</adf-sites-dropdown>
</div>
<div id="document-list-container" class="document-list-container" fxLayout="row" fxLayoutAlign="start stretch" fxLayoutGap="16px">
<div id="document-list-container" class="adf-document-list-container" fxLayout="row" fxLayoutAlign="start stretch" fxLayoutGap="16px">
<adf-upload-drag-area fxFlex="1 1 auto"
[disabled]="disableDragArea"
[acceptedFilesType]="getFileFiltering()"
@@ -42,22 +42,22 @@
[adf-node-permission]="'create'"
[adf-nodes]="disableDragArea ? getCurrentDocumentListNode() : []"
(beginUpload)="onBeginUpload($event)">
<div *ngIf="errorMessage" class="error-message">
<div *ngIf="errorMessage" class="adf-error-message">
<button (click)="resetError()" mat-icon-button>
<mat-icon>highlight_off</mat-icon>
</button>
<span class="error-message--text">{{errorMessage}}</span>
<span class="adf-error-message--text">{{errorMessage}}</span>
</div>
<adf-toolbar *ngIf="!disableDragArea" [color]="toolbarColor" class="adf-files-toolbar">
<adf-toolbar-title fxFlex="0 1 auto">
<adf-breadcrumb fxShow fxHide.lt-sm="true"
class="files-breadcrumb"
class="adf-files-breadcrumb"
root="APP.PERSONAL-FILES"
[target]="documentList"
[folderNode]="documentList.folderNode">
</adf-breadcrumb>
<adf-dropdown-breadcrumb fxHide fxShow.lt-sm="true"
class="files-breadcrumb"
class="adf-files-breadcrumb"
[target]="documentList"
[folderNode]="documentList.folderNode">
</adf-dropdown-breadcrumb>
@@ -215,7 +215,7 @@
(permissionError)="handlePermissionError($event)">
<no-permission-content *ngIf="enableCustomPermissionMessage">
<ng-template>
<h1>Cris you don't have permissions</h1>
<h1>You don't have permissions</h1>
</ng-template>
</no-permission-content>
<empty-folder-content *ngIf="disableDragArea">
@@ -230,15 +230,15 @@
key="$thumbnail"
type="image"
[sortable]="false"
class="image-table-cell"
[class.cell-thumbnail]="thumbnails">
class="adf-image-table-cell"
[class.adf-cell-thumbnail]="thumbnails">
</data-column>
<data-column
*ngIf="showNameColumn"
key="name"
title="{{'DOCUMENT_LIST.COLUMNS.DISPLAY_NAME' | translate}}"
[formatTooltip]="getNodeNameTooltip"
class="full-width ellipsis-cell">
class="adf-full-width adf-ellipsis-cell">
</data-column>
<!-- Location column demo -->
<!--
@@ -259,19 +259,19 @@
<data-column
title="{{'DOCUMENT_LIST.COLUMNS.TAG' | translate}}"
key="id"
class="full-width ellipsis-cell">
class="adf-full-width adf-ellipsis-cell">
<ng-template let-entry="$implicit">
<alfresco-tag-node-list [nodeId]="entry.data.getValue(entry.row, entry.col)"></alfresco-tag-node-list>
</ng-template>
</data-column>
-->
<data-column
class="full-width ellipsis-cell"
class="adf-full-width adf-ellipsis-cell"
title="{{'DOCUMENT_LIST.COLUMNS.NODE_ID' | translate}}"
key="id">
</data-column>
<data-column
class="desktop-only"
class="adf-desktop-only"
title="{{'DOCUMENT_LIST.COLUMNS.IS_LOCKED' | translate}}"
key="id">
<ng-template let-entry="$implicit">
@@ -284,14 +284,14 @@
<data-column
title="{{'DOCUMENT_LIST.COLUMNS.CREATED_BY' | translate}}"
key="createdByUser.displayName"
class="desktop-only">
class="adf-desktop-only">
</data-column>
<data-column
title="{{'DOCUMENT_LIST.COLUMNS.CREATED' | translate}}"
key="createdAt"
type="date"
[format]="enableMediumTimeFormat ? 'medium' : 'timeAgo'"
class="desktop-only">
class="adf-desktop-only">
</data-column>
</data-columns>
@@ -457,7 +457,7 @@
<p>Current folder ID: {{ documentList.currentFolderId }}</p>
<div class="p-10">
<div class="adf-p-10">
Selected Nodes:
<ul>
<li *ngFor="let node of documentList.selection">
@@ -466,7 +466,7 @@
</ul>
</div>
<div class="container">
<div class="adf-container">
<section>
<mat-slide-toggle color="primary" [(ngModel)]="showNameColumn">
Show Name Column
@@ -620,7 +620,7 @@
</section>
</div>
<div class="p-10">
<div class="adf-p-10">
<p>
{{'DOCUMENT_LIST.MULTISELECT_DESCRIPTION' | translate}}
</p>

21
demo-shell/src/app/components/files/files.component.scss
View File

@@ -2,12 +2,12 @@
$minimumDocumentListWidth: 900px;
$foreground: map-get($theme, foreground);
.container {
.adf-container {
margin: 10px !important;
}
@media screen and ($mat-xsmall) {
.container {
.adf-container {
margin: 0;
}
@@ -16,11 +16,11 @@
}
}
.error-message {
.adf-error-message {
text-align: left;
}
.error-message--text {
.adf-error-message--text {
color: #d50000;
}
@@ -28,11 +28,11 @@
height: 900px;
}
adf-document-list ::ng-deep adf-datatable tr.document-list__create {
adf-document-list ::ng-deep adf-datatable tr.adf-document-list__create {
background: green !important;
}
adf-document-list ::ng-deep adf-datatable tr.document-list__disable {
adf-document-list ::ng-deep adf-datatable tr.adf-document-list__disable {
background: red !important;
}
@@ -79,7 +79,7 @@
&-icon {
display: block;
font-size: 48px;
margin: 0 auto 32px auto;
margin: 0 auto 32px;
}
}
@@ -118,7 +118,7 @@
margin-left: 20px;
}
.empty-list__block {
.adf-empty-list__block {
height: 100%;
padding: 0;
margin: 0;
@@ -152,10 +152,11 @@
}
}
adf-file-uploading-dialog ::ng-deep .upload-dialog {
adf-file-uploading-dialog ::ng-deep .adf-upload-dialog {
width: 80%;
& ::ng-deep adf-file-uploading-list ::ng-deep adf-file-uploading-list-row .adf-file-uploading-row__group {
& ::ng-deep adf-file-uploading-list ::ng-deep adf-file-uploading-list-row
.adf-file-uploading-row__group {
min-width: 0;
}
}

4
demo-shell/src/app/components/form/form-list.component.html
View File

@@ -1,12 +1,12 @@
<adf-form-list [forms]="formList" (row-dblclick)="onRowDblClick($event)">
</adf-form-list>
<div class="form-container" *ngIf="!isEmptyForm()">
<div class="adf-form-container" *ngIf="!isEmptyForm()">
<adf-form #adfForm [form]="form" [data]="restoredData" [showValidationIcon]="showValidationIcon">
</adf-form>
</div>
<button mat-button (click)="store()" color="primary">{{'FORM-LIST.STORE' | translate }}</button>
<button mat-button (click)="restore()" color="primary">{{'FORM-LIST.RESTORE' | translate }}</button>
<section class="form-list-margin">
<section class="adf-form-list-margin">
<mat-slide-toggle color="primary" [(ngModel)]="showValidationIcon">
Show Validation Icon
</mat-slide-toggle>

6
demo-shell/src/app/components/form/form-list.component.scss
View File

@@ -1,12 +1,12 @@
.form-container {
.adf-form-container {
padding: 10px;
}
.store-form-container{
.adf-store-form-container {
width: 80%;
height: 80%;
}
.form-list-margin {
.adf-form-list-margin {
margin-left: 26px;
}

2
demo-shell/src/app/components/form/form-loading.component.html
View File

@@ -1,4 +1,4 @@
<div class="form-container">
<div class="adf-form-container">
<mat-accordion>
<mat-expansion-panel>
<mat-expansion-panel-header>

2
demo-shell/src/app/components/form/form-loading.component.scss
View File

@@ -1,3 +1,3 @@
.form-container {
.adf-form-container {
padding: 10px;
}

8
demo-shell/src/app/components/form/form.component.html
View File

@@ -2,7 +2,7 @@
<mat-tab-group>
<mat-tab label="Form">
<div class="form-container">
<div class="adf-form-container">
<adf-form
[showRefreshButton]="false"
[form]="form"
@@ -10,7 +10,7 @@
</adf-form>
</div>
<div class="console" #console>
<div class="adf-console" #console>
<h3>Error log:</h3>
<p *ngFor="let error of errorFields">Error {{ error.name }} {{error.validationSummary.message |
translate}}</p>
@@ -24,7 +24,7 @@
[(ngModel)]="formConfig"
(onInit)="onInitFormEditor($event)">
</ngx-monaco-editor>
<div class="form-editor-buttons">
<div class="adf-form-editor-buttons">
<button mat-raised-button id="adf-form-config-save" (click)="onSaveFormConfig()" color="primary">Save
form config
</button>
@@ -32,7 +32,7 @@
form config
</button>
</div>
<div class="upload-config-button">
<div class="adf-upload-config-button">
<a mat-raised-button color="primary" >
<mat-icon>file_upload</mat-icon>
<label for="upload-config-file">Upload JSON File</label>

12
demo-shell/src/app/components/form/form.component.scss
View File

@@ -1,17 +1,17 @@
.form-container {
.adf-form-container {
padding: 10px;
}
.main-content {
.adf-main-content {
padding: 0 15px;
}
.card-view {
.adf-card-view {
width: 30%;
display: inline-block;
}
.console {
.adf-console {
width: 60%;
display: inline-block;
vertical-align: top;
@@ -35,12 +35,12 @@
height: 500px !important;
}
.form-editor-buttons {
.adf-form-editor-buttons {
display: flex;
justify-content: space-evenly;
}
.upload-config-button {
.adf-upload-config-button {
display: flex;
justify-content: center;

2
demo-shell/src/app/components/header-data/header-data.component.html
View File

@@ -1,4 +1,4 @@
<div class="content header-data">
<div class="adf-content adf-header-data">
<h1>Header data</h1>
<mat-card>
<div>

4
demo-shell/src/app/components/header-data/header-data.component.scss
View File

@@ -1,4 +1,4 @@
.content {
.adf-content {
padding: 10px;
.mat-card {
padding: 16px 24px;
@@ -21,7 +21,7 @@
}
p {
margin: 0 0 5px 0;
margin: 0 0 5px;
}
}
}

2
demo-shell/src/app/components/home/home.component.scss
View File

@@ -26,7 +26,7 @@
font-size: 18px;
font-weight: 300;
line-height: 28px;
margin: 15px 0 25px 0;
margin: 15px 0 25px;
}
}

22
demo-shell/src/app/components/login/login.component.html
View File

@@ -1,7 +1,7 @@
<!--BPM, ECN AND CSRF TOGGLE-->
<div class="settings">
<p class="toggle">
<div class="adf-settings">
<p class="adf-toggle">
<mat-slide-toggle
id="switch3"
[color]="'primary'"
@@ -10,7 +10,7 @@
CSRF
</mat-slide-toggle>
</p>
<p class="toggle">
<p class="adf-toggle">
<mat-slide-toggle
id="switch4"
[color]="'primary'"
@@ -19,7 +19,7 @@
{{ 'LOGIN.LOGIN_FOOTER'| translate }}
</mat-slide-toggle>
</p>
<p class="toggle">
<p class="adf-toggle">
<mat-slide-toggle
id="adf-toggle-show-rememberme"
[color]="'primary'"
@@ -28,7 +28,7 @@
{{ 'LOGIN.SHOW_REMEMBERME'| translate }}
</mat-slide-toggle>
</p>
<p class="toggle">
<p class="adf-toggle">
<mat-slide-toggle
id="adf-toggle-show-successRoute"
[color]="'primary'"
@@ -37,7 +37,7 @@
{{ 'LOGIN.SHOW_SUCCESS_ROUTE'| translate }}
</mat-slide-toggle>
</p>
<p class="toggle">
<p class="adf-toggle">
<ng-container *ngIf="customSuccessRoute">
<mat-form-field floatPlaceholder="float">
<input matInput
@@ -48,7 +48,7 @@
</ng-container>
</p>
<p class="toggle">
<p class="adf-toggle">
<mat-slide-toggle
id="adf-toggle-logo"
[color]="'primary'"
@@ -57,7 +57,7 @@
{{ 'LOGIN.CUSTOM_LOGO'| translate }}
</mat-slide-toggle>
</p>
<p class="toggle">
<p class="adf-toggle">
<ng-container *ngIf="customLogoImage">
<mat-form-field floatPlaceholder="float">
<input matInput
@@ -72,7 +72,7 @@
<!--SETTING BUTTON-->
<a mat-fab class="setting-button" data-automation-id="settings" href="" routerLink="/settings" color="accent">
<a mat-fab class="adf-setting-button" data-automation-id="settings" href="" routerLink="/settings" color="accent">
<mat-icon>settings</mat-icon>
</a>
@@ -88,7 +88,7 @@
copyrightText="{{ 'application.copyright' | adfAppConfig }}"
(success)="onLogin($event)"
(error)="onError($event)">
<div class="mobile-settings">
<div class="adf-mobile-settings">
<p>
<mat-slide-toggle
id="switch3-mobile"
@@ -107,7 +107,7 @@
{{ 'LOGIN.LOGIN_FOOTER'| translate }}
</mat-slide-toggle>
</p>
<button type="button" mat-raised-button color="accent" class="mobile-setting-button" routerLink="/settings"
<button type="button" mat-raised-button color="accent" class="adf-mobile-setting-button" routerLink="/settings"
data-automation-id="settings">{{ 'APP_LAYOUT.SETTINGS'| translate }}
</button>

18
demo-shell/src/app/components/login/login.component.scss
View File

@@ -1,5 +1,5 @@
@mixin adf-login-component-theme($theme) {
.setting-button.mat-fab.mat-accent {
.adf-setting-button.mat-fab.mat-accent {
position: absolute;
right: 10px;
top: 10px;
@@ -7,7 +7,7 @@
}
.settings {
.adf-settings {
border-radius: 8px;
position: absolute;
background-color: papayawhip;
@@ -17,36 +17,36 @@
z-index: 1;
}
.toggle {
.adf-toggle {
width: auto;
margin: 5px;
padding: 5px;
}
.mobile-settings, .mobile-setting-button {
.adf-mobile-settings, .adf-mobile-setting-button {
display: none;
}
@media screen and ($mat-small) {
.settings, .setting-button.mat-fab.mat-accent {
.adf-settings, .adf-setting-button.mat-fab.mat-accent {
display: none;
}
.mobile-settings, .mobile-setting-button {
.adf-mobile-settings, .adf-mobile-setting-button {
display: block;
}
.mobile-setting-button {
.adf-mobile-setting-button {
width: 100%;
}
.mobile-settings {
.adf-mobile-settings {
padding-bottom: 20px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
}
.settings ::ng-deep .mat-slide-toggle-thumb-container {
.adf-settings ::ng-deep .mat-slide-toggle-thumb-container {
cursor: pointer;
}
}

2
demo-shell/src/app/components/logout/logout.component.scss
View File

@@ -26,7 +26,7 @@
font-size: 18px;
font-weight: 300;
line-height: 28px;
margin: 15px 0 25px 0;
margin: 15px 0 25px;
}
}

10
demo-shell/src/app/components/notifications/notifications.component.html
View File

@@ -1,4 +1,4 @@
<div class="main-content">
<div class="adf-main-content">
<h1>Notification Service</h1>
<ul>
@@ -32,24 +32,24 @@
<form [formGroup]="configForm">
<mat-form-field>
<mat-select class="form-control" formControlName="direction" placeholder="Direction" data-automation-id="notification-direction">
<mat-select formControlName="direction" placeholder="Direction" data-automation-id="notification-direction">
<mat-option *ngFor="let direction of directions" [value]="direction.value">
{{ direction.title }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<input matInput type="number" class="form-control" formControlName="duration" [value]="defaultDuration" placeholder="Duration" data-automation-id="notification-duration">
<input matInput type="number" formControlName="duration" [value]="defaultDuration" placeholder="Duration" data-automation-id="notification-duration">
</mat-form-field>
<mat-form-field>
<mat-select class="form-control" formControlName="horizontalPosition" placeholder="Horizontal Position" data-automation-id="notification-horizontal-position">
<mat-select formControlName="horizontalPosition" placeholder="Horizontal Position" data-automation-id="notification-horizontal-position">
<mat-option *ngFor="let horizontalPosition of horizontalPositions" [value]="horizontalPosition.value">
{{ horizontalPosition.title }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<mat-select class="form-control" formControlName="verticalPosition" placeholder="Vertical Position" data-automation-id="notification-vertical-position">
<mat-select formControlName="verticalPosition" placeholder="Vertical Position" data-automation-id="notification-vertical-position">
<mat-option *ngFor="let verticalPosition of verticalPositions" [value]="verticalPosition.value">{{ verticalPosition.title }}</mat-option>
</mat-select>
</mat-form-field>

2
demo-shell/src/app/components/notifications/notifications.component.scss
View File

@@ -1,3 +1,3 @@
.main-content {
.adf-main-content {
padding: 10px;
}

2
demo-shell/src/app/components/permissions/demo-permissions.component.html
View File

@@ -1,4 +1,4 @@
<div class="inherit_permission_button">
<div class="adf-inherit_permission_button">
<button mat-raised-button
[color]="toggleStatus?'accent':'primary'"
adf-inherit-permission [nodeId]="nodeId"

2
demo-shell/src/app/components/permissions/demo-permissions.component.scss
View File

@@ -1,4 +1,4 @@
.inherit_permission_button {
.adf-inherit_permission_button {
padding-top: 20px;
display: flex;
justify-content: center;

8
demo-shell/src/app/components/process-list-demo/process-list-demo.component.html
View File

@@ -1,11 +1,10 @@
<div class="process-list-inputs">
<div class="adf-process-list-inputs">
<form [formGroup]="processListForm">
<mat-form-field>
<mat-label>App Id</mat-label>
<input
matInput
class="form-control"
[formControl]="processAppId">
<mat-error *ngIf="processAppId.hasError('required')">
{{ 'PROCESS_LIST_DEMO.ERROR_MESSAGE.APP_ID_REQUIRED_ERROR' | translate }}
@@ -31,7 +30,6 @@
<mat-label>ProcessDefinitionId</mat-label>
<input
matInput
class="form-control"
[formControl]="processDefinitionId">
<mat-hint>SimpleProcess:1:2</mat-hint>
</mat-form-field>
@@ -39,7 +37,6 @@
<mat-form-field>
<mat-label>State</mat-label>
<mat-select
class="form-control"
[formControl]="processState">
<mat-option *ngFor="let stateOption of stateOptions" [value]="stateOption.value">{{ stateOption.title }}</mat-option>
</mat-select>
@@ -48,7 +45,6 @@
<mat-form-field>
<mat-label>Sort</mat-label>
<mat-select
class="form-control"
[formControl]="processSort">
<mat-option *ngFor="let sortOption of sortOptions" [value]="sortOption.value">{{ sortOption.title }}</mat-option>
</mat-select>
@@ -59,7 +55,6 @@
<mat-label>Items per page</mat-label>
<input
matInput
class="form-control"
[formControl]="processSize">
<mat-error *ngIf="processSize.hasError('min')">
{{ 'PROCESS_LIST_DEMO.ERROR_MESSAGE.NUMBER_GREATER_THAN' | translate: { value: minValue } }}
@@ -73,7 +68,6 @@
<mat-label>Page</mat-label>
<input
matInput
class="form-control"
[formControl]="processPage">
<mat-error *ngIf="processPage.hasError('min')">
{{ 'PROCESS_LIST_DEMO.ERROR_MESSAGE.NUMBER_GREATER_THAN' | translate: { value: minValue } }}

6
demo-shell/src/app/components/process-list-demo/process-list-demo.component.scss
View File

@@ -1,10 +1,10 @@
.process-list-inputs {
.adf-process-list-inputs {
margin: 20px auto 0;
max-width: 1200px;
& mat-form-field {
margin: 20px 5px;
width: calc(100% * (1/4) - 10px);
width: calc(100% * (1 / 4) - 10px);
}
}
@@ -14,7 +14,7 @@
justify-content: center;
}
.process-list-error-message {
.adf-process-list-error-message {
color: red;
text-align: center;
}

16
demo-shell/src/app/components/process-service/process-service.component.html
View File

@@ -1,7 +1,7 @@
<mat-tab-group [(selectedIndex)]="activeTab" (selectedTabChange)="onTabChange($event)"
data-automation-id="navigation-bar">
<mat-tab id="tasks-header" href="#tasks" label="{{'PS-TAB.TASKS-TAB' | translate}}">
<div class="page-content" *ngIf="showTaskTab">
<mat-tab id="adf-tasks-header" href="#tasks" label="{{'PS-TAB.TASKS-TAB' | translate}}">
<div class="adf-page-content" *ngIf="showTaskTab">
<div class="adf-grid" fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
<div class="adf-grid-item adf-tasks-menu" fxFlex.gt-md="265px">
<div class="adf-list-buttons">
@@ -57,8 +57,8 @@
<!-- Custom column definition demo -->
<!-- <data-columns>
<data-column key="name" title="{{'ADF_TASK_LIST.PROPERTIES.NAME' | translate}}" class="full-width name-column"></data-column>
<data-column key="created" title="{{'ADF_TASK_LIST.PROPERTIES.CREATED' | translate}}" class="hidden"></data-column>
<data-column key="name" title="{{'ADF_TASK_LIST.PROPERTIES.NAME' | translate}}" class="adf-full-width name-column"></data-column>
<data-column key="created" title="{{'ADF_TASK_LIST.PROPERTIES.CREATED' | translate}}" class="adf-hidden"></data-column>
</data-columns> -->
</adf-tasklist>
@@ -113,7 +113,7 @@
</mat-tab>
<mat-tab id="processes-header" href="#processes"
label="{{'PS-TAB.PROCESSES-TAB' | translate}}">
<div class="page-content" *ngIf="showProcessTab">
<div class="adf-page-content" *ngIf="showProcessTab">
<div class="adf-grid" fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
<div class="adf-grid-item adf-processes-menu" fxFlex.gt-md="225px">
<div class="adf-list-buttons">
@@ -150,7 +150,7 @@
</mat-accordion>
</div>
<div class="adf-grid-item adf-processes-list adf-list" fxFlex.gt-md="380px"
[ngClass.gt-md]="{'small-pagination': true}"
[ngClass.gt-md]="{'adf-small-pagination': true}"
*ngIf="processFilter && !isStartProcessMode()">
<adf-process-instance-list
#processList
@@ -169,8 +169,8 @@
<!-- Custom column definition demo -->
<!-- <data-columns>
<data-column key="name" title="ADF_PROCESS_LIST.PROPERTIES.NAME" class="full-width name-column"></data-column>
<data-column key="created" title="ADF_PROCESS_LIST.PROPERTIES.CREATED" class="hidden"></data-column>
<data-column key="name" title="ADF_PROCESS_LIST.PROPERTIES.NAME" class="adf-full-width name-column"></data-column>
<data-column key="created" title="ADF_PROCESS_LIST.PROPERTIES.CREATED" class="adf-hidden"></data-column>
</data-columns> -->
</adf-process-instance-list>

14
demo-shell/src/app/components/process-service/process-service.component.scss
View File

@@ -1,4 +1,4 @@
@mixin adf-process-service-component-theme($theme){
@mixin adf-process-service-component-theme($theme) {
.adf-no-form-container {
text-align: center;
font-weight: 600;
@@ -9,7 +9,9 @@
.adf-grid-item {
margin: 4px;
box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
0 3px 1px -2px rgba(0, 0, 0, 0.2),
0 1px 5px 0 rgba(0, 0, 0, 0.12);
padding: 10px;
}
@@ -21,8 +23,8 @@
width: 100%;
}
.adf-tasks-list.small-pagination,
.adf-processes-list.small-pagination {
.adf-tasks-list.adf-small-pagination,
.adf-processes-list.adf-small-pagination {
.adf-pagination {
flex-wrap: wrap;
@@ -99,7 +101,7 @@
}
@media screen and ($mat-small) {
container-widget .grid-list {
container-widget .adf-grid-list {
flex-direction: column;
}
}
@@ -121,7 +123,7 @@
align-items: center;
}
.mat-expansion-panel-header.mat-expanded .mat-expansion-panel-header-title{
.mat-expansion-panel-header.mat-expanded .mat-expansion-panel-header-title {
color: mat-color($primary);
opacity: 1;
}

2
demo-shell/src/app/components/report-issue/report-issue.component.scss
View File

@@ -21,4 +21,4 @@
height: 250px;
}
}
}
}

10
demo-shell/src/app/components/search/search-extended.component.html
View File

@@ -4,7 +4,7 @@
{{'APP_LAYOUT.SEARCH_SERVICE_APPROACH' | translate}}
</mat-checkbox>
<div id="container-for-custom-input" class="search-extended-input-containers">
<div id="container-for-custom-input" class="adf-search-extended-input-containers">
<mat-form-field>
<label>{{'APP_LAYOUT.WORD_TO_SEARCH' | translate}}</label>
<input type="text" matInput
@@ -14,12 +14,12 @@
<div>
<adf-search #auto="searchAutocomplete"
[queryBody]="generateQueryBody(searchedWord)"
class="example-card-search-container">
class="adf-example-card-search-container">
<ng-template let-data>
<mat-card class="example-card"
<mat-card class="adf-example-card"
*ngFor="let item of data?.list?.entries; let idx = index" (click)="onClick(item)">
<mat-card-header>
<div mat-card-avatar class="example-header-image"></div>
<div mat-card-avatar class="adf-example-header-image"></div>
<mat-card-title>{{ item?.entry.name }}</mat-card-title>
<mat-card-subtitle>{{ item?.entry.createdAt }}</mat-card-subtitle>
</mat-card-header>
@@ -30,7 +30,7 @@
</p>
</mat-card-content>
</mat-card>
<mat-card class="example-card" id="search_no_result" *ngIf="data?.list?.entries.length === 0">
<mat-card class="adf-example-card" id="search_no_result" *ngIf="data?.list?.entries.length === 0">
<p mat-line class="adf-search-fixed-text">{{ 'SEARCH.RESULTS.NONE' | translate:{searchTerm: searchedWord} }}</p>
</mat-card>
</ng-template>

24
demo-shell/src/app/components/search/search-extended.component.scss
View File

@@ -1,50 +1,50 @@
div.search-results-container {
padding: 0 20px 20px 20px;
div.adf-search-results-container {
padding: 0 20px 20px;
}
.adf-search-title {
font-size: 22px;
padding: 15px 0 15px 0;
padding: 15px 0;
}
@media screen and (max-width: 600px) {
:host .col-display-name {
:host .adf-col-display-name {
min-width: 100px;
}
:host .col-modified-at, :host .col-modified-by {
:host .adf-col-modified-at, :host .adf-col-modified-by {
display: none;
}
:host div.search-results-container table {
:host div.adf-search-results-container table {
width: 100%;
}
}
.adf-search-results-content{
.adf-search-results-content {
display: flex;
}
.search-extended-input-containers {
.adf-search-extended-input-containers {
display: flex;
flex-direction: row-reverse;
justify-content: space-evenly;
}
.search-extended-input-textarea {
.adf-search-extended-input-textarea {
width: 300px;
}
.search-extended-label-error {
.adf-search-extended-label-error {
display: flex;
flex-direction: column;
}
.example-card {
.adf-example-card {
width: 200px;
flex: 0 20%;
margin: 15px;
}
.example-card-search-container {
.adf-example-card-search-container {
display: flex;
flex-wrap: wrap;
}

12
demo-shell/src/app/components/search/search-result.component.scss
View File

@@ -20,23 +20,23 @@
}
}
div.search-results-container {
padding: 0 20px 20px 20px;
div.adf-search-results-container {
padding: 0 20px 20px;
}
.adf-search-title {
font-size: 22px;
padding: 15px 0 15px 0;
padding: 15px 0;
}
@media screen and (max-width: 600px) {
:host .col-display-name {
:host .adf-col-display-name {
min-width: 100px;
}
:host .col-modified-at, :host .col-modified-by {
:host .adf-col-modified-at, :host .adf-col-modified-by {
display: none;
}
:host div.search-results-container table {
:host div.adf-search-results-container table {
width: 100%;
}
}

2
demo-shell/src/app/components/shared-link-view/shared-link-view.component.scss
View File

@@ -1,4 +1,4 @@
.app-shared-link-view {
.adf-shared-link-view {
width: 100%;
height: 100%;
}

2
demo-shell/src/app/components/shared-link-view/shared-link-view.component.ts
View File

@@ -24,7 +24,7 @@ import { ActivatedRoute, Router } from '@angular/router';
styleUrls: [ 'shared-link-view.component.scss' ],
encapsulation: ViewEncapsulation.None,
// tslint:disable-next-line:use-host-property-decorator
host: { 'class': 'app-shared-link-view' }
host: { 'class': 'adf-shared-link-view' }
})
export class SharedLinkViewComponent implements OnInit {

2
demo-shell/src/app/components/task-list-cloud-demo/task-list-cloud-demo.component.html
View File

@@ -15,7 +15,7 @@
Customise your filter
</mat-panel-description>
</mat-expansion-panel-header>
<div class="task-cloud-demo-select">
<div class="adf-task-cloud-demo-select">
<mat-form-field style="margin: 8px;">
<mat-select placeholder="Status" [(ngModel)]="status">
<mat-option value="">

8
demo-shell/src/app/components/task-list-cloud-demo/task-list-cloud-demo.component.scss
View File

@@ -1,15 +1,15 @@
.task-cloud-demo-select {
.adf-task-cloud-demo-select {
padding: 10px;
}
.task-cloud-demo-select .mat-expansion-panel-body {
.adf-task-cloud-demo-select .mat-expansion-panel-body {
display: flex;
}
.app-task-list-cloud-demo-selection{
.adf-app-task-list-cloud-demo-selection {
display: flex;
}
.task-row-clicked {
.adf-task-row-clicked {
align-self: center;
}

13
demo-shell/src/app/components/task-list-demo/task-list-demo.component.html
View File

@@ -1,11 +1,10 @@
<div class="task-list-demo-inputs">
<div class="adf-task-list-demo-inputs">
<form [formGroup]="taskListForm">
<mat-form-field>
<mat-label>App Id</mat-label>
<input
matInput
class="form-control"
[formControl]="taskAppId" data-automation-id="appId input">
<mat-error *ngIf="taskAppId.hasError('pattern')">
{{ 'TASK_LIST_DEMO.ERROR_MESSAGE.APP_ID_TYPE_ERROR' | translate }}
@@ -16,7 +15,6 @@
<mat-label>Task Name</mat-label>
<input
matInput
class="form-control"
[formControl]="taskName" data-automation-id="task name">
</mat-form-field>
@@ -24,7 +22,6 @@
<mat-label>Task Id</mat-label>
<input
matInput
class="form-control"
[formControl]="taskId" data-automation-id="task id">
</mat-form-field>
@@ -32,7 +29,7 @@
<mat-label>Start</mat-label>
<input
matInput
class="form-control" data-automation-id="start"
data-automation-id="start"
matTooltip="{{ 'TASK_LIST_DEMO.TOOLTIP_MESSAGE.START_INPUT' | translate }}"
[formControl]="taskStart">
<mat-error *ngIf="taskStart.hasError('pattern')">
@@ -104,7 +101,6 @@
<mat-form-field>
<mat-label>Process Instance</mat-label>
<mat-select
class="form-control"
[formControl]="taskIncludeProcessInstance">
<mat-option *ngFor="let includeProcessInstanceOption of includeProcessInstanceOptions"
[value]="includeProcessInstanceOption.value">{{ includeProcessInstanceOption.title }}
@@ -115,7 +111,6 @@
<mat-form-field>
<mat-label>Assignment</mat-label>
<mat-select
class="form-control"
[formControl]="taskAssignment">
<mat-option *ngFor="let assignmentOption of assignmentOptions" [value]="assignmentOption.value">{{
assignmentOption.title }}
@@ -126,7 +121,6 @@
<mat-form-field data-automation-id="state">
<mat-label>State</mat-label>
<mat-select
class="form-control"
[formControl]="taskState" data-automation-id="selected state">
<mat-option *ngFor="let stateOption of stateOptions" [value]="stateOption.value">{{
stateOption.title }}
@@ -137,7 +131,6 @@
<mat-form-field data-automation-id="sort">
<mat-label>Sort</mat-label>
<mat-select
class="form-control"
[formControl]="taskSort" data-automation-id="selected sort">
<mat-option *ngFor="let sortOption of sortOptions" [value]="sortOption.value">{{ sortOption.title
}}
@@ -169,7 +162,7 @@
#taskList>
<data-columns>
<data-column key="id" title="Id"></data-column>
<data-column key="assignee" title="Assignee" class="full-width name-column">
<data-column key="assignee" title="Assignee" class="adf-full-width adf-name-column">
<ng-template let-entry="$implicit">
<div>{{entry.row.obj.assignee | fullName}}</div>
</ng-template>

6
demo-shell/src/app/components/task-list-demo/task-list-demo.component.scss
View File

@@ -1,10 +1,10 @@
.task-list-demo-inputs {
.adf-task-list-demo-inputs {
margin: 20px auto 0;
max-width: 1200px;
& mat-form-field {
margin: 20px 5px;
width: calc(100% * (1/4) - 10px);
width: calc(100% * (1 / 4) - 10px);
}
}
@@ -14,7 +14,7 @@
justify-content: center;
}
.task-list-demo-error-message {
.adf-task-list-demo-error-message {
color: red;
text-align: center;
}

2
demo-shell/src/app/components/trashcan/trashcan.component.html
View File

@@ -55,7 +55,7 @@
key="$thumbnail"
type="image"
[sortable]="false"
class="image-table-cell">
class="adf-image-table-cell">
</data-column>
<data-column

34
demo-shell/src/index.html
View File

@@ -15,7 +15,7 @@
height: 100%;
}
.loader-container {
.adf-loader-container {
display: flex;
flex-direction: column;
height:100%;
@@ -24,23 +24,23 @@
justify-content: center;
}
.loader-item {
.adf-loader-item {
max-height:100px;
max-width:300px;
}
.loader-spinner {
.adf-loader-spinner {
max-height:300px;
max-width:300px;
}
.loader-text{
.adf-loader-text {
white-space: nowrap;
text-align: center;
position: relative;
}
.loader {
.adf-loader {
position: absolute;
width: 100px;
height: 100px;
@@ -49,17 +49,17 @@
transform: translate(-50%, -50%);
}
.circular {
.adf-circular {
animation: rotate 2s linear infinite;
height: 100px;
position: relative;
width: 100px;
}
.path {
stroke-dasharray: 1,200;
.adf-path {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
stroke: #B6463A;
stroke: #b6463a;
animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
stroke-linecap: round;
}
@@ -71,15 +71,15 @@
}
@keyframes dash {
0% {
stroke-dasharray: 1,200;
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 89,200;
stroke-dasharray: 89, 200;
stroke-dashoffset: -35;
}
100% {
stroke-dasharray: 89,200;
stroke-dasharray: 89, 200;
stroke-dashoffset: -124;
}
}
@@ -101,14 +101,14 @@
</head>
<body class="adf-background-color">
<app-root>
<div id="loader-container" class="loader-container">
<div class="loader-spinner">
<svg class="circular">
<div id="loader-container" class="adf-loader-container">
<div class="adf-loader-spinner">
<svg class="adf-circular">
<circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="5" stroke-miterlimit="10"></circle>
</svg>
</div>
<div class="loader-item">
<div id="loader-text" class="loader-text">Loading Demo Shell..</div>
<div class="adf-loader-item">
<div id="loader-text" class="adf-loader-text">Loading Demo Shell..</div>
</div>
</div>
</app-root>