Skip to content

P
PERFORMA_REPLICA
Commit a8d2ae8c by GD-A-150752
Options

message-engine-hiring-team UI-fix.

parent 8e034309
Showing with 111 additions and 76 deletions
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;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment