From cbded4a10a3c184e3d2a878ebb6b147dae0a1033 Mon Sep 17 00:00:00 2001
From: John Cowen <johncowen@users.noreply.github.com>
Date: Mon, 8 Apr 2019 11:18:55 +0100
Subject: [PATCH] ui: Improvements to modal-dialog (#5585)

1. If the modal gets bigger than 80% of the viewport height a scrollbar
will be shown. Currently there isn't anywhere it can get this big, but
future work involves possible larger modals
2. Usually its difficult to figure out which was the 'unchecked' radio
button using an onchange event. Luckily ember/handlebars changes its
properties after the onchange event, so knowing that and using an extra
data-checked attribute set via ember, we can figure out which radio
button has been 'unchecked'. This means the logic for opening an
closing modals becomes slightly easier
---
 ui-v2/app/components/modal-dialog.js                 | 8 +++++---
 ui-v2/app/components/modal-layer.js                  | 6 ++++--
 ui-v2/app/services/dom-buffer.js                     | 6 ++++--
 ui-v2/app/styles/components/modal-dialog/layout.scss | 2 ++
 ui-v2/app/templates/components/modal-dialog.hbs      | 2 +-
 5 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/ui-v2/app/components/modal-dialog.js b/ui-v2/app/components/modal-dialog.js
index f34c78a096..cb934102a0 100644
--- a/ui-v2/app/components/modal-dialog.js
+++ b/ui-v2/app/components/modal-dialog.js
@@ -105,15 +105,17 @@ export default DomBufferComponent.extend(SlotsMixin, WithResizing, {
   },
   actions: {
     change: function(e) {
-      if (e && e.target && e.target.checked) {
+      if (get(e, 'target.checked')) {
         this._open(e);
       } else {
         this._close();
       }
     },
     close: function() {
-      get(this, 'dom').element('#modal_close').checked = true;
-      this.onclose();
+      const $close = get(this, 'dom').element('#modal_close');
+      $close.checked = true;
+      const $input = get(this, 'dom').element('input[name="modal"]', this.element);
+      $input.onchange({ target: $input });
     },
   },
 });
diff --git a/ui-v2/app/components/modal-layer.js b/ui-v2/app/components/modal-layer.js
index 74a2887c31..003bf86870 100644
--- a/ui-v2/app/components/modal-layer.js
+++ b/ui-v2/app/components/modal-layer.js
@@ -10,8 +10,10 @@ export default DomBufferFlushComponent.extend({
         .filter(function(item) {
           return item.getAttribute('id') !== 'modal_close';
         })
-        .forEach(function(item) {
-          item.onchange();
+        .forEach(function(item, i) {
+          if (item.getAttribute('data-checked') === 'true') {
+            item.onchange({ target: item });
+          }
         });
     },
   },
diff --git a/ui-v2/app/services/dom-buffer.js b/ui-v2/app/services/dom-buffer.js
index 9cb647c4fb..fe58d5fa36 100644
--- a/ui-v2/app/services/dom-buffer.js
+++ b/ui-v2/app/services/dom-buffer.js
@@ -15,7 +15,9 @@ export default Service.extend(Evented, {
     return dom;
   },
   remove: function(name) {
-    buffer[name].remove();
-    delete buffer[name];
+    if (typeof buffer[name] !== 'undefined') {
+      buffer[name].remove();
+      delete buffer[name];
+    }
   },
 });
diff --git a/ui-v2/app/styles/components/modal-dialog/layout.scss b/ui-v2/app/styles/components/modal-dialog/layout.scss
index ee3ed9d167..222ffd4129 100644
--- a/ui-v2/app/styles/components/modal-dialog/layout.scss
+++ b/ui-v2/app/styles/components/modal-dialog/layout.scss
@@ -46,6 +46,8 @@
   padding-right: 15px;
 }
 %modal-window > div {
+  overflow-y: auto;
+  max-height: 80vh;
   padding: 20px 23px;
 }
 %modal-window > footer,
diff --git a/ui-v2/app/templates/components/modal-dialog.hbs b/ui-v2/app/templates/components/modal-dialog.hbs
index 5ee2ba9e4b..4f7357efca 100644
--- a/ui-v2/app/templates/components/modal-dialog.hbs
+++ b/ui-v2/app/templates/components/modal-dialog.hbs
@@ -1,5 +1,5 @@
 {{yield}}
-<input id={{name}} type="radio" name="modal" checked={{checked}} onchange={{action 'change'}} />
+<input id={{name}} type="radio" name="modal" data-checked="{{checked}}" checked={{checked}} onchange={{action 'change'}} />
 <div role="dialog" aria-modal="true">
   <label for="modal_close"></label>
   <div>