Merge branch 'pcs' into staging

.jshintignore

@@ -1,6 +1,7 @@
 node_modules/
 www/bower_components/
 www/common/pdfjs/
+www/common/tippy/
 
 server.js
 www/common/media-tag.js
@@ -8,7 +9,6 @@ www/scratch
 
 www/common/toolbar.js
 www/common/hyperscript.js
-www/common/tippy.min.js
 
 www/pad/wysiwygarea-plugin.js
 www/pad/mediatag-plugin.js

customize.dist/pages.js

@@ -633,12 +633,95 @@ define([
                     src: '/customize/cryptpad-new-logo-colors-logoonly.png?' + urlArgs
                 }),
                 h('div.cp-loading-spinner-container',
-                    h('span.fa.fa-circle-o-notch.fa-spin.fa-4x.fa-fw')),
+                    h('span.fa.fa-circle-o-notch.fa-spin.fa-8x.fa-fw')),
                 h('p'),
             ])
         );
     };
 
+    Pages.createCheckbox = function (id, labelTxt, checked, opts) {
+        opts = opts|| {};
+        // Input properties
+        var inputOpts = {
+            type: 'checkbox',
+            id: id
+        };
+        if (checked) { inputOpts.checked = 'checked'; }
+        $.extend(inputOpts, opts.input || {});
+
+        // Label properties
+        var labelOpts = {};
+        $.extend(labelOpts, opts.label || {});
+        if (labelOpts.class) { labelOpts.class += ' cp-checkmark'; }
+
+        // Mark properties
+        var markOpts = { tabindex: 0 };
+        $.extend(markOpts, opts.mark || {});
+
+        var input = h('input', inputOpts);
+        var mark = h('span.cp-checkmark-mark', markOpts);
+        var label = h('span.cp-checkmark-label', labelTxt);
+
+        $(mark).keydown(function (e) {
+            if (e.which === 32) {
+                e.stopPropagation();
+                e.preventDefault();
+                $(input).prop('checked', !$(input).is(':checked'));
+                $(input).change();
+            }
+        });
+
+        $(input).change(function () { $(mark).focus(); });
+
+        return h('label.cp-checkmark', labelOpts, [
+            input,
+            mark,
+            label
+        ]);
+    };
+
+    Pages.createRadio = function (name, id, labelTxt, checked, opts) {
+        opts = opts|| {};
+        // Input properties
+        var inputOpts = {
+            type: 'radio',
+            id: id,
+            name: name
+        };
+        if (checked) { inputOpts.checked = 'checked'; }
+        $.extend(inputOpts, opts.input || {});
+
+        // Label properties
+        var labelOpts = {};
+        $.extend(labelOpts, opts.label || {});
+        if (labelOpts.class) { labelOpts.class += ' cp-checkmark'; }
+
+        // Mark properties
+        var markOpts = { tabindex: 0 };
+        $.extend(markOpts, opts.mark || {});
+
+        var input = h('input', inputOpts);
+        var mark = h('span.cp-radio-mark', markOpts);
+        var label = h('span.cp-checkmark-label', labelTxt);
+
+        $(mark).keydown(function (e) {
+            if (e.which === 32) {
+                e.stopPropagation();
+                e.preventDefault();
+                $(input).prop('checked', !$(input).is(':checked'));
+                $(input).change();
+            }
+        });
+
+        $(input).change(function () { $(mark).focus(); });
+
+        return h('label.cp-radio', labelOpts, [
+            input,
+            mark,
+            label
+        ]);
+    };
+
     var hiddenLoader = function () {
         var loader = loadingScreen();
         loader.style.display = 'none';
@@ -688,27 +771,10 @@ define([
                         placeholder: Msg.login_confirm,
                     }),
                     h('div.checkbox-container', [
-                        h('input#import-recent', {
+                        Pages.createCheckbox('import-recent', Msg.register_importRecent, true)
-                            name: 'import-recent',
-                            type: 'checkbox',
-                            checked: true
-                        }),
-                        // hscript doesn't generate for on label for some
-                        // reason... use jquery as a temporary fallback
-                        setHTML($('<label for="import-recent"></label>')[0], Msg.register_importRecent)
-                        /*h('label', {
-                            'for': 'import-recent',
-                        }, Msg.register_importRecent),*/
                     ]),
                     h('div.checkbox-container', [
-                        h('input#accept-terms', {
+                        $(Pages.createCheckbox('accept-terms')).find('.cp-checkmark-label').append(Msg.register_acceptTerms).parent()[0]
-                            name: 'accept-terms',
-                            type: 'checkbox'
-                        }),
-                        setHTML($('<label for="accept-terms"></label>')[0], Msg.register_acceptTerms)
-                        /*setHTML(h('label', {
-                            'for': 'accept-terms',
-                        }), Msg.register_acceptTerms),*/
                     ]),
                     h('button#register.btn.cp-login-register', Msg.login_register)
                 ])
@@ -750,17 +816,7 @@ define([
                             placeholder: Msg.login_password,
                         }),
                         h('div.checkbox-container', [
-                            h('input#import-recent', {
+                            Pages.createCheckbox('import-recent', Msg.register_importRecent, true),
-                                name: 'import-recent',
-                                type: 'checkbox',
-                                checked: true
-                            }),
-                            // hscript doesn't generate for on label for some
-                            // reason... use jquery as a temporary fallback
-                            setHTML($('<label for="import-recent"></label>')[0], Msg.register_importRecent)
-                            /*h('label', {
-                                'for': 'import-recent',
-                            }, Msg.register_importRecent),*/
                         ]),
                         h('div.extra', [
                             h('button.login.first.btn', Msg.login_login)

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

@@ -12,14 +12,11 @@
 
     @alertify-btn-fg: @alertify-fore;
 
-    @alertify-btn-bg: rgba(200, 200, 200, 0.1);
-    @alertify-btn-bg-hover: rgba(200, 200, 200, .3);
-
     @alertify-bg: @colortheme_modal-dim;
     @alertify-fg: @alertify-fore;
 
     @alertify-input-bg: @colortheme_modal-input;
-    @alertify-input-fg: @colortheme_modal-fg;
+    @alertify-input-fg: @colortheme_modal-input-fg;
 
     @alertify_padding-base: @variables_padding;
     @alertify_box-shadow: @variables_shadow;
@@ -34,7 +31,7 @@
         }
         > * {
             padding: @alertify_padding-base @alertify_padding-base * 4;
-            color: @alertify-fore;
+            color: @colortheme_notification-color;
 
             font-family: @colortheme_font;
             font-size: large;
@@ -65,6 +62,8 @@
         width: 100%;
         height: 100%;
         z-index: 100000; // alertify container
+        font: @colortheme_app-font;
+
         &.forefront {
             z-index: @max-z-index; // alertify max forefront
         }
@@ -112,10 +111,6 @@
         }
 
         .dialog, .alert {
-            .bright {
-                color: @colortheme_light-base;
-            }
-
             & > div {
                 background-color: @alertify-dialog-bg;
                 &.half {
@@ -227,7 +222,7 @@
 
                 button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button) {
 
-                    background-color: @alertify-btn-bg;
+                    background-color: @colortheme_alertify-cancel;
                     box-sizing: border-box;
                     position: relative;
                     outline: 0;
@@ -247,7 +242,7 @@
                     border-radius: 0;
 
                     color: @alertify-btn-fg;
-                    border: 1px solid transparent;
+                    border: 1px solid @colortheme_alertify-cancel-border;
 
                     &.safe, &.danger {
                         color: @colortheme_old-base;
@@ -256,32 +251,40 @@
                     }
                     &.danger {
                         background-color: @colortheme_alertify-red;
+                        border-color: @colortheme_alertify-red-border;
+                        color: @colortheme_alertify-red-color;
                         &:hover, &:active {
-                            background-color: lighten(@colortheme_alertify-red, 5%);
+                            background-color: contrast(@colortheme_modal-bg, darken(@colortheme_alertify-red, 10%), lighten(@colortheme_alertify-red, 10%));
                         }
                     }
 
                     &.safe {
                         background-color: @colortheme_alertify-green;
+                        border-color: @colortheme_alertify-green-border;
+                        color: @colortheme_alertify-green-color;
                         &:hover, &:active {
-                            background-color: lighten(@colortheme_alertify-green, 10%);
+                            background-color: contrast(@colortheme_modal-bg, darken(@colortheme_alertify-green, 10%), lighten(@colortheme_alertify-green, 10%));
                         }
                     }
 
                     &.primary {
                         background-color: @colortheme_alertify-primary;
                         color: @colortheme_alertify-primary-text;
+                        border-color: @colortheme_alertify-primary-border;
+                        font-weight: bold;
                         &:hover, &:active {
-                            background-color: darken(@colortheme_alertify-primary, 10%);
+                            background-color: contrast(@colortheme_modal-bg, darken(@colortheme_alertify-primary, 10%), lighten(@colortheme_alertify-primary, 10%));
                         }
                     }
 
                     &:hover, &:active {
-                        background-color: @alertify-btn-bg-hover;
+                        background-color: contrast(@colortheme_modal-bg, darken(@colortheme_alertify-cancel, 10%), lighten(@colortheme_alertify-cancel, 10%));
                     }
 
                     &:focus {
-                        border: 1px dotted @alertify-base;
+                        //border: 1px dotted @alertify-base;
+                        box-shadow: 0px 0px 5px @colortheme_alertify-primary;
+                        outline: none;
                     }
                     &::-moz-focus-inner {
                         border: 0;

customize.dist/src/less2/include/app-noscroll.less

@@ -7,6 +7,7 @@
     overflow: hidden;
     box-sizing: border-box;
     position: relative;
+    border: 0;
     body {
         height: 100%;
         width: 100%;
@@ -15,6 +16,7 @@
         overflow: hidden;
         box-sizing: border-box;
         position: relative;
+        border: 0;
     }
 }
 

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

@@ -5,7 +5,7 @@
     @width: round(@size / 8);
     @dim1: round(@size / 3);
     @dim2: round(2 * @size / 3);
-    @top: round(@size / 12);
+    @top: round(@size / 12) - 1;
     // <label.cp-checkmark><input><span.cp-checkmark-mark></span>Text</label>
     .cp-checkmark {
         margin: 0;
@@ -17,6 +17,10 @@
         -ms-user-select: none;
         user-select: none;
 
+        & > a {
+            margin-left: 0.25em;
+        }
+
         &.cp-checkmark-secondary {
             .cp-checkmark-mark {
                 &:after {
@@ -26,6 +30,7 @@
             input {
                 &:checked ~ .cp-checkmark-mark {
                     background-color: @colortheme_checkmark-back2;
+                    border-color: @colortheme_checkmark-back2;
                 }
             }
         }
@@ -37,12 +42,19 @@
             display: none;
             &:checked ~ .cp-checkmark-mark {
                 background-color: @colortheme_checkmark-back1;
+                border-color: @colortheme_checkmark-back1;
                 &:after {
                     display: block;
                 }
             }
         }
 
+        .cp-checkmark-label {
+            cursor: default;
+            &:empty {
+                display: none;
+            }
+        }
         .cp-checkmark-mark {
             margin-right: 10px;
             position: relative;
@@ -51,6 +63,8 @@
             background-color: @colortheme_checkmark-back0;
             display: flex;
             justify-content: center;
+            border: 1px solid @colortheme_form-border;
+            flex-shrink: 0;
             &:after {
                 content: "";
                 display: none;
@@ -60,6 +74,90 @@
                 transform: rotate(45deg);
                 border: solid @colortheme_checkmark-col1;
                 border-width: 0 @width @width 0;
+                position: absolute;
+            }
+            &:focus {
+                //border-color: #FF007C !important;
+                box-shadow: 0px 0px 5px @colortheme_checkmark-back1;
+                outline: none;
+            }
+        }
+
+    }
+
+    .cp-radio {
+        margin: 0;
+        display: flex;
+        align-items: center;
+        position: relative;
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+
+        &.cp-radio-secondary {
+            .cp-radio-mark {
+                &:after {
+                    border-color: @colortheme_checkmark-col2;
+                }
+            }
+            input {
+                &:checked ~ .cp-radio-mark {
+                    background-color: @colortheme_checkmark-back2;
+                }
+            }
+        }
+        &:hover .cp-radio-mark {
+            background-color: @colortheme_checkmark-back0-active;
+        }
+
+        input {
+            display: none;
+            &:checked ~ .cp-radio-mark {
+                background-color: @colortheme_checkmark-back1;
+                border-color: @colortheme_checkmark-back1;
+                &:after {
+                    display: block;
+                }
+            }
+        }
+
+        .cp-checkmark-label {
+            cursor: default;
+            &:empty {
+                display: none;
+            }
+        }
+
+        @radio-size: @dim1 * 3;
+        .cp-radio-mark {
+            margin-right: 10px;
+            position: relative;
+            height: @radio-size;
+            width: @radio-size;
+            background-color: @colortheme_checkmark-back0;
+            border-radius: 50%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            border: 1px solid @colortheme_form-border;
+            flex-shrink: 0;
+            &:after {
+                display: none;
+                content: "";
+                border-radius: 50%;
+                background: white;
+                width: @dim1;
+                height: @dim1;
+
+                //transform: rotate(45deg);
+                //border: solid @colortheme_checkmark-col1;
+                //border-width: 0 @width @width 0;
+            }
+            &:focus {
+                //border-color: #FF007C !important;
+                box-shadow: 0px 0px 5px @colortheme_checkmark-back1;
+                outline: none;
             }
         }
 

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

@@ -2,6 +2,9 @@
 @colortheme_app-font-size: 16px;
 @colortheme_app-font: @colortheme_app-font-size @colortheme_font;
 
+@colortheme_logo-1: #326599;
+@colortheme_logo-2: #4591c4;
+
 @colortheme_link-color: #0275D8;
 @colortheme_link-color-visited: #005999;
 @colortheme_info-background: #fafafa;
@@ -15,23 +18,42 @@
 @colortheme_cp-red: #FA5858; // remove red
 @colortheme_cp-green: #46E981;
 
-@colortheme_modal-bg: #222;
+@colortheme_form-border: #bbbbbb;
-@colortheme_modal-fg: #fff;
+@colortheme_form-bg: @colortheme_logo-2;
+@colortheme_form-color: #ffffff;
+@colortheme_form-bg-alt: #ffffff;
+@colortheme_form-color-alt: @colortheme_logo-1;
+@colortheme_form-warning: #f49842;
+@colortheme_form-warning-hov: darken(@colortheme_form-warning, 5%);
+
+@colortheme_modal-bg: @colortheme_form-bg-alt; // TODO Modals bg
+@colortheme_modal-fg: @colortheme_form-color-alt;
 @colortheme_modal-link: #eee;
 @colortheme_modal-link-visited: lighten(@colortheme_modal-link, 10%);
-@colortheme_modal-dim: rgba(0, 0, 0, 0.4);
+@colortheme_modal-dim: fade(@colortheme_logo-2, 50%); // TODO transparent background behind modals
+@colortheme_modal-input: @colortheme_form-bg;
+@colortheme_modal-input-fg: @colortheme_form-color;
 
-@colortheme_loading-bg: #222;
+@colortheme_loading-bg: @colortheme_logo-1;
+@colortheme_loading-bg-alt: @colortheme_logo-2;
 @colortheme_loading-color: @colortheme_old-fore;
 
-@colortheme_modal-input: #111;
 
+// TODO modals buttons
 @colortheme_alertify-red: #E55236;
+@colortheme_alertify-red-color: #FFF;
+@colortheme_alertify-red-border: transparent;
 @colortheme_alertify-green: #77C825;
-@colortheme_alertify-primary: #fff;
+@colortheme_alertify-green-color: #FFF;
-@colortheme_alertify-primary-text: #000;
+@colortheme_alertify-green-border: transparent;
+@colortheme_alertify-primary: @colortheme_form-bg;
+@colortheme_alertify-primary-text: @colortheme_form-color;
+@colortheme_alertify-primary-border: transparent;
+@colortheme_alertify-cancel: @colortheme_modal-bg;
+@colortheme_alertify-cancel-border: #ccc;
 
-@colortheme_notification-log: rgba(0, 0, 0, 0.8);
+@colortheme_notification-log: fade(@colortheme_logo-1, 90%);
+@colortheme_notification-color: #fff;;
 @colortheme_notification-warn: rgba(205, 37, 50, 0.8);
 
 @colortheme_dropdown-bg: #f9f9f9;
@@ -110,9 +132,9 @@
 @cryptpad_header_col: #1E1F1F;
 @cryptpad_text_col: #3F4141;
 
-@colortheme_checkmark-back0: #ffffff;
+@colortheme_checkmark-back0: @colortheme_form-bg-alt;
-@colortheme_checkmark-back0-active: #bbbbbb;
+@colortheme_checkmark-back0-active: @colortheme_form-border;
-@colortheme_checkmark-back1: #FF0073;
+@colortheme_checkmark-back1: @colortheme_form-bg;
-@colortheme_checkmark-col1: #ffffff;
+@colortheme_checkmark-col1: @colortheme_form-color;
-@colortheme_checkmark-back2: #FFFFFF;
+@colortheme_checkmark-back2: @colortheme_form-bg-alt;
-@colortheme_checkmark-col2: #000000;
+@colortheme_checkmark-col2: @colortheme_form-color-alt;

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

@@ -1,47 +1,78 @@
 @import (once) "./colortheme-all.less";
 @import (once) "./tools.less";
-@import (once) "./checkmark.less";
 @import (once) './icon-colors.less';
 
-.creation_main() {
+.creation_main(
-    .tippy-popper {
+    @color: @colortheme_default-color, // Color of the text for the toolbar
-        z-index: 100000001 !important;
+    @bg-color: @colortheme_default-bg, // color of the toolbar background
-    }
+    @warn-color: @colortheme_default-warn, // color of the warning text in the toolbar
+) {
+    @colortheme_creation-modal-bg: #fff;
+    @colortheme_creation-modal: #666;
+    @colortheme_creation-modal-title: @colortheme_loading-bg;
+
     #cp-creation-container {
         position: absolute;
         z-index: 100000000; // #loading * 10
         top: 0px;
-        background: @colortheme_loading-bg;
+        //background: @colortheme_loading-bg;
+        background: linear-gradient(to right, @colortheme_loading-bg 0%, @colortheme_loading-bg 50%, @colortheme_loading-bg-alt 50%, @colortheme_loading-bg-alt 100%);
         color: @colortheme_loading-color;
         display: flex;
         flex-flow: column; /* we need column so that the child can shrink vertically */
         justify-content: center;
+        align-items: center;
         width: 100%;
         height: 100%;
         overflow: auto;
+        .cp-creation-logo {
+            height: 300px;
+            width: 300px;
+            margin-top: 50px;
+            flex: 0 1 auto; /* allows shrink */
+            min-height: 0;
+            text-align: center;
+            img {
+                max-width: 100%;
+                max-height: 100%;
+            }
+        }
     }
     #cp-creation {
-        flex: 0 1 auto; /* allows shrink */
-        min-height: 0;
         overflow: auto;
         text-align: center;
+        background: @colortheme_creation-modal-bg;
+        color: @colortheme_creation-modal;
         font: @colortheme_app-font;
-        width: 100%;
         outline: none;
+        width: 700px;
+        max-width: 90vw;
+        height: 500px;
+        max-height: calc(~"100vh - 20px");
+        margin: 50px;
+        flex-shrink: 0;
+        display: flex;
+        flex-flow: column;
+
         & > div {
-            width: 60vw;
+            width: 100%;
             max-width: 100%;
-            margin: 40px auto;
+            margin: auto;
             text-align: left;
         }
 
-        .cp-creation-create, .cp-creation-settings {
+        .cp-creation-title {
+            color: @colortheme_creation-modal-title;
+            font-weight: bold;
+            margin: 15px;
+        }
+
+        .cp-creation-create {
             margin-top: 0px;
-            @creation-button: #30B239;
             button {
                 .tools_unselectable();
                 padding: 15px;
-                background: @creation-button;
+                background: linear-gradient(to right, @colortheme_logo-2, @colortheme_logo-1);
                 color: #FFF;
                 font-weight: bold;
                 margin: 3px 10px;
@@ -50,8 +81,9 @@
                 outline: none;
                 width: 100%;
                 &:hover {
+                    background: linear-gradient(to right, lighten(@colortheme_logo-2, 5%), lighten(@colortheme_logo-1, 5%));
                     //background: darken(@creation-button, 5%);
-                    background: lighten(@creation-button, 5%);
+                    //background: lighten(@creation-button, 5%);
                 }
             }
         }
@@ -70,6 +102,7 @@
             display: flex;
             flex-flow: column;
             align-items: center;
+            flex: 1 0 auto;
             & > div {
                 width: 400px;
                 max-width: 100%;
@@ -78,6 +111,8 @@
                 flex-wrap: wrap;
                 font-size: 16px;
                 margin: 10px 0;
+                min-height: 28px;
+                line-height: 28px;
                 label {
                     flex: 1;
                 }
@@ -88,31 +123,51 @@
                         padding: 0 10px;
                     }
                 }
-                .cp-creation-help {
+            }
-                    font-size: 18px;
+            .cp-creation-help, .cp-creation-warning {
-                    color: white;
+                font-size: 18px;
-                    &:hover {
+                color: @colortheme_form-warning;
-                        color: #AAA;
+                &:hover {
-                        text-decoration: none;
+                    color: @colortheme_form-warning-hov;
-                    }
+                    text-decoration: none;
                 }
             }
             .cp-creation-slider {
                 display: block;
                 overflow: hidden;
                 max-height: 0px;
-                transition: max-height 0.5s ease-in-out;
+                max-width: 0px;
-                width: 100%;
+                //margin-top: 10px;
-                margin-top: 10px;
                 &.active {
-                    max-height: 40px;
+                    transition: max-height 0.5s ease-in-out;
+                    max-width: unset;
+                    max-height: 100px;
                 }
             }
             .cp-creation-expire {
                 .cp-creation-expire-picker {
                     text-align: center;
+                    input, select {
+                        font-size: 14px;
+                        border: 1px solid @colortheme_form-border;
+                        height: 26px;
+                        background-color: @colortheme_form-bg;
+                        color: @colortheme_form-color;
+                    }
                     input {
-                        width: 100px;
+                        width: 50px;
+                        margin: 0 5px;
+                    }
+                    select {
+                        margin-right: 5px;
+                    }
+                }
+                &.active {
+                    label {
+                        flex: unset;
+                    }
+                    .cp-creation-slider {
+                        flex: 1;
                     }
                 }
             }
@@ -125,31 +180,51 @@
             }
 
             div.cp-creation-remember {
-                margin-top: 30px;
                 .cp-creation-remember-help {
-                    font-style: italic;
+                    width: 100%;
+                    //font-style: italic;
+                    font-size: 12px;
+                    font-weight: bold;
+                    color: @colortheme_form-bg;
+                    line-height: 20px;
+                    .fa {
+                        margin-right: 10px;
+                    }
                 }
             }
             div.cp-creation-template {
                 width: 100%;
-                background-color: darken(@colortheme_modal-bg, 3%);
+                flex: 1 0 auto;
-                padding: 20px;
+                flex-wrap: nowrap;
-                margin: 30px 0;
+                .cp-creation-template-more {
-                .cp-creation-title {
+                    font-size: 30px;
-                    padding: 0 0 10px 10px;
+                    cursor: pointer;
-                    margin: auto;
+                    margin: 0 5px;
+                    text-align: center;
+                    &:first-child {
+                        left: 5px;
+                    }
+                    &:last-child {
+                        right: 5px;
+                    }
+                    &:hover {
+                        color: #888;
+                    }
+                    &.hidden {
+                        visibility: hidden;
+                    }
                 }
             }
             .cp-creation-template-container {
                 width: 100%;
+                flex: 1;
                 display: flex;
                 flex-wrap: wrap;
                 justify-content: center;
-                overflow-y: auto;
+                //overflow-y: auto;
                 align-items: center;
                 .cp-creation-template-element {
-                    @darker: darken(@colortheme_modal-fg, 30%);
+                    box-shadow: 2px 2px 7px @colortheme_form-border;
-
                     width: 135px;
                     padding: 5px;
                     margin: 5px;
@@ -162,19 +237,23 @@
                     line-height: 1em;
                     cursor: pointer;
 
-                    background-color: #111;
+                    color: black;
-                    color: @darker;
                     border: 1px solid transparent;
 
                     &.cp-creation-template-selected {
-                        border: 1px solid white;
+                        color: @color !important;
-                        background-color: #222;
+                        background-color: @bg-color !important;
+                        .fa {
+                            color: @color;
+                        }
                     }
 
                     transition: all 0.1s;
 
                     &:hover {
-                        color: @colortheme_modal-fg;
+                        //color: @colortheme_modal-fg;
+                        background-color: @colortheme_form-border;
+                        box-shadow: none;
                     }
 
                     align-items: center;
@@ -196,6 +275,7 @@
                         max-width: 100%;
                     }
                     .fa {
+                        color: @bg-color;
                         cursor: pointer;
                         width: 100px;
                         height: 100px;
@@ -217,45 +297,69 @@
                 display: inline-block;
             }
         }
+    }
 
-        .checkmark_main(30px);
+        @media screen and (max-height: 700px) {
-
+            #cp-creation-container {
-        @media screen and (max-width: @browser_media-narrow-screen) {
+                .cp-creation-logo {
-            & > div {
+                    //flex-shrink: 0;
-                width: 95%;
+                    display: none;
-                margin: 10px auto;
+                }
             }
         }
-        @media screen and (max-width: @browser_media-medium-screen) {
+        @media screen and (max-width: 500px) {
-            #cp-creation-form {
+            #cp-creation {
-                div.cp-creation-template {
+                #cp-creation-form {
-                    margin: 0;
+                    & > div {
-                    padding: 5px;
+                        width: 95%;
-                    .cp-creation-template-container {
+                        margin: 10px auto;
-                        .cp-creation-template-element {
+                    }
-                            flex-flow: row;
+                    .cp-creation-expire {
-                            margin: 1px;
+                        &.active {
-                            padding: 5px;
+                            label {
-                            width: 155px;
+                                flex: 1;
-                            img {
-                                display: none;
                             }
-                            .fa {
+                            .cp-creation-slider {
-                                font-size: 18px;
+                                flex: unset;
-                                width: 20px;
+                                order: 10;
-                                height: 20px;
+                                width: 100%;
-                                line-height: 20px;
+                            }
-                                display: inline !important;
+                        }
-                            }
+                    }
-                            .cp-creation-template-element-name {
+                }
-                                margin: 0;
+            }
-                                margin-left: 5px;
+        }
+        @media screen and (max-width: @browser_media-medium-screen) {
+            #cp-creation {
+                height: auto;
+                #cp-creation-form {
+                    div.cp-creation-template {
+                        margin: 0;
+                        padding: 5px;
+                        .cp-creation-template-container {
+                            .cp-creation-template-element {
+                                flex-flow: row;
+                                margin: 1px;
+                                padding: 5px;
+                                width: 155px;
+                                img {
+                                    display: none;
+                                }
+                                .fa {
+                                    font-size: 18px;
+                                    width: 20px;
+                                    height: 20px;
+                                    line-height: 20px;
+                                    display: inline !important;
+                                }
+                                .cp-creation-template-element-name {
+                                    margin: 0;
+                                    margin-left: 5px;
+                                }
                             }
                         }
                     }
                 }
             }
         }
-
-    }
 }

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

@@ -1,8 +1,11 @@
+@import (once) "./colortheme-all.less";
 @import (once) "./toolbar.less";
 @import (once) './fileupload.less';
 @import (once) './alertify.less';
 @import (once) './tokenfield.less';
 @import (once) './creation.less';
+@import (once) './tippy.less';
+@import (once) "./checkmark.less";
 
 .framework_main(@bg-color, @warn-color, @color) {
     .toolbar_main(
@@ -13,6 +16,29 @@
     .fileupload_main();
     .alertify_main();
     .tokenfield_main();
-    .creation_main();
+    .tippy_main();
+    .checkmark_main(20px);
+    .creation_main(
+        @bg-color: @bg-color,
+        @warn-color: @warn-color,
+        @color: @color
+    );
 }
 
+.framework_min_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
+) {
+    .toolbar_main(
+        @bg-color: @bg-color,
+        @warn-color: @warn-color,
+        @color: @color
+    );
+    .fileupload_main();
+    .alertify_main();
+    .tippy_main();
+    .checkmark_main(20px);
+}
+
+

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

@@ -10,7 +10,6 @@
         text-overflow: ellipsis;
         padding-top: 5px;
         padding-bottom: 5px;
-        border: 1px solid white;
 
         .cp-icons-name {
             width: 100%;
@@ -26,7 +25,7 @@
             word-wrap: break-word;
         }
         &.cp-icons-element-selected {
-            background-color: white;
+            background-color: rgba(0,0,0,0.2);
             color: #666;
         }
         .fa {

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

@@ -57,7 +57,7 @@
 
         input {
             background-color: @colortheme_modal-input;
-            color: @colortheme_modal-fg;
+            color: @colortheme_modal-input-fg;
             border: 0;
             padding: 8px 12px;
             margin: 1em;

customize.dist/src/less2/include/sidebar-layout.less

@@ -52,6 +52,12 @@
                         margin-bottom: 0;
                     }
                 }
+                label.noTitle {
+                    display: inline-flex;
+                    .fa {
+                        margin-left: 10px;
+                    }
+                }
                 margin-bottom: 20px;
             }
             [type="text"], button {

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

@@ -0,0 +1,14 @@
+@import (once) './colortheme-all.less';
+
+.tippy_main() {
+    .tippy-tooltip.cryptpad-theme {
+        /* Your styling here. Example: */
+        background-color: white;
+        box-shadow: 2px 2px 10px #000;
+        font-weight: bold;
+        color: #333;
+        [x-circle] {
+            background-color: unset;
+        }
+    }
+}

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

@@ -183,8 +183,13 @@
     #cp-app-toolbar-creation-dialog.cp-modal-container {
         .icons_main();
 
-        li:hover {
+        li {
-            border: 1px solid white;
+            border: 1px solid @colortheme_modal-fg;
+            &:hover {
+                //border: 1px solid @colortheme_modal-fg;
+                background: @colortheme_modal-fg;
+                color: @colortheme_modal-bg;
+            }
         }
         .cp-modal {
             display: flex;

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

@@ -1,11 +1,13 @@
 @import (once) "../include/infopages.less";
 @import (once) "../include/colortheme-all.less";
 @import (once) "../include/alertify.less";
+@import (once) "../include/checkmark.less";
 @import (once) "../loading.less";
 
 .infopages_main();
 .infopages_topbar();
 .alertify_main();
+.checkmark_main(20px);
 
 .form-group {
     .extra {

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

@@ -1,11 +1,13 @@
 @import (once) "../include/infopages.less";
 @import (once) "../include/colortheme-all.less";
 @import (once) "../include/alertify.less";
+@import (once) "../include/checkmark.less";
 @import (once) "../loading.less";
 
 .infopages_main();
 .infopages_topbar();
 .alertify_main();
+.checkmark_main(20px);
 
 .cp-container {
     .form-group {

www/common/common-interface.js

@@ -6,13 +6,13 @@ define([
     '/common/common-notifier.js',
     '/customize/application_config.js',
     '/bower_components/alertifyjs/dist/js/alertify.js',
-    '/common/tippy.min.js',
+    '/common/tippy/tippy.min.js',
     '/customize/pages.js',
     '/common/hyperscript.js',
     '/common/test.js',
 
     '/bower_components/bootstrap-tokenfield/dist/bootstrap-tokenfield.js',
-    'css!/common/tippy.css',
+    'css!/common/tippy/tippy.css',
 ], function ($, Messages, Util, Hash, Notifier, AppConfig,
             Alertify, Tippy, Pages, h, Test) {
     var UI = {};
@@ -539,16 +539,16 @@ define([
 
     var LOADING = 'cp-loading';
 
-    var getRandomTip = function () {
+    /*var getRandomTip = function () {
         if (!Messages.tips || !Object.keys(Messages.tips).length) { return ''; }
         var keys = Object.keys(Messages.tips);
         var rdm = Math.floor(Math.random() * keys.length);
         return Messages.tips[keys[rdm]];
-    };
+    };*/
     UI.addLoadingScreen = function (config) {
         config = config || {};
         var loadingText = config.loadingText;
-        var hideTips = config.hideTips || AppConfig.hideLoadingScreenTips;
+        //var hideTips = config.hideTips || AppConfig.hideLoadingScreenTips;
         var hideLogo = config.hideLogo;
         var $loading, $container;
         if ($('#' + LOADING).length) {
@@ -557,9 +557,9 @@ define([
             $loading.removeClass('cp-loading-hidden');
             $('.cp-loading-spinner-container').show();
             if (loadingText) {
-                $('#' + LOADING).find('p').text(loadingText);
+                $('#' + LOADING).find('p').show().text(loadingText);
             } else {
-                $('#' + LOADING).find('p').text('');
+                $('#' + LOADING).find('p').hide().text('');
             }
             $container = $loading.find('.cp-loading-container');
         } else {
@@ -574,14 +574,14 @@ define([
             $spinner.show();
             $('body').append($loading);
         }
-        if (Messages.tips && !hideTips) {
+        /*if (Messages.tips && !hideTips) {
             var $loadingTip = $('<div>', {'id': 'cp-loading-tip'});
             $('<span>', {'class': 'tips'}).text(getRandomTip()).appendTo($loadingTip);
             $loadingTip.css({
                 'bottom': $('body').height()/2 - $container.height()/2 + 20 + 'px'
             });
             $('body').append($loadingTip);
-        }
+        }*/
     };
     UI.removeLoadingScreen = function (cb) {
         // Release the test blocker, hopefully every test has been registered.
@@ -610,8 +610,8 @@ define([
         }
         $('.cp-loading-spinner-container').hide();
         $('#cp-loading-tip').remove();
-        if (transparent) { $('#' + LOADING).css('opacity', 0.8); }
+        if (transparent) { $('#' + LOADING).css('opacity', 0.9); }
-        $('#' + LOADING).find('p').html(error || Messages.error);
+        $('#' + LOADING).find('p').show().html(error || Messages.error);
         if (exitable) {
             $(window).focus();
             $(window).keydown(function (e) {
@@ -660,18 +660,38 @@ define([
         });
     };
 
+    var delay = typeof(AppConfig.tooltipDelay) === "number" ? AppConfig.tooltipDelay : 500;
+    $.extend(true, Tippy.defaults, {
+        placement: 'bottom',
+        performance: true,
+        delay: [delay, 0],
+        //sticky: true,
+        theme: 'cryptpad',
+        arrow: true,
+        maxWidth: '200px',
+        flip: true,
+        popperOptions: {
+            modifiers: {
+                preventOverflow: { boundariesElement: 'window' }
+            }
+        },
+        //arrowType: 'round',
+        arrowTransform: 'scale(2)',
+        zIndex: 100000001
+    });
     UI.addTooltips = function () {
         var MutationObserver = window.MutationObserver;
-        var delay = typeof(AppConfig.tooltipDelay) === "number" ? AppConfig.tooltipDelay : 500;
         var addTippy = function (i, el) {
             if (el.nodeName === 'IFRAME') { return; }
-            Tippy(el, {
+            var opts = {
-                position: 'bottom',
+                distance: 15
-                distance: 0,
+            };
-                performance: true,
+            Array.prototype.slice.apply(el.attributes).filter(function (obj) {
-                delay: [delay, 0],
+                return /^data-tippy-/.test(obj.name);
-                sticky: true
+            }).forEach(function (obj) {
+                opts[obj.name.slice(11)] = obj.value;
             });
+            Tippy(el, opts);
         };
         // This is the robust solution to remove dangling tooltips
         // The mutation observer does not always find removed nodes.
@@ -720,5 +740,9 @@ define([
         });
     };
 
+    UI.createCheckbox = Pages.createCheckbox;
+
+    UI.createRadio = Pages.createRadio;
+
     return UI;
 });

www/common/common-ui-elements.js

@@ -13,8 +13,6 @@ define([
     '/customize/messages.js',
     '/customize/application_config.js',
     '/bower_components/nthen/index.js',
-
-    'css!/common/tippy.css',
 ], function ($, Config, Util, Hash, Language, UI, Constants, Feedback, h, MediaTag, Clipboard,
              Messages, AppConfig, NThen) {
     var UIElements = {};
@@ -237,7 +235,11 @@ define([
         var link = h('div.cp-share-modal', [
             h('label', Messages.share_linkAccess),
             h('br'),
-            h('input#cp-share-editable-true.cp-share-editable-value', {
+            UI.createRadio('cp-share-editable', 'cp-share-editable-true',
+                           Messages.share_linkEdit, true, { mark: {tabindex:1} }),
+            UI.createRadio('cp-share-editable', 'cp-share-editable-false',
+                           Messages.share_linkView, false, { mark: {tabindex:1} }),
+            /*h('input#cp-share-editable-true.cp-share-editable-value', {
                 type: 'radio',
                 name: 'cp-share-editable',
                 value: 1,
@@ -248,25 +250,14 @@ define([
                 name: 'cp-share-editable',
                 value: 0
             }),
-            h('label', { 'for': 'cp-share-editable-false' }, Messages.share_linkView),
+            h('label', { 'for': 'cp-share-editable-false' }, Messages.share_linkView),*/
-            h('br'),
             h('br'),
             h('label', Messages.share_linkOptions),
             h('br'),
-            h('input#cp-share-embed', {
+            UI.createCheckbox('cp-share-embed', Messages.share_linkEmbed, false, { mark: {tabindex:1} }),
-                type: 'checkbox',
+            UI.createCheckbox('cp-share-present', Messages.share_linkPresent, false, { mark: {tabindex:1} }),
-                name: 'cp-share-embed'
-            }),
-            h('label', { 'for': 'cp-share-embed' }, Messages.share_linkEmbed),
             h('br'),
-            h('input#cp-share-present', {
+            UI.dialog.selectable('', { id: 'cp-share-link-preview', tabindex: 1 })
-                type: 'checkbox',
-                name: 'cp-share-present'
-            }),
-            h('label', { 'for': 'cp-share-present' }, Messages.share_linkPresent),
-            h('br'),
-            h('br'),
-            UI.dialog.selectable('', { id: 'cp-share-link-preview' })
         ]);
         if (!hashes.editHash) {
             $(link).find('#cp-share-editable-false').attr('checked', true);
@@ -1685,14 +1676,10 @@ define([
         var priv = common.getMetadataMgr().getPrivateData();
         var c = (priv.settings.general && priv.settings.general.creation) || {};
         if (AppConfig.displayCreationScreen && common.isLoggedIn() && c.skip) {
-            $advanced = $('<input>', {
+            var $cboxLabel = $(UI.createCheckbox('cp-app-toolbar-creation-advanced',
-                type: 'checkbox',
+                                                 Messages.creation_newPadModalAdvanced, true))
-                checked: 'checked',
+                                 .appendTo($advancedContainer);
-                id: 'cp-app-toolbar-creation-advanced'
+            $advanced = $cboxLabel.find('input');
-            }).appendTo($advancedContainer);
-            $('<label>', {
-                for: 'cp-app-toolbar-creation-advanced'
-            }).text(Messages.creation_newPadModalAdvanced).appendTo($advancedContainer);
             $description.append('<br>');
             $description.append(Messages.creation_newPadModalDescriptionAdvanced);
         }
@@ -1782,11 +1769,15 @@ define([
         var sframeChan = common.getSframeChannel();
         var focus;
 
-        var pickerCfg = {
+        var pickerCfgInit = {
             types: [type],
             where: ['template'],
             hidden: true
         };
+        var pickerCfg = {
+            types: [type],
+            where: ['template'],
+        };
         var onConfirm = function (yes) {
             if (!yes) {
                 if (focus) { focus.focus(); }
@@ -1814,7 +1805,7 @@ define([
 
         sframeChan.query("Q_TEMPLATE_EXIST", type, function (err, data) {
             if (data) {
-                common.openFilePicker(pickerCfg);
+                common.openFilePicker(pickerCfgInit);
                 focus = document.activeElement;
                 if (force) { return void onConfirm(true); }
                 UI.confirm(Messages.useTemplate, onConfirm, {
@@ -1858,11 +1849,15 @@ define([
 
         var $body = $('body');
         var $creationContainer = $('<div>', { id: 'cp-creation-container' }).appendTo($body);
+        var urlArgs = (Config.requireConf && Config.requireConf.urlArgs) || '';
+        var l = h('div.cp-creation-logo', h('img', { src: '/customize/alt-favicon.png?' + urlArgs }));
+        $(l).appendTo($creationContainer);
         var $creation = $('<div>', { id: 'cp-creation', tabindex: 1 }).appendTo($creationContainer);
 
         // Title
-        var colorClass = 'cp-icon-color-'+type;
+        //var colorClass = 'cp-icon-color-'+type;
-        $creation.append(h('h2.cp-creation-title', Messages.newButtonTitle));
+        //$creation.append(h('h2.cp-creation-title', Messages.newButtonTitle));
+        $creation.append(h('h3.cp-creation-title', Messages['button_new'+type]));
         //$creation.append(h('h2.cp-creation-title.'+colorClass, Messages.newButtonTitle));
 
         // Deleted pad warning
@@ -1874,10 +1869,11 @@ define([
 
         var origin = common.getMetadataMgr().getPrivateData().origin;
         var createHelper = function (href, text) {
-            var q = h('a.cp-creation-help.fa.fa-question', {
+            var q = h('a.cp-creation-help.fa.fa-question-circle', {
                 title: text,
                 href: origin + href,
-                target: "_blank"
+                target: "_blank",
+                'data-tippy-placement': "right"
             });
             return q;
         };
@@ -1885,30 +1881,14 @@ define([
         // Owned pads
         // Default is Owned pad
         var owned = h('div.cp-creation-owned', [
-            h('label.cp-checkmark', [
+            UI.createCheckbox('cp-creation-owned', Messages.creation_owned, true),
-                h('input', {
-                    type: 'checkbox',
-                    id: 'cp-creation-owned',
-                    checked: 'checked'
-                }),
-                h('span.cp-checkmark-mark'),
-                Messages.creation_owned
-            ]),
             createHelper('/faq.html#keywords-owned', Messages.creation_owned1)
         ]);
 
         // Life time
         var expire = h('div.cp-creation-expire', [
-            h('label.cp-checkmark', [
+            UI.createCheckbox('cp-creation-expire', Messages.creation_expire, false),
-                h('input', {
+            h('span.cp-creation-expire-picker.cp-creation-slider', [
-                    type: 'checkbox',
-                    id: 'cp-creation-expire'
-                }),
-                h('span.cp-checkmark-mark'),
-                Messages.creation_expire
-            ]),
-            createHelper('/faq.html#keywords-expiring', Messages.creation_expire2),
-            h('div.cp-creation-expire-picker.cp-creation-slider', [
                 h('input#cp-creation-expire-val', {
                     type: "number",
                     min: 1,
@@ -1923,106 +1903,142 @@ define([
                         selected: 'selected'
                     }, Messages.creation_expireMonths)
                 ])
+            ]),
+            createHelper('/faq.html#keywords-expiring', Messages.creation_expire2),
+        ]);
+
+        var right = h('span.fa.fa-chevron-right.cp-creation-template-more');
+        var left = h('span.fa.fa-chevron-left.cp-creation-template-more');
+        var templates = h('div.cp-creation-template', [
+            left,
+            h('div.cp-creation-template-container', [
+                h('span.fa.fa-circle-o-notch.fa-spin.fa-4x.fa-fw')
+            ]),
+            right
+        ]);
+
+        var settings = h('div.cp-creation-remember', [
+            UI.createCheckbox('cp-creation-remember', Messages.creation_saveSettings, false),
+            createHelper('/settings/#creation', Messages.creation_settings),
+            h('div.cp-creation-remember-help.cp-creation-slider', [
+                h('span.fa.fa-exclamation-circle.cp-creation-warning'),
+                Messages.creation_rememberHelp
             ])
         ]);
 
         var createDiv = h('div.cp-creation-create');
         var $create = $(createDiv);
 
-        var templates = h('div.cp-creation-template', [
-            h('h3.cp-creation-title.'+colorClass, Messages['button_new'+type]),
-            h('div.cp-creation-template-container', [
-                h('span.fa.fa-circle-o-notch.fa-spin.fa-4x.fa-fw')
-            ]),
-            createDiv
-        ]);
-
-        var settings = h('div.cp-creation-remember', [
-            h('label.cp-checkmark', [
-                h('input', {
-                    type: 'checkbox',
-                    id: 'cp-creation-remember'
-                }),
-                h('span.cp-checkmark-mark'),
-                Messages.creation_saveSettings
-            ]),
-            createHelper('/settings/#creation', Messages.creation_settings),
-            h('div.cp-creation-remember-help.cp-creation-slider', Messages.creation_rememberHelp)
-        ]);
-
         $(h('div#cp-creation-form', [
             owned,
             expire,
             settings,
-            templates
+            templates,
+            createDiv
         ])).appendTo($creation);
 
         // Display templates
-        var selected = 0;
+
+        var selected = 0; // Selected template in the list (highlighted)
+        var TEMPLATES_DISPLAYED = 4; // Max templates displayed per page
+        var next = function () {}; // Function called when pressing tab to highlight the next template
+        var i = 0; // Index of the first template displayed in the current page
         sframeChan.query("Q_CREATE_TEMPLATES", type, function (err, res) {
             if (!res.data || !Array.isArray(res.data)) {
                 return void console.error("Error: get the templates list");
             }
-            var data = res.data.slice().sort(function (a, b) {
+            var allData = res.data.slice().sort(function (a, b) {
-                if (a.name === b.name) { return 0; }
+                if (a.used === b.used) {
-                return a.name < b.name ? -1 : 1;
+                    // Sort by name
+                    if (a.name === b.name) { return 0; }
+                    return a.name < b.name ? -1 : 1;
+                }
+                return b.used - a.used;
             });
-            data.unshift({
+            allData.unshift({
-                name: Messages.creation_noTemplate,
-                id: 0,
-                icon: h('span.fa.fa-file')
-            });
-            data.push({
                 name: Messages.creation_newTemplate,
                 id: -1,
                 icon: h('span.fa.fa-bookmark')
             });
-            var $container = $(templates).find('.cp-creation-template-container').html('');
+            allData.unshift({
-            data.forEach(function (obj, idx) {
+                name: Messages.creation_noTemplate,
-                var name = obj.name;
+                id: 0,
-                var $span = $('<span>', {
+                icon: h('span.fa.fa-file')
-                    'class': 'cp-creation-template-element',
-                    'title': name,
-                }).appendTo($container);
-                $span.data('id', obj.id);
-                if (idx === 0) { $span.addClass('cp-creation-template-selected'); }
-                $span.append(obj.icon || UI.getFileIcon({type: type}));
-                $('<span>', {'class': 'cp-creation-template-element-name'}).text(name)
-                    .appendTo($span);
-                $span.click(function () {
-                    $container.find('.cp-creation-template-selected')
-                        .removeClass('cp-creation-template-selected');
-                    $span.addClass('cp-creation-template-selected');
-                    selected = idx;
-                });
-
-                // Add thumbnail if it exists
-                if (obj.thumbnail) {
-                    common.addThumbnail(obj.thumbnail, $span, function () {});
-                }
             });
-        });
+            var redraw = function (index) {
-        // Change template selection when Tab is pressed
+                if (index < 0) { i = 0; }
-        var next = function (revert) {
+                else if (index > allData.length - 1) { return; }
-            var max = $creation.find('.cp-creation-template-element').length;
+                else { i = index; }
-            selected = revert ?
+                var data = allData.slice(i, i + TEMPLATES_DISPLAYED);
-                        (--selected < 0 ? max-1 : selected) :
+                var $container = $(templates).find('.cp-creation-template-container').html('');
-                        ++selected % max;
+                data.forEach(function (obj, idx) {
-            $creation.find('.cp-creation-template-element')
+                    var name = obj.name;
-                .removeClass('cp-creation-template-selected');
+                    var $span = $('<span>', {
-            $($creation.find('.cp-creation-template-element').get(selected))
+                        'class': 'cp-creation-template-element',
-                .addClass('cp-creation-template-selected');
+                        'title': name,
-        };
+                    }).appendTo($container);
+                    $span.data('id', obj.id);
+                    if (idx === selected) { $span.addClass('cp-creation-template-selected'); }
+                    $span.append(obj.icon || UI.getFileIcon({type: type}));
+                    $('<span>', {'class': 'cp-creation-template-element-name'}).text(name)
+                        .appendTo($span);
+                    $span.click(function () {
+                        $container.find('.cp-creation-template-selected')
+                            .removeClass('cp-creation-template-selected');
+                        $span.addClass('cp-creation-template-selected');
+                        selected = idx;
+                    });
 
+                    // Add thumbnail if it exists
+                    if (obj.thumbnail) {
+                        common.addThumbnail(obj.thumbnail, $span, function () {});
+                    }
+                });
+                $(right).off('click').removeClass('hidden').click(function () {
+                    selected = 0;
+                    redraw(i + TEMPLATES_DISPLAYED);
+                });
+                if (i >= allData.length - TEMPLATES_DISPLAYED ) { $(right).addClass('hidden'); }
+                $(left).off('click').removeClass('hidden').click(function () {
+                    selected = TEMPLATES_DISPLAYED - 1;
+                    redraw(i - TEMPLATES_DISPLAYED);
+                });
+                if (i < TEMPLATES_DISPLAYED) { $(left).addClass('hidden'); }
+            };
+            redraw(0);
+
+            // Change template selection when Tab is pressed
+            next = function (revert) {
+                var max = $creation.find('.cp-creation-template-element').length;
+                if (selected + 1 === max && !revert) {
+                    selected = i + TEMPLATES_DISPLAYED < allData.length ? 0 : max;
+                    return void redraw(i + TEMPLATES_DISPLAYED);
+                }
+                if (selected === 0 && revert) {
+                    selected = i - TEMPLATES_DISPLAYED >= 0 ? TEMPLATES_DISPLAYED - 1 : 0;
+                    return void redraw(i - TEMPLATES_DISPLAYED);
+                }
+                selected = revert ?
+                            (--selected < 0 ? 0 : selected) :
+                            ++selected >= max ? max-1 : selected;
+                $creation.find('.cp-creation-template-element')
+                    .removeClass('cp-creation-template-selected');
+                $($creation.find('.cp-creation-template-element').get(selected))
+                    .addClass('cp-creation-template-selected');
+            };
+
+        });
 
         // Display expiration form when checkbox checked
         $creation.find('#cp-creation-expire').on('change', function () {
             if ($(this).is(':checked')) {
                 $creation.find('.cp-creation-expire-picker:not(.active)').addClass('active');
+                $creation.find('.cp-creation-expire:not(.active)').addClass('active');
                 $creation.find('#cp-creation-expire-val').focus();
                 return;
             }
             $creation.find('.cp-creation-expire-picker').removeClass('active');
+            $creation.find('.cp-creation-expire').removeClass('active');
             $creation.focus();
         });
 

www/common/cryptpad-common.js

@@ -424,6 +424,7 @@ define([
         // it allows us to add owners and expiration time if it is a new file
         var parsed = Hash.parsePadUrl(href);
         if(!parsed) { throw new Error("Cannot get template hash"); }
+        postMessage("INCREMENT_TEMPLATE_USE", href);
         Crypt.get(parsed.hash, function (err, val) {
             if (err) { throw new Error(err); }
             var p = Hash.parsePadUrl(window.location.href);

www/common/loading.js

@@ -1,3 +1,5 @@
+// dark #326599
+// light #4591c4
 define([], function () {
     var loadingStyle = (function(){/*
 #cp-loading {
@@ -9,31 +11,74 @@ define([], function () {
   bottom: 0px;
   left: 0px;
   right: 0px;
-  background: #222;
+  background: linear-gradient(to right, #326599 0%, #326599 50%, #4591c4 50%, #4591c4 100%);
   color: #fafafa;
-  text-align: center;
   font-size: 1.5em;
   opacity: 1;
+  display: flex;
+  flex-flow: column;
+  justify-content: center;
+  align-items: center;
 }
 #cp-loading.cp-loading-hidden {
   opacity: 0;
   visibility: hidden;
 }
+#cp-loading .cp-loading-logo {
+    height: 300px;
+    width: 300px;
+    margin-top: 50px;
+    flex: 0 1 auto;
+    min-height: 0;
+    text-align: center;
+}
+#cp-loading .cp-loading-logo img {
+    max-width: 100%;
+    max-height: 100%;
+}
 #cp-loading .cp-loading-container {
-  margin-top: 50vh;
+    width: 700px;
-  transform: translateY(-50%);
+    max-width: 90vw;
+    height: 500px;
+    max-height: calc(100vh - 20px);
+    margin: 50px;
+    flex-shrink: 0;
+    display: flex;
+    flex-flow: column;
+    justify-content: center;
+    align-items: center;
+}
+@media screen and (max-height: 800px) {
+    #cp-loading .cp-loading-container {
+        height: auto;
+    }
+}
+@media screen and (max-width: 600px) {
+    #cp-loading .cp-loading-container {
+        height: auto;
+    }
 }
 #cp-loading .cp-loading-cryptofist {
   margin-left: auto;
   margin-right: auto;
-  height: 300px;
+  //height: 300px;
+  max-width: 90vw;
+  max-height: 300px;
+  width: auto;
+  height: auto;
   margin-bottom: 2em;
 }
 @media screen and (max-height: 450px) {
   #cp-loading .cp-loading-cryptofist {
-    display: none;
   }
 }
+#cp-loading-message {
+    background: #FFF;
+    padding: 20px;
+    width: 100%;
+    color: #000;
+    display: none;
+}
 #cp-loading .cp-loading-spinner-container {
   position: relative;
   height: 100px;
@@ -75,8 +120,10 @@ define([], function () {
         '<style>',
         loadingStyle,
         '</style>',
+        '<div class="cp-loading-logo">',
+            '<img class="cp-loading-cryptofist" src="/customize/alt-favicon.png?' + urlArgs + '">',
+        '</div>',
         '<div class="cp-loading-container">',
-            '<img class="cp-loading-cryptofist" src="/customize/cryptpad-new-logo-colors-logoonly.png?' + urlArgs + '">',
             '<div class="cp-loading-spinner-container">',
                 '<span class="fa fa-circle-o-notch fa-spin fa-4x fa-fw"></span>',
             '</div>',

www/common/outer/async-store.js

@@ -660,6 +660,15 @@ define([
         });
         cb(res);
     };
+    Store.incrementTemplateUse = function (href) {
+        store.userObject.getPadAttribute(href, 'used', function (err, data) {
+            // This is a not critical function, abort in case of error to make sure we won't
+            // create any issue with the user object or the async store
+            if (err) { return; }
+            var used = typeof data === "number" ? ++data : 1;
+            store.userObject.setPadAttribute(href, 'used', used);
+        });
+    };
 
     // Pads
     Store.moveToTrash = function (data, cb) {

www/common/outer/store-rpc.js

@@ -126,6 +126,9 @@ define([
             case 'GET_STRONGER_HASH': {
                 Store.getStrongerHash(data, cb); break;
             }
+            case 'INCREMENT_TEMPLATE_USE': {
+                Store.incrementTemplateUse(data); break;
+            }
             // Messaging
             case 'INVITE_FROM_USERLIST': {
                 Store.inviteFromUserlist(data, cb); break;

www/common/sframe-common-outer.js

@@ -431,6 +431,8 @@ define([
             // File picker
             var FP = {};
             var initFilePicker = function (cfg) {
+                // cfg.hidden means pre-loading the filepicker while keeping it hidden.
+                // if cfg.hidden is true and the iframe already exists, do nothing
                 if (!FP.$iframe) {
                     var config = {};
                     config.onFilePicked = function (data) {
@@ -449,7 +451,7 @@ define([
                     };
                     FP.$iframe = $('<iframe>', {id: 'sbox-filePicker-iframe'}).appendTo($('body'));
                     FP.picker = FilePicker.create(config);
-                } else {
+                } else if (!cfg.hidden) {
                     FP.$iframe.show();
                     FP.picker.refresh(cfg);
                 }
@@ -491,7 +493,8 @@ define([
                                 res.push({
                                     id: el,
                                     name: data[el].filename || data[el].title || '?',
-                                    thumbnail: thumb
+                                    thumbnail: thumb,
+                                    used: data[el].used || 0
                                 });
                             }));
                         });

www/contacts/app-contacts.less

@@ -1,17 +1,13 @@
 @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';
 @import (once) '../../customize/src/less2/include/avatar.less';
+@import (once) '../../customize/src/less2/include/framework.less';
 
-.toolbar_main(
+.framework_min_main(
     @bg-color: @colortheme_friends-bg,
     @warn-color: @colortheme_friends-warn,
     @color: @colortheme_friends-color
 );
-.fileupload_main();
-.alertify_main();
 
 // body
 &.cp-app-contacts {

www/debug/app-debug.less

@@ -1,15 +1,11 @@
 @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';
 @import (once) '../../customize/src/less2/include/tools.less';
 @import (once) '../../customize/src/less2/include/tokenfield.less';
+@import (once) '../../customize/src/less2/include/framework.less';
 
-.toolbar_main();
-.fileupload_main();
-.alertify_main();
 .tokenfield_main();
+.framework_min_main();
 
 // body
 &.cp-app-debug {

www/drive/app-drive.less

@@ -1,20 +1,17 @@
 @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';
 @import (once) '../../customize/src/less2/include/leftside-menu.less';
 @import (once) "../../customize/src/less2/include/tools.less";
 @import (once) "../../customize/src/less2/include/limit-bar.less";
 @import (once) "../../customize/src/less2/include/tokenfield.less";
+@import (once) '../../customize/src/less2/include/framework.less';
 
-.toolbar_main(
+.framework_min_main(
     @bg-color: @colortheme_drive-bg,
     @warn-color: @colortheme_drive-warn,
     @color: @colortheme_drive-color
 );
-.fileupload_main();
+
-.alertify_main();
 .limit-bar_main();
 .tokenfield_main();
 

www/file/app-file.less

@@ -1,26 +1,17 @@
 @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';
 @import (once) '../../customize/src/less2/include/tokenfield.less';
+@import (once) '../../customize/src/less2/include/framework.less';
 
-.toolbar_main(
+.framework_min_main(
     @bg-color: @colortheme_file-bg,
     @warn-color: @colortheme_file-warn,
     @color: @colortheme_file-color
 );
-.fileupload_main();
-.alertify_main();
 .tokenfield_main();
 
 @button-border: 2px;
 
-/*html, body {
-    margin: 0px;
-    height: 100%;
-}*/
-
 // body
 display: flex;
 flex-flow: column;

www/filepicker/app-filepicker.less

@@ -3,10 +3,12 @@
 @import (once) '../../customize/src/less2/include/icon-colors.less';
 @import (once) '../../customize/src/less2/include/fileupload.less';
 @import (once) '../../customize/src/less2/include/alertify.less';
+@import (once) '../../customize/src/less2/include/tippy.less';
 
 .iconColors_main();
 .fileupload_main();
 .alertify_main();
+.tippy_main();
 
 #cp-filepicker-dialog {
     display: none;
@@ -36,7 +38,8 @@
             line-height: 1em;
             cursor: pointer;
 
-            background-color: #111;
+            background-color: @colortheme_modal-bg;
+            box-shadow: 2px 2px 5px #000;
             color: @darker;
 
             transition: all 0.1s;

www/poll/app-poll.less

@@ -1,22 +1,15 @@
 @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';
-@import (once) '../../customize/src/less2/include/tokenfield.less';
 @import (once) '../../customize/src/less2/include/tools.less';
 @import (once) '../../customize/src/less2/include/avatar.less';
-@import (once) '../../customize/src/less2/include/creation.less';
+@import (once) "../../customize/src/less2/include/framework.less";
 
-.toolbar_main(
+
+.framework_main(
     @bg-color: @colortheme_poll-bg,
     @warn-color: @colortheme_poll-warn,
     @color: @colortheme_poll-color
 );
-.fileupload_main();
-.alertify_main();
-.tokenfield_main();
-.creation_main();
 
 @poll-fore: #555;
 

www/profile/app-profile.less

@@ -1,19 +1,15 @@
 @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/framework.less';
-@import (once) '../../customize/src/less2/include/alertify.less';
 
 @import (once) '../../customize/src/less2/include/avatar.less';
 @import (once) '../../customize/src/less2/include/sidebar-layout.less';
 
-.toolbar_main(
+.framework_min_main(
     @bg-color: @colortheme_profile-bg,
     @warn-color: @colortheme_profile-warn,
     @color: @colortheme_profile-color
 );
-.fileupload_main();
-.alertify_main();
 .sidebar-layout_main();
 
 // body

www/register/main.js

@@ -118,15 +118,10 @@ define([
         }, 500);
 
         $register.on('keypress', function (e) {
-            e.preventDefault();
+            if (e.which === 13) {
-            e.stopPropagation();
+                e.preventDefault();
-
+                e.stopPropagation();
-            console.error(e.which);
+                return clickRegister();
-            switch (e.which) {
-                case 13: return clickRegister();
-                case 13: return clickRegister();
-                default:
-                    //console.log(e.which);
             }
         });
 

www/settings/app-settings.less

@@ -1,18 +1,15 @@
-@import (once) "../../customize/src/less2/include/colortheme-all.less";
 @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/alertify.less';
 @import (once) '../../customize/src/less2/include/sidebar-layout.less';
 @import (once) "../../customize/src/less2/include/limit-bar.less";
 @import (once) "../../customize/src/less2/include/creation.less";
+@import (once) '../../customize/src/less2/include/framework.less';
 
-.toolbar_main(
+.framework_min_main(
     @bg-color: @colortheme_settings-bg,
     @warn-color: @colortheme_settings-warn,
     @color: @colortheme_settings-color
 );
-.alertify_main();
 .sidebar-layout_main();
 .limit-bar_main();
 .creation_main();
@@ -21,6 +18,7 @@
 &.cp-app-settings {
     display: flex;
     flex-flow: column;
+    font: @colortheme_app-font;
     #cp-sidebarlayout-container {
         #cp-sidebarlayout-rightside {
             input[type="checkbox"] {

www/settings/inner.js

@@ -233,16 +233,14 @@ define([
         // Disable
         $('<span>', {'class': 'cp-sidebarlayout-description'})
             .text(Messages.settings_disableThumbnailsDescription).appendTo($div);
-        var $label = $('<label>', { 'for': 'disableThumbnails', 'class': 'noTitle' })
-            .text(Messages.settings_disableThumbnailsAction);
 
         var $ok = $('<span>', {'class': 'fa fa-check', title: Messages.saved});
         var $spinner = $('<span>', {'class': 'fa fa-spinner fa-pulse'});
 
-        var $checkbox = $('<input>', {
+        var $cbox = $(UI.createCheckbox('disableThumbnails',
-            'type': 'checkbox',
+                                   Messages.settings_disableThumbnailsAction,
-            id: 'disableThumbnails'
+                                   false, { label: {class: 'noTitle'} }));
-        }).on('change', function () {
+        var $checkbox = $cbox.find('input').on('change', function () {
             $spinner.show();
             $ok.hide();
             var val = $checkbox.is(':checked') || false;
@@ -252,11 +250,10 @@ define([
             });
         });
 
-        $checkbox.appendTo($div);
+        $cbox.appendTo($div);
-        $label.appendTo($div);
 
-        $ok.hide().appendTo($div);
+        $ok.hide().appendTo($cbox);
-        $spinner.hide().appendTo($div);
+        $spinner.hide().appendTo($cbox);
 
         common.getAttribute(['general', 'disableThumbnails'], function (e, val) {
             $checkbox[0].checked = typeof(val) === "undefined" || val;
@@ -283,9 +280,6 @@ define([
 
         $('<span>', {'class': 'label'}).text(Messages.settings_userFeedbackTitle).appendTo($div);
 
-        var $label = $('<label>', { 'for': 'cp-settings-userfeedback', 'class': 'noTitle' })
-            .text(Messages.settings_userFeedback);
-
         $('<span>', {'class': 'cp-sidebarlayout-description'})
             .append(Messages.settings_userFeedbackHint1)
             .append(Messages.settings_userFeedbackHint2).appendTo($div);
@@ -293,10 +287,10 @@ define([
         var $ok = $('<span>', {'class': 'fa fa-check', title: Messages.saved});
         var $spinner = $('<span>', {'class': 'fa fa-spinner fa-pulse'});
 
-        var $checkbox = $('<input>', {
+        var $cbox = $(UI.createCheckbox('cp-settings-userfeedback',
-            'type': 'checkbox',
+                                   Messages.settings_userFeedback,
-            id: 'cp-settings-userfeedback'
+                                   false, { label: {class: 'noTitle'} }));
-        }).on('change', function () {
+        var $checkbox = $cbox.find('input').on('change', function () {
             $spinner.show();
             $ok.hide();
             var val = $checkbox.is(':checked') || false;
@@ -306,11 +300,10 @@ define([
             });
         });
 
-        $checkbox.appendTo($div);
+        $cbox.appendTo($div);
-        $label.appendTo($div);
 
-        $ok.hide().appendTo($div);
+        $ok.hide().appendTo($cbox);
-        $spinner.hide().appendTo($div);
+        $spinner.hide().appendTo($cbox);
 
         if (privateData.feedbackAllowed) {
             $checkbox[0].checked = true;
@@ -730,30 +723,28 @@ define([
         var $ok = $('<span>', {'class': 'fa fa-check', title: Messages.saved});
         var $spinner = $('<span>', {'class': 'fa fa-spinner fa-pulse'});
 
-        var $label = $('<label>', { 'for': 'cp-settings-padwidth', 'class': 'noTitle' })
+        var $cbox = $(UI.createCheckbox('cp-settings-padwidth',
-                    .text(Messages.settings_padWidthLabel);
+                                   Messages.settings_padWidthLabel,
-        var $input = $('<input>', {
+                                   false, { label: {class: 'noTitle'} }));
-            type: 'checkbox',
+        var $checkbox = $cbox.find('input').on('change', function () {
-            id: 'cp-settings-padwidth'
-        }).on('change', function () {
             $spinner.show();
             $ok.hide();
-            var val = $input.is(':checked');
+            var val = $checkbox.is(':checked');
             common.setAttribute(['pad', 'width'], val, function () {
                 $spinner.hide();
                 $ok.show();
             });
-        }).appendTo($div);
+        });
-        $label.appendTo($div);
+        $cbox.appendTo($div);
 
-        $ok.hide().appendTo($div);
+        $ok.hide().appendTo($cbox);
-        $spinner.hide().appendTo($div);
+        $spinner.hide().appendTo($cbox);
 
 
         common.getAttribute(['pad', 'width'], function (e, val) {
             if (e) { return void console.error(e); }
             if (val) {
-                $input.attr('checked', 'checked');
+                $checkbox.attr('checked', 'checked');
             }
         });
         return $div;
@@ -805,13 +796,14 @@ define([
         }).css('flex-flow', 'column')
         .appendTo($div);
 
-        var $input = $('<input>', {
+
-            type: 'checkbox',
+        var $cbox = $(UI.createCheckbox('cp-settings-codeindent'));
-        }).on('change', function () {
+        var $checkbox = $cbox.find('input').on('change', function () {
-            var val = $input.is(':checked');
+            var val = $checkbox.is(':checked');
             if (typeof(val) !== 'boolean') { return; }
             common.setAttribute(['codemirror', key], val);
-        }).appendTo($inputBlock);
+        });
+        $cbox.appendTo($inputBlock);
 
         /*proxy.on('change', ['settings', 'codemirror', key], function (o, n) {
             $input[0].checked = !!n;
@@ -819,7 +811,7 @@ define([
 
         common.getAttribute(['codemirror', key], function (e, val) {
             if (e) { return void console.error(e); }
-            $input[0].checked = !!val;
+            $checkbox[0].checked = !!val;
         });
         return $div;
     };

www/slide/inner.js

@@ -153,53 +153,33 @@ define([
             $('<b>').text(Messages.printOptions).appendTo($p);
             $p.append($('<br>'));
             // Slide number
-            $('<input>', {
+            var cbox = UI.createCheckbox('cp-app-slide-options-number', Messages.printSlideNumber,
-                type: 'checkbox',
+                                         slideOptionsTmp.slide);
-                id: 'cp-app-slide-options-number',
+            $(cbox).appendTo($p).find('input').on('change', function () {
-                checked: slideOptionsTmp.slide
-            }).on('change', function () {
                 var c = this.checked;
                 slideOptionsTmp.slide = c;
-            }).appendTo($p).css('width', 'auto');
+            }).css('width', 'auto');
-            $('<label>', {'for': 'cp-app-slide-options-number'}).text(Messages.printSlideNumber)
-                .appendTo($p);
-            $p.append($('<br>'));
             // Date
-            $('<input>', {
+            var cboxDate = UI.createCheckbox('cp-app-slide-options-date', Messages.printDate,
-                type: 'checkbox',
+                                         slideOptionsTmp.date);
-                id: 'cp-app-slide-options-date',
+            $(cboxDate).appendTo($p).find('input').on('change', function () {
-                checked: slideOptionsTmp.date
-            }).on('change', function () {
                 var c = this.checked;
                 slideOptionsTmp.date = c;
-            }).appendTo($p).css('width', 'auto');
+            }).css('width', 'auto');
-            $('<label>', {'for': 'cp-app-slide-options-date'}).text(Messages.printDate)
-                .appendTo($p);
-            $p.append($('<br>'));
             // Title
-            $('<input>', {
+            var cboxTitle = UI.createCheckbox('cp-app-slide-options-title', Messages.printTitle,
-                type: 'checkbox',
+                                         slideOptionsTmp.title);
-                id: 'cp-app-slide-options-title',
+            $(cboxTitle).appendTo($p).find('input').on('change', function () {
-                checked: slideOptionsTmp.title
-            }).on('change', function () {
                 var c = this.checked;
                 slideOptionsTmp.title = c;
-            }).appendTo($p).css('width', 'auto');
+            }).css('width', 'auto');
-            $('<label>', {'for': 'cp-app-slide-options-title'}).text(Messages.printTitle)
-                .appendTo($p);
-            $p.append($('<br>'));
             // Transition
-            $('<input>', {
+            var cboxTransition = UI.createCheckbox('cp-app-slide-options-transition', Messages.printTransition,
-                type: 'checkbox',
+                                         slideOptionsTmp.transition);
-                id: 'cp-app-slide-options-transition',
+            $(cboxTransition).appendTo($p).find('input').on('change', function () {
-                checked: slideOptionsTmp.transition
-            }).on('change', function () {
                 var c = this.checked;
                 slideOptionsTmp.transition = c;
-            }).appendTo($p).css('width', 'auto');
+            }).css('width', 'auto');
-            $('<label>', {'for': 'cp-app-slide-options-transition'}).text(Messages.printTransition)
-                .appendTo($p);
-            $p.append($('<br>'));
             $p.append($('<br>'));
             // Background image
             $('<label>', {'for': 'cp-app-slide-options-bg'}).text(Messages.printBackground)

www/todo/app-todo.less

@@ -1,17 +1,13 @@
 @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';
 @import (once) '../../customize/src/less2/include/avatar.less';
+@import (once) '../../customize/src/less2/include/framework.less';
 
-.toolbar_main(
+.framework_min_main(
     @bg-color: @colortheme_todo-bg,
     @warn-color: @colortheme_todo-warn,
     @color: @colortheme_todo-color
 );
-.fileupload_main();
-.alertify_main();
 
 // body
 &.cp-app-todo {

www/whiteboard/app-whiteboard.less

@@ -1,21 +1,13 @@
 @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';
 @import (once) '../../customize/src/less2/include/tools.less';
-@import (once) '../../customize/src/less2/include/tokenfield.less';
+@import (once) "../../customize/src/less2/include/framework.less";
-@import (once) '../../customize/src/less2/include/creation.less';
 
-.toolbar_main(
+.framework_main(
     @bg-color: @colortheme_whiteboard-bg,
     @warn-color: @colortheme_whiteboard-warn,
     @color: @colortheme_whiteboard-color
 );
-.fileupload_main();
-.alertify_main();
-.tokenfield_main();
-.creation_main();
 
 // body
 &.cp-app-whiteboard {

www/worker/app-worker.less

@@ -1,14 +1,9 @@
 @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';
 @import (once) '../../customize/src/less2/include/avatar.less';
+@import (once) '../../customize/src/less2/include/framework.less';
 
-
+.framework_min_main();
-.toolbar_main();
-.fileupload_main();
-.alertify_main();
 
 // body
 &.cp-app-worker {