Attachment 9844 Details for Bug 48660 – Use CSS transitions

[patch] Use CSS transitions

errata.patch (text/plain), 4.86 KB, created by Dirk Wiesenthal on 2019-02-15 14:05:36 CET

(hide)

Description:

Filename:

MIME Type:

Creator: Dirk Wiesenthal

Created: 2019-02-15 14:05:36 CET

Size: 4.86 KB

patch

obsolete

>diff --git a/management/univention-management-console-module-udm/umc/js/udm.css b/management/univention-management-console-module-udm/umc/js/udm.css
>index 474f3a580d..17a8b8540c 100644
>--- a/management/univention-management-console-module-udm/umc/js/udm.css
>+++ b/management/univention-management-console-module-udm/umc/js/udm.css
>@@ -23,6 +23,42 @@
> /* umcSearchFormChangeViewButton END */
> 
> 
>+.umc .wizardPasswordBox {
>+	max-height: 80px;
>+}
>+
>+.umc .transitionUp {
>+	position: relative;
>+	top: 80px;
>+}
>+
>+.umc .transitionDown {
>+	position: relative;
>+	top: -80px;
>+}
>+
>+.umc .goAway {
>+	visibility: hidden;
>+	opacity: 0;
>+	height: 0;
>+}
>+
>+.umc .goAway.fadeIn {
>+	visibility: visible;
>+	opacity: 1;
>+	transition-property: opacity;
>+	transition-duration: 1s;
>+	transition-timing-function: cubic-bezier(0,0,0.8,1);
>+	height: 100%;
>+}
>+
>+.umc .transitionUp.transitionDo, .umc .transitionDown.transitionDo {
>+	transition-duration: 0.7s;
>+	transition-property: top;
>+	transition-timing-function: cubic-bezier(0.1,0,0,1);
>+	top: 0;
>+}
>+
> .umc .umcUDMUsersModule .umcImage {
> 	background: none;
> 	padding: 0;
>diff --git a/management/univention-management-console-module-udm/umc/js/udm/wizards/users/user.js b/management/univention-management-console-module-udm/umc/js/udm/wizards/users/user.js
>index 9ea39a7baf..0bd5604632 100644
>--- a/management/univention-management-console-module-udm/umc/js/udm/wizards/users/user.js
>+++ b/management/univention-management-console-module-udm/umc/js/udm/wizards/users/user.js
>@@ -55,6 +55,19 @@ define([
> 			}
> 		],
> 
>+		startup: function() {
>+			this.inherited(arguments);
>+			var widget = this.getWidget('page1', 'PasswordRecoveryEmail');
>+			var node = widget.domNode.parentNode.parentNode.parentNode;
>+			node.classList.add('goAway');
>+			node.classList.add('wizardPasswordBox');
>+			widget.set('visible', true);
>+
>+			widget = this.getWidget('page1', 'password');
>+			node = widget.domNode.parentNode.parentNode.parentNode;
>+			node.classList.add('wizardPasswordBox');
>+		},
>+
> 		postMixInProperties: function() {
> 			if (array.some(this.properties, function(prop) { return prop.id === 'PasswordRecoveryEmail'; })) {
> 				this.widgetPages[1].widgets.splice(1, 0, '_invite');
>@@ -78,17 +91,41 @@ define([
> 					sizeClass: 'One',
> 					label: _('Invite user via e-mail. Password will be set by the user'),
> 					required: false,
>-					onChange: lang.hitch(this, function(value) {
>-						var pwdChange = this.getWidget('page1', 'pwdChangeNextLogin');
>-						pwdChange.set('value', value);
>-						pwdChange.set('disabled', value);
>-						var pwdCheck = this.getWidget('page1', 'overridePWLength');
>-						pwdCheck.set('value', value);
>-						pwdCheck.set('disabled', value);
>-						this.getWidget('page1', 'password').set('visible', !value);
>-						this.getWidget('page1', 'password').set('required', !value);
>-						this.getWidget('page1', 'PasswordRecoveryEmail').set('visible', value);
>-						this.getWidget('page1', 'PasswordRecoveryEmail').set('required', value);
>+					onChange: lang.hitch(this, function(value, formWidgets) {
>+						var containerNode = formWidgets._invite.domNode.parentNode.parentNode.parentNode;
>+						if (value) {
>+							formWidgets.password.domNode.parentNode.parentNode.parentNode.classList.remove('fadeIn');
>+							formWidgets.password.domNode.parentNode.parentNode.parentNode.classList.add('goAway');
>+							formWidgets.PasswordRecoveryEmail.domNode.parentNode.parentNode.parentNode.classList.add('fadeIn');
>+							containerNode.classList.remove('transitionDown');
>+							containerNode.classList.add('transitionUp');
>+							setTimeout(function() {
>+								containerNode.classList.add('transitionDo');
>+								setTimeout(function() {
>+									containerNode.classList.remove('transitionUp');
>+									containerNode.classList.remove('transitionDo');
>+								}, 700);
>+							}, 100);
>+						} else {
>+							formWidgets.PasswordRecoveryEmail.domNode.parentNode.parentNode.parentNode.classList.remove('fadeIn');
>+							formWidgets.PasswordRecoveryEmail.domNode.parentNode.parentNode.parentNode.classList.add('goAway');
>+							formWidgets.password.domNode.parentNode.parentNode.parentNode.classList.add('fadeIn');
>+							containerNode.classList.remove('transitionUp');
>+							containerNode.classList.add('transitionDown');
>+							setTimeout(function() {
>+								containerNode.classList.add('transitionDo');
>+								setTimeout(function() {
>+									containerNode.classList.remove('transitionDown');
>+									containerNode.classList.remove('transitionDo');
>+								}, 700);
>+							}, 100);
>+						}
>+						formWidgets.pwdChangeNextLogin.set('value', value);
>+						formWidgets.pwdChangeNextLogin.set('disabled', value);
>+						formWidgets.overridePWLength.set('value', value);
>+						formWidgets.overridePWLength.set('disabled', value);
>+						formWidgets.password.set('required', !value);
>+						formWidgets.PasswordRecoveryEmail.set('required', value);
> 					}),
> 					type: 'CheckBox'
> 				};

Actions: View | Diff

Attachments on bug 48660: 9844