mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-01-06 22:40:14 -05:00
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)
This commit is contained in:
Matthew Harrison-Jones
Hannah Wolfe
parent
adae9f4180
commit
2305329041
8 changed files with 237 additions and 204 deletions
|
|
@ -667,7 +667,9 @@ body.zen {
|
|||
/* =============================================================================
|
||||
Markdown Help Modal
|
||||
============================================================================= */
|
||||
|
||||
.markdown-help-container{
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
.modal-markdown-help-table {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -104,7 +104,6 @@
|
|||
}
|
||||
|
||||
$(".modal-copyToHTML-content").text(md).selectText();
|
||||
$(".js-modal").center();
|
||||
pass = false;
|
||||
break;
|
||||
case "list":
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,12 +1,14 @@
|
|||
<aside class="modal-background"></aside>
|
||||
<article class="modal{{#if options.type}}-{{options.type}}{{/if}} {{#if options.style}}{{#each options.style}}modal-style-{{this}} {{/each}}{{/if}}{{options.animation}} js-modal">
|
||||
{{#if content.title}}<header class="modal-header"><h1>{{content.title}}</h1>{{#if options.close}}<a class="close" href="#"><span class="hidden">Close</span></a>{{/if}}</header>{{/if}}
|
||||
<section class="modal-content">
|
||||
{{#if content.title}}<header class="modal-header"><h1>{{content.title}}</h1></header>{{/if}}
|
||||
{{#if options.close}}<a class="close" href="#"><span class="hidden">Close</span></a>{{/if}}
|
||||
<section class="modal-body">
|
||||
</section>
|
||||
{{#if options.confirm}}
|
||||
<footer class="modal-footer">
|
||||
<button class="js-button-accept {{#if options.confirm.accept.buttonClass}}{{options.confirm.accept.buttonClass}}{{else}}button-add{{/if}}">{{options.confirm.accept.text}}</button>
|
||||
<button class="js-button-reject {{#if options.confirm.reject.buttonClass}}{{options.confirm.reject.buttonClass}}{{else}}button-delete{{/if}}">{{options.confirm.reject.text}}</button>
|
||||
</footer>
|
||||
{{/if}}
|
||||
</section>
|
||||
{{#if options.confirm}}
|
||||
<footer class="modal-footer">
|
||||
<button class="js-button-accept {{#if options.confirm.accept.buttonClass}}{{options.confirm.accept.buttonClass}}{{else}}button-add{{/if}}">{{options.confirm.accept.text}}</button>
|
||||
<button class="js-button-reject {{#if options.confirm.reject.buttonClass}}{{options.confirm.reject.buttonClass}}{{else}}button-delete{{/if}}">{{options.confirm.reject.text}}</button>
|
||||
</footer>
|
||||
{{/if}}
|
||||
</article>
|
||||
|
|
@ -1,107 +1,109 @@
|
|||
<table class="modal-markdown-help-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Result</th>
|
||||
<th>Markdown</th>
|
||||
<th>Shortcut</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><strong>Bold</strong></td>
|
||||
<td>**text**</td>
|
||||
<td>Ctrl / Cmd + B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><em>Emphasize</em></td>
|
||||
<td>__text__</td>
|
||||
<td>Ctrl / Cmd + I</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>Inline Code</code></td>
|
||||
<td>`code`</td>
|
||||
<td>Cmd + K / Ctrl + Shift + K</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Strike-through</td>
|
||||
<td>~~text~~</td>
|
||||
<td>Ctrl + Alt + U</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="#">Link</a></td>
|
||||
<td>[title](http://)</td>
|
||||
<td>Ctrl + Shift + L</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Image</td>
|
||||
<td></td>
|
||||
<td>Ctrl + Shift + I</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>List</td>
|
||||
<td>* item</td>
|
||||
<td>Ctrl + L</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Blockquote</td>
|
||||
<td>> quote</td>
|
||||
<td>Ctrl + Q</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>H1</td>
|
||||
<td># Heading</td>
|
||||
<td>Ctrl + Alt + 1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>H2</td>
|
||||
<td>## Heading</td>
|
||||
<td>Ctrl + Alt + 2</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>H3</td>
|
||||
<td>### Heading</td>
|
||||
<td>Ctrl + Alt + 3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>H4</td>
|
||||
<td>#### Heading</td>
|
||||
<td>Ctrl + Alt + 4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>H5</td>
|
||||
<td>##### Heading</td>
|
||||
<td>Ctrl + Alt + 5</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>H6</td>
|
||||
<td>###### Heading</td>
|
||||
<td>Ctrl + Alt + 6</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Select Word</td>
|
||||
<td></td>
|
||||
<td>Ctrl + Alt + W</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Uppercase</td>
|
||||
<td></td>
|
||||
<td>Ctrl + U</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Lowercase</td>
|
||||
<td></td>
|
||||
<td>Ctrl + Shift + U</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Titlecase</td>
|
||||
<td></td>
|
||||
<td>Ctrl + Alt + Shift + U</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Insert Current Date</td>
|
||||
<td></td>
|
||||
<td>Ctrl + Shift + 1</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
For further Markdown syntax reference: <a href="http://daringfireball.net/projects/markdown/syntax" target="_blank">Markdown Documentation</a>
|
||||
<section class="markdown-help-container">
|
||||
<table class="modal-markdown-help-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Result</th>
|
||||
<th>Markdown</th>
|
||||
<th>Shortcut</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><strong>Bold</strong></td>
|
||||
<td>**text**</td>
|
||||
<td>Ctrl / Cmd + B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><em>Emphasize</em></td>
|
||||
<td>__text__</td>
|
||||
<td>Ctrl / Cmd + I</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>Inline Code</code></td>
|
||||
<td>`code`</td>
|
||||
<td>Cmd + K / Ctrl + Shift + K</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Strike-through</td>
|
||||
<td>~~text~~</td>
|
||||
<td>Ctrl + Alt + U</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="#">Link</a></td>
|
||||
<td>[title](http://)</td>
|
||||
<td>Ctrl + Shift + L</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Image</td>
|
||||
<td></td>
|
||||
<td>Ctrl + Shift + I</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>List</td>
|
||||
<td>* item</td>
|
||||
<td>Ctrl + L</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Blockquote</td>
|
||||
<td>> quote</td>
|
||||
<td>Ctrl + Q</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>H1</td>
|
||||
<td># Heading</td>
|
||||
<td>Ctrl + Alt + 1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>H2</td>
|
||||
<td>## Heading</td>
|
||||
<td>Ctrl + Alt + 2</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>H3</td>
|
||||
<td>### Heading</td>
|
||||
<td>Ctrl + Alt + 3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>H4</td>
|
||||
<td>#### Heading</td>
|
||||
<td>Ctrl + Alt + 4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>H5</td>
|
||||
<td>##### Heading</td>
|
||||
<td>Ctrl + Alt + 5</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>H6</td>
|
||||
<td>###### Heading</td>
|
||||
<td>Ctrl + Alt + 6</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Select Word</td>
|
||||
<td></td>
|
||||
<td>Ctrl + Alt + W</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Uppercase</td>
|
||||
<td></td>
|
||||
<td>Ctrl + U</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Lowercase</td>
|
||||
<td></td>
|
||||
<td>Ctrl + Shift + U</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Titlecase</td>
|
||||
<td></td>
|
||||
<td>Ctrl + Alt + Shift + U</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Insert Current Date</td>
|
||||
<td></td>
|
||||
<td>Ctrl + Shift + 1</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
For further Markdown syntax reference: <a href="http://daringfireball.net/projects/markdown/syntax" target="_blank">Markdown Documentation</a>
|
||||
</section>
|
||||
|
|
@ -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);
|
||||
|
||||
|
|
|
|||
|
|
@ -33,8 +33,9 @@
|
|||
{{{body}}}
|
||||
</main>
|
||||
|
||||
<aside id="modal-container">
|
||||
</aside>
|
||||
<div id="modal-container">
|
||||
</div>
|
||||
<div class="modal-background fade"></div>
|
||||
|
||||
{{{ghostScriptTags}}}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue