Skip to content

P
PERFORMA_REPLICA
Commit 465746ba by GD-A-150752
Options

UI-fixes

parent 62ffccb1
Showing with 226 additions and 46 deletions
frontend/angular/src/app/components/admin-portal/edit-message-template/edit-message-template.component.html
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<div class="ui-g-12 ui-md-12"> <div class="ui-g-12 ui-md-12">
<div class="ui-g ui-fluid"> <div class="ui-g ui-fluid">
<div class="ui-g-12"> <div class="ui-g-12">
<div class="page-title"> <div class="page-title page-title-with-arrow">
<a [routerLink]="['/admin/list-message-templates']" class="arrow-btn-blue ml-0" <a [routerLink]="['/admin/list-message-templates']" class="arrow-btn-blue ml-0"
*ngIf="!objectID"> *ngIf="!objectID">
<img src="assets/images/arrow-left-prev_blue.svg"> <img src="assets/images/arrow-left-prev_blue.svg">
...@@ -17,13 +17,13 @@ ...@@ -17,13 +17,13 @@
<div class="main-tab-template"> <div class="main-tab-template">
<span class="job-details culture">Message Template</span> <span class="job-details culture">Message Template</span>
</div> </div>
<div class="ui-g ui-fluid message-template-form"> <div class="ui-g ui-fluid form message-template-form">
<div class="ui-g-12 ui-md-12"> <div class="ui-g-12 ui-md-12">
<div class="form-group row"> <div class="form-group row">
<div class="col-md-6"> <div class="col-md-6">
<label for="MessageTemplate{{messageTemplate.ObjectID}}">Message Template</label> <label for="MessageTemplate{{messageTemplate.ObjectID}}">Message Template</label>
<input [(ngModel)]="messageTemplate.TemplateName" <input [(ngModel)]="messageTemplate.TemplateName"
name="MessageTemplate{{messageTemplate.ObjectID}}" name="MessageTemplate{{messageTemplate.ObjectID}}" tabindex="1"
fieldLabel="Message Template" type="text" [disabled]="showLoader" fieldLabel="Message Template" type="text" [disabled]="showLoader"
class="form-control" id="MessageTemplate{{messageTemplate.ObjectID}}"> class="form-control" id="MessageTemplate{{messageTemplate.ObjectID}}">
</div> </div>
......
frontend/angular/src/app/components/admin-portal/edit-workflow-template/edit-workflow-template.component.html
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<div class="ui-g-12 ui-md-12"> <div class="ui-g-12 ui-md-12">
<div class="ui-g ui-fluid"> <div class="ui-g ui-fluid">
<div class="ui-g-12"> <div class="ui-g-12">
<div class="page-title mb-0"> <div class="page-title page-title-with-arrow mb-0">
<a [routerLink]="['/admin/list-workflow-templates']" class="arrow-btn-blue ml-0"> <a [routerLink]="['/admin/list-workflow-templates']" class="arrow-btn-blue ml-0">
<img src="assets/images/arrow-left-prev_blue.svg"> <img src="assets/images/arrow-left-prev_blue.svg">
</a> </a>
......
frontend/angular/src/app/components/message-engine-applicant-view/message-engine-applicant-view.component.html
<div class="dashboard-content-area second-part {{embedded ? 'openedFromWorkflow' : '' }}"> <div class="dashboard-content-area second-part {{embedded ? 'openedFromWorkflow' : '' }}">
<form #form="ngForm"> <form #form="ngForm">
<div class="ui-g ui-fluid"> <div class="ui-g ui-fluid">
<div class="first-part w-100"> <div class="ui-g-12 ui-md-12">
<div class="officer-name"> <div class="main-tab-template pl-1">
<div class="chief-officer"> <div class="chief-officer mb-0">
<a [routerLink]="['/admin/list-message-templates']" class="arrow-btn-blue" <a [routerLink]="['/admin/list-message-templates']" class="arrow-btn-blue ml-0">
*ngIf="!embedded">
<img src="assets/images/arrow-left-prev_blue.svg"> <img src="assets/images/arrow-left-prev_blue.svg">
</a> </a>
<a href="#"> Mine Manager - Lone Star Gold
<span class="calcField">Mine Manager</span>
<span class="ref-no">(<span class="calcField">Lone Star Gold</span>)</span>
</a>
</div>
</div> </div>
</div> </div>
</div> <div class="ui-g ui-fluid form">
<div class="ui-g-12 ui-md-12">
<div class="ui-g ui-fluid"> <div class="ui-g ui-fluid">
<div class="ui-g-10 message-block"> <div class="ui-g-10 message-block">
<div class="ui-g-12 ui-md-1 name other"> <div class="ui-g-12 ui-md-1 name other">
<label>Martin </label> <label>M</label>
</div> </div>
<div class="ui-g-12 ui-md-11"> <div class="ui-g-12 ui-md-11">
<div> <div>
<label> Hi John, </label><br> <label> Hi John, </label><br>
<label> Thanks for applying. Please click on the following link to complete your <label> Thanks for applying. Please click on the following link to complete your
application. </label><br> application. </label><br>
<a class=" data-link " data-elementid="httpsbitly2aBi0jj" data-fielduid="4b7f9f1e27010d23b5c5" <a class=" data-link " data-elementid="httpsbitly2aBi0jj"
href="#" style="">https://bit.ly/2aBi0jj</a><br> data-fielduid="4b7f9f1e27010d23b5c5"
</div> href="#" style="">https://bit.ly/2aBi0jj</a>
<div class="ui-g">
<div class="ui-g-12 ui-md-5 pb-0">
<label> via Email </label>
</div>
<div class="ui-g-12 ui-md-7 pb-0">
<label> 01/03/2019 11:43am </label>
</div> </div>
<div class="message-footer">
<div>via Email</div>
<div>01/03/2019 11:43am</div>
</div> </div>
</div> </div>
</div> </div>
<div class="ui-g-offset-2 ui-g-10 message-block"> <div class="ui-g-offset-2 ui-g-10 message-block">
<div class="ui-g-10 ui-md-11"> <div class="ui-g-10 ui-md-11">
<div>
<label> Hi John, </label><br> <label> Hi John, </label><br>
<label> Thanks for applying. Please click on the following link to complete your <label> Thanks for applying. Please click on the following link to complete your
application. </label><br> application. </label><br>
<a class=" data-link " data-elementid="httpsbitly2aBi0jj" data-fielduid="4b7f9f1e27010d23b5c5" <a class=" data-link " data-elementid="httpsbitly2aBi0jj"
href="#" style="">https://bit.ly/2aBi0jj</a><br> data-fielduid="4b7f9f1e27010d23b5c5"
<div class="ui-g"> href="#" style="">https://bit.ly/2aBi0jj</a>
<div class="ui-g-12 ui-md-5">
<label> via Email </label>
</div>
<div class="ui-g-12 ui-md-7">
<label> 01/03/2019 11:43am </label>
</div> </div>
<div class="message-footer">
<div>via Email</div>
<div>01/03/2019 11:43am</div>
</div> </div>
</div> </div>
<div class="ui-g-12 ui-md-1 name owner"> <div class="ui-g-12 ui-md-1 name owner">
<label>Martin </label> <label>J</label>
</div> </div>
</div> </div>
</div> </div>
<div class="separator mt-3"></div>
<div class="ui-g ui-fluid"> <div class="ui-g ui-fluid">
<div class="ui-g-10"> <div class="ui-g-10">
<p-editor #message> <p-editor #message>
...@@ -71,15 +62,26 @@ ...@@ -71,15 +62,26 @@
<button class="ql-italic" aria-label="Italic"></button> <button class="ql-italic" aria-label="Italic"></button>
<button class="ql-underline" aria-label="Underline"></button> <button class="ql-underline" aria-label="Underline"></button>
</span> </span>
<span class="ql-formats">
<button class="ql-list" aria-label="Bullet" value="bullet"></button>
<button class="ql-link" aria-label="Link"></button>
</span>
</p-header> </p-header>
</p-editor> </p-editor>
</div> </div>
<div class="ui-g-2"> <div class="ui-g-2">
<button class="btn btn-primary add-more-btn">Send</button> <button class="sendBtn">
<p>Send</p>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" 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>
<div class="attachment-icon">
<i class="fa fa fa-paperclip fa-2x"></i>
</div>
</div>
</div>
</div>
</div>
</div> </div>
</div> </div>
<p-progressSpinner *ngIf="showLoader"></p-progressSpinner> <p-progressSpinner *ngIf="showLoader"></p-progressSpinner>
......
frontend/angular/src/app/components/message-engine-applicant-view/message-engine-applicant-view.component.scss
a {
color: rgb(3, 160, 231);
}
.message-block { .message-block {
background-color: white; background-color: white;
border-radius: 20px; border-radius: 20px;
...@@ -10,6 +14,7 @@ ...@@ -10,6 +14,7 @@
.name { .name {
height: 95%; height: 95%;
background: rgba(1, 1, 1, 0.1); background: rgba(1, 1, 1, 0.1);
font-size: 2em;
&.owner { &.owner {
border-top-right-radius: 12px; border-top-right-radius: 12px;
...@@ -21,4 +26,139 @@ ...@@ -21,4 +26,139 @@
border-bottom-left-radius: 12px; border-bottom-left-radius: 12px;
} }
} }
.initial {
width: 100%;
text-align: center;
}
.message-footer {
display: flex;
justify-content: space-between;
color: #8E97A0;
font-size: 1.2rem;
margin-top: 20px;
}
}
* {
transition: all .15s;
outline: none;
}
.attachment-icon {
margin-top: 25px;
}
.sendBtn {
letter-spacing: 1px;
color: #fff;
overflow: visible;
position: relative;
width: 100%;
cursor: pointer;
border-radius: 100px;
background-color: #667281;
display: inline-block;
min-height: 45px;
text-transform: uppercase;
border-color: #667281;
padding-right: 35px;
p {
color: #fff;
margin: 0;
font-size: 12px;
font-weight: 600;
}
&:hover {
svg {
transform: rotate(10deg);
transition: transform .15s;
}
}
svg {
position: absolute;
top: 4px;
right: 10px;
height: 30px;
width: auto;
transition: transform .15s;
path {
fill: #fff;
}
}
&.clicked {
background-color: #cff5b3;
border: 2px solid #cff5b3;
color: #6AAA3B;
padding-right: 6px;
animation: bounce-in .3s;
cursor: default;
svg {
animation: flyaway 1.3s linear;
top: -80px;
right: -1000px;
path {
fill: #6AAA3B;
}
}
}
}
@keyframes flyaway {
0% {
transform: rotate(10deg);
top: 13px;
right: 25px;
height: 30px;
}
5% {
transform: rotate(10deg);
top: 13px;
right: 0px;
height: 30px;
}
20% {
transform: rotate(-20deg);
top: 13px;
right: -130px;
height: 45px;
}
40% {
transform: rotate(10deg);
top: -40px;
right: -280px;
opacity: 1;
}
100% {
transform: rotate(60deg);
top: -200px;
right: -1000px;
height: 0;
opacity: 0;
}
}
@keyframes bounce-in {
0% {
padding-right: 30px;
}
40% {
padding-right: 6px;
}
50% {
padding-left: 30px;
}
100% {
padding-left: 6px;
}
} }
frontend/angular/src/app/components/message-engine-applicant-view/message-engine-applicant-view.component.ts
...@@ -24,7 +24,7 @@ export class MessageEngineApplicantViewComponent extends BaseComponent implement ...@@ -24,7 +24,7 @@ export class MessageEngineApplicantViewComponent extends BaseComponent implement
@Input() embedded = false; @Input() embedded = false;
subscriptions: Array<Subscription> = []; subscriptions: Array<Subscription> = [];
@ViewChild('form') form: NgForm; @ViewChild('form') form: NgForm;
@ViewChild('message') message: Editor; @ViewChild('message') messageEditor: Editor;
createdObjs = {}; createdObjs = {};
updatedObjs = {}; updatedObjs = {};
deletedObjs = {}; deletedObjs = {};
...@@ -47,7 +47,7 @@ export class MessageEngineApplicantViewComponent extends BaseComponent implement ...@@ -47,7 +47,7 @@ export class MessageEngineApplicantViewComponent extends BaseComponent implement
ngOnInit(): void { ngOnInit(): void {
this.utilsService.resetCounter(); this.utilsService.resetCounter();
this.message.getQuill().container.addClass('form-control'); this.setEditorClass();
this.showLoader = true; this.showLoader = true;
this.subscriptions.push(this.activatedRoute.params this.subscriptions.push(this.activatedRoute.params
.subscribe( .subscribe(
...@@ -127,4 +127,24 @@ export class MessageEngineApplicantViewComponent extends BaseComponent implement ...@@ -127,4 +127,24 @@ export class MessageEngineApplicantViewComponent extends BaseComponent implement
); );
} }
} }
setEditorClass(): void {
setTimeout(() => {
const editElement = this.messageEditor.getQuill().container;
if (!editElement) {
return;
}
const editor = editElement.getElementsByClassName('ql-editor');
if (!editor[0]) {
return;
}
editor[0].classList.add('form-control');
editor[0].classList.add('editor');
}, 0);
}
} }
frontend/angular/src/assets/css/custom.scss
...@@ -77,6 +77,14 @@ ...@@ -77,6 +77,14 @@
margin-bottom: 0 !important; margin-bottom: 0 !important;
} }
.mt-3 {
margin-top: 3em;
}
.pl-1 {
padding-left: 1em;
}
.mr-0 { .mr-0 {
margin-right: 0 !important; margin-right: 0 !important;
} }
...@@ -314,10 +322,12 @@ body .ui-dropdown-panel .ui-dropdown-filter-container { ...@@ -314,10 +322,12 @@ body .ui-dropdown-panel .ui-dropdown-filter-container {
padding-bottom: 0 !important; padding-bottom: 0 !important;
} }
.message-template-form { .form {
background-color: #F5F7F8; background-color: white;
padding: 65px 10.5%; padding: 65px 10.5%;
}
.message-template-form {
label { label {
font-family: 'Usual-Regular' !important; font-family: 'Usual-Regular' !important;
} }
...@@ -331,7 +341,7 @@ body .ui-dropdown-panel .ui-dropdown-filter-container { ...@@ -331,7 +341,7 @@ body .ui-dropdown-panel .ui-dropdown-filter-container {
} }
.separator { .separator {
width: 80%; width: 98%;
background: #4E5258; background: #4E5258;
display: flex; display: flex;
height: 5px; height: 5px;
...@@ -376,3 +386,11 @@ body .ui-dropdown-panel .ui-dropdown-filter-container { ...@@ -376,3 +386,11 @@ body .ui-dropdown-panel .ui-dropdown-filter-container {
.ui-button:focus, .ui-panel-titlebar-icon:hover, .ui-multiselect-close:hover { .ui-button:focus, .ui-panel-titlebar-icon:hover, .ui-multiselect-close:hover {
background-color: rgba(3, 160, 231, 0.5) !important; background-color: rgba(3, 160, 231, 0.5) !important;
} }
.btn.btn-primary.largeBtn:focus {
background: rgba(255, 255, 255, 0.5) !important;
}
.ui-button.ui-button-icon-only {
margin: 1px;
}
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