infra
/
cryptpad
2
1
Fork 0
Code Issues Pull Requests Projects Releases 1 Activity

New UI for the corner popup

Browse Source
pull/1/head
yflory 5 years ago
parent cfa4c6e7bb
commit 4680de12ee
5 changed files with 177 additions and 93 deletions
Show Stats Download Patch File Download Diff File

111
customize.dist/src/less2/include/corner.less
Unescape Escape View File

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

50
www/common/common-interface.js
Unescape Escape View File

@ -1050,39 +1050,36 @@ define([
return radio; return radio;
}; };
var corner = {
queue: [],
state: false
};
UI.cornerPopup = function (text, actions, footer, opts) { UI.cornerPopup = function (text, actions, footer, opts) {
opts = 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', [ 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), setHTML(h('div.cp-corner-text'), text),
h('div.cp-corner-actions', actions), 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); var $popup = $(popup);
$(minimize).click(function () {
$popup.addClass('cp-minimized');
});
$(maximize).click(function () {
$popup.removeClass('cp-minimized');
});
if (opts.hidden) { if (opts.hidden) {
$popup.addClass('cp-minimized'); $popup.addClass('cp-minimized');
} }
if (opts.big) { if (opts.big) {
$popup.addClass('cp-corner-big'); $popup.addClass('cp-corner-big');
} }
if (opts.alt) {
$popup.addClass('cp-corner-alt');
}
var hide = function () { var hide = function () {
$popup.hide(); $popup.hide();
@ -1092,9 +1089,28 @@ define([
}; };
var deletePopup = function () { var deletePopup = function () {
$popup.remove(); $popup.remove();
if (!corner.queue.length) {
corner.state = false;
return;
}
setTimeout(function () {
$('body').append(corner.queue.pop());
}, 5000);
}; };
$(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); $('body').append(popup);
}
return { return {
popup: popup, popup: popup,

58
www/common/common-ui-elements.js
Unescape Escape View File

@ -4097,27 +4097,32 @@ define([
}; };
var crowdfundingState = false; var crowdfundingState = false;
UIElements.displayCrowdfunding = function (common) { UIElements.displayCrowdfunding = function (common, force) {
if (crowdfundingState) { return; } if (crowdfundingState) { return; }
if (AppConfig.disableCrowdfundingMessages) { return; }
var priv = common.getMetadataMgr().getPrivateData(); var priv = common.getMetadataMgr().getPrivateData();
if (priv.plan) { return; }
var todo = function () {
crowdfundingState = true; 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 // Display the popup
var text = Messages.crowdfunding_popup_text; var text = Messages.crowdfunding_popup_text;
var yes = h('button.cp-corner-primary', Messages.crowdfunding_popup_yes); var yes = h('button.cp-corner-primary', [
var no = h('button.cp-corner-primary', Messages.crowdfunding_popup_no); h('span.fa.fa-external-link'),
var never = h('button.cp-corner-cancel', Messages.crowdfunding_popup_never); 'OpenCollective'
var actions = h('div', [yes, no, never]); ]);
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}); var modal = UI.cornerPopup(text, actions, null, {
big: true,
alt: true,
dontShowAgain: dontShowAgain
});
$(yes).click(function () { $(yes).click(function () {
modal.delete(); modal.delete();
@ -4135,14 +4140,25 @@ define([
modal.delete(); modal.delete();
Feedback.send('CROWDFUNDING_NO'); Feedback.send('CROWDFUNDING_NO');
}); });
$(never).click(function () { };
modal.delete();
common.setAttribute(['general', 'crowdfunding'], false); if (force) {
Feedback.send('CROWDFUNDING_NEVER'); crowdfundingState = true;
}); return void todo();
}
if (AppConfig.disableCrowdfundingMessages) { return; }
if (priv.plan) { return; }
crowdfundingState = true;
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; var storePopupState = false;
@ -4164,7 +4180,7 @@ define([
var hide = h('button.cp-corner-cancel', Messages.autostore_hide); var hide = h('button.cp-corner-cancel', Messages.autostore_hide);
var store = h('button.cp-corner-primary', Messages.autostore_store); 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 initialHide = data && data.autoStore && data.autoStore === -1;
var modal = UI.cornerPopup(text, actions, footer, {hidden: initialHide}); var modal = UI.cornerPopup(text, actions, footer, {hidden: initialHide});

3
www/common/sframe-common.js
Unescape Escape View File

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

6
www/pad/inner.js
Unescape Escape View File

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

Write Preview
Loading…
Cancel
Save