diff --git a/ng2-components/ng2-activiti-processlist/src/models/filter.model.ts b/ng2-components/ng2-activiti-processlist/src/models/filter.model.ts index fd706963d4..e54579410b 100644 --- a/ng2-components/ng2-activiti-processlist/src/models/filter.model.ts +++ b/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; diff --git a/ng2-components/ng2-activiti-tasklist/src/components/activiti-apps.component.css b/ng2-components/ng2-activiti-tasklist/src/components/activiti-apps.component.css index 07eaf92d80..fc2d10f8f5 100644 --- a/ng2-components/ng2-activiti-tasklist/src/components/activiti-apps.component.css +++ b/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; } \ No newline at end of file diff --git a/ng2-components/ng2-activiti-tasklist/src/components/activiti-apps.component.html b/ng2-components/ng2-activiti-tasklist/src/components/activiti-apps.component.html index 74876b2ddc..64e240a8dc 100644 --- a/ng2-components/ng2-activiti-tasklist/src/components/activiti-apps.component.html +++ b/ng2-components/ng2-activiti-tasklist/src/components/activiti-apps.component.html @@ -8,7 +8,8 @@
-
+
+

{{app.name}}

@@ -16,7 +17,7 @@

{{app.description}}

- done + done
diff --git a/ng2-components/ng2-activiti-tasklist/src/components/activiti-apps.component.ts b/ng2-components/ng2-activiti-tasklist/src/components/activiti-apps.component.ts index 75b8949d73..2a9ef2f451 100644 --- a/ng2-components/ng2-activiti-tasklist/src/components/activiti-apps.component.ts +++ b/ng2-components/ng2-activiti-tasklist/src/components/activiti-apps.component.ts @@ -38,6 +38,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 +55,8 @@ export class ActivitiApps implements OnInit { appList: AppDefinitionRepresentationModel [] = []; + private iconsMDL: Map; + /** * Constructor * @param auth @@ -76,6 +81,7 @@ export class ActivitiApps implements OnInit { this.apps$.subscribe((app: any) => { this.appList.push(app); }); + this.initIconsMDL(); this.load(); } @@ -85,6 +91,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 +154,149 @@ 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.mapGlyphiconToMaterialDesignIcons(app.icon); + } + + mapGlyphiconToMaterialDesignIcons(icon: string) { + return this.iconsMDL.get(icon) ? this.iconsMDL.get(icon) : ActivitiApps.DEFAULT_TASKS_APP_MATERIAL_ICON; + } + + /** + * Map all the bootstrap glyphicon icons with Material design material icon + */ + initIconsMDL() { + this.iconsMDL = new Map(); + + 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', ActivitiApps.DEFAULT_TASKS_APP_MATERIAL_ICON); + this.iconsMDL.set('glyphicon-random', ActivitiApps.DEFAULT_TASKS_APP_MATERIAL_ICON); + this.iconsMDL.set('glyphicon-comment', ActivitiApps.DEFAULT_TASKS_APP_MATERIAL_ICON); + this.iconsMDL.set('glyphicon-magnet', ActivitiApps.DEFAULT_TASKS_APP_MATERIAL_ICON); + this.iconsMDL.set('glyphicon-retweet', ActivitiApps.DEFAULT_TASKS_APP_MATERIAL_ICON); + this.iconsMDL.set('glyphicon-shopping-cart', ActivitiApps.DEFAULT_TASKS_APP_MATERIAL_ICON); + this.iconsMDL.set('glyphicon-folder-close', ActivitiApps.DEFAULT_TASKS_APP_MATERIAL_ICON); + this.iconsMDL.set('glyphicon-folder-open', ActivitiApps.DEFAULT_TASKS_APP_MATERIAL_ICON); + this.iconsMDL.set('glyphicon-hdd', ActivitiApps.DEFAULT_TASKS_APP_MATERIAL_ICON); + this.iconsMDL.set('glyphicon-bullhorn', ActivitiApps.DEFAULT_TASKS_APP_MATERIAL_ICON); + this.iconsMDL.set('glyphicon-bell', ActivitiApps.DEFAULT_TASKS_APP_MATERIAL_ICON); + this.iconsMDL.set('glyphicon-certificate', ActivitiApps.DEFAULT_TASKS_APP_MATERIAL_ICON); + this.iconsMDL.set('glyphicon-thumbs-up', ActivitiApps.DEFAULT_TASKS_APP_MATERIAL_ICON); + this.iconsMDL.set('glyphicon-thumbs-down', ActivitiApps.DEFAULT_TASKS_APP_MATERIAL_ICON); + this.iconsMDL.set('glyphicon-hand-left', ActivitiApps.DEFAULT_TASKS_APP_MATERIAL_ICON); + this.iconsMDL.set('glyphicon-globe', ActivitiApps.DEFAULT_TASKS_APP_MATERIAL_ICON); + this.iconsMDL.set('glyphicon-wrench', ActivitiApps.DEFAULT_TASKS_APP_MATERIAL_ICON); + this.iconsMDL.set('glyphicon-tasks', ActivitiApps.DEFAULT_TASKS_APP_MATERIAL_ICON); + this.iconsMDL.set('glyphicon-filter', ActivitiApps.DEFAULT_TASKS_APP_MATERIAL_ICON); + this.iconsMDL.set('glyphicon-briefcase', ActivitiApps.DEFAULT_TASKS_APP_MATERIAL_ICON); + this.iconsMDL.set('glyphicon-dashboard', ActivitiApps.DEFAULT_TASKS_APP_MATERIAL_ICON); + this.iconsMDL.set('glyphicon-paperclip', ActivitiApps.DEFAULT_TASKS_APP_MATERIAL_ICON); + this.iconsMDL.set('glyphicon-link', ActivitiApps.DEFAULT_TASKS_APP_MATERIAL_ICON); + this.iconsMDL.set('glyphicon-phone', ActivitiApps.DEFAULT_TASKS_APP_MATERIAL_ICON); + this.iconsMDL.set('glyphicon-pushpin', ActivitiApps.DEFAULT_TASKS_APP_MATERIAL_ICON); + this.iconsMDL.set('glyphicon-usd', ActivitiApps.DEFAULT_TASKS_APP_MATERIAL_ICON); + this.iconsMDL.set('glyphicon-gbp', ActivitiApps.DEFAULT_TASKS_APP_MATERIAL_ICON); + this.iconsMDL.set('glyphicon-sort', ActivitiApps.DEFAULT_TASKS_APP_MATERIAL_ICON); + this.iconsMDL.set('glyphicon-flash', ActivitiApps.DEFAULT_TASKS_APP_MATERIAL_ICON); + this.iconsMDL.set('glyphicon-record', ActivitiApps.DEFAULT_TASKS_APP_MATERIAL_ICON); + this.iconsMDL.set('glyphicon-save', ActivitiApps.DEFAULT_TASKS_APP_MATERIAL_ICON); + this.iconsMDL.set('glyphicon-open', ActivitiApps.DEFAULT_TASKS_APP_MATERIAL_ICON); + this.iconsMDL.set('glyphicon-saved', ActivitiApps.DEFAULT_TASKS_APP_MATERIAL_ICON); + this.iconsMDL.set('glyphicon-send', ActivitiApps.DEFAULT_TASKS_APP_MATERIAL_ICON); + this.iconsMDL.set('glyphicon-floppy-disk', ActivitiApps.DEFAULT_TASKS_APP_MATERIAL_ICON); + this.iconsMDL.set('glyphicon-credit-card', ActivitiApps.DEFAULT_TASKS_APP_MATERIAL_ICON); + this.iconsMDL.set('glyphicon-cutlery', ActivitiApps.DEFAULT_TASKS_APP_MATERIAL_ICON); + this.iconsMDL.set('glyphicon-earphone', ActivitiApps.DEFAULT_TASKS_APP_MATERIAL_ICON); + this.iconsMDL.set('glyphicon-phone-alt', ActivitiApps.DEFAULT_TASKS_APP_MATERIAL_ICON); + this.iconsMDL.set('glyphicon-tower', ActivitiApps.DEFAULT_TASKS_APP_MATERIAL_ICON); + this.iconsMDL.set('glyphicon-stats', ActivitiApps.DEFAULT_TASKS_APP_MATERIAL_ICON); + this.iconsMDL.set('glyphicon-cloud-download', ActivitiApps.DEFAULT_TASKS_APP_MATERIAL_ICON); + this.iconsMDL.set('glyphicon-cloud-upload', ActivitiApps.DEFAULT_TASKS_APP_MATERIAL_ICON); + this.iconsMDL.set('glyphicon-tree-conifer', ActivitiApps.DEFAULT_TASKS_APP_MATERIAL_ICON); + this.iconsMDL.set('glyphicon-tree-deciduous', ActivitiApps.DEFAULT_TASKS_APP_MATERIAL_ICON); + } + } diff --git a/ng2-components/ng2-activiti-tasklist/src/models/filter.model.ts b/ng2-components/ng2-activiti-tasklist/src/models/filter.model.ts index fd706963d4..e54579410b 100644 --- a/ng2-components/ng2-activiti-tasklist/src/models/filter.model.ts +++ b/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;