New UI for the corner popup

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

@@ -4,9 +4,9 @@
     --LessLoader_require: LessLoader_currentFile();
 };
 & {
-    @corner-button-ok: #2c9b00;
-    @corner-button-cancel: #990000;
     @corner-link: #ffff7a;
+    @corner-blue: @colortheme_logo-1;
+    @corner-white: @colortheme_base;
 
     @keyframes appear {
         0% {
@@ -27,21 +27,23 @@
 
     .cp-corner-container {
         position: absolute;
-        right: 0;
+        right: 10px;
-        bottom: 0;
+        bottom: 10px;
-        width: 300px;
+        width: 350px;
-        height: 200px;
+        padding: 10px;
-        border-top-left-radius: 200px;
+        background-color: @corner-blue;
-        padding: 15px;
+        border: 1px solid @corner-blue;
-        text-align: right;
+        color: @corner-white;
-        background-color: @colortheme_logo-1;
-        color: @colortheme_base;
         z-index: 9999;
         transform-origin: bottom right;
         animation: appear 0.8s ease-in-out;
-        box-shadow: 0 0 10px 0 @colortheme_logo-1;
+        //box-shadow: 0 0 10px 0 @corner-blue;
-        //transform: scale(0.1);
+
-        //transform: scale(1);
+        &.cp-corner-alt {
+            background-color: @corner-white;
+            border: 1px solid @corner-blue;
+            color: @corner-blue;
+        }
 
         h1, h2, h3 {
             font-size: 1.5em;
@@ -64,7 +66,7 @@
             line-height: 15px;
             display: none;
             &:hover {
-                color: darken(@colortheme_base, 15%);
+                color: darken(@corner-white, 15%);
             }
         }
         .cp-corner-minimize {
@@ -86,46 +88,93 @@
             }
         }
         &.cp-corner-big {
-            width: 400px;
+            width: 500px;
-            height: 250px;
+        }
+
+        .cp-corner-dontshow {
+            cursor: pointer;
+            .fa {
+                margin-right: 0.3em;
+                font-size: 1.1em;
+            }
+            &:hover {
+                color: darken(@corner-white, 10%);
+            }
+        }
+        &.cp-corner-alt {
+            .cp-corner-dontshow {
+                &:hover {
+                    color: lighten(@corner-blue, 10%);
+                }
+            }
         }
 
         .cp-corner-actions {
             min-height: 30px;
-            margin: 15px auto;
+            margin: 10px auto;
-            display: inline-block;
+            display: block;
+            text-align: right;
         }
         .cp-corner-footer {
-            font-style: italic;
             font-size: 0.8em;
         }
         .cp-corner-footer, .cp-corner-text {
             a {
-                color: @corner-link;
+                color: @corner-white;
+                text-decoration: underline;
                 &:hover {
-                    color: darken(@corner-link, 20%);
+                    color: darken(@corner-white, 10%);
                 }
             }
         }
+        &.cp-corner-alt a {
+            color: @corner-blue;
+            &:hover {
+                color: lighten(@corner-blue, 10%);
+            }
+        }
 
         button {
-            border: 0px;
             padding: 5px;
-            color: @colortheme_base;
+            color: @corner-white;
-            margin-left: 5px;
+            margin-left: 10px;
             outline: none;
+            text-transform: uppercase;
+            border: 1px solid @corner-white;
+            .fa, .cptools {
+                margin-right: 0.3em;
+            }
             &.cp-corner-primary {
-                background-color: @corner-button-ok;
+                background-color: @corner-white;
-                font-weight: bold;
+                color: @corner-blue;
                 &:hover {
-                    background-color: lighten(@corner-button-ok, 10%);
+                    background-color: lighten(@corner-blue, 50%);
+                    border-color: lighten(@corner-blue, 50%);
                 }
             }
             &.cp-corner-cancel {
-                background-color: @corner-button-cancel;
+                background-color: @corner-blue;
-                margin-left: 10px;
+                color: @corner-white;
                 &:hover {
-                    background-color: lighten(@corner-button-cancel, 10%);
+                    background-color: darken(@corner-blue, 10%);
+                }
+            }
+        }
+        &.cp-corner-alt button {
+            border-color: @corner-blue;
+            &.cp-corner-primary {
+                background-color: @corner-blue;
+                color: @corner-white;
+                &:hover {
+                    background-color: darken(@corner-blue, 10%);
+                    border-color: darken(@corner-blue, 10%);
+                }
+            }
+            &.cp-corner-cancel {
+                background-color: @corner-white;
+                color: @corner-blue;
+                &:hover {
+                    background-color: lighten(@corner-blue, 50%);
                 }
             }
         }

www/common/common-interface.js

@@ -1050,39 +1050,36 @@ define([
         return radio;
     };
 
+    var corner = {
+        queue: [],
+        state: false
+    };
     UI.cornerPopup = function (text, actions, footer, opts) {
         opts = opts || {};
 
-        var minimize = h('div.cp-corner-minimize.fa.fa-window-minimize');
+        var dontShowAgain = h('div.cp-corner-dontshow', [
-        var maximize = h('div.cp-corner-maximize.fa.fa-window-maximize');
+            h('span.fa.fa-times'),
+            Messages.dontShowAgain || "Don't show again" // XXX
+        ]);
+
         var popup = h('div.cp-corner-container', [
-            minimize,
-            maximize,
-            h('div.cp-corner-filler', { style: "width:110px;" }),
-            h('div.cp-corner-filler', { style: "width:80px;" }),
-            h('div.cp-corner-filler', { style: "width:60px;" }),
-            h('div.cp-corner-filler', { style: "width:40px;" }),
-            h('div.cp-corner-filler', { style: "width:20px;" }),
             setHTML(h('div.cp-corner-text'), text),
             h('div.cp-corner-actions', actions),
-            setHTML(h('div.cp-corner-footer'), footer)
+            setHTML(h('div.cp-corner-footer'), footer),
+            opts.dontShowAgain ? dontShowAgain : undefined
         ]);
 
         var $popup = $(popup);
 
-        $(minimize).click(function () {
-            $popup.addClass('cp-minimized');
-        });
-        $(maximize).click(function () {
-            $popup.removeClass('cp-minimized');
-        });
-
         if (opts.hidden) {
             $popup.addClass('cp-minimized');
         }
         if (opts.big) {
             $popup.addClass('cp-corner-big');
         }
+        if (opts.alt) {
+            $popup.addClass('cp-corner-alt');
+        }
 
         var hide = function () {
             $popup.hide();
@@ -1092,9 +1089,28 @@ define([
         };
         var deletePopup = function () {
             $popup.remove();
+            if (!corner.queue.length) {
+                corner.state = false;
+                return;
+            }
+            setTimeout(function () {
+                $('body').append(corner.queue.pop());
+            }, 5000);
         };
 
-        $('body').append(popup);
+        $(dontShowAgain).click(function () {
+            deletePopup();
+            if (typeof(opts.dontShowAgain) === "function") {
+                opts.dontShowAgain();
+            }
+        });
+
+        if (corner.state) {
+            corner.queue.push(popup);
+        } else {
+            corner.state = true;
+            $('body').append(popup);
+        }
 
         return {
             popup: popup,

www/common/common-ui-elements.js

@@ -4097,52 +4097,68 @@ define([
     };
 
     var crowdfundingState = false;
-    UIElements.displayCrowdfunding = function (common) {
+    UIElements.displayCrowdfunding = function (common, force) {
         if (crowdfundingState) { return; }
-        if (AppConfig.disableCrowdfundingMessages) { return; }
         var priv = common.getMetadataMgr().getPrivateData();
+
+
+        var todo = function () {
+            crowdfundingState = true;
+            // Display the popup
+            var text = Messages.crowdfunding_popup_text;
+            var yes = h('button.cp-corner-primary', [
+                h('span.fa.fa-external-link'),
+                'OpenCollective'
+            ]);
+            var no = h('button.cp-corner-cancel', Messages.crowdfunding_popup_no);
+            var actions = h('div', [no, yes]);
+
+            var dontShowAgain = function () {
+                common.setAttribute(['general', 'crowdfunding'], false);
+                Feedback.send('CROWDFUNDING_NEVER');
+            };
+
+            var modal = UI.cornerPopup(text, actions, null, {
+                big: true,
+                alt: true,
+                dontShowAgain: dontShowAgain
+            });
+
+            $(yes).click(function () {
+                modal.delete();
+                common.openURL(priv.accounts.donateURL);
+                Feedback.send('CROWDFUNDING_YES');
+            });
+            $(modal.popup).find('a').click(function (e) {
+                e.stopPropagation();
+                e.preventDefault();
+                modal.delete();
+                common.openURL(priv.accounts.donateURL);
+                Feedback.send('CROWDFUNDING_LINK');
+            });
+            $(no).click(function () {
+                modal.delete();
+                Feedback.send('CROWDFUNDING_NO');
+            });
+        };
+
+        if (force) {
+            crowdfundingState = true;
+            return void todo();
+        }
+
+        if (AppConfig.disableCrowdfundingMessages) { return; }
         if (priv.plan) { return; }
 
         crowdfundingState = true;
-        setTimeout(function () {
+        common.getAttribute(['general', 'crowdfunding'], function (err, val) {
-            common.getAttribute(['general', 'crowdfunding'], function (err, val) {
+            if (err || val === false) { return; }
-                if (err || val === false) { return; }
+            common.getSframeChannel().query('Q_GET_PINNED_USAGE', null, function (err, obj) {
-                common.getSframeChannel().query('Q_GET_PINNED_USAGE', null, function (err, obj) {
+                var quotaMb = obj.quota / (1024 * 1024);
-                    var quotaMb = obj.quota / (1024 * 1024);
+                if (quotaMb < 10) { return; }
-                    if (quotaMb < 10) { return; }
+                todo();
-                    // Display the popup
-                    var text = Messages.crowdfunding_popup_text;
-                    var yes = h('button.cp-corner-primary', Messages.crowdfunding_popup_yes);
-                    var no = h('button.cp-corner-primary', Messages.crowdfunding_popup_no);
-                    var never = h('button.cp-corner-cancel', Messages.crowdfunding_popup_never);
-                    var actions = h('div', [yes, no, never]);
-
-                    var modal = UI.cornerPopup(text, actions, null, {big: true});
-
-                    $(yes).click(function () {
-                        modal.delete();
-                        common.openURL(priv.accounts.donateURL);
-                        Feedback.send('CROWDFUNDING_YES');
-                    });
-                    $(modal.popup).find('a').click(function (e) {
-                        e.stopPropagation();
-                        e.preventDefault();
-                        modal.delete();
-                        common.openURL(priv.accounts.donateURL);
-                        Feedback.send('CROWDFUNDING_LINK');
-                    });
-                    $(no).click(function () {
-                        modal.delete();
-                        Feedback.send('CROWDFUNDING_NO');
-                    });
-                    $(never).click(function () {
-                        modal.delete();
-                        common.setAttribute(['general', 'crowdfunding'], false);
-                        Feedback.send('CROWDFUNDING_NEVER');
-                    });
-                });
             });
-        }, 5000);
+        });
     };
 
     var storePopupState = false;
@@ -4164,7 +4180,7 @@ define([
 
         var hide = h('button.cp-corner-cancel', Messages.autostore_hide);
         var store = h('button.cp-corner-primary', Messages.autostore_store);
-        var actions = h('div', [store, hide]);
+        var actions = h('div', [hide, store]);
 
         var initialHide = data && data.autoStore && data.autoStore === -1;
         var modal = UI.cornerPopup(text, actions, footer, {hidden: initialHide});

www/common/sframe-common.js

@@ -83,6 +83,9 @@ define([
     };
 
     // UI
+    window.CryptPad_UI = UI;
+    window.CryptPad_UIElements = UIElements;
+    window.CryptPad_common = funcs;
     funcs.createUserAdminMenu = callWithCommon(UIElements.createUserAdminMenu);
     funcs.initFilePicker = callWithCommon(UIElements.initFilePicker);
     funcs.openFilePicker = callWithCommon(UIElements.openFilePicker);

www/pad/inner.js

@@ -736,12 +736,12 @@ define([
             });
 
             framework._.sfCommon.isPadStored(function (err, val) {
-                if (!val) { return; }
+                //if (!val) { return; }
                 var b64images = $inner.find('img[src^="data:image"]:not(.cke_reset)');
-                if (b64images.length && framework._.sfCommon.isLoggedIn()) {
+                if (true || b64images.length && framework._.sfCommon.isLoggedIn()) {
                     var no = h('button.cp-corner-cancel', Messages.cancel);
                     var yes = h('button.cp-corner-primary', Messages.ok);
-                    var actions = h('div', [yes, no]);
+                    var actions = h('div', [no, yes]);
                     var modal = UI.cornerPopup(Messages.pad_base64, actions, '', {big: true});
                     $(no).click(function () {
                         modal.delete();