save

src/app/pages/chat/messages/messages.page.html

@@ -87,7 +87,7 @@
                 <ion-icon *ngIf="msg.attachments[0].image_url == null" name="download-outline"></ion-icon>
               </div>
               <div *ngIf="msg.file.type != 'application/img'">
-                  <div class="file" *ngIf="msg.file.type != 'aplication/audio'">
+                  <div class="file add-attachment-bg-color" *ngIf="msg.file.type != 'aplication/audio'">
                     <div (click)="docIndex(i); viewDocument(msg, file.title_link)" class="file-details add-ellipsis cursor-pointer" *ngIf="msg.file">
                       <span *ngIf="msg.file.type">
                         <fa-icon *ngIf="msg.file.type == 'application/pdf'" icon="file-pdf" class="pdf-icon"></fa-icon>
@@ -98,10 +98,10 @@
                       <ion-label class="file-title">{{file.title}}</ion-label>
                     </div>
                   </div>
-                  <div class="file" *ngIf="msg.file.type == 'aplication/audio'">
-                    <audio [src]="file.title_link|safehtml" class="d-flex width-100 mt-10 mb-10" controls controlsList="nodownload noplaybackrate"></audio>
+                  <div *ngIf="msg.file.type == 'aplication/audio'">
+                    <audio [src]="file.title_link|safehtml" preload="metadata" class="d-flex width-100" controls controlsList="nodownload noplaybackrate"></audio>
                   </div>
-                  <div class="file-details-optional">
+                  <div class="file-details-optional add-attachment-bg-color">
                     <ion-label *ngIf="msg.file && msg.file != ''">
                       <span *ngIf="file.description">{{file.description}}</span>
                       <span *ngIf="file.description && msg.file.type != 'application/webtrix'"> • </span>
@@ -202,10 +202,10 @@
         <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="chat-icon-options" src="assets/images/theme/gov/icons-add.svg"></ion-icon>
       </button>
       <button *ngIf="recording || lastAudioRecorded || !allowTyping" class="btn-no-color" (click)="deleteRecording(lastAudioRecorded)">
-        <fa-icon icon="trash" class="word-icon"></fa-icon>
+        <fa-icon class="icon-size-27" icon="trash"></fa-icon>
       </button>
     </div>
-    <div class="width-70">
+    <div class="width-70 message-container">
       <div *ngIf="!recording && !lastAudioRecorded" class="type-message">
         <ion-textarea *ngIf="allowTyping" autocomplete="on" autocorrect="on" spellcheck="true" clearOnEdit="true" placeholder="Escrever uma mensagem" auto-grow class="message-input" rows="1" [(ngModel)]="wsChatMethodsService.getDmRoom(roomId).message" (ionChange)="wsChatMethodsService.getDmRoom(roomId).sendTyping()"></ion-textarea>
         <!-- <ion-textarea hidden autocomplete="on" spellcheck="true" *ngIf="recording" clearOnEdit="true" placeholder="Escrever uma mensagem" auto-grow class="message-input" rows="1" [(ngModel)]="durationDisplay"></ion-textarea> -->
@@ -213,10 +213,10 @@
           <ion-icon slot="end" src="assets/icon/icons-chat-mic.svg"></ion-icon>
         </button> -->
       </div>
-      <div  *ngIf="recording" class="d-flex align-items-center justify-content-center">
-        <button (click)="stopRecording()" class="btn-no-color">
-        <ion-icon name="stop-circle-outline" color="danger"></ion-icon>
-      </button>
+      <div *ngIf="recording" class="d-flex align-items-center justify-content-center">
+        <button (click)="stopRecording()" class="btn-no-color d-flex align-items-center justify-content-center">
+        <ion-icon class="icon-size-45" name="stop-circle-outline" color="danger"></ion-icon>
+        </button>
       </div>
     </div>
     <div>

src/app/pages/chat/messages/messages.page.scss

@@ -56,9 +56,6 @@
             width: calc(100% - 25px);
             text-align: right;
 
-            /* ion-icon{
-              font-size: 25px;
-            } */
             .middle-container-options-icons{
               color: #0782c9;
               font-size: 23px;
@@ -117,6 +114,7 @@
         }
     }
  }
+
  ion-content{
    .welcome-text{
     /* width: 322px; */
@@ -148,7 +146,7 @@
     -webkit-overflow-scrolling: touch;
 
     .messages-list-item-wrapper{
-      overflow: auto;
+      overflow: hidden;
     }
     .messages-list-item-wrapper-active{
       background: #e6f6ff75 !important;
@@ -319,3 +317,14 @@ display: block;
 .typing ngx-letters-avatar {
   padding-right: 5px;
 }
+
+
+button{
+  padding: 0px;
+  border: 0px;
+}
+
+button::-moz-focus-inner {
+  padding: 0px;
+  border: 0px;
+}

src/global.scss

@@ -1183,15 +1183,20 @@ ngx-mat-datetime-content{
   //font-weight: 400;
 }
 
+.add-attachment-bg-color{
+  background-color: #42b9fe13;
+}
+
 .message-attachments{
   border-radius: 5px;
-  background-color: #42b9fe13;
-  padding: 1px;
+  //background-color: #42b9fe13;
   .file{
     width: 100%;
     align-items: center;
     overflow: auto;
     color: #000;
+    //border: 1px solid blue;
+    padding: 1px;
 
     ion-thumbnail{
       --size: 20px;
@@ -1199,7 +1204,7 @@ ngx-mat-datetime-content{
     .file-details{
       max-width: 100%;
       padding-left: 5px;
-
+      padding: 1px;
       /* .file-title{
         padding-left: 5px;
       } */
@@ -1238,6 +1243,13 @@ ngx-mat-datetime-content{
 .powerpoint-icon{
   color: #d24726;
 }
+.icon-size-45{
+  font-size: 45px !important;
+}
+.icon-size-27{
+  font-size: 27px !important;
+  color: #797979;
+}
 .menu-icon{
   color: #42b9fe;
   padding: 0 5px 0 5px;