[Update] Merge

src/app/elements/nav/nav.component.css

@@ -95,3 +95,12 @@
   cursor: default;
   color: #c5babc;
 }
+
+.nav ul li.disconnected {
+  background-color: darkgray;
+}
+
+.nav ul li.active {
+  box-sizing: border-box;
+  border-bottom: 3px solid #19aa8d !important;
+}

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

@@ -12,5 +12,15 @@
         </li>
       </ul>
     </li>
+    <li [ngClass]="{'dropdown': true}">
+      <a>{{"Tab List"|trans}}</a>
+      <ul *ngIf="NavList.List.length>1" [ngClass]="{'dropdown-content': true}">
+        <ng-container *ngFor="let t of NavList.List, let idx= index" >
+        <li *ngIf="t.nick!=null" [ngClass]="{'active':idx==NavList.Active,'disconnected':!t.connected, 'hidden': t.closed != false}">
+          <a id="{{ 'tab' + idx }}"   (click)="toTab(idx)">{{t.nick}}</a>
+        </li>
+        </ng-container>
+      </ul>
+    </li>
   </ul>
 </div>

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

@@ -21,6 +21,7 @@ declare let layer: any;
 })
 export class ElementNavComponent implements OnInit {
   DataStore = DataStore;
+  NavList = NavList;
   ChangeLanWarningDialog: any;
 
   static Hide() {
@@ -39,6 +40,10 @@ export class ElementNavComponent implements OnInit {
   ngOnInit() {
   }
 
+  toTab(idx) {
+    ControlComponent.active(idx);
+  }
+
   click(event) {
     this._logger.debug('nav.ts:NavComponent,click', event);
     switch (event) {
@@ -80,11 +85,16 @@ export class ElementNavComponent implements OnInit {
         } else {
           throw new Error('不支持全屏api');
         }
-        
         window.dispatchEvent(new Event('resize'));
         break;
       }
-      case'Disconnect': {
+      case 'Reconnect': {
+        if (NavList.List[NavList.Active].termComp) {
+          NavList.List[NavList.Active].termComp.reconnect();
+        }
+        break;
+      }
+      case 'Disconnect': {
         if (!confirm('断开当前连接? (RDP暂不支持)')) {
           break;
         }
@@ -234,6 +244,11 @@ export class ElementNavComponent implements OnInit {
           'click': 'DisconnectAll',
           'name': 'Disconnect all'
         },
+        {
+          'id': 'Reconnect',
+          'click': 'Reconnect',
+          'name': 'Reconnect'
+        },
       ]
     }, {
       'id': 'FileManager',

src/app/elements/ssh-term/ssh-term.component.ts

-import {AfterViewInit, Component, Input, OnInit, OnDestroy } from '@angular/core';
+import {AfterViewInit, Component, Input, OnInit, OnDestroy} from '@angular/core';
 import {Terminal} from 'xterm';
 import {NavList, View} from '../../pages/control/control/control.component';
 import {UUIDService} from '../../app.service';
 import {CookieService} from 'ngx-cookie-service';
 import {Socket} from '../../utils/socket';
 import {getWsSocket} from '../../globals';
+import {TransPipe} from '../../pipes/trans.pipe';
 
 
 @Component({
@@ -23,6 +24,7 @@ export class ElementSshTermComponent implements OnInit, AfterViewInit, OnDestroy
   ws: Socket;
   roomID: string;
   view: View;
+  transPipe: TransPipe;
 
   constructor(private _uuid: UUIDService, private _cookie: CookieService) {
   }
@@ -31,6 +33,7 @@ export class ElementSshTermComponent implements OnInit, AfterViewInit, OnDestroy
     this.view = NavList.List[this.index];
     this.secret = this._uuid.gen();
     this.newTerm();
+    this.transPipe = new TransPipe();
     getWsSocket().then(sock => {
       this.ws = sock;
       this.connectHost();
@@ -51,6 +54,7 @@ export class ElementSshTermComponent implements OnInit, AfterViewInit, OnDestroy
       }
     });
     this.view.Term = this.term;
+    this.view.termComp = this;
   }
 
   changeWinSize(size: Array<number>) {
@@ -59,7 +63,19 @@ export class ElementSshTermComponent implements OnInit, AfterViewInit, OnDestroy
     }
   }
 
-  connectHost() {
+  reconnect() {
+
+    if (NavList.List[this.index].connected === true) {
+      if (!confirm(this.transPipe.transform('Are you sure to reconnect it?(RDP not support)'))) {
+        return;
+      }
+      this.close();
+    }
+    this.secret = this._uuid.gen();
+    this.emitHostAndTokenData();
+  }
+
+  emitHostAndTokenData() {
     if (this.host) {
       const data = {
         uuid: this.host.id,
@@ -77,6 +93,10 @@ export class ElementSshTermComponent implements OnInit, AfterViewInit, OnDestroy
       console.log('On token event trigger');
       this.ws.emit('token', data);
     }
+  }
+
+  connectHost() {
+    this.emitHostAndTokenData();
 
     this.term.on('data', data => {
       const d = {'data': data, 'room': this.roomID};
@@ -107,6 +127,7 @@ export class ElementSshTermComponent implements OnInit, AfterViewInit, OnDestroy
         console.log('On room', data);
         this.roomID = data.room;
         this.view.room = data.room;
+        this.view.connected = true;
       }
     });
   }

src/app/pages/control/control/control.component.ts

@@ -9,6 +9,7 @@
 
 import {Component, OnInit} from '@angular/core';
 import {TermWS} from '../../../globals';
+import * as jQuery from 'jquery/dist/jquery.min';
 
 export class View {
   nick: string;
@@ -23,6 +24,7 @@ export class View {
   room: string;
   Rdp: any;
   Term: any;
+  termComp: any;
 }
 
 export let NavList: {
@@ -46,6 +48,7 @@ export class ControlComponent implements OnInit {
       v.hide = id.toString() !== k;
     });
     NavList.Active = id;
+    jQuery('.tabs').animate({'scrollLeft': 150 * id}, 400);
   }
 
   static TerminalDisconnect(id) {

src/app/pages/control/control/controlnav/nav.component.css

@@ -48,8 +48,9 @@
   padding-right: 14px;
   line-height: 26px;
   cursor: default;
-  width: 115px;
-  height: 21px;
+  /*width: 145px;*/
+  height: 26px;
+  display: block;
 }
 
 .tabs ul li a.close {
@@ -72,18 +73,18 @@
   padding-left: 12px;
   line-height: 26px;
   color: white;
-  height: 18px;
+  height: 26px;
 }
 
 .tabs ul li input {
   font-family: 'Roboto', sans-serif;
   font-size: 13px;
-  width: 115px;
+  width: 120px;
   border: none;
   background-color: inherit;
   color: white;
   padding: 5px 20px 4px 15px;
-  height: 18px;
+  height: 26px;
 }
 
 /*

src/app/pages/control/control/controlnav/nav.component.html

@@ -7,7 +7,7 @@
     <li *ngFor="let m of NavList.List;let i = index"
         [ngClass]="{'active':i==NavList.Active,'disconnected':!m.connected, 'hidden': m.closed != false}"
         id="termnav-{{i}}" (click)="setActive(i)" (dblclick)="m.edit=true;setActive(i)">
-      <span *ngIf="!m.edit">{{m.nick | truncatechars:25 }}</span>
+      <span *ngIf="!m.edit" [attr.title]="m.nick">{{m.nick | truncatechars:17 }}</span>
       <input *ngIf="m.edit" [(ngModel)]="m.nick" (blur)="m.edit=false" (keyup.enter)="m.edit=false" autofocus="true"/>
       <a class="close" (click)="close(m,i)">&times;</a>
     </li>