Merge pull request #1050 from christopheschwyzer/issue-1050

improve clickConfirm - remove tooltip

client-vendor/after-body/jquery.clickDecorators/decorators/20-confirmed.js

@@ -4,20 +4,14 @@
 (function($) {
 
 	$.clickDecorators.confirmed = {
-		settings: {
-			message: 'Please Confirm'
-		},
-
 		before: function(event) {
 			var $this = $(this);
 
 			var activateButton = function() {
 				$this.addClass('confirmClick');
-				$this.attr('title', $.clickDecorators.confirmed.settings.message).tooltip({trigger: 'manual'}).tooltip('show');
 
 				var deactivateButton = function() {
 					$this.removeClass('confirmClick');
-					$this.removeAttr('title').tooltip('hide');
 					$this.removeData('clickConfirmed.deactivate');
 					clearTimeout(deactivateTimeout);
 					$(document).off('click.clickConfirmed', documentClickHandler);
@@ -27,7 +21,7 @@
 
 				var deactivateTimeout = setTimeout(function() {
 					deactivateButton();
-				}, 5000);
+				}, 3000);
 
 				var documentClickHandler = function(e) {
 					if (!$this.length || e.target !== $this[0] && !$.contains($this[0], e.target)) {

client-vendor/after-body/jquery.clickDecorators/decorators/20-confirmed.less

@@ -0,0 +1,11 @@
+[data-click-confirmed]:not(.confirmClick) {
+  .confirmClick-state-active {
+    display: none;
+  }
+}
+
+[data-click-confirmed].confirmClick {
+  .confirmClick-state-inactive {
+    display: none;
+  }
+}

layout/default/Component/Example/tabs/buttons.tpl

@@ -16,4 +16,4 @@
 <hr />
 <h3>Confirmation</h3>
 {button_link class="confirmAction" label="With Confirmation" data=['click-confirmed' => true]}
-{button_link class="confirmAction warning" label="With Warning" data=['click-confirmed' => true]}
+{button_link icon='delete' iconConfirm='delete-confirm' class="confirmAction warning" label="With Warning" data=['click-confirmed' => true]}

layout/default/css/animation.less

@@ -1,13 +1,20 @@
 @keyframes highlightErrorField {
-	40% { outline-color: @colorError; }
+  0% { outline-color: transparent; }
+  40% { outline-color: @colorError; background-color: lighten(@colorError, 57); }
+  100% { outline-color: transparent; }
 }
-@-webkit-keyframes highlightErrorField {
-	40% { outline-color: @colorError;
-		background-color: lighten(@colorError, 57);}
-}
-@-moz-keyframes highlightErrorField {
-	40% { outline-color: @colorError; }
-}
-@-ms-keyframes highlightErrorField {
-	40% { outline-color: @colorError; }
+
+@keyframes clickConfirm {
+  0% { .transform(scale(1)); }
+  4% { .transform(scale(1.3)); }
+  7% { .transform(scale(1)); }
+  45% { .transform(scale(.95)); }
+  50% { .transform(scale(1)); opacity: 1; }
+  60% { .transform(scale(.95)); opacity: .5; }
+  70% { .transform(scale(1)); opacity: 1; }
+  80% { .transform(scale(.95)); opacity: 0.5; }
+  90% { .transform(scale(1)); opacity: 1; }
+  91% { .transform(scale(1.05)); }
+  94% { .transform(scale(.7)); opacity: 1; }
+  100% { .transform(scale(1.4)); opacity: .1; }
 }