New UI tool: confirm button

customize.dist/src/less2/include/buttons.less

@@ -48,6 +48,22 @@
         }
     }
 
+    div.cp-button-confirm {
+        display: inline-block;
+        button {
+            margin: 0;
+        }
+        .cp-button-timer {
+            height: 3px;
+            & > div {
+                height: 100%;
+                background-color: @colortheme_alertify-primary;
+                &.danger, &.btn-danger, &.danger-alt, &.btn-danger-alt {
+                    background-color: @colortheme_alertify-red;
+                }
+            }
+        }
+    }
 
     button:not(.pure-button):not(.md-button):not(.mdl-button) {
 

www/common/common-interface.js

@@ -593,6 +593,59 @@ define([
             }
         });
     };
+    UI.confirmButton = function (originalBtn, config, _cb) {
+        config = config || {};
+        cb = Util.once(Util.mkAsync(_cb));
+
+        var classes = 'btn ' + (config.classes || 'btn-primary');
+
+        var button = h('button', {
+            "class": classes,
+            title: config.title || ''
+        }, Messages.areYouSure || "Are you sure?"); // XXX
+        var $button = $(button);
+
+        var div = h('div', {
+            "class": config.classes || ''
+        });
+        var timer = h('div.cp-button-timer', div);
+
+        var content = h('div.cp-button-confirm', [
+            button,
+            timer
+        ]);
+
+        var to;
+
+        var done = function (res) {
+            cb(res);
+            clearTimeout(to);
+            $(content).remove();
+            $(originalBtn).show();
+        };
+
+        $button.click(function () {
+            done(true);
+        });
+
+        var TIMEOUT = 3000;
+        var INTERVAL = 10;
+        var i = 1;
+
+        var todo = function () {
+            var p = 100 * ((TIMEOUT - (i * INTERVAL)) / TIMEOUT);
+            if (i++ * INTERVAL >= TIMEOUT) {
+                done(false);
+                return;
+            }
+            $(div).css('width', p+'%');
+            to = setTimeout(todo, INTERVAL);
+        };
+        to = setTimeout(todo, INTERVAL);
+
+        $(originalBtn).hide().after(content);
+    };
+
 
     UI.proposal = function (content, cb) {
         var buttons = [{

www/settings/inner.js

@@ -1208,7 +1208,7 @@ define([
         var spinner = UI.makeSpinner();
         var button = h('button.btn.btn-danger-alt', {
             disabled: 'disabled'
-        }, Messages.trimHistory_button || 'test'); // XXX
+        }, Messages.trimHistory_button || 'delete history... xxx'); // XXX
         var currentSize = h('p', $(spinner.spinner).clone()[0]);
         var content = h('div', [
             currentSize,
@@ -1238,7 +1238,10 @@ define([
         }).nThen(function () {
             $(currentSize).html(Messages._getKey('trimHistory_currentSize', [size]));
             $button.click(function () {
-                UI.confirm(Messages.trimHistory_confirm, function (yes) {
+                //UI.confirm(Messages.trimHistory_confirm, function (yes) {
+                UI.confirmButton(button, {
+                    classes: 'btn-danger'
+                }, function (yes) {
                     if (!yes) { return; }
 
                     $button.remove();