check for updates is modified

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

@@ -309,10 +309,13 @@
     </button>
   </div>
   <mat-divider></mat-divider>
-  <div class="setting">
-    <button mat-menu-item [matMenuTriggerFor]="informationMenu">
-      {{ 'information.label' | translate }}
-    </button>
+  <div
+    class="setting"
+    style="padding: 0 16px;"
+    [matMenuTriggerFor]="informationMenu"
+    (click)="onClickCheckForUpdates($event)"
+  >
+    {{ 'information.checkForUpdates' | translate }}
   </div>
   <mat-divider></mat-divider>
   <div class="setting">
@@ -432,39 +435,32 @@
 
 <mat-menu #informationMenu="matMenu" (closed)="onClosedInformationMenu($event)">
   <div class="version-info-container" (click)="$event.stopPropagation()">
-    <div style="display: flex;">
-      <span>{{ 'information.version' | translate }}: {{ appVersion }}</span>
+    <div>
       <span>
-        <button
-          *ngIf="!checkingUpdate"
-          mat-icon-button
-          matTooltip="{{ 'information.checkForUpdates' | translate }}"
-          (click)="onClickCheckUpdate($event)"
-        >
-          <span class="mdi mdi-progress-check"></span>
-        </button>
+        {{ 'information.installedVersion' | translate }}:{{ appVersion }}
+      </span>
+    </div>
+    <div *ngIf="checkingUpdate">
+      <div *ngIf="checkingUpdateIsProcessing" style="display: flex;">
         <mat-spinner
           *ngIf="checkingUpdate && checkingUpdateIsProcessing"
           diameter="20"
           strokeWidth="1"
         ></mat-spinner>
-      </span>
-    </div>
-    <div *ngIf="checkingUpdate">
-      <div *ngIf="checkingUpdateIsProcessing">
         {{ 'information.checkForUpdatesInProgress' | translate }}
       </div>
-      <div *ngIf="!checkingUpdateIsProcessing && !!checkingUpdateAppVersion">
-        {{
-          'information.updateIsExist'
-            | translate: { version: checkingUpdateAppVersion }
-        }}
-        <button mat-button (click)="onClickApplyUpdate($event)">
-          {{ 'information.applyUpdates' | translate }}
-        </button>
-      </div>
-      <div *ngIf="!checkingUpdateIsProcessing && !checkingUpdateAppVersion">
-        {{ 'information.updateIsNotExist' | translate }}
+
+      <div *ngIf="!checkingUpdateIsProcessing" style="display: flex;">
+        <span>
+          {{ 'information.latestVersion' | translate }}:{{
+            checkingUpdateAppVersion
+          }}
+        </span>
+        <span>
+          <button mat-button (click)="onClickApplyUpdate($event)">
+            {{ 'information.applyUpdates' | translate }}
+          </button>
+        </span>
       </div>
     </div>
   </div>

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

@@ -294,5 +294,5 @@
 }
 
 .version-info-container {
-  width: 200px;
+  width: 250px;
 }

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

@@ -110,6 +110,7 @@ export class TopBarComponent implements OnInit, OnDestroy {
   checkingUpdate = false;
   checkingUpdateIsProcessing = false;
   checkingUpdateAppVersion: string;
+  checkingUpdateIsExist = false;
 
   readonly awayTimeList = [10, 20, 30];
 
@@ -499,13 +500,20 @@ export class TopBarComponent implements OnInit, OnDestroy {
     );
   }
 
+  onClickCheckForUpdates(event: Event) {
+    event.stopPropagation();
+
+    this.checkForUpdates();
+  }
+
   onClosedInformationMenu() {
     this.checkingUpdate = false;
     this.checkingUpdateIsProcessing = false;
     this.checkingUpdateAppVersion = undefined;
+    this.checkingUpdateIsExist = false;
   }
 
-  onClickCheckUpdate(event: Event) {
+  checkForUpdates() {
     this.checkingUpdate = true;
     this.checkingUpdateIsProcessing = true;
 
@@ -524,10 +532,11 @@ export class TopBarComponent implements OnInit, OnDestroy {
       .pipe(take(1))
       .subscribe(
         res => {
+          this.checkingUpdateAppVersion = res.appVersion;
           if (semver.lt(this.appVersion, res.appVersion)) {
-            this.checkingUpdateAppVersion = res.appVersion;
+            this.checkingUpdateIsExist = true;
           } else {
-            this.checkingUpdateAppVersion = undefined;
+            this.checkingUpdateIsExist = false;
           }
         },
         error => {},

projects/ucap-webmessenger-app/src/assets/i18n/en.json

@@ -76,10 +76,10 @@
   "information": {
     "label": "Information",
     "version": "Version",
+    "installedVersion": "Installed version",
+    "latestVersion": "Latest version",
     "checkForUpdates": "Check for updates",
     "checkForUpdatesInProgress": "Checking for updates",
-    "updateIsExist": "There is a new version [{{version}}].",
-    "updateIsNotExist": "The version of the app is up to date.",
     "applyUpdates": "Update"
   },
   "settings": {

projects/ucap-webmessenger-app/src/assets/i18n/ko.json

@@ -76,10 +76,10 @@
   "information": {
     "label": "정보",
     "version": "버전",
+    "installedVersion": "설치된 버전",
+    "latestVersion": "최신 버전",
     "checkForUpdates": "업데이트 확인",
     "checkForUpdatesInProgress": "업데이트를 확인하고 있습니다.",
-    "updateIsExist": "새로운 버전[{{version}}]이 존재합니다.",
-    "updateIsNotExist": "최신 버전이 적용되어 있습니다.",
     "applyUpdates": "업데이트 설치"
   },
   "settings": {