Merge pull request #810 from Alfresco/dev-mvitale-804

Add custom color and icon

ng2-components/ng2-activiti-processlist/src/models/filter.model.ts

@@ -28,6 +28,7 @@ export class AppDefinitionRepresentationModel {
     name: string;
     description: string;
     theme: string;
+    icon: string;
     id: number;
     modelId: number;
     tenantId: number;
@@ -38,6 +39,7 @@ export class AppDefinitionRepresentationModel {
         this.name = obj && obj.name || null;
         this.description = obj && obj.description || null;
         this.theme = obj && obj.theme || null;
+        this.icon = obj && obj.icon || null;
         this.id = obj && obj.id;
         this.modelId = obj && obj.modelId;
         this.tenantId = obj && obj.tenantId;

ng2-components/ng2-activiti-tasklist/src/components/activiti-apps.component.css

@@ -1,3 +1,134 @@
 :host {
     width: 100%;
 }
+.logo {
+    position: absolute;
+    right: 20px;
+    top: 20px;
+}
+.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;
+}
+.theme-2 {
+    background-color: #7da9b0;
+}
+.theme-2 .logo i {
+    color: #6d99a0;
+}
+.theme-2 .mdl-card__actions i {
+    color: #6d99a0;
+}
+.theme-2 .mdl-card__actions i:hover {
+ color: #def2f5;
+}
+.theme-3 {
+    background-color: #7689ab;
+}
+.theme-3 .logo i {
+    color: #66799b;
+}
+.theme-3 .mdl-card__actions i {
+    color: #66799b;
+}
+.theme-3 .mdl-card__actions i:hover {
+    color: #a2b4d6;
+}
+.theme-4 {
+    background-color: #c74e3e;
+}
+.theme-4 .logo i {
+    color: #b73e2e;
+}
+.theme-4 .mdl-card__actions i {
+    color: #b73e2e;
+}
+.theme-4 .mdl-card__actions i:hover {
+    color: #de8b80;
+}
+.theme-5 {
+    background-color: #fab96c;
+}
+.theme-5 .logo i {
+    color: #eaa95c;
+}
+.theme-5 .mdl-card__actions i {
+    color: #eaa95c;
+}
+.theme-5 .mdl-card__actions i:hover {
+    color: #fdd9ae;
+}
+.theme-6 {
+    background-color: #759d4c;
+}
+.theme-6 .logo i {
+    color: #658d3c;
+}
+.theme-6 .mdl-card__actions i {
+    color: #658d3c;
+}
+.theme-6 .mdl-card__actions i:hover {
+    color: #a8d07f;
+}
+.theme-7 {
+    background-color: #b1b489;
+}
+.theme-7 .logo i {
+    color: #a1a479;
+}
+.theme-7 .mdl-card__actions i {
+    color: #a1a479;
+}
+.theme-7 .mdl-card__actions i:hover {
+    color: #d9dcb2;
+}
+.theme-8 {
+    background-color: #a17299;
+}
+.theme-8 .logo i {
+    color: #916289;
+}
+.theme-8 .mdl-card__actions i {
+    color: #916289;
+}
+.theme-8 .mdl-card__actions i:hover {
+    color: #d0a8c9;
+}
+.theme-9 {
+    background-color: #696c67;
+}
+.theme-9 .logo i {
+    color: #595c57;
+}
+.theme-9 .mdl-card__actions i {
+    color: #595c57;
+}
+.theme-9 .mdl-card__actions i:hover {
+    color: #a6a9a4;
+}
+.theme-10 {
+    background-color: #cabb33;
+}
+.theme-10 .logo i {
+    color: #baab23;
+}
+.theme-10 .mdl-card__actions i {
+    color: #baab23;
+}
+.theme-10 .mdl-card__actions i:hover {
+    color: #efe79e;
+}
+.selectedIcon{
+    color: #e9f1f3!important;
+}

ng2-components/ng2-activiti-tasklist/src/components/activiti-apps.component.html

@@ -8,7 +8,8 @@
         </li>
     </ul>
     <div class="mdl-grid" *ngIf="isGrid()">
-        <div (click)="selectApp(app)" class="mdl-card mdl-cell mdl-cell--3-col mdl-cell--3-col-tablet mdl-shadow--2dp" *ngFor="let app of appList">
+        <div (click)="selectApp(app)" [ngClass]="['mdl-card mdl-cell',  getTheme(app)]" *ngFor="let app of appList">
+            <div class="logo"><i class="material-icons">{{getBackgroundIcon(app)}}</i></div>
             <div class="mdl-card__title">
                 <h1 class="mdl-card__title-text">{{app.name}}</h1>
             </div>
@@ -16,7 +17,7 @@
                 <p>{{app.description}}</p>
             </div>
             <div class="mdl-card__actions mdl-card--border">
-                <i class="material-icons" *ngIf="isSelected(app.id)">done</i>
+                <i class="material-icons selectedIcon" *ngIf="isSelected(app.id)">done</i>
                 <div class="mdl-layout-spacer"></div>
                 <button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">delete</i></button>
                 <button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">favorite</i></button>

ng2-components/ng2-activiti-tasklist/src/components/activiti-apps.component.ts

@@ -19,6 +19,7 @@ import { Component, OnInit, Output, EventEmitter, Input } from '@angular/core';
 import { AlfrescoTranslationService, AlfrescoAuthenticationService } from 'ng2-alfresco-core';
 import { ActivitiTaskListService } from './../services/activiti-tasklist.service';
 import { AppDefinitionRepresentationModel } from '../models/filter.model';
+import { IconModel } from '../models/icon.model';
 import { Observer } from 'rxjs/Observer';
 import { Observable } from 'rxjs/Observable';
 
@@ -38,6 +39,9 @@ export class ActivitiApps implements OnInit {
     public static LAYOUT_GRID: string = 'GRID';
     public static DEFAULT_TASKS_APP: string = 'tasks';
     public static DEFAULT_TASKS_APP_NAME: string = 'Task App';
+    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 = ActivitiApps.LAYOUT_GRID;
@@ -52,6 +56,8 @@ export class ActivitiApps implements OnInit {
 
     appList: AppDefinitionRepresentationModel [] = [];
 
+    private iconsMDL: IconModel;
+
     /**
      * Constructor
      * @param auth
@@ -76,6 +82,7 @@ export class ActivitiApps implements OnInit {
         this.apps$.subscribe((app: any) => {
             this.appList.push(app);
         });
+        this.iconsMDL = new IconModel();
         this.load();
     }
 
@@ -85,6 +92,8 @@ export class ActivitiApps implements OnInit {
                 res.forEach((app: AppDefinitionRepresentationModel) => {
                     if (app.defaultAppId === ActivitiApps.DEFAULT_TASKS_APP) {
                         app.name = ActivitiApps.DEFAULT_TASKS_APP_NAME;
+                        app.theme = ActivitiApps.DEFAULT_TASKS_APP_THEME;
+                        app.icon = ActivitiApps.DEFAULT_TASKS_APP_ICON;
                         this.appsObserver.next(app);
                         this.selectApp(app);
                     } else if (app.deploymentId) {
@@ -146,4 +155,13 @@ export class ActivitiApps implements OnInit {
     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);
+    }
+
 }

ng2-components/ng2-activiti-tasklist/src/models/filter.model.ts

@@ -28,6 +28,7 @@ export class AppDefinitionRepresentationModel {
     name: string;
     description: string;
     theme: string;
+    icon: string;
     id: number;
     modelId: number;
     tenantId: number;
@@ -38,6 +39,7 @@ export class AppDefinitionRepresentationModel {
         this.name = obj && obj.name || null;
         this.description = obj && obj.description || null;
         this.theme = obj && obj.theme || null;
+        this.icon = obj && obj.icon || null;
         this.id = obj && obj.id;
         this.modelId = obj && obj.modelId;
         this.tenantId = obj && obj.tenantId;

ng2-components/ng2-activiti-tasklist/src/models/icon.model.ts

@@ -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', IconModel.DEFAULT_TASKS_APP_MATERIAL_ICON);
+        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);
+    }
+}