[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

ng2-components/ng2-activiti-tasklist/README.md

@@ -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)

ng2-components/ng2-activiti-tasklist/src/components/comment-list.component.scss

@@ -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;
+        }
+
+    }
 }
 
 
 
-
-
-
-

ng2-components/ng2-activiti-tasklist/src/components/people-search.component.scss

@@ -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;
+    }
 }

ng2-components/ng2-activiti-tasklist/src/components/people.component.scss

@@ -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;
+    }
 }

ng2-components/ng2-activiti-tasklist/src/components/start-task.component.scss

@@ -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);
+                }
             }
         }
     }

ng2-components/ng2-activiti-tasklist/src/components/task-filters.component.html

@@ -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>

ng2-components/ng2-activiti-tasklist/src/components/task-filters.component.scss

@@ -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);
+            }
+        }
+
+    }
 }

ng2-components/ng2-activiti-tasklist/src/components/task-header.component.css

@@ -1,3 +0,0 @@
-adf-card-view >>> .adf-textitem-clickable-value {
-    color: #ff9100;
-}

ng2-components/ng2-activiti-tasklist/src/components/task-header.component.scss

@@ -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;
+        }
     }
-}
+}

ng2-components/ng2-activiti-tasklist/src/components/task-header.component.ts

@@ -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 {