Dropdown button to make a pad from homepage

customize.dist/index.html

@@ -76,9 +76,9 @@
                 <!--<button class="btn btn-secondary knowmore">Know more</button>-->
                 <!--<button class="btn btn-secondary tryit">Discover our tools</button>-->
                 <!--<br>-->
-                <!--<button class="btn btn-success nologin" data-localization="login_nologin"></button>-->
+                <button class="btn btn-secondary nologin" data-localization="login_nologin"></button>
                 <!--<button class="btn btn-success nologin">Make a pad right now</button>-->
-                <p class="buttons"><a id="create-pad" href="/pad/"><button class="btn btn-success nologin">Make a pad right now</button></a></p>
+                <!--<p class="buttons"></p>-->
             </div>
 
         </div>

customize.dist/main.css

@@ -347,7 +347,7 @@
   display: none;
   position: absolute;
   background-color: #f9f9f9;
-  min-width: 200px;
+  min-width: 250px;
   box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2);
   z-index: 1000;
   max-height: 300px;
@@ -735,6 +735,7 @@ html.cp,
   height: calc(100vh - 150px);
   min-height: 450px;
   margin: auto;
+  z-index: 1;
   font-size: medium;
 }
 .cp #main #main-container,

customize.dist/main.js

@@ -35,9 +35,25 @@ define([
 
     var displayCreateButtons = function () {
         var $parent = $('#buttons');
+        var options = [];
         Config.availablePadTypes.forEach(function (el) {
-            $('#create-' + el).attr('target', '_blank').show();
+            options.push({
+                tag: 'a',
+                attributes: {
+                    'class': 'newdoc',
+                    'href': '/' + el,
+                    'target': '_blank'
+                },
+                content: Messages['button_new' + el] // Pretty name of the language value
             });
+        });
+        var dropdownConfig = {
+            text: Messages.makeAPad, // Button initial text
+            options: options, // Entries displayed in the menu
+        };
+        var $block = Cryptpad.createDropdown(dropdownConfig);
+        $block.find('button').addClass('btn').addClass('btn-success');
+        $block.appendTo($parent);
     };
 
     // Language selector

customize.dist/src/fragments/index.html

@@ -10,9 +10,9 @@
                 <!--<button class="btn btn-secondary knowmore">Know more</button>-->
                 <!--<button class="btn btn-secondary tryit">Discover our tools</button>-->
                 <!--<br>-->
-                <!--<button class="btn btn-success nologin" data-localization="login_nologin"></button>-->
+                <button class="btn btn-secondary nologin" data-localization="login_nologin"></button>
                 <!--<button class="btn btn-success nologin">Make a pad right now</button>-->
-                <p class="buttons"><a id="create-pad" href="/pad/"><button class="btn btn-success nologin">Make a pad right now</button></a></p>
+                <!--<p class="buttons"></p>-->
             </div>
 
         </div>

customize.dist/src/less/cryptpad.less

@@ -297,6 +297,7 @@ body.html {
     min-height: 450px;
     margin: auto;
     //margin-top: 100px;
+    z-index: 1;
 
     font-size: medium;
 

customize.dist/src/less/dropdown.less

@@ -26,7 +26,7 @@
         display: none;
         position: absolute;
         background-color: #f9f9f9;
-        min-width: 200px;
+        min-width: 250px;
         box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2);
         z-index: 1000;
         max-height: 300px;

customize.dist/toolbar.css

@@ -13,7 +13,7 @@
   display: none;
   position: absolute;
   background-color: #f9f9f9;
-  min-width: 200px;
+  min-width: 250px;
   box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2);
   z-index: 1000;
   max-height: 300px;

customize.dist/translations/messages.fr.js

@@ -296,6 +296,7 @@ define(function () {
     out.table_created = 'Créé le';
     out.table_last = 'Dernier accès';
 
+    out.makeAPad = 'Créer un document';
     out.button_newpad = 'Nouveau document texte';
     out.button_newcode = 'Nouvelle page de code';
     out.button_newpoll = 'Nouveau sondage';

customize.dist/translations/messages.js

@@ -294,6 +294,7 @@ define(function () {
     out.table_created = 'Created';
     out.table_last = 'Last Accessed';
 
+    out.makeAPad = 'Make a pad right now';
     out.button_newpad = 'New Rich Text pad';
     out.button_newcode = 'New Code pad';
     out.button_newpoll = 'New Poll';