message-engine-hiring-team UI-fix.

frontend/angular/src/app/components/message-engine-applicant-view/message-engine-applicant-view.component.html

@@ -8,7 +8,7 @@
                         {{jobApplication?.Candidate?.User?.Name}}
                     </div>
                     <a class="arrow-btn-blue ml-0 ng-star-inserted minimize" (click)="minimize.emit()">
-                        <img src="assets/images/arrow-left-prev_blue.svg" alt="Minimize" title="Minimize">
+                        <span class="ui-icon-close" title="Close"></span>
                     </a>
                 </div>
                 <div *ngIf="!embedded" class="main-tab-template pl-1">
@@ -75,26 +75,19 @@
                                             <button class="ql-italic" aria-label="Italic"></button>
                                             <button class="ql-underline" aria-label="Underline"></button>
                                         </span>
+                                        <button (click)="triggerUpload()" class="attachment-icon">
+                                            <span class="ui-icon-attach-file"></span>
+                                        </button>
                                     </p-header>
                                 </p-editor>
                             </div>
                             <div class="ui-g-3">
-                                <app-select-2 *ngIf="sentViaEnum && embedded" (valChange)="updateSentVia($event)"
-                                              [data]="sentViaEnum"
-                                              [value]="Message.SentVia"
-                                              fieldLabel="Description">
-                                </app-select-2>
+                                <p-splitButton [class.non-embed]="!embedded" label="Send" icon="ui-icon-send"
+                                               (onClick)="saveEngineApplicantView()"
+                                               [model]="items">
+                                </p-splitButton>
                                 <div class="buttons-wrapper">
-                                    <button class="sendBtn" (click)="saveEngineApplicantView()"
-                                            [disabled]="showLoader">
-                                        <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
-                                             x="0px" y="0px" viewBox="0 0 512 512"
-                                             enable-background="new 0 0 512 512" xml:space="preserve">
-                                        <path id="paper-plane-icon" d="M462,54.955L355.371,437.187l-135.92-128.842L353.388,167l-179.53,124.074L50,260.973L462,54.955z
-M202.992,332.528v124.517l58.738-67.927L202.992,332.528z"></path>
-                                    </svg>
-                                    </button>
-                                    <button *ngIf="embedded" type="button" pButton label="Read"
+                                    <button *ngIf="embedded" type="button" pButton label="Mark as read"
                                             icon="ui-icon-check"
                                             (click)="markAsRead()"></button>
                                 </div>
@@ -102,8 +95,7 @@ M202.992,332.528v124.517l58.738-67.927L202.992,332.528z"></path>
                                               name="File" [withCredentials]="true"
                                               id="File" url="{{apiUrl}}uploadFile" auto="true"
                                               (onUpload)="onUpload($event)" [disabled]="showLoader"
-                                              chooseLabel="Browse"
-                                              multiple="multiple" accept="image/*" maxFileSize="1000000">
+                                              chooseLabel="Browse" #uploader multiple="multiple">
                                     <ng-template pTemplate="content">
                                         <ul *ngIf="Message.Attachments.length">
                                             <li *ngFor="let file of Message.Attachments">{{file.File.Name}}</li>
@@ -129,7 +121,7 @@ M202.992,332.528v124.517l58.738-67.927L202.992,332.528z"></path>
                     Please select an application and a user...
                 </div>
                 <a class="arrow-btn-blue ml-0 ng-star-inserted minimize" *ngIf="embedded" (click)="minimize.emit()">
-                    <img src="assets/images/arrow-left-prev_blue.svg" alt="Minimize" title="Minimize">
+                    <span class="ui-icon-close" title="Close"></span>
                 </a>
             </div>
         </div>

frontend/angular/src/app/components/message-engine-applicant-view/message-engine-applicant-view.component.scss

@@ -91,64 +91,34 @@ a {
 }
 
 .attachment-icon {
-    margin-top: 25px;
+    float: right !important;
+
+    span {
+        font-size: large;
+        color: #444;
+    }
 }
 
 .buttons-wrapper {
+    margin-top: 0.5em;
     display: flex;
-    flex-direction: row;
-    margin-top: 10px;
-    justify-content: space-between;
-
-    :last-child {
-        width: 60%;
-        min-height: 45px;
-        display: inline-block;
-        cursor: pointer;
-        border-radius: 100px;
-    }
-}
 
-.sendBtn {
-    border-style: none;
-    color: #fff;
-    overflow: visible;
+    button {
+        border-radius: 60px;
         position: relative;
-    width: 33%;
-    cursor: pointer;
-    border-radius: 100px;
-    background-color: #667281;
-    display: inline-block;
-    min-height: 45px;
-    text-transform: uppercase;
-    border-color: #667281;
-
-    p {
-        color: #fff;
-        margin: 0;
-        font-size: 12px;
-        font-weight: 600;
-    }
-
-    &:hover {
-
-        svg {
-            transform: rotate(10deg);
-            transition: transform .15s;
+        border-style: none;
+        min-width: 148px;
+        height: 50px;
+        background-color: #03a0e7;
+        box-shadow: inset 1px 0 0 0 #e5e8eb;
+        margin-right: 0.5em;
+        color: white;
+
+        ::ng-deep {
+            .ui-button-text {
+                margin-top: 4px;
             }
         }
-
-    svg {
-        position: absolute;
-        top: 0;
-        right: 30%;
-        height: 30px;
-        width: auto;
-        transition: transform .15s;
-
-        path {
-            fill: #fff;
-        }
     }
 }
 
@@ -164,9 +134,66 @@ a {
         width: 20px;
         line-height: normal;
 
-        img {
-            height: 10px;
-            width: 10px;
+        span {
+            font-size: initial;
+        }
+    }
+}
+
+.message-button {
+    border-radius: 10px;
+}
+
+.non-embed {
+    ::ng-deep {
+        .ui-splitbutton-menubutton {
+            display: none;
         }
+
+        .ui-splitbutton .ui-button {
+            &:first-child {
+                border-radius: 20px;
+                width: 100% !important;
+            }
+        }
+    }
+}
+
+::ng-deep {
+    .ui-fluid .ui-splitbutton .ui-button {
+        background-color: rgb(3, 160, 231) !important;
+        opacity: 1 !important;
+
+        &:first-child {
+            width: calc(100% - 2.2em) !important;
+
+            .ui-icon-send {
+                transition: 0.3s all ease;
+            }
+
+            &:hover {
+                .ui-icon-send {
+                    transform: rotate(-45deg);
+                }
+
+            }
+        }
+
+        &.ui-splitbutton-menubutton {
+            margin-top: 0;
+        }
+    }
+
+    .ui-fileupload-buttonbar {
+        display: none;
+    }
+
+    .ui-fileupload-content {
+        margin-top: 0.5em;
+        border-radius: 10px;
+    }
+
+    .ql-editor {
+        min-height: 85px;
     }
 }

frontend/angular/src/app/components/message-engine-applicant-view/message-engine-applicant-view.component.ts

 import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
 import { NgForm } from '@angular/forms';
 import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
+import { MenuItem } from 'primeng/api';
 import { Editor } from 'primeng/editor';
+import { FileUpload } from 'primeng/fileupload';
 import { Subscription } from 'rxjs/Subscription';
 import { environment } from '../../../environments/environment';
 
@@ -33,6 +35,8 @@ export class MessageEngineApplicantViewComponent extends BaseComponent implement
     @Output() minimize: EventEmitter<any> = new EventEmitter<any>();
     @ViewChild('message') messageEditor: Editor;
     @ViewChild('form') form: NgForm;
+    @ViewChild('uploader') uploader: FileUpload;
+    items: Array<MenuItem>;
     createdObjs = {};
     updatedObjs = {};
     deletedObjs = {};
@@ -66,6 +70,7 @@ export class MessageEngineApplicantViewComponent extends BaseComponent implement
     }
 
     ngOnInit(): void {
+
         this.utilsService.resetCounter();
         this.showLoader = true;
 
@@ -73,6 +78,10 @@ export class MessageEngineApplicantViewComponent extends BaseComponent implement
             this.appService.getTypes('SentVia')
                 .subscribe((data: Array<SentViaEnum>) => {
                     this.sentViaEnum = data;
+                    this.items = this.sentViaEnum.map(elem =>
+                        ({
+                            label: elem.Description, command: () => this.Message.SentVia = elem
+                        }));
                     // For Hiring Team or Applicant
                     const service = this.embedded ? this.adminPortalLayoutService : this.applicantPortalLayoutService;
                     if (service.userData) {
@@ -162,6 +171,10 @@ export class MessageEngineApplicantViewComponent extends BaseComponent implement
     }
 
     saveEngineApplicantView(): void {
+        if (this.showLoader) {
+            return;
+        }
+
         this.utilsService.clearErrorMessages();
 
         if (this.form.invalid || this.IsMessageEmpty()) {
@@ -216,8 +229,10 @@ export class MessageEngineApplicantViewComponent extends BaseComponent implement
      * Helper functions
      */
 
-    updateSentVia($event): void {
-        this.Message.SentVia = this.sentViaEnum.find(opt => opt.Value === $event.Value);
+    triggerUpload(): void {
+        // @ts-ignore
+        this.uploader.el.nativeElement.getElementsByTagName('input')[0]
+            .click();
     }
 
     setEditorClass(): void {
@@ -239,7 +254,7 @@ export class MessageEngineApplicantViewComponent extends BaseComponent implement
             }
 
             editor[0].classList.add('form-control');
-            editor[0].classList.add('editor');
+            // editor[0].classList.add('editor');
             editor[0].innerHTML = '';
 
         }, 0);

frontend/angular/src/assets/css/custom.scss

@@ -308,7 +308,8 @@
         &.ui-dialog-draggable {
             left: auto !important;
             right: 10px !important;
-            height: 600px !important;
+            min-height: 560px !important;
+            max-height: 600px !important;
             bottom: 0 !important;
             top: auto !important;
             width: 690px !important;