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

2025-07-24 17:32:15 +00:00 · 2018-02-23 10:41:37 +00:00
parent 7f63b76d37
commit a5eeeb4941
12 changed files with 117 additions and 108 deletions
--- a/demo-shell/src/app/components/process-service/process-service.component.html
+++ b/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"
--- a/lib/process-services/comments/comments.component.css
+++ b/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%;
-}
--- a/lib/process-services/comments/comments.component.scss
+++ b/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%;
+    }
+
+}
--- a/lib/process-services/comments/comments.component.ts
+++ b/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 {

--- a/lib/process-services/comments/process-comments.component.css
+++ b/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%;
-}
--- a/lib/process-services/comments/process-comments.component.scss
+++ b/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%;
+    }
+}
--- a/lib/process-services/comments/process-comments.component.ts
+++ b/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 {

--- a/lib/process-services/people/components/people/people.component.scss
+++ b/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;
--- a/lib/process-services/styles/_index.scss
+++ b/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);
--- a/lib/process-services/task-list/components/checklist.component.scss
+++ b/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 {
--- a/lib/process-services/task-list/components/start-task.component.scss
+++ b/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;
--- a/lib/process-services/task-list/components/task-details.component.scss
+++ b/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;
 }