diff --git a/customize.dist/application_config.js b/customize.dist/application_config.js index a1cb37bba..77962d8c4 100644 --- a/customize.dist/application_config.js +++ b/customize.dist/application_config.js @@ -51,5 +51,16 @@ define(function() { config.loginSalt = ''; config.badStateTimeout = 30000; + config.applicationsIcon = { + file: 'fa-file-text-o', + pad: 'fa-file-word-o', + code: 'fa-file-code-o', + slide: 'fa-file-powerpoint-o', + poll: 'fa-calendar', + whiteboard: 'fa-paint-brush', + todo: 'fa-tasks', + contacts: 'fa-users', + }; + return config; }); diff --git a/customize.dist/header.js b/customize.dist/header.js index ecef95f56..5e0dcc881 100644 --- a/customize.dist/header.js +++ b/customize.dist/header.js @@ -41,7 +41,7 @@ define([ $userAdmin.find('button').addClass('btn').addClass('btn-secondary'); $(window).click(function () { - $('.cryptpad-dropdown').hide(); + $('.cp-dropdown-content').hide(); }); if (Cryptpad.isLoggedIn() && ApiConfig.allowSubscriptions) { diff --git a/customize.dist/main.js b/customize.dist/main.js index 4049ec659..2a7f2b663 100644 --- a/customize.dist/main.js +++ b/customize.dist/main.js @@ -15,7 +15,7 @@ define([ var $main = $('#mainBlock'); $(window).click(function () { - $('.cryptpad-dropdown').hide(); + $('.cp-dropdown-content').hide(); }); // main block is hidden in case javascript is disabled @@ -61,7 +61,7 @@ define([ var displayCreateButtons = function () { var $parent = $('#buttons'); var options = []; - var $container = $('
', {'class': 'dropdown-bar'}).appendTo($parent); + var $container = $('
', {'class': 'cp-dropdown-container'}).appendTo($parent); Config.availablePadTypes.forEach(function (el) { if (el === 'drive') { return; } if (!Cryptpad.isLoggedIn() && Config.registeredOnlyTypes && diff --git a/customize.dist/src/less/cryptpad.less b/customize.dist/src/less/cryptpad.less index 1c2c39f46..ba763aea0 100644 --- a/customize.dist/src/less/cryptpad.less +++ b/customize.dist/src/less/cryptpad.less @@ -458,7 +458,7 @@ noscript { padding: 0; &.buttons { margin-bottom: 10px; - .dropdown-bar { + .cp-dropdown-container { button { white-space: normal; text-align: left; diff --git a/customize.dist/src/less/dropdown.less b/customize.dist/src/less/dropdown.less index 7f0b5e7b2..47f06f88c 100644 --- a/customize.dist/src/less/dropdown.less +++ b/customize.dist/src/less/dropdown.less @@ -1,115 +1,4 @@ -@import (once) "../less2/include/colortheme.less"; +@import (once) "../less2/include/dropdown.less"; -/* The container
- needed to position the dropdown content */ -.dropdown-bar { - position: relative; - display: inline-block; - - .dropbtn { - } - - &:hover { - .dropbtn { - } - } - - .fa { - font-family: FontAwesome; - } - - button { - .fa-caret-down{ - margin-right: 0px; - margin-left: 5px; - } - * { - .unselectable(); - cursor: default; - } - } - - .dropdown-bar-content { - display: none; - position: absolute; - background-color: @dropdown-bg; - min-width: 250px; - box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2); - z-index: 1000; - max-height: 300px; - overflow-y: auto; - font-family: @colortheme_font; - font-size: 16px; - line-height: 1em; - - &.left { - right: 0; - } - - &:hover { - display: block; - } - - a { - color: @dropdown-color; - padding: 5px 16px; - text-decoration: none; - display: flex; - cursor: pointer; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - float: none; - text-align: left; - font: @dropdown-font; - line-height: 1em; - - - .fa { - width: 20px; - text-align: center; - margin-right: 5px !important; - } - - &:hover { - background-color: @dropdown-bg-hover; - color: @dropdown-color; - } - - &.active { - background-color: @dropdown-bg-active; - color: @dropdown-color; - } - } - - hr { - margin: 5px 0px; - height: 1px; - background: #bbb; - } - - p { - min-width: 160px; - padding: 5px; - margin: 0; - white-space: normal; - text-align: left; - color: black; - font-size: 14px; - * { - font-size: 14px; - } - h2 { - color: black; - font-weight: bold; - text-align: center; - background-color: #EEEEEE; - padding: 5px 0px; - margin: 5px 0px; - font-size: 16px; - white-space: normal; - } - } - } -} +.dropdown_main(); diff --git a/customize.dist/src/less/loading.less b/customize.dist/src/less/loading.less index e7cb8060a..a9442d3cb 100644 --- a/customize.dist/src/less/loading.less +++ b/customize.dist/src/less/loading.less @@ -1,7 +1,7 @@ @import "./variables.less"; @import (once) "../less2/include/colortheme.less"; -.cp #loading { +#loading { position: fixed; z-index: 9999; top: 0px; @@ -33,7 +33,7 @@ } } } -.cp #loadingTip { +#loadingTip { position: fixed; z-index: 99999; top: 80%; diff --git a/customize.dist/src/less/toolbar.less b/customize.dist/src/less/toolbar.less index 7e28c08d3..9ff435277 100644 --- a/customize.dist/src/less/toolbar.less +++ b/customize.dist/src/less/toolbar.less @@ -1,8 +1,16 @@ @import "./variables.less"; @import "./mixins.less"; -@import "./dropdown.less"; +@import (once) "../less2/include/dropdown.less"; @import (once) "../less2/include/colortheme.less"; +@import (once) "../less2/include/ckeditor-fix.less"; +@import (once) "../less2/include/icon-colors.less"; + +.dropdown_main(); + +.ckeditor_fix(); + +.iconColors_main(); .unselectable { -webkit-touch-callout: none; @@ -13,51 +21,9 @@ user-select: none; } -.cke_reset_all * { - color: inherit; -} - - -// Classes used in common-interface.js -.padColor { color: @toolbar-pad-bg; } -.codeColor { color: @toolbar-code-bg; } -.slideColor { color: @toolbar-slide-bg; } -.pollColor { color: @toolbar-poll-bg; } -.fileColor { color: @toolbar-file-bg; } -.friendsColor { color: @toolbar-friends-bg; } -.whiteboardColor { color: @toolbar-whiteboard-bg; } -.driveColor { color: @toolbar-drive-bg; } -.settingsColor { color: @toolbar-settings-bg; } -.profileColor { color: @toolbar-settings-bg; } -.defaultColor { color: @toolbar-default-bg; } -.todoColor { color:@toolbar-todo-bg; } - .toolbar-container { display: flex; } -#cke_editor1 .cke_inner { - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; - display: flex; - flex-flow: column; -} -.cke_toolbox_main { - display: inline-block; - margin-bottom: -3px; -} -#cke_1_contents { - flex: 1; - margin-top: -1px; - display: flex; - overflow: visible; - iframe { - min-height: 100%; - width: 100%; - } -} body .userlist-drawer { font: @main-font-size @colortheme_font; @@ -201,36 +167,9 @@ body { background: darken(@bgcolor, 10%); color: @color; } - .dropdown-bar-content.left a { + .cp-dropdown-content.cp-dropdown-left a { color: black; } - /*.dropdown-bar-content { - background: darken(@bgcolor, 5%); - border: 1px solid @color; - color: @color; - a { - color: @color; - &.active { - background-color: darken(@bgcolor, 10%); - color: @color; - } - &:hover { - background-color: @bgcolor; - color: @color; - } - } - hr { - background-color: darken(@bgcolor, 15%); - } - p { - h2 { - background-color: darken(@bgcolor, 10%); - } - .accountData { - background-color: @bgcolor; - } - } - }*/ } } @@ -322,7 +261,7 @@ body .cryptpad-toolbar { width: 100%; z-index: 9001; - .dropdown-bar { + .cp-dropdown-container { //height: 100%; //display: inline-block; button { @@ -865,7 +804,7 @@ body .cryptpad-toolbar { &:hover { background-color: rgba(0,0,0,0.4); } - .dropdown-bar-content { + .cp-dropdown-content { margin: 0; } button { @@ -929,7 +868,7 @@ body .cryptpad-toolbar { border-radius: 0; height: 100%; } - .dropdown-bar-content { + .cp-dropdown-content { margin-top: -1px; } diff --git a/customize.dist/src/less/topbar.less b/customize.dist/src/less/topbar.less index 05472a605..2f7f55edb 100644 --- a/customize.dist/src/less/topbar.less +++ b/customize.dist/src/less/topbar.less @@ -67,7 +67,7 @@ } button { - .buttonTitle { + .cp-dropdown-button-title { .fa-user { margin-right: 5px; } diff --git a/customize.dist/src/less/variables.less b/customize.dist/src/less/variables.less index 8469ec518..4d804abea 100644 --- a/customize.dist/src/less/variables.less +++ b/customize.dist/src/less/variables.less @@ -81,8 +81,8 @@ @toolbar-settings-color: @colortheme_settings-color; @toolbar-profile-bg: @colortheme_profile-bg; @toolbar-profile-color: @colortheme_profile-color; -@toolbar-todo-bg: #7bccd1; -@toolbar-todo-color: #000; +@toolbar-todo-bg: @colortheme_todo-bg; +@toolbar-todo-color: @colortheme_todo-color; @topbar-back: #fff; @topbar-color: #000; diff --git a/customize.dist/src/less2/include/alertify.less b/customize.dist/src/less2/include/alertify.less index ff4a2abec..8dd7fc0cb 100644 --- a/customize.dist/src/less2/include/alertify.less +++ b/customize.dist/src/less2/include/alertify.less @@ -1,5 +1,6 @@ @import (once) "./colortheme.less"; @import (once) "./browser.less"; +@import (once) "./modal-theme.less"; .alertify_main () { @alertify-fore: @colortheme_modal-fg; @@ -19,13 +20,14 @@ @alertify-input-bg: @colortheme_modal-input; @alertify-input-fg: @colortheme_modal-fg; - @alertify_padding-base: @colortheme_modal-padding; - @alertify_box-shadow: @colortheme_modal-shadow; + @alertify_padding-base: @modal_padding; + @alertify_box-shadow: @modal_shadow; // Logs to show that something has happened // These show only once .alertify-logs { + z-index:10000; @media print { visibility: hidden; } diff --git a/customize.dist/src/less2/include/app-noscroll.less b/customize.dist/src/less2/include/app-noscroll.less new file mode 100644 index 000000000..81b1a725c --- /dev/null +++ b/customize.dist/src/less2/include/app-noscroll.less @@ -0,0 +1,20 @@ +// html +.noscroll_main () { + height: 100%; + width: 100%; + padding: 0px; + margin: 0px; + overflow: hidden; + box-sizing: border-box; + position: relative; + body { + height: 100%; + width: 100%; + padding: 0px; + margin: 0px; + overflow: hidden; + box-sizing: border-box; + position: relative; + } +} + diff --git a/customize.dist/src/less2/include/avatar.less b/customize.dist/src/less2/include/avatar.less new file mode 100644 index 000000000..0ca0d0fa1 --- /dev/null +++ b/customize.dist/src/less2/include/avatar.less @@ -0,0 +1,38 @@ +.avatar_main (@width) { + &.cp-avatar { + overflow: hidden; + text-overflow: ellipsis; + font-size: 16px; + display: flex; + align-items: center; + .cp-avatar-default, media-tag { + display: inline-flex; + width: @width; + height: @width; + justify-content: center; + align-items: center; + border-radius: 4px; + overflow: hidden; + box-sizing: content-box; + } + .cp-avatar-default { + .unselectable(); + background: white; + color: black; + font-size: @width/1.2; + } + media-tag { + min-height: @width; + min-width: @width; + max-height: @width; + max-width: @width; + img { + min-width: 100%; + min-height: 100%; + max-width: none; + max-height: none; // To override 'media-tag img' in slide.less + } + } + } +} + diff --git a/customize.dist/src/less2/include/ckeditor-fix.less b/customize.dist/src/less2/include/ckeditor-fix.less new file mode 100644 index 000000000..bd44c11e1 --- /dev/null +++ b/customize.dist/src/less2/include/ckeditor-fix.less @@ -0,0 +1,35 @@ +.ckeditor_fix () { + + .cke_reset_all * { + color: inherit; + } + #cke_editor1 .cke_inner { + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + display: flex; + flex-flow: column; + } + .cke_toolbox_main { + display: inline-block; + margin-bottom: -3px; + } + #cke_1_contents { + flex: 1; + margin-top: -1px; + display: flex; + overflow: visible; + iframe { + min-height: 100%; + width: 100%; + } + } + .cke_toolbox .cp-toolbar-history { + input.gotoInput { // TODO + padding: 3px 3px; + } + } + +} diff --git a/customize.dist/src/less2/include/colortheme.less b/customize.dist/src/less2/include/colortheme.less index 4ecafb27a..f8613a62a 100644 --- a/customize.dist/src/less2/include/colortheme.less +++ b/customize.dist/src/less2/include/colortheme.less @@ -1,4 +1,6 @@ @colortheme_font: 'Open Sans', 'Helvetica Neue', sans-serif; +@colortheme_app-font-size: 16px; +@colortheme_app-font: @colortheme_app-font-size @colortheme_font; @colortheme_link-color: #0275D8; @colortheme_link-color-visited: #005999; @@ -18,8 +20,6 @@ @colortheme_modal-link: #eee; @colortheme_modal-link-visited: lighten(@colortheme_modal-link, 10%); @colortheme_modal-dim: rgba(0, 0, 0, 0.4); -@colortheme_modal-padding: 12px; -@colortheme_modal-shadow: 0 8px 32px 0 rgba(0,0,0,.4); @colortheme_modal-input: #111; @@ -29,6 +29,11 @@ @colortheme_notification-log: rgba(0, 0, 0, 0.8); @colortheme_notification-warn: rgba(205, 37, 50, 0.8); +@colortheme_dropdown-bg: #f9f9f9; +@colortheme_dropdown-color: black; +@colortheme_dropdown-bg-hover: #f1f1f1; +@colortheme_dropdown-bg-active: #e8e8e8; + // Apps @colortheme_pad-bg: #1c4fa0; @@ -64,7 +69,10 @@ @colortheme_profile-bg: #0087ff; @colortheme_profile-color: #fff; +@colortheme_todo-bg: #7bccd1; +@colortheme_todo-color: #000; + @cryptpad_color_blue: #4591C4; @cryptpad_color_grey: #999999; @cryptpad_header_col: #1E1F1F; -@cryptpad_text_col: #3F4141; \ No newline at end of file +@cryptpad_text_col: #3F4141; diff --git a/customize.dist/src/less2/include/dropdown.less b/customize.dist/src/less2/include/dropdown.less new file mode 100644 index 000000000..3a371b6dc --- /dev/null +++ b/customize.dist/src/less2/include/dropdown.less @@ -0,0 +1,109 @@ +@import (once) "./colortheme.less"; + +/* The container
- needed to position the dropdown content */ +.dropdown_main () { + .cp-dropdown-container { + @dropdown_font: @colortheme_app-font-size @colortheme_font; + position: relative; + display: inline-block; + + .fa { + font-family: FontAwesome; + } + + button { + .fa-caret-down{ + margin-right: 0px; + margin-left: 5px; + } + * { + .unselectable(); + cursor: default; + } + } + + .cp-dropdown-content { + display: none; + position: absolute; + background-color: @colortheme_dropdown-bg; + min-width: 250px; + box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2); + z-index: 1000; + max-height: 300px; + overflow-y: auto; + font: @dropdown_font; + line-height: 1em; + + &.cp-dropdown-left { + right: 0; + } + + &:hover { + display: block; + } + + a { + color: @colortheme_dropdown-color; + padding: 5px 16px; + text-decoration: none; + display: flex; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + float: none; + text-align: left; + font: @dropdown_font; + line-height: 1em; + + + .fa { + width: 20px; + text-align: center; + margin-right: 5px !important; + } + + &:hover { + background-color: @colortheme_dropdown-bg-hover; + color: @colortheme_dropdown-color; + } + + &.cp-dropdown-element-active { + background-color: @colortheme_dropdown-bg-active; + color: @colortheme_dropdown-color; + } + } + + hr { + margin: 5px 0px; + height: 1px; + background: #bbb; + } + + p { + min-width: 160px; + padding: 5px; + margin: 0; + white-space: normal; + text-align: left; + color: black; + font-size: 14px; + * { + font-size: 14px; + } + h2 { + color: black; + font-weight: bold; + text-align: center; + background-color: #EEEEEE; + padding: 5px 0px; + margin: 5px 0px; + font-size: 16px; + white-space: normal; + } + } + } + } +} + diff --git a/customize.dist/src/less2/include/fileupload.less b/customize.dist/src/less2/include/fileupload.less new file mode 100644 index 000000000..24eb88c1a --- /dev/null +++ b/customize.dist/src/less2/include/fileupload.less @@ -0,0 +1,52 @@ +@import (once) './colortheme.less'; +@import (once) './modal.less'; + +.fileupload_main () { + /* Upload status table */ + #cp-fileupload { + .modal_base(); + position: absolute; + left: 10vw; right: 10vw; + bottom: 10vh; + opacity: 0.9; + box-sizing: border-box; + z-index: 1000000; + display: none; + #cp-fileupload-table { + width: 80vw; + tr:nth-child(1) { + background-color: darken(@colortheme_modal-bg, 20%); + td { + text-align: center; + font-weight: bold; + padding: 0.25em; + } + } + @upload_pad_h: 0.25em; + @upload_pad_v: 0.5em; + + td { + padding: @upload_pad_h @upload_pad_v; + } + .cp-fileupload-table-progress { + width: 200px; + position: relative; + text-align: center; + box-sizing: border-box; + } + .cp-fileupload-table-progress-container { + position: absolute; + width: 0px; + left: @upload_pad_v; + top: @upload_pad_h; bottom: @upload_pad_h; + background-color: rgba(0,0,255,0.3); + z-index: -1; + } + .cp-fileupload-table-cancel { text-align: center; } + .fa.cancel { + color: rgb(255, 0, 115); + } + } + } +} + diff --git a/customize.dist/src/less2/include/icon-colors.less b/customize.dist/src/less2/include/icon-colors.less new file mode 100644 index 000000000..f3fadd191 --- /dev/null +++ b/customize.dist/src/less2/include/icon-colors.less @@ -0,0 +1,17 @@ +@import (once) "./colortheme.less"; +.iconColors_main () { + // Classes used in common-interface.js + .cp-icon-color-pad { color: @colortheme_pad-bg; } + .cp-icon-color-code { color: @colortheme_code-bg; } + .cp-icon-color-slide { color: @colortheme_slide-bg; } + .cp-icon-color-poll { color: @colortheme_poll-bg; } + .cp-icon-color-file { color: @colortheme_file-bg; } + .cp-icon-color-friends { color: @colortheme_friends-bg; } + .cp-icon-color-whiteboard { color: @colortheme_whiteboard-bg; } + .cp-icon-color-drive { color: @colortheme_drive-bg; } + .cp-icon-color-settings { color: @colortheme_settings-bg; } + .cp-icon-color-profile { color: @colortheme_settings-bg; } + .cp-icon-color-default { color: @colortheme_default-bg; } + .cp-icon-color-todo { color:@colortheme_todo-bg; } +} + diff --git a/customize.dist/src/less2/include/markdown.less b/customize.dist/src/less2/include/markdown.less new file mode 100644 index 000000000..4759ea5cb --- /dev/null +++ b/customize.dist/src/less2/include/markdown.less @@ -0,0 +1,27 @@ +.markdown_preformatted-code (@color: #333) { + pre > code { + display: block; + position: relative; + border: 1px solid @color; + width: 90%; + margin: auto; + padding-left: .25vw; + overflow-x: auto; + overflow-y: hidden; + } +} + +.markdown_gfm-table (@color: black) { + table { + border-collapse: collapse; + tr { + th { + border: 3px solid @color; + padding: 15px; + } + } + } +} + +// todo ul, ol + diff --git a/customize.dist/src/less2/include/modal-theme.less b/customize.dist/src/less2/include/modal-theme.less new file mode 100644 index 000000000..1ed183d2d --- /dev/null +++ b/customize.dist/src/less2/include/modal-theme.less @@ -0,0 +1,4 @@ +// Used in modal.less and alertify.less +@modal_padding: 12px; +@modal_shadow: 0 8px 32px 0 rgba(0,0,0,.4); + diff --git a/customize.dist/src/less2/include/modal.less b/customize.dist/src/less2/include/modal.less index ed63ea6fd..9ea75c033 100644 --- a/customize.dist/src/less2/include/modal.less +++ b/customize.dist/src/less2/include/modal.less @@ -1,11 +1,12 @@ @import (once) "./colortheme.less"; +@import (once) "./modal-theme.less"; .modal_base() { font-family: @colortheme_font; background-color: @colortheme_modal-bg; color: @colortheme_modal-fg; - box-shadow: @colortheme_modal-shadow; + box-shadow: @modal_shadow; a { color: @colortheme_modal-link; @@ -30,9 +31,9 @@ .cp-modal { background-color: @colortheme_modal-bg; color: @colortheme_modal-fg; - box-shadow: @colortheme_modal-shadow; + box-shadow: @modal_shadow; - padding: @colortheme_modal-padding; + padding: @modal_padding; position: absolute; top: 15vh; bottom: 15vh; @@ -70,7 +71,7 @@ position: absolute; top: 0; right: 0; - margin: @colortheme_modal-padding; + margin: @modal_padding; cursor: pointer; } } diff --git a/customize.dist/src/less2/include/toolbar-history.less b/customize.dist/src/less2/include/toolbar-history.less new file mode 100644 index 000000000..1a099bb76 --- /dev/null +++ b/customize.dist/src/less2/include/toolbar-history.less @@ -0,0 +1,51 @@ +@import (once) "./colortheme.less"; + +.history_main () { + body .cp-toolbar-history { + display: none; + text-align: center; + * { + font: @colortheme_app-font; + } + .cp-toolbar-history-next { + display: inline-block; + vertical-align: middle; + margin: 20px; + } + .cp-toolbar-history-previous { + display: inline-block; + vertical-align: middle; + margin: 20px; + } + .cp-toolbar-history-goto { + display: inline-block; + vertical-align: middle; + text-align: center; + input { width: 75px; } + } + .cp-toolbar-history-goto-input { + padding-left: 5px; + margin-left: 5px; + vertical-align: middle; + } + button { + color: inherit; + background-color: rgba(0,0,0,0.2); + &:hover { + background-color: rgba(0,0,0,0.4); + } + } + .cp-toolbar-history-close { + background: white; + color: black; + margin-top: 5px; + &:hover { + background-color: #e6e6e6; + } + } + .fa-spinner { + font-size: 66px; + } + } +} + diff --git a/customize.dist/src/less2/include/toolbar.less b/customize.dist/src/less2/include/toolbar.less new file mode 100644 index 000000000..3afe7a1a8 --- /dev/null +++ b/customize.dist/src/less2/include/toolbar.less @@ -0,0 +1,796 @@ +@import (once) "./dropdown.less"; +@import (once) "./colortheme.less"; +@import (once) "./browser.less"; +@import (once) "./ckeditor-fix.less"; +@import (once) "./avatar.less"; +@import (once) "./toolbar-history.less"; +@import (once) "./icon-colors.less"; + + +.toolbar_main () { + + @toolbar_line-height: 32px; + @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(); + .iconColors_main(); + + .cp-toolbar-container { + display: flex; + } + + .cp-toolbar-userlist-drawer { + font: @colortheme_app-font-size @colortheme_font; + min-width: 175px; + width: 175px; + display: block; + overflow-y: auto; + overflow-x: hidden; + padding: 10px; + box-sizing: border-box; + .cp-toolbar-userlist-drawer-close { + position: absolute; + margin-top: -10px; + margin-left: 149px; + font-size: 15px; + opacity: 0.5; + cursor: pointer; + text-shadow: unset; + &:hover { + opacity: 1; + } + } + h2 { + color: inherit; + text-align: center; + padding: 5px 0px; + margin: 5px 0px; + font: inherit; + font-weight: bold; + white-space: normal; + line-height: auto; + } + text-align:baseline; + .cp-toolbar-userlist-viewer { + font-style: italic; + padding: 5px; + background: rgba(0,0,0,0.1); + margin: 2px 0; + } + + & > p { + font: @colortheme_app-font-size @colortheme_font; + margin: 0; + padding: 0; + display: block; + } + + .cp-toolbar-userlist-others { + display: flex; + flex-flow: column; + margin: 10px 0; + margin-bottom: 20px; + &>span { + padding: 5px; + margin: 2px 0; + background: rgba(0,0,0,0.1); + .avatar_main(30px); + .cp-avatar-default, media-tag { + margin-right: 5px; + } + } + } + .cp-toolbar-userlist-friend { + display: inline-block; + width: 20px; + } + } + + .addToolbarColors (@color, @bg-color) { + .cp-toolbar-userlist-drawer { + background-color: @bgcolor; + color: @color; + .cp-toolbar-userlist-drawer-close { + color: @color; + } + h2 { + background-color: darken(@bgcolor, 10%); + color: @color; + } + .cp-toolbar-userlist-friend { + &:hover { + color: darken(@color, 15%); + } + } + } + .cp-toolbar { + background-color: @bgcolor; + color: @color; + .cp-toolbar-spinner { + font-size: @colortheme_app-font-size; + color: @color; + } + .cp-toolbar-limit { + text-shadow: -1px 0 @color, 0 1px @color, 1px 0 @color, 0 -1px @color; + } + .cp-toolbar-leftside, .cp-toolbar-rightside { + background-color: lighten(@bgcolor, 8%); + button:hover, button.cp-toolbar-button-active { + background-color: @bgcolor; + } + } + .cp-toolbar-title-hoverable:hover { + .cp-toolbar-title-editable, .cp-toolbar-title-edit { + cursor: text; + border: 1px solid darken(@bgcolor, 15%); + background: darken(@bgcolor, 10%); + transition: all 0.15s; + color: @color; + } + .cp-toolbar-title-editable { + cursor: text; + } + } + .cp-toolbar-title-save { + border: 1px solid darken(@bgcolor, 15%); + background: darken(@bgcolor, 10%); + color: @color; + &:hover { + background: darken(@bgcolor, 5%); + } + } + input { + border: 1px solid darken(@bgcolor, 15%); + background: darken(@bgcolor, 10%); + color: @color; + } + .cp-dropdown-content.cp-dropdown-left a { + color: black; + } + } + } + + &.cp-app-pad { + @bgcolor: @colortheme_pad-bg; + @color: @colortheme_pad-color; + .addToolbarColors(@color, @bgcolor); + } + &.cp-app-code { + @bgcolor: @colortheme_code-bg; + @color: @colortheme_code-color; + .addToolbarColors(@color, @bgcolor); + } + &.cp-app-slide { + @bgcolor: @colortheme_slide-bg; + @color: @colortheme_slide-color; + .addToolbarColors(@color, @bgcolor); + } + &.cp-app-poll { + @bgcolor: @colortheme_poll-bg; + @color: @colortheme_poll-color; + .addToolbarColors(@color, @bgcolor); + } + &.cp-app-whiteboard { + @bgcolor: @colortheme_whiteboard-bg; + @color: @colortheme_whiteboard-color; + .addToolbarColors(@color, @bgcolor); + } + &.cp-app-drive { + @bgcolor: @colortheme_drive-bg; + @color: @colortheme_drive-color; + .addToolbarColors(@color, @bgcolor); + } + &.cp-app-file { + @bgcolor: @colortheme_file-bg; + @color: @colortheme_file-color; + .addToolbarColors(@color, @bgcolor); + } + &.cp-app-contacts { + @bgcolor: @colortheme_friends-bg; + @color: @colortheme_friends-color; + .addToolbarColors(@color, @bgcolor); + } + &.cp-app-settings { + @bgcolor: @colortheme_settings-bg; + @color: @colortheme_settings-color; + .addToolbarColors(@color, @bgcolor); + } + &.cp-app-profile { + @bgcolor: @colortheme_profile-bg; + @color: @colortheme_profile-color; + .addToolbarColors(@color, @bgcolor); + } + &.cp-app-todo { + @bgcolor: @colortheme_todo-bg; + @color: @colortheme_todo-color; + .addToolbarColors(@color, @bgcolor); + } + + + /* TODO: move to the slide LESS page */ + .cp-app-slide { + @media screen and (max-width: @browser_media-medium-screen) { + .cp-toolbar-leftside { + flex-flow: row wrap; + width: 175px; + height: auto; + .cp-toolbar-spinner { order: 0; } + } + .cp-toolbar-rightside { + height: 2*@toolbar_line-height; + } + } + @media screen and (max-width: 320px) { + .cp-toolbar-leftside { + flex-flow: row wrap; + width: 175px; + height: auto; + padding-top: @toolbar_line-height; + .cp-toolbar-spinner { order: 0; } + } + .cp-toolbar-rightside { + height: auto; + } + } + } + + .cp-toolbar { + * { + outline-width: 0; + &:focus { + outline-width: 0; + } + } + + @toolbar-green: #5cb85c; + + box-sizing: border-box; + padding: 0px; + + //background-color: #BBBBFF; + background-color: @colortheme_default-bg; + color: @colortheme_default-color; + + + + .fa { + font: normal normal normal 14px/1 FontAwesome; + font-family: FontAwesome; + } + + .unselectable(); + + font: @toolbar_button-font; + width: 100%; + z-index: 9001; + + .cp-dropdown-container { + //height: 100%; + //display: inline-block; + button { + height: 100%; + border-radius: 0; + margin: 0; + background: transparent; + } + } + + button { + transition: all 0.15s; + .unselectable(); + &.cp-toolbar-hidden { + display: none; + } + .cp-toolbar-drawer { + display: none; + } + // Bootstrap 4 colors (btn-secondary) + border: 1px solid transparent; + color: inherit; + font: @toolbar_button-font; + * { + color: inherit; + font: @toolbar_button-font; + } + } + .cp-toolbar-rightside button, .cp-toolbar-leftside button { + background: transparent; + &:hover { + background-color: rgba(50,50,50,0.3); + } + } + + .cp-toolbar-limit { + box-sizing: border-box; + height: 26px; + width: 26px; + display: inline-block; + padding: 3px; + margin: 0px 3px 0 6px; + vertical-align: middle; + line-height: @toolbar_top-height; + span { + color: red; + cursor: pointer; + margin: auto; + font-size: 20px; + } + } + + div { + white-space: normal; + } + + button, select { + height: @toolbar_line-height; + box-sizing: border-box; + padding: 3px 10px; + margin: 0; + + } + + .cp-toolbar-rightside-button { + float: right; + cursor: pointer; + } + + select { + border: 0px; + margin-left: 5px; + margin-right: 5px; + padding-left: 5px; + border: 1px solid #A6A6A6; + border-bottom-color: #979797; + vertical-align: top; + box-sizing: content-box; + option { + height: 24px; + } + } + + &.cp-toolbar-notitle { + .cp-toolbar-top-filler { + flex: 1; + } + } + &:not(.cp-toolbar-notitle) { + .cp-toolbar-top { + @media screen and (max-width: @browser_media-medium-screen) { + flex-wrap: wrap; + height: auto; + .cp-toolbar-top-filler { + flex: 1; + } + .cp-toolbar-title { + flex: auto; + width: 100%; + order: 10; + height: @toolbar_line-height; + line-height: initial; + margin: 0; + .cp-toolbar-title-hoverable { + width: 100%; + } + .cp-toolbar-title-editable { + max-width: ~"calc(100vw - 26px)"; + display: inline-block; + overflow: hidden; + text-overflow: ellipsis; + font-size: @colortheme_app-font-size; + height: @toolbar_line-height; + box-sizing: border-box; + line-height: 20px; + } + .cp-toolbar-title-edit, .cp-toolbar-title-save { + box-sizing: border-box; + height: @toolbar_line-height; + line-height: @colortheme_app-font-size; + display: inline-block; + + .fa { + font-size: @colortheme_app-font-size; + } + } + input { + height: @toolbar_line-height; + font-size: @colortheme_app-font-size; + flex: 1; + max-width: none; + } + } + } + } + } + } + + .cp-toolbar-top { + display: flex; + flex-flow: row; + height: @toolbar_top-height; + position: relative; + .cp-toolbar-top-filler { + height: 100%; + display: inline-block; + order: 4; + //flex: 1; + } + .cp-toolbar-title { + flex: 1; + overflow: hidden; + text-overflow: ellipsis; + order: 3; + height: 100%; + display: inline-flex; + align-items: center; + line-height: @toolbar_top-height; + margin: 0 10px; + .cp-toolbar-title-value { + font-size: 25px; + vertical-align: middle; + line-height: 25px; + white-space: nowrap; + } + .cp-toolbar-title-value-page { + padding: 0 5px; + } + .cp-toolbar-title-edit, .cp-toolbar-title-save { + display: flex; + align-items: center; + font-size: 20px; + vertical-align: middle; + line-height: 20px; + .fa { + font-size: 20px; + } + } + .cp-toolbar-title-readonly { + margin-left: 10px; + font-size: 25px; + font-style: italic; + white-space: nowrap; + } + .cp-toolbar-title-hoverable { + display: inline-flex; + overflow: hidden; + } + .cp-toolbar-title-edit { + cursor: pointer; + border: 1px solid transparent; + padding: 5px; + border-collapse: collapse; + span { + cursor: pointer; + } + } + .cp-toolbar-title-save { + cursor: pointer; + padding: 5px; + border-collapse: collapse; + span { + cursor: pointer; + } + } + .cp-toolbar-title-editable { + overflow: hidden; + text-overflow: ellipsis; + border: 1px solid transparent; + padding: 5px; + border-collapse: collapse; + } + input { + max-width: ~"calc(100% - 40px)"; + flex: 1; + font-size: 1.5em; + vertical-align: middle; + box-sizing: border-box; + cursor: auto; + width: 300px; + font-size: 20px; + padding: 5px 5px; + height: 40px; + } + } + .cp-toolbar-link, .cp-toolbar-new { + font-size: 48px; + line-height: 64px; + width: @toolbar_top-height; + height: @toolbar_top-height; + padding: 0; + box-sizing: border-box; + display: inline-block; + + color: white; + a { + color: white; + } + transition: all 0.15s; + } + .cp-toolbar-new { + background-color: rgba(0,0,0,0.2); + &:hover { + background-color: rgba(0,0,0,0.3); + } + text-align: center; + font-size: 32px; + margin-left: 10px; + &> button { + display: flex; + align-items: center; + justify-content: center; + width: 64px; + height: 64px !important; // Allows us to have a nice square outline when focused + font-size: 1em; + color: inherit; + height: auto; + padding: 0px; + margin: 0; + &::before { + width: 100%; + text-align: center; + padding-top: 4px; + } + &:hover { + background-color: initial; + border-color: transparent; + } + span { + vertical-align: top; + font-size: 1em; + text-decoration: none; + color: inherit; + } + } + } + .cp-toolbar-link { + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + background-color: rgba(0,0,0,0.4); + &:hover { + background-color: rgba(0,0,0,0.5); + } + order: 1; + .fa { + margin: 0; + } + a.cp-toolbar-link-logo { + cursor: pointer; + display: inline-flex; + text-decoration: none; + height: auto; + padding: 10px; + + img { + cursor: pointer; + height: 100%; + width: 100%; + } + } + } + .cp-toolbar-user { + height: 100%; + display: inline-flex; + order: 5; + line-height: @toolbar_top-height; + color: white; + .cp-toolbar-new { order: 2; } + .cp-toolbar-user-dropdown { order: 3; } + .cp-toolbar-backup { order: 4; } // TODO drive migration to secure iframe + &> * { + display: inline-block; + height: 100%; + vertical-align: top; + } + .cp-toolbar-user-dropdown { + z-index: 10000; + //margin-left: 20px; + height: 64px; + width: 64px; + padding: 0px; + box-sizing: border-box; + text-align: center; + background-color: rgba(0,0,0,0.3); + transition: all 0.15s; + &:hover { + background-color: rgba(0,0,0,0.4); + } + .cp-dropdown-content { + margin: 0; + } + button { + display: flex; + justify-content: center; + align-items: center; + height: 64px; + width: 64px; + padding: 0; + span { + text-align: center; + width: 100%; + cursor: default; + font-size: 32px; + } + &.cp-avatar { + .avatar_main(48px); + &.cp-userlist-clickable { + cursor: pointer; + &:hover { + background-color: rgba(0,0,0,0.3); + } + } + .cp-toolbar-userlist-rightcol { + order: 10; + flex: 1; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + display: flex; + flex-flow: column; + .cp-toolbar-userlist-name { + flex: 1; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + .cp-toolbar-userlist-friend { + padding: 0; + } + } + media-tag { + margin: 8px; + } + border: 0; + } + } + } + .cp-toolbar-backup { + margin: 0; + border-radius: 0; + background: transparent; + &:hover { + background-color: rgba(0,0,0,0.2); + } + } + } + } + + .cp-toolbar-leftside { + //height: @toolbar_line-height; + &:empty { + height: 0; + } + float: left; + display: inline-flex; + align-items: center; + //margin-bottom: -1px; + .cp-toolbar-users { + pre { + /* needed for ckeditor */ + white-space: pre; + margin: 5px 0px; + } + } + button { + margin: 0px; + border-radius: 0; + height: 100%; + } + .cp-dropdown-content { + margin-top: -1px; + } + + & > span { + height: @toolbar_line-height; + } + + #cp-toolbar-userlist-drawer-open { order: 1; } + .cp-toolbar-share-button { order: 2; } + .cp-toolbar-spinner { order: 3; } + + #cp-toolbar-userlist-drawer-open button { + width: 125px; + text-align: center; + } + .cp-toolbar-share-button button { + width: 50px; + text-align: center; + } + } + .cp-toolbar-rightside { + min-height: @toolbar_line-height; + overflow: hidden; + &:empty { + min-height: 0; + height: 0; + } + text-align: right; + /*&> button { + height: 100%; + margin: 0; + border-radius: 0; + padding: 0 10px; + }*/ + .cp-toolbar-drawer-content:empty ~ .cp-toolbar-drawer-button { + display: none; + } + .cp-toolbar-drawer-content { + box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2); + position: absolute; + right:0px; + margin-top: @toolbar_line-height; + min-width: 50px; + background: @colortheme_dropdown-bg; + display: flex; + flex-flow: column; + z-index:10000; + color: black; + .fa { + font-size: 17px; + } + &> span { + box-sizing: border-box; + min-width: 150px; + height: @toolbar_line-height; + border-radius: 0; + border: 0; + } + button { + padding: 5px 16px; + text-align: left; + margin: 0; + border-radius: 0; + border: 0; + width: 100%; + line-height: 1em; + .cp-toolbar-drawer-element { + margin-left: 10px; + display: inline; + vertical-align: top; + } + &:hover { + background-color: @colortheme_dropdown-bg-hover !important; + color: @colortheme_dropdown-color; + } + } + } + } + .cp-toolbar-spinner { + line-height: @toolbar_line-height; + padding: 0 20px; + &> span.fa { + height: 20px; + width: 20px; + //margin: 8px; + line-height: 20px; + font-size: 20px; + text-align: center; + } + } + .cp-toolbar-readonly { + margin-right: 5px; + font-weight: bold; + text-transform: uppercase; + } + .cp-toolbar-share { + a { + .fa { + margin-right: 5px; + } + } + } + +} + diff --git a/customize.dist/src/less2/main.less b/customize.dist/src/less2/main.less index 3cab13fbb..9b4f18ffe 100644 --- a/customize.dist/src/less2/main.less +++ b/customize.dist/src/less2/main.less @@ -10,3 +10,14 @@ body.cp-page-what-is-cryptpad { @import "./pages/page-what-is-cryptpad.less"; } body.cp-page-about { @import "./pages/page-about.less"; } body.cp-page-privacy { @import "./pages/page-privacy.less"; } body.cp-page-terms { @import "./pages/page-terms.less"; } + +// Set the HTML style for the apps which shouldn't have a body scrollbar +html.cp-app-noscroll { + @import "./include/app-noscroll.less"; + .noscroll_main(); +} + +body.cp-app-pad { @import "../../../pad/app-pad.less"; } +body.cp-app-code { @import "../../../code/app-code.less"; } +body.cp-app-filepicker { @import "../../../filepicker/app-filepicker.less"; } + diff --git a/www/assert/index.html b/www/assert/index.html index f4867629f..eb0bd659f 100644 --- a/www/assert/index.html +++ b/www/assert/index.html @@ -19,6 +19,11 @@ .error { border: 1px solid red; } + .thumb { + max-height: 150px; + width: auto; + border: 3px solid black; + } @@ -36,6 +41,7 @@

"pewpewpew"

+

Test 2

@@ -45,3 +51,6 @@

Here is a macro

+ + + diff --git a/www/assert/main.js b/www/assert/main.js index 7124f58d9..6f924f1b0 100644 --- a/www/assert/main.js +++ b/www/assert/main.js @@ -5,8 +5,9 @@ define([ 'json.sortify', '/common/cryptpad-common.js', '/drive/tests.js', - '/common/test.js' -], function ($, Hyperjson, TextPatcher, Sortify, Cryptpad, Drive, Test) { + '/common/test.js', + '/common/common-thumbnail.js', +], function ($, Hyperjson, TextPatcher, Sortify, Cryptpad, Drive, Test, Thumb) { window.Hyperjson = Hyperjson; window.TextPatcher = TextPatcher; window.Sortify = Sortify; @@ -207,6 +208,31 @@ define([ return cb(true); }, "version 2 hash failed to parse correctly"); + assert(function (cb) { + var getBlob = function (url, cb) { + var xhr = new XMLHttpRequest(); + xhr.open("GET", url, true); + xhr.responseType = "blob"; + xhr.onload = function () { + cb(void 0, this.response); + }; + xhr.send(); + }; + + var $img = $('img#thumb-orig'); + getBlob($img.attr('src'), function (e, blob) { + console.log(e, blob); + Thumb.fromImageBlob(blob, function (e, thumb) { + console.log(thumb); + var th = new Image(); + th.src = URL.createObjectURL(thumb); + th.onload = function () { + $(document.body).append($(th).addClass('thumb')); + cb(th.width === Thumb.dimension && th.height === Thumb.dimension); + }; + }); + }); + }); Drive.test(assert); diff --git a/www/code/app-code.less b/www/code/app-code.less new file mode 100644 index 000000000..b3fab41b5 --- /dev/null +++ b/www/code/app-code.less @@ -0,0 +1,95 @@ +@import (once) "../../customize/src/less2/include/browser.less"; +@import (once) "../../customize/src/less2/include/toolbar.less"; +@import (once) "../../customize/src/less2/include/markdown.less"; +@import (once) '../../customize/src/less2/include/fileupload.less'; +@import (once) '../../customize/src/less2/include/alertify.less'; + +.toolbar_main(); +.fileupload_main(); +.alertify_main(); + +// body +&.cp-app-code { + display: flex; + flex-flow: column; + max-height: 100%; + min-height: auto; + + .CodeMirror { + display: inline-block; + height: 100%; + width: 50%; + min-width: 20%; + max-width: 80%; + resize: horizontal; + font-size: initial; + } + .CodeMirror.fullPage { + //min-width: 100%; + max-width: 100%; + resize: none; + flex: 1; + } + .CodeMirror-focused .cm-matchhighlight { + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFklEQVQI12NgYGBgkKzc8x9CMDAwAAAmhwSbidEoSQAAAABJRU5ErkJggg==); + background-position: bottom; + background-repeat: repeat-x; + } + #cp-app-code-editor { + flex: 1; + display: flex; + flex-flow: row; + height: 100%; + overflow: hidden; + } + #cp-app-code-preview { + flex: 1; + padding: 5px 20px; + overflow: auto; + display: inline-block; + height: 100%; + border-left: 1px solid black; + box-sizing: border-box; + font-family: Calibri,Ubuntu,sans-serif; + word-wrap: break-word; + position: relative; + media-tag { + * { + max-width:100%; + } + iframe[type="application/pdf"] { + max-height:50vh; + } + } + } + + #cp-app-code-preview-content { + max-width: 40vw; + margin: 1em auto; + + .markdown_preformatted-code; + .markdown_gfm-table(black); + } + + .cp-splitter { + position: absolute; + height: 100%; + width: 8px; + top: 0; + left: 0; + + cursor: col-resize; + } + + @media (max-width: @browser_media-medium-screen) { + .CodeMirror { + flex: 1; + max-width: 100%; + resize: none; + } + #cp-app-code-preview { + display: none !important; + } +} +} + diff --git a/www/code/index.html b/www/code/index.html index 0f8824bd4..a564c32b7 100644 --- a/www/code/index.html +++ b/www/code/index.html @@ -1,41 +1,39 @@ - + CryptPad - + -
- -
+ +
diff --git a/www/oldcode/inner.html b/www/oldcode/inner.html new file mode 100644 index 000000000..99bec8d08 --- /dev/null +++ b/www/oldcode/inner.html @@ -0,0 +1,17 @@ + + + + + + + + + +
+
+ +
+
+ + + diff --git a/www/oldcode/inner.js b/www/oldcode/inner.js new file mode 100644 index 000000000..d36a7acd2 --- /dev/null +++ b/www/oldcode/inner.js @@ -0,0 +1,40 @@ +define([ + 'jquery', + + 'cm/lib/codemirror', + + 'css!/bower_components/components-font-awesome/css/font-awesome.min.css', + 'css!/bower_components/bootstrap/dist/css/bootstrap.min.css', + 'less!/code/code.less', + 'less!/customize/src/less/toolbar.less', + 'less!/customize/src/less/cryptpad.less', + + 'css!cm/lib/codemirror.css', + 'css!cm/addon/dialog/dialog.css', + 'css!cm/addon/fold/foldgutter.css', + + 'cm/mode/markdown/markdown', + 'cm/addon/mode/loadmode', + 'cm/mode/meta', + 'cm/addon/mode/overlay', + 'cm/addon/mode/multiplex', + 'cm/addon/mode/simple', + 'cm/addon/edit/closebrackets', + 'cm/addon/edit/matchbrackets', + 'cm/addon/edit/trailingspace', + 'cm/addon/selection/active-line', + 'cm/addon/search/search', + 'cm/addon/search/match-highlighter', + 'cm/addon/search/searchcursor', + 'cm/addon/dialog/dialog', + 'cm/addon/fold/foldcode', + 'cm/addon/fold/foldgutter', + 'cm/addon/fold/brace-fold', + 'cm/addon/fold/xml-fold', + 'cm/addon/fold/markdown-fold', + 'cm/addon/fold/comment-fold', + 'cm/addon/display/placeholder', +], function ($, CMeditor) { + window.CodeMirror = CMeditor; + $('.loading-hidden').removeClass('loading-hidden'); +}); diff --git a/www/oldcode/main.js b/www/oldcode/main.js new file mode 100644 index 000000000..5e06572b6 --- /dev/null +++ b/www/oldcode/main.js @@ -0,0 +1,559 @@ +define([ + 'jquery', + '/bower_components/chainpad-crypto/crypto.js', + '/bower_components/chainpad-netflux/chainpad-netflux.js', + '/bower_components/textpatcher/TextPatcher.js', + '/common/toolbar2.js', + 'json.sortify', + '/bower_components/chainpad-json-validator/json-ot.js', + '/common/cryptpad-common.js', + '/common/cryptget.js', + '/common/diffMarked.js', + + 'css!/bower_components/components-font-awesome/css/font-awesome.min.css', + 'less!/customize/src/less/cryptpad.less' +], function ($, Crypto, Realtime, TextPatcher, Toolbar, JSONSortify, JsonOT, Cryptpad, + Cryptget, DiffMd) { + var Messages = Cryptpad.Messages; + + var APP = window.APP = { + Cryptpad: Cryptpad, + }; + + $(function () { + Cryptpad.addLoadingScreen(); + + var ifrw = APP.ifrw = $('#pad-iframe')[0].contentWindow; + var stringify = function (obj) { + return JSONSortify(obj); + }; + + var toolbar; + var editor; + + var secret = Cryptpad.getSecrets(); + var readOnly = secret.keys && !secret.keys.editKeyStr; + if (!secret.keys) { + secret.keys = secret.key; + } + + var onConnectError = function () { + Cryptpad.errorLoadingScreen(Messages.websocketError); + }; + + var andThen = function (CMeditor) { + var $iframe = $('#pad-iframe').contents(); + var $contentContainer = $iframe.find('#editorContainer'); + var $previewContainer = $iframe.find('#previewContainer'); + var $preview = $iframe.find('#preview'); + $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 CodeMirror = Cryptpad.createCodemirror(ifrw, Cryptpad, null, CMeditor); + $iframe.find('.CodeMirror').addClass('fullPage'); + editor = CodeMirror.editor; + + 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 proxy = Cryptpad.getProxy(); + + var updateIndentSettings = APP.updateIndentSettings = function () { + var indentUnit = proxy.settings[indentKey]; + var useTabs = proxy.settings[useTabsKey]; + setIndentation( + typeof(indentUnit) === 'number'? indentUnit: 2, + typeof(useTabs) === 'boolean'? useTabs: false); + }; + + proxy.on('change', ['settings', indentKey], updateIndentSettings); + proxy.on('change', ['settings', useTabsKey], updateIndentSettings); + + var $bar = $('#pad-iframe')[0].contentWindow.$('#cme_toolbox'); + + var isHistoryMode = false; + + var setEditable = APP.setEditable = function (bool) { + if (readOnly && bool) { return; } + editor.setOption('readOnly', !bool); + }; + + var Title; + var UserList; + var Metadata; + + var config = { + initialState: '{}', + websocketURL: Cryptpad.getWebsocketURL(), + channel: secret.channel, + // our public key + validateKey: secret.keys.validateKey || undefined, + readOnly: readOnly, + crypto: Crypto.createEncryptor(secret.keys), + network: Cryptpad.getNetwork(), + transformFunction: JsonOT.validate, + }; + + 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 initializing = true; + + var stringifyInner = function (textValue) { + var obj = { + content: textValue, + 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 = $iframe.find('.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(); + Cryptpad.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'); + if (typeof(APP.updateIndentSettings) === 'function') { + APP.updateIndentSettings(); + } + }; + + config.onInit = function (info) { + UserList = Cryptpad.createUserList(info, config.onLocal, Cryptget, Cryptpad); + + var titleCfg = { getHeadingText: CodeMirror.getHeadingText }; + Title = Cryptpad.createTitle(titleCfg, config.onLocal, Cryptpad); + + Metadata = Cryptpad.createMetadata(UserList, Title, null, Cryptpad); + + var configTb = { + displayed: ['title', 'useradmin', 'spinner', 'lag', 'state', 'share', 'userlist', 'newpad', 'limit', 'upgrade'], + userList: UserList.getToolbarConfig(), + share: { + secret: secret, + channel: info.channel + }, + title: Title.getTitleConfig(), + common: Cryptpad, + readOnly: readOnly, + ifrw: ifrw, + realtime: info.realtime, + network: info.network, + $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; + + var editHash; + if (!readOnly) { + editHash = Cryptpad.getEditHashFromKeys(info.channel, secret.keys); + } + + /* 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 = Cryptpad.createButton('history', true, {histConfig: histConfig}); + $drawer.append($hist); + + /* save as template */ + if (!Cryptpad.isTemplate(window.location.href)) { + var templateObj = { + rt: info.realtime, + Crypt: Cryptget, + getTitle: Title.getTitle + }; + var $templateButton = Cryptpad.createButton('template', true, templateObj); + $rightside.append($templateButton); + } + + /* add an export button */ + var $export = Cryptpad.createButton('export', true, {}, CodeMirror.exportText); + $drawer.append($export); + + if (!readOnly) { + /* add an import button */ + var $import = Cryptpad.createButton('import', true, {}, CodeMirror.importText); + $drawer.append($import); + } + + /* add a forget button */ + var forgetCb = function (err) { + if (err) { return; } + setEditable(false); + }; + var $forgetPad = Cryptpad.createButton('forget', true, {}, forgetCb); + $rightside.append($forgetPad); + + var fileDialogCfg = { + $body: $iframe.find('body'), + onSelect: function (href) { + var parsed = Cryptpad.parsePadUrl(href); + var hexFileName = Cryptpad.base64ToHex(parsed.hashData.channel); + var src = '/blob/' + hexFileName.slice(0,2) + '/' + hexFileName; + var mt = ''; + editor.replaceSelection(mt); + }, + data: APP + }; + APP.$mediaTagButton = $('