Add thumbnail preview to Metadata Editor

client/homebrew/editor/metadataEditor/metadataEditor.jsx

@@ -11,20 +11,27 @@ const MetadataEditor = createClass({
 	getDefaultProps : function() {
 		return {
 			metadata : {
-				editId      : null,
-				title       : '',
-				description : '',
-				tags        : '',
-				published   : false,
-				authors     : [],
-				systems     : [],
-				renderer    : 'legacy',
-				thumbnail   : ''
+				editId        : null,
+				title         : '',
+				description   : '',
+				tags          : '',
+				published     : false,
+				authors       : [],
+				systems       : [],
+				renderer      : 'legacy',
+				thumbnail     : '',
+				showThumbnail : false
 			},
 			onChange : ()=>{}
 		};
 	},
 
+	getInitialState : function(){
+		return {
+			showThumbnail : false
+		};
+	},
+
 	handleFieldChange : function(name, e){
 		this.props.onChange(_.merge({}, this.props.metadata, {
 			[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(){
 		return _.map(SYSTEMS, (val)=>{
 			return <label key={val}>
@@ -166,7 +184,12 @@ const MetadataEditor = createClass({
 				<label>thumbnail URL</label>
 				<textarea value={this.props.metadata.thumbnail} className='value'
 					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 className='field tags'>
 				<label>tags</label>

client/homebrew/editor/metadataEditor/metadataEditor.less

@@ -24,6 +24,29 @@
 			flex           : 1 1 auto;
 			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{
 		resize      : none;
@@ -78,7 +101,7 @@
 		}
 	}
 	.authors.field .value{
-		font-size: 0.8em;
-		line-height    : 1.5em;
+		font-size   : 0.8em;
+		line-height : 1.5em;
 	}
 }