Ability to provide a dropdown container to a text input. Applied to framework export.

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

@@ -168,6 +168,9 @@
                     margin-bottom: 0;
                 }
             }
+            .cp-alertify-type-container {
+                overflow: visible !important;
+            }
             .alertify-tabs {
                 max-height: 100%;
                 display: flex;

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

@@ -23,6 +23,23 @@
         }
     }
 
+    div.cp-alertify-type {
+        display: flex;
+        input {
+            margin: 0;
+            flex: 1;
+            min-width: 0;
+        }
+        span {
+            button {
+                margin: 0;
+                height: 100%;
+                margin-left: -1px;
+                text-transform: unset !important;
+            }
+        }
+    }
+
     textarea {
         padding: 8px;
         &[readonly] {

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

@@ -17,8 +17,7 @@
 
         button {
             .fa-caret-down {
-                margin-right: 0px;
+                margin-right: 1em !important;
-                margin-left: 5px;
             }
             * {
                 .tools_unselectable();

www/common/common-interface.js

@@ -161,6 +161,17 @@ define([
         return h('p.msg', h('input', attrs));
     };
 
+    dialog.textTypeInput = function (dropdown) {
+        var attrs = {
+            type: 'text',
+            'class': 'cp-text-type-input',
+        };
+        return h('p.msg.cp-alertify-type-container', h('div.cp-alertify-type', [
+            h('input', attrs),
+            dropdown // must be a "span"
+        ]));
+    };
+
     dialog.nav = function (content) {
         return h('nav', content || [
             dialog.cancelButton(),
@@ -186,6 +197,7 @@ define([
             });
         };
         return $frame.click(function (e) {
+            $frame.find('.cp-dropdown-content').hide();
             e.stopPropagation();
         })[0];
     };
@@ -480,7 +492,8 @@ define([
         cb = cb || function () {};
         opt = opt || {};
 
-        var inputBlock = opt.password ? UI.passwordInput() : dialog.textInput();
+        var inputBlock = opt.password ? UI.passwordInput() :
+                            (opt.typeInput ? dialog.textTypeInput(opt.typeInput) : dialog.textInput());
         var input = $(inputBlock).is('input') ? inputBlock : $(inputBlock).find('input')[0];
         input.value = typeof(def) === 'string'? def: '';
 

www/common/common-ui-elements.js

@@ -2896,9 +2896,11 @@ define([
         var $button = $('<button>', {
             'class': ''
         }).append($('<span>', {'class': 'cp-dropdown-button-title'}).html(config.text || ""));
-        /*$('<span>', {
+        if (config.caretDown) {
-            'class': 'fa fa-caret-down',
+            $('<span>', {
-        }).appendTo($button);*/
+                'class': 'fa fa-caret-down',
+            }).prependTo($button);
+        }
 
         // Menu
         var $innerblock = $('<div>', {'class': 'cp-dropdown-content'});
@@ -2965,6 +2967,9 @@ define([
         if (config.isSelect) {
             var pressed = '';
             var to;
+            $container.on('click', 'a', function () {
+                value = $(this).data('value');
+            });
             $container.keydown(function (e) {
                 var $value = $innerblock.find('[data-value].cp-dropdown-element-active:visible');
                 if (e.which === 38) { // Up

www/common/sframe-app-framework.js

@@ -6,9 +6,11 @@ define([
     '/bower_components/nthen/index.js',
     '/common/sframe-common.js',
     '/customize/messages.js',
+    '/common/hyperscript.js',
     '/common/common-util.js',
     '/common/common-hash.js',
     '/common/common-interface.js',
+    '/common/common-ui-elements.js',
     '/common/common-thumbnail.js',
     '/common/common-feedback.js',
     '/customize/application_config.js',
@@ -26,9 +28,11 @@ define([
     nThen,
     SFCommon,
     Messages,
+    h,
     Util,
     Hash,
     UI,
+    UIElements,
     Thumb,
     Feedback,
     AppConfig,
@@ -408,10 +412,36 @@ define([
             var $export = common.createButton('export', true, {}, function () {
                 var ext = (typeof(extension) === 'function') ? extension() : extension;
                 var suggestion = title.suggestTitle('cryptpad-document');
+                ext = ext || '.txt';
+                var types = [{
+                    tag: 'a',
+                    attributes: {
+                        'data-value': ext,
+                        'href': '#'
+                    },
+                    content: ext
+                }, {
+                    tag: 'a',
+                    attributes: {
+                        'data-value': '',
+                        'href': '#'
+                    },
+                    content: ' '
+                }];
+                var dropdownConfig = {
+                    text: ext, // Button initial text
+                    caretDown: true,
+                    options: types, // Entries displayed in the menu
+                    isSelect: true,
+                    initialValue: ext,
+                    common: common
+                };
+                var $select = UIElements.createDropdown(dropdownConfig);
                 UI.prompt(Messages.exportPrompt,
-                    Util.fixFileName(suggestion) + ext, function (filename)
+                    Util.fixFileName(suggestion), function (filename)
                 {
                     if (!(typeof(filename) === 'string' && filename)) { return; }
+                    filename = filename + $select.getValue();
                     if (async) {
                         fe(function (blob) {
                             SaveAs(blob, filename);
@@ -420,6 +450,8 @@ define([
                     }
                     var blob = fe();
                     SaveAs(blob, filename);
+                }, {
+                    typeInput: $select[0]
                 });
             });
             toolbar.$drawer.append($export);