f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-06 01:22:44 +00:00
Code Wiki Activity

Add thumbnail preview to Metadata Editor

Browse Source
This commit is contained in:
G.Ambatte
2021-10-29 11:54:56 +13:00
parent 6160d3ddd1
commit 7499a0d9ab
2 changed files with 57 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
client/homebrew/editor/metadataEditor/metadataEditor.jsx
View File

@@ -11,20 +11,27 @@ const MetadataEditor = createClass({
getDefaultProps : function() { getDefaultProps : function() {
return { return {
metadata : { metadata : {
editId : null, editId : null,
title : '', title : '',
description : '', description : '',
tags : '', tags : '',
published : false, published : false,
authors : [], authors : [],
systems : [], systems : [],
renderer : 'legacy', renderer : 'legacy',
thumbnail : '' thumbnail : '',
showThumbnail : false
}, },
onChange : ()=>{} onChange : ()=>{}
}; };
}, },
getInitialState : function(){
return {
showThumbnail : false
};
},
handleFieldChange : function(name, e){ handleFieldChange : function(name, e){
this.props.onChange(_.merge({}, this.props.metadata, { this.props.onChange(_.merge({}, this.props.metadata, {
[name] : e.target.value [name] : e.target.value
@@ -66,6 +73,17 @@ const MetadataEditor = createClass({
}); });
}, },
toggleThumbnailDisplay : function(){
this.setState({
showThumbnail : !this.state.showThumbnail
});
},
renderThumbnail : function(){
if(!this.state.showThumbnail) return;
return <img className='thumbnail-preview' src={this.props.metadata.thumbnail || 'https://i.imgur.com/FwRuhv7.png'}></img>;
},
renderSystems : function(){ renderSystems : function(){
return _.map(SYSTEMS, (val)=>{ return _.map(SYSTEMS, (val)=>{
return <label key={val}> return <label key={val}>
@@ -166,7 +184,12 @@ const MetadataEditor = createClass({
<label>thumbnail URL</label> <label>thumbnail URL</label>
<textarea value={this.props.metadata.thumbnail} className='value' <textarea value={this.props.metadata.thumbnail} className='value'
onChange={(e)=>this.handleFieldChange('thumbnail', e)} /> onChange={(e)=>this.handleFieldChange('thumbnail', e)} />
<button className='display' onClick={this.toggleThumbnailDisplay}>
<i className={`fas fa-caret-${this.state.showThumbnail ? 'right' : 'left'}`} />
</button>
{this.renderThumbnail()}
</div> </div>
{/*} {/*}
<div className='field tags'> <div className='field tags'>
<label>tags</label> <label>tags</label>

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

@@ -24,6 +24,29 @@
flex : 1 1 auto; flex : 1 1 auto;
min-width : 200px; min-width : 200px;
} }
&.thumbnail{
height : 1.8em;
.label{
line-height: 1.1em;
}
button{
border: 1px solid #999;
font-size: 20px;
color: white;
padding: 0px 5px;
background-color: black;
&:hover{
background-color: #777;
}
}
.thumbnail-preview{
position : relative;
width : 80px;
height : min-content;
border : 2px solid white;
margin-left : 5px;
}
}
} }
.description.field textarea.value{ .description.field textarea.value{
resize : none; resize : none;
@@ -78,7 +101,7 @@
} }
} }
.authors.field .value{ .authors.field .value{
font-size: 0.8em; font-size : 0.8em;
line-height : 1.5em; line-height : 1.5em;
} }
} }