From caa0964116d86741e7318c18606be4af9e4dd28a Mon Sep 17 00:00:00 2001
From: Nicolas Constant <github@nicolas-constant.com>
Date: Mon, 5 Aug 2019 17:59:04 -0400
Subject: [PATCH] disable column editing when clicking out

---
 .../stream-edition.component.ts               | 25 ++++++++++++++++---
 .../components/stream/stream.component.html   |  4 ++-
 src/app/components/stream/stream.component.ts |  5 ++++
 3 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/src/app/components/stream/stream-edition/stream-edition.component.ts b/src/app/components/stream/stream-edition/stream-edition.component.ts
index 16d5b384..1d16fbd1 100644
--- a/src/app/components/stream/stream-edition/stream-edition.component.ts
+++ b/src/app/components/stream/stream-edition/stream-edition.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit, Input, HostListener, ElementRef, Output, EventEmitter } from '@angular/core';
 import { Store } from '@ngxs/store';
 import { faChevronLeft, faChevronRight, faTimes } from "@fortawesome/free-solid-svg-icons";
 
@@ -18,21 +18,40 @@ export class StreamEditionComponent implements OnInit {
     hideReplies: boolean;
     hideBots: boolean;
 
+    private init: boolean;
+
     @Input() streamElement: StreamElement;
 
-    constructor(private readonly store: Store) { }
+    @Output('closed') public closedEvent = new EventEmitter();
+
+    @HostListener('document:click', ['$event'])
+    clickout(event) {
+        if (!this.init) return;
+
+        if (!this.eRef.nativeElement.contains(event.target)) {
+            this.closedEvent.emit(null);
+        }
+    }
+
+    constructor(
+        private readonly store: Store,
+        private eRef: ElementRef) { }
 
     ngOnInit() {
         this.hideBoosts = this.streamElement.hideBoosts;
         this.hideReplies = this.streamElement.hideReplies;
         this.hideBots = this.streamElement.hideBots;
+
+        setTimeout(() => {
+            this.init = true;
+        }, 0);
     }
 
     settingsChanged(): boolean {
         this.streamElement.hideBoosts = this.hideBoosts;
         this.streamElement.hideReplies = this.hideReplies;
         this.streamElement.hideBots = this.hideBots;
-        
+
         this.store.dispatch([new UpdateStream(this.streamElement)]);
         return false;
     }
diff --git a/src/app/components/stream/stream.component.html b/src/app/components/stream/stream.component.html
index 14ed0dc4..df838c61 100644
--- a/src/app/components/stream/stream.component.html
+++ b/src/app/components/stream/stream.component.html
@@ -16,7 +16,9 @@
         </a>
     </div>
 
-    <app-stream-edition class="stream-edition" *ngIf="editionPanelIsOpen" [streamElement]="streamElement">
+    <app-stream-edition class="stream-edition" *ngIf="editionPanelIsOpen" 
+        [streamElement]="streamElement"
+        (closed)="streamEditionClosed()">
     </app-stream-edition>
 
     <app-stream-statuses class="stream-statuses"
diff --git a/src/app/components/stream/stream.component.ts b/src/app/components/stream/stream.component.ts
index 3369f18f..6d5ec46d 100644
--- a/src/app/components/stream/stream.component.ts
+++ b/src/app/components/stream/stream.component.ts
@@ -95,5 +95,10 @@ export class StreamComponent implements OnInit {
         this.editionPanelIsOpen = !this.editionPanelIsOpen;
         return false;
     }
+
+    streamEditionClosed(): boolean {
+        this.editionPanelIsOpen = false;
+        return false;
+    }
 }