From 617c4b60440313610cfdfff06781d7f34ac5449a Mon Sep 17 00:00:00 2001 From: Caleb James DeLisle Date: Thu, 7 Dec 2017 19:00:13 +0100 Subject: [PATCH] CSS refactorings and pad-is-not-pinned work --- customize.dist/messages.js | 2 +- .../src/less2/include/alertify.less | 6 +- .../src/less2/include/colortheme.less | 2 +- .../src/less2/include/modal-theme.less | 4 - customize.dist/src/less2/include/modal.less | 10 +- customize.dist/src/less2/include/toolbar.less | 297 ++++++++---------- .../src/less2/include/variables.less | 6 + customize.dist/translations/messages.js | 2 +- www/code/app-code.less | 8 +- www/common/toolbar3.js | 15 +- www/contacts/app-contacts.less | 8 +- www/drive/app-drive.less | 8 +- www/file/app-file.less | 8 +- www/pad/app-pad.less | 12 +- www/poll/app-poll.less | 14 +- www/profile/app-profile.less | 7 +- www/settings/app-settings.less | 8 +- www/slide/app-slide.less | 8 +- www/todo/app-todo.less | 7 +- www/whiteboard/app-whiteboard.less | 8 +- 20 files changed, 210 insertions(+), 230 deletions(-) delete mode 100644 customize.dist/src/less2/include/modal-theme.less diff --git a/customize.dist/messages.js b/customize.dist/messages.js index 7e84dd01d..588b259b0 100644 --- a/customize.dist/messages.js +++ b/customize.dist/messages.js @@ -93,7 +93,7 @@ define(req, function(Util, Default, Language) { var text = messages[key]; if (typeof(text) === 'string') { return text.replace(/\{(\d+)\}/g, function (str, p1) { - return argArray[p1] || null; + return typeof(argArray[p1]) === 'string' ? argArray[p1] : ''; }); } else { return text; diff --git a/customize.dist/src/less2/include/alertify.less b/customize.dist/src/less2/include/alertify.less index 63751fed2..ed0f1baf9 100644 --- a/customize.dist/src/less2/include/alertify.less +++ b/customize.dist/src/less2/include/alertify.less @@ -1,6 +1,6 @@ @import (once) "./colortheme-all.less"; @import (once) "./browser.less"; -@import (once) "./modal-theme.less"; +@import (once) "./variables.less"; .alertify_main () { @max-z-index: 2147483647; @@ -21,8 +21,8 @@ @alertify-input-bg: @colortheme_modal-input; @alertify-input-fg: @colortheme_modal-fg; - @alertify_padding-base: @modal_padding; - @alertify_box-shadow: @modal_shadow; + @alertify_padding-base: @variables_padding; + @alertify_box-shadow: @variables_shadow; // Logs to show that something has happened // These show only once diff --git a/customize.dist/src/less2/include/colortheme.less b/customize.dist/src/less2/include/colortheme.less index 8cebdaf20..42cbb26b0 100644 --- a/customize.dist/src/less2/include/colortheme.less +++ b/customize.dist/src/less2/include/colortheme.less @@ -37,7 +37,7 @@ @colortheme_dropdown-bg-hover: #f1f1f1; @colortheme_dropdown-bg-active: #e8e8e8; -// Apps +// Apps, these colors are used for customizing the toolbar for the apps. @colortheme_pad-bg: #1c4fa0; @colortheme_pad-color: #fff; diff --git a/customize.dist/src/less2/include/modal-theme.less b/customize.dist/src/less2/include/modal-theme.less deleted file mode 100644 index 1ed183d2d..000000000 --- a/customize.dist/src/less2/include/modal-theme.less +++ /dev/null @@ -1,4 +0,0 @@ -// 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 070660291..3bd674527 100644 --- a/customize.dist/src/less2/include/modal.less +++ b/customize.dist/src/less2/include/modal.less @@ -1,12 +1,12 @@ @import (once) "./colortheme-all.less"; -@import (once) "./modal-theme.less"; +@import (once) "./variables.less"; .modal_base() { font-family: @colortheme_font; background-color: @colortheme_modal-bg; color: @colortheme_modal-fg; - box-shadow: @modal_shadow; + box-shadow: @variables_shadow; a { color: @colortheme_modal-link; @@ -31,9 +31,9 @@ .cp-modal { background-color: @colortheme_modal-bg; color: @colortheme_modal-fg; - box-shadow: @modal_shadow; + box-shadow: @variables_shadow; - padding: @modal_padding; + padding: @variables_padding; position: absolute; top: 15vh; bottom: 15vh; @@ -71,7 +71,7 @@ position: absolute; top: 0; right: 0; - margin: @modal_padding; + margin: @variables_padding; cursor: pointer; } } diff --git a/customize.dist/src/less2/include/toolbar.less b/customize.dist/src/less2/include/toolbar.less index 37d294c3b..e97e5c7a7 100644 --- a/customize.dist/src/less2/include/toolbar.less +++ b/customize.dist/src/less2/include/toolbar.less @@ -7,9 +7,12 @@ @import (once) "./icon-colors.less"; @import (once) "./tools.less"; -@_cp-toolbar-color-warn: black; - -.toolbar_main () { +.toolbar_main ( + @color: @colortheme_default-color, // Color of the text for the toolbar + @bg-color: @colortheme_default-bg, // color of the toolbar background + @warn-color: @colortheme_default-warn, // color of the warning text in the toolbar + @barWidth: 600px // width of the toolbar +) { @toolbar_line-height: 32px; @toolbar_top-height: 64px; @@ -52,7 +55,7 @@ } .cp-toolbar-userlist-drawer { - background-color: @colortheme_default-bg; + background-color: @bg-color; font: @colortheme_app-font-size @colortheme_font; min-width: 175px; width: 175px; @@ -170,174 +173,51 @@ } } - .addToolbarColors (@color, @bg-color, @barWidth: 600px) { - .cp-markdown-toolbar { - height: @toolbar_line-height; - background-color: lighten(@bg-color, 20%); - display: none; - button { - height: @toolbar_line-height !important; - outline: 0; - color: @color; - .toolbar_button; - font: normal normal normal 14px/1 FontAwesome; - &:hover { - background-color: lighten(@bgcolor, 8%); - } - &.cp-markdown-help { float: right; } - } - } - .cp-toolbar-userlist-drawer { - background-color: @bgcolor; + // TODO(cjd) This ought to be in a less file for markdown-based editors + .cp-markdown-toolbar { + height: @toolbar_line-height; + background-color: lighten(@bg-color, 20%); + display: none; + button { + height: @toolbar_line-height !important; + outline: 0; color: @color; - .cp-toolbar-userlist-drawer-close { - color: @color; - } - h2 { - background-color: darken(@bgcolor, 10%); - color: @color; - } - .cp-toolbar-userlist-name-input { - background-color: darken(@bg-color, 10%); - color: @color; - } - .cp-toolbar-userlist-name-edit { - color: contrast(@color, - lighten(@color, 20%), - darken(@color, 20%)); - background: transparent; - &:hover { - color: @color; - } - } - .cp-toolbar-userlist-friend { - &:hover { - color: darken(@color, 15%); - } + .toolbar_button; + font: normal normal normal 14px/1 FontAwesome; + &:hover { + background-color: lighten(@bg-color, 8%); } + &.cp-markdown-help { float: right; } } - .cp-toolbar { - background-color: @bgcolor; + } + .cp-toolbar-userlist-drawer { + background-color: @bg-color; + color: @color; + .cp-toolbar-userlist-drawer-close { color: @color; - .cp-toolbar-spinner { - font-size: @colortheme_app-font-size; + } + h2 { + background-color: darken(@bg-color, 10%); + color: @color; + } + .cp-toolbar-userlist-name-input { + background-color: darken(@bg-color, 10%); + color: @color; + } + .cp-toolbar-userlist-name-edit { + color: contrast(@color, + lighten(@color, 20%), + darken(@color, 20%)); + background: transparent; + &:hover { color: @color; } - .cp-toolbar-limit { - text-shadow: -1px 0 @color, 0 1px @color, 1px 0 @color, 0 -1px @color; - color: @_cp-toolbar-color-warn; - } - .cp-toolbar-leftside, .cp-toolbar-rightside { - background-color: lighten(@bgcolor, 8%); - button:hover, button.cp-toolbar-button-active { - background-color: @bgcolor; - } - } - .cp-toolbar-rightside { - @media screen and (max-width: @barWidth) { // 450px - flex-wrap: wrap; - height: auto; - width: 100%; - } - } - .cp-pad-not-pinned { - padding-left: 20px; - font-size: @colortheme_app-font-size; - color: @_cp-toolbar-color-warn; - a { - font-size: @colortheme_app-font-size; - font-weight: bold; - color: @_cp-toolbar-color-warn; - &:hover { - text-decoration: underline; - } - } - } - .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, 700px); - } - &.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); + .cp-toolbar-userlist-friend { + &:hover { + color: darken(@color, 15%); + } + } } .cp-toolbar { @@ -355,12 +235,8 @@ display: flex; flex-wrap: wrap; justify-content: space-between; - - //background-color: #BBBBFF; - background-color: @colortheme_default-bg; - color: @colortheme_default-color; - - + background-color: @bg-color; + color: @color; .fa { font: normal normal normal 14px/1 FontAwesome; @@ -487,6 +363,56 @@ } } } + + .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; + color: @warn-color; + } + .cp-toolbar-leftside, .cp-toolbar-rightside { + background-color: lighten(@bg-color, 8%); + button:hover, button.cp-toolbar-button-active { + background-color: @bg-color; + } + } + .cp-toolbar-rightside { + @media screen and (max-width: @barWidth) { // 450px + flex-wrap: wrap; + height: auto; + width: 100%; + } + } + .cp-toolbar-title-hoverable:hover { + .cp-toolbar-title-editable, .cp-toolbar-title-edit { + cursor: text; + border: 1px solid darken(@bg-color, 15%); + background: darken(@bg-color, 10%); + transition: all 0.15s; + color: @color; + } + .cp-toolbar-title-editable { + cursor: text; + } + } + .cp-toolbar-title-save { + border: 1px solid darken(@bg-color, 15%); + background: darken(@bg-color, 10%); + color: @color; + &:hover { + background: darken(@bg-color, 5%); + } + } + input { + border: 1px solid darken(@bg-color, 15%); + background: darken(@bg-color, 10%); + color: @color; + } + .cp-dropdown-content.cp-dropdown-left a { + color: black; + } } .cp-toolbar-top { @@ -578,6 +504,35 @@ padding: 5px 5px; height: 40px; } + .cp-pad-not-pinned { + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + + align-self: right; + padding-left: 20px; + padding-left: 5px; + font-size: @colortheme_app-font-size; + color: @warn-color; + .cp-pnp-msg { + padding-left: 5px; + a { + font-size: @colortheme_app-font-size; + font-weight: bold; + color: @warn-color; + &:hover { + text-decoration: underline; + } + } + @media screen and (max-width: (@browser_media-not-big)) { + display: none; + } + } + @media screen and (max-width: (@browser_media-not-big)) { + overflow: visible; + } + + } } .cp-toolbar-link, .cp-toolbar-new { font-size: 48px; diff --git a/customize.dist/src/less2/include/variables.less b/customize.dist/src/less2/include/variables.less index 3aee02492..ba6c642e2 100644 --- a/customize.dist/src/less2/include/variables.less +++ b/customize.dist/src/less2/include/variables.less @@ -1,3 +1,9 @@ +// This is a file for generic constants which we didn't want to hardcode everywhere. +// However, unlike colortheme, customizing these variables will cause breakage. + // Elements size @variables_bar-height: 32px; +// Used in modal.less and alertify.less +@variables_padding: 12px; +@variables_shadow: 0 8px 32px 0 rgba(0,0,0,.4); diff --git a/customize.dist/translations/messages.js b/customize.dist/translations/messages.js index 90ce1871e..5e6034d8b 100644 --- a/customize.dist/translations/messages.js +++ b/customize.dist/translations/messages.js @@ -31,7 +31,7 @@ define(function () { out.typeError = "This pad is not compatible with the selected application"; out.onLogout = 'You are logged out, click here to log in
or press Escape to access your pad in read-only mode.'; out.wrongApp = "Unable to display the content of that realtime session in your browser. Please try to reload that page."; - out.padNotPinned = 'This pad will expire in 3 months, login or register to preserve it.'; + out.padNotPinned = 'This pad will expire in 3 months, {0}login{1} or {2}register{3} to preserve it.'; out.loading = "Loading..."; out.error = "Error"; diff --git a/www/code/app-code.less b/www/code/app-code.less index 5025d4b3c..22402a999 100644 --- a/www/code/app-code.less +++ b/www/code/app-code.less @@ -5,9 +5,11 @@ @import (once) '../../customize/src/less2/include/alertify.less'; @import (once) '../../customize/src/less2/include/tokenfield.less'; -@_cp-toolbar-color-warn: @colortheme_code-warn; - -.toolbar_main(); +.toolbar_main( + @bg-color: @colortheme_code-bg, + @warn-color: @colortheme_code-warn, + @color: @colortheme_code-color +); .fileupload_main(); .alertify_main(); .tokenfield_main(); diff --git a/www/common/toolbar3.js b/www/common/toolbar3.js index 5bdd8486d..fc06f40f6 100644 --- a/www/common/toolbar3.js +++ b/www/common/toolbar3.js @@ -729,11 +729,20 @@ define([ Common.sendAnonRpcMsg('IS_CHANNEL_PINNED', cid, function (x) { if (x.error || !Array.isArray(x.response)) { return void console.log(x); } if (x.response[0] === true) { return; } + var pnpTitle = Messages._getKey('padNotPinned', ['','','','']); + var pnpMsg = Messages._getKey('padNotPinned', [ + '', + '', + '', + '' + ]); var msg = $('', { 'class': 'cp-pad-not-pinned', - }).append( - Messages._getKey('padNotPinned', [o + '/login', o + '/register']) - ); + 'title': pnpTitle + }).append([ + $('', {'class': 'fa fa-exclamation-triangle'}), + $('', {'class': 'cp-pnp-msg'}).append(pnpMsg) + ]); $('.cp-toolbar-title').append(msg); console.log("This pad is not pinned"); }); diff --git a/www/contacts/app-contacts.less b/www/contacts/app-contacts.less index 26fba2c90..925fd9f81 100644 --- a/www/contacts/app-contacts.less +++ b/www/contacts/app-contacts.less @@ -8,9 +8,11 @@ @import (once) '../../customize/src/less2/include/avatar.less'; -@_cp-toolbar-color-warn: @colortheme_friends-warn;; - -.toolbar_main(); +.toolbar_main( + @bg-color: @colortheme_friends-bg, + @warn-color: @colortheme_friends-warn, + @color: @colortheme_friends-color +); .fileupload_main(); .alertify_main(); diff --git a/www/drive/app-drive.less b/www/drive/app-drive.less index 17ae35fcb..259e63f56 100644 --- a/www/drive/app-drive.less +++ b/www/drive/app-drive.less @@ -8,9 +8,11 @@ @import (once) "../../customize/src/less2/include/limit-bar.less"; @import (once) "../../customize/src/less2/include/tokenfield.less"; -@_cp-toolbar-color-warn: @colortheme_drive-warn; - -.toolbar_main(); +.toolbar_main( + @bg-color: @colortheme_drive-bg, + @warn-color: @colortheme_drive-warn, + @color: @colortheme_drive-color +); .fileupload_main(); .alertify_main(); .limit-bar_main(); diff --git a/www/file/app-file.less b/www/file/app-file.less index 7a990cb03..a777b6014 100644 --- a/www/file/app-file.less +++ b/www/file/app-file.less @@ -5,9 +5,11 @@ @import (once) '../../customize/src/less2/include/alertify.less'; @import (once) '../../customize/src/less2/include/tokenfield.less'; -@_cp-toolbar-color-warn: @colortheme_file-warn; - -.toolbar_main(); +.toolbar_main( + @bg-color: @colortheme_file-bg, + @warn-color: @colortheme_file-warn, + @color: @colortheme_file-color +); .fileupload_main(); .alertify_main(); .tokenfield_main(); diff --git a/www/pad/app-pad.less b/www/pad/app-pad.less index 6e34f473d..1aa1a4f62 100644 --- a/www/pad/app-pad.less +++ b/www/pad/app-pad.less @@ -1,14 +1,12 @@ -// Defaults to avoid breaking existing themes - -@colortheme_pad-toolbar-bg: #c1e7ff; - @import (once) "../../customize/src/less2/include/toolbar.less"; @import (once) '../../customize/src/less2/include/alertify.less'; @import (once) '../../customize/src/less2/include/tokenfield.less'; -@_cp-toolbar-color-warn: @colortheme_pad-warn; - -.toolbar_main(); +.toolbar_main( + @bg-color: @colortheme_pad-bg, + @warn-color: @colortheme_pad-warn, + @color: @colortheme_pad-color +); .alertify_main(); // body diff --git a/www/poll/app-poll.less b/www/poll/app-poll.less index f717a6f56..2a29f1fdf 100644 --- a/www/poll/app-poll.less +++ b/www/poll/app-poll.less @@ -1,9 +1,3 @@ -// Defaults to avoid breaking existing themes - -@colortheme_poll-th-bg: #005bef; -@colortheme_poll-th-fg: #fff; -@colortheme_poll-help-bg: #bbffbb; - @import (once) "../../customize/src/less2/include/browser.less"; @import (once) "../../customize/src/less2/include/toolbar.less"; @import (once) "../../customize/src/less2/include/markdown.less"; @@ -13,9 +7,11 @@ @import (once) '../../customize/src/less2/include/tools.less'; @import (once) '../../customize/src/less2/include/avatar.less'; -@_cp-toolbar-color-warn: @colortheme_poll-warn; - -.toolbar_main(); +.toolbar_main( + @bg-color: @colortheme_poll-bg, + @warn-color: @colortheme_poll-warn, + @color: @colortheme_poll-color +); .fileupload_main(); .alertify_main(); .tokenfield_main(); diff --git a/www/profile/app-profile.less b/www/profile/app-profile.less index 21e659a03..d36233782 100644 --- a/www/profile/app-profile.less +++ b/www/profile/app-profile.less @@ -7,8 +7,11 @@ @import (once) '../../customize/src/less2/include/avatar.less'; @import (once) '../../customize/src/less2/include/sidebar-layout.less'; - -.toolbar_main(); +.toolbar_main( + @bg-color: @colortheme_profile-bg, + @warn-color: @colortheme_profile-warn, + @color: @colortheme_profile-color +); .fileupload_main(); .alertify_main(); .sidebar-layout_main(); diff --git a/www/settings/app-settings.less b/www/settings/app-settings.less index b96384bc0..8b3d3b7fb 100644 --- a/www/settings/app-settings.less +++ b/www/settings/app-settings.less @@ -6,9 +6,11 @@ @import (once) '../../customize/src/less2/include/sidebar-layout.less'; @import (once) "../../customize/src/less2/include/limit-bar.less"; -@_cp-toolbar-color-warn: @colortheme_settings-warn; - -.toolbar_main(); +.toolbar_main( + @bg-color: @colortheme_settings-bg, + @warn-color: @colortheme_settings-warn, + @color: @colortheme_settings-color +); .alertify_main(); .sidebar-layout_main(); .limit-bar_main(); diff --git a/www/slide/app-slide.less b/www/slide/app-slide.less index 32088eb64..6a9c2ee63 100644 --- a/www/slide/app-slide.less +++ b/www/slide/app-slide.less @@ -6,10 +6,12 @@ @import (once) "../../customize/src/less2/include/mediatag.less"; @import (once) '../../customize/src/less2/include/tokenfield.less'; -@_cp-toolbar-color-warn: @colortheme_slide-warn; - .mediatag_base(); -.toolbar_main(); +.toolbar_main( + @bg-color: @colortheme_slide-bg, + @warn-color: @colortheme_slide-warn, + @color: @colortheme_slide-color +); .fileupload_main(); .alertify_main(); .tokenfield_main(); diff --git a/www/todo/app-todo.less b/www/todo/app-todo.less index de420b8b1..fd274a0ee 100644 --- a/www/todo/app-todo.less +++ b/www/todo/app-todo.less @@ -8,8 +8,11 @@ @import (once) '../../customize/src/less2/include/avatar.less'; - -.toolbar_main(); +.toolbar_main( + @bg-color: @colortheme_todo-bg, + @warn-color: @colortheme_todo-warn, + @color: @colortheme_todo-color +); .fileupload_main(); .alertify_main(); diff --git a/www/whiteboard/app-whiteboard.less b/www/whiteboard/app-whiteboard.less index 95fe016e9..28e6a6e0c 100644 --- a/www/whiteboard/app-whiteboard.less +++ b/www/whiteboard/app-whiteboard.less @@ -6,9 +6,11 @@ @import (once) '../../customize/src/less2/include/tools.less'; @import (once) '../../customize/src/less2/include/tokenfield.less'; -@_cp-toolbar-color-warn: @colortheme_whiteboard-warn; - -.toolbar_main(); +.toolbar_main( + @bg-color: @colortheme_whiteboard-bg, + @warn-color: @colortheme_whiteboard-warn, + @color: @colortheme_whiteboard-color +); .fileupload_main(); .alertify_main(); .tokenfield_main();