From 2305329041558dfb6449a8fc05ddf5dcca3dd1dc Mon Sep 17 00:00:00 2001 From: Matthew Harrison-Jones Date: Tue, 17 Sep 2013 17:24:53 +0100 Subject: [PATCH] Complete Modal Refactor * Smoother animations * Removed blurring in Chrome temporarily * Centering is now done in CSS (the height is calculated in JS to work in FF and Opera) * Modals now need close: true to be set to enable the close icon and shortcuts for closing (ESC key, background clicking) --- core/client/assets/sass/layouts/editor.scss | 4 +- core/client/assets/sass/modules/global.scss | 147 +++++++------ core/client/markdown-actions.js | 1 - core/client/models/uploadModal.js | 6 +- core/client/tpl/modal.hbs | 18 +- core/client/tpl/modals/markdown.hbs | 216 ++++++++++---------- core/client/views/base.js | 44 ++-- core/server/views/default.hbs | 5 +- 8 files changed, 237 insertions(+), 204 deletions(-) diff --git a/core/client/assets/sass/layouts/editor.scss b/core/client/assets/sass/layouts/editor.scss index 7012ddaf50..9bd14c5c60 100644 --- a/core/client/assets/sass/layouts/editor.scss +++ b/core/client/assets/sass/layouts/editor.scss @@ -667,7 +667,9 @@ body.zen { /* ============================================================================= Markdown Help Modal ============================================================================= */ - +.markdown-help-container{ + padding-bottom: 20px; +} .modal-markdown-help-table { margin-top: 0; } diff --git a/core/client/assets/sass/modules/global.scss b/core/client/assets/sass/modules/global.scss index f32d599441..93de648b90 100644 --- a/core/client/assets/sass/modules/global.scss +++ b/core/client/assets/sass/modules/global.scss @@ -392,7 +392,7 @@ nav { padding:12px 15px; color: lighten($grey, 10%); @include box-sizing(border-box); - + &:hover {text-decoration:none;} } @@ -984,32 +984,42 @@ nav { Modals ========================================================================== */ #modal-container { - &.active { - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - z-index: 999; - @include transition(all 0.15s linear 0s); - @include transform(translateZ(0)); + @include box-sizing(border-box); + display: none; + position: fixed; + top: 0; + bottom: 0; + left: 0; + right: 0; + overflow-x: auto; + overflow-y: scroll; + z-index: 1040; + pointer-events: none; + @include transition(all 0.15s linear 0s); + @include transform(translateZ(0)); +} - &.dark { - background: rgba(0,0,0,0.4); - } - - .modal-background { - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - z-index: 999; - } +.fade { + opacity: 0; + @include transition(opacity 0.2s linear 0s); + @include transform(translateZ(0)); + &.in { + opacity: 1; } } +.modal-background { + display: none; + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + background: rgba(0,0,0,0.4); + z-index: 1030; +} + body.blur > *:not(#modal-container) { @include transition(all 0.15s linear 0s); -webkit-filter: blur(2px); @@ -1022,30 +1032,29 @@ body.blur > *:not(#modal-container) { %modal, .modal { @include box-sizing(border-box); - max-height: 90%; + left: 50%; + right: auto; width: 450px; - padding: 0; - background: #fff; - border-radius: $rounded; - overflow:auto; - z-index: 1001; - box-shadow: rgba(0,0,0,0.2) 0 0 0 6px; + margin-left: auto; + margin-right: auto; + padding-top: 30px; + padding-bottom: 30px; + z-index: 1050; + pointer-events: auto; - &.fade { - opacity: 0; - @include transition(opacity 0.2s linear 0s); - &.in { - opacity: 1; - } - } + @include breakpoint($tablet) { + width: auto; + padding: 10px; + }; button { min-width: 100px; } - @include breakpoint($mobile) { + @include breakpoint($tablet) { width: 100%; + margin-left: 0; } } @@ -1055,16 +1064,49 @@ body.blur > *:not(#modal-container) { .modal-action { @extend %modal; + padding: 60px 0 30px; + + @include breakpoint($tablet) { + padding: 30px 0; + } .modal-footer { margin-top: 20px; } } +.modal-content { + @include box-sizing(padding-box); + position: relative; + background-clip: padding-box; + background-color: #FFFFFF; + border-radius: $rounded; + box-shadow: rgba(0,0,0,0.2) 0 0 0 6px; + + .close { + @include box-sizing(border-box); + position: absolute; + top: 15px; + right: 15px; + width: 16px; + min-height: 16px; + padding: 0; + margin: 0; + border: none; + z-index: 9999; + + @include icon($i-x, 1em, $midgrey); + @include transition(opacity 0.3s linear); + + &:hover { + color: $darkgrey; + } + } +} .modal-header { position: relative; padding: 20px; - border-bottom: 1px solid $lightgrey; + border-bottom: 1px solid $lightbrown; h1 { display: inline-block; @@ -1072,31 +1114,13 @@ body.blur > *:not(#modal-container) { font-size: 1.5em; font-weight: bold; } - - .close { - @include box-sizing(border-box); - position: absolute; - top: 10px; - right: 20px; - width: 16px; - min-height: 16px; - padding: 0; - margin: 0; - border: none; - opacity: 0.4; - - @include icon($i-close, 1em, $midgrey); - @include transition(opacity 0.3s linear); - - &:hover{ - opacity: 1; - } - } } -.modal-content { - padding: 0 20px; +.modal-body { + position: relative; min-height: 100px; + padding: 0 20px; + overflow-y: auto; } .modal-footer { @@ -1107,7 +1131,7 @@ body.blur > *:not(#modal-container) { .modal-style-wide { width: 550px; - @include breakpoint($mobile) { + @include breakpoint($tablet) { width: 100%; } } @@ -1363,6 +1387,7 @@ main { } } } + .pre-image-uploader { @include box-sizing(border-box); @include baseline; diff --git a/core/client/markdown-actions.js b/core/client/markdown-actions.js index 43d693d62f..c3bb14fac1 100644 --- a/core/client/markdown-actions.js +++ b/core/client/markdown-actions.js @@ -104,7 +104,6 @@ } $(".modal-copyToHTML-content").text(md).selectText(); - $(".js-modal").center(); pass = false; break; case "list": diff --git a/core/client/models/uploadModal.js b/core/client/models/uploadModal.js index 07fdeb5423..36398b1ab9 100644 --- a/core/client/models/uploadModal.js +++ b/core/client/models/uploadModal.js @@ -4,10 +4,10 @@ Ghost.Models.uploadModal = Backbone.Model.extend({ options: { - close: false, + close: true, type: "action", - style: "wide", - animation: 'fadeIn', + style: ["wide"], + animation: 'fade', afterRender: function () { this.$('.js-drop-zone').upload(); }, diff --git a/core/client/tpl/modal.hbs b/core/client/tpl/modal.hbs index f09a3f9d95..e4ee661546 100644 --- a/core/client/tpl/modal.hbs +++ b/core/client/tpl/modal.hbs @@ -1,12 +1,14 @@ -
- {{#if content.title}}

{{content.title}}

{{#if options.close}}{{/if}}
{{/if}}
+ {{#if content.title}}

{{content.title}}

{{/if}} + {{#if options.close}}{{/if}} +
+
+ {{#if options.confirm}} +
+ + +
+ {{/if}}
- {{#if options.confirm}} -
- - -
- {{/if}}
\ No newline at end of file diff --git a/core/client/tpl/modals/markdown.hbs b/core/client/tpl/modals/markdown.hbs index 8533660988..2b0af04918 100644 --- a/core/client/tpl/modals/markdown.hbs +++ b/core/client/tpl/modals/markdown.hbs @@ -1,107 +1,109 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ResultMarkdownShortcut
Bold**text**Ctrl / Cmd + B
Emphasize__text__Ctrl / Cmd + I
Inline Code`code`Cmd + K / Ctrl + Shift + K
Strike-through~~text~~Ctrl + Alt + U
Link[title](http://)Ctrl + Shift + L
Image![alt](http://)Ctrl + Shift + I
List* itemCtrl + L
Blockquote> quoteCtrl + Q
H1# HeadingCtrl + Alt + 1
H2## HeadingCtrl + Alt + 2
H3### HeadingCtrl + Alt + 3
H4#### HeadingCtrl + Alt + 4
H5##### HeadingCtrl + Alt + 5
H6###### HeadingCtrl + Alt + 6
Select WordCtrl + Alt + W
UppercaseCtrl + U
LowercaseCtrl + Shift + U
TitlecaseCtrl + Alt + Shift + U
Insert Current DateCtrl + Shift + 1
-For further Markdown syntax reference: Markdown Documentation \ No newline at end of file +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ResultMarkdownShortcut
Bold**text**Ctrl / Cmd + B
Emphasize__text__Ctrl / Cmd + I
Inline Code`code`Cmd + K / Ctrl + Shift + K
Strike-through~~text~~Ctrl + Alt + U
Link[title](http://)Ctrl + Shift + L
Image![alt](http://)Ctrl + Shift + I
List* itemCtrl + L
Blockquote> quoteCtrl + Q
H1# HeadingCtrl + Alt + 1
H2## HeadingCtrl + Alt + 2
H3### HeadingCtrl + Alt + 3
H4#### HeadingCtrl + Alt + 4
H5##### HeadingCtrl + Alt + 5
H6###### HeadingCtrl + Alt + 6
Select WordCtrl + Alt + W
UppercaseCtrl + U
LowercaseCtrl + Shift + U
TitlecaseCtrl + Alt + Shift + U
Insert Current DateCtrl + Shift + 1
+ For further Markdown syntax reference: Markdown Documentation +
\ No newline at end of file diff --git a/core/client/views/base.js b/core/client/views/base.js index 45c76c7ed9..0cee6744eb 100644 --- a/core/client/views/base.js +++ b/core/client/views/base.js @@ -273,14 +273,19 @@ initialize: function () { this.render(); var self = this; - if (!this.model.options.confirm) { + if (this.model.options.close) { shortcut.add("ESC", function () { self.removeElement(); }); - $(document).on('click', '.modal-background', function (e) { - self.removeElement(e); + $(document).on('click', '.modal-background', function () { + self.removeElement(); }); } else { + shortcut.remove("ESC"); + $(document).off('click', '.modal-background'); + } + + if (this.model.options.confirm) { // Initiate functions for buttons here so models don't get tied up. this.acceptModal = function () { this.model.options.confirm.accept.func.call(this); @@ -290,8 +295,6 @@ this.model.options.confirm.reject.func.call(this); self.removeElement(); }; - shortcut.remove("ESC"); - $(document).off('click', '.modal-background'); } }, templateData: function () { @@ -303,28 +306,26 @@ 'click .js-button-reject': 'rejectModal' }, afterRender: function () { - this.$(".modal-content").html(this.addSubview(new Ghost.Views.Modal.ContentView({model: this.model})).render().el); - this.$el.children(".js-modal").center({animate: false}).css("max-height", $(window).height() - 120); // same as resize(), but the debounce causes init lag - this.$el.addClass("active dark"); - - if (document.body.style.webkitFilter !== undefined) { // Detect webkit filters - $("body").addClass("blur"); + this.$el.fadeIn(50); + $(".modal-background").fadeIn(10, function () { + $(this).addClass("in"); + }); + if (this.model.options.confirm) { + this.$('.close').remove(); } + this.$(".modal-body").html(this.addSubview(new Ghost.Views.Modal.ContentView({model: this.model})).render().el); + +// if (document.body.style.webkitFilter !== undefined) { // Detect webkit filters +// $("body").addClass("blur"); // Removed due to poor performance in Chrome +// } + if (_.isFunction(this.model.options.afterRender)) { this.model.options.afterRender.call(this); } if (this.model.options.animation) { this.animate(this.$el.children(".js-modal")); } - var self = this; - $(window).on('resize', self.resize); - }, - // #### resize - // Center and resize modal based on window height - resize: _.debounce(function () { - $(".js-modal").center().css("max-height", $(window).height() - 120); - }, 50), // #### remove // Removes Backbone attachments from modals remove: function () { @@ -357,11 +358,12 @@ if (document.body.style.filter !== undefined) { $("body").removeClass("blur"); } - self.$el.removeClass('dark'); + $(".modal-background").removeClass('in'); setTimeout(function () { self.remove(); - self.$el.removeClass('active'); + self.$el.hide(); + $(".modal-background").hide(); }, removeBackgroundDelay); }, removeModalDelay); diff --git a/core/server/views/default.hbs b/core/server/views/default.hbs index 6aad366817..2e42609fec 100644 --- a/core/server/views/default.hbs +++ b/core/server/views/default.hbs @@ -33,8 +33,9 @@ {{{body}}} - + +
{{{ghostScriptTags}}}