fix(bug): notification has been removed from feedback and it is made …

…more intuitive.
fabric8-ui · Apr 26, 2018 · 6b89758 · 6b89758
1 parent 282f9ff
commit 6b89758
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 6 deletions.
diff --git a/src/app/stack/utils/component-feedback/component-feedback.component.html b/src/app/stack/utils/component-feedback/component-feedback.component.html
@@ -1,11 +1,13 @@
-<fab-toast-notification [notifications]="feedbackMessages"></fab-toast-notification>
+<!-- <fab-toast-notification [notifications]="feedbackMessages"></fab-toast-notification> -->
 <div class="analytics-component-feedback">
     <div *ngIf="feedback?.feedbackTemplate" class="feedback">
-        <span (click)="handleFeedback($event, true)">
-            <i class="fa fa-thumbs-o-up" aria-hidden="true"></i>
+        <span (click)="feedbackColorTypeUp=!feedbackColorTypeUp;handleFeedback($event, true, feedbackColorTypeUp);" [ngClass]="{'thumbs-up': !feedbackColorTypeUp , 'thumbs-up-true': feedbackColorTypeUp}"
+            aria-label="positive feedback">
+            <i [ngClass]="{'fa': true,'fa-thumbs-o-up': !feedbackColorTypeUp , 'fa-thumbs-up': feedbackColorTypeUp}" aria-hidden="true"></i>
         </span>
-        <span (click)="handleFeedback($event, false)">
-            <i class="fa fa-thumbs-o-down" aria-hidden="true"></i>
+        <span (click)="feedbackColorTypeDown=!feedbackColorTypeDown;handleFeedback($event, false, feedbackColorTypeDown);" [ngClass]="{'thumbs-down': !feedbackColorTypeDown , 'thumbs-down-true': feedbackColorTypeDown}"
+            aria-label="negative feedback">
+            <i [ngClass]="{'fa': true,'fa-thumbs-o-down': !feedbackColorTypeDown , 'fa-thumbs-down': feedbackColorTypeDown}" aria-hidden="true"></i>
         </span>
     </div>
     <span class="no-feedback" *ngIf="!feedback?.feedbackTemplate">-----</span>

diff --git a/src/app/stack/utils/component-feedback/component-feedback.component.less b/src/app/stack/utils/component-feedback/component-feedback.component.less
@@ -5,6 +5,32 @@
         margin-right: 10px;
     }
 
+    .thumbs-up {
+        color:#363636;
+        &:hover {
+            color:#6ec664;
+        }
+        &:active {
+            color:#6ec664;
+        }
+        &-true {
+            color:#6ec664;
+        }
+    }
+
+    .thumbs-down {
+        color:#363636;
+        &:hover {
+            color:#c00;
+        }
+        &:active {
+            color:#c00;
+        }
+        &-true {
+            color:#c00;
+        }
+    }
+
     .no-feedback {
         font-size: unset;
     }

diff --git a/src/app/stack/utils/component-feedback/component-feedback.component.ts b/src/app/stack/utils/component-feedback/component-feedback.component.ts
@@ -23,10 +23,12 @@ import { ComponentFeedbackService } from './component-feedback.service';
 export class ComponentFeedbackComponent implements OnChanges {
     @Input() feedback: MComponentFeedback;
     feedbackMessages: Array<any> = [];
+    feedbackColorTypeUp: boolean = false;
+    feedbackColorTypeDown: boolean = false;
 
     constructor(private feedbackService: ComponentFeedbackService) {}
 
-    public handleFeedback(event: MouseEvent, type: boolean): void {
+    public handleFeedback(event: MouseEvent, type: boolean, colorType: boolean): void {
         event.stopPropagation();
         if (this.feedback && this.feedback.feedbackTemplate) {
             this.feedback.feedbackTemplate.feedback_type = type;
@@ -40,6 +42,15 @@ export class ComponentFeedbackComponent implements OnChanges {
                 });
             }
         }
+        if (type) {
+            if (colorType) {
+                this.feedbackColorTypeDown = false;
+            }
+        } else {
+            if (colorType) {
+                this.feedbackColorTypeUp = false;
+            }
+        }
     }
 
     ngOnChanges(changes: SimpleChanges) {