Tweaks to tags input

HubSpot · Aug 17, 2016 · d6ed6eb · d6ed6eb
1 parent 0abd543
commit d6ed6eb
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 3 deletions.
diff --git a/SingularityUI/app/components/common/modal/FormModal.jsx b/SingularityUI/app/components/common/modal/FormModal.jsx
@@ -164,6 +164,18 @@ export default class FormModal extends React.Component {
     );
   }
 
+  renderTagsInput(props) {
+    const inputProps = _.omit(props, 'className', 'placeholder', 'addTag');
+    return (
+      <div className="input-group">
+        <input type="text" ref="argValue" className="form-control" placeholder="" {...inputProps} />
+        <span className="input-group-btn">
+          <Button bsStyle="success" onClick={() => this.refs.tagsInput.accept()}>+</Button>
+        </span>
+      </div>
+    );
+  }
+
   renderForm() {
     const inputs = this.props.formElements.map((formElement) => {
       const error = this.state.errors[formElement.name];
@@ -239,11 +251,11 @@ export default class FormModal extends React.Component {
               <label style={{display: 'block', width: '100%'}}>
                 {formElement.label}
                 <TagsInput
+                  ref="tagsInput"
                   value={this.state.formState[formElement.name] || []}
                   onChange={(tags) => this.handleFormChange(formElement.name, tags)}
                   addOnBlur={true}
-                  addOnPaste={true}
-                  inputProps={{className: 'form-control input-large', placeholder: ''}}
+                  renderInput={(props) => this.renderTagsInput(props)}
                   renderTag={this.renderTag}
                 />
               </label>

diff --git a/SingularityUI/app/components/requests/RunNowModal.jsx b/SingularityUI/app/components/requests/RunNowModal.jsx
@@ -69,7 +69,7 @@ class RunNowModal extends Component {
             {
               name: 'commandLineArgs',
               type: FormModal.INPUT_TYPES.TAGS,
-              label: 'Additional command line input: (optional)',
+              label: 'Additional command line arguments: (optional)',
               defaultValue: this.defaultCommandLineArgs()
             },
             {

diff --git a/SingularityUI/app/styles/vendorOverrides.styl b/SingularityUI/app/styles/vendorOverrides.styl
@@ -8,3 +8,9 @@ ul
 .react-tagsinput
   border none
   padding 0
+
+.react-tagsinput-tag
+  background-color #F2F9FC
+  border-radius 2px
+  border 1px solid darken(#F2F9FC, 25%)
+  color darken(#F2F9FC, 70%)