Merge branch 'master' of https://github.com/naturalcrit/homebrewery into vitreum-to-vite

2026-03-25 19:18:11 +00:00 · 2026-02-24 20:52:48 +01:00
parent a209538fc6 c6a4dfd163
commit d1d89d033e
28 changed files with 2618 additions and 232 deletions
--- a/client/homebrew/editor/metadataEditor/metadataEditor.jsx
+++ b/client/homebrew/editor/metadataEditor/metadataEditor.jsx
@@ -11,8 +11,6 @@ import TagInput from '../tagInput/tagInput.jsx';
 import Themes from '../../../../themes/themes.json';
 import validations from './validations.js';

-const SYSTEMS = ['5e', '4e', '3.5e', 'Pathfinder'];
-
 import homebreweryThumbnail from '../../thumbnail.png';

 const callIfExists = (val, fn, ...args)=>{
@@ -34,7 +32,6 @@ const MetadataEditor = createReactClass({
 				tags        : [],
 				published   : false,
 				authors     : [],
-				systems     : [],
 				renderer    : 'legacy',
 				theme       : '5ePHB',
 				lang        : 'en'
@@ -92,15 +89,6 @@ const MetadataEditor = createReactClass({
 		}
 	},

-	handleSystem : function(system, e){
-		if(e.target.checked){
-			this.props.metadata.systems.push(system);
-		} else {
-			this.props.metadata.systems = _.without(this.props.metadata.systems, system);
-		}
-		this.props.onChange(this.props.metadata);
-	},
-
 	handleRenderer : function(renderer, e){
 		if(e.target.checked){
 			this.props.metadata.renderer = renderer;
@@ -156,18 +144,6 @@ const MetadataEditor = createReactClass({
 			});
 	},

-	renderSystems : function(){
-		return _.map(SYSTEMS, (val)=>{
-			return <label key={val}>
-				<input
-					type='checkbox'
-					checked={_.includes(this.props.metadata.systems, val)}
-					onChange={(e)=>this.handleSystem(val, e)} />
-				{val}
-			</label>;
-		});
-	},
-
 	renderPublish : function(){
 		if(this.props.metadata.published){
 			return <button className='unpublish' onClick={()=>this.handlePublish(false)}>
@@ -238,7 +214,7 @@ const MetadataEditor = createReactClass({
 				</div>;
 		} else {
 			dropdown =
-				<div className='value'>
+				<div className='value' data-tooltip-top='Select from the list below (built-in themes and brews you have tagged "meta:theme"), or paste in the Share URL or Share ID of any brew.'>
 					<Combobox trigger='click'
 						className='themes-dropdown'
 						default={currentThemeDisplay}
@@ -256,7 +232,6 @@ const MetadataEditor = createReactClass({
 							filterOn                : ['value', 'title']
 						}}
 					/>
-					<small>Select from the list below (built-in themes and brews you have tagged "meta:theme"), or paste in the Share URL or Share ID of any brew.</small>
 				</div>;
 		}

@@ -281,7 +256,7 @@ const MetadataEditor = createReactClass({

 		return <div className='field language'>
 			<label>language</label>
-			<div className='value'>
+			<div className='value' data-tooltip-right='Sets the HTML Lang property for your brew. May affect hyphenation or spellcheck.'>
 				<Combobox trigger='click'
 					className='language-dropdown'
 					default={this.props.metadata.lang || ''}
@@ -298,14 +273,13 @@ const MetadataEditor = createReactClass({
 						filterOn                : ['value', 'detail', 'title']
 					}}
 				/>
-				<small>Sets the HTML Lang property for your brew. May affect hyphenation or spellcheck.</small>
 			</div>

 		</div>;
 	},

 	renderRenderOptions : function(){
-		return <div className='field systems'>
+		return <div className='field renderers'>
 			<label>Renderer</label>
 			<div className='value'>
 				<label key='legacy'>
@@ -364,18 +338,20 @@ const MetadataEditor = createReactClass({
 				{this.renderThumbnail()}
 			</div>

-			<TagInput label='tags' valuePatterns={[/^(?:(?:group|meta|system|type):)?[A-Za-z0-9][A-Za-z0-9 \/.\-]{0,40}$/]}
-				placeholder='add tag' unique={true}
-				values={this.props.metadata.tags}
-				onChange={(e)=>this.handleFieldChange('tags', e)}
-			/>
-
-			<div className='field systems'>
-				<label>systems</label>
-				<div className='value'>
-					{this.renderSystems()}
+			<div className="field tags">
+				<label>Tags</label>
+				<div className="value" >
+					<TagInput
+						label='tags'
+						valuePatterns={/^\s*(?:(?:group|meta|system|type)\s*:\s*)?[A-Za-z0-9][A-Za-z0-9 \/\\.&_\-]{0,40}\s*$/}
+						placeholder='add tag' unique={true}
+						values={this.props.metadata.tags}
+						onChange={(e)=>this.handleFieldChange('tags', e)}
+						tooltip='You may start tags with "type", "system", "group" or "meta" followed by a colon ":", these will be colored in your userpage.'
+					/>
 				</div>
 			</div>
+			

 			{this.renderLanguageDropdown()}

@@ -387,13 +363,22 @@ const MetadataEditor = createReactClass({

 			{this.renderAuthors()}

-			<TagInput label='invited authors' valuePatterns={[/.+/]}
-				validators={[(v)=>!this.props.metadata.authors?.includes(v)]}
-				placeholder='invite author' unique={true}
-				values={this.props.metadata.invitedAuthors}
-				notes={['Invited author usernames are case sensitive.', 'After adding an invited author, send them the edit link. There, they can choose to accept or decline the invitation.']}
-				onChange={(e)=>this.handleFieldChange('invitedAuthors', e)}
-			/>
+			<div className="field invitedAuthors">
+				<label>Invited authors</label>
+				<div className="value">
+					<TagInput
+						label='invited authors'
+						valuePatterns={/.+/}
+						validators={[(v)=>!this.props.metadata.authors?.includes(v)]}
+						placeholder='invite author' unique={true}
+						tooltip={`Invited author usernames are case sensitive.
+							After adding an invited author, send them the edit link. There, they can choose to accept or decline the invitation.`}
+						values={this.props.metadata.invitedAuthors}
+						onChange={(e)=>this.handleFieldChange('invitedAuthors', e)}
+					/>
+				</div>
+			</div>
+			

 			<h2>Privacy</h2>

--- a/client/homebrew/editor/metadataEditor/metadataEditor.less
+++ b/client/homebrew/editor/metadataEditor/metadataEditor.less
@@ -44,8 +44,6 @@
 		gap            : 10px;
 	}

-
-
 	.field {
 		position      : relative;
 		display       : flex;
@@ -62,6 +60,7 @@
 		& > .value {
 			flex           : 1 1 auto;
 			width          : 50px;
+			&[data-tooltip-right] { max-width : 380px; }
 			&:invalid { background : #FFB9B9; }
 			small {
 				display     : block;
@@ -74,6 +73,16 @@
 			border : 1px solid gray;
 			&:focus { outline : 1px solid #444444; }
 		}
+		
+		&.description {
+			flex : 1;
+			textarea.value {
+				height      : auto;
+				font-family : 'Open Sans', sans-serif;
+				resize      : none;
+			}
+		}
+
 		&.thumbnail, &.themes {
 			label { line-height : 2.0em; }
 			.value {
@@ -90,6 +99,15 @@
 			}
 		}

+		&.tags .tagInput-dropdown {
+			z-index   : 400;
+			max-width : 200px;
+		}
+		&.language .value {
+			z-index   : 300;
+			max-width : 150px;
+		}
+
 		&.themes {
 			.value {
 				overflow      : visible;
@@ -101,22 +119,13 @@
 			}
 		}

-		&.description {
-			flex : 1;
-			textarea.value {
-				height      : auto;
-				font-family : 'Open Sans', sans-serif;
-				resize      : none;
-			}
-		}
-
-		&.language .language-dropdown {
-			z-index   : 200;
-			max-width : 150px;
+		&.invitedAuthors .value {
+			z-index   : 100;
+			
+			.tagInput-dropdown { max-width : 200px; }
 		}
 	}

-
 	.thumbnail-preview {
 		position         : relative;
 		flex             : 1 1;
@@ -129,7 +138,7 @@
 		background-color : #AAAAAA;
 	}

-	.systems.field .value {
+	.renderers.field .value {
 		label {
 			display        : inline-flex;
 			align-items    : center;
@@ -169,7 +178,7 @@
 	.themes.field {
 		& .dropdown-container {
 			position         : relative;
-			z-index          : 100;
+			z-index          : 200;
 			background-color : white;
 		}
 		& .dropdown-options { overflow-y : visible; }