fix(tabs): closing tabs (closes #70)

bleenco · May 19, 2017 · ec5ab06 · ec5ab06
1 parent adc6b51
commit ec5ab06
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 4 deletions.
diff --git a/e2e/app.e2e.ts b/e2e/app.e2e.ts
@@ -217,7 +217,7 @@ describe('bterm launch', function() {
       .then(() => wait(2000))
       .then(() => this.app.client.isVisibleWithinViewport('.sidebar-container'))
       .then(result => expect(result).to.be.true)
-      .then(() => this.app.client.click('.close-icon'))
+      .then(() => this.app.client.click('.sidebar .close-icon'))
       .then(() => wait(2000))
       .then(() => this.app.client.isVisibleWithinViewport('.sidebar-container'))
       .then(result => expect(result).to.be.false);

diff --git a/src/app/components/window-top/window-top.component.html b/src/app/components/window-top/window-top.component.html
@@ -13,7 +13,16 @@
     </div>
   </div>
   <div class="window-top-container__center">
-    <div class="tab" *ngFor="let tab of tabs; let i = index;" [class.is-active]="tab.active" (click)="switchTab(i)">
+    <div class="tab" *ngFor="let tab of tabs; let i = index;" [class.is-active]="tab.active" (click)="$event.which === 2 ? closeTab($event, i) : switchTab($event, i)">
+      <span class="close-icon" (click)="closeTab($event, i)" *ngIf="tabs.length > 1">
+        <svg width="28px" height="28px" viewBox="0 0 28 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+            <g id="icon" fill-rule="nonzero" fill="#FFFFFF">
+              <path d="M13.98,0 C6.259,0 0,6.261 0,13.983 C0,21.704 6.259,27.965 13.98,27.965 C21.705,27.965 27.965,21.703 27.965,13.983 C27.965,6.261 21.705,0 13.98,0 Z M19.992,17.769 L17.765,19.993 C17.765,19.993 14.242,16.213 13.979,16.213 C13.72,16.213 10.196,19.993 10.196,19.993 L7.968,17.769 C7.968,17.769 11.752,14.297 11.752,13.988 C11.752,13.674 7.968,10.201 7.968,10.201 L10.196,7.972 C10.196,7.972 13.749,11.754 13.979,11.754 C14.211,11.754 17.765,7.972 17.765,7.972 L19.992,10.201 C19.992,10.201 16.207,13.724 16.207,13.988 C16.207,14.239 19.992,17.769 19.992,17.769 Z" id="Shape"></path>
+            </g>
+          </g>
+        </svg>
+      </span>
       <span class="title">{{ tab.title }}</span>
     </div>
   </div>

diff --git a/src/app/components/window-top/window-top.component.ts b/src/app/components/window-top/window-top.component.ts
@@ -43,7 +43,9 @@ export class WindowTopComponent implements OnInit {
       } else if (event.action === 'closed') {
         this.zone.run(() => {
           this.tabs.splice(event.data, 1);
-          this.tabs[event.data].active = true;
+          if (this.tabs.findIndex(t => t.active) === -1) {
+            this.tabs[this.tabs.length - 1].active = true;
+          }
           setTimeout(() => this.config.setConfig());
         });
       } else if (event.action === 'switch') {
@@ -70,7 +72,8 @@ export class WindowTopComponent implements OnInit {
     if (!this.isDarwin) { this.handleDrag(); }
   }
 
-  switchTab(index: number): void {
+  switchTab(e: MouseEvent, index: number): void {
+    e.preventDefault();
     this.xterm.switchTab(index);
     this.tabs.forEach((tab: Tab) => tab.active = false);
     this.tabs[index].active = true;
@@ -105,6 +108,13 @@ export class WindowTopComponent implements OnInit {
     }
   }
 
+  closeTab(e: MouseEvent, index: number): void {
+    e.preventDefault();
+    e.stopPropagation();
+
+    this.xterm.deleteTabByIndex(index);
+  }
+
   minimize(): void { ipcRenderer.send('minimize'); }
   maximize(): void { ipcRenderer.send('maximize'); }
   tabMaximize(): void { ipcRenderer.send('tabMaximize'); }

diff --git a/src/app/services/xterm.service.ts b/src/app/services/xterm.service.ts
@@ -77,6 +77,10 @@ export class XtermService {
     this.terminals[this.currentIndex].ps.exit.emit(true);
   }
 
+  deleteTabByIndex(index: number) {
+    this.terminals[index].ps.exit.emit(true);
+  }
+
   clearTab(): void {
     let termOutput = this.terminals[this.currentIndex].output;
     this.osPlatform === 'win32' ? termOutput.emit('\n cls \r\n') : termOutput.emit('\n clear \n');

diff --git a/src/styles/window-top.sass b/src/styles/window-top.sass
@@ -70,6 +70,7 @@
       border-bottom: 1px solid #666
       margin-left: -1px
       min-width: 0px
+      position: relative
 
       &:first-child
         border-left: none
@@ -87,3 +88,24 @@
         text-overflow: ellipsis
         white-space: nowrap
         padding: 0 10px
+
+      .close-icon
+        width: 24px
+        height: 24px
+        position: absolute
+        right: 5px
+        top: 7px
+        display: flex
+        justify-content: center
+        align-items: center
+        display: none
+
+        svg
+          width: 18px
+          height: 18px
+          display: block
+
+      &:hover
+
+        .close-icon
+          display: flex