the-djmaze/snappymail
1
1
Fork 0
mirror of https://github.com/the-djmaze/snappymail.git synced 2025-09-07 21:54:35 +08:00
Code Issues Projects Releases Packages Wiki Activity

Add popups animation

Browse source
This commit is contained in:
RainLoop Team 2013-12-28 18:11:19 +04:00
parent f690ee1532
commit fd2c2346a8
23 changed files with 100 additions and 88 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
dev/Common/Knockout.js
View file

@ -110,15 +110,12 @@ ko.bindingHandlers.modal = {
'show': ko.utils.unwrapObservable(fValueAccessor())
}).on('hidden', function () {
fValueAccessor()(false);
}).on('shown', function () {
Utils.windowResize();
});
},
'update': function (oElement, fValueAccessor) {
var bValue = ko.utils.unwrapObservable(fValueAccessor());
$(oElement).modal(bValue ? 'show' : 'hide');
_.delay(function () {
$(oElement).toggleClass('popup-active', bValue);
}, 1);
$(oElement).modal(ko.utils.unwrapObservable(fValueAccessor()) ? 'show' : 'hide');
}
};

7
dev/Knoin/Knoin.js
View file

@ -159,10 +159,15 @@ Knoin.prototype.hideScreenPopup = function (ViewModelClassToHide)
{
if (ViewModelClassToHide && ViewModelClassToHide.__vm && ViewModelClassToHide.__dom)
{
ViewModelClassToHide.__dom.hide();
ViewModelClassToHide.__vm.modalVisibility(false);
this.delegateRun(ViewModelClassToHide.__vm, 'onHide');
this.popupVisibility(false);
Plugins.runHook('view-model-on-hide', [ViewModelClassToHide.__name, ViewModelClassToHide.__vm]);
_.delay(function () {
ViewModelClassToHide.__dom.hide();
}, 300);
}
};

32
dev/Styles/Animations.less
View file

@ -64,11 +64,13 @@ html.rl-started-trigger.no-mobile #rl-content {
.rl-anim {
&.csstransitions.no-mobile #rl-content {
.transition(~"0.4s opacity cubic-bezier(0.250, 0.460, 0.450, 0.940)");
/*.transition(~"0.4s opacity cubic-bezier(0.250, 0.460, 0.450, 0.940)");*/
.transition(opacity 0.3s ease-out);
}
&.csstransitions.no-mobile .b-login-content .loginFormWrapper {
.transition(~"0.4s all cubic-bezier(0.250, 0.460, 0.450, 0.940)");
/*.transition(~"0.4s all cubic-bezier(0.250, 0.460, 0.450, 0.940)");*/
.transition(all 0.3s ease-out);
}
&.rgba.cssanimations.backgroundsize .e-strip-animation {
@ -148,22 +150,18 @@ html.rl-started-trigger.no-mobile #rl-content {
}
}
&.csstransitions .modal-open .popups .modal {
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
&.csstransitions .modal.fade {
.transition(all 0.2s ease-out);
-webkit-transform: translateY(-20px);
-moz-transform: translateY(-20px);
transform: translateY(-20px);
/*.transition(~"0.3s all cubic-bezier(0.250, 0.460, 0.450, 0.940)");*/
.transition(0.1s all linear);
.scale(0.95);
}
.modal-open .popups .popup-active.modal {
-webkit-transform: none;
-moz-transform: none;
-o-transform: none;
transform: none;
&.in {
-webkit-transform: none;
-moz-transform: none;
transform: none;
}
}
&.cssanimations .b-compose.loading .b-header-toolbar {

9
dev/Styles/_BootstrapFix.less
View file

@ -221,6 +221,15 @@ html.no-rgba .modal {
}
}
.modal.fade {
.transition(none);
top: 0;
}
.modal.fade.in {
top: 0;
}
.modal.loginContent .modal-body, .modal.loginAdminContent .modal-body {
background-color: transparent !important;
}

2
rainloop/v/0.0.0/app/templates/Views/PopupsActivate.html
View file

@ -1,5 +1,5 @@
<div class="popups">
<div class="modal hide b-activate-content" data-bind="modal: modalVisibility">
<div class="modal hide fade b-activate-content" data-bind="modal: modalVisibility">
<div>
<div class="modal-header">
<button type="button" class="close" data-bind="command: cancelCommand">&times;</button>

2
rainloop/v/0.0.0/app/templates/Views/PopupsAddAccount.html
View file

@ -1,5 +1,5 @@
<div class="popups">
<div class="modal hide b-account-add-content g-ui-user-select-none" data-bind="modal: modalVisibility">
<div class="modal hide fade b-account-add-content g-ui-user-select-none" data-bind="modal: modalVisibility">
<div>
<div class="modal-header">
<button type="button" class="close" data-bind="command: cancelCommand">&times;</button>

2
rainloop/v/0.0.0/app/templates/Views/PopupsAdvancedSearch.html
View file

@ -1,5 +1,5 @@
<div class="popups">
<div class="modal hide b-advanced-search-content g-ui-user-select-none" data-bind="modal: modalVisibility">
<div class="modal hide fade b-advanced-search-content g-ui-user-select-none" data-bind="modal: modalVisibility">
<div class="modal-header">
<button type="button" class="close" data-bind="command: cancelCommand">&times;</button>
<h3>

2
rainloop/v/0.0.0/app/templates/Views/PopupsAsk.html
View file

@ -1,5 +1,5 @@
<div class="popups">
<div class="modal hide b-ask-content g-ui-user-select-none" data-bind="modal: modalVisibility">
<div class="modal hide fade b-ask-content g-ui-user-select-none" data-bind="modal: modalVisibility">
<div>
<div class="modal-body">
<br />

2
rainloop/v/0.0.0/app/templates/Views/PopupsCompose.html
View file

@ -1,5 +1,5 @@
<div class="popups">
<div class="modal hide b-compose" data-backdrop="static" data-bind="modal: modalVisibility, css: {'loading': saving() || sending()}">
<div class="modal hide fade b-compose" data-backdrop="static" data-bind="modal: modalVisibility, css: {'loading': saving() || sending()}">
<div class="modal-header b-header-toolbar g-ui-user-select-none">
<button type="button" class="close" data-bind="command: cancelCommand">&times;</button>
<a class="btn btn-large button-send" data-bind="command: sendCommand, css: {'btn-danger': sendError, 'btn-warning': sendSuccessButSaveError }">

2
rainloop/v/0.0.0/app/templates/Views/PopupsContacts.html
View file

@ -1,5 +1,5 @@
<div class="popups">
<div class="modal hide b-contacts-content" data-bind="modal: modalVisibility">
<div class="modal hide fade b-contacts-content" data-bind="modal: modalVisibility">
<div class="modal-header b-header-toolbar g-ui-user-select-none">
<button type="button" class="close" data-bind="command: cancelCommand">&times;</button>
<a class="btn button-create-contact" data-bind="command: newCommand">

2
rainloop/v/0.0.0/app/templates/Views/PopupsDomain.html
View file

@ -1,5 +1,5 @@
<div class="popups">
<div class="modal hide b-domain-content g-ui-user-select-none" data-bind="modal: modalVisibility, css: {'domain-edit': edit, 'domain-white-list-page': whiteListPage}">
<div class="modal hide fade b-domain-content g-ui-user-select-none" data-bind="modal: modalVisibility, css: {'domain-edit': edit, 'domain-white-list-page': whiteListPage}">
<div class="modal-header">
<button type="button" class="close" data-bind="command: cancelCommand">&times;</button>
<h3 data-bind="text: headerText"></h3>

2
rainloop/v/0.0.0/app/templates/Views/PopupsFolderClear.html
View file

@ -1,5 +1,5 @@
<div class="popups">
<div class="modal hide b-folder-clear-content g-ui-user-select-none" data-bind="modal: modalVisibility">
<div class="modal hide fade b-folder-clear-content g-ui-user-select-none" data-bind="modal: modalVisibility">
<div>
<div class="modal-header">
<button type="button" class="close" data-bind="command: cancelCommand">&times;</button>

2
rainloop/v/0.0.0/app/templates/Views/PopupsFolderCreate.html
View file

@ -1,5 +1,5 @@
<div class="popups">
<div class="modal hide b-folder-create-content g-ui-user-select-none" data-bind="modal: modalVisibility">
<div class="modal hide fade b-folder-create-content g-ui-user-select-none" data-bind="modal: modalVisibility">
<div>
<div class="modal-header">
<button type="button" class="close" data-bind="command: cancelCommand">&times;</button>

2
rainloop/v/0.0.0/app/templates/Views/PopupsFolderSystem.html
View file

@ -1,5 +1,5 @@
<div class="popups">
<div class="modal hide b-folder-system-content g-ui-user-select-none" data-bind="modal: modalVisibility">
<div class="modal hide fade b-folder-system-content g-ui-user-select-none" data-bind="modal: modalVisibility">
<div class="modal-header">
<button type="button" class="close" data-bind="command: cancelCommand">&times;</button>
<h3>

2
rainloop/v/0.0.0/app/templates/Views/PopupsIdentity.html
View file

@ -1,5 +1,5 @@
<div class="popups">
<div class="modal hide b-identity-content g-ui-user-select-none" data-bind="modal: modalVisibility">
<div class="modal hide fade b-identity-content g-ui-user-select-none" data-bind="modal: modalVisibility">
<div>
<div class="modal-header">
<button type="button" class="close" data-bind="command: cancelCommand">&times;</button>

2
rainloop/v/0.0.0/app/templates/Views/PopupsLanguages.html
View file

@ -1,5 +1,5 @@
<div class="popups">
<div class="modal hide b-languages-content g-ui-user-select-none" data-bind="modal: modalVisibility, css: {'exp': exp}">
<div class="modal hide fade b-languages-content g-ui-user-select-none" data-bind="modal: modalVisibility, css: {'exp': exp}">
<div class="modal-header">
<button type="button" class="close" data-bind="command: cancelCommand">&times;</button>
<h3>

2
rainloop/v/0.0.0/app/templates/Views/PopupsPlugin.html
View file

@ -1,5 +1,5 @@
<div class="popups">
<div class="modal hide b-plugin-content" data-bind="modal: modalVisibility">
<div class="modal hide fade b-plugin-content" data-bind="modal: modalVisibility">
<div class="modal-header">
<button type="button" class="close" data-bind="command: cancelCommand">&times;</button>
<h4>

57
rainloop/v/0.0.0/static/css/app.css
View file

@ -5589,6 +5589,16 @@ html.no-rgba .modal {
background-color: #fff;
max-height: none;
}
.modal.fade {
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
transition: none;
top: 0;
}
.modal.fade.in {
top: 0;
}
.modal.loginContent .modal-body,
.modal.loginAdminContent .modal-body {
background-color: transparent !important;
@ -8292,16 +8302,20 @@ html.rl-started-trigger.no-mobile #rl-content {
filter: alpha(opacity=70);
}
.rl-anim.csstransitions.no-mobile #rl-content {
-webkit-transition: 0.4s opacity cubic-bezier(0.250, 0.460, 0.450, 0.940);
-moz-transition: 0.4s opacity cubic-bezier(0.250, 0.460, 0.450, 0.940);
-o-transition: 0.4s opacity cubic-bezier(0.250, 0.460, 0.450, 0.940);
transition: 0.4s opacity cubic-bezier(0.250, 0.460, 0.450, 0.940);
/*.transition(~"0.4s opacity cubic-bezier(0.250, 0.460, 0.450, 0.940)");*/
-webkit-transition: opacity 0.3s ease-out;
-moz-transition: opacity 0.3s ease-out;
-o-transition: opacity 0.3s ease-out;
transition: opacity 0.3s ease-out;
}
.rl-anim.csstransitions.no-mobile .b-login-content .loginFormWrapper {
-webkit-transition: 0.4s all cubic-bezier(0.250, 0.460, 0.450, 0.940);
-moz-transition: 0.4s all cubic-bezier(0.250, 0.460, 0.450, 0.940);
-o-transition: 0.4s all cubic-bezier(0.250, 0.460, 0.450, 0.940);
transition: 0.4s all cubic-bezier(0.250, 0.460, 0.450, 0.940);
/*.transition(~"0.4s all cubic-bezier(0.250, 0.460, 0.450, 0.940)");*/
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.rl-anim.rgba.cssanimations.backgroundsize .e-strip-animation {
-webkit-background-size: 60px 60px;
@ -8375,27 +8389,18 @@ html.rl-started-trigger.no-mobile #rl-content {
-o-transition: left 500ms ease;
transition: left 500ms ease;
}
.rl-anim.csstransitions .modal-open .popups .modal {
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
/*.transition(~"0.3s all cubic-bezier(0.250, 0.460, 0.450, 0.940)");*/
-webkit-transition: 0.1s all linear;
-moz-transition: 0.1s all linear;
-o-transition: 0.1s all linear;
transition: 0.1s all linear;
-webkit-transform: scale(0.95);
-moz-transform: scale(0.95);
-ms-transform: scale(0.95);
-o-transform: scale(0.95);
transform: scale(0.95);
.rl-anim.csstransitions .modal.fade {
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
-webkit-transform: translateY(-20px);
-moz-transform: translateY(-20px);
transform: translateY(-20px);
}
.rl-anim .modal-open .popups .popup-active.modal {
.rl-anim.csstransitions .modal.fade.in {
-webkit-transform: none;
-moz-transform: none;
-o-transform: none;
transform: none;
}
.rl-anim.cssanimations .b-compose.loading .b-header-toolbar {

2
rainloop/v/0.0.0/static/css/app.min.css vendored
View file

File diff suppressed because one or more lines are too long

19
rainloop/v/0.0.0/static/js/admin.js
View file

@ -2373,15 +2373,12 @@ ko.bindingHandlers.modal = {
'show': ko.utils.unwrapObservable(fValueAccessor())
}).on('hidden', function () {
fValueAccessor()(false);
}).on('shown', function () {
Utils.windowResize();
});
},
'update': function (oElement, fValueAccessor) {
var bValue = ko.utils.unwrapObservable(fValueAccessor());
$(oElement).modal(bValue ? 'show' : 'hide');
_.delay(function () {
$(oElement).toggleClass('popup-active', bValue);
}, 1);
$(oElement).modal(ko.utils.unwrapObservable(fValueAccessor()) ? 'show' : 'hide');
}
};
@ -2705,9 +2702,6 @@ ko.bindingHandlers.emailsTags = {
oEmail = new EmailModel();
oEmail.mailsoParse(sValue);
oEmail.clearDuplicateName();
// sValue = oEmail.toLine(false);
// return sValue;
return [oEmail.toLine(false), oEmail];
}
@ -3755,10 +3749,15 @@ Knoin.prototype.hideScreenPopup = function (ViewModelClassToHide)
{
if (ViewModelClassToHide && ViewModelClassToHide.__vm && ViewModelClassToHide.__dom)
{
ViewModelClassToHide.__dom.hide();
ViewModelClassToHide.__vm.modalVisibility(false);
this.delegateRun(ViewModelClassToHide.__vm, 'onHide');
this.popupVisibility(false);
Plugins.runHook('view-model-on-hide', [ViewModelClassToHide.__name, ViewModelClassToHide.__vm]);
_.delay(function () {
ViewModelClassToHide.__dom.hide();
}, 300);
}
};

2
rainloop/v/0.0.0/static/js/admin.min.js vendored
View file

File diff suppressed because one or more lines are too long

19
rainloop/v/0.0.0/static/js/app.js
View file

@ -2373,15 +2373,12 @@ ko.bindingHandlers.modal = {
'show': ko.utils.unwrapObservable(fValueAccessor())
}).on('hidden', function () {
fValueAccessor()(false);
}).on('shown', function () {
Utils.windowResize();
});
},
'update': function (oElement, fValueAccessor) {
var bValue = ko.utils.unwrapObservable(fValueAccessor());
$(oElement).modal(bValue ? 'show' : 'hide');
_.delay(function () {
$(oElement).toggleClass('popup-active', bValue);
}, 1);
$(oElement).modal(ko.utils.unwrapObservable(fValueAccessor()) ? 'show' : 'hide');
}
};
@ -2705,9 +2702,6 @@ ko.bindingHandlers.emailsTags = {
oEmail = new EmailModel();
oEmail.mailsoParse(sValue);
oEmail.clearDuplicateName();
// sValue = oEmail.toLine(false);
// return sValue;
return [oEmail.toLine(false), oEmail];
}
@ -5185,10 +5179,15 @@ Knoin.prototype.hideScreenPopup = function (ViewModelClassToHide)
{
if (ViewModelClassToHide && ViewModelClassToHide.__vm && ViewModelClassToHide.__dom)
{
ViewModelClassToHide.__dom.hide();
ViewModelClassToHide.__vm.modalVisibility(false);
this.delegateRun(ViewModelClassToHide.__vm, 'onHide');
this.popupVisibility(false);
Plugins.runHook('view-model-on-hide', [ViewModelClassToHide.__name, ViewModelClassToHide.__vm]);
_.delay(function () {
ViewModelClassToHide.__dom.hide();
}, 300);
}
};

6
rainloop/v/0.0.0/static/js/app.min.js vendored
View file

File diff suppressed because one or more lines are too long