Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tags input tweaks (for cmd line input) #1223

Merged
merged 1 commit into from Aug 18, 2016
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
16 changes: 14 additions & 2 deletions SingularityUI/app/components/common/modal/FormModal.jsx
Expand Up @@ -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];
Expand Down Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion SingularityUI/app/components/requests/RunNowModal.jsx
Expand Up @@ -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()
},
{
Expand Down
6 changes: 6 additions & 0 deletions SingularityUI/app/styles/vendorOverrides.styl
Expand Up @@ -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%)