mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
39
lib/process-services/app-list/apps-list.component.html
Normal file
39
lib/process-services/app-list/apps-list.component.html
Normal file
@@ -0,0 +1,39 @@
|
||||
<div class="menu-container" *ngIf="!isEmpty()">
|
||||
<mat-list *ngIf="isList()" class="adf-app-list">
|
||||
<mat-list-item class="adf-app-list-item" (click)="selectApp(app)" (keyup.enter)="selectApp(app)" *ngFor="let app of appList" tabindex="0" role="button" title="{{app.name}}">
|
||||
<mat-icon matListIcon>touch_app</mat-icon>
|
||||
<span matLine>{{getAppName(app) | async}}</span>
|
||||
</mat-list-item>
|
||||
</mat-list>
|
||||
<div fxLayout="row wrap" *ngIf="isGrid()" class="adf-app-listgrid">
|
||||
<div *ngFor="let app of appList"
|
||||
class="adf-app-listgrid-item"
|
||||
fxFlex="33.33333%" fxFlex.lt-md="50%" fxFlex.lt-sm="100%">
|
||||
<mat-card tabindex="0"
|
||||
fxLayout="column"
|
||||
role="button"
|
||||
class="adf-app-listgrid-item-card"
|
||||
title="{{getAppName(app) | async}}"
|
||||
[ngClass]="[getTheme(app)]"
|
||||
(click)="selectApp(app)"
|
||||
(keyup.enter)="selectApp(app)">
|
||||
<div class="adf-app-listgrid-item-card-logo">
|
||||
<mat-icon class="adf-app-listgrid-item-card-logo-icon">{{getBackgroundIcon(app)}}</mat-icon>
|
||||
</div>
|
||||
<div mat-card-title class="adf-app-listgrid-item-card-title">
|
||||
<h1>{{getAppName(app) | async}}</h1>
|
||||
</div>
|
||||
<mat-card-subtitle class="adf-app-listgrid-item-card-subtitle" fxFlex="1 0 auto">
|
||||
<p>{{app.description}}</p>
|
||||
</mat-card-subtitle>
|
||||
|
||||
<mat-card-actions class="adf-app-listgrid-item-card-actions">
|
||||
<mat-icon class="adf-app-listgrid-item-card-actions-icon" *ngIf="isSelected(app.id)">done</mat-icon>
|
||||
</mat-card-actions>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-container" *ngIf="isEmpty()">
|
||||
{{ 'ADF_TASK_LIST.APPS.NONE' | translate }}
|
||||
</div>
|
101
lib/process-services/app-list/apps-list.component.scss
Normal file
101
lib/process-services/app-list/apps-list.component.scss
Normal file
@@ -0,0 +1,101 @@
|
||||
:host {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.adf-app-list-item {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
$themes: (
|
||||
theme-1: (bg: #269abc, color: #168aac),
|
||||
theme-2: (bg: #7da9b0, color: #6d99a0),
|
||||
theme-3: (bg: #7689ab, color: #66799b),
|
||||
theme-4: (bg: #c74e3e, color: #b73e2e),
|
||||
theme-5: (bg: #fab96c, color: #eaa95c),
|
||||
theme-6: (bg: #759d4c, color: #658d3c),
|
||||
theme-7: (bg: #b1b489, color: #a1a479),
|
||||
theme-8: (bg: #a17299, color: #916289),
|
||||
theme-9: (bg: #696c67, color: #595c57),
|
||||
theme-10: (bg: #cabb33, color: #baab23)
|
||||
);
|
||||
|
||||
.adf-app-listgrid {
|
||||
padding: 8px;
|
||||
|
||||
&-item {
|
||||
outline: none;
|
||||
padding: 8px;
|
||||
box-sizing: border-box;
|
||||
|
||||
&-card {
|
||||
|
||||
@for $i from 1 through 10 {
|
||||
&.theme-#{$i} {
|
||||
$theme: map-get($themes, theme-#{$i});
|
||||
background-color: map-get($theme, bg);
|
||||
}
|
||||
}
|
||||
|
||||
outline: none;
|
||||
transition: transform 280ms cubic-bezier(.4,0,.2,1), box-shadow 280ms cubic-bezier(.4,0,.2,1);
|
||||
min-height: 200px;
|
||||
padding: 0;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12), 0 5px 5px -3px rgba(0, 0, 0, .2);
|
||||
cursor: pointer;
|
||||
transform: scale(1.015);
|
||||
}
|
||||
|
||||
&-logo {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 20px;
|
||||
padding: 16px;
|
||||
|
||||
&-icon {
|
||||
font-size: 70px;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
|
||||
@for $i from 1 through 10 {
|
||||
.theme-#{$i} & {
|
||||
$theme: map-get($themes, theme-#{$i});
|
||||
color: map-get($theme, color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-title {
|
||||
padding: 16px;
|
||||
|
||||
h1 {
|
||||
color: white;
|
||||
width: 80%;
|
||||
font-size: 24px;
|
||||
margin: 0;
|
||||
line-height: normal;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
&-subtitle {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
&-actions {
|
||||
padding: 16px;
|
||||
border-top: 1px solid rgba(0,0,0,.1);
|
||||
min-height: 64px;
|
||||
box-sizing: border-box;
|
||||
|
||||
&-icon {
|
||||
color: #e9f1f3;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
241
lib/process-services/app-list/apps-list.component.spec.ts
Normal file
241
lib/process-services/app-list/apps-list.component.spec.ts
Normal file
@@ -0,0 +1,241 @@
|
||||
/*!
|
||||
* @license
|
||||
* Copyright 2016 Alfresco Software, Ltd.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { DebugElement } from '@angular/core';
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { By } from '@angular/platform-browser';
|
||||
import { AppsProcessService, CoreModule } from '@alfresco/core';
|
||||
import { Observable } from 'rxjs/Rx';
|
||||
|
||||
import { MaterialModule } from '../material.module';
|
||||
import { defaultApp, deployedApps, nonDeployedApps } from '../mock/apps-list.mock';
|
||||
import { AppsListComponent } from './apps-list.component';
|
||||
import { TranslateModule } from '@ngx-translate/core';
|
||||
|
||||
describe('AppsListComponent', () => {
|
||||
|
||||
let component: AppsListComponent;
|
||||
let fixture: ComponentFixture<AppsListComponent>;
|
||||
let debugElement: DebugElement;
|
||||
let service: AppsProcessService;
|
||||
let getAppsSpy: jasmine.Spy;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
imports: [
|
||||
CoreModule,
|
||||
MaterialModule,
|
||||
TranslateModule
|
||||
],
|
||||
declarations: [
|
||||
AppsListComponent
|
||||
],
|
||||
providers: [
|
||||
]
|
||||
}).compileComponents();
|
||||
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(AppsListComponent);
|
||||
component = fixture.componentInstance;
|
||||
debugElement = fixture.debugElement;
|
||||
|
||||
service = fixture.debugElement.injector.get(AppsProcessService);
|
||||
getAppsSpy = spyOn(service, 'getDeployedApplications').and.returnValue(Observable.of(deployedApps));
|
||||
});
|
||||
|
||||
it('should define layoutType with the default value', () => {
|
||||
component.layoutType = '';
|
||||
fixture.detectChanges();
|
||||
expect(component.isGrid()).toBe(true);
|
||||
});
|
||||
|
||||
it('should load apps on init', () => {
|
||||
fixture.detectChanges();
|
||||
expect(getAppsSpy).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should show the apps filtered by defaultAppId', () => {
|
||||
component.filtersAppId = [{defaultAppId: 'fake-app-1'}];
|
||||
fixture.detectChanges();
|
||||
expect(component.isEmpty()).toBe(false);
|
||||
expect(component.appList).toBeDefined();
|
||||
expect(component.appList.length).toEqual(1);
|
||||
});
|
||||
|
||||
it('should show the apps filtered by deploymentId', () => {
|
||||
component.filtersAppId = [{deploymentId: '4'}];
|
||||
fixture.detectChanges();
|
||||
expect(component.isEmpty()).toBe(false);
|
||||
expect(component.appList).toBeDefined();
|
||||
expect(component.appList.length).toEqual(1);
|
||||
expect(component.appList[0].deploymentId).toEqual('4');
|
||||
});
|
||||
|
||||
it('should show the apps filtered by name', () => {
|
||||
component.filtersAppId = [{name: 'App5'}];
|
||||
fixture.detectChanges();
|
||||
expect(component.isEmpty()).toBe(false);
|
||||
expect(component.appList).toBeDefined();
|
||||
expect(component.appList.length).toEqual(1);
|
||||
expect(component.appList[0].name).toEqual('App5');
|
||||
});
|
||||
|
||||
it('should show the apps filtered by id', () => {
|
||||
component.filtersAppId = [{id: 6}];
|
||||
fixture.detectChanges();
|
||||
expect(component.isEmpty()).toBe(false);
|
||||
expect(component.appList).toBeDefined();
|
||||
expect(component.appList.length).toEqual(1);
|
||||
expect(component.appList[0].id).toEqual(6);
|
||||
});
|
||||
|
||||
it('should show the apps filtered by modelId', () => {
|
||||
component.filtersAppId = [{modelId: 66}];
|
||||
fixture.detectChanges();
|
||||
expect(component.isEmpty()).toBe(false);
|
||||
expect(component.appList).toBeDefined();
|
||||
expect(component.appList.length).toEqual(2);
|
||||
expect(component.appList[0].modelId).toEqual(66);
|
||||
});
|
||||
|
||||
it('should show the apps filtered by tenandId', () => {
|
||||
component.filtersAppId = [{tenantId: 9}];
|
||||
fixture.detectChanges();
|
||||
expect(component.isEmpty()).toBe(false);
|
||||
expect(component.appList).toBeDefined();
|
||||
expect(component.appList.length).toEqual(2);
|
||||
expect(component.appList[0].tenantId).toEqual(9);
|
||||
});
|
||||
|
||||
it('should emit an error when an error occurs loading apps', () => {
|
||||
let emitSpy = spyOn(component.error, 'emit');
|
||||
getAppsSpy.and.returnValue(Observable.throw({}));
|
||||
fixture.detectChanges();
|
||||
expect(emitSpy).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
describe('internationalization', () => {
|
||||
|
||||
it('should provide a translation for the default application name, when app name is not provided', () => {
|
||||
const appDataMock = {
|
||||
defaultAppId: 'tasks',
|
||||
name: null
|
||||
};
|
||||
component.getAppName(appDataMock).subscribe((name) => {
|
||||
expect(name).toBe('ADF_TASK_LIST.APPS.TASK_APP_NAME');
|
||||
});
|
||||
});
|
||||
|
||||
it('should provide the application name, when it exists', () => {
|
||||
const appDataMock = {
|
||||
defaultAppId: 'uiu',
|
||||
name: 'the-name'
|
||||
};
|
||||
|
||||
component.getAppName(appDataMock).subscribe((name) => {
|
||||
expect(name).toBe(appDataMock.name);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('layout', () => {
|
||||
|
||||
it('should display a grid by default', () => {
|
||||
fixture.detectChanges();
|
||||
expect(component.isGrid()).toBe(true);
|
||||
expect(component.isList()).toBe(false);
|
||||
});
|
||||
|
||||
it('should display a grid when configured to', () => {
|
||||
component.layoutType = AppsListComponent.LAYOUT_GRID;
|
||||
fixture.detectChanges();
|
||||
expect(component.isGrid()).toBe(true);
|
||||
expect(component.isList()).toBe(false);
|
||||
});
|
||||
|
||||
it('should display a list when configured to', () => {
|
||||
component.layoutType = AppsListComponent.LAYOUT_LIST;
|
||||
fixture.detectChanges();
|
||||
expect(component.isGrid()).toBe(false);
|
||||
expect(component.isList()).toBe(true);
|
||||
});
|
||||
|
||||
it('should throw an exception on init if unknown type configured', () => {
|
||||
component.layoutType = 'unknown';
|
||||
expect(component.ngOnInit).toThrowError();
|
||||
});
|
||||
});
|
||||
|
||||
describe('display apps', () => {
|
||||
|
||||
it('should display all deployed apps', () => {
|
||||
getAppsSpy.and.returnValue(Observable.of(deployedApps));
|
||||
fixture.detectChanges();
|
||||
expect(debugElement.queryAll(By.css('h1')).length).toBe(6);
|
||||
});
|
||||
|
||||
it('should not display undeployed apps', () => {
|
||||
getAppsSpy.and.returnValue(Observable.of(nonDeployedApps));
|
||||
fixture.detectChanges();
|
||||
expect(debugElement.queryAll(By.css('h1')).length).toBe(0);
|
||||
});
|
||||
|
||||
it('should display default app', () => {
|
||||
getAppsSpy.and.returnValue(Observable.of(defaultApp));
|
||||
fixture.detectChanges();
|
||||
expect(debugElement.queryAll(By.css('h1')).length).toBe(1);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
describe('select apps', () => {
|
||||
|
||||
beforeEach(() => {
|
||||
getAppsSpy.and.returnValue(Observable.of(deployedApps));
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should initially have no app selected', () => {
|
||||
let selectedEls = debugElement.queryAll(By.css('.selectedIcon'));
|
||||
expect(selectedEls.length).toBe(0);
|
||||
});
|
||||
|
||||
it('should emit a click event when app selected', () => {
|
||||
spyOn(component.appClick, 'emit');
|
||||
component.selectApp(deployedApps[1]);
|
||||
expect(component.appClick.emit).toHaveBeenCalledWith(deployedApps[1]);
|
||||
});
|
||||
|
||||
it('should have one app shown as selected after app selected', () => {
|
||||
component.selectApp(deployedApps[1]);
|
||||
fixture.detectChanges();
|
||||
let selectedEls = debugElement.queryAll(By.css('.adf-app-listgrid-item-card-actions-icon'));
|
||||
expect(selectedEls.length).toBe(1);
|
||||
});
|
||||
|
||||
it('should have the correct app shown as selected after app selected', () => {
|
||||
component.selectApp(deployedApps[1]);
|
||||
fixture.detectChanges();
|
||||
let appEls = debugElement.queryAll(By.css('.adf-app-listgrid > div'));
|
||||
expect(appEls[1].query(By.css('.adf-app-listgrid-item-card-actions-icon'))).not.toBeNull();
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
});
|
194
lib/process-services/app-list/apps-list.component.ts
Normal file
194
lib/process-services/app-list/apps-list.component.ts
Normal file
@@ -0,0 +1,194 @@
|
||||
/*!
|
||||
* @license
|
||||
* Copyright 2016 Alfresco Software, Ltd.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { AppsProcessService, TranslationService } from '@alfresco/core';
|
||||
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
|
||||
import { Observable } from 'rxjs/Observable';
|
||||
import { Observer } from 'rxjs/Observer';
|
||||
import { AppDefinitionRepresentationModel } from '../task-list';
|
||||
import { IconModel } from './icon.model';
|
||||
|
||||
@Component({
|
||||
selector: 'adf-apps',
|
||||
templateUrl: 'apps-list.component.html',
|
||||
styleUrls: ['./apps-list.component.scss']
|
||||
})
|
||||
export class AppsListComponent implements OnInit {
|
||||
|
||||
public static LAYOUT_LIST: string = 'LIST';
|
||||
public static LAYOUT_GRID: string = 'GRID';
|
||||
public static DEFAULT_TASKS_APP: string = 'tasks';
|
||||
public static DEFAULT_TASKS_APP_NAME: string = 'ADF_TASK_LIST.APPS.TASK_APP_NAME';
|
||||
public static DEFAULT_TASKS_APP_THEME: string = 'theme-2';
|
||||
public static DEFAULT_TASKS_APP_ICON: string = 'glyphicon-asterisk';
|
||||
public static DEFAULT_TASKS_APP_MATERIAL_ICON: string = 'favorite_border';
|
||||
|
||||
@Input()
|
||||
layoutType: string = AppsListComponent.LAYOUT_GRID;
|
||||
|
||||
@Input()
|
||||
filtersAppId: any[];
|
||||
|
||||
@Output()
|
||||
appClick: EventEmitter<AppDefinitionRepresentationModel> = new EventEmitter<AppDefinitionRepresentationModel>();
|
||||
|
||||
@Output()
|
||||
error: EventEmitter<any> = new EventEmitter<any>();
|
||||
|
||||
private appsObserver: Observer<AppDefinitionRepresentationModel>;
|
||||
apps$: Observable<AppDefinitionRepresentationModel>;
|
||||
|
||||
currentApp: AppDefinitionRepresentationModel;
|
||||
|
||||
appList: AppDefinitionRepresentationModel [] = [];
|
||||
|
||||
private iconsMDL: IconModel;
|
||||
|
||||
constructor(
|
||||
private appsProcessService: AppsProcessService,
|
||||
private translationService: TranslationService) {
|
||||
this.apps$ = new Observable<AppDefinitionRepresentationModel>(observer => this.appsObserver = observer).share();
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
if (!this.isValidType()) {
|
||||
this.setDefaultLayoutType();
|
||||
}
|
||||
|
||||
this.apps$.subscribe((app: any) => {
|
||||
this.appList.push(app);
|
||||
});
|
||||
this.iconsMDL = new IconModel();
|
||||
this.load();
|
||||
}
|
||||
|
||||
private load() {
|
||||
this.appsProcessService.getDeployedApplications()
|
||||
.subscribe(
|
||||
(res: AppDefinitionRepresentationModel[]) => {
|
||||
this.filterApps(res).forEach((app: AppDefinitionRepresentationModel) => {
|
||||
if (this.isDefaultApp(app)) {
|
||||
app.theme = AppsListComponent.DEFAULT_TASKS_APP_THEME;
|
||||
app.icon = AppsListComponent.DEFAULT_TASKS_APP_ICON;
|
||||
this.appsObserver.next(app);
|
||||
} else if (app.deploymentId) {
|
||||
this.appsObserver.next(app);
|
||||
}
|
||||
});
|
||||
},
|
||||
(err) => {
|
||||
this.error.emit(err);
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
isDefaultApp(app) {
|
||||
return app.defaultAppId === AppsListComponent.DEFAULT_TASKS_APP;
|
||||
}
|
||||
|
||||
getAppName(app) {
|
||||
return this.isDefaultApp(app)
|
||||
? this.translationService.get(AppsListComponent.DEFAULT_TASKS_APP_NAME)
|
||||
: Observable.of(app.name);
|
||||
}
|
||||
|
||||
/**
|
||||
* Pass the selected app as next
|
||||
* @param app
|
||||
*/
|
||||
public selectApp(app: AppDefinitionRepresentationModel) {
|
||||
this.currentApp = app;
|
||||
this.appClick.emit(app);
|
||||
}
|
||||
|
||||
/**
|
||||
* Return true if the appId is the current app
|
||||
* @param appId
|
||||
* @returns {boolean}
|
||||
*/
|
||||
isSelected(appId: number): boolean {
|
||||
return (this.currentApp !== undefined && appId === this.currentApp.id);
|
||||
}
|
||||
|
||||
private filterApps(apps: AppDefinitionRepresentationModel []): AppDefinitionRepresentationModel[] {
|
||||
let filteredApps: AppDefinitionRepresentationModel[] = [];
|
||||
if (this.filtersAppId) {
|
||||
apps.filter((app: AppDefinitionRepresentationModel) => {
|
||||
this.filtersAppId.forEach((filter) => {
|
||||
if (app.defaultAppId === filter.defaultAppId ||
|
||||
app.deploymentId === filter.deploymentId ||
|
||||
app.name === filter.name ||
|
||||
app.id === filter.id ||
|
||||
app.modelId === filter.modelId ||
|
||||
app.tenantId === filter.tenantId) {
|
||||
filteredApps.push(app);
|
||||
}
|
||||
});
|
||||
});
|
||||
} else {
|
||||
return apps;
|
||||
}
|
||||
return filteredApps;
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if the value of the layoutType property is an allowed value
|
||||
* @returns {boolean}
|
||||
*/
|
||||
isValidType(): boolean {
|
||||
if (this.layoutType && (this.layoutType === AppsListComponent.LAYOUT_LIST || this.layoutType === AppsListComponent.LAYOUT_GRID)) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Assign the default value to LayoutType
|
||||
*/
|
||||
setDefaultLayoutType(): void {
|
||||
this.layoutType = AppsListComponent.LAYOUT_GRID;
|
||||
}
|
||||
|
||||
/**
|
||||
* Return true if the layout type is LIST
|
||||
* @returns {boolean}
|
||||
*/
|
||||
isList(): boolean {
|
||||
return this.layoutType === AppsListComponent.LAYOUT_LIST;
|
||||
}
|
||||
|
||||
/**
|
||||
* Return true if the layout type is GRID
|
||||
* @returns {boolean}
|
||||
*/
|
||||
isGrid(): boolean {
|
||||
return this.layoutType === AppsListComponent.LAYOUT_GRID;
|
||||
}
|
||||
|
||||
isEmpty(): boolean {
|
||||
return this.appList.length === 0;
|
||||
}
|
||||
|
||||
getTheme(app: AppDefinitionRepresentationModel): string {
|
||||
return app.theme ? app.theme : '';
|
||||
}
|
||||
|
||||
getBackgroundIcon(app: AppDefinitionRepresentationModel): string {
|
||||
return this.iconsMDL.mapGlyphiconToMaterialDesignIcons(app.icon);
|
||||
}
|
||||
|
||||
}
|
40
lib/process-services/app-list/apps-list.module.ts
Normal file
40
lib/process-services/app-list/apps-list.module.ts
Normal file
@@ -0,0 +1,40 @@
|
||||
/*!
|
||||
* @license
|
||||
* Copyright 2016 Alfresco Software, Ltd.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { NgModule } from '@angular/core';
|
||||
import { MaterialModule } from '../material.module';
|
||||
import { TranslateModule } from '@ngx-translate/core';
|
||||
|
||||
import { AppsListComponent } from './apps-list.component';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
MaterialModule,
|
||||
TranslateModule
|
||||
],
|
||||
declarations: [
|
||||
AppsListComponent
|
||||
],
|
||||
providers: [],
|
||||
exports: [
|
||||
AppsListComponent
|
||||
]
|
||||
})
|
||||
export class AppsListModule {
|
||||
}
|
162
lib/process-services/app-list/icon.model.ts
Normal file
162
lib/process-services/app-list/icon.model.ts
Normal file
@@ -0,0 +1,162 @@
|
||||
/*!
|
||||
* @license
|
||||
* Copyright 2016 Alfresco Software, Ltd.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
export class IconModel {
|
||||
public static DEFAULT_TASKS_APP_MATERIAL_ICON: string = 'favorite_border';
|
||||
|
||||
private iconsMDL: Map<string, string>;
|
||||
|
||||
constructor() {
|
||||
this.initIconsMDL();
|
||||
}
|
||||
|
||||
mapGlyphiconToMaterialDesignIcons(icon: string) {
|
||||
return this.iconsMDL.get(icon) ? this.iconsMDL.get(icon) : IconModel.DEFAULT_TASKS_APP_MATERIAL_ICON;
|
||||
}
|
||||
|
||||
/**
|
||||
* Map all the bootstrap glyphicon icons with Material design material icon
|
||||
*/
|
||||
initIconsMDL() {
|
||||
this.iconsMDL = new Map<string, string>();
|
||||
|
||||
this.iconsMDL.set('glyphicon-asterisk', 'ac_unit');
|
||||
this.iconsMDL.set('glyphicon-plus', 'add');
|
||||
this.iconsMDL.set('glyphicon-euro', 'euro_symbol');
|
||||
this.iconsMDL.set('glyphicon-cloud', 'cloud');
|
||||
this.iconsMDL.set('glyphicon-envelope', 'mail');
|
||||
this.iconsMDL.set('glyphicon-pencil', 'create');
|
||||
this.iconsMDL.set('glyphicon-glass', 'local_bar');
|
||||
this.iconsMDL.set('glyphicon-music', 'music_note');
|
||||
this.iconsMDL.set('glyphicon-search', 'search');
|
||||
this.iconsMDL.set('glyphicon-heart', 'favorite');
|
||||
this.iconsMDL.set('glyphicon-heart-empty', 'favorite_border');
|
||||
this.iconsMDL.set('glyphicon-star', 'star');
|
||||
this.iconsMDL.set('glyphicon-star-empty', 'star_border');
|
||||
this.iconsMDL.set('glyphicon-user', 'person');
|
||||
this.iconsMDL.set('glyphicon-film', 'movie_creation');
|
||||
this.iconsMDL.set('glyphicon-th-large', 'view_comfy');
|
||||
this.iconsMDL.set('glyphicon-th', 'view_compact');
|
||||
this.iconsMDL.set('glyphicon-th-list', 'list');
|
||||
this.iconsMDL.set('glyphicon-ok', 'done');
|
||||
this.iconsMDL.set('glyphicon-remove', 'cancel');
|
||||
this.iconsMDL.set('glyphicon-zoom-in', 'zoom_in');
|
||||
this.iconsMDL.set('glyphicon-zoom-out', 'zoom_out');
|
||||
this.iconsMDL.set('glyphicon-off', 'highlight_off');
|
||||
this.iconsMDL.set('glyphicon-signal', 'signal_cellular_4_bar');
|
||||
this.iconsMDL.set('glyphicon-cog', 'settings');
|
||||
this.iconsMDL.set('glyphicon-trash', 'delete');
|
||||
this.iconsMDL.set('glyphicon-home', 'home');
|
||||
this.iconsMDL.set('glyphicon-file', 'insert_drive_file');
|
||||
this.iconsMDL.set('glyphicon-time', 'access_time');
|
||||
this.iconsMDL.set('glyphicon-road', 'map');
|
||||
this.iconsMDL.set('glyphicon-download-alt', 'file_download');
|
||||
this.iconsMDL.set('glyphicon-download', 'file_download');
|
||||
this.iconsMDL.set('glyphicon-upload', 'file_upload');
|
||||
this.iconsMDL.set('glyphicon-inbox', 'inbox');
|
||||
this.iconsMDL.set('glyphicon-play-circle', 'play_circle_outline');
|
||||
this.iconsMDL.set('glyphicon-repeat', 'refresh');
|
||||
this.iconsMDL.set('glyphicon-refresh', 'sync');
|
||||
this.iconsMDL.set('glyphicon-list-alt', 'event_note');
|
||||
this.iconsMDL.set('glyphicon-lock', 'lock_outline');
|
||||
this.iconsMDL.set('glyphicon-flag', 'assistant_photo');
|
||||
this.iconsMDL.set('glyphicon-headphones', 'headset');
|
||||
this.iconsMDL.set('glyphicon-volume-up', 'volume_up');
|
||||
this.iconsMDL.set('glyphicon-tag', 'local_offer');
|
||||
this.iconsMDL.set('glyphicon-tags', 'local_offer');
|
||||
this.iconsMDL.set('glyphicon-book', 'library_books');
|
||||
this.iconsMDL.set('glyphicon-bookmark', 'collections_bookmark');
|
||||
this.iconsMDL.set('glyphicon-print', 'local_printshop');
|
||||
this.iconsMDL.set('glyphicon-camera', 'local_see');
|
||||
this.iconsMDL.set('glyphicon-list', 'view_list');
|
||||
this.iconsMDL.set('glyphicon-facetime-video', 'video_call');
|
||||
this.iconsMDL.set('glyphicon-picture', 'photo');
|
||||
this.iconsMDL.set('glyphicon-map-marker', 'add_location');
|
||||
this.iconsMDL.set('glyphicon-adjust', 'brightness_4');
|
||||
this.iconsMDL.set('glyphicon-tint', 'invert_colors');
|
||||
this.iconsMDL.set('glyphicon-edit', 'edit');
|
||||
this.iconsMDL.set('glyphicon-share', 'share');
|
||||
this.iconsMDL.set('glyphicon-check', 'assignment_turned_in');
|
||||
this.iconsMDL.set('glyphicon-move', 'open_with');
|
||||
this.iconsMDL.set('glyphicon-play', 'play_arrow');
|
||||
this.iconsMDL.set('glyphicon-eject', 'eject');
|
||||
this.iconsMDL.set('glyphicon-plus-sign', 'add_circle');
|
||||
this.iconsMDL.set('glyphicon-minus-sign', 'remove_circle');
|
||||
this.iconsMDL.set('glyphicon-remove-sign', 'cancel');
|
||||
this.iconsMDL.set('glyphicon-ok-sign', 'check_circle');
|
||||
this.iconsMDL.set('glyphicon-question-sign', 'help');
|
||||
this.iconsMDL.set('glyphicon-info-sign', 'info');
|
||||
this.iconsMDL.set('glyphicon-screenshot', 'flare');
|
||||
this.iconsMDL.set('glyphicon-remove-circle', 'cancel');
|
||||
this.iconsMDL.set('glyphicon-ok-circle', 'add_circle');
|
||||
this.iconsMDL.set('glyphicon-ban-circle', 'block');
|
||||
this.iconsMDL.set('glyphicon-share-alt', 'redo');
|
||||
this.iconsMDL.set('glyphicon-exclamation-sign', 'error');
|
||||
this.iconsMDL.set('glyphicon-gift', 'giftcard');
|
||||
this.iconsMDL.set('glyphicon-leaf', 'spa');
|
||||
this.iconsMDL.set('glyphicon-fire', 'whatshot');
|
||||
this.iconsMDL.set('glyphicon-eye-open', 'remove_red_eye');
|
||||
this.iconsMDL.set('glyphicon-eye-close', 'remove_red_eye');
|
||||
this.iconsMDL.set('glyphicon-warning-sign', 'warning');
|
||||
this.iconsMDL.set('glyphicon-plane', 'airplanemode_active');
|
||||
this.iconsMDL.set('glyphicon-calendar', IconModel.DEFAULT_TASKS_APP_MATERIAL_ICON);
|
||||
this.iconsMDL.set('glyphicon-random', IconModel.DEFAULT_TASKS_APP_MATERIAL_ICON);
|
||||
this.iconsMDL.set('glyphicon-comment', IconModel.DEFAULT_TASKS_APP_MATERIAL_ICON);
|
||||
this.iconsMDL.set('glyphicon-magnet', IconModel.DEFAULT_TASKS_APP_MATERIAL_ICON);
|
||||
this.iconsMDL.set('glyphicon-retweet', IconModel.DEFAULT_TASKS_APP_MATERIAL_ICON);
|
||||
this.iconsMDL.set('glyphicon-shopping-cart', IconModel.DEFAULT_TASKS_APP_MATERIAL_ICON);
|
||||
this.iconsMDL.set('glyphicon-folder-close', IconModel.DEFAULT_TASKS_APP_MATERIAL_ICON);
|
||||
this.iconsMDL.set('glyphicon-folder-open', IconModel.DEFAULT_TASKS_APP_MATERIAL_ICON);
|
||||
this.iconsMDL.set('glyphicon-hdd', IconModel.DEFAULT_TASKS_APP_MATERIAL_ICON);
|
||||
this.iconsMDL.set('glyphicon-bullhorn', IconModel.DEFAULT_TASKS_APP_MATERIAL_ICON);
|
||||
this.iconsMDL.set('glyphicon-bell', IconModel.DEFAULT_TASKS_APP_MATERIAL_ICON);
|
||||
this.iconsMDL.set('glyphicon-certificate', IconModel.DEFAULT_TASKS_APP_MATERIAL_ICON);
|
||||
this.iconsMDL.set('glyphicon-thumbs-up', IconModel.DEFAULT_TASKS_APP_MATERIAL_ICON);
|
||||
this.iconsMDL.set('glyphicon-thumbs-down', IconModel.DEFAULT_TASKS_APP_MATERIAL_ICON);
|
||||
this.iconsMDL.set('glyphicon-hand-left', IconModel.DEFAULT_TASKS_APP_MATERIAL_ICON);
|
||||
this.iconsMDL.set('glyphicon-globe', IconModel.DEFAULT_TASKS_APP_MATERIAL_ICON);
|
||||
this.iconsMDL.set('glyphicon-wrench', IconModel.DEFAULT_TASKS_APP_MATERIAL_ICON);
|
||||
this.iconsMDL.set('glyphicon-tasks', IconModel.DEFAULT_TASKS_APP_MATERIAL_ICON);
|
||||
this.iconsMDL.set('glyphicon-filter', IconModel.DEFAULT_TASKS_APP_MATERIAL_ICON);
|
||||
this.iconsMDL.set('glyphicon-briefcase', IconModel.DEFAULT_TASKS_APP_MATERIAL_ICON);
|
||||
this.iconsMDL.set('glyphicon-dashboard', IconModel.DEFAULT_TASKS_APP_MATERIAL_ICON);
|
||||
this.iconsMDL.set('glyphicon-paperclip', IconModel.DEFAULT_TASKS_APP_MATERIAL_ICON);
|
||||
this.iconsMDL.set('glyphicon-link', IconModel.DEFAULT_TASKS_APP_MATERIAL_ICON);
|
||||
this.iconsMDL.set('glyphicon-phone', IconModel.DEFAULT_TASKS_APP_MATERIAL_ICON);
|
||||
this.iconsMDL.set('glyphicon-pushpin', IconModel.DEFAULT_TASKS_APP_MATERIAL_ICON);
|
||||
this.iconsMDL.set('glyphicon-usd', IconModel.DEFAULT_TASKS_APP_MATERIAL_ICON);
|
||||
this.iconsMDL.set('glyphicon-gbp', IconModel.DEFAULT_TASKS_APP_MATERIAL_ICON);
|
||||
this.iconsMDL.set('glyphicon-sort', IconModel.DEFAULT_TASKS_APP_MATERIAL_ICON);
|
||||
this.iconsMDL.set('glyphicon-flash', IconModel.DEFAULT_TASKS_APP_MATERIAL_ICON);
|
||||
this.iconsMDL.set('glyphicon-record', IconModel.DEFAULT_TASKS_APP_MATERIAL_ICON);
|
||||
this.iconsMDL.set('glyphicon-save', IconModel.DEFAULT_TASKS_APP_MATERIAL_ICON);
|
||||
this.iconsMDL.set('glyphicon-open', IconModel.DEFAULT_TASKS_APP_MATERIAL_ICON);
|
||||
this.iconsMDL.set('glyphicon-saved', IconModel.DEFAULT_TASKS_APP_MATERIAL_ICON);
|
||||
this.iconsMDL.set('glyphicon-send', 'send');
|
||||
this.iconsMDL.set('glyphicon-floppy-disk', IconModel.DEFAULT_TASKS_APP_MATERIAL_ICON);
|
||||
this.iconsMDL.set('glyphicon-credit-card', IconModel.DEFAULT_TASKS_APP_MATERIAL_ICON);
|
||||
this.iconsMDL.set('glyphicon-cutlery', IconModel.DEFAULT_TASKS_APP_MATERIAL_ICON);
|
||||
this.iconsMDL.set('glyphicon-earphone', IconModel.DEFAULT_TASKS_APP_MATERIAL_ICON);
|
||||
this.iconsMDL.set('glyphicon-phone-alt', IconModel.DEFAULT_TASKS_APP_MATERIAL_ICON);
|
||||
this.iconsMDL.set('glyphicon-tower', IconModel.DEFAULT_TASKS_APP_MATERIAL_ICON);
|
||||
this.iconsMDL.set('glyphicon-stats', IconModel.DEFAULT_TASKS_APP_MATERIAL_ICON);
|
||||
this.iconsMDL.set('glyphicon-cloud-download', IconModel.DEFAULT_TASKS_APP_MATERIAL_ICON);
|
||||
this.iconsMDL.set('glyphicon-cloud-upload', IconModel.DEFAULT_TASKS_APP_MATERIAL_ICON);
|
||||
this.iconsMDL.set('glyphicon-tree-conifer', IconModel.DEFAULT_TASKS_APP_MATERIAL_ICON);
|
||||
this.iconsMDL.set('glyphicon-tree-deciduous', IconModel.DEFAULT_TASKS_APP_MATERIAL_ICON);
|
||||
}
|
||||
}
|
18
lib/process-services/app-list/index.ts
Normal file
18
lib/process-services/app-list/index.ts
Normal file
@@ -0,0 +1,18 @@
|
||||
/*!
|
||||
* @license
|
||||
* Copyright 2016 Alfresco Software, Ltd.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
export * from './public-api';
|
20
lib/process-services/app-list/public-api.ts
Normal file
20
lib/process-services/app-list/public-api.ts
Normal file
@@ -0,0 +1,20 @@
|
||||
/*!
|
||||
* @license
|
||||
* Copyright 2016 Alfresco Software, Ltd.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
export * from './apps-list.component';
|
||||
|
||||
export * from './apps-list.module';
|
Reference in New Issue
Block a user