fix-all-modals-crpper

fossasia · Oct 24, 2020 · 14f6b47 · 14f6b47
1 parent c0ea0a5
commit 14f6b47
Show file tree

Hide file tree

Showing 5 changed files with 82 additions and 16 deletions.
diff --git a/app/components/modals/modal-base.js b/app/components/modals/modal-base.js
@@ -7,18 +7,50 @@ import { isTesting } from 'open-event-frontend/utils/testing';
 
 export default UiModal.extend({
   tagName           : 'div',
-  classNameBindings : ['isFullScreen:fullscreen', 'isSmall:small', 'isLarge:large', 'noCropper'],
+  classNames        : ['centered-modal'],
+  classNameBindings : ['isFullScreen:fullscreen', 'isSmall:small', 'isLarge:large'],
 
-  openObserver: observer('isOpen', 'noCroppper', function() {
+  openObserver: observer('isOpen', function() {
     const $element = $(this.element);
     if (this.isOpen) {
-      if (this.noCropper) {
-        $element.modal({
-          centered: false
-        }).modal('show');
-      } else {
-        $element.modal('show');
-      }
+      $element.modal({
+        centered       : false,
+        duration       : isTesting ? 0 : 200,
+        dimmerSettings : {
+          dimmerName : `${this.elementId}-modal-dimmer`,
+          variation  : 'inverted'
+        },
+        onHide: () => {
+          this.set('isOpen', false);
+          if (this.onHide) {
+            this.onHide();
+          }
+        },
+        onDeny: () => {
+          if (this.onDeny) {
+            this.onDeny();
+          }
+          return true;
+        },
+        onApprove: () => {
+          if (this.onApprove) {
+            this.onApprove();
+          }
+          return true;
+        },
+
+        onVisible: () => {
+          this.set('isOpen', true);
+          const $element = $(this.element);
+          $element.modal('refresh');
+          $element.find('[data-content]').popup({
+            inline: true
+          });
+          if (this.onVisible) {
+            this.onVisible();
+          }
+        }
+      }).modal('show');
     } else {
       $element.modal('hide');
     }
@@ -97,7 +129,44 @@ export default UiModal.extend({
 
   didInitSemantic() {
     if (this.isOpen) {
-      $(this.element).modal('show');
+      $(this.element).modal({
+        centered       : false,
+        duration       : isTesting ? 0 : 200,
+        dimmerSettings : {
+          dimmerName : `${this.elementId}-modal-dimmer`,
+          variation  : 'inverted'
+        },
+        onHide: () => {
+          this.set('isOpen', false);
+          if (this.onHide) {
+            this.onHide();
+          }
+        },
+        onDeny: () => {
+          if (this.onDeny) {
+            this.onDeny();
+          }
+          return true;
+        },
+        onApprove: () => {
+          if (this.onApprove) {
+            this.onApprove();
+          }
+          return true;
+        },
+
+        onVisible: () => {
+          this.set('isOpen', true);
+          const $element = $(this.element);
+          $element.modal('refresh');
+          $element.find('[data-content]').popup({
+            inline: true
+          });
+          if (this.onVisible) {
+            this.onVisible();
+          }
+        }
+      }).modal('show');
     }
   }
 });
diff --git a/app/components/modals/session-notify-modal.js b/app/components/modals/session-notify-modal.js
@@ -16,7 +16,6 @@ export default class SessionNotifyModal extends ModalBase {
 
   constructor() {
     super(...arguments);
-    this.noCropper = true;
     this.initialize();
   }
 

diff --git a/app/components/modals/tax-info-modal.js b/app/components/modals/tax-info-modal.js
@@ -7,9 +7,6 @@ import { orderBy } from 'lodash-es';
 
 export default ModalBase.extend(FormMixin, {
   isSmall : false,
-  options : {
-    closable: false
-  },
 
   autoScrollToErrors   : true,
   isTaxIncludedInPrice : 'include',

diff --git a/app/styles/partials/overrides.scss b/app/styles/partials/overrides.scss
@@ -77,7 +77,7 @@ body.dimmable.undetached.dimmed {
   }
 }
 
-.no-cropper {
+.centered-modal {
   margin-left: auto !important;
-  margin-top: 50px !important;
+  margin-top: auto !important;
 }
diff --git a/app/templates/components/modals/tax-info-modal.hbs b/app/templates/components/modals/tax-info-modal.hbs
@@ -1,3 +1,4 @@
+<i class="black close icon"></i>
 <div class="header">
   {{t 'Add tax information'}}
 </div>