From c630482eab47d472789bcd552f0515d9f059e0c6 Mon Sep 17 00:00:00 2001 From: jessop Date: Fri, 6 Mar 2020 17:11:40 -0500 Subject: [PATCH] overhaul tags --- static/app-strings.json | 7 ++- ui/component/publishForm/view.jsx | 7 +-- ui/component/tag/view.jsx | 1 + ui/component/tagsSearch/view.jsx | 95 +++++++++++++++++++++---------- ui/component/tagsSelect/view.jsx | 2 +- ui/scss/component/_tags.scss | 5 ++ 6 files changed, 82 insertions(+), 35 deletions(-) diff --git a/static/app-strings.json b/static/app-strings.json index 205530b1e..09d22aa61 100644 --- a/static/app-strings.json +++ b/static/app-strings.json @@ -1010,5 +1010,10 @@ "Only apply a few tags that are relevant to your content, and use the Mature tag as appropriate. Tag abuse will not be tolerated.": "Only apply a few tags that are relevant to your content, and use the Mature tag as appropriate. Tag abuse will not be tolerated.", "Add relevant tags...": "Add relevant tags...", "Enter up to five (5) tags that are relevant to your content, and use the Mature tag as appropriate. Tag abuse will not be tolerated.": "Enter up to five (5) tags that are relevant to your content, and use the Mature tag as appropriate. Tag abuse will not be tolerated.", - "Sorry, your request timed out. Modify your options or %again%": "Sorry, your request timed out. Modify your options or %again%" + "Sorry, your request timed out. Modify your options or %again%": "Sorry, your request timed out. Modify your options or %again%", + "gaming, crypto": "gaming, crypto", + "Autocomplete": "Autocomplete", + "Followed Tags": "Followed Tags", + "Add tags that are relevant to your content. If mature content, ensure it is tagged mature. Tag abuse and missing mature tags will not be tolerated.": "Add tags that are relevant to your content. If mature content, ensure it is tagged mature. Tag abuse and missing mature tags will not be tolerated.", + "%selectTagsLabel% (%number% left)": "%selectTagsLabel% (%number% left)" } diff --git a/ui/component/publishForm/view.jsx b/ui/component/publishForm/view.jsx index 722ce3e8b..efb53d9d2 100644 --- a/ui/component/publishForm/view.jsx +++ b/ui/component/publishForm/view.jsx @@ -90,7 +90,6 @@ function PublishForm(props: Props) { const TAGS_LIMIT = 5; const formDisabled = (!filePath && !editingURI) || publishing; const isInProgress = filePath || editingURI || name || title; - const tagsCount = tags && tags.length; // If they are editing, they don't need a new file chosen const formValidLessFile = @@ -156,14 +155,14 @@ function PublishForm(props: Props) { empty={__('No tags added')} limit={TAGS_LIMIT} help={__( - 'Enter up to five (5) tags that are relevant to your content, and use the Mature tag as appropriate. Tag abuse will not be tolerated.' + 'Add tags that are relevant to your content. If mature content, ensure it is tagged mature. Tag abuse and missing mature tags will not be tolerated.' )} - placeholder={__('Add relevant tags...')} + placeholder={__('gaming, crypto')} onSelect={newTags => { const validatedTags = []; newTags.forEach(newTag => { if (!tags.some(tag => tag.name === newTag.name)) { - if (tagsCount + validatedTags.length < TAGS_LIMIT) validatedTags.push(newTag); + validatedTags.push(newTag); } }); updatePublishForm({ tags: [...tags, ...validatedTags] }); diff --git a/ui/component/tag/view.jsx b/ui/component/tag/view.jsx index 26e1b5c70..10ea23e2a 100644 --- a/ui/component/tag/view.jsx +++ b/ui/component/tag/view.jsx @@ -31,6 +31,7 @@ export default function Tag(props: Props) { disabled={disabled} title={title} className={classnames('tag', { + 'tag--disabled': disabled === true, 'tag--large': type === 'large', 'tag--remove': type === 'remove', // tag--add only adjusts the color, which causes issues with mature tag color clashing diff --git a/ui/component/tagsSearch/view.jsx b/ui/component/tagsSearch/view.jsx index 0c93766e5..f2c006db9 100644 --- a/ui/component/tagsSearch/view.jsx +++ b/ui/component/tagsSearch/view.jsx @@ -3,6 +3,7 @@ import React, { useState } from 'react'; import { Form, FormField } from 'component/common/form'; import Tag from 'component/tag'; import { setUnion, setDifference } from 'util/set-operations'; +import I18nMessage from '../i18nMessage'; type Props = { tagsPassedIn: Array, @@ -17,6 +18,7 @@ type Props = { placeholder?: string, label?: string, disabled?: boolean, + limit?: number, }; /* @@ -40,6 +42,7 @@ export default function TagsSearch(props: Props) { placeholder, label, disabled, + limit, } = props; const [newTag, setNewTag] = useState(''); const doesTagMatch = name => { @@ -56,6 +59,8 @@ export default function TagsSearch(props: Props) { const remainingFollowedTagsSet = setDifference(followedTagsSet, selectedTagsSet); const suggestedTagsSet = setUnion(remainingFollowedTagsSet, unfollowedTagsSet); + const countWithoutMature = selectedTagsSet.has('mature') ? selectedTagsSet.size - 1 : selectedTagsSet.size; + const maxed = Boolean(limit && countWithoutMature >= limit); const suggestedTags = Array.from(suggestedTagsSet) .filter(doesTagMatch) .slice(0, 5); @@ -110,38 +115,70 @@ export default function TagsSearch(props: Props) { return (
- -
    - {tagsPassedIn.map(tag => ( - { - onRemove(tag); + +
      + {!tagsPassedIn.length && } + {Boolean(tagsPassedIn.length) && + tagsPassedIn.map(tag => ( + { + onRemove(tag); + }} + /> + ))}
    + +
    + +
      + {Boolean(newTag.length) && !suggestedTags.includes(newTag) && ( + handleSubmit(e) : e => handleTagClick(newTag)} + /> + )} + {suggestedTags.map(tag => ( + handleTagClick(tag)} + /> + ))} + + {!suggestedTags.length &&

      No suggested tags

      } +
    +
    - -
      - {suggestedTags.map(tag => ( - handleTagClick(tag)} /> - ))} - {!suggestedTags.length &&

      No suggested tags

      } -
    ); } diff --git a/ui/component/tagsSelect/view.jsx b/ui/component/tagsSelect/view.jsx index d1b1a0f0c..574a32f2b 100644 --- a/ui/component/tagsSelect/view.jsx +++ b/ui/component/tagsSelect/view.jsx @@ -107,7 +107,7 @@ export default function TagsSelect(props: Props) { disableAutoFocus={disableAutoFocus} tagsPassedIn={tagsToDisplay} placeholder={placeholder} - disabled={limit && tagCount >= limit} + limit={limit} /> } diff --git a/ui/scss/component/_tags.scss b/ui/scss/component/_tags.scss index 945b02af2..b92e24890 100644 --- a/ui/scss/component/_tags.scss +++ b/ui/scss/component/_tags.scss @@ -43,6 +43,7 @@ height: var(--tag-height); padding: calc(var(--spacing-miniscule) + 1px) var(--spacing-small); background-color: var(--color-input-bg); + margin-bottom: var(--spacing-medium); } } @@ -55,6 +56,10 @@ max-width: 20rem; } +.tag--disabled { + opacity: 0.3; +} + .tag--large { height: var(--height-input); padding: 0 var(--spacing-s);