Themes dropdown previews

client/homebrew/editor/metadataEditor/metadataEditor.jsx

@@ -184,6 +184,10 @@ const MetadataEditor = createClass({
 				return <div className='item' key={''} onClick={()=>this.handleTheme(theme)} title={''}>
 					{`${theme.renderer} : ${theme.name}`}
 					<img src={`/themes/${theme.renderer}/${theme.path}/dropdownTexture.png`}/>
+					<div className='preview'>
+						<h6>{`${theme.name}`} preview</h6>
+						<img src={`/themes/${theme.renderer}/${theme.path}/dropdownPreview.jpg`}/>
+					</div>
 				</div>;
 			});
 		};

client/homebrew/editor/metadataEditor/metadataEditor.less

@@ -188,18 +188,45 @@
 					padding				: 3px 3px;
 					border-top			: 1px solid rgb(118, 118, 118);
 					position			: relative;
-					overflow			: hidden;
+					overflow			: visible;
 					background-color	: white;
+					.preview {
+						display: flex;
+    					flex-direction: column;
+  						background: #ccc;
+  						border-radius: 5px;
+    					box-shadow: 0 0 5px  black;
+  						width: 200px;
+						color:black;
+  						position: absolute;
+  						top: 0;
+  						right: 0;
+  						opacity: 0;
+  						transition: opacity 250ms ease;
+						z-index: 1;
+						overflow:hidden;
+						h6 {
+							font-weight: 900;
+							padding-inline:1em;
+							padding-block:.5em;
+							border-bottom:2px solid hsl(0,0%,40%);
+						}
+					}
 					&:hover {
 						background-color	: @blue;
 						color				: white;
 					}
-					img {
+					&:hover > .preview {
+						opacity: 1;
+					}
+					>img {
 						mask-image			: linear-gradient(90deg, transparent, black 20%);
 						-webkit-mask-image	: linear-gradient(90deg, transparent, black 20%);
-				    position	: absolute;
-				    left		: ~"max(100px, 100% - 300px)";
-				    top			: 0px;
+				    	position			: absolute;
+				    	right				: 0;
+				    	top					: 0px;
+						width				: 50%;
+						height				: 100%;
 					}
 				}
 			}

scripts/buildHomebrew.js

@@ -72,6 +72,7 @@ fs.emptyDirSync('./build');
 		themeData.path = dir;
 		themes.V3[dir] = (themeData);
 		fs.copy(`./themes/V3/${dir}/dropdownTexture.png`, `./build/themes/V3/${dir}/dropdownTexture.png`);
+		fs.copy(`./themes/V3/${dir}/dropdownPreview.jpg`, `./build/themes/V3/${dir}/dropdownPreview.jpg`);
 		const src = `./themes/V3/${dir}/style.less`;
 	  ((outputDirectory)=>{
 			less.render(fs.readFileSync(src).toString(), {