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/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..cb773538e --- /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: 10000; + 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..dd7ffa1b9 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 "../../../code2/app-code.less"; } +body.cp-app-filepicker { @import "../../../filepicker/app-filepicker.less"; } + diff --git a/www/code2/app-code.less b/www/code2/app-code.less new file mode 100644 index 000000000..b3fab41b5 --- /dev/null +++ b/www/code2/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/code2/code.less b/www/code2/code.less deleted file mode 100644 index 36883f377..000000000 --- a/www/code2/code.less +++ /dev/null @@ -1,102 +0,0 @@ -@import "/customize/src/less/variables.less"; -@import "/customize/src/less/mixins.less"; -@import "/common/markdown.less"; -@import "/common/file-dialog.less"; - -html, body{ - height: 100%; - width: 100%; - padding: 0px; - margin: 0px; - overflow: hidden; - box-sizing: border-box; - position: relative; -} -body { - display: flex; - flex-flow: column; - max-height: 100%; - min-height: auto; -} - -@slideTime: 500ms; -.CodeMirror { - display: inline-block; - height: 100%; - width: 50%; - &.transition { - transition: width @slideTime, min-width @slideTime, max-width @slideTime; - } - 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; -} -#editorContainer { - flex: 1; - display: flex; - flex-flow: row; - height: 100%; - overflow: hidden; -} -#previewContainer { - 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; - } - } -} - -#preview { - 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: @media-medium-screen) { - .CodeMirror { - flex: 1; - max-width: 100%; - resize: none; - } - #previewContainer { - display: none !important; - } -} - diff --git a/www/code2/inner.html b/www/code2/inner.html index d771dc7ef..0941343b0 100644 --- a/www/code2/inner.html +++ b/www/code2/inner.html @@ -1,15 +1,17 @@ - + - -
-
+ +
+
-
+
+
+
diff --git a/www/code2/inner.js b/www/code2/inner.js index f85eae479..3fc012eae 100644 --- a/www/code2/inner.js +++ b/www/code2/inner.js @@ -17,9 +17,7 @@ define([ 'css!/bower_components/bootstrap/dist/css/bootstrap.min.css', 'css!/bower_components/components-font-awesome/css/font-awesome.min.css', - 'less!/customize/src/less/cryptpad.less', - 'less!/customize/src/less/toolbar.less', - 'less!/code2/code.less', + 'less!/customize/src/less2/main.less', 'css!cm/lib/codemirror.css', 'css!cm/addon/dialog/dialog.css', @@ -88,9 +86,9 @@ define([ var isHistoryMode = false; - var $contentContainer = $('#editorContainer'); - var $previewContainer = $('#previewContainer'); - var $preview = $('#preview'); + 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); @@ -370,7 +368,7 @@ define([ common.initFilePicker(common, fileDialogCfg); APP.$mediaTagButton = $('