Add dropdown selector (not clickable yet)

client/homebrew/editor/metadataEditor/metadataEditor.jsx

@@ -4,6 +4,9 @@ const createClass = require('create-react-class');
 const _     = require('lodash');
 const cx    = require('classnames');
 const request = require('superagent');
+const Nav = require('naturalcrit/nav/nav.jsx');
+
+const Themes = require('themes/themes.json');
 
 const SYSTEMS = ['5e', '4e', '3.5e', 'Pathfinder'];
 
@@ -115,6 +118,27 @@ const MetadataEditor = createClass({
 		</div>;
 	},
 
+	renderThemeDropdown : function(){
+		const listThemes = (renderer)=>{
+			return _.map(Themes[renderer], (theme)=>{
+				return <div href={''} className='item' key={''} target='_blank' rel='noopener noreferrer' title={''}>
+					{`${theme.renderer} : ${theme.name}`}
+				</div>;
+			});
+		};
+
+		return <div className='field themes'>
+			<label>theme</label>
+			<Nav.dropdown trigger='click'>
+				<div>
+					share <i class='fas fa-caret-down'></i>
+				</div>
+				{listThemes('Legacy')}
+				{listThemes('V3')}
+			</Nav.dropdown>
+		</div>;
+	},
+
 	renderRenderOptions : function(){
 		if(!global.enable_v3) return;
 
@@ -178,6 +202,8 @@ const MetadataEditor = createClass({
 				</div>
 			</div>
 
+			{this.renderThemeDropdown()}
+
 			{this.renderRenderOptions()}
 
 			<div className='field publish'>

client/homebrew/editor/metadataEditor/metadataEditor.less

@@ -14,7 +14,7 @@
 			display        : inline-block;
 			vertical-align : top;
 			width          : 80px;
-			font-size      : 0.7em;
+			font-size      : 11px;
 			font-weight    : 800;
 			line-height    : 1.8em;
 			text-transform : uppercase;
@@ -81,4 +81,35 @@
 		font-size: 0.8em;
 		line-height    : 1.5em;
 	}
+
+	.themes.field{
+		font-size: 13.33px;
+		.navDropdownContainer {
+			background-color: white;
+
+			width: 100%;
+			&:hover {
+				background-color: rgb(187, 187, 187);
+			}
+			&>div:first-child {
+				border : 2px solid rgb(118,118,118);
+				padding : 6px 2px;
+				background-color : inherit;
+				i {
+					float: right;
+				}
+			}
+			.navDropdown {
+				box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
+				* {
+					padding: 3px 2px;
+					border-top: 1px solid rgb(118, 118, 118);
+					&:hover {
+						background-color: @blue;
+						color: white;
+					}
+				}
+			}
+		}
+	}
 }

client/homebrew/editor/snippetbar/snippetbar.jsx

@@ -39,7 +39,7 @@ const Snippetbar = createClass({
 	},
 
 	componentDidMount : async function() {
-		const rendererPath = this.props.renderer == 'V3' ? 'V3' : "Legacy";
+		const rendererPath = this.props.renderer == 'V3' ? 'V3' : 'Legacy';
 		const themePath    = this.props.theme ?? '5ePHB';
 		console.log(Themes);
 		console.log(Themes[`${rendererPath}_${themePath}`]);
@@ -51,7 +51,7 @@ const Snippetbar = createClass({
 
 	componentDidUpdate : async function(prevProps) {
 		if(prevProps.renderer != this.props.renderer) {
-			const rendererPath = this.props.renderer == 'V3' ? 'V3' : "Legacy";
+			const rendererPath = this.props.renderer == 'V3' ? 'V3' : 'Legacy';
 			const themePath    = this.props.theme ?? '5ePHB';
 			const snippets = Themes[`${rendererPath}_${themePath}`];
 			this.setState({