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-1434] Theming ADF component (#2228)

Browse Source 
* start custom theming adf

* demo shell cleaning

* login mdl cleaning

* uploader mdl cleaning

* prebuilt themes

* theme picker in demo shell

* clean custom colors and mdl

* fix rebase errors

* theming from color style guide

* dev default theme orange purple

* fix color accent inverted in picker

* fix test and add colors classes

* fix tag component theming issues

* fix datatable theming

* add theming guides
This commit is contained in:
Eugenio Romano
2017-08-19 01:06:35 +01:00
committed by Mario Romano
parent f6f94fbd0c
commit d4e64ac438
149 changed files with 31228 additions and 3136 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
demo-shell-ng2/app/components/activiti/activiti-demo.component.html
View File

@@ -6,7 +6,7 @@
<div class="list-buttons">
<button md-raised-button data-automation-id="btn-start-task" (click)="navigateStartTask()">
<md-icon>add</md-icon>
<span>START TASK</span>
<span>{{'PS-TAB.START-TASK' | translate}}</span>
</button>
</div>
<adf-accordion>
@@ -63,7 +63,7 @@
</activiti-task-details>
<hr>
<div *ngIf="currentTaskId">
Task Audit log
{{'PS-TAB.AUDIT-LOG' | translate}}
<button
adf-task-audit
[task-id]="currentTaskId"
@@ -148,7 +148,7 @@
</activiti-process-instance-details>
<hr>
<div *ngIf="currentProcessInstanceId">
Process Audit log
{{'PS-TAB.START-PROCESS' | translate}}
<button adf-process-audit
[process-id]="currentProcessInstanceId"
[download]="true" md-icon-button

4
demo-shell-ng2/app/components/activiti/activiti-show-diagram.component.html
View File

@@ -1,6 +1,4 @@
<div>
<button (click)="onClickBack()" class="mdl-button mdl-button--icon">
<i class="material-icons">keyboard_backspace</i>
</button>
<button md-mini-fab (click)="onClickBack()" ><md-icon>keyboard_backspace</md-icon></button>
<activiti-diagram [processInstanceId]="processDefinitionId"></activiti-diagram>
</div>

11
demo-shell-ng2/app/components/activiti/form-node-viewer.component.ts
View File

@@ -15,7 +15,7 @@
* limitations under the License.
*/
import { AfterViewChecked, Component, OnDestroy, OnInit } from '@angular/core';
import { Component, OnDestroy, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Subscription } from 'rxjs/Rx';
@@ -26,7 +26,7 @@ declare var componentHandler;
templateUrl: './form-node-viewer.component.html',
styleUrls: ['./form-node-viewer.component.css']
})
export class FormNodeViewerComponent implements OnInit, OnDestroy, AfterViewChecked {
export class FormNodeViewerComponent implements OnInit, OnDestroy {
nodeId: string;
@@ -45,11 +45,4 @@ export class FormNodeViewerComponent implements OnInit, OnDestroy, AfterViewChec
this.sub.unsubscribe();
}
ngAfterViewChecked() {
// workaround for MDL issues with dynamic components
if (componentHandler) {
componentHandler.upgradeAllRegistered();
}
}
}

11
demo-shell-ng2/app/components/activiti/form-viewer.component.ts
View File

@@ -15,7 +15,7 @@
* limitations under the License.
*/
import { AfterViewChecked, Component, OnDestroy, OnInit } from '@angular/core';
import { Component, OnDestroy, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Subscription } from 'rxjs/Rx';
@@ -26,7 +26,7 @@ declare var componentHandler;
templateUrl: './form-viewer.component.html',
styleUrls: ['./form-viewer.component.css']
})
export class FormViewerComponent implements OnInit, OnDestroy, AfterViewChecked {
export class FormViewerComponent implements OnInit, OnDestroy {
taskId: string;
@@ -45,11 +45,4 @@ export class FormViewerComponent implements OnInit, OnDestroy, AfterViewChecked
this.sub.unsubscribe();
}
ngAfterViewChecked() {
// workaround for MDL issues with dynamic components
if (componentHandler) {
componentHandler.upgradeAllRegistered();
}
}
}

2
demo-shell-ng2/app/components/files/files.component.css
View File

@@ -45,7 +45,7 @@ adf-document-list >>> adf-datatable tr.is-selected .image-table-cell::before {
top: 50%;
left: 50%;
margin-top: -16px;
margin-left: -14px;
margin-left: -28px;
border-radius: 100%;
background: #00bcd4;
}

18
demo-shell-ng2/app/components/files/files.component.html
View File

@@ -225,39 +225,39 @@
<div class="container">
<section *ngIf="!useViewerDialog">
<md-slide-toggle [(ngModel)]="useInlineViewer">Use inline viewer (no overlay)</md-slide-toggle>
<md-slide-toggle [color]="'primary'" [(ngModel)]="useInlineViewer">Use inline viewer (no overlay)</md-slide-toggle>
</section>
<section>
<md-slide-toggle [(ngModel)]="useViewerDialog">Use File Viewer dialog</md-slide-toggle>
<md-slide-toggle [color]="'primary'" [(ngModel)]="useViewerDialog">Use File Viewer dialog</md-slide-toggle>
</section>
<section>
<md-slide-toggle [(ngModel)]="multiselect">Multiselect (with checkboxes)</md-slide-toggle>
<md-slide-toggle [color]="'primary'" [(ngModel)]="multiselect">Multiselect (with checkboxes)</md-slide-toggle>
</section>
<section>
<md-slide-toggle [(ngModel)]="useDropdownBreadcrumb">Dropdown breadcrumb</md-slide-toggle>
<md-slide-toggle [color]="'primary'" [(ngModel)]="useDropdownBreadcrumb">Dropdown breadcrumb</md-slide-toggle>
</section>
<section>
<md-slide-toggle [(ngModel)]="multipleFileUpload">Multiple File Upload</md-slide-toggle>
<md-slide-toggle [color]="'primary'" [(ngModel)]="multipleFileUpload">Multiple File Upload</md-slide-toggle>
</section>
<section>
<md-slide-toggle [(ngModel)]="folderUpload">Folder upload</md-slide-toggle>
<md-slide-toggle [color]="'primary'" [(ngModel)]="folderUpload">Folder upload</md-slide-toggle>
</section>
<section>
<md-slide-toggle [(ngModel)]="acceptedFilesTypeShow">Custom extensions filter</md-slide-toggle>
<md-slide-toggle [color]="'primary'" [(ngModel)]="acceptedFilesTypeShow">Custom extensions filter</md-slide-toggle>
</section>
<section>
<md-slide-toggle [(ngModel)]="versioning">Enable versioning</md-slide-toggle>
<md-slide-toggle [color]="'primary'" [(ngModel)]="versioning">Enable versioning</md-slide-toggle>
</section>
<section>
<md-slide-toggle [(ngModel)]="disableWithNoPermission">Disable upload button when user has no permissions</md-slide-toggle>
<md-slide-toggle [color]="'primary'" [(ngModel)]="disableWithNoPermission">Disable upload button when user has no permissions</md-slide-toggle>
</section>
<h5>Upload</h5>

17
demo-shell-ng2/app/components/form/form-list-demo.component.ts
View File

@@ -15,7 +15,7 @@
* limitations under the License.
*/
import { AfterViewInit, Component, ViewChild } from '@angular/core';
import { Component, ViewChild } from '@angular/core';
import { FormModel, FormService } from 'ng2-activiti-form';
import { ActivitiForm } from 'ng2-activiti-form';
@@ -30,8 +30,8 @@ declare var componentHandler;
<activiti-form [form]="form" [data]="restoredData">
</activiti-form>
</div>
<button class="mdl-button mdl-js-button" (click)="store()">STORE</button>
<button class="mdl-button mdl-js-button" (click)="restore()">RESTORE</button>
<button md-button (click)="store()" color="primary">{{'FORM-LIST.STORE' | translate }}</button>
<button md-button (click)="restore()" color="primary">{{'FORM-LIST.RESTORE' | translate }}</button>
`,
styles: [`
.form-container {
@@ -44,9 +44,9 @@ declare var componentHandler;
}
`]
})
export class FormListDemoComponent implements AfterViewInit {
export class FormListDemoComponent {
@ViewChild(ActivitiForm)
@ViewChild(ActivitiForm)
activitiForm: ActivitiForm;
formList: any [] = [];
@@ -65,13 +65,6 @@ export class FormListDemoComponent implements AfterViewInit {
});
}
ngAfterViewInit() {
// workaround for MDL issues with dynamic components
if (componentHandler) {
componentHandler.upgradeAllRegistered();
}
}
onRowDblClick(event: CustomEvent) {
let rowForm = event.detail.value.obj;

39
demo-shell-ng2/app/components/home/home.component.css
View File

@@ -1,52 +1,29 @@
.home-cards {
.adf-home-card {
float: left;
margin: 10px 10px 10px 10px;
}
.mdl-card__supporting-text {
width: 290px;
display: block;
overflow-y: auto;
height: 400px;
}
.demo-card-square.mdl-card {
width: 320px;
height: 380px;
}
.demo-card-square > .mdl-card__title {
color: #fff;
background-color: rgb(158, 158, 158);
}
.mdl-card__title {
.adf-home-card-title {
padding: 24px;
cursor: pointer;
height: 70px;
height: 55px;
margin: -63px -24px 18px -25px !important;
}
.home--card__icon {
padding-top: 2px;
margin-right: 4px;
}
.home--card__text {
.adf-home-card__text {
font-size: 16px;
line-height: 18px;
}
.home--feature-list {
.adf-home-feature-list {
list-style: none;
padding-left: 0;
}
.home--feature-list__icon {
float: left;
}
.home--feature-list__text {
padding-top: 2px;
}
span.home--feature-list__text:before {
content: '';
padding-left: 4px;

204
demo-shell-ng2/app/components/home/home.component.html
View File

@@ -1,187 +1,187 @@
<!-- DOCUMENT LIST-->
<div class="demo-card-square mdl-card mdl-shadow--2dp home-cards">
<div class="mdl-card__title mdl-card--expand" routerLink="/files">
<h2 class="mdl-card__title-text">
<i class="material-icons home--card__icon">dvr</i>
<span class="home--card__text">DocumentList - Content Services</span>
<md-card class="adf-home-card">
<md-card-title class="adf-home-card-title adf-primary-background-color" routerLink="/files">
<h2 >
<md-icon>dvr</md-icon>
<span class="adf-home-card__text">DocumentList - Content Services</span>
</h2>
</div>
<div class="mdl-card__supporting-text">
</md-card-title>
<md-card-content>
Demonstrates multiple Alfresco Content Services components used together to display the files of your Content Services instance:
<ul class="home--feature-list">
<ul class="adf-home-feature-list">
<li>
<i class="material-icons home--feature-list__icon">brightness_1</i>
<span class="home--feature-list__text">Communication with the Rest Api and core services</span>
<md-icon>brightness_1</md-icon>
<span class="adf-home-feature-list__text">Communication with the Rest Api and core services</span>
<a href="https://www.npmjs.com/package/ng2-alfresco-core" target="_blank">ng2-alfresco-core</a>
</li>
<li>
<i class="material-icons home--feature-list__icon">dvr</i>
<span class="home--feature-list__text">Document List</span>
<md-icon>dvr</md-icon>
<span class="adf-home-feature-list__text">Document List</span>
<a href="https://www.npmjs.com/package/ng2-alfresco-documentlist" target="_blank">ng2-alfresco-documentlist</a>
</li>
<li>
<i class="material-icons home--feature-list__icon">file_upload</i>
<span class="home--feature-list__text">Upload</span>
<md-icon>file_upload</md-icon>
<span class="adf-home-feature-list__text">Upload</span>
<a href="https://www.npmjs.com/package/ng2-alfresco-upload" target="_blank">ng2-alfresco-upload</a>
</li>
<li>
<i class="material-icons home--feature-list__icon">view_module</i>
<span class="home--feature-list__text">DataTable</span>
<md-icon>view_module</md-icon>
<span class="adf-home-feature-list__text">DataTable</span>
<a href="https://www.npmjs.com/package/ng2-alfresco-datatable" target="_blank">ng2-alfresco-datatable</a>
</li>
</ul>
</div>
</div>
</md-card-content>
</md-card>
<!-- Process Services-->
<div class="demo-card-square mdl-card mdl-shadow--2dp home-cards">
<div class="mdl-card__title mdl-card--expand" routerLink="/activiti">
<h2 class="mdl-card__title-text">
<i class="material-icons home--card__icon">apps</i>
<span class="home--card__text">Process Services</span>
<md-card class="adf-home-card">
<md-card-title class="adf-home-card-title adf-primary-background-color" routerLink="/activiti">
<h2 >
<md-icon>apps</md-icon>
<span class="adf-home-card__text">Process Services</span>
</h2>
</div>
<div class="mdl-card__supporting-text">
</md-card-title>
<md-card-content>
Demonstrates multiple Alfresco Process Services components used together to show your Process Services process and tasks:
<ul class="home--feature-list">
<ul class="adf-home-feature-list">
<li>
<i class="material-icons home--feature-list__icon">brightness_1</i>
<span class="home--feature-list__text">Communication with the Rest Api and core services</span>
<md-icon>brightness_1</md-icon>
<span class="adf-home-feature-list__text">Communication with the Rest Api and core services</span>
<a href="https://www.npmjs.com/package/ng2-alfresco-core" target="_blank">ng2-alfresco-core</a>
</li>
<li>
<i class="material-icons home--feature-list__icon">view_module</i>
<span class="home--feature-list__text">App List</span>
<md-icon>view_module</md-icon>
<span class="adf-home-feature-list__text">App List</span>
<a href="https://www.npmjs.com/package/ng2-activiti-tasklist" target="_blank">ng2-activiti-apps</a>
</li>
<li>
<i class="material-icons home--feature-list__icon">view_headline</i>
<span class="home--feature-list__text">Task List</span>
<md-icon>view_headline</md-icon>
<span class="adf-home-feature-list__text">Task List</span>
<a href="https://www.npmjs.com/package/ng2-activiti-tasklist" target="_blank">ng2-activiti-tasklist</a>
</li>
<li>
<i class="material-icons home--feature-list__icon">view_headline</i>
<span class="home--feature-list__text">Process List</span>
<md-icon>view_headline</md-icon>
<span class="adf-home-feature-list__text">Process List</span>
<a href="https://www.npmjs.com/package/ng2-activiti-processlist" target="_blank">ng2-activiti-processlist</a>
</li>
<li>
<i class="material-icons home--feature-list__icon">view_quilt</i>
<span class="home--feature-list__text">Form</span>
<md-icon>view_quilt</md-icon>
<span class="adf-home-feature-list__text">Form</span>
<a href="https://www.npmjs.com/package/ng2-activiti-form" target="_blank">ng2-activiti-form</a>
</li>
<li>
<i class="material-icons home--feature-list__icon">pie_chart</i>
<span class="home--feature-list__text">Analytics</span>
<md-icon>pie_chart</md-icon>
<span class="adf-home-feature-list__text">Analytics</span>
<a href="https://www.npmjs.com/package/ng2-activiti-analytics" target="_blank">ng2-activiti-analytics</a>,
<a href="https://www.npmjs.com/package/ng2-activiti-diagrams" target="_blank">ng2-activiti-diagrams</a>
</li>
<li>
<i class="material-icons home--feature-list__icon">view_module</i>
<span class="home--feature-list__text">DataTable</span>
<md-icon>view_module</md-icon>
<span class="adf-home-feature-list__text">DataTable</span>
<a href="https://www.npmjs.com/package/ng2-alfresco-datatable" target="_blank">ng2-alfresco-datatable</a>
</li>
</ul>
</div>
</div>
</md-card-content>
</md-card>
<!-- DATATABLE-->
<div class="demo-card-square mdl-card mdl-shadow--2dp home-cards">
<div class="mdl-card__title mdl-card--expand" routerLink="/datatable">
<h2 class="mdl-card__title-text">
<i class="material-icons home--card__icon">view_module</i>
<span class="home--card__text">DataTable - Content Services & Process Services</span>
<md-card class="adf-home-card">
<md-card-title class="adf-home-card-title adf-primary-background-color" routerLink="/datatable">
<h2 >
<md-icon>view_module</md-icon>
<span class="adf-home-card__text">DataTable - Content Services & Process Services</span>
</h2>
</div>
<div class="mdl-card__supporting-text">
</md-card-title>
<md-card-content>
Basic table component:
<ul class="home--feature-list">
<ul class="adf-home-feature-list">
<li>
<i class="material-icons home--feature-list__icon">brightness_1</i>
<span class="home--feature-list__text">Communication with the Rest Api and core services</span>
<md-icon>brightness_1</md-icon>
<span class="adf-home-feature-list__text">Communication with the Rest Api and core services</span>
<a href="https://www.npmjs.com/package/ng2-alfresco-core" target="_blank">ng2-alfresco-core</a>
</li>
</ul>
</div>
</div>
</md-card-content>
</md-card>
<!-- UPLOADER-->
<div class="demo-card-square mdl-card mdl-shadow--2dp home-cards">
<div class="mdl-card__title mdl-card--expand" routerLink="/uploader">
<h2 class="mdl-card__title-text">
<i class="material-icons home--card__icon">file_upload</i>
<span class="home--card__text">Uploader - Content Services</span>
<md-card class="adf-home-card">
<md-card-title class="adf-home-card-title adf-primary-background-color" routerLink="/uploader">
<h2 >
<md-icon>file_upload</md-icon>
<span class="adf-home-card__text">Uploader - Content Services</span>
</h2>
</div>
<div class="mdl-card__supporting-text">
</md-card-title>
<md-card-content>
Basic table uploader component for the Content Services & Process Services:
<ul class="home--feature-list">
<ul class="adf-home-feature-list">
<li>
<i class="material-icons home--feature-list__icon">brightness_1</i>
<span class="home--feature-list__text">Communication with the Rest Api and core services</span>
<md-icon>brightness_1</md-icon>
<span class="adf-home-feature-list__text">Communication with the Rest Api and core services</span>
<a href="https://www.npmjs.com/package/ng2-alfresco-core" target="_blank">ng2-alfresco-core</a>
</li>
</ul>
</div>
</div>
</md-card-content>
</md-card>
<!-- LOGIN-->
<div class="demo-card-square mdl-card mdl-shadow--2dp home-cards">
<div class="mdl-card__title mdl-card--expand" routerLink="/login">
<h2 class="mdl-card__title-text">
<i class="material-icons home--card__icon">account_circle</i>
<span class="home--card__text">Login - Content Services & Process Services</span>
<md-card class="adf-home-card">
<md-card-title class="adf-home-card-title adf-primary-background-color" routerLink="/login">
<h2 >
<md-icon>account_circle</md-icon>
<span class="adf-home-card__text">Login - Content Services & Process Services</span>
</h2>
</div>
<div class="mdl-card__supporting-text">
</md-card-title>
<md-card-content>
Login component for the Content Services and Process Services:
<ul class="home--feature-list">
<ul class="adf-home-feature-list">
<li>
<i class="material-icons home--feature-list__icon">brightness_1</i>
<span class="home--feature-list__text">Communication with the Rest Api and core services</span>
<md-icon>brightness_1</md-icon>
<span class="adf-home-feature-list__text">Communication with the Rest Api and core services</span>
<a href="https://www.npmjs.com/package/ng2-alfresco-core" target="_blank">ng2-alfresco-core</a>
</li>
</ul>
</div>
</div>
</md-card-content>
</md-card>
<!-- WEBSCRIPT-->
<div class="demo-card-square mdl-card mdl-shadow--2dp home-cards">
<div class="mdl-card__title mdl-card--expand" routerLink="/webscript">
<h2 class="mdl-card__title-text">
<i class="material-icons home--card__icon">extension</i>
<span class="home--card__text">Webscript - Content Services</span>
<md-card class="adf-home-card">
<md-card-title class="adf-home-card-title adf-primary-background-color" routerLink="/webscript">
<h2 >
<md-icon>extension</md-icon>
<span class="adf-home-card__text">Webscript - Content Services</span>
</h2>
</div>
<div class="mdl-card__supporting-text">
</md-card-title>
<md-card-content>
Displays and creates webscripts in your Content Services instance:
<ul class="home--feature-list">
<ul class="adf-home-feature-list">
<li>
<i class="material-icons home--feature-list__icon">brightness_1</i>
<span class="home--feature-list__text">Communication with the Rest Api and core services</span>
<md-icon>brightness_1</md-icon>
<span class="adf-home-feature-list__text">Communication with the Rest Api and core services</span>
<a href="https://www.npmjs.com/package/ng2-alfresco-core" target="_blank">ng2-alfresco-core</a>
</li>
</ul>
</div>
</div>
</md-card-content>
</md-card>
<!-- TAG-->
<div class="demo-card-square mdl-card mdl-shadow--2dp home-cards">
<div class="mdl-card__title mdl-card--expand" routerLink="/tag">
<h2 class="mdl-card__title-text">
<i class="material-icons home--card__icon">local_offer</i>
<span class="home--card__text">Tag - Content Services</span>
<md-card class="adf-home-card">
<md-card-title class="adf-home-card-title adf-primary-background-color" routerLink="/tag">
<h2 >
<md-icon>local_offer</md-icon>
<span class="adf-home-card__text">Tag - Content Services</span>
</h2>
</div>
<div class="mdl-card__supporting-text">
</md-card-title>
<md-card-content>
Displays and adds tags to the node of your Content Services instance:
<ul class="home--feature-list">
<ul class="adf-home-feature-list">
<li>
<i class="material-icons home--feature-list__icon">brightness_1</i>
<span class="home--feature-list__text">Communication with Rest</span>
<md-icon>brightness_1</md-icon>
<span class="adf-home-feature-list__text">Communication with Rest</span>
<a href="https://www.npmjs.com/package/ng2-alfresco-core" target="_blank">ng2-alfresco-core</a>
</li>
</ul>
</div>
</div>
</md-card-content>
</md-card>

2
demo-shell-ng2/app/components/login/login-demo.component.css
View File

@@ -3,6 +3,8 @@
right: 10px;
top: 10px;
z-index: 1;
background-color: rgb(68,138,255);
color: rgb(255,255,255);
}
.settings {

99
demo-shell-ng2/app/components/login/login-demo.component.html
View File

@@ -2,38 +2,47 @@
<div class="settings">
<p class="toggle">
<label for="switch1" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
<input type="checkbox" id="switch1" [checked]="isECM" class="mdl-switch__input"
(click)="toggleECM()">
<span class="mdl-switch__label">Content Services</span>
</label>
<md-slide-toggle
id="switch1"
[color]="'primary'"
(click)="toggleECM()"
[checked]="isECM">
Content Services
</md-slide-toggle>
</p>
<p class="toggle">
<label for="switch2" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
<input type="checkbox" id="switch2" [checked]="isBPM" class="mdl-switch__input"
(click)="toggleBPM()">
<span class="mdl-switch__label">Process Services</span>
</label>
<md-slide-toggle
id="switch2"
[color]="'primary'"
(click)="toggleBPM()"
[checked]="isBPM">
Process Services
</md-slide-toggle>
</p>
<p class="toggle">
<label for="switch3" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
<input type="checkbox" id="switch3" class="mdl-switch__input" [checked]="!disableCsrf" (click)="toggleCSRF()">
<span class="mdl-switch__label">CSRF</span>
</label>
<md-slide-toggle
id="switch3"
[color]="'primary'"
(click)="toggleCSRF()"
[checked]="!disableCsrf">
CSRF
</md-slide-toggle>
</p>
<p class="toggle">
<label for="switch4" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
<input type="checkbox" id="switch4" class="mdl-switch__input" [checked]="showFooter" (click)="toggleFooter()">
<span class="mdl-switch__label">Login footer</span>
</label>
<md-slide-toggle
id="switch4"
[color]="'primary'"
(click)="toggleFooter()"
[checked]="showFooter">
Login footer
</md-slide-toggle>
</p>
</div>
<!--SETTING BUTTON-->
<a class="mdl-navigation__link setting-button" data-automation-id="settings" href="" routerLink="/settings">
<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
<i class="material-icons">settings</i>
</button>
<a md-fab class="setting-button" data-automation-id="settings" href="" routerLink="/settings" >
<md-icon>settings</md-icon>
</a>
<alfresco-login #alfrescologin
@@ -47,30 +56,40 @@
(onError)="onError($event)">
<div class="mobile-settings">
<p>
<label for="switch1-mobile" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
<input type="checkbox" id="switch1-mobile" [checked]="isECM" class="mdl-switch__input"
(click)="toggleECM()">
<span class="mdl-switch__label">Content Services</span>
</label>
<md-slide-toggle
id="switch1-mobile"
[color]="'primary'"
(click)="toggleECM()"
[checked]="isECM">
Content Services
</md-slide-toggle>
</p>
<p>
<label for="switch2-mobile" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
<input type="checkbox" id="switch2-mobile" [checked]="isBPM" class="mdl-switch__input"
(click)="toggleBPM()">
<span class="mdl-switch__label">Process Services</span>
</label>
<md-slide-toggle
id="switch2-mobile"
[color]="'primary'"
(click)="toggleBPM()"
[checked]="isBPM">
Process Services
</md-slide-toggle>
</p>
<p>
<label for="switch3-mobile" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
<input type="checkbox" id="switch3-mobile" class="mdl-switch__input" [checked]="!disableCsrf" (click)="toggleCSRF()">
<span class="mdl-switch__label">CSRF</span>
</label>
<md-slide-toggle
id="switch3-mobile"
[color]="'primary'"
(click)="toggleCSRF()"
[checked]="!disableCsrf">
CSRF
</md-slide-toggle>
</p>
<p>
<label for="switch4-mobile" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
<input type="checkbox" id="switch4-mobile" class="mdl-switch__input" [checked]="showFooter" (click)="toggleFooter()">
<span class="mdl-switch__label">Login footer</span>
</label>
<md-slide-toggle
id="switch4-mobile"
[color]="'primary'"
(click)="toggleFooter()"
[checked]="showFooter">
Login footer
</md-slide-toggle>
</p>
</div>
</alfresco-login>

2
demo-shell-ng2/app/components/search/search-bar.component.html
View File

@@ -11,5 +11,5 @@
<alfresco-viewer *ngIf="fileShowed" [(showViewer)]="fileShowed"
[fileNodeId]="fileNodeId"
[overlayMode]="true">
<div class="mdl-spinner mdl-js-spinner is-active"></div>
<md-spinner></md-spinner>
</alfresco-viewer>

2
demo-shell-ng2/app/components/search/search.component.html
View File

@@ -9,6 +9,6 @@
<alfresco-viewer [(showViewer)]="fileShowed"
[fileNodeId]="fileNodeId"
[overlayMode]="true">
<div class="mdl-spinner mdl-js-spinner is-active"></div>
<md-spinner></md-spinner>
</alfresco-viewer>
</div>

39
demo-shell-ng2/app/components/settings/settings.component.css
View File

@@ -1,35 +1,20 @@
.setting-card.mdl-card {
.adf-setting-container {
display: table;
border-collapse: collapse;
border-spacing: 0;
}
.adf-setting-card {
width: 400px;
}
.full-width {
width: 100%;
height: 100%;
}
.setting-card > .mdl-card__title {
color: #fff;
background: bottom right 15% no-repeat #1fbcd2;
}
.setting-card-padding {
.adf-setting-card-padding {
width: 50%;
display: table-cell;
vertical-align: middle;
margin: 0;
}
.setting-container {
display: table;
border-collapse: collapse;
border-spacing: 0;
width: 100%;
}
.icon-margin {
margin-right: 9px;
}
.table-row {
display: table-row;
}
.adf-setting-input-padding {
padding-top: 0px !important;
}

120
demo-shell-ng2/app/components/settings/settings.component.html
View File

@@ -1,63 +1,61 @@
<div class="setting-container">
<div class="table-row">
<div class="setting-card-padding"></div>
<div class="setting-card mdl-card mdl-shadow--2dp">
<div class="mdl-card__title mdl-card--expand">
<h2 class="mdl-card__title-text">SETTINGS</h2>
</div>
<div class="mdl-card__actions mdl-card--border">
<div class="mdl-card__supporting-text">
Content Services host URL configuration
</div>
<nav class="mdl-navigation">
<i class="icon material-icons icon-margin">link</i>
<div class="mdl-textfield mdl-js-textfield adf-setting-input-padding">
<input
data-automation-id="ecmHost"
class="mdl-textfield__input"
tabindex="1"
type="text"
tabindex="1"
(change)="onChangeECMHost($event)"
pattern="^(http|https):\/\/.*[^/]$"
id="ecmHost"
value="{{ecmHost}}"
placeholder="http(s)://host|ip:port(/path)">
<label class="mdl-textfield__label" for="ecmHost">ECM Host</label>
<span class="mdl-textfield__error">ECM host is not valid! http(s)://host|ip:port(/path)</span>
</div>
</nav>
<div class="adf-setting-container">
<div class="adf-setting-card-padding"></div>
<md-toolbar color="primary" >
<h3>{{'SETTINGS.TITLE' | translate}}</h3>
</md-toolbar>
<div class="mdl-card__supporting-text">
Process Services host URL configuration
</div>
<nav class="mdl-navigation">
<i class="icon material-icons icon-margin">link</i>
<div class="mdl-textfield mdl-js-textfield adf-setting-input-padding">
<input
data-automation-id="bpmHost"
class="mdl-textfield__input"
type="text"
(change)="onChangeBPMHost($event)"
tabindex="2"
pattern="^(http|https):\/\/.*[^/]$"
id="bpmHost"
value="{{bpmHost}}"
placeholder="http(s)://host|ip:port(/path)">
<label class="mdl-textfield__label" for="bpmHost">BPM Host</label>
<span class="mdl-textfield__error">BPM host is not valid! http(s)://host|ip:port(/path)</span>
</div>
</nav>
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" onclick="window.history.back()">
Back
</a>
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" onclick="window.location.href = '/'">
Apply
</a>
</div>
</div>
<div class="setting-card-padding"></div>
</div>
<md-card class="adf-setting-card">
<md-card-content>
<md-card-subtitle>{{'SETTINGS.CS-HOST' | translate }}</md-card-subtitle>
<md-input-container class="full-width">
<md-icon mdPrefix>link</md-icon>
<input mdInput
[formControl]="urlFormControlEcm"
data-automation-id="ecmHost"
type="text"
(change)="onChangeECMHost($event)"
tabindex="2"
id="ecmHost"
value="{{ecmHost}}"
placeholder="http(s)://host|ip:port(/path)">
<md-error *ngIf="urlFormControlEcm.hasError('pattern')">
ECM host is not valid! http(s)://host|ip:port(/path)
</md-error>
</md-input-container>
<p>
<p>
<md-card-subtitle>{{'SETTINGS.BP-HOST' | translate }}</md-card-subtitle>
<md-input-container class="full-width">
<md-icon mdPrefix>link</md-icon>
<input mdInput
[formControl]="urlFormControlBpm"
data-automation-id="bpmHost"
type="text"
(change)="onChangeBPMHost($event)"
tabindex="2"
id="bpmHost"
value="{{bpmHost}}"
placeholder="http(s)://host|ip:port(/path)">
<md-error *ngIf="urlFormControlBpm.hasError('pattern')">
BPM host is not valid! http(s)://host|ip:port(/path)
</md-error>
</md-input-container>
</md-card-content>
<md-card-actions>
<button md-button onclick="window.history.back()" color="primary">
{{'SETTINGS.BACK' | translate }}
</button>
<button md-button onclick="window.location.href = '/'" color="primary">
{{'SETTINGS.APPLY' | translate }}
</button>
</md-card-actions>
</md-card>
<div class="adf-setting-card-padding"></div>
</div>

16
demo-shell-ng2/app/components/settings/settings.component.ts
View File

@@ -15,7 +15,8 @@
* limitations under the License.
*/
import { AfterViewChecked, Component } from '@angular/core';
import { Component } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';
import { AlfrescoSettingsService, LogService, StorageService } from 'ng2-alfresco-core';
declare var componentHandler: any;
@@ -25,10 +26,14 @@ declare var componentHandler: any;
templateUrl: 'settings.component.html',
styleUrls: ['settings.component.css']
})
export class SettingsComponent implements AfterViewChecked {
export class SettingsComponent {
HOST_REGEX: string = '^(http|https):\/\/.*[^/]$';
ecmHost: string;
bpmHost: string;
urlFormControlEcm = new FormControl('', [Validators.required, Validators.pattern(this.HOST_REGEX)]);
urlFormControlBpm = new FormControl('', [Validators.required, Validators.pattern(this.HOST_REGEX)]);
constructor(private settingsService: AlfrescoSettingsService,
private storage: StorageService,
@@ -37,13 +42,6 @@ export class SettingsComponent implements AfterViewChecked {
this.bpmHost = storage.getItem('bpmHost') || this.settingsService.bpmHost;
}
ngAfterViewChecked() {
// workaround for MDL issues with dynamic components
if (componentHandler) {
componentHandler.upgradeAllRegistered();
}
}
public onChangeECMHost(event: KeyboardEvent): void {
let value = (<HTMLInputElement>event.target).value.trim();
if (value && this.isValidUrl(value)) {

16
demo-shell-ng2/app/components/social/social.component.html Normal file
View File

@@ -0,0 +1,16 @@
<label for="nodeId"><b>Insert Node Id</b></label><br>
<input id="nodeId" type="text" size="48" [(ngModel)]="nodeId"><br>
<md-grid-list cols="2" rowHeight="100px">
<md-grid-tile>
<md-list>
<md-list-item> <div class="adf-social-title" >Like component</div> </md-list-item>
<md-list-item> <adf-like [nodeId]="nodeId"></adf-like></md-list-item>
</md-list>
</md-grid-tile>
<md-grid-tile>
<md-list>
<md-list-item> <div class="adf-social-title" >Rating component</div> </md-list-item>
<md-list-item> <adf-rating [nodeId]="nodeId"></adf-rating></md-list-item>
</md-list>
</md-grid-tile>
</md-grid-list>

3
demo-shell-ng2/app/components/social/social.component.scss Normal file
View File

@@ -0,0 +1,3 @@
.adf-social-title{
}

15
demo-shell-ng2/app/components/social/social.component.ts
View File

@@ -19,19 +19,8 @@ import { Component } from '@angular/core';
@Component({
selector: 'alfresco-social-demo',
template: `
<label for="nodeId"><b>Insert Node Id</b></label><br>
<input id="nodeId" type="text" size="48" [(ngModel)]="nodeId"><br>
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--4-col">
Like component
<adf-like [nodeId]="nodeId"></adf-like></div>
<div class="mdl-cell mdl-cell--4-col">
Rating component
<adf-rating [nodeId]="nodeId"></adf-rating>
</div>
</div>
`
templateUrl: 'social.component.html',
styleUrls: ['social.component.scss']
})
export class SocialComponent {

16
demo-shell-ng2/app/components/tag/tag.component.html
View File

@@ -1,13 +1,19 @@
<label for="nodeId"><b>Insert Node Id</b></label><br>
<input id="nodeId" type="text" size="48" [(ngModel)]="nodeId"><br>
<div class="adf-tag-example-area">
<alfresco-tag-node-actions-list [nodeId]="nodeId"></alfresco-tag-node-actions-list>
<md-card>
<alfresco-tag-node-actions-list [nodeId]="nodeId"></alfresco-tag-node-actions-list>
</md-card>
</div>
<div class="adf-tag-example-area">
<div class="adf-tag-example-title">List Tags Content Services</div>
<alfresco-tag-list></alfresco-tag-list>
<md-card>
<div class="adf-tag-example-title">List Tags Content Services</div>
<alfresco-tag-list></alfresco-tag-list>
</md-card>
</div>
<div class="adf-tag-example-area">
<div class="adf-tag-example-title">Tag list By Node ID</div>
<alfresco-tag-node-list [nodeId]="nodeId"></alfresco-tag-node-list>
<md-card>
<div class="adf-tag-example-title">Tag list By Node ID</div>
<alfresco-tag-node-list [nodeId]="nodeId"></alfresco-tag-node-list>
</md-card>
</div>

0
demo-shell-ng2/app/components/tag/tag.component.css → demo-shell-ng2/app/components/tag/tag.component.scss
View File

2
demo-shell-ng2/app/components/tag/tag.component.ts
View File

@@ -20,7 +20,7 @@ import { Component } from '@angular/core';
@Component({
selector: 'alfresco-tag-demo',
templateUrl: 'tag.component.html',
styleUrls: ['tag.component.css']
styleUrls: ['tag.component.scss']
})
export class TagComponent {

45
demo-shell-ng2/app/components/theme-picker/style-manager/style-manager.ts Normal file
View File

@@ -0,0 +1,45 @@
import {Injectable} from '@angular/core';
/**
* Class for managing stylesheets. Stylesheets are loaded into named slots so that they can be
* removed or changed later.
*/
@Injectable()
export class StyleManager {
/**
* Set the stylesheet with the specified key.
*/
setStyle(key: string, href: string) {
getLinkElementForKey(key).setAttribute('href', href);
}
/**
* Remove the stylesheet with the specified key.
*/
removeStyle(key: string) {
const existingLinkElement = getExistingLinkElementByKey(key);
if (existingLinkElement) {
document.head.removeChild(existingLinkElement);
}
}
}
function getLinkElementForKey(key: string) {
return getExistingLinkElementByKey(key) || createLinkElementWithKey(key);
}
function getExistingLinkElementByKey(key: string) {
return document.head.querySelector(`link[rel="stylesheet"].${getClassNameForKey(key)}`);
}
function createLinkElementWithKey(key: string) {
const linkEl = document.createElement('link');
linkEl.setAttribute('rel', 'stylesheet');
linkEl.classList.add(getClassNameForKey(key));
document.head.appendChild(linkEl);
return linkEl;
}
function getClassNameForKey(key: string) {
return `style-manager-${key}`;
}

26
demo-shell-ng2/app/components/theme-picker/theme-picker.css Normal file
View File

@@ -0,0 +1,26 @@
.docs-theme-picker-menu .md-menu-content {
padding: 8px;
}
.docs-theme-picker-menu [md-menu-item] {
flex: 0 0 auto;
padding: 0;
overflow: hidden;
}
.docs-theme-picker-menu .docs-theme-picker-primary {
width: 25px;
height: 25px;
}
.docs-theme-picker-menu .docs-theme-picker-accent {
position: absolute;
bottom: 6px;
width: 100%;
height: 6px;
}
.docs-theme-chosen-icon{
border-radius: 13px;
}

17
demo-shell-ng2/app/components/theme-picker/theme-picker.html Normal file
View File

@@ -0,0 +1,17 @@
<button md-icon-button [md-menu-trigger-for]="themeMenu" mdTooltip="Select a theme!">
<md-icon>format_color_fill</md-icon>
</button>
<md-menu class="docs-theme-picker-menu" #themeMenu="mdMenu" x-position="before">
<md-list-item *ngFor="let theme of themes" md-menu-item (click)="installTheme(theme)" >
<md-icon md-list-icon [mdTooltip]="theme.name" class="docs-theme-chosen-icon" [style.color]="theme.accent"
[style.background]="theme.primary"
*ngIf="currentTheme === theme">check_circle
</md-icon>
<md-icon md-list-icon [mdTooltip]="theme.name" class="docs-theme-chosen-icon" [style.color]="theme.accent"
[style.background]="theme.primary"
*ngIf="currentTheme !== theme">invert_colors
</md-icon>
{{theme.name}}
</md-list-item>
</md-menu>

131
demo-shell-ng2/app/components/theme-picker/theme-picker.ts Normal file
View File

@@ -0,0 +1,131 @@
import {CommonModule} from '@angular/common';
import {ChangeDetectionStrategy, Component, NgModule, ViewEncapsulation} from '@angular/core';
import {
MdButtonModule, MdGridListModule, MdIconModule, MdMenuModule,
MdTooltipModule
} from '@angular/material';
import {StyleManager} from './style-manager/style-manager';
import {DocsSiteTheme, ThemeStorage} from './theme-storage/theme-storage';
@Component({
selector: 'theme-picker',
templateUrl: 'theme-picker.html',
styleUrls: ['theme-picker.css'],
changeDetection: ChangeDetectionStrategy.OnPush,
host: {'aria-hidden': 'true'}
})
export class ThemePickerComponent {
currentTheme;
themes = [
{
primary: '#ff9800',
accent: '#3f51b5',
name: 'Developer Theme',
href: '',
isDefault: true
},
{
primary: '#00bcd4',
accent: '#ff9800',
name: 'ECM Cyan Orange',
href: 'adf-cyan-orange.css',
isDark: false
},
{
primary: '#00bcd4',
accent: '#3f51b5',
name: 'ECM Cyan Purple',
href: 'adf-cyan-purple.css',
isDark: false
},
{
primary: '#8bc34a',
accent: '#ff9800',
name: 'BPM Green Orange',
href: 'adf-green-orange.css',
isDark: false
},
{
primary: '#8bc34a',
accent: '#3f51b5',
name: 'BPM Green Purple',
href: 'adf-green-purple.css',
isDark: false
},
{
primary: '#3f51b5',
accent: '#ff4081',
name: 'Indigo Pink',
href: 'adf-indigo-pink.css',
isDark: false
},
{
primary: '#c2185b',
accent: '#b0bec5',
name: 'Pink Bluegrey Dark',
href: 'adf-pink-bluegrey.css',
isDark: false
},
{
primary: '#7b1fa2',
accent: '#69f0ae',
name: 'Purple Green Dark',
href: 'adf-purple-green.css',
isDark: false
},
{
primary: '#2196f3',
accent: '#ff9800',
name: 'ECM Blue Orange',
href: 'adf-blue-orange.css',
isDark: false
},
{
primary: '#2196f3',
accent: '#3f51b5',
name: 'ECM Blue Purple',
href: 'adf-blue-purple.css',
isDark: false
}
];
constructor(public styleManager: StyleManager,
private _themeStorage: ThemeStorage) {
}
installTheme(theme: DocsSiteTheme) {
if (theme.isDefault === true) {
this.styleManager.setStyle('theme', ``);
} else {
this.currentTheme = this._getCurrentThemeFromHref(theme.href);
this.styleManager.setStyle('theme', `prebuilt-themes/${theme.href}`);
if (this.currentTheme) {
this._themeStorage.storeTheme(this.currentTheme);
}
}
}
private _getCurrentThemeFromHref(href: string): DocsSiteTheme {
return this.themes.find(theme => theme.href === href);
}
}
@NgModule({
imports: [
MdButtonModule,
MdIconModule,
MdMenuModule,
MdGridListModule,
MdTooltipModule,
CommonModule
],
exports: [ThemePickerComponent],
declarations: [ThemePickerComponent],
providers: [StyleManager, ThemeStorage]
})
export class ThemePickerModule {
}

39
demo-shell-ng2/app/components/theme-picker/theme-storage/theme-storage.ts Normal file
View File

@@ -0,0 +1,39 @@
import {EventEmitter, Injectable} from '@angular/core';
export interface DocsSiteTheme {
href: string;
name: string;
accent: string;
primary: string;
isDark?: boolean;
isDefault?: boolean;
}
@Injectable()
export class ThemeStorage {
static storageKey = 'docs-theme-storage-current';
public onThemeUpdate: EventEmitter<DocsSiteTheme> = new EventEmitter<DocsSiteTheme>();
public storeTheme(theme: DocsSiteTheme) {
try {
window.localStorage[ThemeStorage.storageKey] = JSON.stringify(theme);
} catch (e) { }
this.onThemeUpdate.emit(theme);
}
public getStoredTheme(): DocsSiteTheme {
try {
return JSON.parse(window.localStorage[ThemeStorage.storageKey] || null);
} catch (e) {
return null;
}
}
public clearStorage() {
try {
window.localStorage.removeItem(ThemeStorage.storageKey);
} catch (e) { }
}
}