dual text + button input

oml/api.py

@@ -40,6 +40,8 @@ def selectFolder(data):
     p = subprocess.Popen(cmd, stdout=subprocess.PIPE, close_fds=True)
     stdout, stderr = p.communicate()
     path = stdout.decode('utf-8').strip()
+    if path == 'None':
+        path = None
     return {
         'path': path
     }
@@ -60,12 +62,18 @@ def selectFile(data):
     p = subprocess.Popen(cmd, stdout=subprocess.PIPE)
     stdout, stderr = p.communicate()
     path = stdout.decode('utf-8').strip()
+    if path == 'None':
+        path = None
     return {
         'path': path
     }
 actions.register(selectFile, cache=False)
 
-
+def short_home(path):
+    home = os.path.expanduser('~')
+    if path and path.startswith(home):
+        path = path.replace(home, '~')
+    return path
 
 def autocompleteFolder(data):
     '''
@@ -92,6 +100,7 @@ def autocompleteFolder(data):
             folders = [path] + folders
     else:
         folders = []
+    folders = [short_home(f) for f in folders]
     return {
         'items': ox.sorted_strings(folders)
     }

static/js/selectFolder.js

@@ -1,26 +1,41 @@
 'use strict';
 
 oml.ui.selectFolder = function(options, self) {
-    options.width = options.width - options.labelWidth
-    options = Ox.extend({
-        title: '...',
-        textAlign: 'left'
-    }, options);
-    var $button = Ox.Button(options, self).bindEvent({
+    var inputOptions = {
+            style: options.style,
+            placeholder: options.placeholder,
+            width: options.width - options.labelWidth - 4,
+            value: options.title,
+            autocomplete: function(value, callback) {
+                oml.api.autocompleteFolder({path: value}, function(result) {
+                    callback(result.data.items);
+                });
+            },
+            autocompleteSelect: true,
+            changeOnKeypress: true,
+        },
+        buttonOptions = {
+            overlap: 'left',
+            tooltip: Ox._('Select Folder'),
+            style: options.style,
+            title: 'directory',
+            type: 'image'
+        };
+    var $button = Ox.Button(buttonOptions).bindEvent({
             click: function(event) {
                 oml.api.selectFolder({
-                    base: $button.value()
+                    base: $input.value()
                 }, function(result) {
                     if (result.data.path) {
-                        $button.value(result.data.path);
-                        $button.options({
-                            title: result.data.path
-                        });
-                        $button.triggerEvent('change', result.data.path);
+                        $input.value(result.data.path);
+                        that.triggerEvent('change', result.data.path);
                     }
                 })
             }
+        }).css({
+            'padding-left': '4px'
         }),
+        $input = Ox.Input(inputOptions),
         that = Ox.FormElementGroup({
             id: options.id,
             elements: [
@@ -31,12 +46,13 @@ oml.ui.selectFolder = function(options, self) {
                     title: options.label,
                     width: options.labelWidth
                 }),
+                $input,
                 $button
             ],
         }, self);
 
     that.value = function() {
-        return $button.value()
+        return $input.value()
     }
 
     if (options.title && options.title != '...') {