From 0e536e52664d5e6aac7576d7a5db4a30fe990631 Mon Sep 17 00:00:00 2001
From: richard-loafle <44828666+richard-loafle@users.noreply.github.com>
Date: Thu, 23 Jan 2020 11:55:51 +0900
Subject: [PATCH 1/3] bug of new message is fixed

---
 .../src/lib/components/messages.component.ts  | 62 ++++++++++++++-----
 1 file changed, 45 insertions(+), 17 deletions(-)

diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.ts b/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.ts
index 1587a7bd..6c16307f 100644
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.ts
+++ b/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;
     }
 
-    this.chatMessagesContainer.nativeElement.classList.add('hide');
+    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;
     }
 
-    this.chatMessagesContainer.nativeElement.classList.remove('hide');
+    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,15 +472,31 @@ export class MessagesComponent implements OnInit, OnDestroy {
           () => {},
           () => {
             this.firstCheckReadHere = false;
-          }
+          },
+          true,
+          true
         );
       } else {
-        this.swapScroll(
-          this.eventList[this.eventList.length - 1],
-          () => {},
-          () => {},
-          false
-        );
+        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
+          );
+        }
       }
     }
   }
@@ -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);
 

From 9ba7bd4966ae9f6d7796ec4a8b072aab22f3a7f6 Mon Sep 17 00:00:00 2001
From: khk <khk@gmail.com>
Date: Thu, 23 Jan 2020 12:11:45 +0900
Subject: [PATCH 2/3] =?UTF-8?q?=EB=B2=84=EC=A0=BC=EC=A0=95=EB=B3=B4=20?=
 =?UTF-8?q?=EB=B0=8F=20=EC=88=98=EC=A0=95=EC=82=AC=ED=95=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../right-drawer/album-box.component.scss     | 19 ++++++----
 .../right-drawer/file-box.component.scss      |  1 +
 .../room-user-list.component.html             |  2 +-
 .../native/components/top-bar.component.html  | 37 ++++++++----------
 .../native/components/top-bar.component.scss  | 38 ++++++++++++++++++-
 .../src/assets/scss/partials/splash.css       | 16 ++++++--
 .../src/lib/components/login.component.scss   | 12 ------
 .../lib/components/list-item.component.scss   |  8 ++--
 .../src/assets/scss/partials/_list-item.scss  |  2 +-
 .../sticker-selector.component.scss           | 29 +++++++++-----
 10 files changed, 102 insertions(+), 62 deletions(-)

diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.scss
index 9726bb1a..f6094483 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.scss
+++ b/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;
   }
 }
 
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/file-box.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/file-box.component.scss
index 85043675..766b9f07 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/file-box.component.scss
+++ b/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;
     }
   }
 }
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/room-user-list.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/room-user-list.component.html
index ccc83de1..1af97737 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/room-user-list.component.html
+++ b/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"
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.html b/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.html
index 346c6658..9cc4cb61 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.html
@@ -439,35 +439,28 @@
     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;">
-        <mat-spinner
-          *ngIf="checkingUpdate && checkingUpdateIsProcessing"
-          diameter="20"
-          strokeWidth="1"
-        ></mat-spinner>
-        {{ 'information.checkForUpdatesInProgress' | translate }}
+    <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></span>
+        </span>
       </div>
 
       <div *ngIf="!checkingUpdateIsProcessing" style="display: flex;">
-        <span>
-          {{ 'information.latestVersion' | translate }}:{{
+        <span class="version-info-item">
+          {{ 'information.latestVersion' | translate }}:<span class="info-content">{{
             checkingUpdateAppVersion
-          }}
+          }}</span>
         </span>
-        <span>
-          <button
-            *ngIf="checkingUpdateIsExist"
-            mat-button
-            (click)="onClickApplyUpdate($event)"
-          >
-            {{ 'information.applyUpdates' | translate }}
-          </button>
+        <span class="version-info-button">
+           <button *ngIf="checkingUpdateIsExist" mat-flat-button
+            class="mat-primary" (click)="onClickApplyUpdate($event)">{{ 'information.applyUpdates' | translate }}</button>
         </span>
       </div>
     </div>
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.scss
index d199ff11..ada34dac 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.scss
+++ b/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%;
+        }
+      }
+    }
+  }
 }
diff --git a/projects/ucap-webmessenger-app/src/assets/scss/partials/splash.css b/projects/ucap-webmessenger-app/src/assets/scss/partials/splash.css
index 5788c47a..3cf87240 100644
--- a/projects/ucap-webmessenger-app/src/assets/scss/partials/splash.css
+++ b/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;
+  }
+}
diff --git a/projects/ucap-webmessenger-ui-account/src/lib/components/login.component.scss b/projects/ucap-webmessenger-ui-account/src/lib/components/login.component.scss
index c1f88f25..c5ffcc61 100644
--- a/projects/ucap-webmessenger-ui-account/src/lib/components/login.component.scss
+++ b/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);
diff --git a/projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.scss b/projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.scss
index 0e45ab2c..a7282736 100644
--- a/projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.scss
+++ b/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;
     }
   }
 
diff --git a/projects/ucap-webmessenger-ui/src/assets/scss/partials/_list-item.scss b/projects/ucap-webmessenger-ui/src/assets/scss/partials/_list-item.scss
index 22365b4d..32762b42 100644
--- a/projects/ucap-webmessenger-ui/src/assets/scss/partials/_list-item.scss
+++ b/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;
diff --git a/projects/ucap-webmessenger-ui/src/lib/components/sticker-selector.component.scss b/projects/ucap-webmessenger-ui/src/lib/components/sticker-selector.component.scss
index 8f7adcd4..e55a76a3 100644
--- a/projects/ucap-webmessenger-ui/src/lib/components/sticker-selector.component.scss
+++ b/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 {
-  width: 60px;
-  margin-bottom: 20px;
-  display: inline-flex;
-  cursor: pointer;
+.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 {

From 91fcf7f2e564aff3e34c871cd97a63837290530a Mon Sep 17 00:00:00 2001
From: richard-loafle <44828666+richard-loafle@users.noreply.github.com>
Date: Thu, 23 Jan 2020 12:42:33 +0900
Subject: [PATCH 3/3] merged

---
 .../native/components/top-bar.component.html  | 72 +++++++------------
 1 file changed, 26 insertions(+), 46 deletions(-)

diff --git a/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.html b/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.html
index 7604d648..47ebce10 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.html
@@ -450,65 +450,45 @@
 </mat-menu>
 
 <mat-menu #informationMenu="matMenu">
-<<<<<<< HEAD
-  <div
-    class="version-info-container menu-item"
-    (click)="$event.stopPropagation()"
-  >
-    <div class="version-info-now" >
-      <span class="version-info-item">
-        {{ 'information.installedVersion' | translate }}:<span class="info-content">{{ appVersion }}</span>
-      </span>
-    </div>
-    <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></span>
-        </span>
-      </div>
-
-      <div *ngIf="!checkingUpdateIsProcessing" style="display: flex;">
-        <span class="version-info-item">
-          {{ 'information.latestVersion' | translate }}:<span class="info-content">{{
-            checkingUpdateAppVersion
-          }}</span>
-        </span>
-        <span class="version-info-button">
-           <button *ngIf="checkingUpdateIsExist" mat-flat-button
-            class="mat-primary" (click)="onClickApplyUpdate($event)">{{ 'information.applyUpdates' | translate }}</button>
-=======
   <ng-template matMenuContent>
     <div
       class="version-info-container menu-item"
       (click)="$event.stopPropagation()"
     >
-      <div>
-        <span>
-          {{ 'information.installedVersion' | translate }}:{{ appVersion }}
->>>>>>> 86c2a7cb2a2195023425b1653f1cc8472b09a8d9
+      <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;">
-          <mat-spinner
-            *ngIf="checkingUpdate && checkingUpdateIsProcessing"
-            diameter="20"
-            strokeWidth="1"
-          ></mat-spinner>
-          {{ 'information.checkForUpdatesInProgress' | translate }}
+      <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>
+            </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 }}