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-4595] Change demo-shell style classes prefix (#5132)

Browse Source 
* [ADF-4595] Change demo-shell style classes prefix

* Change more files

* Trigger e2e tests

* Fix e2e selectors

* Fix e2e tests

* Fix e2e tests
This commit is contained in:
davidcanonieto
2019-10-18 17:35:01 +01:00
committed by Eugenio Romano
parent 83094b43ff
commit f2c1778eda
101 changed files with 576 additions and 562 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,4 +1,4 @@
<div class="adf-demo-app-container">
<div class="app-demo-app-container">
<router-outlet></router-outlet>
<router-outlet name="overlay"></router-outlet>
</div>

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

@@ -7,7 +7,7 @@ router-outlet[name='overlay'] + * {
right: 0;
}
.adf-demo-app-container {
.app-demo-app-container {
height: 100%;
width: 100%;
}

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

@@ -8,11 +8,11 @@
[tooltip]="tooltip | translate" [showSidenavToggle]="showMenu" [color]="color" [position]="position"
(clicked)=toggleMenu($event)>
<div class="adf-app-layout-menu-spacer"></div>
<div class="app-layout-menu-spacer"></div>
<app-search-bar fxFlex="0 1 auto"></app-search-bar>
<div class="adf-header-delimiexpandedSidenavter"></div>
<div class="app-header-delimiexpandedSidenavter"></div>
<adf-userinfo [menuPositionX]="'before'" [menuPositionY]="'above'">
</adf-userinfo>
@@ -21,7 +21,7 @@
<button data-automation-id="language-menu-button" mat-icon-button [matMenuTriggerFor]="langMenu">
<mat-icon>language</mat-icon>
</button>
<mat-menu #langMenu="matMenu" class="adf-menu">
<mat-menu #langMenu="matMenu" class="app-menu">
<adf-language-menu></adf-language-menu>
</mat-menu>
@@ -33,13 +33,13 @@
<adf-sidenav-layout-navigation>
<ng-template let-isMenuMinimized="isMenuMinimized">
<mat-nav-list class="adf-sidenav-linklist">
<mat-nav-list class="app-sidenav-linklist">
<ng-container *ngFor="let link of links">
<ng-container *ngIf="link.children">
<mat-list-item (click)="trigger.openMenu()" [attr.data-automation-id]="link.title | translate" class="adf-sidenav-link">
<mat-list-item (click)="trigger.openMenu()" [attr.data-automation-id]="link.title | translate" class="app-sidenav-link">
<mat-icon matListIcon>{{link.icon}}</mat-icon>
<span matLine *ngIf="!isMenuMinimized()">{{link.title | translate }}</span>
<mat-icon class="adf-sidenav-link__expand-button" [matMenuTriggerData]="{links: link.children}"
<mat-icon class="app-sidenav-link__expand-button" [matMenuTriggerData]="{links: link.children}"
rippleTrigger mat-icon-button #trigger="matMenuTrigger"
[matMenuTriggerFor]="nestedMenu">arrow_right</mat-icon>
</mat-list-item>
@@ -47,15 +47,15 @@
<ng-container *ngIf="!link.children">
<mat-list-item [routerLink]="link.href"
routerLinkActive="adf-sidenav-link--active" [routerLinkActiveOptions]="{ exact: true }"
[attr.data-automation-id]="link.title | translate" class="adf-sidenav-link">
routerLinkActive="app-sidenav-link--active" [routerLinkActiveOptions]="{ exact: true }"
[attr.data-automation-id]="link.title | translate" class="app-sidenav-link">
<mat-icon matListIcon >{{link.icon}}</mat-icon>
<span matLine *ngIf="!isMenuMinimized()">{{link.title | translate }}</span>
</mat-list-item>
</ng-container>
</ng-container>
<mat-list-item adf-logout [enableRedirect]="enableRedirect" redirectUri="/logout" class="adf-sidenav-link" data-automation-id="Logout" >
<mat-list-item adf-logout [enableRedirect]="enableRedirect" redirectUri="/logout" class="app-sidenav-link" data-automation-id="Logout" >
<mat-icon matListIcon>exit_to_app</mat-icon>
<span matLine *ngIf="!isMenuMinimized()">Logout</span>
</mat-list-item>
@@ -76,9 +76,9 @@
<mat-menu #nestedMenu="matMenu" xPosition="after" class="nestedMenu">
<ng-template matMenuContent let-links="links">
<button mat-menu-item *ngFor="let link of links"
class="adf-sidenav-link"
class="app-sidenav-link"
[attr.data-automation-id]="link.title | translate"
routerLinkActive="adf-sidenav-link--active"
routerLinkActive="app-sidenav-link--active"
[routerLink]="link.href"
[routerLinkActiveOptions]="{ exact: true }">

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

@@ -1,4 +1,4 @@
@mixin adf-app-layout-theme($theme) {
@mixin app-layout-theme($theme) {
$primary: map-get($theme, primary);
$minimumAppWidth: 320px;
@@ -14,17 +14,17 @@
}
}
.adf-app-layout {
.app-layout {
display: flex;
flex: 1;
min-width: $minimumAppWidth;
height: 100%;
.adf-sidenav-link--active {
.app-sidenav-link--active {
color: mat-color($primary);
}
.adf-sidenav-link {
.app-sidenav-link {
.mat-list-text {
font-size: 14px;
white-space: nowrap;
@@ -33,7 +33,7 @@
}
}
.mat-nav-list .mat-list-item.adf-sidenav-link {
.mat-nav-list .mat-list-item.app-sidenav-link {
height: 40px;
}
@@ -47,7 +47,7 @@
display: none;
}
.adf-menu {
.app-menu {
padding-top: 0;
}
}
@@ -63,7 +63,7 @@
}
}
[dir='rtl'] .adf-sidenav-link__expand-button {
[dir='rtl'] .app-sidenav-link__expand-button {
transform: rotateY(180deg);
}
}

2
demo-shell/src/app/components/app-layout/app-layout.component.ts
View File

@@ -25,7 +25,7 @@ import { takeUntil } from 'rxjs/operators';
templateUrl: 'app-layout.component.html',
styleUrls: ['app-layout.component.scss'],
host: {
'class': 'adf-app-layout'
'class': 'app-layout'
},
encapsulation: ViewEncapsulation.None
})

14
demo-shell/src/app/components/app-layout/cloud/form-demo/cloud-form-demo.component.html
View File

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

14
demo-shell/src/app/components/app-layout/cloud/form-demo/cloud-form-demo.component.scss
View File

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

8
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="adf-breadcrumb-container-restricted">
<div class="app-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="adf-full-content-toolbar">
<adf-toolbar class="app-full-content-toolbar">
<adf-toolbar-title fxFlex="0 1 auto">
<adf-breadcrumb root="APP.PERSONAL-FILES" [target]="documentList" [folderNode]="documentList.folderNode">
</adf-breadcrumb>
@@ -79,11 +79,11 @@
<h2>6. Dropdown Breadcrumb</h2>
<adf-dropdown-breadcrumb fxHide fxShow.lt-sm="true"
class="adf-files-breadcrumb"
class="app-files-breadcrumb"
[target]="documentList">
</adf-dropdown-breadcrumb>
<div class="adf-content">
<div class="app-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,13 +1,13 @@
.adf-breadcrumb-container-restricted {
.app-breadcrumb-container-restricted {
width: 800px;
max-width: 800px;
border: 1px solid lightgray;
}
.adf-content {
.app-content {
margin: 10px 0;
}
.adf-full-content-toolbar .adf-toolbar-title .adf-breadcrumb {
.app-full-content-toolbar .app-toolbar-title .app-breadcrumb {
width: 0;
}

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

@@ -1,7 +1,7 @@
<div class="adf-main-content">
<div class="app-main-content">
<h1>CardView Component</h1>
<mat-card class="adf-card-view">
<mat-card class="app-card-view">
<adf-card-view
[properties]="properties"
[editable]="true"
@@ -10,30 +10,30 @@
</adf-card-view>
</mat-card>
<div class="adf-console" #console>
<div class="app-console" #console>
<h3>Changes log:</h3>
<p *ngFor="let log of logs">{{ log }}</p>
</div>
</div>
<p class="adf-toggle">
<p class="app-toggle">
<mat-slide-toggle
id="adf-toggle-editable"
id="app-toggle-editable"
[color]="'primary'"
(change)="toggleEditable()"
[checked]="isEditable">
Editable
</mat-slide-toggle><br>
<mat-slide-toggle
id="adf-toggle-clear-date"
id="app-toggle-clear-date"
[color]="'primary'"
(change)="toggleClearDate()"
[checked]="showClearDateAction">
Show clear date icon
</mat-slide-toggle><br>
<mat-slide-toggle
id="adf-toggle-none-option"
id="app-toggle-none-option"
[color]="'primary'"
(change)="toggleNoneOption()"
[checked]="showNoneOption">

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

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

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

@@ -1,8 +1,8 @@
<adf-toolbar>
<div fxLayout="column" fxLayoutAlign="center">
<div fxLayout="row">
<div class="adf-app-crumb">{{appName + ' >'}} </div>
<div class="adf-filter-crumb"> {{filterName | translate}}</div>
<div class="app-crumb">{{appName + ' >'}} </div>
<div class="app-filter-crumb"> {{filterName | translate}}</div>
</div>
</div>
</adf-toolbar>

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

@@ -1,8 +1,8 @@
.adf-app-crumb {
.app-app-crumb {
opacity: 0.5;
}
.adf-filter-crumb {
.app-filter-crumb {
opacity: 0.8;
margin-left: 5px;
}

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

@@ -1,3 +1,3 @@
adf-cloud-task-filters .adf-filters__entry, adf-cloud-process-filters .adf-filters__entry {
app-cloud-task-filters .app-filters__entry, app-cloud-process-filters .app-filters__entry {
padding-left: 0 !important;
}

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

@@ -1,4 +1,4 @@
<mat-tab-group fxFill class="adf-cloud-layout-tab-body">
<mat-tab-group fxFill class="app-cloud-layout-tab-body">
<mat-tab label="{{'PS_CLOUD_TAB.APPS_TAB' | translate}}">
<div fxFill fxLayout>
<adf-sidenav-layout fxFlex [sidenavMin]="70" [sidenavMax]="270" [stepOver]="780">

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

@@ -1,7 +1,7 @@
.adf-cloud-layout-overflow {
.app-cloud-layout-overflow {
overflow: auto;
}
.adf-cloud-layout-tab-body .mat-tab-body-wrapper {
.app-cloud-layout-tab-body .mat-tab-body-wrapper {
height: 100%;
}

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

@@ -1,4 +1,4 @@
<mat-tab-group fxFill class="adf-cloud-layout-tab-body">
<mat-tab-group fxFill class="app-cloud-layout-tab-body">
<mat-tab label="{{'PS_CLOUD_TAB.APPS_TAB' | translate}}">
<div fxFill fxLayout>
<adf-sidenav-layout fxFlex [sidenavMin]="70" [sidenavMax]="270" [stepOver]="780">

4
demo-shell/src/app/components/cloud/community/community-cloud.component.ts
View File

@@ -21,11 +21,11 @@ import { CloudLayoutService } from '../services/cloud-layout.service';
@Component({
templateUrl: './community-cloud.component.html',
styles: [`.adf-cloud-layout-overflow {
styles: [`.app-cloud-layout-overflow {
overflow: auto;
}
.adf-cloud-layout-tab-body .mat-tab-body-wrapper {
.app-cloud-layout-tab-body .mat-tab-body-wrapper {
height: 100% !important;
}
`],

6
demo-shell/src/app/components/cloud/community/community-process-details-cloud.component.html
View File

@@ -5,11 +5,11 @@
<h4 data-automation-id="process-details-header">Simple page to show the process instance: {{ processInstanceId }} of the app: {{ appName }}</h4>
<div class="adf-process-cloud-container">
<div class="app-process-cloud-container">
<adf-cloud-task-list
fxFlex
class="adf-cloud-layout-overflow"
class="app-cloud-layout-overflow"
[appName]="''"
[processInstanceId]="processInstanceId"
(rowClick)="onRowClick($event)"
@@ -17,7 +17,7 @@
</adf-cloud-task-list>
<adf-cloud-process-header
class="adf-process-cloud-header"
class="app-process-cloud-header"
[appName]="''"
[processInstanceId]="processInstanceId">
</adf-cloud-process-header>

2
demo-shell/src/app/components/cloud/community/community-process-details-cloud.component.scss
View File

@@ -1,4 +1,4 @@
.adf {
.app {
&-process-cloud-container {
display: flex;
}

2
demo-shell/src/app/components/cloud/community/community-processes-cloud.component.html
View File

@@ -12,7 +12,7 @@
<adf-cloud-process-list #processCloud
fxFlex
[appName]="''"
class="adf-cloud-layout-overflow"
class="app-cloud-layout-overflow"
[initiator]="editedFilter.initiator"
[processDefinitionId]="editedFilter.processDefinitionId"
[processDefinitionKey]="editedFilter.processDefinitionKey"

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

@@ -12,7 +12,7 @@
<adf-cloud-task-list #taskCloud
fxFlex
[appName]="''"
class="adf-cloud-layout-overflow"
class="app-cloud-layout-overflow"
[processDefinitionId]="editedFilter.processDefinitionId"
[processInstanceId]="editedFilter.processInstanceId"
[name]="editedFilter.taskName"

2
demo-shell/src/app/components/cloud/community/community-task-details-cloud.component.scss
View File

@@ -1,5 +1,5 @@
.adf {
.app {
&-task-detail-container {
display: flex;

54
demo-shell/src/app/components/cloud/people-groups-cloud-demo.component.html
View File

@@ -1,4 +1,4 @@
<mat-card class="adf-section">
<mat-card class="app-section">
<mat-card-title>
{{ 'APP_LAYOUT.PEOPLE_CLOUD' | translate}}
</mat-card-title>
@@ -6,31 +6,31 @@
<mat-card-content>
<br>
<mat-radio-group (change)="onChangePeopleMode($event)">
<mat-radio-button checked="true" class="adf-people-single-mode" data-automation-id="adf-people-single-mode" value="{{ peopleSingleMode }}">{{
<mat-radio-button checked="true" class="app-people-single-mode" data-automation-id="app-people-single-mode" value="{{ peopleSingleMode }}">{{
'PEOPLE_GROUPS_CLOUD.SINGLE' | translate }}</mat-radio-button>
<mat-radio-button class="adf-people-multiple-mode" data-automation-id="adf-people-multiple-mode" value="{{ peopleMultipleMode }}">{{
<mat-radio-button class="app-people-multiple-mode" data-automation-id="app-people-multiple-mode" value="{{ peopleMultipleMode }}">{{
'PEOPLE_GROUPS_CLOUD.MULTI' | translate }}</mat-radio-button>
</mat-radio-group>
<div class="people-control-options">
<div class="app-people-control-options">
<mat-radio-group (change)="onChangePeopleFilterMode($event)">
<mat-radio-button checked="true" class="adf-people-single-mode" value="appName">{{
<mat-radio-button checked="true" class="app-people-single-mode" value="appName">{{
'PEOPLE_GROUPS_CLOUD.APP_FILTER_MODE' | translate }}</mat-radio-button>
<mat-radio-button class="adf-people-multiple-mode" data-automation-id="adf-people-filter-role" value="role">{{
<mat-radio-button class="app-people-multiple-mode" data-automation-id="app-people-filter-role" value="role">{{
'PEOPLE_GROUPS_CLOUD.ROLE_FILTER_MODE' | translate }}</mat-radio-button>
</mat-radio-group>
<mat-form-field *ngIf="!isPeopleAppNameSelected()" class="adf-preselect-value">
<mat-form-field *ngIf="!isPeopleAppNameSelected()" class="app-preselect-value">
<mat-label>{{ 'PEOPLE_GROUPS_CLOUD.ROLE' | translate }} ["ACTIVITI_ADMIN", "ACTIVITI_USER"]</mat-label>
<input matInput (input)="setPeopleRoles($event)" data-automation-id="adf-people-roles-input" />
<input matInput (input)="setPeopleRoles($event)" data-automation-id="app-people-roles-input" />
</mat-form-field>
<mat-form-field *ngIf="isPeopleAppNameSelected()" class="adf-preselect-value">
<mat-form-field *ngIf="isPeopleAppNameSelected()" class="app-preselect-value">
<mat-label>{{ 'PEOPLE_GROUPS_CLOUD.APP_NAME' | translate }}</mat-label>
<input matInput (input)="setPeopleAppName($event)" data-automation-id="adf-people-app-input" />
<input matInput (input)="setPeopleAppName($event)" data-automation-id="app-people-app-input" />
</mat-form-field>
<mat-form-field class="adf-preselect-value-full">
<mat-form-field class="app-preselect-value-full">
<mat-label>{{ 'PEOPLE_GROUPS_CLOUD.PRESELECTED_VALUE' | translate }} {{ DEFAULT_PEOPLE_PLACEHOLDER }}</mat-label>
<input matInput (input)="setPeoplePreselectValue($event)" data-automation-id="adf-people-preselect-input" />
<input matInput (input)="setPeoplePreselectValue($event)" data-automation-id="app-people-preselect-input" />
</mat-form-field>
<mat-checkbox class="adf-preselect-value" (change)="onChangePeopleValidation($event)">{{
<mat-checkbox class="app-preselect-value" (change)="onChangePeopleValidation($event)">{{
'PEOPLE_GROUPS_CLOUD.PRESELECT_VALIDATION' | translate }}</mat-checkbox>
</div>
<div>
@@ -44,7 +44,7 @@
[mode]="peopleMode"></adf-cloud-people>
</div>
<div class="adf-people-list" *ngIf="canShowPeopleList()">
<div class="app-people-list" *ngIf="canShowPeopleList()">
<mat-list role="list">
<mat-list-item *ngFor="let item of preSelectUsers" role="listitem">
<mat-icon mat-list-icon>person</mat-icon>
@@ -55,7 +55,7 @@
</mat-card-content>
</mat-card>
<mat-card class="adf-section">
<mat-card class="app-section">
<mat-card-title>
{{ 'APP_LAYOUT.GROUPS_CLOUD' | translate}}
</mat-card-title>
@@ -63,29 +63,29 @@
<mat-card-content>
<br>
<mat-radio-group (change)="onChangeGroupsMode($event)">
<mat-radio-button checked="true" class="adf-people-single-mode" data-automation-id="adf-group-single-mode" value="{{ groupSingleMode }}">{{
<mat-radio-button checked="true" class="app-people-single-mode" data-automation-id="app-group-single-mode" value="{{ groupSingleMode }}">{{
'PEOPLE_GROUPS_CLOUD.SINGLE' | translate }}</mat-radio-button>
<mat-radio-button class="adf-people-multiple-mode" data-automation-id="adf-group-multiple-mode" value="{{ groupMultipleMode }}">{{
<mat-radio-button class="app-people-multiple-mode" data-automation-id="app-group-multiple-mode" value="{{ groupMultipleMode }}">{{
'PEOPLE_GROUPS_CLOUD.MULTI' | translate }}</mat-radio-button>
</mat-radio-group>
<div class="groups-control-options">
<div class="app-groups-control-options">
<mat-radio-group (change)="onChangeGroupsFilterMode($event)">
<mat-radio-button checked="true" class="adf-people-single-mode" value="appName">{{
<mat-radio-button checked="true" class="app-people-single-mode" value="appName">{{
'PEOPLE_GROUPS_CLOUD.APP_FILTER_MODE' | translate }}</mat-radio-button>
<mat-radio-button class="adf-people-multiple-mode" data-automation-id="adf-group-filter-role" value="role">{{
<mat-radio-button class="app-people-multiple-mode" data-automation-id="app-group-filter-role" value="role">{{
'PEOPLE_GROUPS_CLOUD.ROLE_FILTER_MODE' | translate }}</mat-radio-button>
</mat-radio-group>
<mat-form-field *ngIf="!isGroupAppNameSelected()" class="adf-preselect-value">
<mat-form-field *ngIf="!isGroupAppNameSelected()" class="app-preselect-value">
<mat-label>{{ 'PEOPLE_GROUPS_CLOUD.ROLE' | translate }} ["ACTIVITI_ADMIN", "ACTIVITI_USER"]</mat-label>
<input matInput (input)="setGroupRoles($event)" data-automation-id="adf-group-roles-input"/>
<input matInput (input)="setGroupRoles($event)" data-automation-id="app-group-roles-input"/>
</mat-form-field>
<mat-form-field *ngIf="isGroupAppNameSelected()" class="adf-preselect-value">
<mat-form-field *ngIf="isGroupAppNameSelected()" class="app-preselect-value">
<mat-label>{{ 'PEOPLE_GROUPS_CLOUD.APP_NAME' | translate }}</mat-label>
<input matInput (input)="setGroupAppName($event)" data-automation-id="adf-group-app-input"/>
<input matInput (input)="setGroupAppName($event)" data-automation-id="app-group-app-input"/>
</mat-form-field>
<mat-form-field class="adf-preselect-value-full">
<mat-form-field class="app-preselect-value-full">
<mat-label>Preselect: {{ DEFAULT_GROUP_PLACEHOLDER }}</mat-label>
<input matInput (input)="setGroupsPreselectValue($event)" data-automation-id="adf-group-preselect-input" />
<input matInput (input)="setGroupsPreselectValue($event)" data-automation-id="app-group-preselect-input" />
</mat-form-field>
</div>
<div>
@@ -93,7 +93,7 @@
(selectGroup)="onSelectGroup($event)" (removeGroup)="onRemoveGroup($event)"></adf-cloud-group>
</div>
<div class="adf-group-list" *ngIf="canShowGroupList()">
<div class="app-group-list" *ngIf="canShowGroupList()">
<mat-list role="list">
<mat-list-item *ngFor="let item of preSelectGroup" role="listitem">
<mat-icon mat-list-icon>group</mat-icon>

4
demo-shell/src/app/components/cloud/people-groups-cloud-demo.component.scss
View File

@@ -1,4 +1,4 @@
.adf {
.app {
&-section {
mat-card-title {
font-size:18px;
@@ -14,7 +14,7 @@
mat-card-content {
.adf-preselect-value {
.app-preselect-value {
margin-right: 15px;
min-width: 25%;

6
demo-shell/src/app/components/cloud/process-details-cloud-demo.component.html
View File

@@ -5,11 +5,11 @@
<h4 data-automation-id="process-details-header">Simple page to show the process instance: {{ processInstanceId }} of the app: {{ appName }}</h4>
<div class="adf-process-cloud-container">
<div class="app-process-cloud-container">
<adf-cloud-task-list
fxFlex
class="adf-cloud-layout-overflow"
class="app-cloud-layout-overflow"
[appName]="appName"
[processInstanceId]="processInstanceId"
(rowClick)="onRowClick($event)"
@@ -17,7 +17,7 @@
</adf-cloud-task-list>
<adf-cloud-process-header
class="adf-process-cloud-header"
class="app-process-cloud-header"
[appName]="appName"
[processInstanceId]="processInstanceId">
</adf-cloud-process-header>

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

@@ -1,4 +1,4 @@
.adf {
.app {
&-process-cloud-container {
display: flex;
}

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

@@ -11,7 +11,7 @@
<div fxLayout="column" fxFlex fxLayoutAlign="space-between" *ngIf="editedFilter">
<adf-cloud-process-list #processCloud
fxFlex
class="adf-cloud-layout-overflow"
class="app-cloud-layout-overflow"
[appName]="editedFilter.appName"
[initiator]="editedFilter.initiator"
[processDefinitionId]="editedFilter.processDefinitionId"

2
demo-shell/src/app/components/cloud/shared/cloud-settings.component.html
View File

@@ -1,4 +1,4 @@
<div fxFlex fxLayout="column" class="adf-settings-container">
<div fxFlex fxLayout="column" class="app-settings-container">
<mat-slide-toggle [color]="'primary'" [checked]="multiselect" (change)="toggleMultiselect()" data-automation-id="multiSelection">
{{ 'SETTINGS_CLOUD.MULTISELECTION' | translate }}
</mat-slide-toggle>

4
demo-shell/src/app/components/cloud/shared/cloud-settings.component.scss
View File

@@ -1,7 +1,7 @@
.adf-settings-container {
.app-settings-container {
padding: 20px 30px;
}
.adf-settings-container mat-form-field {
.app-settings-container mat-form-field {
max-width: 200px;
}

2
demo-shell/src/app/components/cloud/task-details-cloud-demo.component.scss
View File

@@ -1,5 +1,5 @@
.adf {
.app {
&-task-detail-container {
display: flex;

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

@@ -11,7 +11,7 @@
<div fxLayout="column" fxFlex fxLayoutAlign="space-between" *ngIf="editedFilter">
<adf-cloud-task-list #taskCloud
fxFlex
class="adf-cloud-layout-overflow"
class="app-cloud-layout-overflow"
[appName]="editedFilter.appName"
[processDefinitionId]="editedFilter.processDefinitionId"
[processInstanceId]="editedFilter.processInstanceId"

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

@@ -1,5 +1,5 @@
<div>
<mat-nav-list class="adf-list-confgurations">
<mat-nav-list class="app-list-confgurations">
<mat-list-item (click)="appConfigClick()">
<a matLine id="adf-app-conf">App Config Editor</a>
@@ -32,12 +32,12 @@
<div>
<ngx-monaco-editor id="adf-code-configuration-editor"
class="adf-file-editor"
class="app-file-editor"
[options]="editorOptions"
[(ngModel)]="code"
(onInit)="onInit($event)">
</ngx-monaco-editor>
<div class="adf-list-confgurations-buttons">
<div class="app-list-confgurations-buttons">
<button mat-raised-button id="adf-configuration-save" (click)="onSave()" color="primary">
Save
</button>

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

@@ -1,15 +1,15 @@
.adf-file-editor {
.app-file-editor {
height: 500px;
width: 65%;
float: left;
}
.adf-list-confgurations {
.app-list-configurations {
float: left;
width: 30%;
}
.adf-list-confgurations-buttons {
.app-list-configurations-buttons {
width: 200px;
margin-left: 30%;
float: left;

38
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="adf-content-node-selector-demo-basic-label">
<label class="app-content-node-selector-demo-basic-label">
dropdownHideMyFiles: {{dropdownHideMyFiles}}
</label>
</mat-panel-description>
</mat-expansion-panel-header>
<div class="adf-content-node-selector-demo-basic-table">
<div class="app-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="adf-content-node-selector-demo-basic-label">
<label class="app-content-node-selector-demo-basic-label">
My Files site will be hided from dropdown
</label>
</mat-panel-description>
</mat-expansion-panel-header>
<div class="adf-content-node-selector-demo-basic-table">
<div class="app-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="adf-content-node-selector-demo-basic-label">
<label class="app-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="adf-content-node-selector-demo-example-form">
<form class="app-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="adf-content-node-selector-demo-basic-table">
<div class="app-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="adf-content-node-selector-demo-basic-label">
<label class="app-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="adf-content-node-selector-demo-basic-table">
<div class="app-content-node-selector-demo-basic-table">
<adf-content-node-selector-panel
[rowFilter]="rowFilterFunction"
[currentFolderId]="'-root-'">
@@ -118,7 +118,7 @@
<h2>Exclude Site Content</h2>
</mat-panel-title>
<mat-panel-description>
<label class="adf-content-node-selector-demo-basic-label">
<label class="app-content-node-selector-demo-basic-label">
The exclude site content is filtered out from the list
</label>
</mat-panel-description>
@@ -137,7 +137,7 @@
Show Folders
</mat-slide-toggle>
<div class="adf-content-node-selector-demo-basic-table">
<div class="app-content-node-selector-demo-basic-table">
<adf-content-node-selector-panel
[rowFilter]="rowFilterFunction"
[excludeSiteContent]="excludeSiteContentList"
@@ -151,7 +151,7 @@
<h2>Custom Image Resolving</h2>
</mat-panel-title>
<mat-panel-description>
<label class="adf-content-node-selector-demo-basic-label">
<label class="app-content-node-selector-demo-basic-label">
A function to manage the way folder/file icons and thumbnails are resolved
</label>
</mat-panel-description>
@@ -161,7 +161,7 @@
Add Custom Images Resolver
</mat-slide-toggle>
<div class="adf-content-node-selector-demo-basic-table">
<div class="app-content-node-selector-demo-basic-table">
<adf-content-node-selector-panel
[imageResolver]="customImageResolver"
[currentFolderId]="'-root-'">
@@ -174,12 +174,12 @@
<h2>Set Page Size</h2>
</mat-panel-title>
<mat-panel-description>
<label class="adf-content-node-selector-demo-basic-label">
<label class="app-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="adf-content-node-selector-demo-basic-table">
<div class="app-content-node-selector-demo-basic-table">
<adf-content-node-selector-panel
[currentFolderId]="'-root-'"
[pageSize]="actualPageSize"
@@ -193,14 +193,14 @@
<h2>Is Valid Selection Function </h2>
</mat-panel-title>
<mat-panel-description>
<label class="adf-content-node-selector-demo-basic-label">
<label class="app-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="adf-content-node-selector-demo-basic-table">
<div class="app-content-node-selector-demo-basic-table">
<adf-content-node-selector-panel
(select)="onNodeSelect($event)"
[isSelectionValid]="customIsValidFunction"
@@ -214,13 +214,13 @@
<h2>BreadCrumb Transform Function </h2>
</mat-panel-title>
<mat-panel-description>
<label class="adf-content-node-selector-demo-basic-label">
<label class="app-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="adf-content-node-selector-demo-basic-table">
<div class="app-content-node-selector-demo-basic-table">
<adf-content-node-selector-panel
[breadcrumbTransform]="customBreadcrumbFunction"
[currentFolderId]="'-root-'">

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

@@ -1,4 +1,4 @@
.adf-content-node-selector-demo {
.app-content-node-selector-demo {
&-main {
display: flex;

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

@@ -16,7 +16,7 @@
[data]="dataForCopy">
<data-columns>
<data-column key="id" title="Id" [copyContent]="true"></data-column>
<data-column key="name" title="Name" class="adf-full-width name-column" [copyContent]="false"></data-column>
<data-column key="name" title="Name" class="app-full-width name-column" [copyContent]="false"></data-column>
<data-column key="createdBy" title="Created By"></data-column>
<data-column key="json" type="json" title="Json" [copyContent]="true"></data-column>
</data-columns>

2
demo-shell/src/app/components/document-list/extension-presets/name-column/name-column.component.ts
View File

@@ -33,7 +33,7 @@ import { takeUntil } from 'rxjs/operators';
@Component({
selector: 'app-name-column',
template: `
<span class="adf-datatable-cell-value" title="{{ node | adfNodeNameTooltip }}" (click)="onClick()">
<span class="app-datatable-cell-value" title="{{ node | adfNodeNameTooltip }}" (click)="onClick()">
{{ displayText$ | async }}
</span>
`,

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

@@ -1,9 +1,9 @@
<div fxLayout="column" fxLayoutAlign="center center">
<adf-error-content [errorCode]="errorCode">
<div adf-error-content-actions class="adf-error-content-buttons">
<div adf-error-content-actions class="app-error-content-buttons">
<a a id="adf-secondary-button" mat-raised-button color="primary"
(click)="onReportIssue()"
class="adf-error-content-description-link">
class="app-error-content-description-link">
{{ 'ERROR_CONTENT.' + errorCode + '.SECONDARY_BUTTON.TEXT' | translate | uppercase }}
</a>
<a id="adf-return-button" mat-raised-button color="primary" (click)="onReturnButton()">

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

@@ -1,4 +1,4 @@
.adf-error-content {
.app-error-content {
&-buttons {
display: flex;

4
demo-shell/src/app/components/file-view/file-view.component.scss
View File

@@ -1,4 +1,4 @@
.adf-viewer__sidebar {
.app-viewer__sidebar {
width: 380px !important;
}
@@ -7,6 +7,6 @@
width: 600px;
}
adf-preview-extension {
app-preview-extension {
width: 600px;
}

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

@@ -1,6 +1,6 @@
<div class="adf-container">
<div class="app-container">
<mat-accordion *ngIf="showRecentFiles" class="adf-container-recent">
<mat-accordion *ngIf="showRecentFiles" class="app-container-recent">
<mat-expansion-panel hideToggle="true">
<mat-expansion-panel-header>
<mat-panel-title>
@@ -18,21 +18,21 @@
(preview)="showFile($event)"
selectionMode="null">
<adf-custom-empty-content-template>
<div class="adf-empty-list__block">
<div class="app-empty-list__block">
<mat-icon>history</mat-icon>
<p class="adf-empty-list__title">{{ 'DOCUMENT_LIST.RECENT.EMPTY_STATE.TITLE' | translate}}</p>
<p class="app-empty-list__title">{{ 'DOCUMENT_LIST.RECENT.EMPTY_STATE.TITLE' | translate}}</p>
</div>
</adf-custom-empty-content-template>
</adf-document-list>
</mat-expansion-panel>
</mat-accordion>
<div *ngIf="showSitePicker" class="adf-site-container-style" id="site-container">
<div *ngIf="showSitePicker" class="app-site-container-style" id="site-container">
<adf-sites-dropdown (change)="onSiteChange($event)" [hideMyFiles]="false" [relations]="'members'">
</adf-sites-dropdown>
</div>
<div id="document-list-container" class="adf-document-list-container" fxLayout="row" fxLayoutAlign="start stretch"
<div id="document-list-container" class="app-document-list-container" fxLayout="row" fxLayoutAlign="start stretch"
fxLayoutGap="16px">
<adf-upload-drag-area fxFlex="1 1 auto"
[disabled]="disableDragArea"
@@ -42,28 +42,28 @@
[adf-check-allowable-operation]="'create'"
[adf-nodes]="disableDragArea ? getCurrentDocumentListNode() : []"
(beginUpload)="onBeginUpload($event)">
<div *ngIf="errorMessage" class="adf-error-message">
<div *ngIf="errorMessage" class="app-error-message">
<button (click)="resetError()" mat-icon-button>
<mat-icon>highlight_off</mat-icon>
</button>
<span class="adf-error-message--text">{{errorMessage}}</span>
<span class="app-error-message--text">{{errorMessage}}</span>
</div>
<adf-toolbar *ngIf="!disableDragArea" [color]="toolbarColor" class="adf-files-toolbar">
<adf-toolbar *ngIf="!disableDragArea" [color]="toolbarColor" class="app-files-toolbar">
<adf-toolbar-title fxFlex="0 1 auto">
<adf-breadcrumb fxShow fxHide.lt-sm="true"
class="adf-files-breadcrumb"
class="app-files-breadcrumb"
root="APP.PERSONAL-FILES"
[target]="documentList">
</adf-breadcrumb>
<adf-dropdown-breadcrumb fxHide fxShow.lt-sm="true"
class="adf-files-breadcrumb"
class="app-files-breadcrumb"
[target]="documentList">
</adf-dropdown-breadcrumb>
</adf-toolbar-title>
<adf-toolbar-divider fxFlex="0 0 auto"></adf-toolbar-divider>
<div fxFlex="0 0 auto" class="adf-document-action-buttons" fxShow fxHide.lt-sm="true">
<div fxFlex="0 0 auto" class="app-document-action-buttons" fxShow fxHide.lt-sm="true">
<button
mat-icon-button
data-automation-id="document-list-grid-view"
@@ -158,7 +158,7 @@
<button mat-menu-item (click)="toolbarColor = 'warn'">Warn</button>
</mat-menu>
<button mat-icon-button (click)="showVersions = !showVersions" class="adf-show-versions-button">
<button mat-icon-button (click)="showVersions = !showVersions" class="app-show-versions-button">
<mat-icon *ngIf="!showVersions" matTooltip="{{ 'DOCUMENT_LIST.TOOLBAR.SHOW_VERSION' | translate }}">
chevron_left
</mat-icon>
@@ -215,10 +215,10 @@
</mat-menu>
</adf-toolbar>
<div class="adf-document-list-container" [ngClass]="{'adf-sticky-document-list': stickyHeader }">
<div class="app-document-list-container" [ngClass]="{'adf-sticky-document-list': stickyHeader }">
<adf-document-list
#documentList
class="adf-file-list-container"
class="app-file-list-container"
[permissionsStyle]="permissionsStyle"
[currentFolderId]="currentFolderId"
[contextMenuActions]="true"
@@ -245,8 +245,8 @@
<h1>You don't have permissions</h1>
</adf-custom-no-permission-template>
<adf-custom-empty-content-template *ngIf="disableDragArea">
<div class="adf-empty_template">
<div class="adf-no-result-message">{{ 'SEARCH.NO_RESULT' | translate }}</div>
<div class="app-empty_template">
<div class="app-no-result-message">{{ 'SEARCH.NO_RESULT' | translate }}</div>
</div>
</adf-custom-empty-content-template>
<data-columns>
@@ -254,13 +254,13 @@
key="$thumbnail"
type="image"
[sortable]="false"
class="adf-image-table-cell"
class="app-image-table-cell"
[class.adf-cell-thumbnail]="thumbnails">
</data-column>
<data-column
*ngIf="showNameColumn && hyperlinkNavigation"
key="name"
class="adf-ellipsis-cell"
class="app-ellipsis-cell"
title="{{'DOCUMENT_LIST.COLUMNS.DISPLAY_NAME' | translate}}"
[formatTooltip]="getNodeNameTooltip">
<ng-template let-context>
@@ -272,7 +272,7 @@
key="name"
title="{{'DOCUMENT_LIST.COLUMNS.DISPLAY_NAME' | translate}}"
[formatTooltip]="getNodeNameTooltip"
class="adf-ellipsis-cell adf-expand-cell-5">
class="app-ellipsis-cell adf-expand-cell-5">
</data-column>
<!-- Location column demo -->
<!--
@@ -287,13 +287,13 @@
key="content.sizeInBytes"
title="{{'DOCUMENT_LIST.COLUMNS.SIZE' | translate}}"
type="fileSize"
class="adf-desktop-only adf-ellipsis-cell">
class="app-desktop-only adf-ellipsis-cell">
</data-column>
<data-column
*ngIf="searchTerm"
key="search"
title="Search"
class="adf-desktop-only adf-expand-cell-3">
class="app-desktop-only adf-expand-cell-3">
<ng-template let-entry="$implicit">
<div [innerHTML]="searchResultsHighlight(entry.row.node.entry.search) | highlight:searchTerm">
</div>
@@ -304,23 +304,23 @@
<data-column
title="{{'DOCUMENT_LIST.COLUMNS.TAG' | translate}}"
key="id"
class="adf-full-width adf-ellipsis-cell">
class="app-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="adf-full-width adf-ellipsis-cell adf-desktop-only"
class="app-full-width adf-ellipsis-cell adf-desktop-only"
title="{{'DOCUMENT_LIST.COLUMNS.NODE_ID' | translate}}"
key="id">
</data-column>
<data-column
title="{{'DOCUMENT_LIST.COLUMNS.IS_LOCKED' | translate}}"
key="id"
class="adf-desktop-only adf-ellipsis-cell">
class="app-desktop-only adf-ellipsis-cell">
<ng-template let-entry="$implicit">
<button mat-icon-button [adf-node-lock]="entry.row.node.entry" class="adf-lock-button">
<button mat-icon-button [adf-node-lock]="entry.row.node.entry" class="app-lock-button">
<mat-icon *ngIf="entry.row.getValue('isLocked')">lock</mat-icon>
<mat-icon *ngIf="!entry.row.getValue('isLocked')">lock_open</mat-icon>
</button>
@@ -329,14 +329,14 @@
<data-column
title="{{'DOCUMENT_LIST.COLUMNS.CREATED_BY' | translate}}"
key="createdByUser.displayName"
class="adf-desktop-only adf-ellipsis-cell">
class="app-desktop-only adf-ellipsis-cell">
</data-column>
<data-column
title="{{'DOCUMENT_LIST.COLUMNS.CREATED' | translate}}"
key="createdAt"
type="date"
[format]="enableMediumTimeFormat ? 'medium' : 'timeAgo'"
class="adf-desktop-only adf-ellipsis-cell">
class="app-desktop-only adf-ellipsis-cell">
</data-column>
</data-columns>
@@ -433,7 +433,7 @@
<adf-pagination
#standardPagination
*ngIf="!infiniteScrolling"
class="adf-documentlist-pagination"
class="app-documentlist-pagination"
[target]="documentList"
(changePageSize)="onChangePageSize($event)"
(changePageNumber)="onChangePageNumber($event)"
@@ -448,7 +448,7 @@
</adf-infinite-pagination>
</adf-upload-drag-area>
<adf-info-drawer-layout *ngIf="showVersions" class="adf-manage-versions-sidebar" fxFlex="0 0 auto">
<adf-info-drawer-layout *ngIf="showVersions" class="app-manage-versions-sidebar" fxFlex="0 0 auto">
<div info-drawer-content>
<adf-info-drawer [title]="'Details'" *ngIf="documentList.selection[0]">
@@ -469,14 +469,14 @@
</ng-container>
</ng-container>
<ng-template #choose_document_template>
<div class="adf-manage-versions-empty">
<mat-icon class="adf-manage-versions-empty-icon">face</mat-icon>
<div class="app-manage-versions-empty">
<mat-icon class="app-manage-versions-empty-icon">face</mat-icon>
{{'VERSION.CHOOSE_FILE' | translate}}
</div>
</ng-template>
<ng-template #no_permission_to_versions>
<div class="adf-manage-versions-no-permission">
<mat-icon class="adf-manage-versions-no-permission-icon">warning</mat-icon>
<div class="app-manage-versions-no-permission">
<mat-icon class="app-manage-versions-no-permission-icon">warning</mat-icon>
{{'VERSION.NO_PERMISSION' | translate}}
</div>
</ng-template>
@@ -498,11 +498,11 @@
</adf-start-process>
</div>
<div *ngIf="showSettingsPanel" class="adf-content-service-settings">
<div *ngIf="showSettingsPanel" class="app-content-service-settings">
<p>Current folder ID: {{ documentList.currentFolderId }}</p>
<div class="adf-p-10">
<div class="app-p-10">
Selected Nodes:
<ul>
<li *ngFor="let node of documentList.selection">
@@ -511,7 +511,7 @@
</ul>
</div>
<div class="adf-container">
<div class="app-container">
<section>
<mat-slide-toggle color="primary" [(ngModel)]="showNameColumn">
Show Name Column
@@ -679,7 +679,7 @@
</section>
</div>
<div class="adf-p-10">
<div class="app-p-10">
<p>
{{'DOCUMENT_LIST.MULTISELECT_DESCRIPTION' | translate}}
</p>

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

@@ -1,71 +1,71 @@
@mixin adf-file-component-theme($theme) {
.adf-container {
@mixin app-file-component-theme($theme) {
.app-container {
margin: 10px !important;
}
@media screen and ($mat-xsmall) {
.adf-container {
.app-container {
margin: 0;
}
.adf-show-versions-button.mat-icon-button {
.app-show-versions-button.mat-icon-button {
display: none;
}
}
.adf-error-message {
.app-error-message {
text-align: left;
}
.adf-error-message--text {
.app-error-message--text {
color: #d50000;
}
.adf-document-list-container {
.app-document-list-container {
min-height: 400px;
.adf-datatable-list {
.app-datatable-list {
min-height: 400px;
}
}
.adf-datatable-card .adf-lock-button {
.app-datatable-card .app-lock-button {
top: -10px;
}
.adf-site-container-style {
.app-site-container-style {
margin-top: 10px;
margin-bottom: 10px;
width: 100%;
min-width: 200px;
}
.adf-content-service-settings {
.app-content-service-settings {
padding: 16px;
}
.adf-manage-versions-sidebar {
.app-manage-versions-sidebar {
width: 360px !important;
& .adf-info-drawer-layout-header {
& .app-info-drawer-layout-header {
display: none !important;
}
}
.adf-no-result__empty_doc_lib {
.app-no-result__empty_doc_lib {
width: 565px;
height: 161px;
object-fit: contain;
margin-top: 17px;
}
.adf-empty_template {
.app-empty_template {
text-align: center;
margin-top: 20px;
margin-bottom: 20px;
}
.adf-no-result-message {
.app-no-result-message {
height: 32px;
opacity: 0.26;
font-size: 24px;
@@ -73,12 +73,12 @@
letter-spacing: -1px;
}
.adf-container-recent {
.app-container-recent {
mat-icon {
margin-left: 20px;
}
.adf-empty-list__block {
.app-empty-list__block {
height: 100%;
padding: 0;
margin: 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="adf-form-container" *ngIf="!isEmptyForm()">
<div class="app-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="adf-form-list-margin">
<section class="app-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 @@
.adf-form-container {
.app-form-container {
padding: 10px;
}
.adf-store-form-container {
.app-store-form-container {
width: 80%;
height: 80%;
}
.adf-form-list-margin {
.app-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="adf-form-container">
<div class="app-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 @@
.adf-form-container {
.app-form-container {
padding: 10px;
}

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

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

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

@@ -1,17 +1,17 @@
.adf-form-container {
.app-form-container {
padding: 10px;
}
.adf-main-content {
.app-main-content {
padding: 0 15px;
}
.adf-card-view {
.app-card-view {
width: 30%;
display: inline-block;
}
.adf-console {
.app-console {
width: 60%;
display: inline-block;
vertical-align: top;
@@ -31,16 +31,16 @@
}
}
.adf-form-config-editor {
.app-form-config-editor {
height: 500px !important;
}
.adf-form-editor-buttons {
.app-form-editor-buttons {
display: flex;
justify-content: space-evenly;
}
.adf-upload-config-button {
.app-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="adf-content adf-header-data">
<div class="app-content app-header-data">
<h1>Header data</h1>
<mat-card>
<div>

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

@@ -1,4 +1,4 @@
.adf-content {
.app-content {
padding: 10px;
.mat-card {
padding: 16px 24px;

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

@@ -1,12 +1,12 @@
<header class="adf-home-background">
<div class="adf-home-section ad">
<div class="adf-home-headline">
<header class="app-home-background">
<div class="app-home-section ad">
<div class="app-home-headline">
<h1 class="mat-h1">ADF</h1>
<h2>{{ 'APP.HOME.TITLE' | translate}}</h2>
</div>
<div class="adf-home-start">
<a mat-raised-button class="adf-home-docs-button adf-primary-color" href="https://github.com/Alfresco/alfresco-ng2-components/tree/master/docs">{{ 'APP.HOME.DOCUMENTATION' | translate}}</a>
<div class="app-home-start">
<a mat-raised-button class="app-home-docs-button adf-primary-color" href="https://github.com/Alfresco/alfresco-ng2-components/tree/master/docs">{{ 'APP.HOME.DOCUMENTATION' | translate}}</a>
</div>
</div>
</header>

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

@@ -5,16 +5,16 @@
height: 100%;
}
.adf-home-header-background {
.app-home-header-background {
overflow: hidden;
}
.adf-home-section {
.app-home-section {
text-align: center;
padding-top: 60px;
}
.adf-home-headline {
.app-home-headline {
h1 {
font-size: 56px;
@@ -31,6 +31,6 @@
}
}
.adf-home-docs-button {
.app-home-docs-button {
margin: 30px;
}

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

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

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

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

14
demo-shell/src/app/components/logout/logout.component.html
View File

@@ -1,16 +1,16 @@
<header class="adf-logout-background">
<div class="adf-logout-section" data-automation-id="adf-logout-section">
<div class="adf-logout-headline">
<header class="app-logout-background">
<div class="app-logout-section" data-automation-id="adf-logout-section">
<div class="app-logout-headline">
<h1>{{ 'APP.LOGOUT.TITLE' | translate}}</h1>
<h2>{{ 'APP.LOGOUT.SUB_TITLE' | translate}}</h2>
</div>
<div class="adf-logout-login">
<a mat-raised-button class="adf-logout-docs-button adf-primary-color"
<div class="app-logout-login">
<a mat-raised-button class="app-logout-docs-button adf-primary-color"
href="/login">{{ 'APP.LOGOUT.LOGIN' | translate}}</a>
</div>
<div class="adf-logout-home">
<a mat-raised-button class="adf-logout-docs-button adf-primary-color"
<div class="app-logout-home">
<a mat-raised-button class="app-logout-docs-button adf-primary-color"
href="/">{{ 'APP.LOGOUT.HOME' | translate}}</a>
</div>
</div>

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

@@ -4,16 +4,16 @@
align-items: center;
}
.adf-logout-header-background {
.app-logout-header-background {
overflow: hidden;
}
.adf-logout-section {
.app-logout-section {
text-align: center;
padding-top: 60px;
}
.adf-logout-headline {
.app-logout-headline {
h1 {
font-size: 56px;
@@ -30,10 +30,10 @@
}
}
.adf-logout-docs-button {
.app-logout-docs-button {
margin: 30px;
}
.adf-logout-login {
.app-logout-login {
float: left;
}

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

@@ -1,4 +1,4 @@
<div class="adf-main-content">
<div class="app-main-content">
<h1>Notification Service</h1>
<ul>

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

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

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

@@ -1,4 +1,4 @@
<div class="adf-inherit_permission_button">
<div class="app-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 @@
.adf-inherit_permission_button {
.app-inherit_permission_button {
padding-top: 20px;
display: flex;
justify-content: center;

18
demo-shell/src/app/components/pipes/pipes.component.html
View File

@@ -11,11 +11,11 @@
</mat-panel-description>
</mat-expansion-panel-header>
<mat-form-field class="adf-input-field">
<mat-form-field class="app-input-field">
<input matInput placeholder="Format" [(ngModel)]="format">
</mat-form-field>
<mat-form-field class="adf-input-field">
<mat-form-field class="app-input-field">
<mat-select placeholder="Locale dropdown" [(ngModel)]="locale">
<mat-option *ngFor="let language of languages" [value]="language.key">
{{language.label}}
@@ -43,11 +43,11 @@
</mat-panel-description>
</mat-expansion-panel-header>
<mat-form-field class="adf-input-field">
<mat-form-field class="app-input-field">
<input matInput placeholder="Format" [(ngModel)]="format">
</mat-form-field>
<mat-form-field class="adf-input-field">
<mat-form-field class="app-input-field">
<mat-select placeholder="Locale dropdown" [(ngModel)]="locale">
<mat-option *ngFor="let language of languages" [value]="language.key">
{{language.label}}
@@ -71,20 +71,20 @@
</mat-panel-description>
</mat-expansion-panel-header>
<mat-form-field class="adf-input-field">
<mat-form-field class="app-input-field">
<input matInput placeholder="Number" [(ngModel)]="number">
</mat-form-field>
<mat-form-field class="adf-input-field">
<mat-form-field class="app-input-field">
<input matInput placeholder="Min Integer Digits" [(ngModel)]="decimalValues.minIntegerDigits">
</mat-form-field>
<mat-form-field class="adf-input-field">
<mat-form-field class="app-input-field">
<input matInput placeholder="Min Fraction Digits" [(ngModel)]="decimalValues.minFractionDigits">
</mat-form-field>
<mat-form-field class="adf-input-field">
<mat-form-field class="app-input-field">
<input matInput placeholder="Max Fraction Digits" [(ngModel)]="decimalValues.maxFractionDigits">
</mat-form-field>
<mat-form-field class="adf-input-field">
<mat-form-field class="app-input-field">
<mat-select placeholder="Locale dropdown" [(ngModel)]="locale">
<mat-option *ngFor="let language of languages" [value]="language.key">
{{language.label}}

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

@@ -2,6 +2,6 @@ h2 {
padding: 20px;
}
.adf-input-field {
.app-input-field {
margin: 20px;
}

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

@@ -1,4 +1,4 @@
<div class="adf-process-list-inputs">
<div class="app-process-list-inputs">
<form [formGroup]="processListForm">
<mat-form-field>
@@ -77,7 +77,7 @@
</mat-error>
</mat-form-field>
<div class="adf-reset-button">
<div class="app-reset-button">
<button mat-raised-button (click)="resetProcessForm()">Reset</button>
</div>
</form>

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

@@ -1,4 +1,4 @@
.adf-process-list-inputs {
.app-process-list-inputs {
margin: 20px auto 0;
max-width: 1200px;
@@ -8,13 +8,13 @@
}
}
.adf-reset-button {
.app-reset-button {
margin-bottom: 50px;
display: flex;
justify-content: center;
}
.adf-process-list-error-message {
.app-process-list-error-message {
color: red;
text-align: center;
}

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

@@ -11,14 +11,14 @@
[processInstanceId]="processInstanceId"
(attachmentClick)="onAttachmentClick($event)">
<adf-empty-list>
<div adf-empty-list-header class="adf-empty-list-header">
<div adf-empty-list-header class="app-empty-list-header">
{{'ADF_PROCESS_LIST.PROCESS-ATTACHMENT.EMPTY.HEADER' | translate}}
</div>
<div adf-empty-list-body>
<div fxHide.lt-md="true" class="adf-empty-list-drag_drop">
<div fxHide.lt-md="true" class="app-empty-list-drag_drop">
{{'ADF_PROCESS_LIST.PROCESS-ATTACHMENT.EMPTY.DRAG-AND-DROP.TITLE' | translate}}
</div>
<div fxHide.lt-md="true" class="adf-empty-list__any-files-here-to-add">
<div fxHide.lt-md="true" class="app-empty-list__any-files-here-to-add">
{{'ADF_PROCESS_LIST.PROCESS-ATTACHMENT.EMPTY.DRAG-AND-DROP.SUBTITLE' | translate}}
</div>
</div>

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

@@ -1,10 +1,10 @@
<mat-tab-group [(selectedIndex)]="activeTab" (selectedTabChange)="onTabChange($event)"
data-automation-id="navigation-bar">
<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">
<mat-tab id="app-tasks-header" href="#tasks" label="{{'PS-TAB.TASKS-TAB' | translate}}">
<div class="app-page-content" *ngIf="showTaskTab">
<div class="app-grid" fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
<div class="app-grid-item app-tasks-menu" fxFlex.gt-md="265px">
<div class="app-list-buttons">
<adf-sidebar-action-menu [expanded]="true" [width]="205"
title="{{'ADF_SIDEBAR_ACTION_MENU.BUTTON.CREATE' | translate}}">
<mat-icon sidebar-menu-title-icon>arrow_drop_down</mat-icon>
@@ -16,12 +16,12 @@
</div>
</adf-sidebar-action-menu>
</div>
<mat-accordion class="adf-accordion-panel" [displayMode]="flat">
<mat-accordion class="app-accordion-panel" [displayMode]="flat">
<mat-expansion-panel class="mat-elevation-z0" [expanded]="true">
<mat-expansion-panel-header>
<mat-panel-title>
<mat-icon>assignment</mat-icon>
<div class="adf-accordion-title-padding">Tasks</div>
<div class="app-accordion-title-padding">Tasks</div>
</mat-panel-title>
</mat-expansion-panel-header>
<adf-task-filters [filterParam]="filterSelected"
@@ -33,7 +33,7 @@
</mat-expansion-panel>
</mat-accordion>
</div>
<div class="adf-grid-item adf-tasks-list" fxFlex.gt-md="380px"
<div class="app-grid-item app-tasks-list" fxFlex.gt-md="380px"
[ngClass.gt-md]="{'adf-small-pagination': true}"
*ngIf="taskFilter && !isStartTaskMode()">
<adf-tasklist
@@ -56,8 +56,8 @@
<!-- Custom column definition demo -->
<!-- <data-columns>
<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-column key="name" title="{{'ADF_TASK_LIST.PROPERTIES.NAME' | translate}}" class="app-full-width name-column"></data-column>
<data-column key="created" title="{{'ADF_TASK_LIST.PROPERTIES.CREATED' | translate}}" class="app-hidden"></data-column>
</data-columns> -->
</adf-tasklist>
@@ -69,8 +69,8 @@
#taskListPagination>
</adf-pagination>
</div>
<div class="adf-grid-item adf-tasks-details" *ngIf="!isStartTaskMode()" fxFlex.gt-md="1 1 auto"
data-automation-id="adf-tasks-details">
<div class="app-grid-item app-tasks-details" *ngIf="!isStartTaskMode()" fxFlex.gt-md="1 1 auto"
data-automation-id="app-tasks-details">
<adf-task-details #activitiDetails
[debugMode]="true"
[taskId]="currentTaskId"
@@ -100,7 +100,7 @@
</mat-card-content>
</mat-card>
</div>
<div class="adf-grid-item adf-tasks-start" *ngIf="isStartTaskMode()" fxFlex.gt-md="1 1 auto">
<div class="app-grid-item app-tasks-start" *ngIf="isStartTaskMode()" fxFlex.gt-md="1 1 auto">
<adf-start-task
[appId]="appId"
[name]="defaultTaskName"
@@ -113,10 +113,10 @@
</mat-tab>
<mat-tab id="processes-header" href="#processes"
label="{{'PS-TAB.PROCESSES-TAB' | translate}}">
<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">
<div class="app-page-content" *ngIf="showProcessTab">
<div class="app-grid" fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
<div class="app-grid-item app-processes-menu" fxFlex.gt-md="225px">
<div class="app-list-buttons">
<adf-sidebar-action-menu [expanded]="true" [width]="205"
title="{{'ADF_SIDEBAR_ACTION_MENU.BUTTON.CREATE' | translate}}">
<mat-icon sidebar-menu-title-icon>arrow_drop_down</mat-icon>
@@ -129,12 +129,12 @@
</div>
</adf-sidebar-action-menu>
</div>
<mat-accordion class="adf-accordion-panel" [displayMode]="flat">
<mat-accordion class="app-accordion-panel" [displayMode]="flat">
<mat-expansion-panel class="mat-elevation-z0" [expanded]="true">
<mat-expansion-panel-header>
<mat-panel-title>
<mat-icon>assessment</mat-icon>
<div class="adf-accordion-title-padding">Processes</div>
<div class="app-accordion-title-padding">Processes</div>
</mat-panel-title>
</mat-expansion-panel-header>
<adf-process-instance-filters
@@ -149,7 +149,7 @@
</mat-expansion-panel>
</mat-accordion>
</div>
<div class="adf-grid-item adf-processes-list adf-list" fxFlex.gt-md="380px"
<div class="app-grid-item app-processes-list app-list" fxFlex.gt-md="380px"
[ngClass.gt-md]="{'adf-small-pagination': true}"
*ngIf="processFilter && !isStartProcessMode()">
<adf-process-instance-list
@@ -168,8 +168,8 @@
<!-- Custom column definition demo -->
<!-- <data-columns>
<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-column key="name" title="ADF_PROCESS_LIST.PROPERTIES.NAME" class="app-full-width name-column"></data-column>
<data-column key="created" title="ADF_PROCESS_LIST.PROPERTIES.CREATED" class="app-hidden"></data-column>
</data-columns> -->
</adf-process-instance-list>
@@ -180,7 +180,7 @@
#processListPagination>
</adf-pagination>
</div>
<div class="adf-grid-item adf-processes-details" *ngIf="!isStartProcessMode()" fxFlex.gt-md="1 1 auto">
<div class="app-grid-item app-processes-details" *ngIf="!isStartProcessMode()" fxFlex.gt-md="1 1 auto">
<adf-process-instance-details
#activitiProcessDetails
[processInstanceId]="currentProcessInstanceId"
@@ -208,7 +208,7 @@
</mat-card-content>
</mat-card>
</div>
<div class="adf-grid-item adf-processes-start" fxFlex.gt-md="1 1 auto"
<div class="app-grid-item app-processes-start" fxFlex.gt-md="1 1 auto"
*ngIf="isStartProcessMode()">
<adf-start-process
#activitiStartProcess
@@ -225,8 +225,8 @@
</mat-tab>
<mat-tab id="report-header" href="#report"
label="{{'PS-TAB.REPORTS-TAB' | translate}}">
<div class="adf-grid" fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
<div class="adf-grid-item adf-reports-menu" fxFlex.gt-md="300px">
<div class="app-grid" fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
<div class="app-grid-item app-reports-menu" fxFlex.gt-md="300px">
<span><h5>Report List</h5></span>
<mat-divider></mat-divider>
<adf-analytics-report-list
@@ -236,7 +236,7 @@
#analyticsReportList>
</adf-analytics-report-list>
</div>
<div class="adf-grid-item adf-reports-details" fxFlex.gt-md="1 1 auto">
<div class="app-grid-item app-reports-details" fxFlex.gt-md="1 1 auto">
<adf-analytics
*ngIf="report"
[appId]="appId"
@@ -254,11 +254,11 @@
</mat-tab>
<mat-tab id="settings-header" href="#settings"
label="{{'PS-TAB.SETTINGS-TAB' | translate}}">
<div class="adf-grid" fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
<div class="adf-grid-item adf-settings-menu" fxFlex.gt-md="300px">
<div class="app-grid" fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
<div class="app-grid-item app-settings-menu" fxFlex.gt-md="300px">
<span><h3>Settings Menu</h3></span>
</div>
<div class="adf-grid-item adf-settings-details" fxFlex.gt-md="1 1 auto">
<div class="app-grid-item app-settings-details" fxFlex.gt-md="1 1 auto">
<div>
<mat-slide-toggle id="adf-show-task-filter-icon" [(ngModel)]="showTaskFilterIcon">Show task filters icons
</mat-slide-toggle>

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

@@ -1,12 +1,12 @@
@mixin adf-process-service-component-theme($theme) {
.adf-no-form-container {
@mixin app-process-service-component-theme($theme) {
.app-no-form-container {
text-align: center;
font-weight: 600;
font-size: 18px;
}
.adf-grid {
.adf-grid-item {
.app-grid {
.app-grid-item {
margin: 4px;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
0 3px 1px -2px rgba(0, 0, 0, 0.2),
@@ -14,19 +14,19 @@
padding: 10px;
}
.adf-list-buttons {
.app-list-buttons {
margin-bottom: 24px;
}
.adf-tasks-list.adf-small-pagination,
.adf-processes-list.adf-small-pagination {
.adf-pagination {
.app-tasks-list.app-small-pagination,
.app-processes-list.app-small-pagination {
.app-pagination {
flex-wrap: wrap;
padding-bottom: 24px;
padding-top: 8px;
&__range-block.adf-pagination__block:first-child {
&__range-block.app-pagination__block:first-child {
order: 1;
width: 60%;
flex: 0 0 auto;
@@ -61,8 +61,8 @@
}
}
.adf-list {
.adf-datatable-list {
.app-list {
.app-datatable-list {
border: none;
}
}
@@ -72,13 +72,13 @@
}
@media screen and ($mat-small) {
container-widget .adf-grid-list {
container-widget .app-grid-list {
flex-direction: column;
}
}
}
.adf-accordion-panel {
.app-accordion-panel {
.mat-expansion-panel {
background: inherit;
}
@@ -93,7 +93,7 @@
align-items: center;
}
.adf-accordion-title-padding {
.app-accordion-title-padding {
padding-left: 20px;
}
}

6
demo-shell/src/app/components/process-service/task-attachments.component.html
View File

@@ -9,13 +9,13 @@
[taskId]="taskId"
(attachmentClick)="onAttachmentClick($event)">
<adf-empty-list>
<div adf-empty-list-header class="adf-empty-list-header">{{'ADF_TASK_LIST.ATTACHMENT.EMPTY.HEADER' | translate}}
<div adf-empty-list-header class="app-empty-list-header">{{'ADF_TASK_LIST.ATTACHMENT.EMPTY.HEADER' | translate}}
</div>
<div adf-empty-list-body>
<div fxHide.lt-md="true" class="adf-empty-list-drag_drop">
<div fxHide.lt-md="true" class="app-empty-list-drag_drop">
{{'ADF_TASK_LIST.ATTACHMENT.EMPTY.DRAG-AND-DROP.TITLE' | translate}}
</div>
<div fxHide.lt-md="true" class="adf-empty-list__any-files-here-to-add">
<div fxHide.lt-md="true" class="app-empty-list__any-files-here-to-add">
{{'ADF_TASK_LIST.ATTACHMENT.EMPTY.DRAG-AND-DROP.SUBTITLE' | translate}}
</div>
</div>

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

@@ -1,9 +1,9 @@
<div class="adf-report-issue">
<div class="app-report-issue">
<h1>Report Issue</h1>
<form class="adf-report-issue-form">
<form class="app-report-issue-form">
<mat-form-field>
<textarea matInput placeholder="Leave a comment" class="adf-report-issue-form-textarea"></textarea>
<textarea matInput placeholder="Leave a comment" class="app-report-issue-form-textarea"></textarea>
</mat-form-field>
</form>
<button mat-raised-button>Submit</button>
</div>
</div>

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

@@ -1,4 +1,4 @@
.adf-report-issue {
.app-report-issue {
margin: 50px 0;
display: flex;
flex-direction: column;

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

@@ -1,5 +1,5 @@
.adf-search-elements {
.app-search-elements {
display: flex;
align-items: center;
}

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

@@ -1,5 +1,5 @@
<div>
<div id="container-for-custom-input" class="adf-search-extended-input-containers">
<div id="container-for-custom-input" class="app-search-extended-input-containers">
<mat-form-field>
<label>{{'APP_LAYOUT.WORD_TO_SEARCH' | translate}}</label>
<input type="text" matInput
@@ -8,12 +8,12 @@
</div>
<div>
<adf-search #auto="searchAutocomplete"
class="adf-example-card-search-container">
class="app-example-card-search-container">
<ng-template let-data>
<mat-card class="adf-example-card"
<mat-card class="app-example-card"
*ngFor="let item of data?.list?.entries; let idx = index" (click)="onClick(item)">
<mat-card-header>
<div mat-card-avatar class="adf-example-header-image"></div>
<div mat-card-avatar class="app-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>
@@ -24,8 +24,8 @@
</p>
</mat-card-content>
</mat-card>
<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 class="app-example-card" id="search_no_result" *ngIf="data?.list?.entries.length === 0">
<p mat-line class="app-search-fixed-text">{{ 'SEARCH.RESULTS.NONE' | translate:{searchTerm: searchedWord} }}</p>
</mat-card>
</ng-template>
</adf-search>

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

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

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

@@ -1,13 +1,13 @@
<div class="adf-search-results__facets">
<div class="app-search-results__facets">
<adf-search-chip-list [searchFilter]="searchFilter" [clearAll]="true"></adf-search-chip-list>
</div>
<div class="adf-search-results">
<adf-search-filter class="adf-search-settings" #searchFilter></adf-search-filter>
<div class="app-search-results">
<adf-search-filter class="app-search-settings" #searchFilter></adf-search-filter>
<div class="adf-search-results__content">
<div class="app-search-results__content">
<mat-progress-bar *ngIf="isLoading" color="primary" mode="indeterminate"></mat-progress-bar>
<div class="adf-search-results__sorting">
<div class="app-search-results__sorting">
<adf-search-sorting-picker></adf-search-sorting-picker>
</div>
<app-files-component

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

@@ -1,8 +1,8 @@
.adf-search-results {
.app-search-results {
display: flex;
margin-left: 5px;
.adf-search-settings {
.app-search-settings {
width: 260px;
border: 1px solid #eee;
}
@@ -20,23 +20,23 @@
}
}
div.adf-search-results-container {
div.app-search-results-container {
padding: 0 20px 20px;
}
.adf-search-title {
.app-search-title {
font-size: 22px;
padding: 15px 0;
}
@media screen and (max-width: 600px) {
:host .adf-col-display-name {
:host .app-col-display-name {
min-width: 100px;
}
:host .adf-col-modified-at, :host .adf-col-modified-by {
:host .app-col-modified-at, :host .app-col-modified-by {
display: none;
}
:host div.adf-search-results-container table {
:host div.app-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 @@
.adf-shared-link-view {
.app-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': 'adf-shared-link-view' }
host: { 'class': 'app-shared-link-view' }
})
export class SharedLinkViewComponent implements OnInit {

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

@@ -2,17 +2,17 @@
<input id="nodeId" type="text" size="48" [(ngModel)]="nodeId"><br>
<div fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
<div class="adf-social-example-area" fxFlex.gt-md="1 1 auto">
<div class="app-social-example-area" fxFlex.gt-md="1 1 auto">
<mat-card>
<div class="adf-social-title">
<div class="app-social-title">
{{'SOCIAL.LIKE' | translate }}
</div>
<adf-like [nodeId]="nodeId"></adf-like>
</mat-card>
</div>
<div class="adf-social-example-area" fxFlex.gt-md="1 1 auto">
<div class="app-social-example-area" fxFlex.gt-md="1 1 auto">
<mat-card>
<div class="adf-social-title">
<div class="app-social-title">
{{'SOCIAL.RATING' | translate }}
</div>
<adf-rating [nodeId]="nodeId"></adf-rating>

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

@@ -1,8 +1,8 @@
.adf-social-example-area {
.app-social-example-area {
margin: 10px;
}
.adf-social-example-title {
.app-social-example-title {
padding-bottom: 12px;
}

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

@@ -4,22 +4,22 @@
<br>
<div fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
<div class="adf-tag-example-area" fxFlex.gt-md="1 1 auto">
<div class="app-tag-example-area" fxFlex.gt-md="1 1 auto">
<mat-card>
<adf-tag-node-actions-list [nodeId]="nodeId"></adf-tag-node-actions-list>
</mat-card>
</div>
<div class="adf-tag-example-area" fxFlex.gt-md="1 1 auto">
<div class="app-tag-example-area" fxFlex.gt-md="1 1 auto">
<mat-card>
<div class="adf-tag-example-title">
<div class="app-tag-example-title">
{{'TAG.LIST' | translate }}
</div>
<adf-tag-list></adf-tag-list>
</mat-card>
</div>
<div class="adf-tag-example-area" fxFlex.gt-md="1 1 auto">
<div class="app-tag-example-area" fxFlex.gt-md="1 1 auto">
<mat-card>
<div class="adf-tag-example-title">
<div class="app-tag-example-title">
{{'TAG.NODE_LIST' | translate }}
</div>
<adf-tag-node-list [showDelete]="showDelete" [nodeId]="nodeId"></adf-tag-node-list>

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

@@ -1,8 +1,8 @@
.adf-tag-example-area {
.app-tag-example-area {
margin: 10px;
}
.adf-tag-example-title {
.app-tag-example-title {
padding-bottom: 12px;
}

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

@@ -1,4 +1,4 @@
<div class="adf-task-list-demo-inputs">
<div class="app-task-list-demo-inputs">
<form [formGroup]="taskListForm">
<mat-form-field>
@@ -139,7 +139,7 @@
</mat-form-field>
</form>
</div>
<div class="adf-reset-button">
<div class="app-reset-button">
<button mat-raised-button (click)="resetTaskForm()">Reset</button>
</div>
@@ -162,7 +162,7 @@
#taskList>
<data-columns>
<data-column key="id" title="Id"></data-column>
<data-column key="assignee" title="Assignee" class="adf-full-width adf-name-column">
<data-column key="assignee" title="Assignee" class="adf-full-width app-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,4 +1,4 @@
.adf-task-list-demo-inputs {
.app-task-list-demo-inputs {
margin: 20px auto 0;
max-width: 1200px;
@@ -8,13 +8,13 @@
}
}
.adf-reset-button {
.app-reset-button {
margin-bottom: 50px;
display: flex;
justify-content: center;
}
.adf-task-list-demo-error-message {
.app-task-list-demo-error-message {
color: red;
text-align: center;
}

2
demo-shell/src/app/components/theme-picker/theme-picker.html
View File

@@ -2,7 +2,7 @@
<mat-icon>format_color_fill</mat-icon>
</button>
<mat-menu class="docs-theme-picker-menu adf-menu" #themeMenu="matMenu" x-position="before">
<mat-menu class="docs-theme-picker-menu app-menu" #themeMenu="matMenu" x-position="before">
<button *ngFor="let theme of themes" [attr.data-automation-id]="theme.name" mat-menu-item (click)="installTheme(theme)" >
<mat-icon mat-list-icon [matTooltip]="theme.name" class="docs-theme-chosen-icon" [style.color]="theme.accent"
[style.background]="theme.primary"

8
demo-shell/src/custom-style-dev.scss
View File

@@ -20,10 +20,10 @@ $warn: mat-palette($alfresco-warn);
$theme: mat-light-theme($primary, $accent, $warn);
@include angular-material-theme($theme);
@include adf-app-layout-theme($theme);
@include adf-file-component-theme($theme);
@include adf-login-component-theme($theme);
@include adf-process-service-component-theme($theme);
@include app-layout-theme($theme);
@include app-file-component-theme($theme);
@include app-login-component-theme($theme);
@include app-process-service-component-theme($theme);
@include adf-content-services-theme($theme);

8
demo-shell/src/custom-style.scss
View File

@@ -19,10 +19,10 @@ $warn: mat-palette($alfresco-warn);
$theme: mat-light-theme($primary, $accent, $warn);
@include angular-material-theme($theme);
@include adf-app-layout-theme($theme);
@include adf-file-component-theme($theme);
@include adf-login-component-theme($theme);
@include adf-process-service-component-theme($theme);
@include app-layout-theme($theme);
@include app-file-component-theme($theme);
@include app-login-component-theme($theme);
@include app-process-service-component-theme($theme);
@include adf-content-services-theme($theme);
@include adf-process-services-theme($theme);

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

@@ -1,114 +1,128 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ACS APS ADF Application with Angular CLI</title>
<base href="/">
<meta charset="utf-8">
<title>ACS APS ADF Application with Angular CLI</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96">
<style>
body, html {
height: 100%;
}
<style>
body,
html {
height: 100%;
}
.adf-loader-container {
display: flex;
flex-direction: column;
height:100%;
.app-loader-container {
display: flex;
flex-direction: column;
height: 100%;
align-items: center;
justify-content: center;
}
align-items: center;
justify-content: center;
}
.app-loader-item {
max-height: 100px;
max-width: 300px;
}
.adf-loader-item {
max-height:100px;
max-width:300px;
}
.app-loader-spinner {
max-height: 300px;
max-width: 300px;
}
.adf-loader-spinner {
max-height:300px;
max-width:300px;
}
.app-loader-text {
white-space: nowrap;
text-align: center;
position: relative;
}
.adf-loader-text {
white-space: nowrap;
text-align: center;
position: relative;
}
.app-loader {
position: absolute;
width: 100px;
height: 100px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.adf-loader {
position: absolute;
width: 100px;
height: 100px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.app-circular {
animation: rotate 2s linear infinite;
height: 100px;
position: relative;
width: 100px;
}
.adf-circular {
animation: rotate 2s linear infinite;
height: 100px;
position: relative;
width: 100px;
}
.app-path {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
stroke: #b6463a;
animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
stroke-linecap: round;
}
.adf-path {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
stroke: #b6463a;
animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
stroke-linecap: round;
}
@keyframes rotate {
100% {
transform: rotate(360deg);
}
}
@keyframes rotate {
100% {
transform: rotate(360deg);
}
}
@keyframes dash {
0% {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -35;
}
100% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -124;
}
}
@keyframes color {
100%, 0% {
stroke: #d62d20;
}
40% {
stroke: #0057e7;
}
66% {
stroke: #008744;
}
80%, 90% {
stroke: #ffa700;
}
}
</style>
@keyframes dash {
0% {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -35;
}
100% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -124;
}
}
@keyframes color {
100%,
0% {
stroke: #d62d20;
}
40% {
stroke: #0057e7;
}
66% {
stroke: #008744;
}
80%,
90% {
stroke: #ffa700;
}
}
</style>
</head>
<body class="adf-background-color">
<app-root>
<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="adf-loader-item">
<div id="loader-text" class="adf-loader-text">Loading Demo Shell..</div>
</div>
</div>
</app-root>
<body class="app-background-color">
<app-root>
<div id="loader-container" class="app-loader-container">
<div class="app-loader-spinner">
<svg class="app-circular">
<circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="5" stroke-miterlimit="10">
</circle>
</svg>
</div>
<div class="app-loader-item">
<div id="loader-text" class="app-loader-text">Loading Demo Shell..</div>
</div>
</div>
</app-root>
</body>
</html>