feat(chat): Eva style (#1408)

BREAKING CHANGE: NbChatComponent 'accent' field removed. NbChatComponent sizes 'xxsmall' and 'xxlarge' removed. 'xsmall' size changed to 'tiny', 'xlarge' changed to 'giant'. Size class changed to 'size-[size-name]'. All size static fields removed (SIZE_XXSMALL, SIZE_XSMALL, SIZE_SMALL, SIZE_MEDIUM, SIZE_LARGE, SIZE_XLARGE, SIZE_XXLARGE). NbChatComponent 'active' status removed. Disabled status removed. Use disabled input instead. Status class names changed to 'status-[status-name]'. NbChatMessageComponent 'replyValue' changed to 'reply'. Following theme properties removed: chat-font-size -> chat-text-font-size chat-fg -> chat-text-color chat-bg -> chat-background-color chat-height-xsmall -> chat-tiny-height chat-height-small -> chat-small-height chat-height-medium -> chat-medium-height chat-height-large -> chat-large-height chat-height-xlarge -> chat-giant-height chat-separator -> chat-divider-color chat-message-fg -> chat-message-text-color chat-message-bg -> chat-message-background chat-message-reply-bg -> chat-message-reply-background-color chat-message-reply-fg -> chat-message-reply-text-color chat-message-avatar-bg -> chat-message-avatar-background-color chat-message-sender-fg -> chat-message-sender-text-color chat-message-quote-fg -> chat-message-quote-background-color chat-message-quote-bg -> chat-message-quote-text-color chat-message-file-fg -> chat-message-file-text-color chat-message-file-bg -> chat-message-file-background-color chat-primary-bg -> chat-primary-background-color chat-success-bg -> chat-success-background-color chat-info-bg -> chat-info-background-color chat-warning-bg -> chat-warning-background-color chat-danger-bg -> chat-danger-background-color Following theme properties removed: chat-fg-text chat-height-xxsmall chat-height-xxlarge chat-form-bg chat-form-fg chat-form-border chat-form-placeholder-fg chat-form-active-border chat-disabled-bg chat-disabled-fg chat-active-bg
akveo · May 27, 2019 · 3433164 · 3433164
1 parent 53fb3a6
commit 3433164
Show file tree

Hide file tree

Showing 17 changed files with 543 additions and 649 deletions.
diff --git a/src/framework/theme/components/chat/_chat.component.theme.scss b/src/framework/theme/components/chat/_chat.component.theme.scss
diff --git a/src/framework/theme/components/chat/chat-form.component.ts b/src/framework/theme/components/chat/chat-form.component.ts
@@ -16,6 +16,8 @@ import {
 } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 
+import { NbComponentStatus } from '../component-status';
+
 /**
  * Chat form component.
  *
@@ -43,14 +45,6 @@ import { DomSanitizer } from '@angular/platform-browser';
  *   this.service.sendToServer(message, files);
  * }
  * ```
- *
- * @styles
- *
- * chat-form-bg:
- * chat-form-fg:
- * chat-form-border:
- * chat-form-active-border:
- *
  */
 @Component({
   selector: 'nb-chat-form',
@@ -68,12 +62,24 @@ import { DomSanitizer } from '@angular/platform-browser';
       </ng-container>
     </div>
     <div class="message-row">
-      <input [(ngModel)]="message"
+      <input nbInput
+             [status]="(inputFocus || inputHover) ? status : ''"
+             (focus)="inputFocus = true"
+             (blur)="inputFocus = false"
+             (mouseenter)="inputHover = true"
+             (mouseleave)="inputHover = false"
+             [status]="status"
+             [(ngModel)]="message"
              [class.with-button]="showButton"
              type="text"
              placeholder="{{ fileOver ? 'Drop file to send' : 'Type a message' }}"
              (keyup.enter)="sendMessage()">
-      <button *ngIf="showButton" class="btn" [class.with-icon]="!buttonTitle" (click)="sendMessage()">
+      <button nbButton
+              [status]="status || 'primary'"
+              *ngIf="showButton"
+              [class.with-icon]="!buttonTitle"
+              (click)="sendMessage()"
+              class="send-button">
         {{ buttonTitle }}<nb-icon *ngIf="!buttonTitle" [icon]="buttonIcon" pack="nebular-essentials"></nb-icon>
       </button>
     </div>
@@ -82,6 +88,10 @@ import { DomSanitizer } from '@angular/platform-browser';
 })
 export class NbChatFormComponent {
 
+  status: NbComponentStatus;
+  inputFocus: boolean = false;
+  inputHover: boolean = false;
+
   droppedFiles: any[] = [];
   imgDropTypes = ['image/png', 'image/jpeg', 'image/gif'];
 
@@ -123,7 +133,7 @@ export class NbChatFormComponent {
 
   @HostBinding('class.file-over') fileOver = false;
 
-  constructor(private cd: ChangeDetectorRef, private domSanitizer: DomSanitizer) {
+  constructor(protected cd: ChangeDetectorRef, protected domSanitizer: DomSanitizer) {
   }
 
   @HostListener('drop', ['$event'])
@@ -135,8 +145,7 @@ export class NbChatFormComponent {
       this.fileOver = false;
       if (event.dataTransfer && event.dataTransfer.files) {
 
-        // tslint:disable-next-line
-        for (let file of event.dataTransfer.files) {
+        for (const file of event.dataTransfer.files) {
           const res = file;
 
           if (this.imgDropTypes.includes(file.type)) {
@@ -183,4 +192,11 @@ export class NbChatFormComponent {
       this.droppedFiles = [];
     }
   }
+
+  setStatus(status: NbComponentStatus): void {
+    if (this.status !== status) {
+      this.status = status;
+      this.cd.detectChanges();
+    }
+  }
 }
diff --git a/src/framework/theme/components/chat/chat-message-file.component.ts b/src/framework/theme/components/chat/chat-message-file.component.ts
@@ -9,9 +9,6 @@ import { DomSanitizer } from '@angular/platform-browser';
 
 /**
  * Chat message component.
- *
- * @styles
- *
  */
 @Component({
   selector: 'nb-chat-message-file',
@@ -77,7 +74,7 @@ export class NbChatMessageFileComponent {
     this.cd.detectChanges();
   }
 
-  constructor(private cd: ChangeDetectorRef, private domSanitizer: DomSanitizer) {
+  constructor(protected cd: ChangeDetectorRef, protected domSanitizer: DomSanitizer) {
   }
 
 

diff --git a/src/framework/theme/components/chat/chat-message-map.component.ts b/src/framework/theme/components/chat/chat-message-map.component.ts
@@ -9,9 +9,6 @@ import { NbChatOptions } from './chat.options';
 
 /**
  * Chat message component.
- *
- * @styles
- *
  */
 @Component({
   selector: 'nb-chat-message-map',
@@ -54,7 +51,7 @@ export class NbChatMessageMapComponent {
 
   get file() {
     return {
-      // tslint:disable-next-line
+      // tslint:disable-next-line:max-line-length
       url: `https://maps.googleapis.com/maps/api/staticmap?center=${this.latitude},${this.longitude}&zoom=12&size=400x400&key=${this.mapKey}`,
       type: 'image/png',
       icon: 'location',

diff --git a/src/framework/theme/components/chat/chat-message-quote.component.ts b/src/framework/theme/components/chat/chat-message-quote.component.ts
@@ -8,9 +8,6 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 
 /**
  * Chat message component.
- *
- * @styles
- *
  */
 @Component({
   selector: 'nb-chat-message-quote',

diff --git a/src/framework/theme/components/chat/chat-message-text.component.ts b/src/framework/theme/components/chat/chat-message-text.component.ts
@@ -8,9 +8,6 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 
 /**
  * Chat message component.
- *
- * @styles
- *
  */
 @Component({
   selector: 'nb-chat-message-text',

diff --git a/src/framework/theme/components/chat/chat-message.component.ts b/src/framework/theme/components/chat/chat-message.component.ts
@@ -42,21 +42,21 @@ import { animate, state, style, transition, trigger } from '@angular/animations'
  *
  * @styles
  *
- * chat-message-fg:
- * chat-message-bg:
- * chat-message-reply-bg:
- * chat-message-reply-fg:
- * chat-message-avatar-bg:
- * chat-message-sender-fg:
- * chat-message-quote-fg:
- * chat-message-quote-bg:
- * chat-message-file-fg:
- * chat-message-file-bg:
+ * chat-message-background:
+ * chat-message-text-color:
+ * chat-message-reply-background-color:
+ * chat-message-reply-text-color:
+ * chat-message-avatar-background-color:
+ * chat-message-sender-text-color:
+ * chat-message-quote-background-color:
+ * chat-message-quote-text-color:
+ * chat-message-file-text-color:
+ * chat-message-file-background-color:
  */
 @Component({
   selector: 'nb-chat-message',
   template: `
-    <div class="avatar" [style.background-image]="avatarStyle" *ngIf="!replyValue">
+    <div class="avatar" [style.background-image]="avatarStyle" *ngIf="!reply">
       <ng-container *ngIf="!avatarStyle">
         {{ getInitials() }}
       </ng-container>
@@ -105,12 +105,9 @@ export class NbChatMessageComponent {
     return true;
   }
 
-  @HostBinding('class.reply')
-  replyValue: boolean = false;
-
   @HostBinding('class.not-reply')
   get notReply() {
-    return !this.replyValue;
+    return !this.reply;
   }
 
   avatarStyle: SafeStyle;
@@ -119,9 +116,14 @@ export class NbChatMessageComponent {
    * Determines if a message is a reply
    */
   @Input()
-  set reply(val: boolean) {
-    this.replyValue = convertToBoolProperty(val);
+  @HostBinding('class.reply')
+  get reply(): boolean {
+    return this._reply;
+  }
+  set reply(value: boolean) {
+    this._reply = convertToBoolProperty(value);
   }
+  protected _reply: boolean = false;
 
   /**
    * Message sender
@@ -180,7 +182,7 @@ export class NbChatMessageComponent {
    */
   @Input() type: string;
 
-  constructor(private domSanitizer: DomSanitizer) { }
+  constructor(protected domSanitizer: DomSanitizer) { }
 
   getInitials(): string {
     if (this.sender) {