mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2026-09-09 18:03:21 +00:00
[ADF-1434] Theming ADF component (#2228)
* 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
GitHub
@@ -1,7 +0,0 @@
|
||||
.user-profile {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.app-menu--spacer {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
@@ -15,6 +15,7 @@
|
||||
<a md-button data-automation-id="activiti" href="" routerLink="/activiti">Process Services</a>
|
||||
<a md-button data-automation-id="login" href="" routerLink="/login">Login</a>
|
||||
|
||||
<theme-picker></theme-picker>
|
||||
<button md-icon-button [mdMenuTriggerFor]="langMenu">
|
||||
<md-icon>language</md-icon>
|
||||
</button>
|
||||
|
||||
@@ -0,0 +1,25 @@
|
||||
.user-profile {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.app-menu--spacer {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.p-10 {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.m-10 {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
._dialog_overlay {
|
||||
position: static !important;
|
||||
}
|
||||
|
||||
.md-simple-snackbar-action {
|
||||
border: 0px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { Component } from '@angular/core';
|
||||
import { Component, ViewEncapsulation } from '@angular/core';
|
||||
import { Router } from '@angular/router';
|
||||
import {
|
||||
AlfrescoAuthenticationService,
|
||||
@@ -30,7 +30,8 @@ declare var document: any;
|
||||
@Component({
|
||||
selector: 'adf-app',
|
||||
templateUrl: './app.component.html',
|
||||
styleUrls: ['./app.component.css']
|
||||
styleUrls: ['./app.component.scss', './theme.scss'],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class AppComponent {
|
||||
searchTerm: string = '';
|
||||
|
||||
@@ -40,6 +40,9 @@ import { ChartsModule } from 'ng2-charts';
|
||||
import { AppComponent } from './app.component';
|
||||
import { routing } from './app.routes';
|
||||
import { CustomEditorsModule } from './components/activiti/custom-editor/custom-editor.component';
|
||||
import { FormListDemoComponent } from './components/form/form-list-demo.component';
|
||||
import { StyleManager } from './components/theme-picker/style-manager/style-manager';
|
||||
import { ThemePickerModule } from './components/theme-picker/theme-picker';
|
||||
import { MaterialModule } from './material.module';
|
||||
import { DebugAppConfigService } from './services/debug-app-config.service';
|
||||
|
||||
@@ -48,7 +51,6 @@ import { RecentComponent } from './components/files/recent.component';
|
||||
import { SharedLinksComponent } from './components/files/shared-links.component';
|
||||
import { SitesComponent } from './components/files/sites.component';
|
||||
import { TrashcanComponent } from './components/files/trashcan.component';
|
||||
import { FormListDemoComponent } from './components/form/form-list-demo.component';
|
||||
|
||||
import {
|
||||
AboutComponent,
|
||||
@@ -102,7 +104,8 @@ if (process.env.ENV === 'production') {
|
||||
DiagramsModule.forRoot(),
|
||||
CustomEditorsModule,
|
||||
Editor3DModule.forRoot(),
|
||||
ChartsModule
|
||||
ChartsModule,
|
||||
ThemePickerModule
|
||||
],
|
||||
declarations: [
|
||||
AppComponent,
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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();
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -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();
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -3,6 +3,8 @@
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
z-index: 1;
|
||||
background-color: rgb(68,138,255);
|
||||
color: rgb(255,255,255);
|
||||
}
|
||||
|
||||
.settings {
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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)) {
|
||||
|
||||
@@ -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>
|
||||
@@ -0,0 +1,3 @@
|
||||
.adf-social-title{
|
||||
|
||||
}
|
||||
@@ -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 {
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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 {
|
||||
|
||||
|
||||
@@ -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}`;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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>
|
||||
@@ -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 {
|
||||
}
|
||||
@@ -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) { }
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
@import '~@angular/material/theming';
|
||||
@import 'colors';
|
||||
@import 'all-theme';
|
||||
|
||||
@include mat-core();
|
||||
|
||||
$primary: mat-palette($alfresco-accent-orange);
|
||||
$accent: mat-palette($alfresco-accent-purple);
|
||||
$warn: mat-palette($alfresco-warn);
|
||||
$theme: mat-light-theme($primary, $accent, $warn);
|
||||
|
||||
@include angular-material-theme($theme);
|
||||
@include alfresco-material-theme($theme);
|
||||
@@ -33,9 +33,6 @@ import 'ng2-alfresco-userinfo';
|
||||
import 'ng2-alfresco-viewer';
|
||||
import 'ng2-alfresco-webscript';
|
||||
|
||||
// Load the Angular Material 2 stylesheet
|
||||
import '@angular/material/prebuilt-themes/indigo-pink.css';
|
||||
|
||||
// Polyfill(s) for dialogs
|
||||
require('script-loader!dialog-polyfill/dialog-polyfill');
|
||||
import 'dialog-polyfill/dialog-polyfill.css';
|
||||
@@ -45,7 +42,6 @@ import 'material-design-icons/iconfont/material-icons.css';
|
||||
import 'material-design-lite/dist/material.orange-blue.min.css';
|
||||
import 'material-design-lite/material.js';
|
||||
|
||||
import '../public/css/app.css';
|
||||
import '../public/css/muli-font.css';
|
||||
|
||||
import 'ng2-activiti-form/stencils/runtime.adf';
|
||||
|
||||
@@ -65,7 +65,6 @@ module.exports = {
|
||||
},
|
||||
{
|
||||
test: /\.scss$/,
|
||||
include: [helpers.root('app'), helpers.root('../ng2-components')],
|
||||
use: [{
|
||||
loader: "to-string-loader"
|
||||
}, {
|
||||
@@ -75,8 +74,7 @@ module.exports = {
|
||||
options: {
|
||||
includePaths: [path.resolve(__dirname, '../../ng2-components/ng2-alfresco-core/styles')]
|
||||
}
|
||||
}],
|
||||
exclude: [/node_modules/, /bundles/, /dist/, /demo/]
|
||||
}]
|
||||
},
|
||||
{
|
||||
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
|
||||
|
||||
@@ -103,6 +103,13 @@ module.exports = webpackMerge(commonConfig, {
|
||||
to: `assets/${lib}/i18n/`
|
||||
}
|
||||
})
|
||||
]),
|
||||
new CopyWebpackPlugin([
|
||||
{
|
||||
context: `../ng2-components/ng2-alfresco-core/prebuilt-themes/`,
|
||||
from: '**/*.css',
|
||||
to: 'prebuilt-themes'
|
||||
}
|
||||
])
|
||||
]
|
||||
});
|
||||
|
||||
@@ -22,6 +22,10 @@
|
||||
<![endif]-->
|
||||
|
||||
<style>
|
||||
body, html {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.loader-container {
|
||||
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
|
||||
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
|
||||
@@ -49,7 +53,7 @@
|
||||
</style>
|
||||
</head>
|
||||
<!-- 3. Display the application -->
|
||||
<body>
|
||||
<body class="adf-background-color">
|
||||
<adf-app>
|
||||
<div id="loader-container" class="loader-container">
|
||||
<div class="loader-item">
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -1,90 +0,0 @@
|
||||
/* Utils */
|
||||
body, html {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.p-10 {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.m-10 {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.loader-container {
|
||||
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
|
||||
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
|
||||
display: -webkit-flex; /* NEW - Chrome */
|
||||
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
|
||||
-webkit-box-flex-direction: row;
|
||||
-moz-box-flex-direction: row;
|
||||
-webkit-flex-direction: row;
|
||||
flex-direction: row;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.loader-item {
|
||||
margin: auto;
|
||||
max-height: 100px;
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.loader-text {
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
._dialog_overlay {
|
||||
position: static !important;
|
||||
}
|
||||
|
||||
.main_header_adf .mdl-layout__drawer-button {
|
||||
right: 0 !important;
|
||||
left: initial !important;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
.mdl-layout__header {
|
||||
color: rgb(255, 255, 255);
|
||||
background-color: rgb(31, 188, 210);
|
||||
}
|
||||
|
||||
.mdl-layout__header .material-icons {
|
||||
color: rgb(255, 255, 255);
|
||||
}
|
||||
|
||||
.mdl-layout__header-row .mdl-navigation__link {
|
||||
color: rgb(255, 255, 255);
|
||||
}
|
||||
|
||||
.md-simple-snackbar-action {
|
||||
border: 0px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.adf-flag-icon-gb {
|
||||
background-image: url(./flags/gb.svg);
|
||||
}
|
||||
|
||||
.adf-flag-icon-it {
|
||||
background-image: url(./flags/it.svg);
|
||||
}
|
||||
|
||||
.adf-flag-icon-ru {
|
||||
background-image: url(./flags/ru.svg);
|
||||
}
|
||||
|
||||
.adf-flag-icon:before {
|
||||
content: "\00a0";
|
||||
}
|
||||
|
||||
.adf-flag-icon {
|
||||
background-size: contain;
|
||||
background-position: 50%;
|
||||
background-repeat: no-repeat;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 1.33333333em;
|
||||
line-height: 1em;
|
||||
}
|
||||
@@ -1,15 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="480" width="640">
|
||||
<defs>
|
||||
<clipPath id="a">
|
||||
<path fill-opacity=".67" d="M-85.333 0h682.67v512h-682.67z"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
<g clip-path="url(#a)" transform="translate(80) scale(.94)">
|
||||
<g stroke-width="1pt">
|
||||
<path fill="#006" d="M-256 0H768.02v512.01H-256z"/>
|
||||
<path d="M-256 0v57.244l909.535 454.768H768.02V454.77L-141.515 0H-256zM768.02 0v57.243L-141.515 512.01H-256v-57.243L653.535 0H768.02z" fill="#fff"/>
|
||||
<path d="M170.675 0v512.01h170.67V0h-170.67zM-256 170.67v170.67H768.02V170.67H-256z" fill="#fff"/>
|
||||
<path d="M-256 204.804v102.402H768.02V204.804H-256zM204.81 0v512.01h102.4V0h-102.4zM-256 512.01L85.34 341.34h76.324l-341.34 170.67H-256zM-256 0L85.34 170.67H9.016L-256 38.164V0zm606.356 170.67L691.696 0h76.324L426.68 170.67h-76.324zM768.02 512.01L426.68 341.34h76.324L768.02 473.848v38.162z" fill="#c00"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 934 B |
@@ -1,7 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="480" width="640" version="1">
|
||||
<g fill-rule="evenodd" stroke-width="1pt">
|
||||
<path fill="#fff" d="M0 0h640v479.997H0z"/>
|
||||
<path fill="#005700" d="M0 0h213.331v479.997H0z"/>
|
||||
<path fill="#fc0000" d="M426.663 0h213.331v479.997H426.663z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 307 B |
@@ -1,7 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="480" width="640" version="1">
|
||||
<g fill-rule="evenodd" stroke-width="1pt">
|
||||
<path fill="#fff" d="M0 0h640v480H0z"/>
|
||||
<path fill="#01017e" d="M0 160.003h640V480H0z"/>
|
||||
<path fill="#fe0101" d="M0 319.997h640V480H0z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 287 B |
File diff suppressed because one or more lines are too long
@@ -1,6 +1,5 @@
|
||||
{
|
||||
"title": "Welcome",
|
||||
|
||||
"DOCUMENT_LIST": {
|
||||
"COLUMNS": {
|
||||
"DISPLAY_NAME": "Display name",
|
||||
@@ -23,12 +22,26 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"ANALYTICS_REPORT":{
|
||||
"NO_REPORT_MESSAGE":"No report selected. Choose a report from the list"
|
||||
"ANALYTICS_REPORT": {
|
||||
"NO_REPORT_MESSAGE": "No report selected. Choose a report from the list"
|
||||
},
|
||||
"PS-TAB":{
|
||||
"TASKS-TAB":"Tasks",
|
||||
"PROCESSES-TAB":"Process",
|
||||
"REPORTS-TAB":"Reports"
|
||||
"PS-TAB": {
|
||||
"TASKS-TAB": "Tasks",
|
||||
"PROCESSES-TAB": "Process",
|
||||
"REPORTS-TAB": "Reports",
|
||||
"START-TASK": "Start task",
|
||||
"START-PROCESS": "Start process",
|
||||
"AUDIT-LOG": "Process Audit log"
|
||||
},
|
||||
"SETTINGS": {
|
||||
"TITLE": "Settings",
|
||||
"CS-HOST": "Content Services host URL configuration",
|
||||
"BP-HOST": "Process Services host URL configuration",
|
||||
"BACK": "Back",
|
||||
"APPLY": "APPLY"
|
||||
},
|
||||
"FORM-LIST":{
|
||||
"STORE": "Store",
|
||||
"RESTORE": "Restore"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,83 @@
|
||||
# Theming your Alfresco ADF app
|
||||
|
||||
### Using a pre-built theme
|
||||
Angular Material comes prepackaged with several pre-built theme css files. These theme files also
|
||||
include all of the styles for core (styles common to all components), so you only have to include a
|
||||
single css file for Angular Material in your app.
|
||||
|
||||
You can include a theme file directly into your application from
|
||||
`ng2-alfresco-core/prebuilt-themes`
|
||||
|
||||
Available pre-built themes:
|
||||
* `adf-blue-orange.css`
|
||||
* `adf-blue-purple.css`
|
||||
* `adf-cyan-orange.css`
|
||||
* `adf-cyan-purple.css`
|
||||
* `adf-green-orange.css`
|
||||
* `adf-green-purple.css`
|
||||
* `adf-indigo-pink.css`
|
||||
* `adf-pink-bluegrey.css`
|
||||
* `adf-purple-green.css`
|
||||
|
||||
If you're using Angular CLI you can include one of the prebuilt theme in yours `styles.css` file:
|
||||
```css
|
||||
@import 'ng2-alfresco-core/prebuilt-themes/adf-blue-orange.css';
|
||||
```
|
||||
Or you can add it directly in your index.html
|
||||
|
||||
```html
|
||||
<link href="node_modules/ng2-alfresco-core/prebuilt-themes/adf-blue-orange.css" rel="stylesheet">
|
||||
```
|
||||
|
||||
### Defining a custom theme
|
||||
|
||||
When you want more customization than a pre-built theme offers, you can create your own theme file.
|
||||
|
||||
```scss
|
||||
@import '~@angular/material/theming';
|
||||
@import 'colors';
|
||||
@import 'all-theme';
|
||||
|
||||
@include mat-core();
|
||||
|
||||
$primary: mat-palette($alfresco-accent-orange);
|
||||
$accent: mat-palette($alfresco-accent-purple);
|
||||
$warn: mat-palette($alfresco-warn);
|
||||
$theme: mat-light-theme($primary, $accent, $warn);
|
||||
//or $theme: mat-dark-theme($primary, $accent, $warn); for dark theme
|
||||
|
||||
@include angular-material-theme($theme);
|
||||
@include alfresco-material-theme($theme);
|
||||
```
|
||||
|
||||
Notes: if you are using the Generator or the demo shell you need only to change the`/app/theme.scss` with your set of colors
|
||||
|
||||
#### Multiple themes
|
||||
You can create multiple themes for your application:
|
||||
|
||||
##### Example of defining multiple themes:
|
||||
|
||||
```scss
|
||||
@import '~@angular/material/theming';
|
||||
@import 'colors';
|
||||
@import 'all-theme';
|
||||
|
||||
@include mat-core();
|
||||
|
||||
$primary: mat-palette($alfresco-accent-orange);
|
||||
$accent: mat-palette($alfresco-accent-purple);
|
||||
$warn: mat-palette($alfresco-warn);
|
||||
|
||||
$theme: mat-light-theme($primary, $accent, $warn);
|
||||
$dark-theme: mat-dark-theme($primary, $accent, $warn);
|
||||
|
||||
@include angular-material-theme($theme);
|
||||
@include alfresco-material-theme($theme);
|
||||
|
||||
.adf-dark-theme {
|
||||
@include angular-material-theme($dark-theme);
|
||||
@include alfresco-material-theme($dark-theme);
|
||||
}
|
||||
```
|
||||
Any component with the `add-dark-theme` class will use the dark theme, while other components will fall back to the default.
|
||||
|
||||
@@ -4,6 +4,7 @@
|
||||
|
||||
<!-- toc -->
|
||||
|
||||
- [Guide](#guide)
|
||||
- [Core](#core)
|
||||
* [Components](#components)
|
||||
* [Directives](#directives)
|
||||
@@ -17,6 +18,10 @@
|
||||
|
||||
<!-- markdown-toc end -->
|
||||
|
||||
## Guide
|
||||
|
||||
- [Theming](../alfresco-ng2-components/docs/theming.md)
|
||||
|
||||
## Core
|
||||
|
||||
### Components
|
||||
|
||||
@@ -0,0 +1,40 @@
|
||||
const ExtractTextPlugin = require("extract-text-webpack-plugin");
|
||||
const path = require('path');
|
||||
|
||||
const extractScss = new ExtractTextPlugin('./ng2-alfresco-core/prebuilt-themes/[name].css');
|
||||
|
||||
module.exports = {
|
||||
|
||||
entry: {
|
||||
'adf-blue-orange': './ng2-alfresco-core/styles/prebuilt/adf-blue-orange.scss',
|
||||
'adf-blue-purple': './ng2-alfresco-core/styles/prebuilt/adf-blue-purple.scss',
|
||||
'adf-cyan-orange': './ng2-alfresco-core/styles/prebuilt/adf-cyan-orange.scss',
|
||||
'adf-cyan-purple': './ng2-alfresco-core/styles/prebuilt/adf-cyan-purple.scss',
|
||||
'adf-green-purple': './ng2-alfresco-core/styles/prebuilt/adf-green-purple.scss',
|
||||
'adf-green-orange': './ng2-alfresco-core/styles/prebuilt/adf-green-orange.scss',
|
||||
'adf-pink-bluegrey': './ng2-alfresco-core/styles/prebuilt/adf-pink-bluegrey.scss',
|
||||
'adf-indigo-pink': './ng2-alfresco-core/styles/prebuilt/adf-indigo-pink.scss',
|
||||
'adf-purple-green': './ng2-alfresco-core/styles/prebuilt/adf-purple-green.scss'
|
||||
},
|
||||
|
||||
output: {
|
||||
filename: './dist/[name].js'
|
||||
},
|
||||
|
||||
module: {
|
||||
rules: [{
|
||||
test: /\.scss$/,
|
||||
use: extractScss.extract([{
|
||||
loader: "raw-loader"
|
||||
}, {
|
||||
loader: "sass-loader",
|
||||
options: {
|
||||
includePaths: [path.resolve(__dirname, '../../ng2-components/ng2-alfresco-core/styles')]
|
||||
}
|
||||
}])
|
||||
}]
|
||||
},
|
||||
plugins: [
|
||||
extractScss
|
||||
]
|
||||
};
|
||||
@@ -25,9 +25,9 @@ import { AnalyticsReportHeatMapComponent } from './src/components/analytics-repo
|
||||
import { AnalyticsReportListComponent } from './src/components/analytics-report-list.component';
|
||||
import { AnalyticsReportParametersComponent } from './src/components/analytics-report-parameters.component';
|
||||
import { AnalyticsComponent } from './src/components/analytics.component';
|
||||
import { AnalyticsService } from './src/services/analytics.service';
|
||||
import { WIDGET_DIRECTIVES } from './src/components/widgets/index';
|
||||
import { MaterialModule } from './src/material.module';
|
||||
import { AnalyticsService } from './src/services/analytics.service';
|
||||
|
||||
export * from './src/components/analytics.component';
|
||||
export * from './src/components/analytics-generator.component';
|
||||
|
||||
-52
@@ -1,52 +0,0 @@
|
||||
.mdl-list__item {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.activiti-filters__entry {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.activiti-filters__entry-icon {
|
||||
margin-right: 12px !important;
|
||||
}
|
||||
|
||||
.activiti-filters__entry.active {
|
||||
color: rgb(68,138,255);
|
||||
}
|
||||
|
||||
.activiti-filters__entry.active .activiti-filters__entry-icon {
|
||||
color: rgb(68,138,255);
|
||||
}
|
||||
|
||||
.application-title {
|
||||
color: white;
|
||||
z-index: 7;
|
||||
}
|
||||
|
||||
.logo {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 35px;
|
||||
z-index: 6;
|
||||
}
|
||||
.logo i{
|
||||
font-size: 70px;
|
||||
}
|
||||
|
||||
.theme-1 {
|
||||
background-color: #269abc;
|
||||
}
|
||||
|
||||
.theme-1 .logo i {
|
||||
color: #168aac;
|
||||
}
|
||||
.theme-1 .mdl-card__actions i {
|
||||
color: #168aac;
|
||||
}
|
||||
.theme-1 .mdl-card__actions i:hover {
|
||||
color: #b7dfea;
|
||||
}
|
||||
|
||||
.selectedIcon{
|
||||
color: #e9f1f3!important;
|
||||
}
|
||||
+1
-1
@@ -1,4 +1,4 @@
|
||||
<div class="menu-container">
|
||||
<div class="adf-analytics-report-list menu-container">
|
||||
<ul class='mdl-list' *ngIf="isList()">
|
||||
<li class="mdl-list__item activiti-filters__entry" (click)="selectReport(report)" *ngFor="let report of reports; let idx = index"
|
||||
[class.active]="currentReport === report">
|
||||
|
||||
+62
@@ -0,0 +1,62 @@
|
||||
@mixin mat-analytics-report-list-theme($theme) {
|
||||
$primary: map-get($theme, primary);
|
||||
|
||||
.adf-analytics-report-list {
|
||||
|
||||
.mdl-list__item {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.activiti-filters__entry {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.activiti-filters__entry-icon {
|
||||
margin-right: 12px !important;
|
||||
}
|
||||
|
||||
.activiti-filters__entry.active {
|
||||
color: mat-color($primary);
|
||||
}
|
||||
|
||||
.activiti-filters__entry.active .activiti-filters__entry-icon {
|
||||
color: mat-color($primary);
|
||||
}
|
||||
|
||||
.application-title {
|
||||
z-index: 7;
|
||||
}
|
||||
|
||||
.logo {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 35px;
|
||||
z-index: 6;
|
||||
}
|
||||
|
||||
.logo i {
|
||||
font-size: 70px;
|
||||
}
|
||||
|
||||
.theme-1 {
|
||||
background-color: #269abc;
|
||||
}
|
||||
|
||||
.theme-1 .logo i {
|
||||
color: #168aac;
|
||||
}
|
||||
|
||||
.theme-1 .mdl-card__actions i {
|
||||
color: #168aac;
|
||||
}
|
||||
|
||||
.theme-1 .mdl-card__actions i:hover {
|
||||
color: #b7dfea;
|
||||
}
|
||||
|
||||
.selectedIcon {
|
||||
color: #e9f1f3 !important;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
+1
-1
@@ -23,7 +23,7 @@ import { AnalyticsService } from '../services/analytics.service';
|
||||
@Component({
|
||||
selector: ' adf-analytics-report-list, analytics-report-list',
|
||||
templateUrl: './analytics-report-list.component.html',
|
||||
styleUrls: ['./analytics-report-list.component.css'],
|
||||
styleUrls: ['./analytics-report-list.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class AnalyticsReportListComponent implements OnInit {
|
||||
|
||||
+71
-70
@@ -1,75 +1,76 @@
|
||||
@import 'theming';
|
||||
@mixin mat-diagram-tooltip-theme($theme) {
|
||||
|
||||
.#{$ADF} {
|
||||
&-diagram-tooltip {
|
||||
transform: scale(0);
|
||||
transform-origin: top center;
|
||||
z-index: 999;
|
||||
display: inline-block;
|
||||
font-weight: 500;
|
||||
line-height: 14px;
|
||||
font-size: 14px;
|
||||
max-width: 300px;
|
||||
position: fixed;
|
||||
top: -500px;
|
||||
left: -500px;
|
||||
text-align: left;
|
||||
will-change: unset;
|
||||
border: 1px solid #c5c5c5;
|
||||
word-wrap: break-word;
|
||||
.adf {
|
||||
&-diagram-tooltip {
|
||||
transform: scale(0);
|
||||
transform-origin: top center;
|
||||
z-index: 999;
|
||||
display: inline-block;
|
||||
font-weight: 500;
|
||||
line-height: 14px;
|
||||
font-size: 14px;
|
||||
max-width: 300px;
|
||||
position: fixed;
|
||||
top: -500px;
|
||||
left: -500px;
|
||||
text-align: left;
|
||||
will-change: unset;
|
||||
border: 1px solid #c5c5c5;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
&-diagram-tooltip.is-active {
|
||||
animation: tooltipAnimation 200ms cubic-bezier(0, 0, 0.2, 1) forwards;
|
||||
}
|
||||
|
||||
&-diagram-tooltip-header {
|
||||
background-color: rgba(43, 65, 79, 0.95);
|
||||
color: #FFF;
|
||||
padding: 8px;
|
||||
font-weight: bold;
|
||||
min-width: 200px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
&-diagram-tooltip-body {
|
||||
color: #4a4a4a;
|
||||
background-color: rgba(255, 255, 255, 0.95);
|
||||
}
|
||||
|
||||
&-diagram-tooltip-body > div {
|
||||
padding: 4px 8px;
|
||||
}
|
||||
|
||||
&-diagram-tooltip-body > div:first-child {
|
||||
padding-top: 8px;
|
||||
}
|
||||
|
||||
&-diagram-tooltip-body > div:last-child {
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
&-diagram-propertyName {
|
||||
font-weight: bold;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
&-diagram-propertyValue {
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
|
||||
&-diagram-tooltip.is-active {
|
||||
animation: tooltipAnimation 200ms cubic-bezier(0, 0, 0.2, 1) forwards;
|
||||
}
|
||||
|
||||
&-diagram-tooltip-header {
|
||||
background-color: rgba(43, 65, 79, 0.95);
|
||||
color: #FFF;
|
||||
padding: 8px;
|
||||
font-weight: bold;
|
||||
min-width: 200px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
&-diagram-tooltip-body {
|
||||
color: #4a4a4a;
|
||||
background-color: rgba(255, 255, 255, 0.95);
|
||||
}
|
||||
|
||||
&-diagram-tooltip-body > div {
|
||||
padding: 4px 8px;
|
||||
}
|
||||
|
||||
&-diagram-tooltip-body > div:first-child {
|
||||
padding-top: 8px;
|
||||
}
|
||||
|
||||
&-diagram-tooltip-body > div:last-child {
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
&-diagram-propertyName {
|
||||
font-weight: bold;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
&-diagram-propertyValue {
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes tooltipAnimation {
|
||||
0% {
|
||||
transform: scale(0);
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
transform: scale(0.99);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
@keyframes tooltipAnimation {
|
||||
0% {
|
||||
transform: scale(0);
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
transform: scale(0.99);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -12,6 +12,8 @@
|
||||
- [Form Component](#form-component)
|
||||
* [Properties](#properties)
|
||||
+ [Form Field Validators](#form-field-validators)
|
||||
- [Custom set of validators](#custom-set-of-validators)
|
||||
- [Custom validator example](#custom-validator-example)
|
||||
* [Advanced properties](#advanced-properties)
|
||||
* [Events](#events)
|
||||
* [Custom empty form template](#custom-empty-form-template)
|
||||
|
||||
+79
-77
@@ -1,84 +1,86 @@
|
||||
@import 'theming';
|
||||
|
||||
.adf {
|
||||
&-field-list {
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@mixin mat-container-widget-theme($theme) {
|
||||
$primary: map-get($theme, primary);
|
||||
$accent: map-get($theme, accent);
|
||||
$warn: map-get($theme, warn);
|
||||
|
||||
.adf {
|
||||
&-field-list {
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.container-widget__header-text {
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.87);
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
cursor: default;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
/* Chrome/Safari/Opera */
|
||||
-moz-user-select: none;
|
||||
/* Firefox */
|
||||
-ms-user-select: none;
|
||||
/* IE/Edge */
|
||||
-webkit-touch-callout: none;
|
||||
/* iOS Safari */
|
||||
&.collapsible {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.container-widget__header-text {
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.87);
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
cursor: default;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
/* Chrome/Safari/Opera */
|
||||
-moz-user-select: none;
|
||||
/* Firefox */
|
||||
-ms-user-select: none;
|
||||
/* IE/Edge */
|
||||
-webkit-touch-callout: none;
|
||||
/* iOS Safari */
|
||||
&.collapsible {
|
||||
cursor: pointer;
|
||||
container-widget {
|
||||
.grid-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-left: -1%;
|
||||
margin-right: -1%;
|
||||
}
|
||||
|
||||
.grid-list-item {
|
||||
flex-grow: 1;
|
||||
box-sizing: border-box;
|
||||
padding-left: 1%;
|
||||
padding-right: 1%;
|
||||
}
|
||||
|
||||
md-input-container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mat-input-placeholder-wrapper {
|
||||
top: 0 !important;
|
||||
}
|
||||
|
||||
.mat-input-placeholder {
|
||||
top: 2.5em !important;
|
||||
}
|
||||
|
||||
.mat-focused {
|
||||
|
||||
.mat-input-placeholder-wrapper {
|
||||
display: none;
|
||||
}
|
||||
|
||||
label {
|
||||
transform: scaleX(1);
|
||||
transition: transform 150ms linear,
|
||||
background-color $swift-ease-in-duration $swift-ease-in-timing-function;
|
||||
color: mat-color($primary);
|
||||
}
|
||||
|
||||
.mat-input-prefix {
|
||||
color: mat-color($primary);
|
||||
}
|
||||
}
|
||||
|
||||
.mat-grid-tile {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
container-widget{
|
||||
.grid-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-left: -1%;
|
||||
margin-right: -1%;
|
||||
}
|
||||
|
||||
.grid-list-item {
|
||||
flex-grow: 1;
|
||||
box-sizing: border-box;
|
||||
padding-left: 1%;
|
||||
padding-right: 1%;
|
||||
}
|
||||
|
||||
md-input-container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mat-input-placeholder-wrapper{
|
||||
top:0 !important;
|
||||
}
|
||||
|
||||
.mat-input-placeholder{
|
||||
top: 2.5em !important;
|
||||
}
|
||||
|
||||
.mat-focused {
|
||||
|
||||
.mat-input-placeholder-wrapper{
|
||||
display: none;
|
||||
}
|
||||
|
||||
label {
|
||||
transform: scaleX(1);
|
||||
transition: transform 150ms linear,
|
||||
background-color $swift-ease-in-duration $swift-ease-in-timing-function;
|
||||
color: mat-color($primary);
|
||||
}
|
||||
|
||||
.mat-input-prefix {
|
||||
color: mat-color($primary);
|
||||
}
|
||||
}
|
||||
|
||||
.mat-grid-tile {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
+140
-140
@@ -1,162 +1,162 @@
|
||||
@import 'theming';
|
||||
@import '../form';
|
||||
@import 'mixins';
|
||||
|
||||
$dynamic-table-font-size: 14px !default;
|
||||
$dynamic-table-header-font-size: 12px !default;
|
||||
$dynamic-table-header-sort-icon-size: 16px !default;
|
||||
$dynamic-table-header-color: $alfresco-secondary-text-color !default;
|
||||
$dynamic-table-header-sorted-color: $alfresco-primary-text-color !default;
|
||||
$dynamic-table-header-sorted-icon-hover-color: $alfresco-disabled-text-color !default;
|
||||
$dynamic-table-divider-color: $alfresco-divider-color !default;
|
||||
$dynamic-table-hover-color: #eeeeee !default;
|
||||
$dynamic-table-selection-color: #e0f7fa !default;
|
||||
$dynamic-table-dividers: 1px solid $dynamic-table-divider-color !default;
|
||||
$dynamic-table-row-height: 56px !default;
|
||||
$dynamic-table-column-spacing: 36px !default;
|
||||
$dynamic-table-column-padding: $dynamic-table-column-spacing / 2;
|
||||
$dynamic-table-card-padding: 24px !default;
|
||||
$dynamic-table-cell-top: $dynamic-table-card-padding / 2;
|
||||
$dynamic-table-drag-border: 1px dashed rgb(68,138,255);
|
||||
@mixin mat-dynamic-table-theme($theme) {
|
||||
$foreground: map-get($theme, foreground);
|
||||
$dynamic-table-font-size: 14px !default;
|
||||
$dynamic-table-header-font-size: 12px !default;
|
||||
$dynamic-table-header-sort-icon-size: 16px !default;
|
||||
$dynamic-table-header-color: mat-color($primary, default-contrast) !default;
|
||||
$dynamic-table-header-sorted-color: mat-color($foreground, text) !default;
|
||||
$dynamic-table-header-sorted-icon-hover-color: mat-color($foreground, disabled-text) !default;
|
||||
$dynamic-table-divider-color: mat-color($foreground, text, .07) !default;
|
||||
$dynamic-table-hover-color: #eeeeee !default;
|
||||
$dynamic-table-selection-color: #e0f7fa !default;
|
||||
$dynamic-table-dividers: 1px solid $dynamic-table-divider-color !default;
|
||||
$dynamic-table-row-height: 56px !default;
|
||||
$dynamic-table-column-spacing: 36px !default;
|
||||
$dynamic-table-column-padding: $dynamic-table-column-spacing / 2;
|
||||
$dynamic-table-card-padding: 24px !default;
|
||||
$dynamic-table-cell-top: $dynamic-table-card-padding / 2;
|
||||
$dynamic-table-drag-border: 1px dashed rgb(68, 138, 255);
|
||||
|
||||
.adf {
|
||||
|
||||
.adf {
|
||||
|
||||
&-dynamic-table {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
border: $dynamic-table-dividers;
|
||||
white-space: nowrap;
|
||||
font-size: $dynamic-table-font-size;
|
||||
background-color: unquote("rgb(#{$alfresco-white})");
|
||||
|
||||
/* Firefox fixes */
|
||||
border-collapse: unset;
|
||||
border-spacing: 0;
|
||||
|
||||
thead {
|
||||
padding-bottom: 3px;
|
||||
}
|
||||
|
||||
tbody {
|
||||
tr {
|
||||
&-dynamic-table {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
height: $dynamic-table-row-height;
|
||||
@include material-animation-default(0.28s);
|
||||
transition-property: background-color;
|
||||
border: $dynamic-table-dividers;
|
||||
white-space: nowrap;
|
||||
font-size: $dynamic-table-font-size;
|
||||
|
||||
&:hover {
|
||||
background-color: $dynamic-table-hover-color;
|
||||
/* Firefox fixes */
|
||||
border-collapse: unset;
|
||||
border-spacing: 0;
|
||||
|
||||
thead {
|
||||
padding-bottom: 3px;
|
||||
}
|
||||
|
||||
&.is-selected, &.is-selected:hover {
|
||||
background-color: $dynamic-table-selection-color;
|
||||
}
|
||||
tbody {
|
||||
tr {
|
||||
position: relative;
|
||||
height: $dynamic-table-row-height;
|
||||
@include material-animation-default(0.28s);
|
||||
transition-property: background-color;
|
||||
|
||||
&:focus {
|
||||
outline-offset: -1px;
|
||||
outline-width: 1px;
|
||||
outline-color: rgb(68,138,255);
|
||||
outline-style: solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background-color: $dynamic-table-hover-color;
|
||||
}
|
||||
|
||||
td, th {
|
||||
padding: 0 $dynamic-table-column-padding 12px $dynamic-table-column-padding;
|
||||
text-align: center;
|
||||
&.is-selected, &.is-selected:hover {
|
||||
background-color: $dynamic-table-selection-color;
|
||||
}
|
||||
|
||||
&:first-of-type {
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
padding-right: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
color: $alfresco-secondary-text-color;
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
height: $dynamic-table-row-height;
|
||||
border-top: $dynamic-table-dividers;
|
||||
border-bottom: $dynamic-table-dividers;
|
||||
padding-top: $dynamic-table-cell-top;
|
||||
box-sizing: border-box;
|
||||
|
||||
@include no-select;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
th {
|
||||
@include no-select;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
vertical-align: bottom;
|
||||
text-overflow: ellipsis;
|
||||
font-weight: bold;
|
||||
line-height: 24px;
|
||||
letter-spacing: 0;
|
||||
height: $dynamic-table-row-height;
|
||||
font-size: $dynamic-table-header-font-size;
|
||||
color: $dynamic-table-header-color;
|
||||
padding-bottom: 8px;
|
||||
box-sizing: border-box;
|
||||
|
||||
&.sortable {
|
||||
@include no-select;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
&.adf-dynamic-table__header--sorted-asc,
|
||||
&.adf-dynamic-table__header--sorted-desc {
|
||||
color: $dynamic-table-header-sorted-color;
|
||||
&:before {
|
||||
@include typo-icon;
|
||||
font-size: $dynamic-table-header-sort-icon-size;
|
||||
content: "\e5d8";
|
||||
margin-right: 5px;
|
||||
vertical-align: sub;
|
||||
}
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
&:before {
|
||||
color: $dynamic-table-header-sorted-icon-hover-color;
|
||||
&:focus {
|
||||
outline-offset: -1px;
|
||||
outline-width: 1px;
|
||||
outline-color: rgb(68, 138, 255);
|
||||
outline-style: solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.adf-dynamic-table__header--sorted-desc:before {
|
||||
content: "\e5db";
|
||||
}
|
||||
}
|
||||
|
||||
.adf-dynamic-table-cell {
|
||||
text-align: left;
|
||||
cursor: default;
|
||||
td, th {
|
||||
padding: 0 $dynamic-table-column-padding 12px $dynamic-table-column-padding;
|
||||
text-align: center;
|
||||
|
||||
&--text {
|
||||
text-align: left;
|
||||
}
|
||||
&:first-of-type {
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
||||
&--number {
|
||||
text-align: right;
|
||||
}
|
||||
&:last-of-type {
|
||||
padding-right: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
&--image {
|
||||
text-align: left;
|
||||
td {
|
||||
color: mat-color($foreground, text);
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
height: $dynamic-table-row-height;
|
||||
border-top: $dynamic-table-dividers;
|
||||
border-bottom: $dynamic-table-dividers;
|
||||
padding-top: $dynamic-table-cell-top;
|
||||
box-sizing: border-box;
|
||||
|
||||
img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
@include no-select;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
th {
|
||||
@include no-select;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
vertical-align: bottom;
|
||||
text-overflow: ellipsis;
|
||||
font-weight: bold;
|
||||
line-height: 24px;
|
||||
letter-spacing: 0;
|
||||
height: $dynamic-table-row-height;
|
||||
font-size: $dynamic-table-header-font-size;
|
||||
color: $dynamic-table-header-color;
|
||||
padding-bottom: 8px;
|
||||
box-sizing: border-box;
|
||||
|
||||
&.sortable {
|
||||
@include no-select;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
&.adf-dynamic-table__header--sorted-asc,
|
||||
&.adf-dynamic-table__header--sorted-desc {
|
||||
color: $dynamic-table-header-sorted-color;
|
||||
&:before {
|
||||
@include typo-icon;
|
||||
font-size: $dynamic-table-header-sort-icon-size;
|
||||
content: "\e5d8";
|
||||
margin-right: 5px;
|
||||
vertical-align: sub;
|
||||
}
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
&:before {
|
||||
color: $dynamic-table-header-sorted-icon-hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.adf-dynamic-table__header--sorted-desc:before {
|
||||
content: "\e5db";
|
||||
}
|
||||
}
|
||||
|
||||
.adf-dynamic-table-cell {
|
||||
text-align: left;
|
||||
cursor: default;
|
||||
|
||||
&--text {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&--number {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
&--image {
|
||||
text-align: left;
|
||||
|
||||
img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.full-width {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.full-width {
|
||||
width: 100%;
|
||||
color: $alfresco-primary-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,61 +1,71 @@
|
||||
@import 'theming';
|
||||
@import './hyperlink/hyperlink.widget';
|
||||
@import 'colors';
|
||||
|
||||
ul > li > form-field > .adf-focus {
|
||||
.adf-label {
|
||||
color: mat-color($primary);
|
||||
}
|
||||
}
|
||||
@mixin mat-form-theme($theme) {
|
||||
$primary: map-get($theme, primary);
|
||||
$accent: map-get($theme, accent);
|
||||
$warn: map-get($theme, warn);
|
||||
|
||||
.adf {
|
||||
|
||||
&-error-text-container {
|
||||
width: 95%;
|
||||
height: 20px;
|
||||
margin-top: -12px;
|
||||
}
|
||||
|
||||
&-error-text {
|
||||
padding: 1px;
|
||||
height: 16px;
|
||||
font-size: 12px;
|
||||
line-height: 1.33;
|
||||
float: left;
|
||||
color: mat-color($warn);
|
||||
}
|
||||
|
||||
&-error-icon {
|
||||
float: right;
|
||||
font-size: 17px;
|
||||
color: mat-color($warn);
|
||||
}
|
||||
|
||||
&-label {
|
||||
color: $alfresco-gray-label;
|
||||
}
|
||||
|
||||
&-invalid {
|
||||
|
||||
.mat-input-underline {
|
||||
background-color: #f44336 !important;
|
||||
}
|
||||
|
||||
.adf-file {
|
||||
border-color: mat-color($warn);
|
||||
}
|
||||
|
||||
.mat-input-prefix {
|
||||
color: mat-color($warn);
|
||||
}
|
||||
|
||||
.adf-input {
|
||||
border-color: mat-color($warn);
|
||||
}
|
||||
@include mat-hyperlink-widget-theme($theme);
|
||||
|
||||
ul > li > form-field > .adf-focus {
|
||||
.adf-label {
|
||||
color: mat-color($primary);
|
||||
}
|
||||
}
|
||||
|
||||
.adf {
|
||||
|
||||
&-error-text-container {
|
||||
width: 95%;
|
||||
height: 20px;
|
||||
margin-top: -12px;
|
||||
}
|
||||
|
||||
&-error-text {
|
||||
padding: 1px;
|
||||
height: 16px;
|
||||
font-size: 12px;
|
||||
line-height: 1.33;
|
||||
float: left;
|
||||
color: mat-color($warn);
|
||||
&:after {
|
||||
background-color: mat-color($warn);
|
||||
}
|
||||
|
||||
&-error-icon {
|
||||
float: right;
|
||||
font-size: 17px;
|
||||
color: mat-color($warn);
|
||||
}
|
||||
|
||||
&-label {
|
||||
color: rgb(186, 186, 186);;
|
||||
}
|
||||
|
||||
&-invalid {
|
||||
|
||||
.mat-input-underline {
|
||||
background-color: #f44336 !important;
|
||||
}
|
||||
|
||||
.adf-file {
|
||||
border-color: mat-color($warn);
|
||||
}
|
||||
|
||||
.mat-input-prefix {
|
||||
color: mat-color($warn);
|
||||
}
|
||||
|
||||
.adf-input {
|
||||
border-color: mat-color($warn);
|
||||
}
|
||||
|
||||
.adf-label {
|
||||
color: mat-color($warn);
|
||||
&:after {
|
||||
background-color: mat-color($warn);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
+11
-10
@@ -1,15 +1,16 @@
|
||||
@import 'theming';
|
||||
@import '../form';
|
||||
@mixin mat-hyperlink-widget-theme($theme) {
|
||||
$primary: map-get($theme, primary);
|
||||
|
||||
.adf-hyperlink-widget {
|
||||
padding: 0.4375em 0;
|
||||
border-top: 0.84375em solid transparent;
|
||||
.adf-hyperlink-widget {
|
||||
padding: 0.4375em 0;
|
||||
border-top: 0.84375em solid transparent;
|
||||
|
||||
.focus {
|
||||
color: mat-color($primary);
|
||||
}
|
||||
.focus {
|
||||
color: mat-color($primary);
|
||||
}
|
||||
|
||||
a {
|
||||
color: mat-color($primary);
|
||||
a {
|
||||
color: mat-color($primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
@import 'theming';
|
||||
@import '../form';
|
||||
|
||||
.adf {
|
||||
|
||||
@@ -37,7 +37,7 @@
|
||||
* [Events](#events-7)
|
||||
- [Process Audit Directive](#process-audit-directive)
|
||||
* [Properties](#properties-9)
|
||||
* [Events](#events-8)
|
||||
+ [Events](#events-8)
|
||||
- [Build from sources](#build-from-sources)
|
||||
- [NPM scripts](#npm-scripts)
|
||||
- [Demo](#demo)
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { ModuleWithProviders, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
||||
import { CUSTOM_ELEMENTS_SCHEMA, ModuleWithProviders, NgModule } from '@angular/core';
|
||||
import {
|
||||
MdButtonModule,
|
||||
MdCardModule,
|
||||
|
||||
@@ -1,23 +0,0 @@
|
||||
.mdl-list__item {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.activiti-filters__entry {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.activiti-filters__entry-icon {
|
||||
margin-right: 12px !important;
|
||||
}
|
||||
|
||||
.activiti-filters__entry.active {
|
||||
color: rgb(68,138,255);
|
||||
}
|
||||
|
||||
.activiti-filters__entry:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.activiti-filters__entry.active .activiti-filters__entry-icon {
|
||||
color: rgb(68,138,255);
|
||||
}
|
||||
+10
-8
@@ -1,11 +1,13 @@
|
||||
<div class="menu-container">
|
||||
<ul class='mdl-list'>
|
||||
<li class="mdl-list__item activiti-filters__entry" (click)="selectFilter(filter)" *ngFor="let filter of filters"
|
||||
[class.active]="currentFilter === filter">
|
||||
<span class="mdl-list__item-primary-content">
|
||||
<i *ngIf="showIcon" class="material-icons mdl-list__item-icon activiti-filters__entry-icon" [attr.data-automation-id]="filter.name + '_filter'" >assignment</i>
|
||||
<md-list>
|
||||
<md-list-item (click)="selectFilter(filter)" *ngFor="let filter of filters"
|
||||
[class.active]="currentFilter === filter">
|
||||
<span class="mdl-list__item-primary-content">
|
||||
<i *ngIf="showIcon" class="material-icons mdl-list__item-icon adf-filters__entry-icon"
|
||||
[attr.data-automation-id]="filter.name + '_filter'">assignment</i>
|
||||
{{filter.name}}
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -0,0 +1,28 @@
|
||||
@mixin mat-filters-process-theme($theme) {
|
||||
$primary: map-get($theme, primary);
|
||||
|
||||
.mdl-list__item {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.activiti-filters__entry {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.activiti-filters__entry-icon {
|
||||
margin-right: 12px !important;
|
||||
}
|
||||
|
||||
.activiti-filters__entry.active {
|
||||
color: mat-color($primary);
|
||||
}
|
||||
|
||||
.activiti-filters__entry:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.activiti-filters__entry.active .activiti-filters__entry-icon {
|
||||
color: mat-color($primary);
|
||||
}
|
||||
|
||||
}
|
||||
@@ -23,7 +23,7 @@ import { ProcessService } from './../services/process.service';
|
||||
@Component({
|
||||
selector: 'adf-process-instance-filters, activiti-process-instance-filters',
|
||||
templateUrl: './process-filters.component.html',
|
||||
styleUrls: ['process-filters.component.css']
|
||||
styleUrls: ['process-filters.component.scss']
|
||||
})
|
||||
export class ProcessFiltersComponent implements OnInit, OnChanges {
|
||||
|
||||
|
||||
@@ -53,9 +53,10 @@
|
||||
- [Task Audit Directive](#task-audit-directive)
|
||||
* [Properties](#properties-11)
|
||||
+ [Events](#events-10)
|
||||
- [People Search Component](#people-search-component)
|
||||
- [People Search](#people-search)
|
||||
* [Properties](#properties-12)
|
||||
* [Events](#events-11)
|
||||
* [How to use](#how-to-use)
|
||||
- [Build from sources](#build-from-sources)
|
||||
- [NPM scripts](#npm-scripts)
|
||||
- [Demo](#demo)
|
||||
|
||||
@@ -1,83 +1,81 @@
|
||||
@import 'theming';
|
||||
@mixin mat-comment-list-theme($theme) {
|
||||
$primary: map-get($theme, primary);
|
||||
|
||||
.adf {
|
||||
.adf {
|
||||
|
||||
&-comment-img-container {
|
||||
float: left;
|
||||
width: 40px;
|
||||
padding: 5px 10px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&-comment-user-icon {
|
||||
padding: 10px 5px;
|
||||
width: 30px;
|
||||
background-color: mat-color($primary);
|
||||
border-radius: 50%;
|
||||
font-family: Muli;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
height: 18px;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
&-comment-user-name {
|
||||
float: left;
|
||||
width: calc(100% - 120px);
|
||||
padding: 2px 10px;
|
||||
font-family: Muli;
|
||||
font-weight: 600;
|
||||
color: #595959;
|
||||
}
|
||||
|
||||
&-comment-message {
|
||||
float: left;
|
||||
width: calc(100% - 10px);
|
||||
padding: 2px 10px;
|
||||
font-family: Muli;
|
||||
font-style: italic;
|
||||
color: #595959;
|
||||
white-space: initial;
|
||||
}
|
||||
|
||||
&-comment-message-time {
|
||||
float: left;
|
||||
width: calc(100% - 120px);
|
||||
padding: 2px 10px;
|
||||
font-family: Muli;
|
||||
font-size: 12px;
|
||||
color: #595959;
|
||||
}
|
||||
|
||||
&-comment-contents {
|
||||
float: left;
|
||||
width: calc(100% - 10px);
|
||||
}
|
||||
|
||||
&-datatable /deep/ table {
|
||||
thead {
|
||||
display: none;
|
||||
&-comment-img-container {
|
||||
float: left;
|
||||
width: 40px;
|
||||
padding: 5px 10px;
|
||||
height: 100%;
|
||||
}
|
||||
border: none !important;
|
||||
tbody td {
|
||||
padding: 0px !important;
|
||||
border-top: none !important;
|
||||
|
||||
&-comment-user-icon {
|
||||
padding: 10px 5px;
|
||||
width: 30px;
|
||||
background-color: mat-color($primary);
|
||||
border-radius: 50%;
|
||||
font-family: Muli;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
height: 18px;
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
|
||||
&-people-img {
|
||||
border-radius: 90%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
&-comment-user-name {
|
||||
float: left;
|
||||
width: calc(100% - 120px);
|
||||
padding: 2px 10px;
|
||||
font-family: Muli;
|
||||
font-weight: 600;
|
||||
color: #595959;
|
||||
}
|
||||
|
||||
&-comment-message {
|
||||
float: left;
|
||||
width: calc(100% - 10px);
|
||||
padding: 2px 10px;
|
||||
font-family: Muli;
|
||||
font-style: italic;
|
||||
color: #595959;
|
||||
white-space: initial;
|
||||
}
|
||||
|
||||
&-comment-message-time {
|
||||
float: left;
|
||||
width: calc(100% - 120px);
|
||||
padding: 2px 10px;
|
||||
font-family: Muli;
|
||||
font-size: 12px;
|
||||
color: #595959;
|
||||
}
|
||||
|
||||
&-comment-contents {
|
||||
float: left;
|
||||
width: calc(100% - 10px);
|
||||
}
|
||||
|
||||
&-datatable /deep/ table {
|
||||
thead {
|
||||
display: none;
|
||||
}
|
||||
border: none !important;
|
||||
tbody td {
|
||||
padding: 0px !important;
|
||||
border-top: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
&-people-img {
|
||||
border-radius: 90%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -1,82 +1,86 @@
|
||||
@import 'theming';
|
||||
@mixin mat-people-search-theme($theme) {
|
||||
$primary: map-get($theme, primary);
|
||||
$accent: map-get($theme, accent);
|
||||
$warn: map-get($theme, warn);
|
||||
|
||||
:host {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.activiti-label {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
.material-icons.people-search__icon:hover {
|
||||
color: mat-color($primary);
|
||||
}
|
||||
|
||||
.fix-element-user-list {
|
||||
padding-top: 0px;
|
||||
padding-right: 0px;
|
||||
padding-bottom: 0px;
|
||||
padding-left: 0px;
|
||||
}
|
||||
|
||||
.search-text-header {
|
||||
font-weight: bold;
|
||||
opacity: 0.54;
|
||||
}
|
||||
|
||||
.search-text-container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.search-list-container {
|
||||
max-height: 152px;
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
adf-people-list /deep/ adf-datatable /deep/ thead {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.search-list-action-container {
|
||||
border-top: 1px solid #eee;
|
||||
text-align: right;
|
||||
padding: 5px 0px;
|
||||
margin-top: 5px;
|
||||
> button {
|
||||
opacity: 0.54;
|
||||
font-weight: bolder;
|
||||
&:hover {
|
||||
color: mat-color($primary);
|
||||
:host {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
adf-people-list /deep/ adf-datatable /deep/ .people-full-name {
|
||||
font-family: 'Muli';
|
||||
}
|
||||
.activiti-label {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
.people-pic {
|
||||
background: mat-color($primary);
|
||||
width: 30px;
|
||||
padding: 10px 5px;
|
||||
border-radius: 90%;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
font-weight: bolder;
|
||||
font-size: 18px;
|
||||
font-family: Muli;
|
||||
text-transform: uppercase;
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
.material-icons.people-search__icon:hover {
|
||||
color: mat-color($primary);
|
||||
}
|
||||
|
||||
.people-img {
|
||||
border-radius: 90%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.fix-element-user-list {
|
||||
padding-top: 0px;
|
||||
padding-right: 0px;
|
||||
padding-bottom: 0px;
|
||||
padding-left: 0px;
|
||||
}
|
||||
|
||||
adf-people-list /deep/ alfresco-datatable /deep/ td.mdl-data-table__cell--non-numeric.non-selectable.data-cell {
|
||||
padding: 4px 12px;
|
||||
.search-text-header {
|
||||
font-weight: bold;
|
||||
opacity: 0.54;
|
||||
}
|
||||
|
||||
.search-text-container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.search-list-container {
|
||||
max-height: 152px;
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
adf-people-list /deep/ adf-datatable /deep/ thead {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.search-list-action-container {
|
||||
border-top: 1px solid #eee;
|
||||
text-align: right;
|
||||
padding: 5px 0px;
|
||||
margin-top: 5px;
|
||||
> button {
|
||||
opacity: 0.54;
|
||||
font-weight: bolder;
|
||||
&:hover {
|
||||
color: mat-color($primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
adf-people-list /deep/ adf-datatable /deep/ .people-full-name {
|
||||
font-family: 'Muli';
|
||||
}
|
||||
|
||||
.people-pic {
|
||||
background: mat-color($primary);
|
||||
width: 30px;
|
||||
padding: 10px 5px;
|
||||
border-radius: 90%;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
font-weight: bolder;
|
||||
font-size: 18px;
|
||||
font-family: Muli;
|
||||
text-transform: uppercase;
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
|
||||
.people-img {
|
||||
border-radius: 90%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
adf-people-list /deep/ alfresco-datatable /deep/ td.mdl-data-table__cell--non-numeric.non-selectable.data-cell {
|
||||
padding: 4px 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,83 +1,85 @@
|
||||
@import 'theming';
|
||||
@mixin mat-people-theme($theme) {
|
||||
$primary: map-get($theme, primary);
|
||||
|
||||
.assignment-header {
|
||||
width: 100%;
|
||||
border-bottom: 1px solid #eee;
|
||||
padding: 6px 20px;
|
||||
}
|
||||
.assignment-header {
|
||||
width: 100%;
|
||||
border-bottom: 1px solid #eee;
|
||||
padding: 6px 20px;
|
||||
}
|
||||
|
||||
.assigment-count {
|
||||
float: left;
|
||||
padding: 10px 0px;
|
||||
font-weight: bolder;
|
||||
font-family: Muli;
|
||||
opacity: 0.54;
|
||||
}
|
||||
.assigment-count {
|
||||
float: left;
|
||||
padding: 10px 0px;
|
||||
font-weight: bolder;
|
||||
font-family: Muli;
|
||||
opacity: 0.54;
|
||||
}
|
||||
|
||||
.add-people {
|
||||
float: right;
|
||||
padding: 8px;
|
||||
height: 26px;
|
||||
opacity: 0.54;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
color: mat-color($primary);
|
||||
}
|
||||
}
|
||||
.add-people {
|
||||
float: right;
|
||||
padding: 8px;
|
||||
height: 26px;
|
||||
opacity: 0.54;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
color: mat-color($primary);
|
||||
}
|
||||
}
|
||||
|
||||
.assignment-top-container {
|
||||
border-top: 2px solid #eee;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
.assignment-top-container {
|
||||
border-top: 2px solid #eee;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.assignment-container {
|
||||
padding: 10px 20px;
|
||||
border-bottom: 1px solid #eee;
|
||||
width: 100%;
|
||||
}
|
||||
.assignment-container {
|
||||
padding: 10px 20px;
|
||||
border-bottom: 1px solid #eee;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.assignment-list-container {
|
||||
padding: 0px;
|
||||
width: 100%;
|
||||
}
|
||||
.assignment-list-container {
|
||||
padding: 0px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
adf-people-list /deep/ adf-datatable /deep/ {
|
||||
thead {
|
||||
display: none;
|
||||
}
|
||||
.people-full-name {
|
||||
font-family: 'Muli';
|
||||
}
|
||||
.people-email {
|
||||
font-family: 'Muli';
|
||||
opacity: 0.54;
|
||||
}
|
||||
.people-edit-label {
|
||||
font-family: 'Muli';
|
||||
}
|
||||
.people-pic {
|
||||
background: mat-color($primary);
|
||||
width: 30px;
|
||||
padding: 10px 5px;
|
||||
border-radius: 100px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
font-weight: bolder;
|
||||
font-size: 18px;
|
||||
font-family: Muli;
|
||||
text-transform: uppercase;
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
}
|
||||
adf-people-list /deep/ adf-datatable /deep/ {
|
||||
thead {
|
||||
display: none;
|
||||
}
|
||||
.people-full-name {
|
||||
font-family: 'Muli';
|
||||
}
|
||||
.people-email {
|
||||
font-family: 'Muli';
|
||||
opacity: 0.54;
|
||||
}
|
||||
.people-edit-label {
|
||||
font-family: 'Muli';
|
||||
}
|
||||
.people-pic {
|
||||
background: mat-color($primary);
|
||||
width: 30px;
|
||||
padding: 10px 5px;
|
||||
border-radius: 100px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
font-weight: bolder;
|
||||
font-size: 18px;
|
||||
font-family: Muli;
|
||||
text-transform: uppercase;
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
}
|
||||
|
||||
.people-img {
|
||||
border-radius: 90%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.people-img {
|
||||
border-radius: 90%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
adf-people-list /deep/ adf-datatable /deep/ td.mdl-data-table__cell--non-numeric.non-selectable.data-cell {
|
||||
padding: 10px;
|
||||
adf-people-list /deep/ adf-datatable /deep/ td.mdl-data-table__cell--non-numeric.non-selectable.data-cell {
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,93 +1,97 @@
|
||||
@import 'theming';
|
||||
@mixin mat-start-task-theme($theme) {
|
||||
$primary: map-get($theme, primary);
|
||||
$accent: map-get($theme, accent);
|
||||
$warn: map-get($theme, warn);
|
||||
|
||||
.adf-new-task-heading {
|
||||
padding: 12px 20px;
|
||||
font-family: Muli;
|
||||
font-weight: bold;
|
||||
border-bottom: 1px solid #eee;
|
||||
font-size: 18px;
|
||||
float: left;
|
||||
text-align: left;
|
||||
width: calc(100% - 40px);
|
||||
}
|
||||
|
||||
.adf-new-task-layout-card {
|
||||
width: 66.6667%;
|
||||
margin-right: calc(33.3333%/2 - 24px);
|
||||
margin-left: calc(33.3333%/2 - 24px);
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.adf-new-task-footer {
|
||||
padding: 4px;
|
||||
font-family: Muli;
|
||||
font-size: 18px;
|
||||
border-top: 1px solid #eee;
|
||||
float: left;
|
||||
width: calc(100% - 40px);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.adf-start-task-input-container {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.adf-new-task-text-width {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.adf {
|
||||
|
||||
&-error-text-container {
|
||||
position: absolute;
|
||||
width: 81%;
|
||||
height: 20px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
&-error-text {
|
||||
padding: 1px;
|
||||
height: 16px;
|
||||
font-size: 12px;
|
||||
line-height: 1.33;
|
||||
.adf-new-task-heading {
|
||||
padding: 12px 20px;
|
||||
font-family: Muli;
|
||||
font-weight: bold;
|
||||
border-bottom: 1px solid #eee;
|
||||
font-size: 18px;
|
||||
float: left;
|
||||
color: mat-color($warn);
|
||||
text-align: left;
|
||||
width: calc(100% - 40px);
|
||||
}
|
||||
|
||||
&-error-icon {
|
||||
float: right;
|
||||
font-size: 17px;
|
||||
color: mat-color($warn);
|
||||
.adf-new-task-layout-card {
|
||||
width: 66.6667%;
|
||||
margin-right: calc(33.3333% / 2 - 24px);
|
||||
margin-left: calc(33.3333% / 2 - 24px);
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
&-label {
|
||||
color: $alfresco-gray-label;
|
||||
.adf-new-task-footer {
|
||||
padding: 4px;
|
||||
font-family: Muli;
|
||||
font-size: 18px;
|
||||
border-top: 1px solid #eee;
|
||||
float: left;
|
||||
width: calc(100% - 40px);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
&-invalid {
|
||||
.adf-start-task-input-container {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.mat-input-underline {
|
||||
background-color: #f44336 !important;
|
||||
.adf-new-task-text-width {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.adf {
|
||||
|
||||
&-error-text-container {
|
||||
position: absolute;
|
||||
width: 81%;
|
||||
height: 20px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.adf-file {
|
||||
border-color: mat-color($warn);
|
||||
}
|
||||
|
||||
.mat-input-prefix {
|
||||
&-error-text {
|
||||
padding: 1px;
|
||||
height: 16px;
|
||||
font-size: 12px;
|
||||
line-height: 1.33;
|
||||
float: left;
|
||||
color: mat-color($warn);
|
||||
}
|
||||
|
||||
.adf-input {
|
||||
border-color: mat-color($warn);
|
||||
&-error-icon {
|
||||
float: right;
|
||||
font-size: 17px;
|
||||
color: mat-color($warn);
|
||||
}
|
||||
|
||||
.adf-label {
|
||||
color: mat-color($warn);
|
||||
&:after {
|
||||
background-color: mat-color($warn);
|
||||
&-label {
|
||||
color: rgb(186, 186, 186);;
|
||||
}
|
||||
|
||||
&-invalid {
|
||||
|
||||
.mat-input-underline {
|
||||
background-color: #f44336 !important;
|
||||
}
|
||||
|
||||
.adf-file {
|
||||
border-color: mat-color($warn);
|
||||
}
|
||||
|
||||
.mat-input-prefix {
|
||||
color: mat-color($warn);
|
||||
}
|
||||
|
||||
.adf-input {
|
||||
border-color: mat-color($warn);
|
||||
}
|
||||
|
||||
.adf-label {
|
||||
color: mat-color($warn);
|
||||
&:after {
|
||||
background-color: mat-color($warn);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,11 +1,12 @@
|
||||
<div class="menu-container">
|
||||
<ul class='mdl-list'>
|
||||
<li class="mdl-list__item adf-filters__entry" (click)="selectFilter(filter)" *ngFor="let filter of filters"
|
||||
[class.active]="currentFilter === filter">
|
||||
<span class="mdl-list__item-primary-content">
|
||||
<i *ngIf="hasIcon" class="material-icons mdl-list__item-icon adf-filters__entry-icon" [attr.data-automation-id]="filter.name + '_filter'" >assignment</i>
|
||||
<md-list>
|
||||
<md-list-item (click)="selectFilter(filter)" *ngFor="let filter of filters"
|
||||
[class.active]="currentFilter === filter">
|
||||
<span class="mdl-list__item-primary-content">
|
||||
<i *ngIf="hasIcon" class="material-icons mdl-list__item-icon adf-filters__entry-icon"
|
||||
[attr.data-automation-id]="filter.name + '_filter'">assignment</i>
|
||||
{{filter.name}}
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
</div>
|
||||
|
||||
@@ -1,27 +1,31 @@
|
||||
.mdl-list__item {
|
||||
cursor: pointer;
|
||||
}
|
||||
@mixin mat-filters-task-theme($theme) {
|
||||
$primary: map-get($theme, primary);
|
||||
|
||||
.adf {
|
||||
|
||||
&-filters__entry {
|
||||
.mdl-list__item {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&-filters__entry-icon {
|
||||
margin-right: 12px !important;
|
||||
}
|
||||
.adf {
|
||||
|
||||
&-filters__entry {
|
||||
&.active {
|
||||
color: rgb(68, 138, 255);
|
||||
&-filters__entry {
|
||||
cursor: pointer;
|
||||
}
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
&.active .adf-filters__entry-icon {
|
||||
color: rgb(68, 138, 255);
|
||||
}
|
||||
}
|
||||
|
||||
&-filters__entry-icon {
|
||||
margin-right: 12px !important;
|
||||
}
|
||||
|
||||
&-filters__entry {
|
||||
&.active {
|
||||
color: mat-color($primary);
|
||||
}
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
&.active .adf-filters__entry-icon {
|
||||
color: mat-color($primary);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,3 +0,0 @@
|
||||
adf-card-view >>> .adf-textitem-clickable-value {
|
||||
color: #ff9100;
|
||||
}
|
||||
@@ -1,28 +1,30 @@
|
||||
@import 'theming';
|
||||
@mixin mat-header-theme($theme) {
|
||||
$primary: map-get($theme, primary);
|
||||
|
||||
.#{$ADF} {
|
||||
&-controls {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.adf {
|
||||
&-controls {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
&-edit-controls {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-left: auto;
|
||||
}
|
||||
&-edit-controls {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
&-switch-to-edit-mode,
|
||||
&-save-edit-mode {
|
||||
color: rgb(255, 152, 0);
|
||||
}
|
||||
&-switch-to-edit-mode,
|
||||
&-save-edit-mode {
|
||||
color: mat-color($primary);
|
||||
}
|
||||
|
||||
&-cancel-edit-mode,
|
||||
&-claim-controls {
|
||||
color: rgb(131, 131, 131);
|
||||
}
|
||||
&-cancel-edit-mode,
|
||||
&-claim-controls {
|
||||
color: rgb(131, 131, 131);
|
||||
}
|
||||
|
||||
&-card-container {
|
||||
font-family: inherit;
|
||||
&-card-container {
|
||||
font-family: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -23,7 +23,7 @@ import { TaskListService } from './../services/tasklist.service';
|
||||
@Component({
|
||||
selector: 'adf-task-header, activiti-task-header',
|
||||
templateUrl: './task-header.component.html',
|
||||
styleUrls: ['./task-header.component.scss', './task-header.component.css']
|
||||
styleUrls: ['./task-header.component.scss']
|
||||
})
|
||||
export class TaskHeaderComponent implements OnChanges {
|
||||
|
||||
|
||||
@@ -42,6 +42,8 @@
|
||||
+ [2. Define the component for the custom type](#2-define-the-component-for-the-custom-type)
|
||||
+ [3. Add you custom component to your module's entryComponents list](#3-add-you-custom-component-to-your-modules-entrycomponents-list)
|
||||
- [TranslationService](#translationservice)
|
||||
* [Registering translation sources](#registering-translation-sources)
|
||||
* [Switching languages](#switching-languages)
|
||||
- [Renditions Service](#renditions-service)
|
||||
- [Build from sources](#build-from-sources)
|
||||
- [NPM scripts](#npm-scripts)
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
-35
@@ -1,35 +0,0 @@
|
||||
.adf-panel-heading {
|
||||
float: left;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
line-height: normal;
|
||||
letter-spacing: normal;
|
||||
text-align: left;
|
||||
color: #000000;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.adf-panel-heading-selected {
|
||||
color: #448aff;
|
||||
}
|
||||
|
||||
.adf-panel-heading-icon {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.adf-panel-heading-text {
|
||||
float: left;
|
||||
padding-left: 20px;
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
.adf-panel-heading-toggle {
|
||||
float: right;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.adf-panel-heading-toggle:hover {
|
||||
opacity: 0.4;
|
||||
}
|
||||
+38
@@ -0,0 +1,38 @@
|
||||
@mixin mat-accordion-theme($theme) {
|
||||
$primary: map-get($theme, primary);
|
||||
|
||||
.adf-panel-heading {
|
||||
float: left;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
line-height: normal;
|
||||
letter-spacing: normal;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.adf-panel-heading-selected {
|
||||
color: mat-color($primary);
|
||||
}
|
||||
|
||||
.adf-panel-heading-icon {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.adf-panel-heading-text {
|
||||
float: left;
|
||||
padding-left: 20px;
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
.adf-panel-heading-toggle {
|
||||
float: right;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.adf-panel-heading-toggle:hover {
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
+3
-3
@@ -15,14 +15,14 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { Component, EventEmitter, Input, OnDestroy, Output, ViewChild } from '@angular/core';
|
||||
import { Component, EventEmitter, Input, OnDestroy, Output, ViewChild, ViewEncapsulation } from '@angular/core';
|
||||
import { AccordionComponent } from './accordion.component';
|
||||
|
||||
@Component({
|
||||
selector: 'adf-accordion-group',
|
||||
templateUrl: 'accordion-group.component.html',
|
||||
styleUrls: ['./accordion-group.component.css']
|
||||
|
||||
styleUrls: ['./accordion-group.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class AccordionGroupComponent implements OnDestroy {
|
||||
private _isOpen: boolean = false;
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { Component } from '@angular/core';
|
||||
import { Component, ViewEncapsulation } from '@angular/core';
|
||||
import { AccordionGroupComponent } from './accordion-group.component';
|
||||
|
||||
@Component({
|
||||
@@ -25,7 +25,8 @@ import { AccordionGroupComponent } from './accordion-group.component';
|
||||
`,
|
||||
host: {
|
||||
'class': 'panel-group'
|
||||
}
|
||||
},
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class AccordionComponent {
|
||||
groups: Array<AccordionGroupComponent> = [];
|
||||
|
||||
+47
-44
@@ -1,55 +1,58 @@
|
||||
@import 'theming';
|
||||
|
||||
$adf-pagination--height: 48px;
|
||||
$adf-pagination--icon-button-size: 32px;
|
||||
$adf-pagination--border: 1px solid $alfresco-divider-color;
|
||||
@mixin mat-pagination-theme($theme) {
|
||||
$foreground: map-get($theme, foreground);
|
||||
|
||||
.adf-pagination {
|
||||
display: flex;
|
||||
border-top: $adf-pagination--border;
|
||||
height: $adf-pagination--height;
|
||||
line-height: $adf-pagination--height;
|
||||
color: $alfresco-secondary-text-color;
|
||||
$adf-pagination--height: 48px;
|
||||
$adf-pagination--icon-button-size: 32px;
|
||||
$adf-pagination--border: 1px solid mat-color($foreground, text, .07);
|
||||
|
||||
&__block {
|
||||
.adf-pagination {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 12px;
|
||||
border-right: $adf-pagination--border;
|
||||
border-top: $adf-pagination--border;
|
||||
height: $adf-pagination--height;
|
||||
line-height: $adf-pagination--height;
|
||||
color: mat-color($primary, default-contrast);
|
||||
|
||||
&:first-child {
|
||||
flex: 1 1 auto;
|
||||
padding-left: 24px;
|
||||
&__block {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 12px;
|
||||
border-right: $adf-pagination--border;
|
||||
|
||||
&:first-child {
|
||||
flex: 1 1 auto;
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-right-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-right-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__max-items {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
&__max-items, &__current-page {
|
||||
margin-right: 5px;
|
||||
|
||||
&, & + button {
|
||||
color: $alfresco-primary-text-color;
|
||||
&__max-items {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
& + button {
|
||||
margin-left: -10px;
|
||||
&__max-items, &__current-page {
|
||||
margin-right: 5px;
|
||||
|
||||
&, & + button {
|
||||
color: mat-color($foreground, text);
|
||||
}
|
||||
|
||||
& + button {
|
||||
margin-left: -10px;
|
||||
}
|
||||
}
|
||||
|
||||
&__previous-button, &__next-button {
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
button[md-icon-button] {
|
||||
width: $adf-pagination--icon-button-size;
|
||||
height: $adf-pagination--icon-button-size;
|
||||
line-height: $adf-pagination--icon-button-size;
|
||||
}
|
||||
}
|
||||
|
||||
&__previous-button, &__next-button {
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
button[md-icon-button] {
|
||||
width: $adf-pagination--icon-button-size;
|
||||
height: $adf-pagination--icon-button-size;
|
||||
line-height: $adf-pagination--icon-button-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,22 +1,25 @@
|
||||
@import 'theming';
|
||||
|
||||
$adf-toolbar-height: 48px;
|
||||
$adf-toolbar-font-size: 14px;
|
||||
@mixin mat-adf-toolbar-theme($theme) {
|
||||
$foreground: map-get($theme, foreground);
|
||||
$adf-toolbar-height: 48px;
|
||||
$adf-toolbar-font-size: 14px;
|
||||
|
||||
.adf-toolbar--spacer {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.adf-toolbar {
|
||||
|
||||
.mat-toolbar {
|
||||
min-height: $adf-toolbar-height;
|
||||
border: 1px solid $alfresco-divider-color;
|
||||
.adf-toolbar--spacer {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.mat-toolbar-row {
|
||||
height: $adf-toolbar-height;
|
||||
font-size: $adf-toolbar-font-size;
|
||||
white-space: normal;
|
||||
.adf-toolbar {
|
||||
|
||||
.mat-toolbar {
|
||||
min-height: $adf-toolbar-height;
|
||||
border: 1px solid mat-color($foreground, text, .07);
|
||||
}
|
||||
|
||||
.mat-toolbar-row {
|
||||
height: $adf-toolbar-height;
|
||||
font-size: $adf-toolbar-font-size;
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
+24
-23
@@ -1,28 +1,29 @@
|
||||
@import 'theming';
|
||||
@mixin mat-card-view-dateitem-theme($theme) {
|
||||
|
||||
.#{$ADF} {
|
||||
&-invisible-date-input {
|
||||
height: 24px;
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
border: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&-dateitem-editable {
|
||||
cursor: pointer;
|
||||
|
||||
button {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
opacity: 0.5;
|
||||
margin-left: 4px;
|
||||
.adf {
|
||||
&-invisible-date-input {
|
||||
height: 24px;
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
border: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&:hover button {
|
||||
opacity: 1;
|
||||
&-dateitem-editable {
|
||||
cursor: pointer;
|
||||
|
||||
button {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
opacity: 0.5;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
&:hover button {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+1
-3
@@ -1,6 +1,4 @@
|
||||
@import 'theming';
|
||||
|
||||
.#{$ADF} {
|
||||
.adf {
|
||||
&-mapitem-clickable-value {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
+71
-69
@@ -1,90 +1,92 @@
|
||||
@import 'theming';
|
||||
@mixin mat-card-view-textitem-theme($theme) {
|
||||
|
||||
.#{$ADF} {
|
||||
&-textitem-icon {
|
||||
font-size: 16px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
position: relative;
|
||||
top: 3px;
|
||||
padding-left: 8px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&-update-icon {
|
||||
padding-left: 13px;
|
||||
}
|
||||
|
||||
&-textitem-readonly {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover md-icon {
|
||||
opacity: 1;
|
||||
.adf {
|
||||
&-textitem-icon {
|
||||
font-size: 16px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
position: relative;
|
||||
top: 3px;
|
||||
padding-left: 8px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
&-textitem-clickable-value {
|
||||
cursor: pointer;
|
||||
}
|
||||
&-update-icon {
|
||||
padding-left: 13px;
|
||||
}
|
||||
|
||||
&-textitem-editable {
|
||||
display: flex;
|
||||
|
||||
md-icon:hover {
|
||||
opacity: 1;
|
||||
&-textitem-readonly {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover md-icon {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
md-input-container {
|
||||
width: 100%;
|
||||
&-textitem-clickable-value {
|
||||
cursor: pointer;
|
||||
color: mat-color($primary);
|
||||
}
|
||||
|
||||
input:focus,
|
||||
textarea:focus {
|
||||
border: 1px solid #EEE;
|
||||
&-textitem-editable {
|
||||
display: flex;
|
||||
|
||||
md-icon:hover {
|
||||
opacity: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
md-input-container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
input:focus,
|
||||
textarea:focus {
|
||||
border: 1px solid #EEE;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-textitem-editable /deep/ .mat-input-wrapper {
|
||||
margin: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
&-textitem-editable /deep/ .mat-input-wrapper {
|
||||
margin: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
&-textitem-editable /deep/ .mat-input-underline {
|
||||
display: none;
|
||||
}
|
||||
&-textitem-editable /deep/ .mat-input-underline {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&-textitem-editable /deep/ .mat-input-infix {
|
||||
padding: 0;
|
||||
border-top: none;
|
||||
}
|
||||
&-textitem-editable /deep/ .mat-input-infix {
|
||||
padding: 0;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
&-textitem-editable /deep/ .mat-input-placeholder-wrapper {
|
||||
padding-top: 2em;
|
||||
position: static;
|
||||
}
|
||||
&-textitem-editable /deep/ .mat-input-placeholder-wrapper {
|
||||
padding-top: 2em;
|
||||
position: static;
|
||||
}
|
||||
|
||||
&-textitem-editable /deep/ .mat-input-placeholder {
|
||||
top: 0;
|
||||
}
|
||||
&-textitem-editable /deep/ .mat-input-placeholder {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
&-textitem-editable /deep/ .mat-input-element {
|
||||
font-family: inherit;
|
||||
position: relative;
|
||||
padding-top: 3px;
|
||||
}
|
||||
&-textitem-editable /deep/ .mat-input-element {
|
||||
font-family: inherit;
|
||||
position: relative;
|
||||
padding-top: 3px;
|
||||
}
|
||||
|
||||
&-textitem-editable /deep/ .mat-input-element:focus {
|
||||
padding: 5px;
|
||||
left: -6px;
|
||||
top: -6px;
|
||||
}
|
||||
&-textitem-editable /deep/ .mat-input-element:focus {
|
||||
padding: 5px;
|
||||
left: -6px;
|
||||
top: -6px;
|
||||
}
|
||||
|
||||
&-textitem-editable /deep/ input.mat-input-element {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
&-textitem-editable /deep/ input.mat-input-element {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
&-textitem-editable /deep/ input.mat-input-element:focus {
|
||||
margin-bottom: -8px;
|
||||
&-textitem-editable /deep/ input.mat-input-element:focus {
|
||||
margin-bottom: -8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,32 +1,34 @@
|
||||
@import 'theming';
|
||||
|
||||
.#{$ADF} {
|
||||
&-property-list {
|
||||
display: table;
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
@mixin mat-card-view-theme($theme) {
|
||||
|
||||
&-property {
|
||||
display: table-row;
|
||||
}
|
||||
.adf {
|
||||
&-property-list {
|
||||
display: table;
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
&-property /deep/ &-property-label {
|
||||
display: table-cell;
|
||||
min-width: 100px;
|
||||
padding-right: 30px;
|
||||
word-wrap: break-word;
|
||||
color: $alfresco-gray-label;
|
||||
vertical-align: top;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
&-property {
|
||||
display: table-row;
|
||||
}
|
||||
|
||||
&-property /deep/ &-property-value {
|
||||
width: 100%;
|
||||
display: table-cell;
|
||||
color: rgb(101, 101, 101);
|
||||
vertical-align: top;
|
||||
padding-bottom: 20px;
|
||||
&-property /deep/ &-property-label {
|
||||
display: table-cell;
|
||||
min-width: 100px;
|
||||
padding-right: 30px;
|
||||
word-wrap: break-word;
|
||||
color: rgb(186, 186, 186);;
|
||||
vertical-align: top;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
&-property /deep/ &-property-value {
|
||||
width: 100%;
|
||||
display: table-cell;
|
||||
color: rgb(101, 101, 101);
|
||||
vertical-align: top;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,64 @@
|
||||
@import '../../ng2-alfresco-documentlist/src/components/breadcrumb/breadcrumb.component';
|
||||
@import '../../ng2-alfresco-documentlist/src/components/breadcrumb/dropdown-breadcrumb.component';
|
||||
@import '../../ng2-alfresco-documentlist/src/components/content-node-selector/content-node-selector.component';
|
||||
|
||||
@import '../../ng2-activiti-form/src/components/widgets/form';
|
||||
@import '../../ng2-activiti-form/src/components/widgets/container/container.widget';
|
||||
@import '../../ng2-activiti-form/src/components/widgets/dynamic-table/dynamic-table.widget.scss';
|
||||
|
||||
@import '../../ng2-activiti-diagrams/src/components/tooltip/diagram-tooltip.component';
|
||||
|
||||
@import '../../ng2-activiti-analytics/src/components/analytics-report-list.component';
|
||||
|
||||
@import '../../ng2-activiti-tasklist/src/components/comment-list.component';
|
||||
@import '../../ng2-activiti-tasklist/src/components/start-task.component';
|
||||
@import '../../ng2-activiti-tasklist/src/components/people-search.component';
|
||||
@import '../../ng2-activiti-tasklist/src/components/people.component';
|
||||
@import '../../ng2-activiti-tasklist/src/components/task-filters.component';
|
||||
@import '../../ng2-activiti-tasklist/src/components/task-header.component';
|
||||
|
||||
@import '../../ng2-activiti-processlist/src/components/process-filters.component';
|
||||
|
||||
@import '../../ng2-alfresco-upload/src/components/file-uploading-list-row.component';
|
||||
@import '../../ng2-alfresco-upload/src/components/file-uploading-dialog.component';
|
||||
|
||||
@import '../../ng2-alfresco-login/src/components/login.component';
|
||||
|
||||
@import '../../ng2-alfresco-core/src/components/collapsable/accordion-group.component';
|
||||
@import '../../ng2-alfresco-core/src/components/view/card-view-textitem.component';
|
||||
@import '../../ng2-alfresco-core/src/components/view/card-view-dateitem.component';
|
||||
@import '../../ng2-alfresco-core/src/components/view/card-view.component';
|
||||
@import '../../ng2-alfresco-core/src/components/toolbar/toolbar.component';
|
||||
@import '../../ng2-alfresco-core/src/components/pagination/pagination.component';
|
||||
@import '../../ng2-alfresco-core/styles/theme-colors';
|
||||
|
||||
@import '../../ng2-alfresco-datatable/src/components/datatable/datatable.component.scss';
|
||||
|
||||
@mixin alfresco-material-theme($theme) {
|
||||
@include mat-colors-theme($theme);
|
||||
@include mat-breadcrumb-theme($theme);
|
||||
@include mat-form-theme($theme);
|
||||
@include mat-container-widget-theme($theme);
|
||||
@include mat-diagram-tooltip-theme($theme);
|
||||
@include mat-comment-list-theme($theme);
|
||||
@include mat-start-task-theme($theme);
|
||||
@include mat-people-search-theme($theme);
|
||||
@include mat-file-uploading-list-theme($theme);
|
||||
@include mat-people-theme($theme);
|
||||
@include mat-login-theme($theme);
|
||||
@include mat-accordion-theme($theme);
|
||||
@include mat-filters-task-theme($theme);
|
||||
@include mat-filters-process-theme($theme);
|
||||
@include mat-analytics-report-list-theme($theme);
|
||||
@include mat-header-theme($theme);
|
||||
@include mat-card-view-textitem-theme($theme);
|
||||
@include mat-card-view-dateitem-theme($theme);
|
||||
@include mat-pagination-theme($theme);
|
||||
@include mat-upload-dialog-theme($theme);
|
||||
@include mat-card-view-theme($theme);
|
||||
@include mat-adf-toolbar-theme($theme);
|
||||
@include mat-dynamic-table-theme($theme);
|
||||
@include mat-breadcrumb-dropdown-theme($theme);
|
||||
@include mat-datatable-theme($theme);
|
||||
@include mat-content-node-selector-theme($theme);
|
||||
}
|
||||
@@ -1,3 +1,4 @@
|
||||
|
||||
// Accent color palette
|
||||
$black-87-opacity: rgba(black, 0.87);
|
||||
$white-87-opacity: rgba(white, 0.87);
|
||||
@@ -6,6 +7,138 @@ $white-12-opacity: rgba(white, 0.12);
|
||||
$black-6-opacity: rgba(black, 0.06);
|
||||
$white-6-opacity: rgba(white, 0.06);
|
||||
|
||||
$alfresco-ecm-cyan: (
|
||||
50: #e0f7fa,
|
||||
100: #b2ebf2,
|
||||
200: #80deea,
|
||||
300: #4dd0e1,
|
||||
400: #26c6da,
|
||||
500: #00bcd4,
|
||||
600: #00acc1,
|
||||
700: #0097a7,
|
||||
800: #00838f,
|
||||
900: #006064,
|
||||
A100: #84ffff,
|
||||
A200: #18ffff,
|
||||
A400: #00e5ff,
|
||||
A700: #00b8d4,
|
||||
contrast: (
|
||||
50: $black-87-opacity,
|
||||
100: $black-87-opacity,
|
||||
200: $black-87-opacity,
|
||||
300: $black-87-opacity,
|
||||
400: $black-87-opacity,
|
||||
500: white,
|
||||
600: white,
|
||||
700: white,
|
||||
800: white,
|
||||
900: $white-87-opacity,
|
||||
A100: $black-87-opacity,
|
||||
A200: $black-87-opacity,
|
||||
A400: $black-87-opacity,
|
||||
A700: $black-87-opacity,
|
||||
)
|
||||
);
|
||||
|
||||
$alfresco-dev-teal: (
|
||||
50: #e0f2f1,
|
||||
100: #b2dfdb,
|
||||
200: #80cbc4,
|
||||
300: #4db6ac,
|
||||
400: #26a69a,
|
||||
500: #009688,
|
||||
600: #00897b,
|
||||
700: #00796b,
|
||||
800: #00695c,
|
||||
900: #004d40,
|
||||
A100: #a7ffeb,
|
||||
A200: #64ffda,
|
||||
A400: #1de9b6,
|
||||
A700: #00bfa5,
|
||||
contrast: (
|
||||
50: $black-87-opacity,
|
||||
100: $black-87-opacity,
|
||||
200: $black-87-opacity,
|
||||
300: $black-87-opacity,
|
||||
400: $black-87-opacity,
|
||||
500: white,
|
||||
600: white,
|
||||
700: white,
|
||||
800: $white-87-opacity,
|
||||
900: $white-87-opacity,
|
||||
A100: $black-87-opacity,
|
||||
A200: $black-87-opacity,
|
||||
A400: $black-87-opacity,
|
||||
A700: $black-87-opacity,
|
||||
)
|
||||
);
|
||||
|
||||
$alfresco-ecm-blue: (
|
||||
50: #e3f2fd,
|
||||
100: #bbdefb,
|
||||
200: #90caf9,
|
||||
300: #64b5f6,
|
||||
400: #42a5f5,
|
||||
500: #2196f3,
|
||||
600: #1e88e5,
|
||||
700: #1976d2,
|
||||
800: #1565c0,
|
||||
900: #0d47a1,
|
||||
A100: #82b1ff,
|
||||
A200: #448aff,
|
||||
A400: #2979ff,
|
||||
A700: #2962ff,
|
||||
contrast: (
|
||||
50: $black-87-opacity,
|
||||
100: $black-87-opacity,
|
||||
200: $black-87-opacity,
|
||||
300: $black-87-opacity,
|
||||
400: $black-87-opacity,
|
||||
500: white,
|
||||
600: white,
|
||||
700: white,
|
||||
800: $white-87-opacity,
|
||||
900: $white-87-opacity,
|
||||
A100: $black-87-opacity,
|
||||
A200: white,
|
||||
A400: white,
|
||||
A700: white,
|
||||
)
|
||||
);
|
||||
|
||||
$alfresco-bpm-green: (
|
||||
50: #f1f8e9,
|
||||
100: #dcedc8,
|
||||
200: #c5e1a5,
|
||||
300: #aed581,
|
||||
400: #9ccc65,
|
||||
500: #8bc34a,
|
||||
600: #7cb342,
|
||||
700: #689f38,
|
||||
800: #558b2f,
|
||||
900: #33691e,
|
||||
A100: #ccff90,
|
||||
A200: #b2ff59,
|
||||
A400: #76ff03,
|
||||
A700: #64dd17,
|
||||
contrast: (
|
||||
50: $black-87-opacity,
|
||||
100: $black-87-opacity,
|
||||
200: $black-87-opacity,
|
||||
300: $black-87-opacity,
|
||||
400: $black-87-opacity,
|
||||
500: $black-87-opacity,
|
||||
600: $black-87-opacity,
|
||||
700: $black-87-opacity,
|
||||
800: white,
|
||||
900: white,
|
||||
A100: $black-87-opacity,
|
||||
A200: $black-87-opacity,
|
||||
A400: $black-87-opacity,
|
||||
A700: $black-87-opacity,
|
||||
)
|
||||
);
|
||||
|
||||
$alfresco-warn: (
|
||||
50: #ffebee,
|
||||
100: #ffcdd2,
|
||||
@@ -39,7 +172,7 @@ $alfresco-warn: (
|
||||
)
|
||||
);
|
||||
|
||||
$alfresco-accent: (
|
||||
$alfresco-accent-purple: (
|
||||
50: #e8eaf6,
|
||||
100: #c5cae9,
|
||||
200: #9fa8da,
|
||||
@@ -72,7 +205,7 @@ $alfresco-accent: (
|
||||
)
|
||||
);
|
||||
|
||||
$alfresco-primary: (
|
||||
$alfresco-accent-orange: (
|
||||
50: #fff3e0,
|
||||
100: #ffe0b2,
|
||||
200: #ffcc80,
|
||||
@@ -104,42 +237,3 @@ $alfresco-primary: (
|
||||
A700: black,
|
||||
)
|
||||
);
|
||||
|
||||
$alfresco-primary-accent--default: #ff9100;
|
||||
$alfresco-primary-accent--hue-1: #ffd180;
|
||||
$alfresco-primary-accent--hue-2: #ffab40;
|
||||
$alfresco-primary-accent--hue-3: #ff6d00;
|
||||
|
||||
$alfresco-secondary-accent--default: #3d5afe;
|
||||
$alfresco-secondary-accent--hue-1: #8c9eff;
|
||||
$alfresco-secondary-accent--hue-2: #536dfe;
|
||||
$alfresco-secondary-accent--hue-3: #304ffe;
|
||||
|
||||
// Warn color palette
|
||||
$alfresco-warn-color--default: #ff1744;
|
||||
$alfresco-warn-color--hue-1: #ff8a80;
|
||||
$alfresco-warn-color--hue-2: #ff5252;
|
||||
$alfresco-warn-color--hue-3: #d50000;
|
||||
|
||||
// Grayscale
|
||||
$alfresco-white: #fff;
|
||||
$alfresco-black: #000;
|
||||
|
||||
// Dark
|
||||
$alfresco-dark-color--default: #78909c;
|
||||
$alfresco-dark-color--hue-1: #eceff1;
|
||||
$alfresco-dark-color--hue-3: #546e7a;
|
||||
|
||||
$alfresco-drop-shadow: #888888;
|
||||
|
||||
$alfresco-primary-text-color: rgba($alfresco-black, .87);
|
||||
$alfresco-secondary-text-color: rgba($alfresco-black, .54);
|
||||
|
||||
$alfresco-hint-text-color: rgba($alfresco-black, .38);
|
||||
$alfresco-disabled-text-color: rgba($alfresco-black, .26);
|
||||
|
||||
$alfresco-divider-color: rgba($alfresco-black, .07);
|
||||
|
||||
$alfresco-gray-background: #fafafa;
|
||||
|
||||
$alfresco-gray-label: rgb(186, 186, 186);
|
||||
|
||||
@@ -1,14 +0,0 @@
|
||||
@import 'colors';
|
||||
|
||||
$button-fab-color-alt: $alfresco-primary-accent--default;
|
||||
|
||||
$layout-header-mobile-row-height: 65px;
|
||||
$layout-header-desktop-row-height: 65px;
|
||||
|
||||
$layout-header-desktop-baseline: 25px;
|
||||
$layout-header-mobile-baseline: 25px;
|
||||
|
||||
/* snackBar */
|
||||
$md-snack-bar-container-background: $alfresco-white;
|
||||
$md-simple-snackbar-message: $alfresco-secondary-text-color;
|
||||
$md-simple-snackbar-action: $alfresco-primary-accent--hue-2;
|
||||
@@ -1,3 +1,5 @@
|
||||
@import 'variables';
|
||||
|
||||
@mixin no-select {
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
|
||||
@@ -0,0 +1,42 @@
|
||||
@mixin mat-colors-theme($theme) {
|
||||
|
||||
$primary: map-get($theme, primary);
|
||||
$accent: map-get($theme, accent);
|
||||
$warn: map-get($theme, warn);
|
||||
$background: map-get($theme, background);
|
||||
$foreground: map-get($theme, foreground);
|
||||
|
||||
.adf-primary-color {
|
||||
color: mat-color($primary) !important;
|
||||
}
|
||||
|
||||
.adf-accent-color {
|
||||
color: mat-color($accent) !important;
|
||||
}
|
||||
|
||||
.adf-warn-color {
|
||||
color: mat-color($warn) !important;
|
||||
}
|
||||
|
||||
.adf-background-color {
|
||||
background: mat-color($background, dialog) !important;
|
||||
}
|
||||
|
||||
.adf-primary-background-color {
|
||||
color: mat-color($primary, default-contrast) !important;
|
||||
background: mat-color($primary) !important;
|
||||
}
|
||||
|
||||
.adf-accent-background-color {
|
||||
color: mat-color($accent, default-contrast) !important;
|
||||
background: mat-color($accent) !important;
|
||||
}
|
||||
|
||||
.adf-primary-contrast-text-color {
|
||||
color: mat-color($primary, default-contrast) !important;
|
||||
}
|
||||
|
||||
.adf-accent-contrast-text-color {
|
||||
color: mat-color($accent, default-contrast) !important;
|
||||
}
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user