Merge branch 'master' of https://git.loafle.net/ucap-web/next-ucap-messenger

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.scss

@@ -30,6 +30,7 @@
   padding: 10px;
   border: 1px solid #cccccc;
   border-radius: 4px;
+  font-size: 0.9em;
   .select-file {
     color: #212121;
     border-bottom: 1px dotted #dddddd;
@@ -74,8 +75,7 @@
         display: flex;
         justify-content: center;
         align-items: center;
-        width: 100px;
-        height: 100px;
+        height: 90px;
         background-color: #efefef;
         border: 1px dotted #cccccc;
         box-sizing: border-box;
@@ -87,12 +87,10 @@
       dd {
         .btn-download {
           margin-left: auto;
+          height:40px;
         }
       }
     }
-    &:nth-child(3n + 0) {
-      margin-right: 0;
-    }
   }
 }
 
@@ -102,14 +100,18 @@
       display: flex;
       flex-flow: wrap;
       height: auto;
-      justify-content: space-between;
+      justify-content: stretch;
+      align-content: space-between;
       width: 100%;
       .img-item {
         cursor: pointer;
         margin-bottom: 10px;
         position: relative;
-        height: 130px;
-        width: 33%;
+        width: 32%;
+        margin-right: 2%;
+        &:nth-child(3n + 0) {
+          margin-right: 0;
+        }
       }
     }
   }
@@ -128,6 +130,7 @@
   button {
     margin: 5px;
     font-size: 0.9em;
+    padding: 0 12px;
   }
 }
 

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/file-box.component.scss

@@ -173,6 +173,7 @@ $listH-row2: 60px;
     button {
       margin: 5px;
       font-size: 0.9em;
+      padding: 0 12px;
     }
   }
 }

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/room-user-list.component.html

@@ -1,6 +1,6 @@
 <div fxLayout="column" class="list">
   <div class="search-list">
-    <perfect-scrollbar class="album-scrollbar">
+    <perfect-scrollbar class="room-user-scrollbar">
       <ucap-profile-user-list-item
         *ngFor="let userInfo of userInfoList"
         [userInfo]="userInfo"

projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.html

@@ -455,31 +455,40 @@
       class="version-info-container menu-item"
       (click)="$event.stopPropagation()"
     >
-      <div>
-        <span>
-          {{ 'information.installedVersion' | translate }}:{{ appVersion }}
+      <div class="version-info-now">
+        <span class="version-info-item">
+          {{ 'information.installedVersion' | translate }}:<span
+            class="info-content"
+            >{{ appVersion }}</span
+          >
         </span>
       </div>
-      <div *ngIf="checkingUpdate">
-        <div *ngIf="checkingUpdateIsProcessing" style="display: flex;">
+      <div *ngIf="checkingUpdate" class="version-info-newest">
+        <div *ngIf="checkingUpdateIsProcessing">
+          <span class="version-info-item">
+            {{ 'information.checkForUpdatesInProgress' | translate }}
+            <span class="info-content">
               <mat-spinner
                 *ngIf="checkingUpdate && checkingUpdateIsProcessing"
                 diameter="20"
                 strokeWidth="1"
               ></mat-spinner>
-          {{ 'information.checkForUpdatesInProgress' | translate }}
+            </span>
+          </span>
         </div>
 
         <div *ngIf="!checkingUpdateIsProcessing" style="display: flex;">
-          <span>
-            {{ 'information.latestVersion' | translate }}:{{
-              checkingUpdateAppVersion
-            }}
+          <span class="version-info-item">
+            {{ 'information.latestVersion' | translate }}:<span
+              class="info-content"
+              >{{ checkingUpdateAppVersion }}</span
+            >
           </span>
-          <span>
+          <span class="version-info-button">
             <button
               *ngIf="checkingUpdateIsExist"
-              mat-button
+              mat-flat-button
+              class="mat-primary"
               (click)="onClickApplyUpdate($event)"
             >
               {{ 'information.applyUpdates' | translate }}

projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.scss

@@ -298,5 +298,41 @@
 }
 
 .version-info-container {
-  width: 250px;
+  display: flex;
+  flex-flow: column;
+  padding: 10px 20px;
+  .version-info-now {
+    .version-info-item {
+      display: flex;
+      height: 2em;
+      justify-items: center;
+      .info-content {
+        margin-left: auto;
+        text-align: end;
+      }
+    }
+  }
+  .version-info-newest {
+    width: 240px;
+    div {
+      display: flex;
+      flex-flow: column;
+      .version-info-item {
+        display: flex;
+        height: 2em;
+        justify-items: center;
+        .info-content {
+          margin-left: auto;
+          text-align: end;
+        }
+      }
+      .version-info-button {
+        display: flex;
+        justify-content: center;
+        button {
+          width: 100%;
+        }
+      }
+    }
+  }
 }

projects/ucap-webmessenger-app/src/assets/scss/partials/splash.css

@@ -60,8 +60,8 @@
   font-size: 10px;
   margin: 50px auto;
   text-indent: -9999em;
-  width: 11em;
-  height: 11em;
+  width: 100px;
+  height: 100px;
   border-radius: 50%;
   background: #ffffff;
   background: -moz-linear-gradient(
@@ -113,7 +113,7 @@
 .credit {
   color: #ffffff;
   margin: 0 auto;
-  font-size: 1.3em;
+  font-size: 1.2em;
   font-weight: 500;
 }
 
@@ -137,3 +137,13 @@
     transform: rotate(360deg);
   }
 }
+
+@media screen and (max-width: 1024px), (max-height: 800px) {
+  .load-container .loader {
+    width: 10vw;
+    height: 10vw;
+  }
+  .credit {
+    font-size: 1em;
+  }
+}

projects/ucap-webmessenger-ui-account/src/lib/components/login.component.scss

@@ -17,18 +17,6 @@ $login-max-height: 800px;
   }
 }
 
-@include tab {
-  .login-form {
-    width: 34vw;
-    min-width: 34vw;
-    font-size: 0.9em;
-  }
-  .mat-title {
-    width: 14vh;
-    height: 14vh;
-    margin: 10px 0 10px 0;
-  }
-}
 .login-form {
   position: relative;
   transform: scale(1);

projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.ts

@@ -142,6 +142,7 @@ export class MessagesComponent implements OnInit, OnDestroy {
 
   readToHereEvent: Info<EventJson>;
   swapped = false;
+  hidden = false;
 
   constructor(
     private logger: NGXLogger,
@@ -384,9 +385,10 @@ export class MessagesComponent implements OnInit, OnDestroy {
     to: Info<EventJson>,
     preCallback: () => void,
     postCallback: () => void,
-    useSwap: boolean = true
+    useHide: boolean,
+    useSwap: boolean
   ) {
-    this.preSwapScroll(useSwap);
+    this.preSwapScroll(useHide, useSwap);
     if (!!preCallback) {
       preCallback();
     }
@@ -395,12 +397,12 @@ export class MessagesComponent implements OnInit, OnDestroy {
         if (!!postCallback) {
           postCallback();
         }
-        this.postSwapScroll(useSwap);
+        this.postSwapScroll(useHide, useSwap);
       }, 100);
     });
   }
 
-  preSwapScroll(useSwap: boolean = true) {
+  preSwapScroll(useHide: boolean, useSwap: boolean) {
     if (useSwap && !this.swapped) {
       this.chatMessagesBuffer.nativeElement.innerHTML = this.chatMessagesContainer.nativeElement.innerHTML;
       this.chatMessagesBuffer.nativeElement.scrollTop = this.chatMessagesContainer.nativeElement.scrollTop;
@@ -408,10 +410,13 @@ export class MessagesComponent implements OnInit, OnDestroy {
       this.swapped = true;
     }
 
+    if (useHide && !this.hidden) {
       this.chatMessagesContainer.nativeElement.classList.add('hide');
+      this.hidden = true;
+    }
   }
 
-  postSwapScroll(useSwap: boolean = true) {
+  postSwapScroll(useHide: boolean, useSwap: boolean) {
     if (useSwap && this.swapped) {
       this.chatMessagesBuffer.nativeElement.innerHTML = '';
       this.chatMessagesBuffer.nativeElement.scrollTop = 0;
@@ -419,7 +424,10 @@ export class MessagesComponent implements OnInit, OnDestroy {
       this.swapped = false;
     }
 
+    if (useHide && this.hidden) {
       this.chatMessagesContainer.nativeElement.classList.remove('hide');
+      this.hidden = false;
+    }
   }
 
   ready(): void {
@@ -434,7 +442,9 @@ export class MessagesComponent implements OnInit, OnDestroy {
           () => {},
           () => {
             this.firstCheckReadHere = false;
-          }
+          },
+          true,
+          true
         );
       } else {
         this.swapScroll(
@@ -442,7 +452,9 @@ export class MessagesComponent implements OnInit, OnDestroy {
           () => {},
           () => {
             this.storedScrollItem = undefined;
-          }
+          },
+          true,
+          true
         );
       }
     } else if (this.scrollUpInitalized) {
@@ -460,18 +472,34 @@ export class MessagesComponent implements OnInit, OnDestroy {
           () => {},
           () => {
             this.firstCheckReadHere = false;
-          }
+          },
+          true,
+          true
+        );
+      } else {
+        if (
+          this.virtualScroller.viewPortInfo.endIndex ===
+          this.eventList.length - 2
+        ) {
+          this.swapScroll(
+            this.eventList[this.eventList.length - 1],
+            () => {},
+            () => {},
+            false,
+            false
           );
         } else {
           this.swapScroll(
             this.eventList[this.eventList.length - 1],
             () => {},
             () => {},
+            true,
             false
           );
         }
       }
     }
+  }
 
   initEventMore() {
     // 방정보가 바뀌면 이전대화 보기 관련 값들을 초기화 한다.
@@ -499,7 +527,7 @@ export class MessagesComponent implements OnInit, OnDestroy {
     if (this.scrollUpInitalized && this.eventRemained) {
       this.storeScrollPosition();
 
-      this.preSwapScroll();
+      this.preSwapScroll(true, true);
 
       this.moreEvent.emit(this.eventList[0].seq);
 

projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.scss

@@ -84,7 +84,7 @@ $thumbnail-msize: 40px;
 
     .room-info {
       flex-direction: column;
-      width: calc(100% - 80px);
+      width: calc(100% - 60px);
       .detail {
         display: inline-flex;
         color: $font-dark;
@@ -118,12 +118,12 @@ $thumbnail-msize: 40px;
     }
     .date {
       float: right;
-      width: 70px;
+      width: 60px;
       text-align: right;
-      margin-left: 10px;
       color: $font-mid;
-      align-items: flex-start;
+      align-items: flex-end;
       margin-top: -2px;
+      margin-left: auto;
     }
   }
 

projects/ucap-webmessenger-ui/src/assets/scss/partials/_list-item.scss

@@ -55,7 +55,7 @@ $line-basic: 1px solid #dddddd;
       height: 40px;
       border-radius: 50%;
       overflow: hidden;
-      margin-right: 16px;
+      margin-right: 12px;
       position: relative;
       img {
         width: 40px;

projects/ucap-webmessenger-ui/src/lib/components/sticker-selector.component.scss

@@ -1,19 +1,28 @@
-.sticker-selector {
+::ng-deep .sticker-selector {
   height: 220px;
   border-top: 1px solid #cccccc;
-
-  .sticker-item-box {
-    flex-wrap: wrap;
-    padding: 20px 20px 0;
+  .mat-tab-header {
+    .mat-tab-label {
+      padding: 0 10px;
+    }
+  }
+  .mat-tab-body-wrapper {
+    height: 180px;
     overflow: auto;
   }
 }
 
-.sticker-item {
+.sticker-item-box {
+  flex-wrap: wrap;
+  padding: 20px 20px 0;
+  overflow: auto;
+
+  .sticker-item {
     width: 60px;
     margin-bottom: 20px;
     display: inline-flex;
     cursor: pointer;
+  }
 }
 
 .selected-sticker {