server input tweaks

This commit is contained in:
SpikeHD
2022-05-16 17:23:13 -07:00
parent 38b4ab4f5d
commit 5c0a46b2d2
3 changed files with 24 additions and 12 deletions

View File

@@ -83,12 +83,16 @@
box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.2);
} }
.ServerConfig .TextInputWrapper {
display: inline-block;
}
#ip { #ip {
margin-right: 6px; margin-right: 6px;
} }
#port { #port {
width: 15%; width: 25%;
} }
@media (max-width: 1040px) { @media (max-width: 1040px) {

View File

@@ -62,11 +62,16 @@ export default class DirInput extends React.Component<IProps, IState> {
render() { render() {
return ( return (
<div className='DirInput'> <div className='DirInput'>
<TextInput value={this.state.value} placeholder={this.state.placeholder} readOnly={true} onChange={(text: string) => { <TextInput
this.setState({ value: text }) value={this.state.value}
placeholder={this.state.placeholder}
clearable={true}
readOnly={true} onChange={(text: string) => {
this.setState({ value: text })
if (this.props.onChange) this.props.onChange(text) if (this.props.onChange) this.props.onChange(text)
}}/> }}
/>
<div className="FileSelectIcon" onClick={this.handleIconClick}> <div className="FileSelectIcon" onClick={this.handleIconClick}>
<img src={File} /> <img src={File} />
</div> </div>

View File

@@ -42,13 +42,16 @@ export default class TextInput extends React.Component<IProps, IState> {
this.setState({ value: e.target.value }) this.setState({ value: e.target.value })
if (this.props.onChange) this.props.onChange(e.target.value) if (this.props.onChange) this.props.onChange(e.target.value)
}} /> }} />
<div className="TextClear" onClick={() => { {
this.setState({ value: '' }) this.props.clearable ?
<div className="TextClear" onClick={() => {
if (this.props.onChange) this.props.onChange('') this.setState({ value: '' })
}}>
<img src={Close} className="TextInputClear" /> if (this.props.onChange) this.props.onChange('')
</div> }}>
<img src={Close} className="TextInputClear" />
</div> : null
}
</div> </div>
) )
} }