From ab64bf9e595c50c7f3fe95d06db70408e06bc8ee Mon Sep 17 00:00:00 2001 From: yflory Date: Wed, 13 Sep 2017 16:19:26 +0200 Subject: [PATCH] Use less2 for the loading screen --- customize.dist/pages.js | 8 +- customize.dist/src/less/cryptpad.less | 2 +- customize.dist/src/less/loading.less | 60 -- .../src/less2/include/colortheme.less | 3 + .../src/less2/pages/page-login.less | 3 +- .../src/less2/pages/page-register.less | 1 + customize.dist/template.js | 2 +- www/common/common-interface.js | 14 +- www/common/loading.js | 11 +- www/common/sframe-common-interface.js | 17 +- www/common/sframe-common.js | 14 +- www/common/toolbar3.js | 2 +- www/file/inner.js | 525 +----------------- www/login/main.js | 1 - www/register/main.js | 1 - 15 files changed, 47 insertions(+), 617 deletions(-) delete mode 100644 customize.dist/src/less/loading.less diff --git a/customize.dist/pages.js b/customize.dist/pages.js index 2716641a4..6cebaec88 100644 --- a/customize.dist/pages.js +++ b/customize.dist/pages.js @@ -438,12 +438,12 @@ define([ }; var loadingScreen = Pages.loadingScreen = function () { - return h('div#loading', - h('div.loadingContainer', [ - h('img.cryptofist', { + return h('div#cp-loading', + h('div.cp-loading-container', [ + h('img.cp-loading-cryptofist', { src: '/customize/cryptpad-new-logo-colors-logoonly.png?' + urlArgs }), - h('div.spinnerContainer', + h('div.cp-loading-spinner-container', h('span.fa.fa-circle-o-notch.fa-spin.fa-4x.fa-fw')), h('p'), ]) diff --git a/customize.dist/src/less/cryptpad.less b/customize.dist/src/less/cryptpad.less index ba763aea0..752bfbd90 100644 --- a/customize.dist/src/less/cryptpad.less +++ b/customize.dist/src/less/cryptpad.less @@ -5,8 +5,8 @@ @import "../less2/include/colortheme.less"; @import "../less2/include/modal.less"; @import "../less2/include/font.less"; +@import "../less2/loading.less"; @import "./bar.less"; -@import "./loading.less"; @import "./dropdown.less"; @import "./topbar.less"; @import "./footer.less"; diff --git a/customize.dist/src/less/loading.less b/customize.dist/src/less/loading.less deleted file mode 100644 index 555b02ad8..000000000 --- a/customize.dist/src/less/loading.less +++ /dev/null @@ -1,60 +0,0 @@ -@import "./variables.less"; -@import (once) "../less2/include/colortheme.less"; - -#loading { - position: fixed; - z-index: 9999999; - top: 0px; - bottom: 0px; - left: 0px; - right: 0px; - background: @bg-loading; - color: @color-loading; - text-align: center; - font-size: 1.5em; - .loadingContainer { - margin-top: 50vh; - transform: translateY(-50%); - } - .cryptofist { - margin-left: auto; - margin-right: auto; - height: 300px; - margin-bottom: 2em; - @media screen and (max-height: @media-short-screen) { - display: none; - } - } - .spinnerContainer { - position: relative; - height: 100px; - > div { - height: 100px; - } - } -} -#loadingTip { - position: fixed; - z-index: 99999; - top: 80%; - left: 0; - right: 0; - text-align: center; - - transition: opacity 750ms; - transition-delay: 3000ms; - @media screen and (max-height: @media-medium-screen) { - display: none; - } - span { - background-color: @bg-loading; - color: @color-loading; - text-align: center; - font-size: 1.5em; - opacity: 0.7; - font-family: @colortheme_font; - padding: 15px; - max-width: 60%; - display: inline-block; - } -} diff --git a/customize.dist/src/less2/include/colortheme.less b/customize.dist/src/less2/include/colortheme.less index f8613a62a..53d97649a 100644 --- a/customize.dist/src/less2/include/colortheme.less +++ b/customize.dist/src/less2/include/colortheme.less @@ -21,6 +21,9 @@ @colortheme_modal-link-visited: lighten(@colortheme_modal-link, 10%); @colortheme_modal-dim: rgba(0, 0, 0, 0.4); +@colortheme_loading-bg: #222; +@colortheme_loading-color: @colortheme_old-fore; + @colortheme_modal-input: #111; @colortheme_alertify-red: #E55236; diff --git a/customize.dist/src/less2/pages/page-login.less b/customize.dist/src/less2/pages/page-login.less index 050064348..3e5e4e77f 100644 --- a/customize.dist/src/less2/pages/page-login.less +++ b/customize.dist/src/less2/pages/page-login.less @@ -1,6 +1,7 @@ @import (once) "../include/infopages.less"; @import (once) "../include/colortheme.less"; @import (once) "../include/alertify.less"; +@import (once) "../loading.less"; .infopages_main(); .infopages_topbar(); @@ -75,4 +76,4 @@ .cp-container { padding-top: 3em; min-height: 66vh; -} \ No newline at end of file +} diff --git a/customize.dist/src/less2/pages/page-register.less b/customize.dist/src/less2/pages/page-register.less index 5aa74a36a..af2e06d51 100644 --- a/customize.dist/src/less2/pages/page-register.less +++ b/customize.dist/src/less2/pages/page-register.less @@ -1,6 +1,7 @@ @import (once) "../include/infopages.less"; @import (once) "../include/colortheme.less"; @import (once) "../include/alertify.less"; +@import (once) "../loading.less"; .infopages_main(); .infopages_topbar(); diff --git a/customize.dist/template.js b/customize.dist/template.js index 062be4308..d8f07da1a 100644 --- a/customize.dist/template.js +++ b/customize.dist/template.js @@ -38,7 +38,7 @@ $(function () { }; require([ - 'less!/customize/src/less/loading.less' + 'less!/customize/src/less2/loading.less' ], function () { if (/whiteboard/.test(pathname)) { $('body').html(h('body', Pages[pathname]()).innerHTML); diff --git a/www/common/common-interface.js b/www/common/common-interface.js index 467cad4ab..dac651dce 100644 --- a/www/common/common-interface.js +++ b/www/common/common-interface.js @@ -372,7 +372,7 @@ define([ }; }; - var LOADING = 'loading'; + var LOADING = 'cp-loading'; var getRandomTip = function () { if (!Messages.tips || !Object.keys(Messages.tips).length) { return ''; } @@ -391,21 +391,21 @@ define([ if (loadingText) { $('#' + LOADING).find('p').text(loadingText); } - $container = $loading.find('.loadingContainer'); + $container = $loading.find('.cp-loading-container'); } else { $loading = $(Pages.loadingScreen()); - $container = $loading.find('.loadingContainer'); + $container = $loading.find('.cp-loading-container'); if (hideLogo) { $loading.find('img').hide(); } else { $loading.find('img').show(); } - var $spinner = $loading.find('.spinnerContainer'); + var $spinner = $loading.find('.cp-loading-spinner-container'); $spinner.show(); $('body').append($loading); } if (Messages.tips && !hideTips) { - var $loadingTip = $('
', {'id': 'loadingTip'}); + var $loadingTip = $('
', {'id': 'cp-loading-tip'}); $('', {'class': 'tips'}).text(getRandomTip()).appendTo($loadingTip); $loadingTip.css({ 'bottom': $('body').height()/2 - $container.height()/2 + 20 + 'px' @@ -415,7 +415,7 @@ define([ }; UI.removeLoadingScreen = function (cb) { $('#' + LOADING).fadeOut(750, cb); - var $tip = $('#loadingTip').css('top', '') + var $tip = $('#cp-loading-tip').css('top', '') // loading.less sets transition-delay: $wait-time // and transition: opacity $fadeout-time .css({ @@ -429,7 +429,7 @@ define([ }; UI.errorLoadingScreen = function (error, transparent) { if (!$('#' + LOADING).is(':visible')) { UI.addLoadingScreen({hideTips: true}); } - $('.spinnerContainer').hide(); + $('.cp-loading-spinner-container').hide(); if (transparent) { $('#' + LOADING).css('opacity', 0.8); } $('#' + LOADING).find('p').html(error || Messages.error); }; diff --git a/www/common/loading.js b/www/common/loading.js index d9c3b8df9..e2829f17a 100644 --- a/www/common/loading.js +++ b/www/common/loading.js @@ -1,13 +1,14 @@ define([ - 'less!/customize/src/less/loading.less' + 'less!/bower_components/components-font-awesome/css/font-awesome.min.css', + 'less!/customize/src/less2/loading.less' ], function () { var urlArgs = window.location.href.replace(/^.*\?([^\?]*)$/, function (all, x) { return x; }); var elem = document.createElement('div'); - elem.setAttribute('id', 'loading'); + elem.setAttribute('id', 'cp-loading'); elem.innerHTML = [ - '
', - '', - '
', + '
', + '', + '', '

', diff --git a/www/common/sframe-common-interface.js b/www/common/sframe-common-interface.js index 6588dbaf5..6c228e3cb 100644 --- a/www/common/sframe-common-interface.js +++ b/www/common/sframe-common-interface.js @@ -200,20 +200,7 @@ define([ return button; }; - - UI.getFileSize = function (Common, href, cb) { - var channelId = Cryptpad.hrefToHexChannelId(href); - Common.sendAnonRpcMsg("GET_FILE_SIZE", channelId, function (data) { - if (!data) { return void cb("No response"); } - if (data.error) { return void cb(data.error); } - if (data.response && data.response.length && typeof(data.response[0]) === 'number') { - return void cb(void 0, data.response[0]); - } else { - cb('INVALID_RESPONSE'); - } - }); - }; - + // Avatars UI.displayAvatar = function (Common, $container, href, name, cb) { var MutationObserver = window.MutationObserver; var displayDefault = function () { @@ -229,7 +216,7 @@ define([ var cryptKey = secret.keys && secret.keys.fileKeyStr; var hexFileName = Cryptpad.base64ToHex(secret.channel); var src = Cryptpad.getBlobPathFromHex(hexFileName); - UI.getFileSize(Common, href, function (e, data) { + Common.getFileSize(href, function (e, data) { if (e) { displayDefault(); return void console.error(e); diff --git a/www/common/sframe-common.js b/www/common/sframe-common.js index 5fd99d3d5..35e2f3577 100644 --- a/www/common/sframe-common.js +++ b/www/common/sframe-common.js @@ -77,7 +77,6 @@ define([ funcs.openTemplatePicker = callWithCommon(UI.openTemplatePicker); funcs.displayAvatar = callWithCommon(UI.displayAvatar); funcs.createButton = callWithCommon(UI.createButton); - funcs.getFileSize = callWithCommon(UI.getFileSize); // History funcs.getHistory = callWithCommon(History.create); @@ -106,6 +105,19 @@ define([ } return; }; + funcs.getFileSize = function (href, cb) { + var channelId = Cryptpad.hrefToHexChannelId(href); + funcs.sendAnonRpcMsg("GET_FILE_SIZE", channelId, function (data) { + if (!data) { return void cb("No response"); } + if (data.error) { return void cb(data.error); } + if (data.response && data.response.length && typeof(data.response[0]) === 'number') { + return void cb(void 0, data.response[0]); + } else { + cb('INVALID_RESPONSE'); + } + }); + }; + // CodeMirror funcs.initCodeMirrorApp = callWithCommon(CodeMirror.create); diff --git a/www/common/toolbar3.js b/www/common/toolbar3.js index ce5cf1cb3..335888256 100644 --- a/www/common/toolbar3.js +++ b/www/common/toolbar3.js @@ -837,7 +837,7 @@ define([ }; // Events - var initClickEvents = function (toolbar, config) { + var initClickEvents = function (toolbar) { var removeDropdowns = function () { window.setTimeout(function () { toolbar.$toolbar.find('.cp-dropdown-content').hide(); diff --git a/www/file/inner.js b/www/file/inner.js index 1ada1f817..f6625a028 100644 --- a/www/file/inner.js +++ b/www/file/inner.js @@ -232,13 +232,14 @@ define([ return; } + // we're in upload mode + if (!common.isLoggedIn()) { - // TODO return Cryptpad.alert(Messages.upload_mustLogin, function () { - if (sessionStorage) { - sessionStorage.redirectTo = window.location.href; - } - window.location.href = '/login/'; + Cryptpad.errorLoadingScreen(Messages.upload_mustLogin); + common.setLoginRedirect(function () { + common.gotoURL('/login/'); + }); }); } @@ -260,521 +261,7 @@ define([ FM.handleFile(file); }); - // we're in upload mode Cryptpad.removeLoadingScreen(); - - - - - - - - - return; - //=========================================================================== - var readOnly = false; - var cpNfInner; - var metadataMgr; - var $bar = $('#cme_toolbox'); - - var isHistoryMode = false; - - var setEditable = APP.setEditable = function (bool) { - if (readOnly && bool) { return; } - editor.setOption('readOnly', !bool); - }; - - var Title; - - var config = { - readOnly: readOnly, - transformFunction: JsonOT.validate, - // cryptpad debug logging (default is 1) - // logLevel: 0, - validateContent: function (content) { - try { - JSON.parse(content); - return true; - } catch (e) { - console.log("Failed to parse, rejecting patch"); - return false; - } - } - }; - - var canonicalize = function (t) { return t.replace(/\r\n/g, '\n'); }; - - var setHistory = function (bool, update) { - isHistoryMode = bool; - setEditable(!bool); - if (!bool && update) { - config.onRemote(); - } - }; - - var $contentContainer = $('#cp-app-code-editor'); - var $previewContainer = $('#cp-app-code-preview'); - var $preview = $('#cp-app-code-preview-content'); - $preview.click(function (e) { - if (!e.target) { return; } - var $t = $(e.target); - if ($t.is('a') || $t.parents('a').length) { - e.preventDefault(); - var $a = $t.is('a') ? $t : $t.parents('a').first(); - var href = $a.attr('href'); - window.open(href); - } - }); - - var setIndentation = APP.setIndentation = function (units, useTabs) { - if (typeof(units) !== 'number') { return; } - editor.setOption('indentUnit', units); - editor.setOption('tabSize', units); - editor.setOption('indentWithTabs', useTabs); - }; - - var indentKey = 'indentUnit'; - var useTabsKey = 'indentWithTabs'; - var updateIndentSettings = function () { - if (!metadataMgr) { return; } - var data = metadataMgr.getPrivateData().settings; - data = data.codemirror || {}; - var indentUnit = data[indentKey]; - var useTabs = data[useTabsKey]; - setIndentation( - typeof(indentUnit) === 'number'? indentUnit: 2, - typeof(useTabs) === 'boolean'? useTabs: false); - }; - - CommonRealtime.onInfiniteSpinner(function () { setEditable(false); }); - - setEditable(false); - var initializing = true; - - var stringifyInner = function (textValue) { - var obj = { - content: textValue, - metadata: metadataMgr.getMetadataLazy() - }; - /* metadata: { - users: UserList.userData, - defaultTitle: Title.defaultTitle - } - }; - if (!initializing) { - obj.metadata.title = Title.title; - }*/ - // set mode too... - obj.highlightMode = CodeMirror.highlightMode; - - // stringify the json and send it into chainpad - return stringify(obj); - }; - - var forceDrawPreview = function () { - try { - DiffMd.apply(DiffMd.render(editor.getValue()), $preview); - } catch (e) { console.error(e); } - }; - - var drawPreview = Cryptpad.throttle(function () { - if (CodeMirror.highlightMode !== 'markdown') { return; } - if (!$previewContainer.is(':visible')) { return; } - forceDrawPreview(); - }, 150); - - var onLocal = config.onLocal = function () { - if (initializing) { return; } - if (isHistoryMode) { return; } - if (readOnly) { return; } - - editor.save(); - - drawPreview(); - - var textValue = canonicalize(CodeMirror.$textarea.val()); - var shjson = stringifyInner(textValue); - - APP.patchText(shjson); - - if (APP.realtime.getUserDoc() !== shjson) { - console.error("realtime.getUserDoc() !== shjson"); - } - }; - - var mediaTagModes = [ - 'markdown', - 'html', - 'htmlembedded', - 'htmlmixed', - 'index.html', - 'php', - 'velocity', - 'xml', - ]; - - var onModeChanged = function (mode) { - var $codeMirror = $('.CodeMirror'); - window.clearTimeout(APP.previewTo); - $codeMirror.addClass('transition'); - APP.previewTo = window.setTimeout(function () { - $codeMirror.removeClass('transition'); - }, 500); - if (mediaTagModes.indexOf(mode) !== -1) { - $(APP.$mediaTagButton).show(); - } else { $(APP.$mediaTagButton).hide(); } - - if (mode === "markdown") { - APP.$previewButton.show(); - common.getPadAttribute('previewMode', function (e, data) { - if (e) { return void console.error(e); } - if (data !== false) { - $previewContainer.show(); - APP.$previewButton.addClass('active'); - $codeMirror.removeClass('fullPage'); - } - }); - return; - } - APP.$previewButton.hide(); - $previewContainer.hide(); - APP.$previewButton.removeClass('active'); - $codeMirror.addClass('fullPage'); - }; - - config.onInit = function (info) { - metadataMgr.onChangeLazy(updateIndentSettings); - updateIndentSettings(); - - readOnly = metadataMgr.getPrivateData().readOnly; - - var titleCfg = { getHeadingText: CodeMirror.getHeadingText }; - Title = common.createTitle(titleCfg, config.onLocal); - - var configTb = { - displayed: ['title', 'useradmin', 'spinner', 'share', 'userlist', 'newpad', 'limit'], - title: Title.getTitleConfig(), - metadataMgr: metadataMgr, - readOnly: readOnly, - ifrw: window, - realtime: info.realtime, - common: Cryptpad, - sfCommon: common, - $container: $bar, - $contentContainer: $contentContainer - }; - toolbar = APP.toolbar = Toolbar.create(configTb); - Title.setToolbar(toolbar); - CodeMirror.init(config.onLocal, Title, toolbar); - - var $rightside = toolbar.$rightside; - var $drawer = toolbar.$drawer; - - /* add a history button */ - var histConfig = { - onLocal: config.onLocal, - onRemote: config.onRemote, - setHistory: setHistory, - applyVal: function (val) { - var remoteDoc = JSON.parse(val || '{}').content; - editor.setValue(remoteDoc || ''); - editor.save(); - }, - $toolbar: $bar - }; - var $hist = common.createButton('history', true, {histConfig: histConfig}); - $drawer.append($hist); - - /* save as template */ - if (!metadataMgr.getPrivateData().isTemplate) { - var templateObj = { - rt: info.realtime, - getTitle: function () { return metadataMgr.getMetadata().title; } - }; - var $templateButton = common.createButton('template', true, templateObj); - $rightside.append($templateButton); - } - - /* add an export button */ - var $export = common.createButton('export', true, {}, CodeMirror.exportText); - $drawer.append($export); - - if (!readOnly) { - /* add an import button */ - var $import = common.createButton('import', true, {}, CodeMirror.importText); - $drawer.append($import); - } - - /* add a forget button */ - var forgetCb = function (err) { - if (err) { return; } - setEditable(false); - }; - var $forgetPad = common.createButton('forget', true, {}, forgetCb); - $rightside.append($forgetPad); - - var $previewButton = APP.$previewButton = common.createButton(null, true); - $previewButton.removeClass('fa-question').addClass('fa-eye'); - $previewButton.attr('title', Messages.previewButtonTitle); - $previewButton.click(function () { - var $codeMirror = $('.CodeMirror'); - window.clearTimeout(APP.previewTo); - $codeMirror.addClass('transition'); - APP.previewTo = window.setTimeout(function () { - $codeMirror.removeClass('transition'); - }, 500); - if (CodeMirror.highlightMode !== 'markdown') { - $previewContainer.show(); - } - $previewContainer.toggle(); - if ($previewContainer.is(':visible')) { - forceDrawPreview(); - $codeMirror.removeClass('cp-ap-code-fullpage'); - $previewButton.addClass('cp-toolbar-button-active'); - common.setPadAttribute('previewMode', true, function (e) { - if (e) { return console.log(e); } - }); - } else { - $codeMirror.addClass('cp-app-code-fullpage'); - $previewButton.removeClass('cp-toolbar-button-active'); - common.setPadAttribute('previewMode', false, function (e) { - if (e) { return console.log(e); } - }); - } - }); - $rightside.append($previewButton); - - if (!readOnly) { - CodeMirror.configureTheme(function () { - CodeMirror.configureLanguage(null, onModeChanged); - }); - } - else { - CodeMirror.configureTheme(); - } - - if (!readOnly) { - var fileDialogCfg = { - onSelect: function (data) { - if (data.type === 'file') { - var mt = ''; - editor.replaceSelection(mt); - return; - } - } - }; - common.initFilePicker(fileDialogCfg); - APP.$mediaTagButton = $('