Added ngx-contextmenu.

Added context menu to window titles. Closes #217.
Added method to print SDL. #215.

package.json

@@ -37,6 +37,7 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "^5.2.0",
+    "@angular/cdk": "2.0.0-beta.12",
     "@angular/cli": "^1.6.3",
     "@angular/common": "^5.2.0",
     "@angular/compiler": "^5.2.0",
@@ -78,6 +79,7 @@
     "ng2-completer": "^1.6.3",
     "ng2-toastr": "^4.1.2",
     "ngrx-store-localstorage": "^0.3.0",
+    "ngx-contextmenu": "^4.1.2",
     "ngx-electron": "^1.0.4",
     "ngx-pipes": "^2.1.0",
     "opencollective": "^1.0.3",

src/app/components/action-bar/action-bar.component.ts

@@ -2,13 +2,15 @@ import {
   Component,
   Input,
   Output,
-  EventEmitter
+  EventEmitter,
+  ChangeDetectionStrategy
 } from '@angular/core';
 
 @Component({
   selector: 'app-action-bar',
   templateUrl: './action-bar.component.html',
-  styleUrls: ['./action-bar.component.scss']
+  styleUrls: ['./action-bar.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ActionBarComponent {
 

src/app/components/fork-repo/fork-repo.component.ts

@@ -1,9 +1,10 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 
 @Component({
   selector: 'app-fork-repo',
   templateUrl: './fork-repo.component.html',
-  styleUrls: ['./fork-repo.component.scss']
+  styleUrls: ['./fork-repo.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ForkRepoComponent implements OnInit {
 

src/app/components/index.ts

@@ -42,7 +42,7 @@ const COMPONENTS = [
     CodemirrorModule,
     PipesModule,
     SharedModule,
-    ClarityModule
+    ClarityModule,
   ],
   declarations: COMPONENTS,
   exports: [...COMPONENTS ]

src/app/components/window-switcher/window-switcher.component.html

@@ -4,6 +4,8 @@
     class="nav-link nav-text window-switcher _track_me"
     *ngFor="let windowId of windowIds; let index = index;"
     [class.active]="windowId === activeWindowId"
+    [contextMenu]="windowTabMenu"
+    [contextMenuSubject]="{ windowId: windowId, wTitle: wTitle}"
     (click)="activeWindowChange.next(windowId)"
     (dblclick)="editWindowNameInput(windowId, wTitle)"
   >
@@ -13,7 +15,7 @@
       (blur)="saveWindowName(windowId, wTitle.innerText)"
       (keydown.enter)="saveWindowName(windowId, wTitle.innerText)"
     >{{ windows[windowId].layout.title }}</div>
-    <div track-id="close_window_tab" class="window-switcher__close" *ngIf="windowIds.length > 1" (click)="removeWindowChange.next(windowId)">&#x00D7;</div>
+    <div track-id="close_window_tab" class="window-switcher__close" *ngIf="windowIds.length > 1" (click)="closeWindow(windowId)">&#x00D7;</div>
   </div>
   <div
      track-id="new_window_tab"
@@ -23,3 +25,11 @@
     {{ 'ADD_NEW_WINDOW_TEXT' | translate }}
   </div>
 </div>
+<context-menu>
+  <ng-template contextMenuItem (execute)="editWindowNameInput($event.item.windowId, $event.item.wTitle)">
+    {{ 'EDIT_WINDOW_TEXT' | translate }}
+  </ng-template>
+  <ng-template contextMenuItem (execute)="closeWindow($event.item.windowId)">
+    {{ 'CLOSE_WINDOW_TEXT' | translate }}
+  </ng-template>
+</context-menu>

src/app/components/window-switcher/window-switcher.component.ts

@@ -3,9 +3,12 @@ import {
   OnInit,
   Input,
   Output,
-  EventEmitter
+  EventEmitter,
+  ViewChild
 } from '@angular/core';
 
+import { ContextMenuComponent } from 'ngx-contextmenu';
+
 import config from '../../config';
 
 @Component({
@@ -25,6 +28,12 @@ export class WindowSwitcherComponent implements OnInit {
   @Output() windowNameChange = new EventEmitter();
   @Output() repositionWindowChange = new EventEmitter();
 
+  @ViewChild(ContextMenuComponent) public windowTabMenu: ContextMenuComponent;
+
+  windowTabMenuData = [
+    { name: 'Edit' }
+  ];
+
   windowNameEditing = null;
   maxWindowCount = config.max_windows;
 
@@ -55,4 +64,12 @@ export class WindowSwitcherComponent implements OnInit {
     this.repositionWindowChange.next(({ currentPosition, newPosition }));
   }
 
+  closeWindow(windowId) {
+    this.removeWindowChange.next(windowId);
+  }
+
+  log(str) {
+    console.log(str);
+  }
+
 }

src/app/services/gql.service.ts

@@ -3,7 +3,7 @@ import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs/Observable';
 
 import { SubscriptionClient } from 'subscriptions-transport-ws';
-import { buildClientSchema, parse, print, GraphQLSchema } from 'graphql';
+import { buildClientSchema, parse, print, GraphQLSchema, printSchema } from 'graphql';
 import * as compress from 'graphql-query-compress'; // Somehow this is the way to use this
 import { introspectionQuery } from './instrospectionQuery';
 
@@ -195,4 +195,15 @@ export class GqlService {
   compress(query) {
     return compress(this.prettify(query));
   }
+
+  /**
+   * Return the Schema Definition Language of the provided schema
+   * @param schema
+   */
+  getSDL(schema): string {
+    if (this.isSchema(schema)) {
+      return printSchema(schema);
+    }
+    return '';
+  }
 }

src/app/shared/shared.module.ts

@@ -5,20 +5,23 @@ import { TranslateModule } from '@ngx-translate/core';
 import { NgxElectronModule } from 'ngx-electron';
 import { SortablejsModule } from 'angular-sortablejs';
 import { NgPipesModule } from 'ngx-pipes';
+import { ContextMenuModule } from 'ngx-contextmenu';
 
 @NgModule({
   imports: [
     CommonModule,
     TranslateModule,
     NgxElectronModule,
     SortablejsModule,
-    NgPipesModule
+    NgPipesModule,
+    ContextMenuModule.forRoot(),
   ],
   exports: [
     TranslateModule,
     NgxElectronModule,
     SortablejsModule,
-    NgPipesModule
+    NgPipesModule,
+    ContextMenuModule
   ]
 })
 export class SharedModule { }

src/assets/i18n/en.json

@@ -53,5 +53,9 @@
   "SETTINGS_THEME_TEXT": "Theme",
   "SETTINGS_LANGUAGE_TEXT": "Language",
 
-  "VIEW_ON_GITHUB_TEXT": "View on GitHub"
+  "VIEW_ON_GITHUB_TEXT": "View on GitHub",
+
+  "EDIT_WINDOW_TEXT": "Edit",
+  "CLOSE_WINDOW_TEXT": "Close",
+  "DUPLICATE_WINDOW_TEXT": "Duplicate"
 }

src/scss/_all.scss

@@ -18,5 +18,6 @@
 @import "components/editor";
 @import "components/dialog";
 @import "components/history";
+@import "components/context-menu";
 
 @import "../app/components/doc-viewer/doc-viewer/doc-viewer.component";

src/scss/components/_context-menu.scss

@@ -0,0 +1,22 @@
+.ngx-contextmenu {
+  .dropdown-menu {
+    border: solid 1px $theme-off-border-color;
+    background-color: $theme-bg-color;
+    padding: 0;
+  }
+  li {
+    display: block;
+    text-align: left;
+  }
+  a {
+    color: $theme-font-color;
+    display: block;
+    padding: 5px 10px;
+
+    &:hover {
+      text-decoration: none;
+      background-color: $theme-off-bg-color;
+    }
+  }
+}
+

yarn.lock

@@ -53,6 +53,12 @@
   dependencies:
     tslib "^1.7.1"
 
+"@angular/[email protected]":
+  version "2.0.0-beta.12"
+  resolved "https://registry.yarnpkg.com/@angular/cdk/-/cdk-2.0.0-beta.12.tgz#3a243cb62b93f4e039120ba70f900dc9e235622e"
+  dependencies:
+    tslib "^1.7.1"
+
 "@angular/cli@^1.6.3":
   version "1.6.3"
   resolved "https://registry.yarnpkg.com/@angular/cli/-/cli-1.6.3.tgz#63120b347fc8ee206f773074d25fdd4807c189e3"
@@ -6244,6 +6250,10 @@ ngrx-store-localstorage@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/ngrx-store-localstorage/-/ngrx-store-localstorage-0.3.0.tgz#d2803b7ada274a05363fc9d37931f13cce8ab8aa"
 
+ngx-contextmenu@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/ngx-contextmenu/-/ngx-contextmenu-4.1.2.tgz#1048f3553bf906aef96fa9febdeddc058f86958b"
+
 ngx-electron@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/ngx-electron/-/ngx-electron-1.0.4.tgz#2d80b25d74ae4d6226ad8b3bc4ecfa611e48fdca"