Add close button to integrations manager

web/app/app.module.ts

@@ -14,6 +14,7 @@ import { ScalarService } from "./shared/scalar.service";
 import { ToasterModule } from "angular2-toaster";
 import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
 import { IntegrationComponent } from "./integration/integration.component";
+import { ScalarCloseComponent } from "./riot/scalar-close/scalar-close.component";
 
 @NgModule({
     imports: [
@@ -31,6 +32,7 @@ import { IntegrationComponent } from "./integration/integration.component";
         HomeComponent,
         RiotComponent,
         IntegrationComponent,
+        ScalarCloseComponent,
 
         // Vendor
     ],

web/app/riot/riot.component.html

@@ -1,4 +1,5 @@
 <div id="wrapper">
+    <my-scalar-close></my-scalar-close>
     <div *ngIf="error">
         <p class="text-danger">{{ error }}</p>
     </div>

web/app/riot/riot.component.scss

@@ -5,4 +5,9 @@
 
 #wrapper {
   padding: 30px;
+}
+
+my-scalar-close {
+  float: right;
+  margin: -15px;
 }

web/app/riot/scalar-close/scalar-close.component.html

@@ -0,0 +1 @@
+<img src="/img/close.svg" (click)="closeScalar()">

web/app/riot/scalar-close/scalar-close.component.scss

@@ -0,0 +1,4 @@
+// component styles are encapsulated and only applied to their components
+img {
+  cursor: pointer;
+}

web/app/riot/scalar-close/scalar-close.component.ts

@@ -0,0 +1,17 @@
+import { Component } from "@angular/core";
+import { ScalarService } from "../../shared/scalar.service";
+
+@Component({
+    selector: 'my-scalar-close',
+    templateUrl: './scalar-close.component.html',
+    styleUrls: ['./scalar-close.component.scss'],
+})
+export class ScalarCloseComponent {
+
+    constructor(private scalar: ScalarService) {
+    }
+
+    public closeScalar() {
+        this.scalar.close();
+    }
+}

web/app/shared/scalar.service.ts

@@ -30,6 +30,10 @@ export class ScalarService {
         });
     }
 
+    public close(): void {
+        this.callAction("close_scalar", {});
+    }
+
     private callAction(action, payload) {
         let requestKey = randomString({length: 20});
         return new Promise((resolve, reject) => {

web/public/img/close.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="35px" height="35px" viewBox="0 0 35 35" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: sketchtool 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
+    <title>00C6DB7A-67D6-4431-8FB5-07BB1C1AE079</title>
+    <desc>Created with sketchtool.</desc>
+    <defs></defs>
+    <g id="Scalar" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="vector_integrations_popup" transform="translate(-884.000000, -156.000000)">
+            <g id="icons_close" transform="translate(884.000000, 156.000000)">
+                <path d="M17.5,35 C27.1649831,35 35,27.1649831 35,17.5 C35,7.83501688 27.1649831,0 17.5,0 C7.83501688,0 0,7.83501688 0,17.5 C0,27.1649831 7.83501688,35 17.5,35 Z" id="Oval-1-Copy-7" fill="#EEECEC"></path>
+                <polyline id="icon_close" fill="#535353" opacity="0.9" transform="translate(17.468897, 17.470577) rotate(-315.000000) translate(-17.468897, -17.470577) " points="18.2115394 5.97057742 16.674774 5.97057742 16.674774 16.7275762 5.9688975 16.7275762 5.9688975 18.2642903 16.674774 18.2642903 16.674774 28.9705774 18.2115394 28.9705774 18.2115394 18.2642903 28.9688975 18.2642903 28.9688975 16.7275762 18.2115394 16.7275762 18.2115394 5.97057742"></polyline>
+            </g>
+        </g>
+    </g>
+</svg>