app exit is added

electron-projects/ucap-webmessenger-electron/src/index.ts

@@ -28,7 +28,8 @@ import {
   NotificationChannel,
   ChatChannel,
   MessengerChannel,
-  MessageChannel
+  MessageChannel,
+  AppChannel
 } from '@ucap-webmessenger/native-electron';
 import { ElectronNotificationService } from '@ucap-webmessenger/electron-notification';
 import { ElectronUpdateWindowService } from '@ucap-webmessenger/electron-update-window';
@@ -231,8 +232,7 @@ function createTray() {
       // selector: 'terminate:',
       click: () => {
         // 메신저에 로그아웃 후 종료
-        appWindow = null;
-        app.exit();
+        appExit();
       }
     }
   ]);
@@ -715,6 +715,10 @@ ipcMain.on(
   }
 );
 
+ipcMain.on(AppChannel.Exit, (event: IpcMainEvent, ...args: any[]) => {
+  appExit();
+});
+
 autoUpdater.on('checking-for-update', () => {
   log.info('Checking for update...');
 });
@@ -748,3 +752,8 @@ autoUpdater.on('update-downloaded', info => {
   updateWindowService.setDownloadComplete();
   autoUpdater.quitAndInstall(true, true);
 });
+
+function appExit() {
+  appWindow = null;
+  app.exit();
+}

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

@@ -257,27 +257,28 @@
   yPosition="below"
   (closed)="onClosedProfileMenu($event)"
 >
-  <div class="setting">
-    <button mat-menu-item [matMenuTriggerFor]="presenseMenu">
-      <ng-container [ngSwitch]="myStatus.pcStatus">
-        <ng-container *ngSwitchCase="StatusCode.OnLine">
-          {{ 'presence.online' | translate }}
+  <ng-template matMenuContent>
+    <div class="setting" style="width: 200px;">
+      <button mat-menu-item [matMenuTriggerFor]="presenseMenu">
+        <ng-container [ngSwitch]="myStatus.pcStatus">
+          <ng-container *ngSwitchCase="StatusCode.OnLine">
+            {{ 'presence.online' | translate }}
+          </ng-container>
+          <ng-container *ngSwitchCase="StatusCode.Away">
+            {{ 'presence.away' | translate }}
+          </ng-container>
+          <ng-container *ngSwitchCase="StatusCode.Busy">
+            {{ myStatus.statusMessage }}
+          </ng-container>
         </ng-container>
-        <ng-container *ngSwitchCase="StatusCode.Away">
-          {{ 'presence.away' | translate }}
-        </ng-container>
-        <ng-container *ngSwitchCase="StatusCode.Busy">
-          {{ myStatus.statusMessage }}
-        </ng-container>
-      </ng-container>
-    </button>
-  </div>
-  <div class="setting">
-    <button mat-menu-item (click)="onClickOpenProfile($event)">
-      {{ 'profile.open' | translate }}
-    </button>
-  </div>
-  <!-- <div class="setting">
+      </button>
+    </div>
+    <div class="setting">
+      <button mat-menu-item (click)="onClickOpenProfile($event)">
+        {{ 'profile.open' | translate }}
+      </button>
+    </div>
+    <!-- <div class="setting">
     <button
       mat-menu-item
       class="zoom minus-square"
@@ -293,183 +294,199 @@
       확대
     </button>
   </div> -->
-  <div class="setting">
-    <button mat-menu-item (click)="onClickNotice()">
-      {{ 'notice.label' | translate }}
-    </button>
-  </div>
-  <div class="setting">
-    <button mat-menu-item (click)="onClickRemoteSupport($event)">
-      {{ 'profile.remoteSupport' | translate }}
-    </button>
-  </div>
-  <div class="setting">
-    <button mat-menu-item (click)="onClickSettings()">
-      {{ 'settings.label' | translate }}
-    </button>
-  </div>
-  <mat-divider></mat-divider>
-  <div class="setting">
-    <button
-      mat-menu-item
-      [matMenuTriggerFor]="informationMenu"
-      (menuOpened)="onMenuOpenedinformationMenu()"
-    >
-      {{ 'information.checkForUpdates' | translate }}
-    </button>
-  </div>
-  <mat-divider></mat-divider>
-  <div class="setting">
-    <button mat-menu-item (click)="onClickLogout()">
-      {{ 'accounts.logout' | translate }}
-    </button>
-  </div>
+    <div class="setting">
+      <button mat-menu-item (click)="onClickNotice()">
+        {{ 'notice.label' | translate }}
+      </button>
+    </div>
+    <div class="setting">
+      <button mat-menu-item (click)="onClickRemoteSupport($event)">
+        {{ 'profile.remoteSupport' | translate }}
+      </button>
+    </div>
+    <div class="setting">
+      <button mat-menu-item (click)="onClickSettings()">
+        {{ 'settings.label' | translate }}
+      </button>
+    </div>
+    <mat-divider></mat-divider>
+    <div class="setting">
+      <button
+        mat-menu-item
+        [matMenuTriggerFor]="informationMenu"
+        (menuOpened)="onMenuOpenedinformationMenu()"
+      >
+        {{ 'information.checkForUpdates' | translate }}
+      </button>
+    </div>
+    <mat-divider></mat-divider>
+    <div class="setting">
+      <button mat-menu-item (click)="onClickLogout()">
+        {{ 'accounts.logout' | translate }}
+      </button>
+    </div>
+    <div class="setting">
+      <button mat-menu-item (click)="onClickQuit()">
+        {{ 'common.messages.quit' | translate }}
+      </button>
+    </div>
+  </ng-template>
 </mat-menu>
 
 <mat-menu #presenseMenu="matMenu" class="status-pc-set">
-  <div class="setting">
-    <button mat-menu-item (click)="onClickStatusOnline($event)">
-      <span class="presence pcOn"> </span>
-      {{ 'presence.online' | translate }}
-    </button>
-  </div>
-  <div class="setting">
-    <button mat-menu-item (click)="onClickStatusAway($event)">
-      <span class="presence pcOut"> </span>
-      {{ 'presence.away' | translate }}
-    </button>
-    <button
-      mat-menu-item
-      class="clock"
-      [matMenuTriggerFor]="awayTimeMenu"
-    ></button>
-  </div>
-  <div class="setting">
-    <button mat-menu-item (click)="onClickStatusBusy($event, 1)">
-      <span class="presence pcOther"> </span>
-      <ucap-inline-edit-input
-        (apply)="
-          $event.stopPropagation();
-          onApplyStatusMessage(1, statusMessage1.value)
-        "
-        (edit)="$event.stopPropagation()"
-        (cancel)="$event.stopPropagation()"
-        class="form-eidt"
-      >
-        <span ucapInlineEditInput="view">{{ loginRes?.statusMessage1 }}</span>
-        <span ucapInlineEditInput="edit"
-          ><input
-            matInput
-            #statusMessage1
-            type="text"
-            maxlength="5"
-            [value]="loginRes?.statusMessage1"
-            (click)="$event.stopPropagation()"
-        /></span>
-      </ucap-inline-edit-input>
-    </button>
-  </div>
-  <div class="setting">
-    <button mat-menu-item (click)="onClickStatusBusy($event, 2)">
-      <span class="presence pcOther"> </span>
-      <ucap-inline-edit-input
-        (apply)="
-          $event.stopPropagation();
-          onApplyStatusMessage(2, statusMessage2.value)
-        "
-        (edit)="$event.stopPropagation()"
-        (cancel)="$event.stopPropagation()"
-        class="form-eidt"
-      >
-        <span ucapInlineEditInput="view">{{ loginRes?.statusMessage2 }}</span>
-        <span ucapInlineEditInput="edit"
-          ><input
-            matInput
-            #statusMessage2
-            type="text"
-            maxlength="5"
-            [value]="loginRes?.statusMessage2"
-            (click)="$event.stopPropagation()"
-        /></span>
-      </ucap-inline-edit-input>
-    </button>
-  </div>
-  <div class="setting">
-    <button mat-menu-item (click)="onClickStatusBusy($event, 3)">
-      <span class="presence pcOther"> </span>
-      <ucap-inline-edit-input
-        (apply)="
-          $event.stopPropagation();
-          onApplyStatusMessage(3, statusMessage3.value)
-        "
-        (edit)="$event.stopPropagation()"
-        (cancel)="$event.stopPropagation()"
-        class="form-eidt"
-      >
-        <span ucapInlineEditInput="view">{{ loginRes?.statusMessage3 }}</span>
-        <span ucapInlineEditInput="edit"
-          ><input
-            matInput
-            #statusMessage3
-            type="text"
-            maxlength="5"
-            [value]="loginRes?.statusMessage3"
-            (click)="$event.stopPropagation()"
-        /></span>
-      </ucap-inline-edit-input>
-    </button>
-  </div>
+  <ng-template matMenuContent>
+    <div class="setting">
+      <button mat-menu-item (click)="onClickStatusOnline($event)">
+        <span class="presence pcOn"> </span>
+        {{ 'presence.online' | translate }}
+      </button>
+    </div>
+    <div class="setting">
+      <button mat-menu-item (click)="onClickStatusAway($event)">
+        <span class="presence pcOut"> </span>
+        {{ 'presence.away' | translate }}
+      </button>
+      <button
+        mat-menu-item
+        class="clock"
+        [matMenuTriggerFor]="awayTimeMenu"
+      ></button>
+    </div>
+    <div class="setting">
+      <button mat-menu-item (click)="onClickStatusBusy($event, 1)">
+        <span class="presence pcOther"> </span>
+        <ucap-inline-edit-input
+          (apply)="
+            $event.stopPropagation();
+            onApplyStatusMessage(1, statusMessage1.value)
+          "
+          (edit)="$event.stopPropagation()"
+          (cancel)="$event.stopPropagation()"
+          class="form-eidt"
+        >
+          <span ucapInlineEditInput="view">{{ loginRes?.statusMessage1 }}</span>
+          <span ucapInlineEditInput="edit"
+            ><input
+              matInput
+              #statusMessage1
+              type="text"
+              maxlength="5"
+              [value]="loginRes?.statusMessage1"
+              (click)="$event.stopPropagation()"
+          /></span>
+        </ucap-inline-edit-input>
+      </button>
+    </div>
+    <div class="setting">
+      <button mat-menu-item (click)="onClickStatusBusy($event, 2)">
+        <span class="presence pcOther"> </span>
+        <ucap-inline-edit-input
+          (apply)="
+            $event.stopPropagation();
+            onApplyStatusMessage(2, statusMessage2.value)
+          "
+          (edit)="$event.stopPropagation()"
+          (cancel)="$event.stopPropagation()"
+          class="form-eidt"
+        >
+          <span ucapInlineEditInput="view">{{ loginRes?.statusMessage2 }}</span>
+          <span ucapInlineEditInput="edit"
+            ><input
+              matInput
+              #statusMessage2
+              type="text"
+              maxlength="5"
+              [value]="loginRes?.statusMessage2"
+              (click)="$event.stopPropagation()"
+          /></span>
+        </ucap-inline-edit-input>
+      </button>
+    </div>
+    <div class="setting">
+      <button mat-menu-item (click)="onClickStatusBusy($event, 3)">
+        <span class="presence pcOther"> </span>
+        <ucap-inline-edit-input
+          (apply)="
+            $event.stopPropagation();
+            onApplyStatusMessage(3, statusMessage3.value)
+          "
+          (edit)="$event.stopPropagation()"
+          (cancel)="$event.stopPropagation()"
+          class="form-eidt"
+        >
+          <span ucapInlineEditInput="view">{{ loginRes?.statusMessage3 }}</span>
+          <span ucapInlineEditInput="edit"
+            ><input
+              matInput
+              #statusMessage3
+              type="text"
+              maxlength="5"
+              [value]="loginRes?.statusMessage3"
+              (click)="$event.stopPropagation()"
+          /></span>
+        </ucap-inline-edit-input>
+      </button>
+    </div>
+  </ng-template>
 </mat-menu>
 
 <mat-menu #awayTimeMenu="matMenu">
-  <div mat-menu-item (click)="$event.stopPropagation()">
-    {{ 'presence.settingOfAwayTime' | translate }}
-  </div>
-  <mat-radio-group aria-label="Select an option" [value]="myIdleCheckTime">
-    <div mat-menu-item *ngFor="let awayTime of awayTimeList">
-      <mat-radio-button [value]="awayTime" (change)="onChangeAwayTime($event)">
-        {{ awayTime }}{{ 'common.units.minute' | translate }}</mat-radio-button
-      >
+  <ng-template matMenuContent>
+    <div mat-menu-item (click)="$event.stopPropagation()">
+      {{ 'presence.settingOfAwayTime' | translate }}
     </div>
-  </mat-radio-group>
+    <mat-radio-group aria-label="Select an option" [value]="myIdleCheckTime">
+      <div mat-menu-item *ngFor="let awayTime of awayTimeList">
+        <mat-radio-button
+          [value]="awayTime"
+          (change)="onChangeAwayTime($event)"
+        >
+          {{ awayTime
+          }}{{ 'common.units.minute' | translate }}</mat-radio-button
+        >
+      </div>
+    </mat-radio-group>
+  </ng-template>
 </mat-menu>
 
 <mat-menu #informationMenu="matMenu">
-  <div
-    class="version-info-container menu-item"
-    (click)="$event.stopPropagation()"
-  >
-    <div>
-      <span>
-        {{ '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>
-        {{ 'information.checkForUpdatesInProgress' | translate }}
+  <ng-template matMenuContent>
+    <div
+      class="version-info-container menu-item"
+      (click)="$event.stopPropagation()"
+    >
+      <div>
+        <span>
+          {{ '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>
+          {{ 'information.checkForUpdatesInProgress' | translate }}
+        </div>
 
-      <div *ngIf="!checkingUpdateIsProcessing" style="display: flex;">
-        <span>
-          {{ 'information.latestVersion' | translate }}:{{
-            checkingUpdateAppVersion
-          }}
-        </span>
-        <span>
-          <button
-            *ngIf="checkingUpdateIsExist"
-            mat-button
-            (click)="onClickApplyUpdate($event)"
-          >
-            {{ 'information.applyUpdates' | translate }}
-          </button>
-        </span>
+        <div *ngIf="!checkingUpdateIsProcessing" style="display: flex;">
+          <span>
+            {{ 'information.latestVersion' | translate }}:{{
+              checkingUpdateAppVersion
+            }}
+          </span>
+          <span>
+            <button
+              *ngIf="checkingUpdateIsExist"
+              mat-button
+              (click)="onClickApplyUpdate($event)"
+            >
+              {{ 'information.applyUpdates' | translate }}
+            </button>
+          </span>
+        </div>
       </div>
     </div>
-  </div>
+  </ng-template>
 </mat-menu>

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

@@ -309,6 +309,10 @@ export class TopBarComponent implements OnInit, OnDestroy {
     this.store.dispatch(AuthenticationStore.logoutConfirmation());
   }
 
+  onClickQuit(): void {
+    this.nativeService.appExit();
+  }
+
   getMyProfileImageWidget(): string {
     if (!!this.loginRes) {
       return this.loginRes.userInfo.profileImageFile;

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

@@ -406,6 +406,7 @@
       }
     },
     "messages": {
+      "quit": "Quit",
       "yes": "Yes",
       "no": "No",
       "confirm": "Confirm",

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

@@ -406,6 +406,7 @@
       }
     },
     "messages": {
+      "quit": "종료",
       "yes": "예",
       "no": "아니오",
       "confirm": "확인",

projects/ucap-webmessenger-native-browser/src/lib/services/browser-native.service.ts

@@ -221,6 +221,8 @@ export class BrowserNativeService extends NativeService {
 
   windowMaximize(): void {}
 
+  appExit(): void {}
+
   zoomTo(factor: number): Promise<number> {
     return new Promise<number>((resolve, reject) => {
       resolve(-1);

projects/ucap-webmessenger-native-electron/src/lib/services/electron-native.service.ts

@@ -22,7 +22,8 @@ import {
   ChatChannel,
   MessengerChannel,
   MessageChannel,
-  ProcessChannel
+  ProcessChannel,
+  AppChannel
 } from '../types/channel.type';
 import { Injectable } from '@angular/core';
 import { TranslateLoaderService } from '../translate/electron-loader';
@@ -388,6 +389,10 @@ export class ElectronNativeService implements NativeService {
     }
   }
 
+  appExit(): void {
+    this.ipcRenderer.send(AppChannel.Exit);
+  }
+
   zoomTo(factor: number): Promise<number> {
     return new Promise<number>((resolve, reject) => {
       try {

projects/ucap-webmessenger-native-electron/src/lib/types/channel.type.ts

@@ -53,3 +53,7 @@ export enum IdleStateChannel {
   StartCheck = 'UCAP::idleState::startCheck',
   ChangeLimitTime = 'UCAP::idleState::changeLimitTime'
 }
+
+export enum AppChannel {
+  Exit = 'UCAP::app::exit'
+}

projects/ucap-webmessenger-native/src/lib/services/native.service.ts

@@ -68,6 +68,7 @@ export abstract class NativeService {
   abstract windowMinimize(): void;
   abstract windowMaximize(): void;
   abstract zoomTo(factor: number): Promise<number>;
+  abstract appExit(): void;
 
   abstract idleStateChanged(): Observable<WindowIdle>;
   abstract changeLimitOfIdleState(limitTime: number): void;