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

Creation page with mobile support

Browse Source
pull/1/head
yflory 7 years ago
parent e96d54e655
commit 1922dbfd75
5 changed files with 280 additions and 56 deletions
Show Stats Download Patch File Download Diff File

157
customize.dist/src/less2/include/creation.less
Unescape Escape View File

@ -1,35 +1,146 @@
@import (once) "./colortheme-all.less";
@import (once) "./tools.less";
.creation_main() {
#cp-creation {
position: fixed;
z-index: 10000000; // #loading
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
.tippy-popper {
z-index: 100000001 !important;
}
#cp-creation-container {
//position: fixed;
z-index: 100000000; // #loading * 10
//top: 0px;
//bottom: 0px;
//left: 0px;
//right: 0px;
background: @colortheme_loading-bg;
color: @colortheme_loading-color;
display: flex;
align-items: center;
width: 100%;
height: 100%;
overflow: auto;
@media screen and (max-height: 600px), screen and (max-width: 500px) {
align-items: baseline;
}
}
#cp-creation {
text-align: center;
font-size: 1.5em;
.cp-loading-container {
margin-top: 50vh;
transform: translateY(-50%);
font: @colortheme_app-font;
width: 100%;
& > div {
width: 60vw;
max-width: 100%;
margin: 40px auto;
text-align: left;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
h2, p {
width: 100%;
}
h2 {
display: flex;
justify-content: space-between;
.cp-creation-help {
display: none;
}
}
@media screen and (max-width: 500px) {
width: ~"calc(100% - 30px)";
}
@media screen and (max-height: 600px), screen and (max-width: 500px) {
h2 .cp-creation-help {
display: inline;
}
p {
display: none;
}
}
@media screen and (min-height: 601px) {
@media screen and (min-width: 501px) {
p {
display: block !important;
}
}
}
}
.cp-loading-cryptofist {
margin-left: auto;
margin-right: auto;
height: 300px;
margin-bottom: 2em;
@media screen and (max-height: @browser_media-short-screen) {
display: none;
.cp-creation-create{
button {
.tools_unselectable();
padding: 15px;
background: darken(@colortheme_loading-bg, 10%);
color: @colortheme_loading-color;
margin: 3px 10px;
border: none;
cursor: pointer;
&:hover {
background: darken(@colortheme_loading-bg, 5%);
}
}
}
input[type="radio"] {
display: none;
&:checked {
& + label {
font-weight: bold;
background-color: lighten(@colortheme_loading-bg, 20%);
cursor: default;
border: 1px solid #c1158e;
&:hover {
background-color: lighten(@colortheme_loading-bg, 20%);
}
}
}
}
.cp-loading-spinner-container {
position: relative;
height: 100px;
> div {
height: 100px;
input[type="radio"] + label {
.tools_unselectable();
padding: 15px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 200px;
height: 50px;
padding: 5px;
margin: 0 20px;
border: 1px solid @colortheme_loading-color;
cursor: pointer;
&:hover {
background-color: lighten(@colortheme_loading-bg, 10%);
}
}
.cp-creation-expire {
#cp-creation-expire-true {
display: none;
&:checked {
& + label {
height: 100px;
.cp-creation-expire-picker {
display: inline;
}
}
}
}
label[for="cp-creation-expire-true"] {
flex-wrap: wrap;
.cp-creation-expire-picker {
display: none;
}
input {
width: 70px;
}
select {
width: 100px;
}
input, select {
border: none;
height: 30px;
background: @colortheme_loading-bg;
color: @colortheme_loading-color;
border-radius: 3px;
}
}
}
}

19
customize.dist/translations/messages.js
Unescape Escape View File

@ -787,5 +787,24 @@ define(function () {
out.feedback_privacy = "We care about your privacy, and at the same time we want CryptPad to be very easy to use. We use this file to figure out which UI features matter to our users, by requesting it along with a parameter specifying which action was taken.";
out.feedback_optout = "If you would like to opt out, visit <a href='/settings/'>your user settings page</a>, where you'll find a checkbox to enable or disable user feedback";
// Creation page
out.creation_404 = "This pad not longer exists. Use the following form to create a new pad";
out.creation_ownedTitle = "Type of pad";
out.creation_ownedTrue = "Owned pad";
out.creation_ownedFalse = "Open pad";
out.creation_owned1 = "An <b>owned</b> pad is a pad that you can delete from the server whenever you want. Once it is deleted, no one else can access it, even if it is stored in their CryptDrive.";
out.creation_owned2 = "An <b>open</b> pad doesn't have any owner and thus, it can't be deleted from the server unless it has reached its expiration time.";
out.creation_expireTitle = "Life time";
out.creation_expireTrue = "Add a life time";
out.creation_expireFalse = "Unlimited";
out.creation_expireHours = "Hours";
out.creation_expireDays = "Days";
out.creation_expireMonths = "Months";
out.creation_expire1 = "By default, a pad stored by a registered users will never be removed from the server, unless it is requested by its owner.";
out.creation_expire2 = "If you prefer, you can set a life time to make sure the pad will be permanently deleted from the server and unavailable after the specified date.";
out.creation_createTitle = "Create a pad";
out.creation_createFromTemplate = "From template";
out.creation_createFromScratch = "From scratch";
return out;
});

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

@ -6,11 +6,12 @@ define([
'/common/common-language.js',
'/common/common-interface.js',
'/common/common-feedback.js',
'/common/hyperscript.js',
'/common/media-tag.js',
'/customize/messages.js',
'css!/common/tippy.css',
], function ($, Config, Util, Hash, Language, UI, Feedback, MediaTag, Messages) {
], function ($, Config, Util, Hash, Language, UI, Feedback, h, MediaTag, Messages) {
var UIElements = {};
// Configure MediaTags to use our local viewer
@ -1119,33 +1120,124 @@ define([
});
};
UIElements.getPadCreationScreen = function (common, Toolbar, cb) {
UIElements.getPadCreationScreen = function (common, cb) {
if (!common.isLoggedIn()) { return void cb(); }
var sframeChan = common.getSframeChannel();
var metadataMgr = common.getMetadataMgr();
var type = metadataMgr.getMetadataLazy().type;
var $body = $('body');
var $creation = $('<div>', { id: 'cp-creation' }).appendTo($body);
var $bar = $('<div>', {'class': 'cp-toolbar'}).appendTo($creation);
// Create a toolbar?
var displayed = ['useradmin', 'newpad', 'limit', 'pageTitle'];
var configTb = {
displayed: displayed,
hideDisplayName: true,
$container: $bar,
metadataMgr: metadataMgr,
sfCommon: common,
pageTitle: 'Pad creation BETA'
var $creationContainer = $('<div>', { id: 'cp-creation-container' }).appendTo($body);
var $creation = $('<div>', { id: 'cp-creation' }).appendTo($creationContainer);
var setHTML = function (e, html) {
e.innerHTML = html;
return e;
};
// Title
$creation.append(h('h1.cp-creation-title', Messages['button_new'+type]));
// Deleted pad warning
if (metadataMgr.getPrivateData().isDeleted) {
$creation.append(h('div.cp-creation-deleted', Messages.creation_404));
}
var createHelper = function (text) {
var q = h('span.cp-creation-help.fa.fa-question', {
title: text
});
return q;
};
var toolbar = Toolbar.create(configTb);
toolbar.$rightside.html('');
// Owned pads
var owned = h('div.cp-creation-owned', [
h('h2', [
Messages.creation_ownedTitle,
createHelper(Messages.creation_owned1 + '\n' + Messages.creation_owned2)
]),
setHTML(h('p'), Messages.creation_owned1 + '<br>' + Messages.creation_owned2),
h('input#cp-creation-owned-true.cp-creation-owned-value', {
type: 'radio',
name: 'cp-creation-owned',
value: 1,
checked: 'checked'
}),
h('label', { 'for': 'cp-creation-owned-true' }, Messages.creation_ownedTrue),
h('input#cp-creation-owned-false.cp-creation-owned-value', {
type: 'radio',
name: 'cp-creation-owned',
value: 0
}),
h('label', { 'for': 'cp-creation-owned-false' }, Messages.creation_ownedFalse)
]);
$creation.append(owned);
// Life time
var expire = h('div.cp-creation-expire', [
h('h2', [
Messages.creation_expireTitle,
createHelper(Messages.creation_expire1, Messages.creation_expire2)
]),
setHTML(h('p'), Messages.creation_expire1 + '<br>' + Messages.creation_expire2),
h('input#cp-creation-expire-false.cp-creation-expire-value', {
type: 'radio',
name: 'cp-creation-expire',
value: 0,
checked: 'checked'
}),
h('label', { 'for': 'cp-creation-expire-false' }, Messages.creation_expireFalse),
h('input#cp-creation-expire-true.cp-creation-expire-value', {
type: 'radio',
name: 'cp-creation-expire',
value: 1
}),
h('label', { 'for': 'cp-creation-expire-true' }, [
Messages.creation_expireTrue,
h('span.cp-creation-expire-picker', [
h('input#cp-creation-expire-val', {
type: "number",
min: 1,
max: 100,
value: 3
}),
h('select#cp-creation-expire-unit', [
h('option', { value: 'hour' }, Messages.creation_expireHours),
h('option', { value: 'day' }, Messages.creation_expireDays),
h('option', {
value: 'month',
selected: 'selected'
}, Messages.creation_expireMonths)
])
])
])
]);
$creation.append(expire);
// Create the pad
var create = function (template) {
// Type of pad
var ownedVal = parseInt($('input[name="cp-creation-owned"]:checked').val());
// Life time
var expireVal = 0;
if(parseInt($('input[name="cp-creation-expire"]:checked').val())) {
var unit = 0;
switch ($('#cp-creation-expire-unit').val()) {
case "hour" : unit = 3600; break;
case "day" : unit = 3600 * 24; break;
case "month": unit = 3600 * 24 * 30; break;
default: unit = 0;
}
expireVal = ($('#cp-creation-expire-val').val() || 0) * unit;
}
// TODO remove these lines
ownedVal = undefined;
expire = undefined;
sframeChan.query("Q_CREATE_PAD", {
owned: true, // TODO
expire: false, // TODO
owned: ownedVal,
expire: expireVal,
template: template
}, function () {
$creation.remove();
@ -1153,12 +1245,14 @@ define([
});
};
var $create = $(h('div.cp-creation-create', [
h('h2', Messages.creation_createTitle)
])).appendTo($creation);
// Pick a template?
var type = metadataMgr.getMetadataLazy().type;
sframeChan.query("Q_TEMPLATE_EXIST", type, function (err, data) {
if (!data) { return; }
var $templateButton = $('<button>').text('Create pad from template')
.appendTo($creation);
var $templateButton = $('<button>').text(Messages.creation_createFromTemplate)
.appendTo($create);
var pickerCfg = {
types: [type],
@ -1175,15 +1269,8 @@ define([
var fileDialogCfg = {
onSelect: function (data) {
if (data.type === type && first) {
//UI.addLoadingScreen({hideTips: true});
create(data.href);
first = false;
/*sframeChan.query('Q_TEMPLATE_USE', data.href, function () {
UI.removeLoadingScreen();
Feedback.send('TEMPLATE_USED');
});*/
//if (focus) { focus.focus(); }
//return;
}
}
};
@ -1191,8 +1278,10 @@ define([
});
});
var $button = $('<button>').text('Create pad').appendTo($creation);
$button.click();
var $button = $('<button>').text(Messages.creation_createFromScratch).appendTo($create);
$button.click(function () {
create();
});
};
return UIElements;

5
www/common/sframe-app-framework.js
Unescape Escape View File

@ -373,11 +373,12 @@ define([
nThen(function (waitFor) {
UI.addLoadingScreen();
SFCommon.create(waitFor(function (c) { common = c; }));
}).nThen(function (waitFor) {
common.getSframeChannel().onReady(waitFor());
}).nThen(function (waitFor) {
if (!AppConfig.displayCreationScreen) { return; }
if (common.getMetadataMgr().getPrivateData().isNewFile) {
console.log('newFile');
common.getPadCreationScreen(Toolbar, waitFor());
common.getPadCreationScreen(waitFor());
}
}).nThen(function (waitFor) {
cpNfInner = common.startRealtime({

6
www/common/sframe-common-outer.js
Unescape Escape View File

@ -186,7 +186,8 @@ define([
donateURL: Cryptpad.donateURL,
upgradeURL: Cryptpad.upgradeURL
},
isNewFile: isNewFile
isNewFile: isNewFile,
isDeleted: window.location.hash.length > 0
};
for (var k in additionalPriv) { metaObj.priv[k] = additionalPriv[k]; }
@ -620,6 +621,9 @@ define([
if (data.owned) {
//rtConfig.owners = [edPublic];
}
if (data.expire) {
//rtConfig.expire = data.expire;
}
if (data.template) {
// Pass rtConfig to useTemplate because Cryptput will create the file and

Write Preview
Loading…
Cancel
Save