Merge branch 'staging' of github.com:xwiki-labs/cryptpad into staging

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;

customize.dist/src/less2/include/alertify.less

@@ -1,6 +1,6 @@
-@import (once) "./colortheme.less";
+@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_padding-base: @variables_padding;
-    @alertify_box-shadow: @modal_shadow;
+    @alertify_box-shadow: @variables_shadow;
 
     // Logs to show that something has happened
     // These show only once

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;

customize.dist/src/less2/include/dropdown.less

@@ -1,4 +1,4 @@
-@import (once) "./colortheme.less";
+@import (once) "./colortheme-all.less";
 @import (once) "./tools.less";
 
 /* The container <div> - needed to position the dropdown content */

customize.dist/src/less2/include/fileupload.less

@@ -1,4 +1,4 @@
-@import (once) './colortheme.less';
+@import (once) './colortheme-all.less';
 @import (once) './modal.less';
 
 .fileupload_main () {

customize.dist/src/less2/include/icon-colors.less

@@ -1,4 +1,4 @@
-@import (once) "./colortheme.less";
+@import (once) "./colortheme-all.less";
 .iconColors_main () {
     // Classes used in common-interface.js
     .cp-icon-color-pad { color: @colortheme_pad-bg; }

customize.dist/src/less2/include/infopages.less

@@ -1,4 +1,4 @@
-@import (once) "./colortheme.less";
+@import (once) "./colortheme-all.less";
 
 @infopages_infobar-height: 64px;
 @infopages_padding: 32px;

customize.dist/src/less2/include/leftside-menu.less

@@ -1,6 +1,6 @@
 @import (once) "./unselectable.less";
 @import (once) "./variables.less";
-@import (once) "./colortheme.less";
+@import (once) "./colortheme-all.less";
 
 .leftside-menu_main() {
 }

customize.dist/src/less2/include/limit-bar.less

@@ -1,4 +1,4 @@
-@import (once) "./colortheme.less";
+@import (once) "./colortheme-all.less";
 
 .limit-bar_main () {
     .cp-limit-container {

customize.dist/src/less2/include/modal-theme.less

@@ -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);
-

customize.dist/src/less2/include/modal.less

@@ -1,12 +1,12 @@
-@import (once) "./colortheme.less";
+@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;
         }
     }

customize.dist/src/less2/include/toolbar-history.less

@@ -1,4 +1,4 @@
-@import (once) "./colortheme.less";
+@import (once) "./colortheme-all.less";
 
 .history_main () {
     .cp-toolbar-history {

customize.dist/src/less2/include/toolbar.less

@@ -1,5 +1,5 @@
 @import (once) "./dropdown.less";
-@import (once) "./colortheme.less";
+@import (once) "./colortheme-all.less";
 @import (once) "./browser.less";
 @import (once) "./ckeditor-fix.less";
 @import (once) "./avatar.less";
@@ -7,9 +7,12 @@
 @import (once) "./icon-colors.less";
 @import (once) "./tools.less";
 
-@_cp-toolbar-color-warn: black;
+.toolbar_main (
-
+    @color: @colortheme_default-color, // Color of the text for the toolbar
-.toolbar_main () {
+    @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) {
+    // TODO(cjd) This ought to be in a less file for markdown-based editors
-        .cp-markdown-toolbar {
+    .cp-markdown-toolbar {
-            height: @toolbar_line-height;
+        height: @toolbar_line-height;
-            background-color: lighten(@bg-color, 20%);
+        background-color: lighten(@bg-color, 20%);
-            display: none;
+        display: none;
-            button {
+        button {
-                height: @toolbar_line-height !important;
+            height: @toolbar_line-height !important;
-                outline: 0;
+            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;
             color: @color;
-            .cp-toolbar-userlist-drawer-close {
+            .toolbar_button;
-                color: @color;
+            font: normal normal normal 14px/1 FontAwesome;
-            }
+            &:hover {
-            h2 {
+                background-color: lighten(@bg-color, 8%);
-                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%);
-                }
             }
+            &.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-toolbar-userlist-friend {
-
+            &:hover {
-    &.cp-app-pad {
+                color: darken(@color, 15%);
-        @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 {
@@ -355,12 +235,8 @@
         display: flex;
         flex-wrap: wrap;
         justify-content: space-between;
-
+        background-color: @bg-color;
-        //background-color: #BBBBFF;
+        color: @color;
-        background-color: @colortheme_default-bg;
-        color: @colortheme_default-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;

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);

customize.dist/src/less2/pages/page-404.less

@@ -1,4 +1,4 @@
-@import (once) "../include/colortheme.less";
+@import (once) "../include/colortheme-all.less";
 @import (once) "../include/font.less";
 .font_neuropolitical();
 .font_open-sans();

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, <a href="/" target="_blank">click here</a> to log in<br>or press <em>Escape</em> 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, <a href="{0}" target="blank">login</a> or <a href="{1}" target="blank">register</a> 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";

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(
-
+    @bg-color: @colortheme_code-bg,
-.toolbar_main();
+    @warn-color: @colortheme_code-warn,
+    @color: @colortheme_code-color
+);
 .fileupload_main();
 .alertify_main();
 .tokenfield_main();

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', [
+                '<a href="' + o + '/login" target="blank" title>',
+                '</a>',
+                '<a href="' + o + '/register" target="blank" title>',
+                '</a>'
+            ]);
             var msg = $('<span>', {
                 'class': 'cp-pad-not-pinned',
-            }).append(
+                'title': pnpTitle
-                Messages._getKey('padNotPinned', [o + '/login', o + '/register'])
+            }).append([
-            );
+                $('<span>', {'class': 'fa fa-exclamation-triangle'}),
+                $('<span>', {'class': 'cp-pnp-msg'}).append(pnpMsg)
+            ]);
             $('.cp-toolbar-title').append(msg);
             console.log("This pad is not pinned");
         });

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(
-
+    @bg-color: @colortheme_friends-bg,
-.toolbar_main();
+    @warn-color: @colortheme_friends-warn,
+    @color: @colortheme_friends-color
+);
 .fileupload_main();
 .alertify_main();
 

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(
-
+    @bg-color: @colortheme_drive-bg,
-.toolbar_main();
+    @warn-color: @colortheme_drive-warn,
+    @color: @colortheme_drive-color
+);
 .fileupload_main();
 .alertify_main();
 .limit-bar_main();

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(
-
+    @bg-color: @colortheme_file-bg,
-.toolbar_main();
+    @warn-color: @colortheme_file-warn,
+    @color: @colortheme_file-color
+);
 .fileupload_main();
 .alertify_main();
 .tokenfield_main();

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(
-
+    @bg-color: @colortheme_pad-bg,
-.toolbar_main();
+    @warn-color: @colortheme_pad-warn,
+    @color: @colortheme_pad-color
+);
 .alertify_main();
 
 // body

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(
-
+    @bg-color: @colortheme_poll-bg,
-.toolbar_main();
+    @warn-color: @colortheme_poll-warn,
+    @color: @colortheme_poll-color
+);
 .fileupload_main();
 .alertify_main();
 .tokenfield_main();

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();

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(
-
+    @bg-color: @colortheme_settings-bg,
-.toolbar_main();
+    @warn-color: @colortheme_settings-warn,
+    @color: @colortheme_settings-color
+);
 .alertify_main();
 .sidebar-layout_main();
 .limit-bar_main();

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();

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();
 

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(
-
+    @bg-color: @colortheme_whiteboard-bg,
-.toolbar_main();
+    @warn-color: @colortheme_whiteboard-warn,
+    @color: @colortheme_whiteboard-color
+);
 .fileupload_main();
 .alertify_main();
 .tokenfield_main();