Add popups animation

dev/Common/Knockout.js

@@ -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(ko.utils.unwrapObservable(fValueAccessor()) ? 'show' : 'hide');
-		$(oElement).modal(bValue ? 'show' : 'hide');
-
-		_.delay(function () {
-			$(oElement).toggleClass('popup-active', bValue);
-		}, 1);
 	}
 };
 

dev/Knoin/Knoin.js

@@ -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);
 	}
 };
 

dev/Styles/Animations.less

@@ -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,23 +150,19 @@ html.rl-started-trigger.no-mobile #rl-content {
 		}
 	}
 
-	&.csstransitions .modal-open .popups .modal {
+	&.csstransitions .modal.fade {
-		-webkit-transform-origin: 50% 50%;
+		.transition(all 0.2s ease-out);
-		-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-transform: translateY(-20px);
-		.transition(0.1s all linear);
+		-moz-transform: translateY(-20px);
-		.scale(0.95);
+		transform: translateY(-20px);
-	}
 
-	.modal-open .popups .popup-active.modal {
+		&.in {
 			-webkit-transform: none;
 			-moz-transform: none;
-		-o-transform: none;
 			transform: none;
 		}
+	}
 
 	&.cssanimations .b-compose.loading .b-header-toolbar {
 		-webkit-background-size: 60px 60px;

dev/Styles/_BootstrapFix.less

@@ -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;
 }

rainloop/v/0.0.0/app/templates/Views/PopupsActivate.html

@@ -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>

rainloop/v/0.0.0/app/templates/Views/PopupsAddAccount.html

@@ -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>

rainloop/v/0.0.0/app/templates/Views/PopupsAdvancedSearch.html

@@ -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>

rainloop/v/0.0.0/app/templates/Views/PopupsAsk.html

@@ -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 />

rainloop/v/0.0.0/app/templates/Views/PopupsCompose.html

@@ -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 }">

rainloop/v/0.0.0/app/templates/Views/PopupsContacts.html

@@ -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">

rainloop/v/0.0.0/app/templates/Views/PopupsDomain.html

@@ -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>

rainloop/v/0.0.0/app/templates/Views/PopupsFolderClear.html

@@ -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>

rainloop/v/0.0.0/app/templates/Views/PopupsFolderCreate.html

@@ -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>

rainloop/v/0.0.0/app/templates/Views/PopupsFolderSystem.html

@@ -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>

rainloop/v/0.0.0/app/templates/Views/PopupsIdentity.html

@@ -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>

rainloop/v/0.0.0/app/templates/Views/PopupsLanguages.html

@@ -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>

rainloop/v/0.0.0/app/templates/Views/PopupsPlugin.html

@@ -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>

rainloop/v/0.0.0/static/css/app.css

@@ -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);
+  /*.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);
+  -webkit-transition: opacity 0.3s ease-out;
-  transition: 0.4s opacity cubic-bezier(0.250, 0.460, 0.450, 0.940);
+  -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);
+  /*.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);
+  -webkit-transition: all 0.3s ease-out;
-  transition: 0.4s all cubic-bezier(0.250, 0.460, 0.450, 0.940);
+  -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 {
+.rl-anim.csstransitions .modal.fade {
-  -webkit-transform-origin: 50% 50%;
+  -webkit-transition: all 0.2s ease-out;
-  -moz-transform-origin: 50% 50%;
+  -moz-transition: all 0.2s ease-out;
-  -o-transform-origin: 50% 50%;
+  -o-transition: all 0.2s ease-out;
-  transform-origin: 50% 50%;
+  transition: all 0.2s ease-out;
-  /*.transition(~"0.3s all cubic-bezier(0.250, 0.460, 0.450, 0.940)");*/
+  -webkit-transform: translateY(-20px);
-
+  -moz-transform: translateY(-20px);
-  -webkit-transition: 0.1s all linear;
+  transform: translateY(-20px);
-  -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 .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 {

rainloop/v/0.0.0/static/js/admin.js

@@ -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(ko.utils.unwrapObservable(fValueAccessor()) ? 'show' : 'hide');
-		$(oElement).modal(bValue ? 'show' : 'hide');
-
-		_.delay(function () {
-			$(oElement).toggleClass('popup-active', bValue);
-		}, 1);
 	}
 };
 
@@ -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);
 	}
 };
 

rainloop/v/0.0.0/static/js/app.js

@@ -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(ko.utils.unwrapObservable(fValueAccessor()) ? 'show' : 'hide');
-		$(oElement).modal(bValue ? 'show' : 'hide');
-
-		_.delay(function () {
-			$(oElement).toggleClass('popup-active', bValue);
-		}, 1);
 	}
 };
 
@@ -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);
 	}
 };