fix process service theming people comments tasks fixed border and background color issues (#2986)

demo-shell/src/app/components/process-service/process-service.component.html

@@ -74,7 +74,7 @@
                                            (assignTask)="onAssignTask()"
                                            (taskDeleted)="onTaskDeleted($event)">
                     </adf-task-details>
-                    <hr>
+                    <mat-divider></mat-divider>
                     <div *ngIf="currentTaskId">
                         {{'PS-TAB.TASK-AUDIT-LOG' | translate}}
                         <button
@@ -84,7 +84,7 @@
                             mat-icon-button (clicked)="onAuditClick($event)" (error)="onAuditError($event)">
                             <mat-icon>assignment_ind</mat-icon>
                         </button>
-                        <hr>
+                        <mat-divider></mat-divider>
                     </div>
                     <mat-card>
                         <mat-card-content>
@@ -168,7 +168,7 @@
                         (showProcessDiagram)="onShowProcessDiagram($event)"
                         (taskClick)="onProcessDetailsTaskClick($event)">
                     </adf-process-instance-details>
-                    <hr>
+                    <mat-divider></mat-divider>
                     <div *ngIf="currentProcessInstanceId">
                         {{'PS-TAB.PROCESS-AUDIT-LOG' | translate}}
                         <button adf-process-audit
@@ -179,7 +179,7 @@
                                 (error)="onAuditError($event)">
                             <mat-icon>assignment_ind</mat-icon>
                         </button>
-                        <hr>
+                        <mat-divider></mat-divider>
                     </div>
                     <mat-card>
                         <mat-card-content>
@@ -205,7 +205,7 @@
         <div class="adf-grid" fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
             <div class="adf-grid-item adf-reports-menu" fxFlex.gt-md="300px">
                 <span><h5>Report List</h5></span>
-                <hr>
+                <mat-divider></mat-divider>
                 <analytics-report-list
                     [appId]="appId"
                     [selectFirst]="selectFirstReport"

lib/process-services/comments/comments.component.css

@@ -1,31 +0,0 @@
-.adf-comments-container {
-    height: 100%;
-    width: 100%;
-    overflow: auto;
-}
-
-.adf-comments-header {
-    padding: 10px 20px;
-    font-size: 14px;
-    font-weight: 600;
-    border-bottom: 1px solid #e1e1e1;
-    color: #a1a1a1;
-}
-
-.adf-comments-input-container {
-    padding: 0 15px;
-    width: calc(100% - 30px);
-    padding-top: 8px;
-    border-bottom: 1px solid #e1e1e1;
-}
-
-.adf-full-width {
-    width: 100%;
-}
-
-adf-comment-list {
-    float: left;
-    overflow: auto;
-    height: calc(100% - 101px);
-    width: 100%;
-}

lib/process-services/comments/comments.component.scss

@@ -0,0 +1,36 @@
+@mixin adf-task-list-comment-theme($theme) {
+    $foreground: map-get($theme, foreground);
+    $header-border: 1px solid mat-color($foreground, divider);
+
+    .adf-comments-container {
+        height: 100%;
+        width: 100%;
+        overflow: auto;
+    }
+
+    .adf-comments-header {
+        padding: 10px 20px;
+        font-size: 14px;
+        font-weight: 600;
+        border-bottom: $header-border;
+    }
+
+    .adf-comments-input-container {
+        padding: 0 15px;
+        width: calc(100% - 30px);
+        padding-top: 8px;
+        border-bottom: $header-border;
+    }
+
+    .adf-full-width {
+        width: 100%;
+    }
+
+    adf-comment-list {
+        float: left;
+        overflow: auto;
+        height: calc(100% - 101px);
+        width: 100%;
+    }
+
+}

lib/process-services/comments/comments.component.ts

@@ -23,7 +23,7 @@ import { Observer } from 'rxjs/Observer';
 @Component({
     selector: 'adf-comments',
     templateUrl: './comments.component.html',
-    styleUrls: ['./comments.component.css']
+    styleUrls: ['./comments.component.scss']
 })
 export class CommentsComponent implements OnChanges {
 

lib/process-services/comments/process-comments.component.css

@@ -1,58 +0,0 @@
-:host {
-    width: 100%;
-}
-
-.activiti-label {
-    font-weight: bolder;
-    vertical-align: top;
-}
-
-.activiti-label + .icon {
-    position: relative;
-    top: -2px;
-}
-
-.list-wrap {
-    word-wrap: break-word;
-    word-break: break-all;
-    -moz-hyphens:auto;
-    -webkit-hyphens:auto;
-    -o-hyphens:auto;
-    hyphens:auto;
-}
-
-.hide-long-names {
-    overflow: auto;
-}
-
-.adf-comments-container {
-    height: 100%;
-    width: 100%;
-    overflow: auto;
-}
-
-.adf-comments-header {
-    padding: 10px 20px;
-    font-size: 14px;
-    font-weight: 600;
-    border-bottom: 1px solid #e1e1e1;
-    color: #a1a1a1;
-}
-
-.adf-comments-input-container {
-    padding: 0 15px;
-    width: calc(100% - 30px);
-    padding-top: 8px;
-    border-bottom: 1px solid #e1e1e1;
-}
-
-.adf-full-width {
-    width: 100%;
-}
-
-adf-comment-list {
-    float: left;
-    overflow: auto;
-    height: calc(100% - 101px);
-    width: 100%;
-}

lib/process-services/comments/process-comments.component.scss

@@ -0,0 +1,62 @@
+@mixin adf-process-comment-theme($theme) {
+    $foreground: map-get($theme, foreground);
+    $header-border: 1px solid mat-color($foreground, divider);
+
+    :host {
+        width: 100%;
+    }
+
+    .activiti-label {
+        font-weight: bolder;
+        vertical-align: top;
+    }
+
+    .activiti-label + .icon {
+        position: relative;
+        top: -2px;
+    }
+
+    .list-wrap {
+        word-wrap: break-word;
+        word-break: break-all;
+        -moz-hyphens: auto;
+        -webkit-hyphens: auto;
+        -o-hyphens: auto;
+        hyphens: auto;
+    }
+
+    .hide-long-names {
+        overflow: auto;
+    }
+
+    .adf-comments-container {
+        height: 100%;
+        width: 100%;
+        overflow: auto;
+    }
+
+    .adf-comments-header {
+        padding: 10px 20px;
+        font-size: 14px;
+        font-weight: 600;
+        border-bottom: $header-border;
+    }
+
+    .adf-comments-input-container {
+        padding: 0 15px;
+        width: calc(100% - 30px);
+        padding-top: 8px;
+        border-bottom: $header-border;
+    }
+
+    .adf-full-width {
+        width: 100%;
+    }
+
+    adf-comment-list {
+        float: left;
+        overflow: auto;
+        height: calc(100% - 101px);
+        width: 100%;
+    }
+}

lib/process-services/comments/process-comments.component.ts

@@ -23,7 +23,7 @@ import { Observer } from 'rxjs/Observer';
 @Component({
     selector: 'adf-process-instance-comments',
     templateUrl: './process-comments.component.html',
-    styleUrls: ['./process-comments.component.css']
+    styleUrls: ['./process-comments.component.scss']
 })
 export class ProcessCommentsComponent implements OnChanges {
 

lib/process-services/people/components/people/people.component.scss

@@ -1,8 +1,10 @@
 @mixin adf-task-list-people-theme($theme) {
     $primary: map-get($theme, primary);
+    $foreground: map-get($theme, foreground);
+    $header-border: 1px solid mat-color($foreground, divider);
 
     .assignment-header {
-        border-bottom: 1px solid #eee;
+        border-bottom: $header-border;
         padding: 6px 20px;
     }
 
@@ -25,7 +27,7 @@
     }
 
     .assignment-top-container.mat-card {
-        border-top: 2px solid #eee;
+        border-top: $header-border;
         margin: 0px;
         padding: 0px;
         display: flex;
@@ -43,7 +45,7 @@
 
     .assignment-container {
         padding: 10px 20px;
-        border-bottom: 1px solid #eee;
+        border-bottom: $header-border;
         max-width: 100%;
     }
 
@@ -76,7 +78,6 @@
     }
 
     .adf-people-search-people-pic {
-        background: mat-color($primary);
         width: 30px;
         padding: 10px 5px;
         border-radius: 100px;

lib/process-services/styles/_index.scss

@@ -2,6 +2,8 @@
 @import '../attachment/process-attachment-list.component';
 @import '../attachment/task-attachment-list.component';
 @import '../comments/comment-list.component';
+@import '../comments/comments.component';
+@import '../comments/process-comments.component';
 @import '../people/people.module';
 @import '../task-list/components/start-task.component';
 @import '../task-list/components/task-filters.component';
@@ -11,6 +13,8 @@
 @mixin adf-process-services-theme($theme) {
     @include adf-process-filters-theme($theme);
     @include adf-task-list-comment-list-theme($theme);
+    @include adf-task-list-comment-theme($theme);
+    @include adf-process-comment-theme($theme);
     @include adf-task-list-start-task-theme($theme);
     @include adf-people-module-theme($theme);
     @include adf-task-list-filters-task-theme($theme);

lib/process-services/task-list/components/checklist.component.scss

@@ -26,7 +26,6 @@
 
 #checklist-none-message {
     margin-top: 10px;
-    color: rgba(0, 0, 0, .5);
 }
 
 .adf-checklist-control {

lib/process-services/task-list/components/start-task.component.scss

@@ -2,11 +2,13 @@
     $primary: map-get($theme, primary);
     $accent: map-get($theme, accent);
     $warn: map-get($theme, warn);
+    $foreground: map-get($theme, foreground);
+    $header-border: 1px solid mat-color($foreground, divider);
 
     .adf-new-task-heading {
         padding: 12px 20px;
         font-weight: bold;
-        border-bottom: 1px solid #eee;
+        border-bottom: $header-border;
         font-size: 18px;
         float: left;
         text-align: left;

lib/process-services/task-list/components/task-details.component.scss

@@ -25,13 +25,7 @@
     text-transform: uppercase;
 }
 
-adf-people ::ng-deep .assignment-top-container{
-    background-color: #fff;
-}
-
 .assignment-container {
-    background: #fff;
-    border: 1px solid #e1e1e1;
     padding: 10px 20px;
     width: auto;
 }