diff --git a/app/assets/stylesheets/classified_listings.scss b/app/assets/stylesheets/classified_listings.scss index 82bc8d2c9..d16afda3b 100644 --- a/app/assets/stylesheets/classified_listings.scss +++ b/app/assets/stylesheets/classified_listings.scss @@ -381,12 +381,17 @@ .listingform__tagoptionrow { padding: 10px; cursor: pointer; + position: relative; &:hover { background: lighten($green, 27%); color: $black; } } +.listingform__tagsoptionsbottomrow, .listingform__tagsoptionrulesbutton, .listingform__tagrules--inactive { + display: none; //not yet fully functional or relevant +} + .listingform__tagoptionrow--active { background: $green; color: $black; diff --git a/app/assets/stylesheets/preact/article-form.scss b/app/assets/stylesheets/preact/article-form.scss index 6601352d0..51c2a0f9a 100644 --- a/app/assets/stylesheets/preact/article-form.scss +++ b/app/assets/stylesheets/preact/article-form.scss @@ -269,6 +269,7 @@ padding: 10px; font-weight: bold; cursor: pointer; + position: relative; &:hover { background: lighten($green, 27%); background: var(--theme-container-background-hover, lighten($green, 27%)); @@ -277,6 +278,44 @@ } } + +.articleform__tagsoptionsbottomrow { + padding: 12px 10px 10px; + font-weight: bold; + cursor: pointer; + position: relative; + font-size: 0.7em; + font-style: italic; + border-top: 1px solid $medium-gray; + color: var(--theme-secondary-color, $black); +} + +.articleform__tagsoptionrulesbutton { + position: absolute; + right: 8px; + top: 9px; + border: 0; + border-radius: 3px; + background: var(--theme-anchor-color, $sky-blue); + color: var(--theme-container-background, white); + font-size: 0.8em; + width: 100px; +} + +.articleform__tagrules--inactive { + display: none +} + +.articleform__tagrules--active { + font-size: 0.76em; + max-height: 270px; + overflow: auto; + border: 1px solid $medium-gray; + border-radius: 3px; + margin-top: 8px; + padding: 0px 8px; +} + .articleform__tagoptionrow--active { background: $green; background: var(--theme-container-accent-background, $green); diff --git a/app/javascript/article-form/__tests__/__snapshots__/articleForm.test.jsx.snap b/app/javascript/article-form/__tests__/__snapshots__/articleForm.test.jsx.snap index b84f00c40..e9cc48bce 100644 --- a/app/javascript/article-form/__tests__/__snapshots__/articleForm.test.jsx.snap +++ b/app/javascript/article-form/__tests__/__snapshots__/articleForm.test.jsx.snap @@ -31,7 +31,7 @@ exports[` renders properly 1`] = ` class="articleform__tagswrapper" > { setupImageButton({ diff --git a/app/javascript/article-form/elements/__tests__/__snapshots__/tags.test.jsx.snap b/app/javascript/article-form/elements/__tests__/__snapshots__/tags.test.jsx.snap index 60e688baa..6e6e292d6 100644 --- a/app/javascript/article-form/elements/__tests__/__snapshots__/tags.test.jsx.snap +++ b/app/javascript/article-form/elements/__tests__/__snapshots__/tags.test.jsx.snap @@ -7,6 +7,7 @@ Object { "prevLen": 0, "searchResults": Array [], "selectedIndex": -1, + "showingRulesForTag": null, } `; @@ -15,7 +16,7 @@ exports[` renders properly 1`] = ` class="articleform__tagswrapper" > {tag.name} + {(tag.rules_html && tag.rules_html.length > 0) ? : ''} +
)); if ( this.state.searchResults.length > 0 && - document.activeElement.id === 'tag-input' + (document.activeElement.id === 'tag-input' || document.activeElement.className === 'articleform__tagsoptionrulesbutton') ) { searchResultsHTML = (
{searchResultsRows} +
Some tags have rules and guidelines determined by community moderators
); } @@ -150,7 +161,7 @@ class Tags extends Component { ref={t => (this.textArea = t)} className={`${this.props.classPrefix}__tags`} placeholder={`${this.props.maxTags} tags max, comma separated, no spaces or special characters`} - autoComplete={this.props.autoComplete || 'on'} + autoComplete='off' value={this.props.defaultValue} onInput={this.handleInput} onKeyDown={this.handleKeyDown} @@ -162,10 +173,21 @@ class Tags extends Component { ); } + handleRulesClick = e => { + e.preventDefault(); + if (this.state.showingRulesForTag === e.target.dataset.content) { + this.setState({showingRulesForTag: null}); + } else { + this.setState({showingRulesForTag: e.target.dataset.content}); + } + } + handleTagClick = e => { + if (e.target.className === 'articleform__tagsoptionrulesbutton') { + return; + } const input = document.getElementById('tag-input'); input.focus(); - this.insertTag(e.target.dataset.content); }; @@ -199,7 +221,6 @@ class Tags extends Component { cursorIdx: e.target.selectionStart, prevLen: this.textArea.value.length, }); - return this.search(query); }; @@ -324,7 +345,7 @@ class Tags extends Component { return; } component.forceUpdate(); - }, 100); + }, 250); }; insertSpace(value, position) { @@ -335,6 +356,7 @@ class Tags extends Component { if (query === '') { return new Promise(resolve => { setTimeout(() => { + 'search query' this.resetSearchResults(); resolve(); }, 5); @@ -343,7 +365,7 @@ class Tags extends Component { return this.index .search(query, { - hitsPerPage: 10, + hitsPerPage: 8, attributesToHighlight: [], filters: 'supported:true', }) diff --git a/app/models/tag.rb b/app/models/tag.rb index 435b5cc3a..e67445ae4 100644 --- a/app/models/tag.rb +++ b/app/models/tag.rb @@ -37,7 +37,7 @@ class Tag < ActsAsTaggableOn::Tag before_save :mark_as_updated algoliasearch per_environment: true do - attribute :name, :bg_color_hex, :text_color_hex, :hotness_score, :supported, :short_summary + attribute :name, :bg_color_hex, :text_color_hex, :hotness_score, :supported, :short_summary, :rules_html attributesForFaceting [:supported] customRanking ["desc(hotness_score)"] searchableAttributes %w[name short_summary] diff --git a/app/views/articles/_v2_form.html.erb b/app/views/articles/_v2_form.html.erb index 744b5aff8..59e0985ce 100644 --- a/app/views/articles/_v2_form.html.erb +++ b/app/views/articles/_v2_form.html.erb @@ -21,7 +21,7 @@
- +