replace rumble with simple cute wiggling (#4628)

frappe/core/page/desktop/desktop.js

@@ -149,34 +149,29 @@ $.extend(frappe.desktop, {
 			// This hack is so bad, I should punch myself.
 			// Seriously, punch yourself.
 			const text      = $(object).find('.circle-text').html();
-			
+
 			return text;
 		}));
-		
+
 		const clearWiggle   = () => {
 			const $closes   = $cases.find('.module-remove');
 			$closes.hide();
 			$notis.show();
 
-			$icons.trigger('stopRumble');
+			$icons.removeClass('wiggle');
 
 			frappe.desktop.wiggling   = false;
 		};
 
-		// initiate wiggling.
-		$icons.jrumble({
-			speed: WIGGLE_ANTIDODE // seems neat enough to match the iOS way
-		});
-
 		frappe.desktop.wrapper.on('mousedown', '.app-icon', () => {
 			timer_id     = setTimeout(() => {
 				frappe.desktop.wiggling = true;
 				// hide all notifications.
 				$notis.hide();
-				
+
 				$cases.each((i) => {
 					const $case    = $($cases[i]);
-					const template = 
+					const template =
 					`
 						<div class="circle module-remove" style="background-color:#E0E0E0; color:#212121">
 							<div class="circle-text">
@@ -200,7 +195,7 @@ $.extend(frappe.desktop, {
 								method: 'frappe.desk.doctype.desktop_icon.desktop_icon.hide',
 								args: { name: name },
 								freeze: true,
-								callback: (response) => 
+								callback: (response) =>
 								{
 									if ( response.message ) {
 										location.reload();
@@ -209,7 +204,7 @@ $.extend(frappe.desktop, {
 							})
 
 							dialog.hide();
-							
+
 							clearWiggle();
 						});
 						// Hacks, Hacks and Hacks.
@@ -222,8 +217,9 @@ $.extend(frappe.desktop, {
 						dialog.show();
 					});
 				});
-			
-				$icons.trigger('startRumble');
+
+				$icons.addClass('wiggle');
+
 			}, DURATION_LONG_PRESS);
 		});
 		frappe.desktop.wrapper.on('mouseup mouseleave', '.app-icon', () => {

frappe/public/css/desktop.css

@@ -62,6 +62,44 @@ body[data-route="desktop"] .navbar-default {
   transition: 0.2s;
   -webkit-transition: 0.2s;
 }
+@-webkit-keyframes wiggle {
+  0% {
+    -webkit-transform: rotate(3deg);
+  }
+  50% {
+    -webkit-transform: rotate(-3deg);
+  }
+  100% {
+    -webkit-transform: rotate(3deg);
+  }
+}
+@-moz-keyframes wiggle {
+  0% {
+    -moz-transform: rotate(3deg);
+  }
+  50% {
+    -moz-transform: rotate(-3deg);
+  }
+  100% {
+    -moz-transform: rotate(3deg);
+  }
+}
+@keyframes wiggle {
+  0% {
+    transform: rotate(3deg);
+  }
+  50% {
+    transform: rotate(-3deg);
+  }
+  100% {
+    transform: rotate(3deg);
+  }
+}
+.wiggle {
+  -webkit-animation: wiggle 0.2s linear infinite;
+  -moz-animation: wiggle 0.2s linear infinite;
+  animation: wiggle 0.2s linear infinite;
+}
 .circle {
   position: absolute;
   right: 20px;

frappe/public/js/lib/jquery.jrumble.min.js

@@ -1,2 +0,0 @@
-/* jRumble v1.3 - http://jackrugile.com/jrumble - MIT License */
-(function(f){f.fn.jrumble=function(g){var a=f.extend({x:2,y:2,rotation:1,speed:15,opacity:false,opacityMin:0.5},g);return this.each(function(){var b=f(this),h=a.x*2,i=a.y*2,k=a.rotation*2,g=a.speed===0?1:a.speed,m=a.opacity,n=a.opacityMin,l,j,o=function(){var e=Math.floor(Math.random()*(h+1))-h/2,a=Math.floor(Math.random()*(i+1))-i/2,c=Math.floor(Math.random()*(k+1))-k/2,d=m?Math.random()+n:1,e=e===0&&h!==0?Math.random()<0.5?1:-1:e,a=a===0&&i!==0?Math.random()<0.5?1:-1:a;b.css("display")==="inline"&&(l=true,b.css("display","inline-block"));b.css({position:"relative",left:e+"px",top:a+"px","-ms-filter":"progid:DXImageTransform.Microsoft.Alpha(Opacity="+d*100+")",filter:"alpha(opacity="+d*100+")","-moz-opacity":d,"-khtml-opacity":d,opacity:d,"-webkit-transform":"rotate("+c+"deg)","-moz-transform":"rotate("+c+"deg)","-ms-transform":"rotate("+c+"deg)","-o-transform":"rotate("+c+"deg)",transform:"rotate("+c+"deg)"})},p={left:0,top:0,"-ms-filter":"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)",filter:"alpha(opacity=100)","-moz-opacity":1,"-khtml-opacity":1,opacity:1,"-webkit-transform":"rotate(0deg)","-moz-transform":"rotate(0deg)","-ms-transform":"rotate(0deg)","-o-transform":"rotate(0deg)",transform:"rotate(0deg)"};b.bind({startRumble:function(a){a.stopPropagation();clearInterval(j);j=setInterval(o,g)},stopRumble:function(a){a.stopPropagation();clearInterval(j);l&&b.css("display","inline");b.css(p)}})})}})(jQuery);

frappe/public/less/desktop.less

@@ -75,6 +75,30 @@ body[data-route=""] .navbar-default, body[data-route="desktop"] .navbar-default
 	-webkit-transition: 0.2s;
 }
 
+@-webkit-keyframes wiggle {
+    0% {-webkit-transform:rotate(3deg);}
+    50% {-webkit-transform:rotate(-3deg);}
+    100% {-webkit-transform:rotate(3deg);}
+}
+
+@-moz-keyframes wiggle {
+    0% {-moz-transform:rotate(3deg);}
+    50% {-moz-transform:rotate(-3deg);}
+    100% {-moz-transform:rotate(3deg);}
+}
+
+@keyframes wiggle {
+    0% {transform:rotate(3deg);}
+    50% {transform:rotate(-3deg);}
+    100% {transform:rotate(3deg);}
+}
+
+.wiggle {
+	-webkit-animation: wiggle 0.2s linear infinite;
+	-moz-animation: wiggle 0.2s linear infinite;
+	animation: wiggle 0.2s linear infinite;
+}
+
 .circle {
 	position: absolute;
 	right: 20px;