perf: window fa-circle

src/app/elements/content/content-tab/content-tab.component.html

@@ -2,18 +2,20 @@
   (click)="setActive()"
   (dblclick)="onDoubleClick()"
   [id]="view.id"
-  [ngClass]="{'active': view.active,'disconnected': !view.connected, 'hidden': view.closed != false}"
+  [ngClass]="{ active: view.active, disconnected: !view.connected, hidden: view.closed != false }"
   [title]="view.name"
 >
   <span *ngIf="view.name && !view.editable" [title]="view.name" class="tab-title">
     <i [ngClass]="iconCls" class="view_icon"></i>
     <span class="tab-text">{{ view.name }}</span>
   </span>
-  <input #inputElement
-         (blur)="onBlur()"
-         (keyup.enter)="view.editable=false"
-         *ngIf="view.editable"
-         [(ngModel)]="view.name"
-         autofocus="autofocus"/>
+  <input
+    #inputElement
+    (blur)="onBlur()"
+    (keyup.enter)="view.editable = false"
+    *ngIf="view.editable"
+    [(ngModel)]="view.name"
+    autofocus="autofocus"
+  />
   <a (click)="close()" class="close">&times;</a>
 </li>

src/app/elements/content/content-tab/content-tab.component.scss

@@ -19,9 +19,28 @@ li {
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
+  transition:
+    background-color 160ms ease,
+    box-shadow 160ms ease,
+    color 160ms ease,
+    border-color 160ms ease;
 
   &.active {
-    box-shadow: inset 0 -2px var(--primary-color);
+    /* Subtle raised feel */
+    // background: linear-gradient(
+    //   180deg,
+    //   rgba(255, 255, 255, 0.03) 0%,
+    //   rgba(255, 255, 255, 0.01) 55%,
+    //   rgba(0, 0, 0, 0.06) 100%
+    // );
+    border-top-left-radius: 2px;
+    border-top-right-radius: 2px;
+    border-left: 1px solid rgba(255, 255, 255, 0.05);
+    border-right: 1px solid rgba(0, 0, 0, 0.3);
+    /* Accent at bottom */
+    box-shadow:
+      inset 0 -1px 0 0 var(--primary-color),
+      inset 0 1px 0 0 rgba(255, 255, 255, 0.08);
 
     span {
       color: var(--el-icon-color);
@@ -41,13 +60,13 @@ li {
   & > span {
     display: flex;
     align-items: center;
-    gap:4px;
+    gap: 4px;
     color: #cacaca;
     font-size: 13px;
     max-width: 164px;
     cursor: pointer;
 
-    .tab-text{
+    .tab-text {
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
@@ -69,7 +88,7 @@ li {
     display: flex;
     align-items: center;
     line-height: 30px;
-    font-family: "Roboto", sans-serif;
+    font-family: 'Roboto', sans-serif;
     font-size: 13px;
     color: var(--el-icon-color);
     cursor: pointer;

src/app/elements/nav/nav.component.html

@@ -1,21 +1,30 @@
 <div class="nav">
-  <ul nz-menu nzMode="horizontal" nzTheme='dark' class='nav-main'>
+  <ul nz-menu nzMode="horizontal" nzTheme="dark" class="nav-main">
     <li class="logo-item">
       <a>
-        <img (click)="onJumpUi()" alt="" height="30px" id="left-logo" src=""/>
+        <img (click)="onJumpUi()" alt="" height="30px" id="left-logo" src="" />
       </a>
     </li>
     <ng-container *ngFor="let v of navs">
-      <li nz-submenu nzMenuClassName="dark-dropdown" *ngIf="v.children" [nzTitle]="v.name | translate" [ngClass]="{'dropdown': v.children}">
-        <ul [ngClass]="{'dropdown-content': true}">
+      <li
+        nz-submenu
+        nzMenuClassName="dark-dropdown"
+        *ngIf="v.children"
+        [nzTitle]="v.name | translate"
+        [ngClass]="{ dropdown: v.children }"
+      >
+        <ul [ngClass]="{ 'dropdown-content': true }">
           <ng-container *ngIf="v.id === 'Tabs'">
             <li nz-menu-item *ngIf="viewListSorted.length === 0">
               <span>{{ 'NoTabs' | translate }}</span>
             </li>
             <ng-container *ngIf="viewListSorted.length > 0">
-              <li nz-menu-item *ngFor="let view of viewListSorted"
-                  [ngClass]="{'disconnected':!view.connected, 'hidden': view.closed != false}"
-                  [style.display]="view.name ? 'block' : 'none'">
+              <li
+                *ngFor="let view of viewListSorted"
+                nz-menu-item
+                [ngClass]="{ disconnected: !view.connected, hidden: view.closed != false }"
+                [style.display]="view.name ? 'block' : 'none'"
+              >
                 <span [class.active]="view.active">
                   <a (click)="_viewSrv.activeView(view)" id="{{ 'tab' + view.id }}">
                     <i class="fa fa-circle flag"></i> {{ view.name }}
@@ -25,9 +34,9 @@
             </ng-container>
           </ng-container>
           <ng-container *ngIf="v.id !== 'Tabs'">
-            <li nz-menu-item *ngFor="let vv of v.children" [ngClass]="{'disabled': vv.disable}">
+            <li nz-menu-item *ngFor="let vv of v.children" [ngClass]="{ disabled: vv.disable }">
               <a *ngIf="vv.href" [routerLink]="[vv.href]">{{ vv.name | translate }}</a>
-              <a (click)="vv.click && vv.click()" *ngIf="vv.click && !vv.hide" id="{{vv.id}}">
+              <a (click)="vv.click && vv.click()" *ngIf="vv.click && !vv.hide" id="{{ vv.id }}">
                 {{ vv.name | translate }}
               </a>
             </li>

src/app/elements/nav/nav.component.scss

@@ -1,3 +1,8 @@
+::ng-deep .setting-dialog {
+  .ant-modal-footer {
+    padding: 1px 30px 20px 30px;
+  }
+}
 
 .nav {
   display: flex;
@@ -7,7 +12,7 @@
   padding-bottom: 1px;
 
   .ant-menu-horizontal > .ant-menu-submenu {
-    top: 0
+    top: 0;
   }
 
   .logo-item {
@@ -37,17 +42,18 @@
         }
       }
 
-      .ant-menu-submenu-active, .ant-menu-submenu-open {
+      .ant-menu-submenu-active,
+      .ant-menu-submenu-open {
         background: rgba(0, 0, 0, 0.6);
       }
 
       .ant-menu-submenu-horizontal.ant-menu-submenu {
         padding: 0;
       }
-
     }
 
-    li, .dropdown {
+    li,
+    .dropdown {
       height: 30px;
       line-height: 30px;
       padding: 0;
@@ -82,17 +88,17 @@
   }
 }
 
-//
-//.flag {
-//  display: none;
-//  color: var(--primary-color);
-//  padding-right: 5px;
-//
+.flag {
+  display: none;
+  color: var(--primary-color);
+  padding-right: 5px;
+}
+
 //}
 //
-//.active .flag {
-//  display: inline;
-//}
+.active .flag {
+  display: inline;
+}
 //
 //.elements-organization {
 //  flex: 1;

src/app/elements/nav/nav.component.ts

@@ -4,10 +4,14 @@ import { themes } from '@src/sass/theme/main';
 import { useTheme } from '@src/sass/theme/util';
 import { I18nService } from '@app/services/i18n';
 import { Component, OnInit } from '@angular/core';
-import { CookieService } from 'ngx-cookie-service';
 import { NzModalService } from 'ng-zorro-antd/modal';
 import { ElementSettingComponent } from '@app/elements/nav/setting/setting.component';
-import { IframeCommunicationService, HttpService, SettingService, ViewService } from '@app/services';
+import {
+  IframeCommunicationService,
+  HttpService,
+  SettingService,
+  ViewService
+} from '@app/services';
 
 @Component({
   standalone: false,
@@ -29,7 +33,7 @@ export class ElementNavComponent implements OnInit {
     private _dialog: NzModalService,
     private _settingSvc: SettingService,
     private _http: HttpService,
-    private _iframeSvc: IframeCommunicationService,
+    private _iframeSvc: IframeCommunicationService
   ) {}
 
   get viewListSorted() {
@@ -103,48 +107,21 @@ export class ElementNavComponent implements OnInit {
             id: 'General',
             name: this._i18n.instant('General'),
             click: () => {
-              this._dialog.create({
-                nzWidth: '600px',
-                nzCentered: true,
-                nzContent: ElementSettingComponent,
-                nzTitle: this._i18n.instant('General'),
-                nzData: { type: 'general', name: 'General' },
-                nzOnOk: cmp => cmp.onSubmit(),
-                nzCancelText: this._i18n.instant('Cancel'),
-                nzOkText: this._i18n.instant('Confirm')
-              });
+              this.showSettingDialog('general', 'General');
             }
           },
           {
             id: 'GUI',
             name: this._i18n.instant('GUI'),
             click: () => {
-              this._dialog.create({
-                nzTitle: this._i18n.instant('GUI'),
-                nzContent: ElementSettingComponent,
-                nzWidth: '600px',
-                nzCentered: true,
-                nzData: { type: 'gui', name: 'GUI' },
-                nzOnOk: cmp => cmp.onSubmit(),
-                nzCancelText: this._i18n.instant('Cancel'),
-                nzOkText: this._i18n.instant('Confirm')
-              });
+              this.showSettingDialog('gui', 'GUI');
             }
           },
           {
             id: 'CLI',
             name: this._i18n.instant('CLI'),
             click: () => {
-              this._dialog.create({
-                nzTitle: this._i18n.instant('CLI'),
-                nzContent: ElementSettingComponent,
-                nzWidth: '600px',
-                nzCentered: true,
-                nzData: { type: 'cli', name: 'CLI' },
-                nzOnOk: cmp => cmp.onSubmit(),
-                nzCancelText: this._i18n.instant('Cancel'),
-                nzOkText: this._i18n.instant('Confirm')
-              });
+              this.showSettingDialog('cli', 'CLI');
             }
           }
         ]
@@ -201,6 +178,20 @@ export class ElementNavComponent implements OnInit {
     ];
   }
 
+  showSettingDialog(type: string, name: string) {
+    this._dialog.create({
+      nzTitle: this._i18n.instant(name),
+      nzContent: ElementSettingComponent,
+      nzClassName: 'setting-dialog',
+      nzWidth: '600px',
+      nzCentered: true,
+      nzData: { type, name },
+      nzOnOk: cmp => cmp.onSubmit(),
+      nzCancelText: this._i18n.instant('Cancel'),
+      nzOkText: this._i18n.instant('Confirm')
+    });
+  }
+
   getLanguageOptions() {
     const langOptions = [];
     this._settingSvc.afterInited().then(state => {