Add keyboard shortcuts for the Ctrl+E or Cmd+E modal

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

@@ -25,6 +25,10 @@
             text-overflow: ellipsis;
             word-wrap: break-word;
         }
+        &.cp-icons-element-selected {
+            background-color: white;
+            color: #666;
+        }
         .fa {
             display: block;
             font-size: 64px;

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

@@ -208,6 +208,7 @@
             width: auto;
             margin: 0;
             padding: 0;
+            outline: none;
         }
         label[for="cp-app-toolbar-creation-advanced"] {
             margin: 0;

customize.dist/translations/messages.fr.js

@@ -864,7 +864,8 @@ define(function () {
     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_newPadModalDescription = "Cliquez sur un type de pad pour le créer. Vous pouvez aussi appuyer sur <b>Tab</b> pour sélectionner un type et appuyer sur <b>Entrée</b> pour valider.";
+    out.creation_newPadModalDescriptionAdvanced = "Cochez la case si vous souhaitez voir l'écran de création de pads (pour les pads possédés ou à date d'expiration). Vous pouvez appuyer sur <b>Espace</b> pour changer sa valeur.";
     out.creation_newPadModalAdvanced = "Afficher l'écran de création de pads";
 
     // New share modal

customize.dist/translations/messages.js

@@ -902,7 +902,8 @@ define(function () {
     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 pads, expiring pads, etc.).";
+    out.creation_newPadModalDescription = "Click on a pad type to create it. You can also press <b>Tab</b> to select the type and press <b>Enter</b> to confirm.";
+    out.creation_newPadModalDescriptionAdvanced = "You can check the box (or press <b>Space</b> to change its value) if you want to display the pad creation screen (for owned pads, expiring pads, etc.).";
     out.creation_newPadModalAdvanced = "Display the pad creation screen";
 
     // New share modal

www/common/common-ui-elements.js

@@ -1528,6 +1528,7 @@ define([
         if (!$blockContainer.length) {
             $blockContainer = $('<div>', {
                 'class': 'cp-modal-container',
+                tabindex: 1,
                 'id': cfg.id
             });
         }
@@ -1559,14 +1560,16 @@ define([
             $body: $('body')
         });
         var $title = $('<h3>').text(Messages.fm_newFile);
-        var $description = $('<p>').text(Messages.creation_newPadModalDescription);
+        var $description = $('<p>').html(Messages.creation_newPadModalDescription);
         $modal.find('.cp-modal').append($title);
         $modal.find('.cp-modal').append($description);
 
         var $advanced;
 
         var $advancedContainer = $('<div>');
-        if (common.isLoggedIn()) {
+        var priv = common.getMetadataMgr().getPrivateData();
+        var c = (priv.settings.general && priv.settings.general.creation) || {};
+        if (AppConfig.displayCreationScreen && common.isLoggedIn() && c.skip) {
             $advanced = $('<input>', {
                 type: 'checkbox',
                 checked: 'checked',
@@ -1575,9 +1578,12 @@ define([
             $('<label>', {
                 for: 'cp-app-toolbar-creation-advanced'
             }).text(Messages.creation_newPadModalAdvanced).appendTo($advancedContainer);
+            $description.append('<br>');
+            $description.append(Messages.creation_newPadModalDescriptionAdvanced);
         }
 
         var $container = $('<div>');
+        var i = 0;
         AppConfig.availablePadTypes.forEach(function (p) {
             if (p === 'drive') { return; }
             if (p === 'contacts') { return; }
@@ -1586,7 +1592,8 @@ define([
             if (!common.isLoggedIn() && AppConfig.registeredOnlyTypes &&
                 AppConfig.registeredOnlyTypes.indexOf(p) !== -1) { return; }
             var $element = $('<li>', {
-                'class': 'cp-icons-element'
+                'class': 'cp-icons-element',
+                'id': 'cp-newpad-icons-'+ (i++)
             }).prepend(UI.getIcon(p)).appendTo($container);
             $element.append($('<span>', {'class': 'cp-icons-name'})
                 .text(Messages.type[p]));
@@ -1594,7 +1601,7 @@ define([
             $element.click(function () {
                 $modal.hide();
                 if ($advanced && $advanced.is(':checked')) {
-                    common.sessionStorage.put(Constants.displayPadCreationScreen, true, function () {
+                    common.sessionStorage.put(Constants.displayPadCreationScreen, true, function (){
                         common.openURL('/' + p + '/');
                     });
                     return;
@@ -1605,11 +1612,41 @@ define([
             });
         });
 
+        var selected = -1;
+        var next = function () {
+            selected = ++selected % 5;
+            $container.find('.cp-icons-element-selected').removeClass('cp-icons-element-selected');
+            $container.find('#cp-newpad-icons-'+selected).addClass('cp-icons-element-selected');
+        };
+
+        $modal.off('keydown');
+        $modal.keydown(function (e) {
+            if (e.which === 9) {
+                e.preventDefault();
+                e.stopPropagation();
+                next();
+                return;
+            }
+            if (e.which === 13) {
+                if ($container.find('.cp-icons-element-selected').length === 1) {
+                    $container.find('.cp-icons-element-selected').click();
+                }
+                return;
+            }
+            if (e.which === 32 && $advanced) {
+                $advanced.prop('checked', !$advanced.prop('checked'));
+                $modal.focus();
+                e.stopPropagation();
+                e.preventDefault();
+            }
+        });
+
 
-        /*var $content = createNewPadIcons($modal, isInRoot);*/
         $modal.find('.cp-modal').append($container).append($advancedContainer);
-        window.setTimeout(function () { $modal.show(); });
-        //addNewPadHandlers($modal, isInRoot);
+        window.setTimeout(function () {
+            $modal.show();
+            $modal.focus();
+        });
     };
 
     UIElements.initFilePicker = function (common, cfg) {

www/common/toolbar3.js

@@ -768,7 +768,6 @@ define([
                 content: $('<div>').append(UI.getIcon(p)).html() + Messages.type[p]
             });
         });
-        if (Config.displayCreationScreen) {
         pads_options.push({
             tag: 'a',
             attributes: {
@@ -778,11 +777,10 @@ define([
             content: '<span class="fa fa-plus-circle"></span> ' + Messages.creation_appMenuName
         });
         $(window).keydown(function (e) {
-                if (e.which === 69 && e.ctrlKey) {
+            if (e.which === 69 && (e.ctrlKey || e.metaKey)) {
                 Common.createNewPadModal();
             }
         });
-        }
         var dropdownConfig = {
             text: '', // Button initial text
             options: pads_options, // Entries displayed in the menu