From 1922dbfd757bd3ed156e09b349f462b49f36f086 Mon Sep 17 00:00:00 2001 From: yflory Date: Mon, 11 Dec 2017 12:19:44 +0100 Subject: [PATCH] Creation page with mobile support --- .../src/less2/include/creation.less | 157 +++++++++++++++--- customize.dist/translations/messages.js | 19 +++ www/common/common-ui-elements.js | 149 +++++++++++++---- www/common/sframe-app-framework.js | 5 +- www/common/sframe-common-outer.js | 6 +- 5 files changed, 280 insertions(+), 56 deletions(-) diff --git a/customize.dist/src/less2/include/creation.less b/customize.dist/src/less2/include/creation.less index d82c47adf..4bc5f2d80 100644 --- a/customize.dist/src/less2/include/creation.less +++ b/customize.dist/src/less2/include/creation.less @@ -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; + } } } } diff --git a/customize.dist/translations/messages.js b/customize.dist/translations/messages.js index 90ce1871e..d39d09326 100644 --- a/customize.dist/translations/messages.js +++ b/customize.dist/translations/messages.js @@ -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 your user settings page, 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 owned 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 open 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; }); diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js index e9487859f..cfdb221a8 100644 --- a/www/common/common-ui-elements.js +++ b/www/common/common-ui-elements.js @@ -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 = $('
', { id: 'cp-creation' }).appendTo($body); - var $bar = $('
', {'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 = $('
', { id: 'cp-creation-container' }).appendTo($body); + var $creation = $('
', { 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 + '
' + 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 + '
' + 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 = $('