Fix styles of text_list setting with empty value
* fixed Add Value button margins * fixed description layout * DNS nameservers min=1 limit restored Partial-Bug: #1613614 Change-Id: Idc175e3f629674e764a3921ef2f85e3278131cba
This commit is contained in:
parent
b3718711a0
commit
c16a8d46e0
@ -1461,17 +1461,18 @@ input[type=range] {
|
|||||||
|
|
||||||
.field-list {
|
.field-list {
|
||||||
float: left;
|
float: left;
|
||||||
|
width: 352px;
|
||||||
> div {
|
> div {
|
||||||
float: none;
|
float: none;
|
||||||
input, textarea {
|
input, textarea {
|
||||||
margin-bottom: @base-indent / 2;
|
margin-bottom: @base-indent / 2;
|
||||||
|
margin-right: @base-indent;
|
||||||
}
|
}
|
||||||
&:last-child input, &:last-child textarea {
|
&:last-child input, &:last-child textarea {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
.field-controls {
|
.field-controls {
|
||||||
float: left;
|
float: left;
|
||||||
padding-left: @base-indent;
|
|
||||||
.btn {
|
.btn {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 7px 0 5px;
|
margin: 7px 0 5px;
|
||||||
|
@ -68,6 +68,9 @@
|
|||||||
"file": {
|
"file": {
|
||||||
"placeholder": "No file selected"
|
"placeholder": "No file selected"
|
||||||
},
|
},
|
||||||
|
"text_list": {
|
||||||
|
"add_value": "Add Value"
|
||||||
|
},
|
||||||
"selected_options": "__count__ selected",
|
"selected_options": "__count__ selected",
|
||||||
"select_all": "Select All",
|
"select_all": "Select All",
|
||||||
"find_options_placeholder": "type option name..."
|
"find_options_placeholder": "type option name..."
|
||||||
|
@ -1423,7 +1423,11 @@ var NetworkingL3Parameters = React.createClass({
|
|||||||
<div className='network-description'>
|
<div className='network-description'>
|
||||||
{i18n(networkTabNS + 'networking_parameters.dns_servers_description')}
|
{i18n(networkTabNS + 'networking_parameters.dns_servers_description')}
|
||||||
</div>
|
</div>
|
||||||
<customControls.text_list max={5} {...this.composeProps('dns_nameservers', true)} />
|
<customControls.text_list
|
||||||
|
min={1}
|
||||||
|
max={5}
|
||||||
|
{...this.composeProps('dns_nameservers', true)}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
@ -267,23 +267,25 @@ customControls.text_list = customControls.textarea_list = React.createClass({
|
|||||||
return this.changeField(index);
|
return this.changeField(index);
|
||||||
}, 200, {leading: true}),
|
}, 200, {leading: true}),
|
||||||
renderMultipleInputControls(index) {
|
renderMultipleInputControls(index) {
|
||||||
|
var {value, max, min, disabled} = this.props;
|
||||||
return (
|
return (
|
||||||
<div className='field-controls'>
|
<div className='field-controls'>
|
||||||
{(!this.props.max || this.props.value.length < this.props.max) &&
|
{(!max || value.length < max) &&
|
||||||
<button
|
<button
|
||||||
ref={'add' + index}
|
ref={'add' + index}
|
||||||
className='btn btn-link btn-add-field'
|
className='btn btn-link btn-add-field'
|
||||||
disabled={this.props.disabled}
|
disabled={disabled}
|
||||||
onClick={() => this.changeField(index, 'add')}
|
onClick={() => this.changeField(index, 'add')}
|
||||||
>
|
>
|
||||||
<i className='glyphicon glyphicon-plus-sign' />
|
<i className='glyphicon glyphicon-plus-sign' />
|
||||||
|
{value.length === 0 && i18n('controls.text_list.add_value')}
|
||||||
</button>
|
</button>
|
||||||
}
|
}
|
||||||
{this.props.value.length > this.props.min &&
|
{value.length > min &&
|
||||||
<button
|
<button
|
||||||
ref={'remove' + index}
|
ref={'remove' + index}
|
||||||
className='btn btn-link btn-remove-field'
|
className='btn btn-link btn-remove-field'
|
||||||
disabled={this.props.disabled}
|
disabled={disabled}
|
||||||
onClick={() => this.changeField(index, 'remove')}
|
onClick={() => this.changeField(index, 'remove')}
|
||||||
>
|
>
|
||||||
<i className='glyphicon glyphicon-minus-sign' />
|
<i className='glyphicon glyphicon-minus-sign' />
|
||||||
@ -353,11 +355,13 @@ customControls.text_list = customControls.textarea_list = React.createClass({
|
|||||||
render() {
|
render() {
|
||||||
return this.renderWrapper([
|
return this.renderWrapper([
|
||||||
this.renderLabel(),
|
this.renderLabel(),
|
||||||
this.props.value.length === 0 ?
|
<div key='field-list' className='field-list'>
|
||||||
this.renderMultipleInputControls(-1) :
|
{this.props.value.length === 0 ?
|
||||||
<div key='field-list' className='field-list'>
|
<div>{this.renderMultipleInputControls(-1)}</div>
|
||||||
{_.map(this.props.value, this.renderInput)}
|
:
|
||||||
</div>,
|
_.map(this.props.value, this.renderInput)
|
||||||
|
}
|
||||||
|
</div>,
|
||||||
this.renderDescription()
|
this.renderDescription()
|
||||||
]);
|
]);
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user