fix

src/app/app-detail/app-detail.component.css

@@ -3,7 +3,7 @@
   position: relative;
   padding: 1rem 1rem 0 1rem;
   background-blend-mode: color;
-  background-size: 100% auto !important;
+  background-size: cover !important;
   background-repeat: no-repeat !important;
 }
 

src/app/app-detail/app-detail.component.html

@@ -233,7 +233,7 @@
       </div>
       <div class="modal-footer">
         <button i18n type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
-        <button i18n type="submit" [disabled]="!theForm.form.valid" class="btn btn-primary">安装</button>
+        <button i18n type="submit" [disabled]="!theForm.form.valid" class="btn btn-primary" data-bs-dismiss="modal">安装</button>
       </div>
     </form>
   </div>
@@ -277,7 +277,7 @@
       </div>
       <div class="modal-footer">
         <button i18n type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
-        <button i18n type="submit" class="btn btn-primary">导入</button>
+        <button i18n type="submit" class="btn btn-primary" data-bs-dismiss="modal">导入</button>
       </div>
     </form>
   </div>

src/app/app-detail/app-detail.component.ts

@@ -152,8 +152,6 @@ export class AppDetailComponent implements OnInit, OnChanges {
   }
 
   async install(targetApp: App, options: InstallOption, referencesInstall: { [id: string]: boolean }) {
-    // $('#install-modal').modal('hide');
-
     try {
       await this.appsService.install(targetApp, options);
       for (let [id, install] of Object.entries(referencesInstall)) {

src/app/candy/candy.component.css

-@import "~candy/res/default.css";
-
-/* Turn on custom 8px wide scrollbar */
-::-webkit-scrollbar {
-  width: 8px; /* 1px wider than Lion. */
-  /* This is more usable for users trying to click it. */
-  background-color: rgba(0, 0, 0, 0);
-  -webkit-border-radius: 100px;
-}
-
-/* hover effect for both scrollbar area, and scrollbar 'thumb' */
-::-webkit-scrollbar:active {
-  background-color: rgba(0, 0, 0, 0.05);
-}
-
-/* The scrollbar 'thumb' ...that marque oval shape in a scrollbar */
-::-webkit-scrollbar-thumb:vertical {
-  /* This is the EXACT color of Mac OS scrollbars.
-     Yes, I pulled out digital color meter */
-  background: rgba(0, 0, 0, 0.1);
-  -webkit-border-radius: 100px;
-}
-
-::-webkit-scrollbar-thumb:vertical:active {
-  background: rgba(0, 0, 0, 0.2); /* Some darker color when you click it */
-  -webkit-border-radius: 100px;
-}
-
-.scroll {
-  overflow-y: hidden;
-}
-
-.scroll:hover {
-  overflow-y: auto;
-
-}
-
-.message-pane-wrapper, .message-form-wrapper {
-  margin-right: 190px;
-}
-
-.roster-pane, #chat-toolbar {
-  width: 190px
-}
-
-#candy {
-  background-color: #f7f7f9;
-}
-
-#chat-tabs li {
-  box-shadow: 0 0 1px 1px #ccc;
-}
-
-#chat-tabs a {
-  color: #999;
-  background-color: #ececec;
-}
-
-#chat-tabs .active a.label {
-  background-color: white;
-}
-
-#chat-tabs .active .transition {
-  background: white none;
-}
-
-#chat-tabs .transition {
-  background: #ececec none;
-}
-
-.message-pane-wrapper {
-  background-color: white;
-  padding: 0;
-}
-
-.message-pane li {
-  border-bottom: none;
-  box-shadow: none;
-  padding: 0 5px;
-}
-
-.message-pane li > div {
-  padding: 0 0 0 150px;
-  line-height: 28px;
-}
-
-.message-pane .label {
-  margin-left: -150px;
-  width: 130px;
-}
-
-.roster-pane {
-  background-color: initial;
-  border-top: none;
-  box-shadow: none;
-  margin: 30px 0 32px 0;
-}
-
-.roster-pane .user {
-  border-bottom: none;
-  box-shadow: none;
-  color: black;
-}
-
-.roster-pane .user:hover {
-  background-color: #ebf3f8;
-}
-
-#chat-toolbar {
-  position: absolute;
-  background-color: initial;
-  border-top: 1px solid #eee;
-  box-shadow: none;
-}
-
-.message-form-wrapper {
-  position: absolute;
-  border-top: 1px solid #eee;
-}
-
-.message-form {
-  position: absolute;
-  margin-right: 20px;
-}
-
-.message-form input.submit {
-  position: absolute;
-  margin-right: 0
-}
-
-.roster-pane .label {
-  text-shadow: none
-}
-
-#candy {
-  border-top: 1px solid #eee;
-  box-shadow: inset 0 1px 2px white;
-}
-
-.usercount span {
-  background-color: initial;
-  color: #a7a7a7;
-}
-
-#chat-modal.modal-common {
-  position: absolute;
-}
-
-/*#context-menu {*/
-/*margin-top: 0;*/
-/*padding-top: 0;*/
-/*}*/
-
-#context-menu ul {
-  overflow-y: auto;
-  max-height: 170px;
-}
-
-/*#context-menu {*/
-/**/
-/*}*/
-.message-pane {
-  -webkit-user-select: auto;
-}
-
-.roster-pane .user {
-  display: inherit;
-  opacity: inherit;
-}
-
-.hover-color{
-  color:#a7a7a7;
-  padding:0 5px;
-}
-
-.hover-color:hover{
-  color:#000;
-}

src/app/candy/candy.component.html

@@ -3,7 +3,7 @@
 </div>
 <div style="position:absolute; top:5px; right:10px;">
   <i id="minimize" class="fa fa-minus hover-color" (click)="minimize()" data-size="" i18n-title title="最小化"></i>
-  <i id="unminimize" class="fa fa-minus hover-color" (click)="restore()" data-size="" i18n-title title="取消最小化" hidden></i>
-  <i id="restore" class="fa fa fa-chevron-down hover-color" (click)="restore()" data-size="" i18n-title title="还原" hidden></i>
+  <i id="unminimize" class="fa fa-minus hover-color" (click)="restore()" data-size="" i18n-title title="取消最小化" style='display: none'></i>
+  <i id="restore" class="fa fa fa-chevron-down hover-color" (click)="restore()" data-size="" i18n-title title="还原" style='display: none'></i>
   <i id="maximize" class="fa fa fa-chevron-up hover-color" (click)="maximize()" i18n-title title="最大化"></i>
 </div>

src/app/candy/candy.component.scss

+app-candy {
+  @import "node_modules/candy/res/default";
+
+  /* Turn on custom 8px wide scrollbar */
+  ::-webkit-scrollbar {
+    width: 8px; /* 1px wider than Lion. */
+    /* This is more usable for users trying to click it. */
+    background-color: rgba(0, 0, 0, 0);
+    -webkit-border-radius: 100px;
+  }
+
+  /* hover effect for both scrollbar area, and scrollbar 'thumb' */
+  ::-webkit-scrollbar:active {
+    background-color: rgba(0, 0, 0, 0.05);
+  }
+
+  /* The scrollbar 'thumb' ...that marque oval shape in a scrollbar */
+  ::-webkit-scrollbar-thumb:vertical {
+    /* This is the EXACT color of Mac OS scrollbars.
+       Yes, I pulled out digital color meter */
+    background: rgba(0, 0, 0, 0.1);
+    -webkit-border-radius: 100px;
+  }
+
+  ::-webkit-scrollbar-thumb:vertical:active {
+    background: rgba(0, 0, 0, 0.2); /* Some darker color when you click it */
+    -webkit-border-radius: 100px;
+  }
+
+  .scroll {
+    overflow-y: hidden;
+  }
+
+  .scroll:hover {
+    overflow-y: auto;
+
+  }
+
+  .message-pane-wrapper, .message-form-wrapper {
+    margin-right: 190px;
+  }
+
+  .roster-pane, #chat-toolbar {
+    width: 190px
+  }
+
+  #candy {
+    background-color: #f7f7f9;
+  }
+
+  #chat-tabs li {
+    box-shadow: 0 0 1px 1px #ccc;
+  }
+
+  #chat-tabs a {
+    color: #999;
+    background-color: #ececec;
+  }
+
+  #chat-tabs .active a.label {
+    background-color: white;
+  }
+
+  #chat-tabs .active .transition {
+    background: white none;
+  }
+
+  #chat-tabs .transition {
+    background: #ececec none;
+  }
+
+  .message-pane-wrapper {
+    background-color: white;
+    padding: 0;
+  }
+
+  .message-pane li {
+    border-bottom: none;
+    box-shadow: none;
+    padding: 0 5px;
+  }
+
+  .message-pane li > div {
+    padding: 0 0 0 150px;
+    line-height: 28px;
+  }
+
+  .message-pane .label {
+    margin-left: -150px;
+    width: 130px;
+  }
+
+  .roster-pane {
+    background-color: initial;
+    border-top: none;
+    box-shadow: none;
+    margin: 30px 0 32px 0;
+  }
+
+  .roster-pane .user {
+    border-bottom: none;
+    box-shadow: none;
+    color: black;
+  }
+
+  .roster-pane .user:hover {
+    background-color: #ebf3f8;
+  }
+
+  #chat-toolbar {
+    position: absolute;
+    background-color: initial;
+    border-top: 1px solid #eee;
+    box-shadow: none;
+  }
+
+  .message-form-wrapper {
+    position: absolute;
+    border-top: 1px solid #eee;
+  }
+
+  .message-form {
+    position: absolute;
+    margin-right: 20px;
+  }
+
+  .message-form input.submit {
+    position: absolute;
+    margin-right: 0
+  }
+
+  .roster-pane .label {
+    text-shadow: none
+  }
+
+  #candy {
+    border-top: 1px solid #eee;
+    box-shadow: inset 0 1px 2px white;
+  }
+
+  .usercount span {
+    background-color: initial;
+    color: #a7a7a7;
+  }
+
+  #chat-modal.modal-common {
+    position: absolute;
+  }
+
+  /*#context-menu {*/
+  /*margin-top: 0;*/
+  /*padding-top: 0;*/
+  /*}*/
+
+  #context-menu ul {
+    overflow-y: auto;
+    max-height: 170px;
+  }
+
+  /*#context-menu {*/
+  /**/
+  /*}*/
+  .message-pane {
+    -webkit-user-select: auto;
+  }
+
+  .roster-pane .user {
+    display: inherit;
+    opacity: inherit;
+  }
+
+  .hover-color {
+    color: #a7a7a7;
+    padding: 0 5px;
+  }
+
+  .hover-color:hover {
+    color: #000;
+  }
+}

src/app/candy/candy.component.ts

@@ -25,7 +25,18 @@ window['jQuery'] = $;
 
 import Mustache from 'mustache';
 
-import { Component, ElementRef, Inject, Input, LOCALE_ID, OnChanges, OnInit, SimpleChanges, ViewEncapsulation } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  Inject,
+  Input,
+  LOCALE_ID, NgZone,
+  OnChanges,
+  OnInit,
+  SimpleChanges,
+  ViewEncapsulation
+} from '@angular/core';
 import { LoginService } from '../login/login.service';
 import { SettingsService } from '../settings.service';
 import { App } from '../shared/app';
@@ -243,14 +254,12 @@ Candy.View.Pane.Message.show = function (
 document['__defineGetter__']('cookie', () => 'candy-nostatusmessages');
 document['__defineSetter__']('cookie', () => true);
 
-declare const Strophe: any;
-declare const $iq: any;
-
 @Component({
   selector: 'app-candy',
   templateUrl: 'candy.component.html',
-  styleUrls: ['candy.component.css'],
+  styleUrls: ['candy.component.scss'],
   encapsulation: ViewEncapsulation.None,
+  // changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class CandyComponent implements OnInit, OnChanges {
   @Input()
@@ -266,6 +275,7 @@ export class CandyComponent implements OnInit, OnChanges {
     private loginService: LoginService,
     private settingsService: SettingsService,
     private element: ElementRef,
+    private ngZone: NgZone,
     @Inject(LOCALE_ID) private locale: string
   ) {}
 
@@ -304,27 +314,30 @@ export class CandyComponent implements OnInit, OnChanges {
             </form>
             `;
 
-    Candy.init('wss://chat.mycard.moe:5443/ws', {
-      core: {
-        debug: false,
-        autojoin: this.currentApp.conference && [this.currentApp.conference + '@conference.mycard.moe'],
-        resource: 'mycard-' + Math.random().toString().split('.')[1],
-      },
-      view: {
-        assets: 'candy/res/', // copy-webpack-plugin
-        language: this.locale.startsWith('zh') ? 'cn' : 'en',
-        enableXHTML: true,
-      },
-    });
-
-    NotifyMe.init();
-    NameComplete.init();
-    ModifyRole.init();
-    MeDoes.init();
-    Notifications.init();
-    Refocus.init();
-
-    Candy.Core.connect(this.jid, this.password, this.nickname);
+
+    this.ngZone.runOutsideAngular(()=>{
+      Candy.init('wss://chat.mycard.moe:5443/ws', {
+        core: {
+          debug: false,
+          autojoin: this.currentApp.conference && [this.currentApp.conference + '@conference.mycard.moe'],
+          resource: 'mycard-' + Math.random().toString().split('.')[1],
+        },
+        view: {
+          assets: 'candy/res/', // copy-webpack-plugin
+          language: this.locale.startsWith('zh') ? 'cn' : 'en',
+          enableXHTML: true,
+        },
+      });
+
+      NotifyMe.init();
+      NameComplete.init();
+      ModifyRole.init();
+      MeDoes.init();
+      Notifications.init();
+      Refocus.init();
+
+      Candy.Core.connect(this.jid, this.password, this.nickname);
+    })
 
     // $(Candy).on('candy:core:roster:loaded', (event: JQueryEventObject, data: any) => {
     //     this.roster = Object.values(data.roster.getAll());