Merge pull request #4647 from PaulAdamDavis/modal-css-ani

Use CSS animations for modals

core/client/assets/sass/components/modals.scss

@@ -7,6 +7,8 @@
 // * Inner Container
 // * Content
 // * Modifiers
+// * Open States
+// * Animations
 // ------------------------------------------------------------
 
 
@@ -19,8 +21,8 @@
     position: fixed;
     top: 0;
     bottom: 0;
-    left: 0;
+    left: 10px;
-    right: 0;
+    right: 10px;
     z-index: 1040;
     overflow-x: auto;
     overflow-y: scroll;
@@ -28,16 +30,6 @@
     transform: translateZ(0);
 }
 
-.fade {
-    opacity: 0;
-    transition: opacity 0.2s linear 0s;
-    transform: translateZ(0);
-
-    &.in {
-        opacity: 1;
-    }
-}
-
 .modal-background {
     display: none;
     position: fixed;
@@ -58,7 +50,8 @@
     left: 50%;
     right: auto;
     z-index: 1050;
-    width: 450px;
+    width: 100%;
+    max-width: 550px;
     margin-left: auto;
     margin-right: auto;
     padding-top: 30px;
@@ -66,9 +59,7 @@
     pointer-events: auto;
 
     @media (max-width: 900px) {
-        width: 100%;
         padding: 10px;
-        margin-left: 0;
     };
 
     button {
@@ -128,7 +119,7 @@
 
     h1 {
         display: inline-block;
-        margin: 0;
+        margin: 0 25px 0 0;
         font-size: 1.85em;
         font-weight: 100;
     }
@@ -141,14 +132,28 @@
     .red {
         color: $red;
     }
+
+    // Remove bottom margin from whatever the first/last direct descendent is
+    // Normalizes any global styles
+    > *:first-child {
+        margin-top: 0;
+    }
+    > *:last-child {
+        margin-bottom: 0;
+    }
 }
 
 .modal-footer {
     margin-top: 20px;
+    text-align: right; // Used instead of floats as they invert the order
 
     .reject-button-class {
         @extend .btn;
     }
+
+    button {
+        margin-left: 8px;
+    }
 }
 
 //
@@ -201,3 +206,32 @@
         }
     }
 }
+
+
+//
+// Open States
+// --------------------------------------------------
+
+.modal-container.open,
+.modal-container.open > .modal,
+.modal-container.open > .modal-action {
+    display: block;
+}
+
+.modal-background.open {
+    display: block;
+}
+
+
+//
+// Animations
+// --------------------------------------------------
+
+.modal-container.fade-out {
+    animation-duration: 0.08s;
+}
+
+.modal-background.fade-out {
+    // animation-delay: 0.06s;
+    animation-duration: 0.15s;
+}

core/client/assets/sass/layouts/editor.scss

@@ -784,16 +784,12 @@ body.zen {
 // Markdown Help Modal
 // --------------------------------------------------
 
-.markdown-help-container{
-    padding-bottom: 20px;
-}
-
 .modal-markdown-help-table {
-    margin: 20px 0;
+    margin: 0 0 20px;
     width: 100%;
 
     td, th {
-        padding: 8px;
+        padding: 8px 0;
     }
 
     th {

core/client/assets/sass/layouts/users.scss

@@ -204,10 +204,6 @@ a.user-list-item {
 
     .modal-body {
         @include clearfix;
-
-        fieldset {
-            margin: 1em 0 0 0;
-        }
     }
 
     .form-group {

core/client/components/gh-modal-dialog.js

@@ -1,20 +1,21 @@
 var ModalDialog = Ember.Component.extend({
     didInsertElement: function () {
-        this.$('.js-modal-container').fadeIn(50);
+        this.$('.js-modal-container, .js-modal-background').addClass('fade-in open');
-
+        this.$('.js-modal').addClass('open');
-        this.$('.js-modal-background').show().fadeIn(10, function () {
-            $(this).addClass('in');
-        });
-
-        this.$('.js-modal').addClass('in');
     },
 
-    willDestroyElement: function () {
+    close: function () {
-        this.$('.js-modal').removeClass('in');
+        var self = this;
 
-        this.$('.js-modal-background').removeClass('in');
+        this.$('.js-modal, .js-modal-background').removeClass('fade-in').addClass('fade-out');
 
-        return this._super();
+        // The background should always be the last thing to fade out, so check on that instead of the content
+        this.$('.js-modal-background').on('animationend webkitAnimationEnd oanimationend MSAnimationEnd', function (event) {
+            if (event.originalEvent.animationName === 'fade-out') {
+                self.$('.js-modal, .js-modal-background').removeClass('open');
+                self.sendAction();
+            }
+        });
     },
 
     confirmaccept: 'confirmAccept',
@@ -22,15 +23,15 @@ var ModalDialog = Ember.Component.extend({
 
     actions: {
         closeModal: function () {
-            this.sendAction();
+            this.close();
         },
         confirm: function (type) {
             this.sendAction('confirm' + type);
-            this.sendAction();
+            this.close();
         }
     },
 
-    klass: Ember.computed('type', 'style', 'animation', function () {
+    klass: Ember.computed('type', 'style', function () {
         var classNames = [];
 
         classNames.push(this.get('type') ? 'modal-' + this.get('type') : 'modal');
@@ -41,8 +42,6 @@ var ModalDialog = Ember.Component.extend({
             });
         }
 
-        classNames.push(this.get('animation'));
-
         return classNames.join(' ');
     }),
 

core/client/templates/components/gh-modal-dialog.hbs

@@ -10,8 +10,9 @@
             <footer class="modal-footer">
                 <button type="button" {{bind-attr class="rejectButtonClass :js-button-reject"}} {{action "confirm" "reject"}}>
                     {{confirm.reject.text}}
-                </button>
+                </button><!--
-                <button type="button" {{bind-attr class="acceptButtonClass :js-button-accept"}} {{action "confirm" "accept"}}>
+                Required to strip the white-space between buttons
+                --><button type="button" {{bind-attr class="acceptButtonClass :js-button-accept"}} {{action "confirm" "accept"}}>
                     {{confirm.accept.text}}
                 </button>
             </footer>
@@ -19,4 +20,4 @@
         </section>
     </article>
 </div>
-<div class="modal-background fade js-modal-background"></div>
+<div class="modal-background js-modal-background"></div>

core/client/templates/modals/copy-html.hbs

@@ -1,4 +1,4 @@
-{{#gh-modal-dialog action="closeModal" showClose=true type="action" animation="fade"
+{{#gh-modal-dialog action="closeModal" showClose=true type="action"
     title="Generated HTML" confirm=confirm class="copy-html"}}
 
     {{textarea value=generatedHTML rows="6"}}

core/client/templates/modals/delete-all.hbs

@@ -1,4 +1,4 @@
-{{#gh-modal-dialog action="closeModal" type="action" style="wide,centered" animation="fade"
+{{#gh-modal-dialog action="closeModal" type="action" style="wide"
     title="Would you really like to delete all content from your blog?" confirm=confirm}}
 
     <p>This is permanent! No backups, no restores, no magic undo button. <br /> We warned you, ok?</p>

core/client/templates/modals/delete-post.hbs

@@ -1,4 +1,4 @@
-{{#gh-modal-dialog action="closeModal" showClose=true type="action" style="wide,centered" animation="fade"
+{{#gh-modal-dialog action="closeModal" showClose=true type="action" style="wide"
     title="Are you sure you want to delete this post?" confirm=confirm}}
 
     <p>You're about to delete "<strong>{{model.title}}</strong>".<br />This is permanent! No backups, no restores, no magic undo button. <br /> We warned you, ok?</p>

core/client/templates/modals/delete-user.hbs

@@ -1,4 +1,4 @@
-{{#gh-modal-dialog action="closeModal" showClose=true type="action" style="wide,centered" animation="fade"
+{{#gh-modal-dialog action="closeModal" showClose=true type="action" style="wide"
     title="Are you sure you want to delete this user?" confirm=confirm}}
 
     {{#unless userPostCount.isPending}}

core/client/templates/modals/invite-new-user.hbs

@@ -1,4 +1,4 @@
-{{#gh-modal-dialog action="closeModal" showClose=true type="action" animation="fade"
+{{#gh-modal-dialog action="closeModal" showClose=true type="action"
     title="Invite a New User" confirm=confirm class="invite-new-user"}}
 
         <fieldset>

core/client/templates/modals/leave-editor.hbs

@@ -1,9 +1,9 @@
-{{#gh-modal-dialog action="closeModal" showClose=true type="action" style="wide,centered" animation="fade"
+{{#gh-modal-dialog action="closeModal" showClose=true type="action" style="wide"
     title="Are you sure you want to leave this page?" confirm=confirm}}
 
     <p>Hey there! It looks like you're in the middle of writing something and you haven't saved all of your
     content.</p>
-    
+
     <p>Save before you go!</p>
 
 {{/gh-modal-dialog}}

core/client/templates/modals/markdown.hbs

@@ -1,4 +1,4 @@
-{{#gh-modal-dialog action="closeModal" showClose=true style="wide" animation="fade"
+{{#gh-modal-dialog action="closeModal" showClose=true style="wide"
     title="Markdown Help"}}
     <section class="markdown-help-container">
         <table class="modal-markdown-help-table">

core/client/templates/modals/transfer-owner.hbs

@@ -1,4 +1,4 @@
-{{#gh-modal-dialog action="closeModal" showClose=true type="action" style="wide,centered" animation="fade"
+{{#gh-modal-dialog action="closeModal" showClose=true type="action" style="wide"
     title="Transfer Ownership" confirm=confirm}}
 
     <p>Are you sure you want to transfer the ownership of this blog? You will not be able to undo this action.</p>

core/client/templates/modals/upload.hbs

@@ -1,5 +1,4 @@
-{{#gh-upload-modal action="closeModal" close=true type="action" style="wide" model=model imageType=imageType
+{{#gh-upload-modal action="closeModal" close=true type="action" style="wide" model=model imageType=imageType}}
-   animation="fade"}}
   <section class="js-drop-zone">
       <img class="js-upload-target" {{bind-attr src=src}} alt="logo">
       <input data-url="upload" class="js-fileupload main" type="file" name="uploadimage" {{bind-attr accept=acceptEncoding}} >