Make tooltip icons inline

Signed-off-by: Egor Savkin <es@m-labs.hk>
This commit is contained in:
Egor Savkin 2024-07-15 17:18:13 +08:00
parent b0ef9d07fc
commit 68677dce6e
3 changed files with 5 additions and 4 deletions

View File

@ -39,9 +39,10 @@ class Line extends Component {
<div className="shop-line" key={this.props.id}> <div className="shop-line" key={this.props.id}>
<label htmlFor={key} className="form-label"> <label htmlFor={key} className="form-label">
{this.props.icon && <img src={`/images${this.props.icon}`} className="options-icon"/>} {this.props.icon && <img src={`/images${this.props.icon}`} className="options-icon"/>}
{this.props.title}: {this.props.title}
{this.props.tip && <Tip id={this.props.id + "tooltip"} tip={this.props.tip}/>}
:
</label> </label>
{this.props.tip && <Tip id={this.props.id + "tooltip"} tip={this.props.tip}/>}
<input type="text" className={`form-control form-control-sm ${this.state.valid ? "" : "options-invalid"}`} id={key} onChange={this.handleChange} <input type="text" className={`form-control form-control-sm ${this.state.valid ? "" : "options-invalid"}`} id={key} onChange={this.handleChange}
value={this.state.text}/> value={this.state.text}/>
</div> </div>

View File

@ -49,8 +49,8 @@ class Switch extends Component {
<label className="form-check-label" htmlFor={key} style={{"display": "inline"}}> <label className="form-check-label" htmlFor={key} style={{"display": "inline"}}>
{this.props.icon && <img src={`/images${this.props.icon}`} className="options-icon"/>} {this.props.icon && <img src={`/images${this.props.icon}`} className="options-icon"/>}
{this.props.title} {this.props.title}
{this.props.tip && <Tip id={this.props.id + "tooltip"} tip={this.props.tip}/>}
</label> </label>
{this.props.tip && <Tip id={this.props.id + "tooltip"} tip={this.props.tip}/>}
</div> </div>
</div> </div>
); );

View File

@ -65,8 +65,8 @@ class SwitchLine extends Component {
<label className="form-check-label" htmlFor={key + "switch"}> <label className="form-check-label" htmlFor={key + "switch"}>
{this.props.icon && <img src={`/images${this.props.icon}`} className="options-icon"/>} {this.props.icon && <img src={`/images${this.props.icon}`} className="options-icon"/>}
{this.props.title} {this.props.title}
{this.props.tip && <Tip id={this.props.id + "tooltip"} tip={this.props.tip}/>}
</label> </label>
{this.props.tip && <Tip id={this.props.id + "tooltip"} tip={this.props.tip}/>}
</div> </div>
<input type="text" className={`form-control form-control-sm ${this.state.valid ? "" : "options-invalid"}`} id={key + "line"} onChange={this.handleText} <input type="text" className={`form-control form-control-sm ${this.state.valid ? "" : "options-invalid"}`} id={key + "line"} onChange={this.handleText}
value={this.state.text} disabled={!this.state.checked}/> value={this.state.text} disabled={!this.state.checked}/>