f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2025-12-24 20:42:43 +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 {
#backgroundColors;
display: inline-block;
border-radius: 0 0.5em 0.5em 0;
height: ~"calc(100% + 0.6em)";
position: relative;
top: -0.3em;
@@ -136,6 +135,14 @@
top: 50%;
transform: translateY(-50%);
}
&:not(:last-child) {
border-right: 1px solid black;
}
&:last-child {
border-radius: 0 0.5em 0.5em 0;
}
}
.badge {
@@ -177,6 +184,10 @@
font-size: .8em;
right: 1px;
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') {
const valueContext = this.state.valueContext;
valueContext[index].editing = false;
this.setState({ valueContext, updateValue: '' });
this.closeEditInput(index);
}
},
closeEditInput : function(index) {
const valueContext = this.state.valueContext;
valueContext[index].editing = false;
this.setState({ valueContext, updateValue: '' });
},
render : function() {
const valueElements = Object.values(this.state.valueContext).map((context, i)=>context.editing
? <React.Fragment key={i}>
@@ -106,11 +110,12 @@ const StringArrayEditor = createClass({
value={this.state.updateValue}
onKeyDown={(e)=>this.handleValueInputKeyDown(e, i)}
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>
</React.Fragment>
: <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>
);
@@ -123,7 +128,7 @@ const StringArrayEditor = createClass({
value={this.state.temporaryValue}
onKeyDown={(e)=>this.handleValueInputKeyDown(e)}
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>;