Remove MDL from demo shell (#2302)

demo-shell-ng2/app/app.component.scss

@@ -1,3 +1,8 @@
+.material-icons {
+    position: relative;
+    top: 6px;
+}
+
 .user-profile {
     margin-right: 10px;
 }

demo-shell-ng2/app/components/activiti/activiti-demo.component.css

@@ -1,88 +0,0 @@
-.activiti-task-list__item:hover {
-    cursor: pointer;
-    font-weight: bold;
-}
-
-.task-column {
-    padding: 10px 10px 10px 10px;
-}
-
-.mdl-layout__header {
-    z-index: 1;
-}
-
-.list-buttons {
-    text-align: left;
-    margin-bottom: 5px;
-}
-
-.adf-no-form-container {
-    text-align: center;
-    font-weight: 600;
-    font-size: 18px;
-    font-family: Muli;
-    padding: 16px;
-}
-
-.action-header {
-    border: 1px solid ;
-    text-align: left;
-}
-
-.activiti-demo-grid {
-    display: flex;
-}
-
-.activiti-demo-grid-item {
-    margin: 4px;
-    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
-    padding: 10px 10px 10px 10px;
-}
-
-.activiti-demo-list-buttons {
-    margin-bottom: 24px;
-}
-
-.activiti-demo-list-buttons-start {
-    width: 100%;
-}
-
-.activiti-demo-tasks-menu {
-    min-width: 170px;
-}
-
-.activiti-demo-tasks-list {
-    min-width: 510px;
-    padding: 0;
-}
-
-.activiti-demo-tasks-details,
-.activiti-demo-tasks-start {
-    flex-grow: 1;
-    min-width: 680px;
-}
-
-.activiti-demo-tasks-list >>> .adf-data-table {
-    border: none;
-}
-
-.activiti-demo-tasks-list >>> .adf-data-table tr,
-.activiti-demo-tasks-list >>> .adf-data-table td {
-    height: 36px;
-    font-size: 14px;
-}
-
-.activiti-demo-tasks-list >>> .adf-data-table td {
-    padding-top: 0;
-    padding-bottom: 0;
-    border-bottom: none;
-}
-
-.activiti-demo-tasks-list >>> .adf-data-table th {
-    padding-top: 0;
-    padding-bottom: 0;
-    height: 40px;
-    vertical-align: middle;
-    font-size: 14px;
-}
-

demo-shell-ng2/app/components/activiti/activiti-demo.component.html

@@ -59,9 +59,7 @@
                         [supportedPageSizes]="[2, 4, 6, 8, 10, 12]">
                     </adf-pagination>
                 </div>
-                <div class="activiti-demo-grid-item activiti-demo-tasks-details" *ngIf="!isStartTaskMode()"
+                <div class="activiti-demo-grid-item activiti-demo-tasks-details" *ngIf="!isStartTaskMode()">
-                     [class.mdl-cell--7-col]="taskFilter && !isStartTaskMode()"
-                     [class.mdl-cell--10-col]="!taskFilter || isStartTaskMode()">
                     <activiti-task-details #activitidetails
                                            [debugMode]="true"
                                            [taskId]="currentTaskId"
@@ -105,12 +103,13 @@
     <md-tab id="processes-header" href="#processes"
             label="{{'PS-TAB.PROCESSES-TAB' | translate}}">
         <div class="page-content">
-            <div class="mdl-grid">
+            <div class="activiti-demo-grid">
-                <div class="mdl-cell mdl-cell--2-col task-column  mdl-shadow--2dp">
+                <div class="activiti-demo-grid-item activiti-demo-processes-menu">
-                    <div class="list-buttons">
+                    <div class="activiti-demo-list-buttons">
                         <button
                             color="primary"
                             md-raised-button
+                            class="activiti-demo-list-buttons-start"
                             data-automation-id="btn-start-process"
                             (click)="navigateStartProcess()">
                             <md-icon>add</md-icon>
@@ -129,7 +128,7 @@
                         </adf-accordion-group>
                     </adf-accordion>
                 </div>
-                <div class="mdl-cell mdl-cell--3-col task-column mdl-shadow--2dp"
+                <div class="activiti-demo-grid-item activiti-demo-processes-list activiti-demo-list"
                      *ngIf="processFilter && !isStartProcessMode()">
                     <activiti-process-instance-list
                         *ngIf="processFilter?.hasFilter()" [appId]="processFilter.appId"
@@ -149,9 +148,7 @@
                         -->
                     </activiti-process-instance-list>
                 </div>
-                <div class="mdl-cell task-column mdl-shadow--2dp" *ngIf="!isStartProcessMode()"
+                <div class="activiti-demo-grid-item activiti-demo-processes-details" *ngIf="!isStartProcessMode()">
-                     [class.mdl-cell--7-col]="processFilter && !isStartProcessMode()"
-                     [class.mdl-cell--10-col]="!processFilter || isStartProcessMode()">
                     <activiti-process-instance-details
                         [processInstanceId]="currentProcessInstanceId"
                         (processCancelled)="processCancelled()"
@@ -179,7 +176,7 @@
                         </md-card-content>
                     </md-card>
                 </div>
-                <div class="mdl-cell mdl-cell--10-col task-column mdl-shadow--2dp"
+                <div class="activiti-demo-grid-item activiti-demo-processes-start"
                      *ngIf="isStartProcessMode()">
                     <adf-start-process
                         [appId]="appId"
@@ -192,8 +189,8 @@
     </md-tab>
     <md-tab id="report-header" href="#report"
             label="{{'PS-TAB.REPORTS-TAB' | translate}}">
-        <div class="mdl-grid">
+        <div class="activiti-demo-grid">
-            <div class="mdl-cell mdl-cell--4-col task-column mdl-shadow--2dp">
+            <div class="activiti-demo-grid-item activiti-demo-reports-menu">
                 <span><h5>Report List</h5></span>
                 <hr>
                 <analytics-report-list
@@ -203,7 +200,7 @@
                     #analyticsreportlist>
                 </analytics-report-list>
             </div>
-            <div class="mdl-cell mdl-cell--8-col task-column mdl-shadow--2dp">
+            <div class="activiti-demo-grid-item activiti-demo-reports-details">
                 <activiti-analytics
                     *ngIf="report"
                     [appId]="appId"

demo-shell-ng2/app/components/activiti/activiti-demo.component.scss

@@ -0,0 +1,74 @@
+
+.adf-no-form-container {
+    text-align: center;
+    font-weight: 600;
+    font-size: 18px;
+    font-family: Muli;
+    padding: 16px;
+}
+
+.activiti-demo-grid {
+    display: flex;
+    align-items: stretch;
+
+    .activiti-demo-grid-item {
+        margin: 4px;
+        box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
+        padding: 10px 10px 10px 10px;
+    }
+
+    .activiti-demo-list-buttons {
+        margin-bottom: 24px;
+    }
+
+    .activiti-demo-list-buttons-start {
+        width: 100%;
+    }
+
+    .activiti-demo-tasks-menu,
+    .activiti-demo-processes-menu,
+    .activiti-demo-reports-menu {
+        min-width: 170px;
+    }
+
+    .activiti-demo-tasks-list,
+    .activiti-demo-processes-list {
+        min-width: 510px;
+        padding: 0;
+    }
+
+    .activiti-demo-tasks-details,
+    .activiti-demo-tasks-start,
+    .activiti-demo-processes-details,
+    .activiti-demo-processes-start,
+    .activiti-demo-reports-details {
+        flex-grow: 1;
+        min-width: 680px;
+    }
+
+    .activiti-demo-list {
+        .adf-data-table {
+            border: none;
+        }
+
+        .adf-data-table tr,
+        .adf-data-table td {
+            height: 36px;
+            font-size: 14px;
+        }
+
+        .adf-data-table td {
+            padding-top: 0;
+            padding-bottom: 0;
+            border-bottom: none;
+        }
+
+        .adf-data-table th {
+            padding-top: 0;
+            padding-bottom: 0;
+            height: 40px;
+            vertical-align: middle;
+            font-size: 14px;
+        }
+    }
+}

demo-shell-ng2/app/components/activiti/activiti-demo.component.ts

@@ -16,7 +16,7 @@
  */
 
 // tslint:disable-next-line:adf-file-name
-import { AfterViewInit, Component, ElementRef, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, Input, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Pagination } from 'alfresco-js-api';
 import { AnalyticsReportListComponent } from 'ng2-activiti-analytics';
@@ -56,7 +56,8 @@ const currentTaskIdNew = '__NEW__';
 @Component({
     selector: 'activiti-demo',
     templateUrl: './activiti-demo.component.html',
-    styleUrls: ['./activiti-demo.component.css']
+    styleUrls: ['./activiti-demo.component.scss'],
+    encapsulation: ViewEncapsulation.None
 })
 export class ActivitiDemoComponent implements AfterViewInit, OnDestroy, OnInit {
 

demo-shell-ng2/app/components/home/home.component.scss

@@ -5,6 +5,13 @@
     display: block;
     overflow-y: auto;
     height: 400px;
+
+    h2 {
+        line-height: 30px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
 }
 
 .adf-home-card-title {

demo-shell-ng2/app/components/home/home.component.ts

@@ -20,6 +20,6 @@ import { Component } from '@angular/core';
 @Component({
     selector: 'home-view',
     templateUrl: './home.component.html',
-    styleUrls: ['./home.component.css']
+    styleUrls: ['./home.component.scss']
 })
 export class HomeComponent {}

demo-shell-ng2/index.html

@@ -57,12 +57,6 @@
 <adf-app>
     <div id="loader-container" class="loader-container">
         <div class="loader-item">
-            <div id="loader-spin" class="mdl-progress mdl-js-progress mdl-progress__indeterminate is-upgraded"
-                 data-upgraded=",MaterialProgress">
-                <div class="progressbar bar bar1" style="width: 0%;"></div>
-                <div class="bufferbar bar bar2" style="width: 100%;"></div>
-                <div class="auxbar bar bar3" style="width: 0%;"></div>
-            </div>
             <div id="loader-text" class="loader-text">Loading Demo Shell..</div>
         </div>
     </div>