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

@@ -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 });
     },
   },
 });

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 });
+          }
         });
     },
   },

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];
+    }
   },
 });

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,

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>