f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2025-12-28 07:02:38 +00:00
Code Wiki Activity

add close button for string array edit input, update styles

Browse Source
This commit is contained in:
Charlie Humphreys
2022-06-24 23:48:32 -05:00
parent e963672b65
commit c7d5d6800b
2 changed files with 23 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
client/homebrew/editor/metadataEditor/metadataEditor.less
View File

@@ -121,7 +121,6 @@
#groupedIcon { #groupedIcon {
#backgroundColors; #backgroundColors;
display: inline-block; display: inline-block;
border-radius: 0 0.5em 0.5em 0;
height: ~"calc(100% + 0.6em)"; height: ~"calc(100% + 0.6em)";
position: relative; position: relative;
top: -0.3em; top: -0.3em;
@@ -136,6 +135,14 @@
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
} }
&:not(:last-child) {
border-right: 1px solid black;
}
&:last-child {
border-radius: 0 0.5em 0.5em 0;
}
} }
.badge { .badge {
@@ -177,6 +184,10 @@
font-size: .8em; font-size: .8em;
right: 1px; right: 1px;
top: -.54em; top: -.54em;
i {
font-size: 1.125em;
}
} }
} }
} }

17
client/homebrew/editor/stringArrayEditor/stringArrayEditor.jsx
View File

@@ -92,12 +92,16 @@ const StringArrayEditor = createClass({
} }
} }
} else if(event.key === 'Escape') { } else if(event.key === 'Escape') {
const valueContext = this.state.valueContext; this.closeEditInput(index);
valueContext[index].editing = false;
this.setState({ valueContext, updateValue: '' });
} }
}, },
closeEditInput : function(index) {
const valueContext = this.state.valueContext;
valueContext[index].editing = false;
this.setState({ valueContext, updateValue: '' });
},
render : function() { render : function() {
const valueElements = Object.values(this.state.valueContext).map((context, i)=>context.editing const valueElements = Object.values(this.state.valueContext).map((context, i)=>context.editing
? <React.Fragment key={i}> ? <React.Fragment key={i}>
@@ -106,11 +110,12 @@ const StringArrayEditor = createClass({
value={this.state.updateValue} value={this.state.updateValue}
onKeyDown={(e)=>this.handleValueInputKeyDown(e, i)} onKeyDown={(e)=>this.handleValueInputKeyDown(e, i)}
onChange={(e)=>this.setState({ updateValue: e.target.value })}/> onChange={(e)=>this.setState({ updateValue: e.target.value })}/>
{this.valueIsValid(this.state.updateValue) ? <div className='icon steel'><i className='fa fa-check fa-fw' onClick={(e)=>{ e.stopPropagation(); this.updateValue(this.state.updateValue, i); }}/></div> : null} {<div className='icon steel' onClick={(e)=>{ e.stopPropagation(); this.closeEditInput(i); }}><i className='fa fa-times fa-fw'/></div>}
{this.valueIsValid(this.state.updateValue) ? <div className='icon steel' onClick={(e)=>{ e.stopPropagation(); this.updateValue(this.state.updateValue, i); }}><i className='fa fa-check fa-fw'/></div> : null}
</div> </div>
</React.Fragment> </React.Fragment>
: <div className='badge' key={i} onClick={()=>this.editValue(i)}>{context.value} : <div className='badge' key={i} onClick={()=>this.editValue(i)}>{context.value}
{!!this.props.cannotEdit && this.props.cannotEdit.includes(context.value) ? null : <div className='icon steel'><i className='fa fa-times fa-fw' onClick={(e)=>{ e.stopPropagation(); this.removeValue(i); }}/></div>} {!!this.props.cannotEdit && this.props.cannotEdit.includes(context.value) ? null : <div className='icon steel' onClick={(e)=>{ e.stopPropagation(); this.removeValue(i); }}><i className='fa fa-times fa-fw'/></div>}
</div> </div>
); );
@@ -123,7 +128,7 @@ const StringArrayEditor = createClass({
value={this.state.temporaryValue} value={this.state.temporaryValue}
onKeyDown={(e)=>this.handleValueInputKeyDown(e)} onKeyDown={(e)=>this.handleValueInputKeyDown(e)}
onChange={(e)=>this.setState({ temporaryValue: e.target.value })}/> onChange={(e)=>this.setState({ temporaryValue: e.target.value })}/>
{this.valueIsValid(this.state.temporaryValue) ? <div className='icon steel'><i className='fa fa-check fa-fw' onClick={(e)=>{ e.stopPropagation(); this.addValue(this.state.temporaryValue); }}/></div> : null} {this.valueIsValid(this.state.temporaryValue) ? <div className='icon steel' onClick={(e)=>{ e.stopPropagation(); this.addValue(this.state.temporaryValue); }}><i className='fa fa-check fa-fw'/></div> : null}
</div> </div>
</div> </div>
</div>; </div>;