mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-24 03:14:03 +03:00
Merge pull request #4647 from PaulAdamDavis/modal-css-ani
Use CSS animations for modals
This commit is contained in:
commit
ae03f48cba
@ -7,6 +7,8 @@
|
||||
// * Inner Container
|
||||
// * Content
|
||||
// * Modifiers
|
||||
// * Open States
|
||||
// * Animations
|
||||
// ------------------------------------------------------------
|
||||
|
||||
|
||||
@ -19,8 +21,8 @@
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
left: 10px;
|
||||
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;
|
||||
}
|
@ -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 {
|
||||
|
@ -204,10 +204,6 @@ a.user-list-item {
|
||||
|
||||
.modal-body {
|
||||
@include clearfix;
|
||||
|
||||
fieldset {
|
||||
margin: 1em 0 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.form-group {
|
||||
|
@ -1,20 +1,21 @@
|
||||
var ModalDialog = Ember.Component.extend({
|
||||
didInsertElement: function () {
|
||||
this.$('.js-modal-container').fadeIn(50);
|
||||
|
||||
this.$('.js-modal-background').show().fadeIn(10, function () {
|
||||
$(this).addClass('in');
|
||||
});
|
||||
|
||||
this.$('.js-modal').addClass('in');
|
||||
this.$('.js-modal-container, .js-modal-background').addClass('fade-in open');
|
||||
this.$('.js-modal').addClass('open');
|
||||
},
|
||||
|
||||
willDestroyElement: function () {
|
||||
this.$('.js-modal').removeClass('in');
|
||||
close: function () {
|
||||
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(' ');
|
||||
}),
|
||||
|
||||
|
@ -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 type="button" {{bind-attr class="acceptButtonClass :js-button-accept"}} {{action "confirm" "accept"}}>
|
||||
</button><!--
|
||||
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>
|
@ -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"}}
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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}}
|
||||
|
@ -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>
|
||||
|
@ -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}}
|
||||
|
@ -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">
|
||||
|
@ -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>
|
||||
|
@ -1,5 +1,4 @@
|
||||
{{#gh-upload-modal action="closeModal" close=true type="action" style="wide" model=model imageType=imageType
|
||||
animation="fade"}}
|
||||
{{#gh-upload-modal action="closeModal" close=true type="action" style="wide" model=model imageType=imageType}}
|
||||
<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}} >
|
||||
|
Loading…
Reference in New Issue
Block a user