From 87bb682836e2cb5c198aeff77b505c37dc4fbb42 Mon Sep 17 00:00:00 2001 From: Trevor Buckner Date: Sun, 9 Jan 2022 22:35:53 -0500 Subject: [PATCH] Add dropdown selector (not clickable yet) --- .../editor/metadataEditor/metadataEditor.jsx | 26 ++++++ .../editor/metadataEditor/metadataEditor.less | 33 +++++++- .../homebrew/editor/snippetbar/snippetbar.jsx | 4 +- scripts/buildHomebrew.js | 83 ++++++++++++------- server.js | 2 +- shared/naturalcrit/nav/nav.jsx | 9 +- themes/Legacy/5ePHB/settings.json | 1 + themes/V3/5ePHB/settings.json | 1 + themes/themes.json | 16 ++++ 9 files changed, 142 insertions(+), 33 deletions(-) create mode 100644 themes/themes.json diff --git a/client/homebrew/editor/metadataEditor/metadataEditor.jsx b/client/homebrew/editor/metadataEditor/metadataEditor.jsx index c7dea871b..35441c96b 100644 --- a/client/homebrew/editor/metadataEditor/metadataEditor.jsx +++ b/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({ ; }, + renderThemeDropdown : function(){ + const listThemes = (renderer)=>{ + return _.map(Themes[renderer], (theme)=>{ + return
+ {`${theme.renderer} : ${theme.name}`} +
; + }); + }; + + return
+ + +
+ share +
+ {listThemes('Legacy')} + {listThemes('V3')} + +
; + }, + renderRenderOptions : function(){ if(!global.enable_v3) return; @@ -178,6 +202,8 @@ const MetadataEditor = createClass({ + {this.renderThemeDropdown()} + {this.renderRenderOptions()}
diff --git a/client/homebrew/editor/metadataEditor/metadataEditor.less b/client/homebrew/editor/metadataEditor/metadataEditor.less index 4a43158d0..a47f6b465 100644 --- a/client/homebrew/editor/metadataEditor/metadataEditor.less +++ b/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; + } + } + } + } + } } diff --git a/client/homebrew/editor/snippetbar/snippetbar.jsx b/client/homebrew/editor/snippetbar/snippetbar.jsx index 67547c01e..162cf3b84 100644 --- a/client/homebrew/editor/snippetbar/snippetbar.jsx +++ b/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({ diff --git a/scripts/buildHomebrew.js b/scripts/buildHomebrew.js index bc47b9f97..7ae28ddf5 100644 --- a/scripts/buildHomebrew.js +++ b/scripts/buildHomebrew.js @@ -10,7 +10,7 @@ const assetTransform = require('vitreum/transforms/asset.js'); const babel = require('@babel/core'); const less = require('less'); -const babelify = async (code)=>(await babel.transformAsync(code, { presets: [["@babel/preset-env", { "exclude": ["proposal-dynamic-import"] }], '@babel/preset-react'], plugins: ['@babel/plugin-transform-runtime'] })).code; +const babelify = async (code)=>(await babel.transformAsync(code, { presets: [['@babel/preset-env', { 'exclude': ['proposal-dynamic-import'] }], '@babel/preset-react'], plugins: ['@babel/plugin-transform-runtime'] })).code; const transforms = { '.js' : (code, filename, opts)=>babelify(code), @@ -24,27 +24,6 @@ const build = async ({ bundle, render, ssr })=>{ await fs.outputFile('./build/homebrew/bundle.css', css); await fs.outputFile('./build/homebrew/bundle.js', bundle); await fs.outputFile('./build/homebrew/ssr.js', ssr); - await fs.copy('./themes/fonts', './build/fonts'); - let src = './themes/Legacy/5ePHB/style.less'; - //Parse brew theme files - less.render(fs.readFileSync(src).toString(), { - compress : !isDev - }, function(e, output) { - fs.outputFile('./build/themes/Legacy/5ePHB/style.css', output.css); - }); - src = './themes/V3/5ePHB/style.less'; - less.render(fs.readFileSync(src).toString(), { - compress : !isDev - }, function(e, output) { - fs.outputFile('./build/themes/V3/5ePHB/style.css', output.css); - }); - // await less.render(lessCode, { - // compress : !dev, - // sourceMap : (dev ? { - // sourceMapFileInline: true, - // outputSourceFiles: true - // } : false), - // }) //compress files in production if(!isDev){ @@ -61,16 +40,64 @@ const build = async ({ bundle, render, ssr })=>{ fs.emptyDirSync('./build'); -(async () => { - let bundles = await pack('./client/homebrew/homebrew.jsx', { - paths : ['./shared','./'], - libs : Proj.libs, - dev : isDev && build, +(async ()=>{ + + //v==----------------------------- COMPILE THEMES --------------------------------==v// + + // Update list of all Theme files + const themes = { Legacy: [], V3: [] }; + + let themeFiles = fs.readdirSync('./themes/Legacy'); + for (dir of themeFiles) { + const themeData = JSON.parse(fs.readFileSync(`./themes/Legacy/${dir}/settings.json`).toString()); + themes.Legacy.push(themeData); + } + + themeFiles = fs.readdirSync('./themes/V3'); + for (dir of themeFiles) { + const themeData = JSON.parse(fs.readFileSync(`./themes/V3/${dir}/settings.json`).toString()); + themes.V3.push(themeData); + } + + await fs.outputFile('./themes/themes.json', JSON.stringify(themes, null, 2)); + + // Compile Less files TODO: MOVE INTO ABOVE SECTION TO PROGRAMATICALLY GRAB ALL LESS FILES + let src = './themes/Legacy/5ePHB/style.less'; + + less.render(fs.readFileSync(src).toString(), { + compress : !isDev + }, function(e, output) { + fs.outputFile('./build/themes/Legacy/5ePHB/style.css', output.css); + }); + src = './themes/V3/5ePHB/style.less'; + less.render(fs.readFileSync(src).toString(), { + compress : !isDev + }, function(e, output) { + fs.outputFile('./build/themes/V3/5ePHB/style.css', output.css); + }); + + // await less.render(lessCode, { + // compress : !dev, + // sourceMap : (dev ? { + // sourceMapFileInline: true, + // outputSourceFiles: true + // } : false), + // }) + + // Move assets + await fs.copy('./themes/fonts', './build/fonts'); + + //v==----------------------------- BUNDLE PACKAGES --------------------------------==v// + + const bundles = await pack('./client/homebrew/homebrew.jsx', { + paths : ['./shared', './'], + libs : Proj.libs, + dev : isDev && build, transforms }); build(bundles); - // Possible method for generating separate bundles for snippets: factor-bundle first sending all common files to bundle.js, then again using default settings, keeping only snippet bundles + // Possible method for generating separate bundles for theme snippets: factor-bundle first sending all common files to bundle.js, then again using default settings, keeping only snippet bundles // await fs.outputFile('./build/junk.js', ''); // await fs.outputFile('./build/themes/Legacy/5ePHB/snippets.js', ''); // diff --git a/server.js b/server.js index 26d94fdd7..83dcd014d 100644 --- a/server.js +++ b/server.js @@ -60,7 +60,7 @@ const splitTextStyleAndMetadata = (brew)=>{ brew.style = brew.text.slice(7, index - 1); brew.text = brew.text.slice(index + 5); } - _.defaults(brew, {'renderer' : 'legacy', 'theme' : '5ePHB'}); + _.defaults(brew, { 'renderer': 'legacy', 'theme': '5ePHB' }); }; app.use('/', serveCompressedStaticAssets(`${__dirname}/build`)); diff --git a/shared/naturalcrit/nav/nav.jsx b/shared/naturalcrit/nav/nav.jsx index 11e67e32c..739d72785 100644 --- a/shared/naturalcrit/nav/nav.jsx +++ b/shared/naturalcrit/nav/nav.jsx @@ -69,6 +69,12 @@ const Nav = { }), dropdown : createClass({ + getDefaultProps : function() { + return { + trigger : 'hover' + }; + }, + getInitialState : function() { return { showDropdown : false @@ -99,7 +105,8 @@ const Nav = { }); return (
this.handleDropdown(true)} + onMouseEnter={this.props.trigger == 'hover' ? ()=>{this.handleDropdown(true);} : undefined} + onClick= {this.props.trigger == 'click' ? ()=>{this.handleDropdown(true);} : undefined} onMouseLeave={()=>this.handleDropdown(false)}> {this.props.children[0]} {this.renderDropdown(dropdownChildren)} diff --git a/themes/Legacy/5ePHB/settings.json b/themes/Legacy/5ePHB/settings.json index 0950fb45a..98514e2a8 100644 --- a/themes/Legacy/5ePHB/settings.json +++ b/themes/Legacy/5ePHB/settings.json @@ -1,4 +1,5 @@ { + "name" : "5e PHB", "renderer" : "legacy", "baseTheme" : false } diff --git a/themes/V3/5ePHB/settings.json b/themes/V3/5ePHB/settings.json index cad767481..77781596c 100644 --- a/themes/V3/5ePHB/settings.json +++ b/themes/V3/5ePHB/settings.json @@ -1,4 +1,5 @@ { + "name" : "5e PHB", "renderer" : "V3", "baseTheme" : false } diff --git a/themes/themes.json b/themes/themes.json new file mode 100644 index 000000000..d8682bac3 --- /dev/null +++ b/themes/themes.json @@ -0,0 +1,16 @@ +{ + "Legacy": [ + { + "name": "5e PHB", + "renderer": "legacy", + "baseTheme": false + } + ], + "V3": [ + { + "name": "5e PHB", + "renderer": "V3", + "baseTheme": false + } + ] +} \ No newline at end of file