Revert "renamed client to src"

This reverts commit c28736bd01.

client/homebrew/editor/snippetbar/snippetbar.jsx

@@ -0,0 +1,337 @@
+/*eslint max-lines: ["warn", {"max": 350, "skipBlankLines": true, "skipComments": true}]*/
+import './snippetbar.less';
+import React from 'react';
+import createReactClass from 'create-react-class';
+
+import _ from 'lodash';
+import cx from 'classnames';
+
+import { loadHistory } from '../../utils/versionHistory.js';
+import { brewSnippetsToJSON } from '../../../../shared/helpers.js';
+
+import Legacy5ePHB from '../../../../themes/Legacy/5ePHB/snippets.js';
+import V3_5ePHB   from '../../../../themes/V3/5ePHB/snippets.js';
+import V3_5eDMG   from '../../../../themes/V3/5eDMG/snippets.js';
+import V3_Journal from '../../../../themes/V3/Journal/snippets.js';
+import V3_Blank  from '../../../../themes/V3/Blank/snippets.js';
+
+const ThemeSnippets = {
+	Legacy_5ePHB : Legacy5ePHB,
+	V3_5ePHB     : V3_5ePHB,
+	V3_5eDMG     : V3_5eDMG,
+	V3_Journal   : V3_Journal,
+	V3_Blank     : V3_Blank,
+};
+
+import EditorThemes from '../../../../build/homebrew/codeMirror/editorThemes.json';
+
+const execute = function(val, props){
+	if(_.isFunction(val)) return val(props);
+	return val;
+};
+
+const Snippetbar = createReactClass({
+	displayName     : 'SnippetBar',
+	getDefaultProps : function() {
+		return {
+			brew              : {},
+			view              : 'text',
+			onViewChange      : ()=>{},
+			onInject          : ()=>{},
+			onToggle          : ()=>{},
+			showEditButtons   : true,
+			renderer          : 'legacy',
+			undo              : ()=>{},
+			redo              : ()=>{},
+			historySize       : ()=>{},
+			foldCode          : ()=>{},
+			unfoldCode        : ()=>{},
+			updateEditorTheme : ()=>{},
+			cursorPos         : {},
+			themeBundle       : [],
+			updateBrew        : ()=>{}
+		};
+	},
+
+	getInitialState : function() {
+		return {
+			renderer      : this.props.renderer,
+			themeSelector : false,
+			snippets      : [],
+			showHistory   : false,
+			historyExists : false,
+			historyItems  : []
+		};
+	},
+
+	componentDidMount : async function(prevState) {
+		const snippets = this.compileSnippets();
+		this.setState({
+			snippets : snippets
+		});
+	},
+
+	componentDidUpdate : async function(prevProps, prevState) {
+		if(prevProps.renderer != this.props.renderer ||
+			prevProps.theme != this.props.theme ||
+			prevProps.themeBundle != this.props.themeBundle ||
+			prevProps.brew.snippets != this.props.brew.snippets) {
+			this.setState({
+				snippets : this.compileSnippets()
+			});
+		};
+
+		// Update history list if it has changed
+		const checkHistoryItems = await loadHistory(this.props.brew);
+
+		// If all items have the noData property, there is no saved data
+		const checkHistoryExists = !checkHistoryItems.every((historyItem)=>{
+			return historyItem?.noData;
+		});
+		if(prevState.historyExists != checkHistoryExists){
+			this.setState({
+				historyExists : checkHistoryExists
+			});
+		}
+
+		// If any history items have changed, update the list
+		if(checkHistoryExists && checkHistoryItems.some((historyItem, index)=>{
+			return index >= prevState.historyItems.length || !_.isEqual(historyItem, prevState.historyItems[index]);
+		})){
+			this.setState({
+				historyItems : checkHistoryItems
+			});
+		}
+	},
+
+	mergeCustomizer : function(oldValue, newValue, key) {
+		if(key == 'snippets') {
+			const result = _.reverse(_.unionBy(_.reverse(newValue), _.reverse(oldValue), 'name')); // Join snippets together, with preference for the child theme over the parent theme
+			return result.filter((snip)=>snip.gen || snip.subsnippets);
+		};
+	},
+
+	compileSnippets : function() {
+		let compiledSnippets = [];
+
+		let oldSnippets = _.keyBy(compiledSnippets, 'groupName');
+
+		if(this.props.themeBundle.snippets) {
+			for (let snippets of this.props.themeBundle.snippets) {
+				if(typeof(snippets) == 'string')	// load staticThemes as needed; they were sent as just a file name
+					snippets = ThemeSnippets[snippets];
+
+				const newSnippets = _.keyBy(_.cloneDeep(snippets), 'groupName');
+				compiledSnippets = _.values(_.mergeWith(oldSnippets, newSnippets, this.mergeCustomizer));
+
+				oldSnippets = _.keyBy(compiledSnippets, 'groupName');
+			}
+		}
+
+		const userSnippetsasJSON = brewSnippetsToJSON(this.props.brew.title || 'New Document', this.props.brew.snippets, this.props.themeBundle.snippets);
+		compiledSnippets.push(userSnippetsasJSON);
+
+		return compiledSnippets;
+	},
+
+	handleSnippetClick : function(injectedText){
+		this.props.onInject(injectedText);
+	},
+
+	toggleThemeSelector : function(e){
+		if(e.target.tagName != 'SELECT'){
+			this.setState({
+				themeSelector : !this.state.themeSelector
+			});
+		}
+	},
+
+	changeTheme : function(e){
+		if(e.target.value == this.props.currentEditorTheme) return;
+		this.props.updateEditorTheme(e.target.value);
+
+		this.setState({
+			showThemeSelector : false,
+		});
+	},
+
+	renderThemeSelector : function(){
+		return <div className='themeSelector'>
+			<select value={this.props.currentEditorTheme} onChange={this.changeTheme} >
+				{EditorThemes.map((theme, key)=>{
+					return <option key={key} value={theme}>{theme}</option>;
+				})}
+			</select>
+		</div>;
+	},
+
+	renderSnippetGroups : function(){
+		const snippets = this.state.snippets.filter((snippetGroup)=>snippetGroup.view === this.props.view);
+		if(snippets.length === 0) return null;
+
+		return <div className='snippets'>
+			{_.map(snippets, (snippetGroup)=>{
+				return <SnippetGroup
+					brew={this.props.brew}
+					groupName={snippetGroup.groupName}
+					icon={snippetGroup.icon}
+					snippets={snippetGroup.snippets}
+					key={snippetGroup.groupName}
+					onSnippetClick={this.handleSnippetClick}
+					cursorPos={this.props.cursorPos}
+				/>;
+			})
+			}
+		</div>;
+	},
+
+	replaceContent : function(item){
+		return this.props.updateBrew(item);
+	},
+
+	toggleHistoryMenu : function(){
+		this.setState({
+			showHistory : !this.state.showHistory
+		});
+	},
+
+	renderHistoryItems : function() {
+		if(!this.state.historyExists) return;
+
+		return <div className='dropdown'>
+			{_.map(this.state.historyItems, (item, index)=>{
+				if(item.noData || !item.savedAt) return;
+
+				const saveTime = new Date(item.savedAt);
+				const diffMs = new Date() - saveTime;
+				const diffSecs = Math.floor(diffMs / 1000);
+
+				let diffString = `about ${diffSecs} seconds ago`;
+
+				if(diffSecs > 60) diffString = `about ${Math.floor(diffSecs / 60)} minutes ago`;
+				if(diffSecs > (60 * 60)) diffString = `about ${Math.floor(diffSecs / (60 * 60))} hours ago`;
+				if(diffSecs > (24 * 60 * 60)) diffString = `about ${Math.floor(diffSecs / (24 * 60 * 60))} days ago`;
+				if(diffSecs > (7 * 24 * 60 * 60)) diffString = `about ${Math.floor(diffSecs / (7 * 24 * 60 * 60))} weeks ago`;
+
+				return <div className='snippet' key={index} onClick={()=>{this.replaceContent(item);}} >
+					<i className={`fas fa-${index+1}`} />
+					<span className='name' title={saveTime.toISOString()}>v{item.version} : {diffString}</span>
+				</div>;
+			})}
+		</div>;
+	},
+
+	renderEditorButtons : function(){
+		if(!this.props.showEditButtons) return;
+
+		return (
+			<div className='editors'>
+				{this.props.view !== 'meta' && <><div className='historyTools'>
+					<div className={`editorTool snippetGroup history ${this.state.historyExists ? 'active' : ''}`}
+						onClick={this.toggleHistoryMenu} >
+						<i className='fas fa-clock-rotate-left' />
+						{ this.state.showHistory && this.renderHistoryItems() }
+					</div>
+					<div className={`editorTool undo ${this.props.historySize.undo ? 'active' : ''}`}
+						onClick={this.props.undo} >
+						<i className='fas fa-undo' />
+					</div>
+					<div className={`editorTool redo ${this.props.historySize.redo ? 'active' : ''}`}
+						onClick={this.props.redo} >
+						<i className='fas fa-redo' />
+					</div>
+				</div>
+				<div className='codeTools'>
+					<div className={`editorTool foldAll ${this.props.foldCode ? 'active' : ''}`}
+						onClick={this.props.foldCode} >
+						<i className='fas fa-compress-alt' />
+					</div>
+					<div className={`editorTool unfoldAll ${this.props.unfoldCode ? 'active' : ''}`}
+						onClick={this.props.unfoldCode} >
+						<i className='fas fa-expand-alt' />
+					</div>
+					<div className={`editorTheme ${this.state.themeSelector ? 'active' : ''}`}
+						onClick={this.toggleThemeSelector} >
+						<i className='fas fa-palette' />
+						{this.state.themeSelector && this.renderThemeSelector()}
+					</div>
+				</div></>}
+
+				<div className='tabs'>
+					<div className={cx('text', { selected: this.props.view === 'text' })}
+						onClick={()=>this.props.onViewChange('text')}>
+						<i className='fa fa-beer' />
+					</div>
+					<div className={cx('style', { selected: this.props.view === 'style' })}
+						onClick={()=>this.props.onViewChange('style')}>
+						<i className='fa fa-paint-brush' />
+					</div>
+					<div className={cx('snippet', { selected: this.props.view === 'snippet' })}
+						onClick={()=>this.props.onViewChange('snippet')}>
+						<i className='fas fa-th-list' />
+					</div>
+					<div className={cx('meta', { selected: this.props.view === 'meta' })}
+						onClick={()=>this.props.onViewChange('meta')}>
+						<i className='fas fa-info-circle' />
+					</div>
+				</div>
+
+			</div>
+		);
+	},
+
+	render : function(){
+		return <div className='snippetBar'>
+			{this.renderSnippetGroups()}
+			{this.renderEditorButtons()}
+		</div>;
+	}
+});
+
+export default Snippetbar;
+
+const SnippetGroup = createReactClass({
+	displayName     : 'SnippetGroup',
+	getDefaultProps : function() {
+		return {
+			brew           : {},
+			groupName      : '',
+			icon           : 'fas fa-rocket',
+			snippets       : [],
+			onSnippetClick : function(){},
+		};
+	},
+	handleSnippetClick : function(e, snippet){
+		e.stopPropagation();
+		this.props.onSnippetClick(execute(snippet.gen, this.props));
+	},
+	renderSnippets : function(snippets){
+		return _.map(snippets, (snippet)=>{
+			return <div className='snippet' key={snippet.name} onClick={(e)=>this.handleSnippetClick(e, snippet)}>
+				<i className={snippet.icon} />
+				<span className={`name${snippet.disabled ? ' disabled' : ''}`} title={snippet.name}>{snippet.name}</span>
+				{snippet.experimental && <span className='beta'>beta</span>}
+				{snippet.disabled     && <span className='beta' title='temporarily disabled due to large slowdown; under re-design'>disabled</span>}
+				{snippet.subsnippets && <>
+					<i className='fas fa-caret-right'></i>
+					<div className='dropdown side'>
+						{this.renderSnippets(snippet.subsnippets)}
+					</div></>}
+			</div>;
+
+		});
+	},
+
+	render : function(){
+		const snippetGroup = `snippetGroup snippetBarButton ${this.props.snippets.length === 0 ? 'disabledSnippets' : ''}`;
+		return <div className={snippetGroup}>
+			<div className='text'>
+				<i className={this.props.icon} />
+				<span className='groupName'>{this.props.groupName}</span>
+			</div>
+			<div className='dropdown'>
+				{this.renderSnippets(this.props.snippets)}
+			</div>
+		</div>;
+	},
+});

client/homebrew/editor/snippetbar/snippetbar.less

@@ -0,0 +1,255 @@
+@import './shared/naturalcrit/styles/core.less';
+@import (less) './client/icons/customIcons.less';
+@import (less) '././././themes/fonts/5e/fonts.less';
+
+.snippetBar {
+	@menuHeight      : 25px;
+	position         : relative;
+	display          : flex;
+	flex-wrap        : wrap-reverse;
+	justify-content  : space-between;
+	height           : auto;
+	color            : black;
+	background-color : #DDDDDD;
+
+	.snippets {
+		display         : flex;
+		justify-content : flex-start;
+		min-width       : 499.35px;  //must be controlled every time an item is added, must be hardcoded for the wrapping as it is applied
+	}
+
+	.editors {
+		display         : flex;
+		justify-content : flex-end;
+		min-width       : 250px; //must be controlled every time an item is added, must be hardcoded for the wrapping as it is applied
+
+		&:only-child {min-width   : unset; margin-left : auto;}
+
+		>div {
+			display         : flex;
+			flex            : 1;
+			justify-content : space-around;
+
+			&:first-child { border-left : none; }
+
+			& > div {
+				position    : relative;
+				width       : @menuHeight;
+				height      : @menuHeight;
+				line-height : @menuHeight;
+				text-align  : center;
+				cursor      : pointer;
+
+				&.editorTool:not(.active) { cursor : not-allowed; }
+
+				&:hover,&.selected { background-color : #999999; }
+				&.text {
+					.tooltipLeft('Brew Editor');
+				}
+				&.style {
+					.tooltipLeft('Style Editor');
+				}
+				&.meta {
+					.tooltipLeft('Properties');
+				}
+				&.snippet {
+					.tooltipLeft('Snippets');
+				}
+				&.undo {
+					.tooltipLeft('Undo');
+					font-size : 0.75em;
+					color     : grey;
+					&.active { color : inherit; }
+				}
+				&.redo {
+					.tooltipLeft('Redo');
+					font-size : 0.75em;
+					color     : grey;
+					&.active { color : inherit; }
+				}
+				&.foldAll {
+					.tooltipLeft('Fold All');
+					font-size : 0.75em;
+					color     : grey;
+					&.active { color : inherit; }
+				}
+				&.unfoldAll {
+					.tooltipLeft('Unfold All');
+					font-size : 0.75em;
+					color     : grey;
+					&.active { color : inherit; }
+				}
+				&.history {
+					.tooltipLeft('History');
+					position  : relative;
+					font-size : 0.75em;
+					color     : grey;
+					border    : none;
+					&.active { color : inherit; }
+					& > .dropdown {
+						right : -1px;
+						& > .snippet { padding-right : 10px; }
+					}
+				}
+				&.editorTheme {
+					.tooltipLeft('Editor Themes');
+					font-size : 0.75em;
+					color     : inherit;
+					&.active {
+						position         : relative;
+						background-color : #999999;
+					}
+				}
+				&.divider {
+					width      : 5px;
+					background : linear-gradient(currentColor, currentColor) no-repeat center/1px 100%;
+					&:hover { background-color : inherit; }
+				}
+			}
+			.themeSelector {
+				position         : absolute;
+				top              : 25px;
+				right            : 0;
+				z-index          : 10;
+				display          : flex;
+				align-items      : center;
+				justify-content  : center;
+				width            : 170px;
+				height           : inherit;
+				background-color : inherit;
+			}
+		}		
+	}
+	.snippetBarButton {
+		display        : inline-block;
+		height         : @menuHeight;
+		padding        : 0px 5px;
+		font-size      : 0.625em;
+		font-weight    : 800;
+		line-height    : @menuHeight;
+		text-transform : uppercase;
+		text-wrap      : nowrap;
+		cursor         : pointer;
+		&:hover, &.selected { background-color : #999999; }
+		i {
+			margin-right   : 3px;
+			font-size      : 1.4em;
+			vertical-align : middle;
+		}
+	}
+	.toggleMeta {
+		position    : absolute;
+		top         : 0px;
+		right       : 0px;
+		border-left : 1px solid black;
+		.tooltipLeft('Edit Brew Properties');
+	}
+	.snippetGroup {
+
+		&:hover {
+			& > .dropdown { visibility : visible; }
+		}
+		.dropdown {
+			position         : absolute;
+			top              : 100%;
+			z-index          : 1000;
+			visibility       : hidden;
+			padding          : 0px;
+			margin-left      : -5px;
+			background-color : #DDDDDD;
+			.snippet {
+				position    : relative;
+				display     : flex;
+				align-items : center;
+				min-width   : max-content;
+				padding     : 5px;
+				font-size   : 10px;
+				cursor      : pointer;
+				.animate(background-color);
+				i {
+					min-width    : 25px;
+					height       : 1.2em;
+					margin-right : 8px;
+					font-size    : 1.2em;
+					text-align   : center;
+					& ~ i {
+						margin-right : 0;
+						margin-left  : 5px;
+					}
+					/* Fonts */
+					&.font {
+						height : auto;
+						&::before {
+							font-size : 1em;
+							content   : 'ABC';
+						}
+
+						&.OpenSans {font-family : 'OpenSans';}
+						&.CodeBold {font-family : 'CodeBold';}
+						&.CodeLight {font-family : 'CodeLight';}
+						&.ScalySansRemake {font-family : 'ScalySansRemake';}
+						&.BookInsanityRemake {font-family : 'BookInsanityRemake';}
+						&.MrEavesRemake {font-family : 'MrEavesRemake';}
+						&.SolberaImitationRemake {font-family : 'SolberaImitationRemake';}
+						&.ScalySansSmallCapsRemake {font-family : 'ScalySansSmallCapsRemake';}
+						&.WalterTurncoat {font-family : 'WalterTurncoat';}
+						&.Lato {font-family : 'Lato';}
+						&.Courier {font-family : 'Courier';}
+						&.NodestoCapsCondensed {font-family : 'NodestoCapsCondensed';}
+						&.Overpass {font-family : 'Overpass';}
+						&.Davek {font-family : 'Davek';}
+						&.Iokharic {font-family : 'Iokharic';}
+						&.Rellanic {font-family : 'Rellanic';}
+						&.TimesNewRoman {font-family : 'Times New Roman';}
+					}
+				}
+				.name { margin-right : auto; }
+				.disabled { text-decoration : line-through; }
+				.beta {
+					align-self    : center;
+					padding       : 4px 6px;
+					margin-left   : 5px;
+					font-family   : monospace;
+					line-height   : 1em;
+					color         : white;
+					background    : grey;
+					border-radius : 12px;
+				}
+				&:hover {
+					background-color : #999999;
+					& > .dropdown {
+						visibility : visible;
+						&.side {
+							top         : 0%;
+							left        : 100%;
+							margin-left : 0;
+							box-shadow  : -1px 1px 2px 0px #999999;
+						}
+					}
+				}
+			}
+		}
+	}
+	.disabledSnippets {
+		color: grey;
+		cursor: not-allowed;
+
+		&:hover { background-color: #DDDDDD;}
+	}
+
+}
+@container editor (width < 750px) {
+	.snippetBar {
+		.editors { 
+			flex            : 1;
+			justify-content : space-between;
+			border-bottom   : 1px solid;
+		}
+		.snippets { 
+			flex            : 1;
+			justify-content : space-evenly; 
+		}
+		.editors > div.history > .dropdown { right : unset; }
+	}
+}
+