Task options redesign

app/static/app/js/components/EditPresetDialog.jsx

@@ -30,7 +30,9 @@ class EditPresetDialog extends React.Component {
         this.options = {};
 
         this.state = {
-            name: props.preset.name
+            name: props.preset.name,
+            search: "",
+            showSearch: false
         };
 
         this.getFormData = this.getFormData.bind(this);
@@ -81,6 +83,16 @@ class EditPresetDialog extends React.Component {
       }
     }
 
+    toggleSearchControl = () => {
+        this.setState({showSearch: !this.state.showSearch});
+    }
+
+    componentDidUpdate(prevProps, prevState){
+        if (this.state.showSearch){
+            this.searchControl.focus();
+        }
+    }
+
     render(){
         let options = PresetUtils.getAvailableOptions(this.props.preset.options, this.props.availableOptions);
 
@@ -97,17 +109,30 @@ class EditPresetDialog extends React.Component {
                     deleteWarning={false}
                     deleteAction={(this.props.preset.id !== -1 && !this.props.preset.system) ? this.props.deleteAction : undefined}>
                   {!this.isCustomPreset() ? 
-                    <div className="row preset-name">
+                    [<div className="row preset-name">
                         <label className="col-sm-2 control-label">{_("Name")}</label>
                         <div className="col-sm-10">
                           <input type="text" className="form-control" ref={(domNode) => { this.nameInput = domNode; }} value={this.state.name} onChange={this.handleChange('name')} />
                         </div>
+                    </div>,
+                    <hr/>]
+                  : ""}
+
+                  <button type="submit" className="btn btn-default search-toggle btn-sm"  title={_("Search")} onClick={this.toggleSearchControl}><i className="fa fa-filter"></i></button>
+
+                  {this.state.showSearch ? 
+                    <div className="row search-controls">
+                        <div className="col-sm-12">
+                            <input type="text" className="form-control" value={this.state.search} ref={(node) => { this.searchControl = node}} onChange={this.handleChange('search')} />
+                        </div>
                     </div> 
                   : ""}
                   <div className="row">
-                    <label className="col-sm-2 control-label"></label>
-                    <div className="col-sm-10">
-                    {options.map(option =>
+                    <div className="col-sm-12">
+                    {options.filter(option => this.state.showSearch && this.state.search !== "" ? 
+                                                option.name.toLowerCase().indexOf(this.state.search.toLowerCase()) !== -1 :
+                                                true)
+                            .map(option =>
                                 <ProcessingNodeOption {...option}
                                 key={option.name}
                                 ref={this.setOptionRef(option.name)} /> 

app/static/app/js/components/ProcessingNodeOption.jsx

@@ -47,7 +47,7 @@ class ProcessingNodeOption extends React.Component {
   }
 
   setTooltips(domNode){
-    if (domNode !== null) $(domNode).children('[data-toggle="tooltip"]').tooltip();
+    if (domNode !== null) $(domNode).find('[data-toggle="tooltip"]').tooltip();
   }
 
   resetToDefault(e){
@@ -156,11 +156,13 @@ class ProcessingNodeOption extends React.Component {
 
     return (
       <div className="processing-node-option form-inline form-group form-horizontal" ref={this.setTooltips}>
-        <label>{this.props.name} {(!this.isEnumType() && this.props.domain ? `(${this.props.domain})` : "")}</label><br/>
+        <label>{this.props.name} {(!this.isEnumType() && this.props.domain ? `(${this.props.domain})` : "")} <i data-toggle="tooltip" data-placement="bottom" title={this.props.help} onClick={e => e.preventDefault()} className="fa fa-info-circle info-button"></i></label><br/>
         {inputControl}
         {loadFileControl}
-        <button type="submit" className="btn glyphicon glyphicon-info-sign btn-primary" data-toggle="tooltip" data-placement="left" title={this.props.help} onClick={e => e.preventDefault()}></button>
-        <button type="submit" className="btn glyphicon glyphicon glyphicon-repeat btn-default" data-toggle="tooltip" data-placement="top" title={_("Reset to default")} onClick={this.resetToDefault}></button>
+        
+        {this.state.value !== "" ? 
+        <button type="submit" className="btn glyphicon glyphicon glyphicon-repeat btn-default" data-toggle="tooltip" data-placement="top" title={_("Reset to default")} onClick={this.resetToDefault}></button> :
+        ""}
       </div>
     );
   }

app/static/app/js/css/EditPresetDialog.scss

@@ -1,5 +1,33 @@
 .edit-preset-dialog{
 	.preset-name{
         margin-bottom: 16px;
+        display: flex;
+        label{
+            text-align: left;
+        }
+    }
+    .info-button{
+        position: relative;
+        top: 1px;
+        left: 2px;
+    }
+    
+    .checkbox{
+        min-height: 45px;
+    }
+
+    .search-toggle{
+        position: absolute;
+        right: 24px;
+        top: 24px;
+        z-index: 2;
+    }
+
+    .search-controls{
+        margin-bottom: 12px;
+        margin-right: 38px;
+        input{
+            height: 36px;
+        }
     }
 }