Merge branch 'master' into pr/3203

client/homebrew/brewRenderer/brewRenderer.jsx

@@ -45,12 +45,13 @@ let rawPages      = [];
 
 const BrewRenderer = (props)=>{
 	props = {
-		text     : '',
-		style    : '',
-		renderer : 'legacy',
-		theme    : '5ePHB',
-		lang     : '',
-		errors   : [],
+		text              : '',
+		style             : '',
+		renderer          : 'legacy',
+		theme             : '5ePHB',
+		lang              : '',
+		errors            : [],
+		currentEditorPage : 0,
 		...props
 	};
 
@@ -94,6 +95,9 @@ const BrewRenderer = (props)=>{
 		if(Math.abs(index - state.viewablePageNumber) <= 3)
 			return true;
 
+		if(index + 1 == props.currentEditorPage)
+			return true;
+
 		return false;
 	};
 
@@ -143,6 +147,9 @@ const BrewRenderer = (props)=>{
 		if(props.errors && props.errors.length)
 			return renderedPages;
 
+		if(rawPages.length != renderedPages.length) // Re-render all pages when page count changes
+			renderedPages.length = 0;
+
 		_.forEach(rawPages, (page, index)=>{
 			if((shouldRender(index) || !renderedPages[index]) && typeof window !== 'undefined'){
 				renderedPages[index] = renderPage(page, index); // Render any page not yet rendered, but only re-render those in PPR range

client/homebrew/brewRenderer/brewRenderer.less

@@ -3,9 +3,9 @@
 .brewRenderer {
 	will-change : transform;
 	overflow-y  : scroll;
-	.pages {
+	:where(.pages) {
 		margin : 30px 0px;
-		& > .page {
+		& > :where(.page) {
 			width         : 215.9mm;
 			height        : 279.4mm;
 			margin-right  : auto;

client/homebrew/editor/snippetbar/snippetbar.jsx

@@ -74,6 +74,7 @@ const Snippetbar = createClass({
 		}
 	},
 
+
 	mergeCustomizer : function(valueA, valueB, key) {
 		if(key == 'snippets') {
 			const result = _.reverse(_.unionBy(_.reverse(valueB), _.reverse(valueA), 'name')); // Join snippets together, with preference for the current theme over the base theme
@@ -102,10 +103,12 @@ const Snippetbar = createClass({
 		this.props.onInject(injectedText);
 	},
 
-	toggleThemeSelector : function(){
-		this.setState({
-			themeSelector : !this.state.themeSelector
-		});
+	toggleThemeSelector : function(e){
+		if(e.target.tagName != 'SELECT'){
+			this.setState({
+				themeSelector : !this.state.themeSelector
+			});
+		}
 	},
 
 	changeTheme : function(e){
@@ -119,7 +122,7 @@ const Snippetbar = createClass({
 
 	renderThemeSelector : function(){
 		return <div className='themeSelector'>
-			<select value={this.props.currentEditorTheme} onChange={this.changeTheme} onMouseDown={(this.changeTheme)}>
+			<select value={this.props.currentEditorTheme} onChange={this.changeTheme} >
 				{EditorThemes.map((theme, key)=>{
 					return <option key={key} value={theme}>{theme}</option>;
 				})}
@@ -176,8 +179,9 @@ const Snippetbar = createClass({
 			<div className={`editorTool editorTheme ${this.state.themeSelector ? 'active' : ''}`}
 				onClick={this.toggleThemeSelector} >
 				<i className='fas fa-palette' />
+				{this.state.themeSelector && this.renderThemeSelector()}
 			</div>
-			{this.state.themeSelector && this.renderThemeSelector()}
+			
 			<div className='divider'></div>
 			<div className={cx('text', { selected: this.props.view === 'text' })}
 				 onClick={()=>this.props.onViewChange('text')}>

client/homebrew/editor/snippetbar/snippetbar.less

@@ -1,26 +1,28 @@
 @import (less) './client/icons/customIcons.less';
 @import (less) '././././themes/fonts/5e/fonts.less';
 
-.snippetBar {
-	@menuHeight : 25px;
-	position: relative;
-	height: @menuHeight;
-	background-color: #ddd;
-	.editors {
-		position: absolute;
-		display: flex;
-		top: 0px;
-		right: 0px;
-		height: @menuHeight;
-		justify-content: space-between;
-		&>div {
-			height: @menuHeight;
-			width: @menuHeight;
-			cursor: pointer;
-			line-height: @menuHeight;
-			text-align: center;
-			&:hover, &.selected {
-				background-color: #999;
+.snippetBar{
+	@menuHeight      : 25px;
+	position         : relative;
+	height           : @menuHeight;
+	background-color : #ddd;
+	color			 : black;
+
+	.editors{
+		position        : absolute;
+		display         : flex;
+		top             : 0px;
+		right           : 0px;
+		height          : @menuHeight;
+		justify-content : space-between;
+		&>div{
+			height      : @menuHeight;
+			width       : @menuHeight;
+			cursor      : pointer;
+			line-height : @menuHeight;
+			text-align  : center;
+			&:hover,&.selected{
+				background-color : #999;
 			}
 			&.text {
 				.tooltipLeft('Brew Editor');
@@ -33,47 +35,41 @@
 			}
 			&.undo {
 				.tooltipLeft('Undo');
-				font-size: 0.75em;
-				color: grey;
-				&.active {
-					color: black;
+				font-size : 0.75em;
+				color     : grey;
+				&.active{
+					color : inherit;
 				}
 			}
 			&.redo {
 				.tooltipLeft('Redo');
-				font-size: 0.75em;
-				color: grey;
-				&.active {
-					color: black;
+				font-size : 0.75em;
+				color     : grey;
+				&.active{
+					color : inherit;
 				}
 			}
 			&.foldAll {
 				.tooltipLeft('Fold All');
-				font-size: 0.75em;
-				color: grey;
-				&.active {
-					color: black;
-				}
+				font-size : 0.75em;
+				color     : inherit;
 			}
 			&.unfoldAll {
 				.tooltipLeft('Unfold All');
-				font-size: 0.75em;
-				color: grey;
-				&.active {
-					color: black;
-				}
+				font-size : 0.75em;
+				color     : inherit;
 			}
 			&.editorTheme {
 				.tooltipLeft('Editor Themes');
-				font-size: 0.75em;
-				color: black;
+				font-size : 0.75em;
+				color     : black;
 				&.active {
-					color: white;
-					background-color: black;
+					position         : relative;
+					background-color : #999;
 				}
 			}
 			&.divider {
-				background: linear-gradient(#000, #000) no-repeat center/1px 100%;
+				background: linear-gradient(currentColor, currentColor) no-repeat center/1px 100%;
 				width: 5px;
 				&:hover {
 					background-color: inherit;
@@ -81,13 +77,16 @@
 			}
 		}
 		.themeSelector {
-			position: absolute;
-			left: -65px;
-			top: 30px;
-			z-index: 999;
-			width: 170px;
-			background-color: black;
-			border-radius: 5px;
+			position : absolute;
+			top : 25px;
+			right : 0;
+			z-index : 1;
+			display : flex;
+			align-items : center;
+			justify-content : center;
+			width : 170px;
+			height : inherit;
+			background-color : inherit;
 		}
 	}
 	.snippetBarButton {
@@ -115,11 +114,11 @@
 		border-left: 1px solid black;
 		.tooltipLeft("Edit Brew Properties");
 	}
-	.snippetGroup {
-		border-right: 1px solid black;
-		&:hover {
-			&>.dropdown {
-				visibility: visible;
+	.snippetGroup{
+		border-right   : 1px solid currentColor;
+		&:hover{
+			&>.dropdown{
+				visibility : visible;
 			}
 		}
 		.dropdown {

client/homebrew/pages/basePages/listPage/listPage.jsx

@@ -220,6 +220,7 @@ const ListPage = createClass({
 	render : function(){
 		return <div className='listPage sitePage'>
 			{/*<style>@layer V3_5ePHB, bundle;</style>*/}
+			<link href='/themes/V3/Blank/style.css' rel='stylesheet'/>
 			<link href='/themes/V3/5ePHB/style.css' rel='stylesheet'/>
 			{this.props.navItems}
 			{this.renderSortOptions()}

client/homebrew/pages/basePages/listPage/listPage.less

@@ -2,17 +2,18 @@
 .noColumns(){
 	column-count         : auto;
 	column-fill          : auto;
-	column-gap           : auto;
+	column-gap           : normal;
 	column-width         : auto;
 	-webkit-column-count : auto;
 	-moz-column-count    : auto;
 	-webkit-column-width : auto;
 	-moz-column-width    : auto;
-	-webkit-column-gap   : auto;
-	-moz-column-gap      : auto;
+	-webkit-column-gap   : normal;
+	-moz-column-gap      : normal;
 	height               : auto;
 	min-height           : 279.4mm;
 	margin               : 20px auto;
+	contain				 : unset;
 }
 .listPage{
 	.content{

client/homebrew/pages/editPage/editPage.jsx

@@ -50,7 +50,8 @@ const EditPage = createClass({
 			url                    : '',
 			autoSave               : true,
 			autoSaveWarning        : false,
-			unsavedTime            : new Date()
+			unsavedTime            : new Date(),
+			currentEditorPage      : 0
 		};
 	},
 	savedBrew : null,
@@ -109,9 +110,10 @@ const EditPage = createClass({
 		if(htmlErrors.length) htmlErrors = Markdown.validate(text);
 
 		this.setState((prevState)=>({
-			brew       : { ...prevState.brew, text: text },
-			isPending  : true,
-			htmlErrors : htmlErrors
+			brew              : { ...prevState.brew, text: text },
+			isPending         : true,
+			htmlErrors        : htmlErrors,
+			currentEditorPage : this.refs.editor.getCurrentPage()
 		}), ()=>{if(this.state.autoSave) this.trySave();});
 	},
 
@@ -405,6 +407,7 @@ const EditPage = createClass({
 						theme={this.state.brew.theme}
 						errors={this.state.htmlErrors}
 						lang={this.state.brew.lang}
+						currentEditorPage={this.state.currentEditorPage}
 					/>
 				</SplitPane>
 			</div>