Add an advanced new pad modal

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

@@ -0,0 +1,40 @@
+.icons_main() {
+    li {
+        display: inline-block;
+        margin: 10px 10px;
+        width: 140px;
+        height: 140px;
+        text-align: center;
+        vertical-align: top;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        padding-top: 5px;
+        padding-bottom: 5px;
+        border: 1px solid white;
+
+        .cp-icons-name {
+            width: 100%;
+            height: 24px;
+            margin: 0;
+            display: inline-block;
+            font-size: 14px;
+            //align-items: center;
+            //justify-content: center;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            word-wrap: break-word;
+        }
+        .fa {
+            display: block;
+            margin: auto;
+            font-size: 64px;
+            margin: 18px 0;
+            text-align: center;
+            &.listonly {
+                display: none;
+            }
+        }
+    }
+}
+

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

@@ -6,6 +6,8 @@
 @import (once) "./toolbar-history.less";
 @import (once) "./icon-colors.less";
 @import (once) "./tools.less";
+@import (once) "./icons.less";
+@import (once) "./modal.less";
 
 .toolbar_main (
     @color: @colortheme_default-color, // Color of the text for the toolbar
@@ -173,6 +175,68 @@
         }
     }
 
+    #cp-app-toolbar-creation-dialog.cp-modal-container {
+        .icons_main();
+
+        li:hover {
+            border: 1px solid white;
+        }
+        .cp-modal {
+            display: flex;
+            flex-flow: column;
+            li, li .fa {
+                cursor: pointer;
+            }
+            &> p {
+                margin: 50px;
+            }
+            &> div {
+                display: flex;
+                flex-wrap: wrap;
+                justify-content: center;
+                align-content: center;
+                overflow-y: auto;
+            }
+        }
+
+        .cp-creation-icons-name {
+            white-space: nowrap;
+        }
+
+        #cp-app-toolbar-creation-advanced {
+            width: auto;
+            margin: 0;
+            padding: 0;
+        }
+        label[for="cp-app-toolbar-creation-advanced"] {
+            margin: 0;
+            margin-left: 5px;
+        }
+
+        @media screen and (max-height: @browser_media-not-big) {
+            .cp-modal {
+                & > p {
+                    display: none;
+                }
+                & > div {
+                    align-content: unset;
+                    li {
+                        height: 40px;
+                        width: 200px;
+                        display: flex;
+                        align-items: center;
+                        .fa {
+                            font-size: 32px;
+                        }
+                        .cp-icons-name {
+                            height: auto;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
     // TODO(cjd) This ought to be in a less file for markdown-based editors
     .cp-markdown-toolbar {
         height: @toolbar_line-height;

customize.dist/translations/messages.fr.js

@@ -806,6 +806,9 @@ define(function () {
     out.creation_noOwner = "Pad de propriétaire";
     out.creation_expiration = "Date d'expiration";
     out.creation_propertiesTitle = "Disponibilité";
+    out.creation_appMenuName = "Mode avancé (Ctrl + E)";
+    out.creation_newPadModalDescription = "Cliquez sur un type de pad pour le créer. Vous pouvez cocher la case pour afficher l'écran de création de pads";
+    out.creation_newPadModalAdvanced = "Afficher l'écran de création de pads";
 
     return out;
 });

customize.dist/translations/messages.js

@@ -839,6 +839,9 @@ define(function () {
     out.creation_noOwner = "No owner";
     out.creation_expiration = "Expiration time";
     out.creation_propertiesTitle = "Availability";
+    out.creation_appMenuName = "Advanced mode (Ctrl + E)";
+    out.creation_newPadModalDescription = "Click on a pad type to create it. You can check the box if you want to display the pad creation screen (for owned pad, expiration pad, etc.).";
+    out.creation_newPadModalAdvanced = "Display the pad creation screen";
 
     return out;
 });

www/common/common-constants.js

@@ -11,5 +11,6 @@ define(function () {
         oldStorageKey: 'CryptPad_RECENTPADS',
         storageKey: 'filesData',
         tokenKey: 'loginToken',
+        displayPadCreationScreen: 'displayPadCreationScreen'
     };
 });

www/common/common-ui-elements.js

@@ -5,6 +5,7 @@ define([
     '/common/common-hash.js',
     '/common/common-language.js',
     '/common/common-interface.js',
+    '/common/common-constants.js',
     '/common/common-feedback.js',
     '/common/hyperscript.js',
     '/common/media-tag.js',
@@ -13,8 +14,8 @@ define([
     '/bower_components/nthen/index.js',
 
     'css!/common/tippy.css',
-], function ($, Config, Util, Hash, Language, UI, Feedback, h, MediaTag, Messages, AppConfig,
+], function ($, Config, Util, Hash, Language, UI, Constants, Feedback, h, MediaTag, Messages,
-             NThen) {
+             AppConfig, NThen) {
     var UIElements = {};
 
     // Configure MediaTags to use our local viewer
@@ -1262,6 +1263,64 @@ define([
         return $blockContainer;
     };
 
+    UIElements.createNewPadModal = function (common) {
+        var $modal = UIElements.createModal({
+            id: 'cp-app-toolbar-creation-dialog',
+            $body: $('body')
+        });
+        var $title = $('<h3>').text(Messages.fm_newFile);
+        var $description = $('<p>').text(Messages.creation_newPadModalDescription);
+        $modal.find('.cp-modal').append($title);
+        $modal.find('.cp-modal').append($description);
+
+        var $advanced;
+
+        var $advancedContainer = $('<div>');
+        if (common.isLoggedIn()) {
+            $advanced = $('<input>', {
+                type: 'checkbox',
+                checked: 'checked',
+                id: 'cp-app-toolbar-creation-advanced'
+            }).appendTo($advancedContainer);
+            $('<label>', {
+                for: 'cp-app-toolbar-creation-advanced'
+            }).text(Messages.creation_newPadModalAdvanced).appendTo($advancedContainer);
+        }
+
+        var $container = $('<div>');
+        AppConfig.availablePadTypes.forEach(function (p) {
+            if (p === 'drive') { return; }
+            if (p === 'contacts') { return; }
+            if (p === 'todo') { return; }
+            if (p === 'file') { return; }
+            if (!common.isLoggedIn() && AppConfig.registeredOnlyTypes &&
+                AppConfig.registeredOnlyTypes.indexOf(p) !== -1) { return; }
+            var $element = $('<li>', {
+                'class': 'cp-icons-element'
+            }).prepend(UI.getIcon(p)).appendTo($container);
+            $element.append($('<span>', {'class': 'cp-icons-name'})
+                .text(Messages.type[p]));
+            $element.attr('data-type', p);
+            $element.click(function () {
+                $modal.hide();
+                if ($advanced && $advanced.is(':checked')) {
+                    common.sessionStorage.put(Constants.displayPadCreationScreen, true, function () {
+                        common.openURL('/' + p + '/');
+                    });
+                    return;
+                }
+                common.sessionStorage.put(Constants.displayPadCreationScreen, "", function () {
+                    common.openURL('/' + p + '/');
+                });
+            });
+        });
+
+
+        /*var $content = createNewPadIcons($modal, isInRoot);*/
+        $modal.find('.cp-modal').append($container).append($advancedContainer);
+        window.setTimeout(function () { $modal.show(); });
+        //addNewPadHandlers($modal, isInRoot);
+    };
 
     UIElements.initFilePicker = function (common, cfg) {
         var onSelect = cfg.onSelect || $.noop;

www/common/sframe-app-framework.js

@@ -407,7 +407,7 @@ define([
             var priv = common.getMetadataMgr().getPrivateData();
             if (priv.isNewFile) {
                 var c = (priv.settings.general && priv.settings.general.creation) || {};
-                if (c.skip) { return void common.createPad(c, waitFor()); }
+                if (c.skip && !priv.forceCreationScreen) { return void common.createPad(c, waitFor()); }
                 common.getPadCreationScreen(c, waitFor());
             }
         }).nThen(function (waitFor) {

www/common/sframe-common-outer.js

@@ -148,6 +148,9 @@ define([
             if (!parsed.type) { throw new Error(); }
             var defaultTitle = Utils.Hash.getDefaultName(parsed);
             var edPublic;
+            var forceCreationScreen = cfg.useCreationScreen &&
+                                      sessionStorage[Utils.Constants.displayPadCreationScreen];
+            delete sessionStorage[Utils.Constants.displayPadCreationScreen];
             var updateMeta = function () {
                 //console.log('EV_METADATA_UPDATE');
                 var metaObj, isTemplate;
@@ -182,7 +185,8 @@ define([
                             upgradeURL: Cryptpad.upgradeURL
                         },
                         isNewFile: isNewFile,
-                        isDeleted: window.location.hash.length > 0
+                        isDeleted: window.location.hash.length > 0,
+                        forceCreationScreen: forceCreationScreen
                     };
                     for (var k in additionalPriv) { metaObj.priv[k] = additionalPriv[k]; }
 

www/common/sframe-common.js

@@ -91,6 +91,7 @@ define([
     funcs.createLanguageSelector = callWithCommon(UIElements.createLanguageSelector);
     funcs.createMarkdownToolbar = callWithCommon(UIElements.createMarkdownToolbar);
     funcs.getPadCreationScreen = callWithCommon(UIElements.getPadCreationScreen);
+    funcs.createNewPadModal = callWithCommon(UIElements.createNewPadModal);
 
     // Thumb
     funcs.displayThumbnail = callWithCommon(Thumb.displayThumbnail);

www/common/toolbar3.js

@@ -933,6 +933,14 @@ define([
                 content: $('<div>').append(UI.getIcon(p)).html() + Messages.type[p]
             });
         });
+        pads_options.push({
+            tag: 'a',
+            attributes: {
+                id: 'cp-app-toolbar-creation-advanced',
+                href: origin
+            },
+            content: '<span class="fa fa-plus-circle"></span> ' + Messages.creation_appMenuName
+        });
         var dropdownConfig = {
             text: '', // Button initial text
             options: pads_options, // Entries displayed in the menu
@@ -945,6 +953,10 @@ define([
         var $newPadBlock = UIElements.createDropdown(dropdownConfig);
         $newPadBlock.find('button').attr('title', Messages.newButtonTitle);
         $newPadBlock.find('button').addClass('fa fa-th');
+        $newPadBlock.find('#cp-app-toolbar-creation-advanced').click(function (e) {
+            e.preventDefault();
+            Common.createNewPadModal();
+        });
         return $newPadBlock;
     };
 

www/drive/app-drive.less

@@ -664,6 +664,10 @@ span {
         }
     }
 
+    .cp-app-drive-new-name {
+        white-space: nowrap;
+    }
+
     @media screen and (max-height: @browser_media-not-big) {
         .cp-modal {
             & > p {