From dcf5719eaff193acb34543cfa73702ed90acae2e Mon Sep 17 00:00:00 2001 From: ansuz Date: Sun, 23 Jul 2017 14:27:47 +0200 Subject: [PATCH] handle most of the boilerplate stuff --- customize.dist/pages.js | 8 +++ customize.dist/template.js | 5 +- www/todo/index.html | 30 ++++++++ www/todo/inner.html | 13 ++++ www/todo/inner.js | 15 ++++ www/todo/main.js | 83 ++++++++++++++++++++++ www/todo/todo.less | 136 +++++++++++++++++++++++++++++++++++++ 7 files changed, 289 insertions(+), 1 deletion(-) create mode 100644 www/todo/index.html create mode 100644 www/todo/inner.html create mode 100644 www/todo/inner.js create mode 100644 www/todo/main.js create mode 100644 www/todo/todo.less diff --git a/customize.dist/pages.js b/customize.dist/pages.js index 6fac30280..b7b94940c 100644 --- a/customize.dist/pages.js +++ b/customize.dist/pages.js @@ -517,5 +517,13 @@ define([ ]; }; + Pages['/todo/'] = Pages['/todo/index.html'] = function () { + return [ + h('div#toolbar'), + h('div#container'), + loadingScreen() + ]; + }; + return Pages; }); diff --git a/customize.dist/template.js b/customize.dist/template.js index 7fc7172ce..879a0b9b7 100644 --- a/customize.dist/template.js +++ b/customize.dist/template.js @@ -12,7 +12,7 @@ $(function () { var Messages = Cryptpad.Messages; var $body = $('body'); var isMainApp = function () { - return /^\/(pad|code|slide|poll|whiteboard|file|media|contacts|drive|settings|profile)\/$/.test(location.pathname); + return /^\/(pad|code|slide|poll|whiteboard|file|media|contacts|drive|settings|profile|todo)\/$/.test(location.pathname); }; var rightLink = function (ref, loc, txt) { @@ -166,6 +166,9 @@ $(function () { } else if (/^\/profile\//.test(pathname)) { $('body').append(h('body', Pages[pathname]()).innerHTML); require([ '/profile/main.js', ], ready); + } else if (/^\/todo\//.test(pathname)) { + $('body').append(h('body', Pages[pathname]()).innerHTML); + require([ '/todo/main.js', ], ready); } }); diff --git a/www/todo/index.html b/www/todo/index.html new file mode 100644 index 000000000..a76879a6d --- /dev/null +++ b/www/todo/index.html @@ -0,0 +1,30 @@ + + + + CryptPad + + + + + + + + diff --git a/www/todo/inner.html b/www/todo/inner.html new file mode 100644 index 000000000..5ac482ab4 --- /dev/null +++ b/www/todo/inner.html @@ -0,0 +1,13 @@ + + + + + + + + + +
+ + + diff --git a/www/todo/inner.js b/www/todo/inner.js new file mode 100644 index 000000000..c30bdcde1 --- /dev/null +++ b/www/todo/inner.js @@ -0,0 +1,15 @@ +define([ + 'jquery', + //'css!/bower_components/components-font-awesome/css/font-awesome.min.css', + //'css!/bower_components/bootstrap/dist/css/bootstrap.min.css', + //'less!/file/todo.less', + //'less!/customize/src/less/cryptpad.less', + 'less!/customize/src/less/toolbar.less', +], function ($) { + $('.loading-hidden').removeClass('loading-hidden'); + // dirty hack to get rid the flash of the lock background + /* + setTimeout(function () { + $('#app').addClass('ready'); + }, 100);*/ +}); diff --git a/www/todo/main.js b/www/todo/main.js new file mode 100644 index 000000000..701840ad7 --- /dev/null +++ b/www/todo/main.js @@ -0,0 +1,83 @@ +define([ + 'jquery', + '/bower_components/chainpad-crypto/crypto.js', + '/bower_components/chainpad-netflux/chainpad-netflux.js', + '/common/toolbar2.js', + '/common/cryptpad-common.js', + '/common/visible.js', + '/common/notify.js', + + //'/common/media-tag.js', + //'/bower_components/file-saver/FileSaver.min.js', + + //'css!/bower_components/components-font-awesome/css/font-awesome.min.css', + 'less!/customize/src/less/cryptpad.less', +], function ($, Crypto, realtimeInput, Toolbar, Cryptpad /*, Visible, Notify*/) { + var Messages = Cryptpad.Messages; + //var saveAs = window.saveAs; + //var Nacl = window.nacl; + + var APP = window.APP = {}; + + $(function () { + + var andThen = function () { + var ifrw = $('#pad-iframe')[0].contentWindow; + var $iframe = $('#pad-iframe').contents(); + var $body = $iframe.find('body'); + + $body.on('dragover', function (e) { e.preventDefault(); }); + $body.on('drop', function (e) { e.preventDefault(); }); + + Cryptpad.addLoadingScreen(); + + var Title; + + var uploadMode = false; + + var $bar = $iframe.find('.toolbar-container'); + + var secret; + var hexFileName; + if (window.location.hash) { + secret = Cryptpad.getSecrets(); + if (!secret.keys) { throw new Error("You need a hash"); } // TODO + hexFileName = Cryptpad.base64ToHex(secret.channel); + } else { + uploadMode = true; + } + + Title = Cryptpad.createTitle({}, function(){}, Cryptpad); + + var displayed = ['useradmin', 'newpad', 'limit', 'upgrade']; + if (secret && hexFileName) { + displayed.push('fileshare'); + } + + var configTb = { + displayed: displayed, + ifrw: ifrw, + common: Cryptpad, + //hideDisplayName: true, + $container: $bar, + }; + + if (uploadMode) { + displayed.push('pageTitle'); + configTb.pageTitle = Messages.upload_title; + } + + var toolbar = APP.toolbar = Toolbar.create(configTb); + toolbar.$rightside.html(''); // Remove the drawer if we don't use it to hide the toolbar + + // we're in upload mode + Cryptpad.removeLoadingScreen(); + }; + + Cryptpad.ready(function () { + andThen(); + //Cryptpad.reportAppUsage(); + }); + + }); +}); diff --git a/www/todo/todo.less b/www/todo/todo.less new file mode 100644 index 000000000..1e4db2cd1 --- /dev/null +++ b/www/todo/todo.less @@ -0,0 +1,136 @@ +@import "/customize/src/less/variables.less"; +@import "/customize/src/less/mixins.less"; + +@button-border: 2px; + +html, body { + margin: 0px; + height: 100%; +} + +#toolbar { + display: flex; // We need this to remove a 3px border at the bottom of the toolbar +} + +body { + display: flex; + flex-flow: column; +} +#app { + flex: 1; + display: flex; + justify-content: center; + align-items: center; +} + +#app.ready { + background: url('/customize/bg3.jpg') no-repeat center center; + background-size: cover; + background-position: center; +} +.cryptpad-toolbar { + padding: 0px; + display: inline-block; +} +#file, #dl { + display: block; + height: 100%; + width: 100%; + border: @button-border solid black; +} + +.inputfile { + width: 0.1px; + height: 0.1px; + opacity: 0; + overflow: hidden; + position: absolute; + z-index: -1; +} + +media-tag { + img { + max-width: 100%; + max-height: ~"calc(100vh - 96px)"; + } +} + +#upload-form, #download-form { + padding: 0px; + margin: 0px; + + position: relative; + width: 50vh; + height: 50vh; + display: block; + margin: 50px auto; + max-width: 80vw; + label { + line-height: ~"calc(50vh - 20px)"; + text-align: center; + position: relative; + padding: 10px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + height: 50vh; + box-sizing: border-box; + } +} +#download-form { + label { + display: flex; + justify-content: center; + align-items: center; + white-space: normal; + word-wrap: break-word; + span { + width: 50vh; + max-width: 80vw; + text-align: center; + line-height: 1.5em; + } + } +} +.hovering { + background-color: rgba(255, 0, 115, 0.5) !important; +} + +.block { + display: block; +} +.hidden { + display: none; +} +.inputfile + label { + //border: 2px solid black; + //background-color: rgba(50, 50, 50, .10); + display: block; +} + +.inputfile:focus + label, +.inputfile + label:hover { + //background-color: rgba(50, 50, 50, 0.30); +} + +#progress { + position: absolute; + top: 0; + left: 0; + height: 100%; + + + transition: width 200ms; + width: 0%; + max-width: 100%; + max-height: 100%; + background-color: rgba(255, 0, 115, 0.75); + z-index: 10000; + display: block; +} + +body #uploadStatusContainer { + background-color: rgba(255, 255, 255, 0.9); + color: black; + opacity: 0.9; +}