New UI for the corner popup
yflory
parent
cfa4c6e7bb
commit
4680de12ee
|
|
@ -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-button-ok;
|
||||
font-weight: bold;
|
||||
background-color: @corner-white;
|
||||
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;
|
||||
margin-left: 10px;
|
||||
background-color: @corner-blue;
|
||||
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%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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});
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
|
|
|||
Loading…
Reference in New Issue