diff --git a/customize.dist/pages.js b/customize.dist/pages.js index 070788dc4..55945ccd2 100644 --- a/customize.dist/pages.js +++ b/customize.dist/pages.js @@ -570,12 +570,15 @@ define([ }; var appToolbar = function () { + return h('div#toolbar.cryptpad-toolbar'); + }; + var appToolbar3 = function () { return h('div#cp-toolbar.cp-toolbar-container'); }; Pages['/whiteboard/'] = Pages['/whiteboard/index.html'] = function () { return [ - appToolbar(), + appToolbar3(), h('div#cp-app-whiteboard-canvas-area', h('canvas#cp-app-whiteboard-canvas', { width: 600, height: 600 diff --git a/customize.dist/src/less/mixins.less b/customize.dist/src/less/mixins.less index 68cca3cb4..a75fa4e30 100644 --- a/customize.dist/src/less/mixins.less +++ b/customize.dist/src/less/mixins.less @@ -1,4 +1,5 @@ @import "/customize/src/less/variables.less"; +@import (once) "/customize/src/less2/include/tools.less"; .fontface(@family, @src, @style: normal, @weight: 400, @fmt: 'truetype'){ @font-face { @@ -39,26 +40,6 @@ background: linear-gradient(@start, @end); /* Standard syntax */ } -.placeholderColor (@color) { - &::-webkit-input-placeholder { /* WebKit, Blink, Edge */ - color: @color;; - } - &:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ - color: @color; - opacity: 1; - } - &::-moz-placeholder { /* Mozilla Firefox 19+ */ - color: @color; - opacity: 1; - } - &:-ms-input-placeholder { /* Internet Explorer 10-11 */ - color: @color; - } - &::-ms-input-placeholder { /* Microsoft Edge */ - color: @color; - } -} - .avatar (@width) { &.avatar { overflow: hidden; @@ -83,7 +64,7 @@ box-sizing: content-box; } .default { - .unselectable(); + .tools_unselectable(); background: white; color: black; font-size: @width/1.2; @@ -122,7 +103,7 @@ } .leftsideCategory { - .unselectable(); + .tools_unselectable(); padding: 5px 20px; margin: 15px 0; cursor: pointer; diff --git a/customize.dist/src/less/sidebar-layout.less b/customize.dist/src/less/sidebar-layout.less index d16d9c019..47e4e86f9 100644 --- a/customize.dist/src/less/sidebar-layout.less +++ b/customize.dist/src/less/sidebar-layout.less @@ -1,10 +1,11 @@ @import '/customize/src/less/variables.less'; @import '/customize/src/less/mixins.less'; +@import (once) "/customize/src/less2/include/colortheme.less"; -@leftside-bg: #eee; -@leftside-color: #000; -@rightside-color: #000; -@description-color: #777; +@leftside-bg: @colortheme_sidebar-left-bg; +@leftside-color: @colortheme_sidebar-left-fg; +@rightside-color: @colortheme_sidebar-right-fg; +@description-color: @colortheme_sidebar-description; @button-width: 400px; diff --git a/customize.dist/src/less2/include/avatar.less b/customize.dist/src/less2/include/avatar.less index 0ca0d0fa1..b935db786 100644 --- a/customize.dist/src/less2/include/avatar.less +++ b/customize.dist/src/less2/include/avatar.less @@ -1,3 +1,5 @@ +@import (once) "./tools.less"; + .avatar_main (@width) { &.cp-avatar { overflow: hidden; @@ -16,7 +18,7 @@ box-sizing: content-box; } .cp-avatar-default { - .unselectable(); + .tools_unselectable(); background: white; color: black; font-size: @width/1.2; diff --git a/customize.dist/src/less2/include/colortheme.less b/customize.dist/src/less2/include/colortheme.less index 53d97649a..e5e57cc74 100644 --- a/customize.dist/src/less2/include/colortheme.less +++ b/customize.dist/src/less2/include/colortheme.less @@ -75,6 +75,16 @@ @colortheme_todo-bg: #7bccd1; @colortheme_todo-color: #000; +// Sidebar layout +@colortheme_sidebar-active: #fff; +@colortheme_sidebar-left-bg: #eee; +@colortheme_sidebar-left-fg: #000; +@colortheme_sidebar-left-branch: #888; +@colortheme_sidebar-right-bg: #fff; +@colortheme_sidebar-right-fg: #000; +@colortheme_sidebar-description: #777; + + @cryptpad_color_blue: #4591C4; @cryptpad_color_grey: #999999; @cryptpad_header_col: #1E1F1F; diff --git a/customize.dist/src/less2/include/dropdown.less b/customize.dist/src/less2/include/dropdown.less index b6a7bcbeb..6593b926e 100644 --- a/customize.dist/src/less2/include/dropdown.less +++ b/customize.dist/src/less2/include/dropdown.less @@ -1,4 +1,5 @@ @import (once) "./colortheme.less"; +@import (once) "./tools.less"; /* The container
- needed to position the dropdown content */ .dropdown_main () { @@ -17,7 +18,7 @@ margin-left: 5px; } * { - .unselectable(); + .tools_unselectable(); cursor: default; } } diff --git a/customize.dist/src/less2/include/leftside-menu.less b/customize.dist/src/less2/include/leftside-menu.less new file mode 100644 index 000000000..3211fb3a9 --- /dev/null +++ b/customize.dist/src/less2/include/leftside-menu.less @@ -0,0 +1,23 @@ +@import (once) "./unselectable.less"; +@import (once) "./variables.less"; +@import (once) "./colortheme.less"; + +.leftside-menu_main() { +} +.leftside-menu-category_main() { + .unselectable_make(); + padding: 5px 20px; + margin: 15px 0; + cursor: pointer; + height: @variables_bar-height; + line-height: @variables_bar-height - 10px; + .fa { + width: 25px; + } + &:hover { + background: rgba(0,0,0,0.05); + } + &.cp-leftside-active { + background: @colortheme_sidebar-active; + } +} diff --git a/customize.dist/src/less2/include/limit-bar.less b/customize.dist/src/less2/include/limit-bar.less new file mode 100644 index 000000000..efca7811d --- /dev/null +++ b/customize.dist/src/less2/include/limit-bar.less @@ -0,0 +1,58 @@ +@import (once) "./colortheme.less"; + +.limit-bar_main () { + .cp-limit-container { + @colortheme_green: #5cb85c; + display: inline-flex; + flex-flow: column-reverse; + width: 100%; + margin-top: 20px; + .cp-limit-bar { + display: inline-block; + max-width: 100%; + margin: 3px; + box-sizing: border-box; + border: 1px solid #999; + background: white; + position: relative; + text-align: center; + vertical-align: middle; + width: ~"calc(100% - 6px)"; + height: 25px; + line-height: 25px; + overflow: hidden; + .cp-limit-usage { + height: 100%; + display: inline-block; + background: blue; + position: absolute; + left: 0; + z-index:1; // .usage + &.cp-limit-usage-normal { + background: @colortheme_green; + } + &.cp-limit-usage-warning { + background: orange; + } + &.cp-limit-usage-above { + background: red; + } + } + .cp-limit-usage-text { + position: relative; + color: black; + text-shadow: 1px 0 2px white, 0 1px 2px white, -1px 0 2px white, 0 -1px 2px white; + z-index: 2; // .usageText + font-size: @colortheme_app-font-size; + font-weight: bold; + } + } + .cp-limit-upgrade { + padding: 0; + line-height: 25px; + height: 25px; + margin: 0 3px; + border-radius: 0; + } + } +} diff --git a/customize.dist/src/less2/include/tokenfield.less b/customize.dist/src/less2/include/tokenfield.less index da048b2fe..5dcea83ec 100644 --- a/customize.dist/src/less2/include/tokenfield.less +++ b/customize.dist/src/less2/include/tokenfield.less @@ -1,15 +1,8 @@ +@import (once) "./tools.less"; + .tokenfield_main () { .tokenfield { - .unselectable () { - -webkit-touch-callout: none; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - } - - .unselectable(); + .tools_unselectable(); height: auto; min-height: 34px; padding-bottom: 0px; diff --git a/customize.dist/src/less2/include/toolbar.less b/customize.dist/src/less2/include/toolbar.less index d4b6fcebf..2d49da6b2 100644 --- a/customize.dist/src/less2/include/toolbar.less +++ b/customize.dist/src/less2/include/toolbar.less @@ -5,6 +5,7 @@ @import (once) "./avatar.less"; @import (once) "./toolbar-history.less"; @import (once) "./icon-colors.less"; +@import (once) "./tools.less"; .toolbar_main () { @@ -13,15 +14,6 @@ @toolbar_top-height: 64px; @toolbar_button-font: @colortheme_app-font; - .unselectable () { - -webkit-touch-callout: none; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - } - .dropdown_main(); .ckeditor_fix(); .history_main(); @@ -270,7 +262,7 @@ font-family: FontAwesome; } - .unselectable(); + .tools_unselectable(); font: @toolbar_button-font; width: 100%; @@ -289,7 +281,7 @@ button { transition: all 0.15s; - .unselectable(); + .tools_unselectable(); &.cp-toolbar-hidden { display: none; } diff --git a/customize.dist/src/less2/include/tools.less b/customize.dist/src/less2/include/tools.less new file mode 100644 index 000000000..9fd2df5bc --- /dev/null +++ b/customize.dist/src/less2/include/tools.less @@ -0,0 +1,27 @@ +.tools_placeholder-color (@color) { + &::-webkit-input-placeholder { /* WebKit, Blink, Edge */ + color: @color;; + } + &:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ + color: @color; + opacity: 1; + } + &::-moz-placeholder { /* Mozilla Firefox 19+ */ + color: @color; + opacity: 1; + } + &:-ms-input-placeholder { /* Internet Explorer 10-11 */ + color: @color; + } + &::-ms-input-placeholder { /* Microsoft Edge */ + color: @color; + } +} + +.tools_unselectable () { + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; +} diff --git a/customize.dist/src/less2/include/unselectable.less b/customize.dist/src/less2/include/unselectable.less new file mode 100644 index 000000000..30223128b --- /dev/null +++ b/customize.dist/src/less2/include/unselectable.less @@ -0,0 +1,13 @@ +.unselectable_make() { + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; +} + +.unselectable_main() { + .cp-unselectable { + .unselectable_make(); + } +} diff --git a/customize.dist/src/less2/include/variables.less b/customize.dist/src/less2/include/variables.less new file mode 100644 index 000000000..3aee02492 --- /dev/null +++ b/customize.dist/src/less2/include/variables.less @@ -0,0 +1,3 @@ +// Elements size +@variables_bar-height: 32px; + diff --git a/customize.dist/src/less2/main.less b/customize.dist/src/less2/main.less index b2f32baec..51450db27 100644 --- a/customize.dist/src/less2/main.less +++ b/customize.dist/src/less2/main.less @@ -22,6 +22,7 @@ html.cp-app-print { .app-print_main(); } +body.cp-app-drive { @import "../../../drive/app-drive.less"; } body.cp-app-pad { @import "../../../pad/app-pad.less"; } body.cp-app-code { @import "../../../code/app-code.less"; } body.cp-app-slide { @import "../../../slide/app-slide.less"; } diff --git a/www/code/inner.html b/www/code/inner.html index 2ac5b56f8..5d914b6c8 100644 --- a/www/code/inner.html +++ b/www/code/inner.html @@ -2,7 +2,7 @@ - + - + diff --git a/www/olddrive/inner.html b/www/olddrive/inner.html new file mode 100644 index 000000000..0b26aa7a1 --- /dev/null +++ b/www/olddrive/inner.html @@ -0,0 +1,60 @@ + + + + + + + + +
+
+
+
+
+
+
+
+ + + + + +
+ + + diff --git a/www/olddrive/inner.js b/www/olddrive/inner.js new file mode 100644 index 000000000..e1779778b --- /dev/null +++ b/www/olddrive/inner.js @@ -0,0 +1,7 @@ +define([ + 'less!/bower_components/components-font-awesome/css/font-awesome.min.css', + 'css!/bower_components/bootstrap/dist/css/bootstrap.min.css', + 'less!/drive/file.less', + 'less!/customize/src/less/cryptpad.less', + 'less!/customize/src/less/toolbar.less', +], function () {}); diff --git a/www/olddrive/main.js b/www/olddrive/main.js new file mode 100644 index 000000000..d7766b75f --- /dev/null +++ b/www/olddrive/main.js @@ -0,0 +1,3027 @@ +define([ + 'jquery', + '/bower_components/chainpad-listmap/chainpad-listmap.js', + '/bower_components/chainpad-crypto/crypto.js', + '/bower_components/textpatcher/TextPatcher.amd.js', + 'json.sortify', + '/common/cryptpad-common.js', + '/common/userObject.js', + '/common/toolbar2.js', + '/customize/application_config.js', + '/common/cryptget.js', + '/common/mergeDrive.js', + + 'less!/bower_components/components-font-awesome/css/font-awesome.min.css', + 'less!/customize/src/less/cryptpad.less', +], function ($, Listmap, Crypto, TextPatcher, JSONSortify, Cryptpad, FO, Toolbar, AppConfig, Get, Merge) { + var module = window.MODULE = {}; + + var Messages = Cryptpad.Messages; + //var saveAs = window.saveAs; + + // Use `$(function () {});` to make sure the html is loaded before doing anything else + $(function () { + var ifrw = $('#pad-iframe')[0].contentWindow; + + Cryptpad.addLoadingScreen(); + var onConnectError = function () { + Cryptpad.errorLoadingScreen(Messages.websocketError); + }; + + var APP = window.APP = { + editable: false, + Cryptpad: Cryptpad, + loggedIn: Cryptpad.isLoggedIn(), + mobile: function () { return $('body').width() <= 600; } // Menu and content area are not inline-block anymore for mobiles + }; + + var stringify = APP.stringify = function (obj) { + return JSONSortify(obj); + }; + + var E_OVER_LIMIT = 'E_OVER_LIMIT'; + + var SEARCH = "search"; + var SEARCH_NAME = Messages.fm_searchName; + var ROOT = "root"; + var ROOT_NAME = Messages.fm_rootName; + var FILES_DATA = Cryptpad.storageKey; + var FILES_DATA_NAME = Messages.fm_filesDataName; + var TEMPLATE = "template"; + var TEMPLATE_NAME = Messages.fm_templateName; + var TRASH = "trash"; + var TRASH_NAME = Messages.fm_trashName; + var RECENT = "recent"; + var RECENT_NAME = Messages.fm_recentPadsName; + + var LOCALSTORAGE_LAST = "cryptpad-file-lastOpened"; + var LOCALSTORAGE_OPENED = "cryptpad-file-openedFolders"; + var LOCALSTORAGE_VIEWMODE = "cryptpad-file-viewMode"; + var FOLDER_CONTENT_ID = "folderContent"; + + var config = {}; + var DEBUG = config.DEBUG = true; + var debug = config.debug = DEBUG ? function () { + console.log.apply(console, arguments); + } : function () { return; }; + var logError = config.logError = function () { + console.error.apply(console, arguments); + }; + var log = config.log = Cryptpad.log; + + var getLastOpenedFolder = function () { + var path; + try { + path = localStorage[LOCALSTORAGE_LAST] ? JSON.parse(localStorage[LOCALSTORAGE_LAST]) : [ROOT]; + } catch (e) { + path = [ROOT]; + } + return path; + }; + var setLastOpenedFolder = function (path) { + if (path[0] === SEARCH) { return; } + localStorage[LOCALSTORAGE_LAST] = JSON.stringify(path); + }; + + var initLocalStorage = function () { + try { + var store = JSON.parse(localStorage[LOCALSTORAGE_OPENED]); + if (!$.isArray(store)) { + localStorage[LOCALSTORAGE_OPENED] = '[]'; + } + } catch (e) { + localStorage[LOCALSTORAGE_OPENED] = '[]'; + } + }; + + var wasFolderOpened = function (path) { + var store = JSON.parse(localStorage[LOCALSTORAGE_OPENED]); + return store.indexOf(JSON.stringify(path)) !== -1; + }; + var setFolderOpened = function (path, opened) { + var s = JSON.stringify(path); + var store = JSON.parse(localStorage[LOCALSTORAGE_OPENED]); + if (opened && store.indexOf(s) === -1) { + store.push(s); + } + if (!opened) { + var idx = store.indexOf(s); + if (idx !== -1) { + store.splice(idx, 1); + } + } + localStorage[LOCALSTORAGE_OPENED] = JSON.stringify(store); + }; + + var getViewModeClass = function () { + var mode = localStorage[LOCALSTORAGE_VIEWMODE]; + if (mode === 'list') { return 'list'; } + return 'grid'; + }; + var getViewMode = function () { + return localStorage[LOCALSTORAGE_VIEWMODE] || 'grid'; + }; + var setViewMode = function (mode) { + if (typeof(mode) !== "string") { + logError("Incorrect view mode: ", mode); + return; + } + localStorage[LOCALSTORAGE_VIEWMODE] = mode; + }; + + var setSearchCursor = function () { + var $input = APP.$iframe.find('#searchInput'); + localStorage.searchCursor = $input[0].selectionStart; + }; + var getSearchCursor = function () { + return localStorage.searchCursor || 0; + }; + +/* var now = function () { + return new Date().getTime(); + }; */ + + var setEditable = function (state) { + APP.editable = state; + if (!state) { + APP.$iframe.find('#content').addClass('readonly'); + APP.$iframe.find('[draggable="true"]').attr('draggable', false); + } + else { + APP.$iframe.find('#content').removeClass('readonly'); + APP.$iframe.find('[draggable="false"]').attr('draggable', true); + } + }; + + // Icons + var $folderIcon = $('', {"class": "fa fa-folder folder icon"}); + //var $folderIcon = $('', {src: "/customize/images/icons/folder.svg", "class": "folder icon"}); + var $folderEmptyIcon = $folderIcon.clone(); + var $folderOpenedIcon = $('', {"class": "fa fa-folder-open folder"}); + //var $folderOpenedIcon = $('', {src: "/customize/images/icons/folderOpen.svg", "class": "folder icon"}); + var $folderOpenedEmptyIcon = $folderOpenedIcon.clone(); + //var $upIcon = $('', {"class": "fa fa-arrow-circle-up"}); + var $unsortedIcon = $('', {"class": "fa fa-files-o"}); + var $templateIcon = $('', {"class": "fa fa-cubes"}); + var $recentIcon = $('', {"class": "fa fa-clock-o"}); + var $trashIcon = $('', {"class": "fa fa-trash"}); + var $trashEmptyIcon = $('', {"class": "fa fa-trash-o"}); + //var $collapseIcon = $('', {"class": "fa fa-minus-square-o expcol"}); + var $expandIcon = $('', {"class": "fa fa-plus-square-o expcol"}); + var $emptyTrashIcon = $('