From 4680de12eecb025ef7e81fc8b484a96456bd8804 Mon Sep 17 00:00:00 2001 From: yflory Date: Mon, 3 Feb 2020 15:14:52 +0100 Subject: [PATCH] New UI for the corner popup --- customize.dist/src/less2/include/corner.less | 111 +++++++++++++------ www/common/common-interface.js | 52 ++++++--- www/common/common-ui-elements.js | 98 +++++++++------- www/common/sframe-common.js | 3 + www/pad/inner.js | 6 +- 5 files changed, 177 insertions(+), 93 deletions(-) diff --git a/customize.dist/src/less2/include/corner.less b/customize.dist/src/less2/include/corner.less index 0740586aa..d267f3683 100644 --- a/customize.dist/src/less2/include/corner.less +++ b/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; - bottom: 0; - width: 300px; - height: 200px; - border-top-left-radius: 200px; - padding: 15px; - text-align: right; - background-color: @colortheme_logo-1; - color: @colortheme_base; + right: 10px; + bottom: 10px; + width: 350px; + padding: 10px; + background-color: @corner-blue; + border: 1px solid @corner-blue; + color: @corner-white; z-index: 9999; transform-origin: bottom right; animation: appear 0.8s ease-in-out; - box-shadow: 0 0 10px 0 @colortheme_logo-1; - //transform: scale(0.1); - //transform: scale(1); + //box-shadow: 0 0 10px 0 @corner-blue; + + &.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; - height: 250px; + width: 500px; + } + + .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; - display: inline-block; + margin: 10px auto; + 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; - margin-left: 5px; + color: @corner-white; + 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-white; + color: @corner-blue; + &:hover { + background-color: lighten(@corner-blue, 50%); + border-color: lighten(@corner-blue, 50%); + } + } + &.cp-corner-cancel { + background-color: @corner-blue; + color: @corner-white; + &:hover { + background-color: darken(@corner-blue, 10%); + } + } + } + &.cp-corner-alt button { + border-color: @corner-blue; &.cp-corner-primary { - background-color: @corner-button-ok; - font-weight: bold; + background-color: @corner-blue; + color: @corner-white; &:hover { - background-color: lighten(@corner-button-ok, 10%); + background-color: darken(@corner-blue, 10%); + border-color: darken(@corner-blue, 10%); } } &.cp-corner-cancel { - background-color: @corner-button-cancel; - margin-left: 10px; + background-color: @corner-white; + color: @corner-blue; &:hover { - background-color: lighten(@corner-button-cancel, 10%); + background-color: lighten(@corner-blue, 50%); } } } diff --git a/www/common/common-interface.js b/www/common/common-interface.js index 1d681d6e9..04f806d4f 100644 --- a/www/common/common-interface.js +++ b/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 maximize = h('div.cp-corner-maximize.fa.fa-window-maximize'); + var dontShowAgain = h('div.cp-corner-dontshow', [ + 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, diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js index b5e5aa90a..8bfa02e3a 100644 --- a/www/common/common-ui-elements.js +++ b/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) { - if (err || val === false) { return; } - common.getSframeChannel().query('Q_GET_PINNED_USAGE', null, function (err, obj) { - var quotaMb = obj.quota / (1024 * 1024); - if (quotaMb < 10) { return; } - // 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'); - }); - }); + common.getAttribute(['general', 'crowdfunding'], function (err, val) { + if (err || val === false) { return; } + common.getSframeChannel().query('Q_GET_PINNED_USAGE', null, function (err, obj) { + var quotaMb = obj.quota / (1024 * 1024); + if (quotaMb < 10) { return; } + todo(); }); - }, 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}); diff --git a/www/common/sframe-common.js b/www/common/sframe-common.js index 026021d1d..a651bfa31 100644 --- a/www/common/sframe-common.js +++ b/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); diff --git a/www/pad/inner.js b/www/pad/inner.js index 78f027182..52ae7325a 100644 --- a/www/pad/inner.js +++ b/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();