From 2a86db200118178205ab712d297fbc4ba2087cc0 Mon Sep 17 00:00:00 2001 From: yflory Date: Wed, 3 Oct 2018 17:25:04 +0200 Subject: [PATCH] New Features page --- customize.dist/pages.js | 215 ++++++------------ .../src/less2/pages/page-features.less | 49 +++- customize.dist/translations/messages.fr.js | 2 +- customize.dist/translations/messages.js | 42 +++- www/common/common-interface.js | 99 +++++++- www/common/cryptpad-common.js | 1 + 6 files changed, 244 insertions(+), 164 deletions(-) diff --git a/customize.dist/pages.js b/customize.dist/pages.js index e6f5a9712..af3c8ac9b 100644 --- a/customize.dist/pages.js +++ b/customize.dist/pages.js @@ -2,17 +2,15 @@ define([ '/api/config', '/common/hyperscript.js', '/common/common-language.js', + '/common/common-interface.js', '/customize/messages.js', 'jquery', '/customize/application_config.js', -], function (Config, h, Language, Msg, $, AppConfig) { +], function (Config, h, Language, UI, Msg, $, AppConfig) { var Pages = {}; var urlArgs = Config.requireConf.urlArgs; - var setHTML = Pages.setHTML = function (e, html) { - e.innerHTML = html; - return e; - }; + var setHTML = UI.setHTML; var languageSelector = function () { var options = []; @@ -267,7 +265,16 @@ define([ ]); }; + var origin = encodeURIComponent(window.location.hostname); + var accounts = { + donateURL: 'https://accounts.cryptpad.fr/#/donate?on=' + origin, + upgradeURL: 'https://accounts.cryptpad.fr/#/?on=' + origin, + }; Pages['/features.html'] = function () { + Msg.features_f_apps_note = AppConfig.availablePadTypes.map(function (app) { + if (AppConfig.registeredOnlyTypes.indexOf(app) !== -1) { return; } + return Msg.type[app]; + }).filter(function (x) { return x; }).join(', '); return h('div#cp-main', [ infopageTopbar(), h('div.container-fluid.cp_cont_features',[ @@ -277,74 +284,77 @@ define([ ]), h('div.container',[ h('div.row.cp-container.cp-features-web.justify-content-sm-center',[ - h('div.col-12.col-sm-6.cp-anon-user',[ + h('div.col-12.col-sm-4.cp-anon-user',[ h('div.card',[ h('div.card-body',[ h('h3.text-center',Msg.features_anon) ]), - h('ul.list-group.list-group-flush', [ - h('li.list-group-item.text-center', Msg.features_f_pad , [ - h('a.voted', {href: '#', 'data-toggle' : 'tooltip', 'data-placement': 'bottom', title : Msg.features_f_pad_notes}, h('i.fa.fa-question')) - ]), - h('li.list-group-item.text-center', Msg.features_f_history, [ - h('a.voted', {href: '#', 'data-toggle' : 'tooltip', 'data-placement': 'bottom', title : Msg.features_f_history_notes }, h('i.fa.fa-question') ) - ]), - h('li.list-group-item.text-center', Msg.features_f_export, [ - h('a.voted', {href: '#', 'data-toggle' : 'tooltip', 'data-placement': 'bottom', title : Msg.features_f_export_notes }, h('i.fa.fa-question')) - ]), - h('li.list-group-item.text-center', Msg.features_f_todo), - h('li.list-group-item.text-center', Msg.features_f_viewFiles), - h('li.list-group-item.text-center', Msg.features_f_drive), - h('li.list-group-item.text-center', Msg.features_f_storage_anon), - ]), - ]), + h('ul.list-group.list-group-flush', + ['apps', 'core', 'file0', 'cryptdrive0', 'storage0'].map(function (f) { + return h('li.list-group-item', [ + h('div.cp-check'), + h('div.cp-content', [ + h('div.cp-feature', Msg['features_f_' + f]), + h('div.cp-note', Msg['features_f_' + f + '_note']) + ]) + ]); + }) + ), + ]), ]), - h('div.col-12.col-sm-6.cp-regis-user',[ + h('div.col-12.col-sm-4.cp-regis-user',[ h('div.card',[ h('div.card-body',[ h('h3.text-center',Msg.features_registered) ]), h('ul.list-group.list-group-flush', [ - h('li.list-group-item.text-center', Msg.features_f_pad, [ - h('a.voted', {href: '#', 'data-toggle' : 'tooltip', 'data-placement': 'bottom', title : Msg.features_f_pad_notes}, h('i.fa.fa-question')) - ]), - h('li.list-group-item.text-center', Msg.features_f_history, [ - h('a.voted', {href: '#', 'data-toggle' : 'tooltip', 'data-placement': 'bottom', title : Msg.features_f_history_notes }, h('i.fa.fa-question')) - ]), - h('li.list-group-item.text-center', Msg.features_f_export, [ - h('a.voted', {href: '#', 'data-toggle' : 'tooltip', 'data-placement': 'bottom', title : Msg.features_f_export_notes }, h('i.fa.fa-question')) - ]), - h('li.list-group-item.text-center', Msg.features_f_todo), - h('li.list-group-item.text-center', Msg.features_f_viewFiles), - h('li.list-group-item.text-center', Msg.features_f_drive_full), - h('li.list-group-item.text-center', Msg.features_f_uploadFiles), - h('li.list-group-item.text-center', Msg.features_f_embedFiles), - h('li.list-group-item.text-center', Msg.features_f_multiple, [ - h('a.voted', {href: '#', 'data-toggle' : 'tooltip', 'data-placement': 'bottom', title : Msg.features_f_multiple_notes }, h('i.fa.fa-question')) - ]), - h('li.list-group-item.text-center', Msg.features_f_logoutEverywhere), - h('li.list-group-item.text-center', Msg.features_f_templates, [ - h('a.voted', {href: '#', 'data-toggle' : 'tooltip', 'data-placement': 'bottom', title : Msg.features_f_templates_notes }, h('i.fa.fa-question')) - ]), - h('li.list-group-item.text-center', Msg.features_f_profile, [ - h('a.voted', {href: '#', 'data-toggle' : 'tooltip', 'data-placement': 'bottom', title : Msg.features_f_profile_notes }, h('i.fa.fa-question')) - ]), - h('li.list-group-item.text-center', Msg.features_f_tags, [ - h('a.voted', {href: '#', 'data-toggle' : 'tooltip', 'data-placement': 'bottom', title : Msg.features_f_tags_notes }, h('i.fa.fa-question')) - ]), - h('li.list-group-item.text-center', Msg.features_f_contacts, [ - h('a.voted', {href: '#', 'data-toggle' : 'tooltip', 'data-placement': 'bottom', title : Msg.features_f_contacts_notes }, h('i.fa.fa-question')) - ]), - h('li.list-group-item.text-center', setHTML(h('div'), Msg.features_f_storage_registered)), + ['anon', 'social', 'file1', 'cryptdrive1', 'devices', 'storage1'].map(function (f) { + return h('li.list-group-item', [ + h('div.cp-check'), + h('div.cp-content', [ + h('div.cp-feature', Msg['features_f_' + f]), + h('div.cp-note', Msg['features_f_' + f + '_note']) + ]) + ]); + }), ]), h('div.card-body',[ - h('div#cp-features-register', [ + h('div.cp-features-register#cp-features-register', [ h('a', { href: '/register/' }, h('button.cp-features-register-button', Msg.features_f_register)) ]), + h('div.cp-note', Msg.features_f_register_note) + ]), + ]), + ]), + h('div.col-12.col-sm-4.cp-anon-user',[ + h('div.card',[ + h('div.card-body',[ + h('h3.text-center',Msg.features_premium) + ]), + h('ul.list-group.list-group-flush', [ + ['reg', 'storage2', 'support', 'supporter'/*, 'project'*/].map(function (f) { // XXX + return h('li.list-group-item', [ + h('div.cp-check'), + h('div.cp-content', [ + h('div.cp-feature', Msg['features_f_' + f]), + h('div.cp-note', Msg['features_f_' + f + '_note']) + ]) + ]); + }), + ]), + h('div.card-body',[ + h('div.cp-features-register#cp-features-subscribe', [ + h('a', { + href: accounts.upgradeURL, + target: '_blank', + rel: 'noopener noreferrer' + }, h('button.cp-features-register-button', Msg.features_f_subscribe)) + ]), + h('div.cp-note', Msg.features_f_subscribe_note) ]), - ]), + ]), ]), ]), ]), @@ -658,93 +668,6 @@ define([ ]; }; - Pages.createCheckbox = function (id, labelTxt, checked, opts) { - opts = opts|| {}; - // Input properties - var inputOpts = { - type: 'checkbox', - id: id - }; - if (checked) { inputOpts.checked = 'checked'; } - $.extend(inputOpts, opts.input || {}); - - // Label properties - var labelOpts = {}; - $.extend(labelOpts, opts.label || {}); - if (labelOpts.class) { labelOpts.class += ' cp-checkmark'; } - - // Mark properties - var markOpts = { tabindex: 0 }; - $.extend(markOpts, opts.mark || {}); - - var input = h('input', inputOpts); - var mark = h('span.cp-checkmark-mark', markOpts); - var label = h('span.cp-checkmark-label', labelTxt); - - $(mark).keydown(function (e) { - if (e.which === 32) { - e.stopPropagation(); - e.preventDefault(); - $(input).prop('checked', !$(input).is(':checked')); - $(input).change(); - } - }); - - $(input).change(function () { $(mark).focus(); }); - - return h('label.cp-checkmark', labelOpts, [ - input, - mark, - label - ]); - }; - - Pages.createRadio = function (name, id, labelTxt, checked, opts) { - opts = opts|| {}; - // Input properties - var inputOpts = { - type: 'radio', - id: id, - name: name - }; - if (checked) { inputOpts.checked = 'checked'; } - $.extend(inputOpts, opts.input || {}); - - // Label properties - var labelOpts = {}; - $.extend(labelOpts, opts.label || {}); - if (labelOpts.class) { labelOpts.class += ' cp-checkmark'; } - - // Mark properties - var markOpts = { tabindex: 0 }; - $.extend(markOpts, opts.mark || {}); - - var input = h('input', inputOpts); - var mark = h('span.cp-radio-mark', markOpts); - var label = h('span.cp-checkmark-label', labelTxt); - - $(mark).keydown(function (e) { - if (e.which === 32) { - e.stopPropagation(); - e.preventDefault(); - $(input).prop('checked', !$(input).is(':checked')); - $(input).change(); - } - }); - - $(input).change(function () { $(mark).focus(); }); - - var radio = h('label', labelOpts, [ - input, - mark, - label - ]); - - $(radio).addClass('cp-radio'); - - return radio; - }; - Pages['/user/'] = Pages['/user/index.html'] = function () { return h('div#container'); }; @@ -788,10 +711,10 @@ define([ placeholder: Msg.login_confirm, }), h('div.checkbox-container', [ - Pages.createCheckbox('import-recent', Msg.register_importRecent, true) + UI.createCheckbox('import-recent', Msg.register_importRecent, true) ]), h('div.checkbox-container', [ - $(Pages.createCheckbox('accept-terms')).find('.cp-checkmark-label').append(Msg.register_acceptTerms).parent()[0] + $(UI.createCheckbox('accept-terms')).find('.cp-checkmark-label').append(Msg.register_acceptTerms).parent()[0] ]), h('button#register.btn.cp-login-register', Msg.login_register) ]) @@ -832,7 +755,7 @@ define([ placeholder: Msg.login_password, }), h('div.checkbox-container', [ - Pages.createCheckbox('import-recent', Msg.register_importRecent), + UI.createCheckbox('import-recent', Msg.register_importRecent), ]), h('div.extra', [ h('button.login.first.btn', Msg.login_login) diff --git a/customize.dist/src/less2/pages/page-features.less b/customize.dist/src/less2/pages/page-features.less index adaf174c7..e5e68e7d7 100644 --- a/customize.dist/src/less2/pages/page-features.less +++ b/customize.dist/src/less2/pages/page-features.less @@ -19,7 +19,7 @@ color: #fff; } } - #cp-features-register { + .cp-features-register { text-align: center; padding: 20px; } @@ -39,24 +39,51 @@ .card { box-shadow: 0 5px 15px rgba(69, 145, 196, 0.3); border: none; + .card-body { + display: flex; + justify-content: center; + align-items: center; + flex-flow: column; + h3 { + margin: 0; + } + } } h3 { color: #fff; } .list-group { li { - &:before { - content: "\f00c"; - font-family: "FontAwesome"; - font-size: 14px; - color: @cryptpad_color_blue; - padding-right: 10px; - } + display: flex; + padding-left: 0; + padding-right: 5px; } div { - display: inline; + &.cp-check { + width: 30px; + display: flex; + align-items: center; + justify-content: center; + &:before { + content: "\f00c"; + font-family: "FontAwesome"; + font-size: 14px; + color: @cryptpad_color_blue; + } + } + &.cp-content { + flex: 1; + display: flex; + flex-flow: column; + } + &.cp-feature { + font-weight: bold; + } } } + div.cp-note { + font-size: 0.8em; + } a.voted { opacity: 0.6; margin-left: 15px; @@ -70,7 +97,9 @@ } .cp-anon-user { .card-body { - background-color: @cryptpad_color_blue; + &:first-of-type { + background-color: @cryptpad_color_blue; + } } } .cp-regis-user { diff --git a/customize.dist/translations/messages.fr.js b/customize.dist/translations/messages.fr.js index 7bc35f7e4..8da5c2e2b 100644 --- a/customize.dist/translations/messages.fr.js +++ b/customize.dist/translations/messages.fr.js @@ -789,7 +789,7 @@ define(function () { out.features_f_history_notes = "Voir et restaurer n'importe quelle version d'un pad"; out.features_f_todo = "Créer une TODO-list"; out.features_f_drive = "Fonctionnalités CryptDrive limitées"; - out.features_f_drive_full = "Fonctionnalités CryptDrive limitées"; + out.features_f_drive_full = "Fonctionnalités CryptDrive complètes"; out.features_f_export = "Export/Import"; out.features_f_export_notes = "Pour les pads et CryptDrive"; out.features_f_viewFiles = "Voir des fichiers"; diff --git a/customize.dist/translations/messages.js b/customize.dist/translations/messages.js index 8a9efc9ec..6e8ec30cb 100644 --- a/customize.dist/translations/messages.js +++ b/customize.dist/translations/messages.js @@ -793,7 +793,48 @@ define(function () { out.features_feature = "Feature"; out.features_anon = "Anonymous user"; out.features_registered = "Registered user"; + out.features_premium = "Premium user"; out.features_notes = "Notes"; + // XXX + out.features_f_apps = "Access to the main applications"; + out.features_f_core = "Common features for the applications"; + out.features_f_core_note = "Edit, Import & Export, History, Userlist, Chat"; + out.features_f_file0 = "Open files"; + out.features_f_file0_note = "View and download files shared by other users"; + out.features_f_cryptdrive0 = "Limited access to CryptDrive"; + out.features_f_cryptdrive0_note = "Ability to store visited pads in your browser to be able to open them later"; + out.features_f_storage0 = "Limited storage time"; + out.features_f_storage0_note = "Created pads risk deletion after 3 months of inactivity"; + + out.features_f_anon = "All anonymous users features"; + out.features_f_anon_note = "With better usability and more power over your pads"; + out.features_f_cryptdrive1 = "Complete CryptDrive functionalities"; + out.features_f_cryptdrive1_note = "Folders, shared folders, templates, tags"; + out.features_f_devices = "Your pads on all your devices"; + out.features_f_devices_note = "Access your CryptDrive everywhere with your user account"; + out.features_f_social = "Social applications"; + out.features_f_social_note = "Create a profile, use an avatar, chat with contacts"; + out.features_f_file1 = "Upload and share files"; + out.features_f_file1_note = "Share files with your friends or embed them in your pads"; + out.features_f_storage1 = "Permanent storage (50MB)"; + out.features_f_storage1_note = "Pads stored in your CryptDrive are never deleted for inactivity"; + out.features_f_register = "Register for free"; + out.features_f_register_note = "No email or personal information required"; + + out.features_f_reg = "All registered users features"; + out.features_f_reg_note = "And help CryptPad's developement"; + out.features_f_storage2 = "Extra storage space"; + out.features_f_storage2_note = "From 5GB to 50GB depending on the selected plan"; + out.features_f_support = "Faster support"; + out.features_f_support_note = "Professional email support with the Team plan"; + out.features_f_supporter = "Become a privacy supporter"; + out.features_f_supporter_note = "Help us show that privacy-enhancing softwares should be the norm"; + out.features_f_project = "Keep the project alive"; + out.features_f_project_note = "Help us keep this open-source project running by funding its hosting and developement"; + out.features_f_subscribe = "Subscribe to premium"; + out.features_f_subscribe_note = "You need to be logged in to CryptPad first"; + // End XXX + out.features_f_pad = "Create/edit/view a pad"; out.features_f_pad_notes = "Rich Text, Code, Slide, Poll and Whiteboard applications"; out.features_f_history = "History"; @@ -822,7 +863,6 @@ define(function () { out.features_f_storage = "Storage"; out.features_f_storage_anon = "Pads are deleted after 3 months"; out.features_f_storage_registered = "Free: 50MB
Premium: 5GB/20GB/50GB"; - out.features_f_register = "Register for free"; // faq.html diff --git a/www/common/common-interface.js b/www/common/common-interface.js index ac6c2895a..acee76dac 100644 --- a/www/common/common-interface.js +++ b/www/common/common-interface.js @@ -16,7 +16,6 @@ define([ '/customize/application_config.js', '/bower_components/alertifyjs/dist/js/alertify.js', '/common/tippy/tippy.min.js', - '/customize/pages.js', '/common/hyperscript.js', '/customize/loading.js', '/common/test.js', @@ -26,7 +25,7 @@ define([ 'css!/common/tippy/tippy.css', 'css!/common/jquery-ui/jquery-ui.min.css' ], function ($, Messages, Util, Hash, Notifier, AppConfig, - Alertify, Tippy, Pages, h, Loading, Test) { + Alertify, Tippy, h, Loading, Test) { var UI = {}; /* @@ -37,6 +36,11 @@ define([ // set notification timeout Alertify._$$alertify.delay = AppConfig.notificationTimeout || 5000; + var setHTML = UI.setHTML = function (e, html) { + e.innerHTML = html; + return e; + }; + var findCancelButton = UI.findCancelButton = function (root) { if (root) { return $(root).find('button.cancel').last(); @@ -875,9 +879,92 @@ define([ }); }; - UI.createCheckbox = Pages.createCheckbox; + UI.createCheckbox = function (id, labelTxt, checked, opts) { + opts = opts|| {}; + // Input properties + var inputOpts = { + type: 'checkbox', + id: id + }; + if (checked) { inputOpts.checked = 'checked'; } + $.extend(inputOpts, opts.input || {}); + + // Label properties + var labelOpts = {}; + $.extend(labelOpts, opts.label || {}); + if (labelOpts.class) { labelOpts.class += ' cp-checkmark'; } + + // Mark properties + var markOpts = { tabindex: 0 }; + $.extend(markOpts, opts.mark || {}); + + var input = h('input', inputOpts); + var mark = h('span.cp-checkmark-mark', markOpts); + var label = h('span.cp-checkmark-label', labelTxt); + + $(mark).keydown(function (e) { + if (e.which === 32) { + e.stopPropagation(); + e.preventDefault(); + $(input).prop('checked', !$(input).is(':checked')); + $(input).change(); + } + }); + + $(input).change(function () { $(mark).focus(); }); + + return h('label.cp-checkmark', labelOpts, [ + input, + mark, + label + ]); + }; + + UI.createRadio = function (name, id, labelTxt, checked, opts) { + opts = opts|| {}; + // Input properties + var inputOpts = { + type: 'radio', + id: id, + name: name + }; + if (checked) { inputOpts.checked = 'checked'; } + $.extend(inputOpts, opts.input || {}); + + // Label properties + var labelOpts = {}; + $.extend(labelOpts, opts.label || {}); + if (labelOpts.class) { labelOpts.class += ' cp-checkmark'; } + + // Mark properties + var markOpts = { tabindex: 0 }; + $.extend(markOpts, opts.mark || {}); + + var input = h('input', inputOpts); + var mark = h('span.cp-radio-mark', markOpts); + var label = h('span.cp-checkmark-label', labelTxt); + + $(mark).keydown(function (e) { + if (e.which === 32) { + e.stopPropagation(); + e.preventDefault(); + $(input).prop('checked', !$(input).is(':checked')); + $(input).change(); + } + }); + + $(input).change(function () { $(mark).focus(); }); - UI.createRadio = Pages.createRadio; + var radio = h('label', labelOpts, [ + input, + mark, + label + ]); + + $(radio).addClass('cp-radio'); + + return radio; + }; UI.cornerPopup = function (text, actions, footer, opts) { opts = opts || {}; @@ -892,9 +979,9 @@ define([ h('div.cp-corner-filler', { style: "width:60px;" }), h('div.cp-corner-filler', { style: "width:40px;" }), h('div.cp-corner-filler', { style: "width:20px;" }), - Pages.setHTML(h('div.cp-corner-text'), text), + setHTML(h('div.cp-corner-text'), text), h('div.cp-corner-actions', actions), - Pages.setHTML(h('div.cp-corner-footer'), footer) + setHTML(h('div.cp-corner-footer'), footer) ]); $(minimize).click(function () { diff --git a/www/common/cryptpad-common.js b/www/common/cryptpad-common.js index 0c62084db..6ccbf2a81 100644 --- a/www/common/cryptpad-common.js +++ b/www/common/cryptpad-common.js @@ -38,6 +38,7 @@ define([ } }; + // Upgrade and donate URLs duplicated in pages.js var origin = encodeURIComponent(window.location.hostname); var common = window.Cryptpad = { Messages: Messages,