f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-03-29 14:18:11 +00:00
Code Wiki Activity

proper tooltips

Browse Source
This commit is contained in:
Víctor Losada Hernández
2026-02-19 14:04:54 +01:00
parent 904548521e
commit ba4b30228a
6 changed files with 160 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
client/components/combobox.jsx
View File

@@ -11,6 +11,7 @@ const Combobox = createReactClass({
trigger : 'hover', trigger : 'hover',
default : '', default : '',
placeholder : '', placeholder : '',
tooltip: '',
autoSuggest : { autoSuggest : {
clearAutoSuggestOnClick : true, clearAutoSuggestOnClick : true,
suggestMethod : 'includes', suggestMethod : 'includes',
@@ -70,7 +71,8 @@ const Combobox = createReactClass({
return ( return (
<div className='dropdown-input item' <div className='dropdown-input item'
onMouseEnter={this.props.trigger == 'hover' ? ()=>{this.handleDropdown(true);} : undefined} onMouseEnter={this.props.trigger == 'hover' ? ()=>{this.handleDropdown(true);} : undefined}
onClick= {this.props.trigger == 'click' ? ()=>{this.handleDropdown(true);} : undefined}> onClick= {this.props.trigger == 'click' ? ()=>{this.handleDropdown(true);} : undefined}
{...(this.props.tooltip ? { 'data-tooltip-bottom': this.props.tooltip } : {})}>
<input <input
type='text' type='text'
onChange={(e)=>this.handleInput(e)} onChange={(e)=>this.handleInput(e)}

50
client/homebrew/editor/metadataEditor/metadataEditor.jsx
View File

@@ -256,7 +256,7 @@ const MetadataEditor = createReactClass({
return <div className='field language'> return <div className='field language'>
<label>language</label> <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' <Combobox trigger='click'
className='language-dropdown' className='language-dropdown'
default={this.props.metadata.lang || ''} default={this.props.metadata.lang || ''}
@@ -273,7 +273,6 @@ const MetadataEditor = createReactClass({
filterOn : ['value', 'detail', 'title'] filterOn : ['value', 'detail', 'title']
}} }}
/> />
<small>Sets the HTML Lang property for your brew. May affect hyphenation or spellcheck.</small>
</div> </div>
</div>; </div>;
@@ -339,14 +338,20 @@ const MetadataEditor = createReactClass({
{this.renderThumbnail()} {this.renderThumbnail()}
</div> </div>
<TagInput <div className="field tags">
label='tags' <label>Tags</label>
valuePatterns={/^\s*(?:(?:group|meta|system|type)\s*:\s*)?[A-Za-z0-9][A-Za-z0-9 \/\\.&_\-]{0,40}\s*$/} <div className="value" >
placeholder='add tag' unique={true} <TagInput
values={this.props.metadata.tags} label='tags'
smallText='You may start tags with "type", "system", "group" or "meta" followed by a colon ":", these will be colored in your userpage.' valuePatterns={/^\s*(?:(?:group|meta|system|type)\s*:\s*)?[A-Za-z0-9][A-Za-z0-9 \/\\.&_\-]{0,40}\s*$/}
onChange={(e)=>this.handleFieldChange('tags', e)} 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()} {this.renderLanguageDropdown()}
@@ -358,15 +363,22 @@ const MetadataEditor = createReactClass({
{this.renderAuthors()} {this.renderAuthors()}
<TagInput <div className="field tags">
label='invited authors' <label>Invited authors</label>
valuePatterns={/.+/} <div className="value">
validators={[(v)=>!this.props.metadata.authors?.includes(v)]} <TagInput
placeholder='invite author' unique={true} label='invited authors'
values={this.props.metadata.invitedAuthors} valuePatterns={/.+/}
smallText='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.' validators={[(v)=>!this.props.metadata.authors?.includes(v)]}
onChange={(e)=>this.handleFieldChange('invitedAuthors', e)} 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> <h2>Privacy</h2>

7
client/homebrew/editor/metadataEditor/metadataEditor.less
View File

@@ -44,8 +44,6 @@
gap : 10px; gap : 10px;
} }
.field { .field {
position : relative; position : relative;
display : flex; display : flex;
@@ -62,6 +60,9 @@
& > .value { & > .value {
flex : 1 1 auto; flex : 1 1 auto;
width : 50px; width : 50px;
&[data-tooltip-right] {
max-width:380px;
}
&:invalid { background : #FFB9B9; } &:invalid { background : #FFB9B9; }
small { small {
display : block; display : block;
@@ -110,7 +111,7 @@
} }
} }
&.language .language-dropdown { &.language .value {
z-index : 200; z-index : 200;
max-width : 150px; max-width : 150px;
} }

209
client/homebrew/editor/tagInput/tagInput.jsx
View File

@@ -1,71 +1,71 @@
import './tagInput.less'; import "./tagInput.less";
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from "react";
import Combobox from '../../../components/combobox.jsx'; import Combobox from "../../../components/combobox.jsx";
import tagSuggestionList from './curatedTagSuggestionList.js'; import tagSuggestionList from "./curatedTagSuggestionList.js";
const TagInput = ({ label, valuePatterns, values = [], unique = true, placeholder = '', smallText = '', onChange })=>{ const TagInput = ({tooltip, label, valuePatterns, values = [], unique = true, placeholder = "", smallText = "", onChange }) => {
const [tagList, setTagList] = useState( const [tagList, setTagList] = useState(
values.map((value)=>({ values.map((value) => ({
value, value,
editing : false, editing: false,
draft : '', draft: "",
})), })),
); );
useEffect(()=>{ useEffect(() => {
const incoming = values || []; const incoming = values || [];
const current = tagList.map((t)=>t.value); const current = tagList.map((t) => t.value);
const changed = incoming.length !== current.length || incoming.some((v, i)=>v !== current[i]); const changed = incoming.length !== current.length || incoming.some((v, i) => v !== current[i]);
if(changed) { if (changed) {
setTagList( setTagList(
incoming.map((value)=>({ incoming.map((value) => ({
value, value,
editing : false, editing: false,
})), })),
); );
} }
}, [values]); }, [values]);
useEffect(()=>{ useEffect(() => {
onChange?.({ onChange?.({
target : { value: tagList.map((t)=>t.value) }, target: { value: tagList.map((t) => t.value) },
}); });
}, [tagList]); }, [tagList]);
// substrings to be normalized to the first value on the array // substrings to be normalized to the first value on the array
const duplicateGroups = [ const duplicateGroups = [
['5e 2024', '5.5e', '5e\'24', '5.24', '5e24', '5.5'], ["5e 2024", "5.5e", "5e'24", "5.24", "5e24", "5.5"],
['5e', '5th Edition'], ["5e", "5th Edition"],
['Dungeons & Dragons', 'Dungeons and Dragons', 'Dungeons n dragons'], ["Dungeons & Dragons", "Dungeons and Dragons", "Dungeons n dragons"],
['D&D', 'DnD', 'dnd', 'Dnd', 'dnD', 'd&d', 'd&D', 'D&d'], ["D&D", "DnD", "dnd", "Dnd", "dnD", "d&d", "d&D", "D&d"],
['P2e', 'p2e', 'P2E', 'Pathfinder 2e'], ["P2e", "p2e", "P2E", "Pathfinder 2e"],
]; ];
const normalizeValue = (input)=>{ const normalizeValue = (input) => {
const lowerInput = input.toLowerCase(); const lowerInput = input.toLowerCase();
let normalizedTag = input; let normalizedTag = input;
for (const group of duplicateGroups) { for (const group of duplicateGroups) {
for (const tag of group) { for (const tag of group) {
if(!tag) continue; if (!tag) continue;
const index = lowerInput.indexOf(tag.toLowerCase()); const index = lowerInput.indexOf(tag.toLowerCase());
if(index !== -1) { if (index !== -1) {
normalizedTag = input.slice(0, index) + group[0] + input.slice(index + tag.length); normalizedTag = input.slice(0, index) + group[0] + input.slice(index + tag.length);
break; break;
} }
} }
} }
if(normalizedTag.includes(':')) { if (normalizedTag.includes(":")) {
const [rawType, rawValue = ''] = normalizedTag.split(':'); const [rawType, rawValue = ""] = normalizedTag.split(":");
const tagType = rawType.trim().toLowerCase(); const tagType = rawType.trim().toLowerCase();
const tagValue = rawValue.trim(); const tagValue = rawValue.trim();
if(tagValue.length > 0) { if (tagValue.length > 0) {
normalizedTag = `${tagType}:${tagValue[0].toUpperCase()}${tagValue.slice(1)}`; normalizedTag = `${tagType}:${tagValue[0].toUpperCase()}${tagValue.slice(1)}`;
} }
//trims spaces around colon and capitalizes the first word after the colon //trims spaces around colon and capitalizes the first word after the colon
@@ -75,56 +75,56 @@ const TagInput = ({ label, valuePatterns, values = [], unique = true, placeholde
return normalizedTag; return normalizedTag;
}; };
const submitTag = (newValue, index = null)=>{ const submitTag = (newValue, index = null) => {
const trimmed = newValue?.trim(); const trimmed = newValue?.trim();
if(!trimmed) return; if (!trimmed) return;
if(!valuePatterns.test(trimmed)) return; if (!valuePatterns.test(trimmed)) return;
const normalizedTag = normalizeValue(trimmed); const normalizedTag = normalizeValue(trimmed);
setTagList((prev)=>{ setTagList((prev) => {
const existsIndex = prev.findIndex((t)=>t.value.toLowerCase() === normalizedTag.toLowerCase()); const existsIndex = prev.findIndex((t) => t.value.toLowerCase() === normalizedTag.toLowerCase());
if(unique && existsIndex !== -1) return prev; if (unique && existsIndex !== -1) return prev;
if(index !== null) { if (index !== null) {
return prev.map((t, i)=>(i === index ? { ...t, value: normalizedTag, editing: false } : t)); return prev.map((t, i) => (i === index ? { ...t, value: normalizedTag, editing: false } : t));
} }
return [...prev, { value: normalizedTag, editing: false }]; return [...prev, { value: normalizedTag, editing: false }];
}); });
}; };
const removeTag = (index)=>{ const removeTag = (index) => {
setTagList((prev)=>prev.filter((_, i)=>i !== index)); setTagList((prev) => prev.filter((_, i) => i !== index));
}; };
const editTag = (index)=>{ const editTag = (index) => {
setTagList((prev)=>prev.map((t, i)=>(i === index ? { ...t, editing: true, draft: t.value } : t))); setTagList((prev) => prev.map((t, i) => (i === index ? { ...t, editing: true, draft: t.value } : t)));
}; };
const stopEditing = (index)=>{ const stopEditing = (index) => {
setTagList((prev)=>prev.map((t, i)=>(i === index ? { ...t, editing: false, draft: '' } : t))); setTagList((prev) => prev.map((t, i) => (i === index ? { ...t, editing: false, draft: "" } : t)));
}; };
const suggestionOptions = tagSuggestionList.map((tag)=>{ const suggestionOptions = tagSuggestionList.map((tag) => {
const tagType = tag.split(':'); const tagType = tag.split(":");
let classes = 'item'; let classes = "item";
switch (tagType[0]) { switch (tagType[0]) {
case 'type': case "type":
classes = 'item type'; classes = "item type";
break; break;
case 'group': case "group":
classes = 'item group'; classes = "item group";
break; break;
case 'meta': case "meta":
classes = 'item meta'; classes = "item meta";
break; break;
case 'system': case "system":
classes = 'item system'; classes = "item system";
break; break;
default: default:
classes = 'item'; classes = "item";
break; break;
} }
return ( return (
@@ -135,26 +135,54 @@ const TagInput = ({ label, valuePatterns, values = [], unique = true, placeholde
}); });
return ( return (
<div className='field tags'> <div className="tagInputWrap">
{label && <label>{label}</label>} <Combobox
trigger="click"
<div className='value'> className="tagInput-dropdown"
<ul className='list'> default=""
{tagList.map((t, i)=>t.editing ? ( placeholder={placeholder}
options={label === "tags" ? suggestionOptions : []}
tooltip={tooltip}
autoSuggest={
label === "tags"
? {
suggestMethod: "startsWith",
clearAutoSuggestOnClick: true,
filterOn: ["value", "title"],
}
: { suggestMethod: "includes", clearAutoSuggestOnClick: true, filterOn: [] }
}
valuePatterns={valuePatterns.source}
onSelect={(value) => submitTag(value)}
onEntry={(e) => {
if (e.key === "Enter") {
e.preventDefault();
submitTag(e.target.value);
}
}}
/>
<ul className="list">
{tagList.map((t, i) =>
t.editing ? (
<input <input
key={i} key={i}
type='text' type="text"
value={t.draft} // always use draft value={t.draft} // always use draft
pattern={valuePatterns.source} pattern={valuePatterns.source}
onChange={(e)=>setTagList((prev)=>prev.map((tag, idx)=>(idx === i ? { ...tag, draft: e.target.value } : tag)))} onChange={(e) =>
onKeyDown={(e)=>{ setTagList((prev) =>
if(e.key === 'Enter') { prev.map((tag, idx) => (idx === i ? { ...tag, draft: e.target.value } : tag)),
)
}
onKeyDown={(e) => {
if (e.key === "Enter") {
e.preventDefault(); e.preventDefault();
submitTag(t.draft, i); // submit draft submitTag(t.draft, i); // submit draft
setTagList((prev)=>prev.map((tag, idx)=>(idx === i ? { ...tag, draft: '' } : tag)), setTagList((prev) =>
prev.map((tag, idx) => (idx === i ? { ...tag, draft: "" } : tag)),
); );
} }
if(e.key === 'Escape') { if (e.key === "Escape") {
stopEditing(i); stopEditing(i);
e.target.blur(); e.target.blur();
} }
@@ -162,47 +190,20 @@ const TagInput = ({ label, valuePatterns, values = [], unique = true, placeholde
autoFocus autoFocus
/> />
) : ( ) : (
<li key={i} className='tag' onClick={()=>editTag(i)}> <li key={i} className="tag" onClick={() => editTag(i)}>
{t.value} {t.value}
<button <button
type='button' type="button"
onClick={(e)=>{ onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
removeTag(i); removeTag(i);
}}> }}>
<i className='fa fa-times fa-fw' /> <i className="fa fa-times fa-fw" />
</button> </button>
</li> </li>
), ),
)} )}
</ul> </ul>
<Combobox
trigger='click'
className='tagInput-dropdown'
default=''
placeholder={placeholder}
options={label === 'tags' ? suggestionOptions : []}
autoSuggest={
label === 'tags'
? {
suggestMethod : 'startsWith',
clearAutoSuggestOnClick : true,
filterOn : ['value', 'title'],
}
: { suggestMethod: 'includes', clearAutoSuggestOnClick: true, filterOn: [] }
}
valuePatterns={valuePatterns.source}
onSelect={(value)=>submitTag(value)}
onEntry={(e)=>{
if(e.key === 'Enter') {
e.preventDefault();
submitTag(e.target.value);
}
}}
/>
{smallText.length !== 0 && <small>{smallText}</small>}
</div>
</div> </div>
); );
}; };

6
client/homebrew/editor/tagInput/tagInput.less
View File

@@ -1,5 +1,11 @@
.tags { .tags {
.tagInputWrap {
display:grid;
grid-template-columns: 200px 3fr;
gap:10px;
}
.list input { .list input {
border-radius: 5px; border-radius: 5px;
} }

13
shared/naturalcrit/styles/tooltip.less
View File

@@ -3,18 +3,23 @@
@arrowSize : 6px; @arrowSize : 6px;
@arrowPosition : 18px; @arrowPosition : 18px;
[data-tooltip] { [data-tooltip] {
position:relative;
.tooltip(attr(data-tooltip)); .tooltip(attr(data-tooltip));
} }
[data-tooltip-top] { [data-tooltip-top] {
position:relative;
.tooltipTop(attr(data-tooltip-top)); .tooltipTop(attr(data-tooltip-top));
} }
[data-tooltip-bottom] { [data-tooltip-bottom] {
position:relative;
.tooltipBottom(attr(data-tooltip-bottom)); .tooltipBottom(attr(data-tooltip-bottom));
} }
[data-tooltip-left] { [data-tooltip-left] {
position:relative;
.tooltipLeft(attr(data-tooltip-left)); .tooltipLeft(attr(data-tooltip-left));
} }
[data-tooltip-right] { [data-tooltip-right] {
position:relative;
.tooltipRight(attr(data-tooltip-right)); .tooltipRight(attr(data-tooltip-right));
} }
.tooltip(@content) { .tooltip(@content) {
@@ -75,8 +80,9 @@
} }
&::after { margin-bottom : -14px;} &::after { margin-bottom : -14px;}
&::before, &::after { &::before, &::after {
bottom : 50%; top : 50%;
left : 100%; left : 100%;
translate:0 -50%;
} }
&:hover::after, &:hover::before, &:focus::after, &:focus::before { &:hover::after, &:hover::before, &:focus::after, &:focus::before {
.transform(translateX(@arrowSize + 2)); .transform(translateX(@arrowSize + 2));
@@ -106,9 +112,12 @@
font-size : 12px; font-size : 12px;
line-height : 12px; line-height : 12px;
color : white; color : white;
white-space : nowrap;
content : @content; content : @content;
background : @tooltipColor; background : @tooltipColor;
max-width : 50ch;
width :max-content;
word-break : break-word;
overflow-wrap : break-word;
} }
&:hover::before, &:hover::after { &:hover::before, &:hover::after {
visibility : visible; visibility : visible;