From f7d31bda337641ac16097a4bab30d419f2673cfc Mon Sep 17 00:00:00 2001 From: jessop Date: Thu, 5 Mar 2020 16:35:01 -0500 Subject: [PATCH 1/4] limit tags on publishing to 5 --- static/app-strings.json | 13 +++++++++---- ui/component/publishForm/view.jsx | 7 +++++-- ui/component/tagsSearch/view.jsx | 5 ++++- ui/component/tagsSelect/view.jsx | 3 +++ 4 files changed, 21 insertions(+), 7 deletions(-) diff --git a/static/app-strings.json b/static/app-strings.json index a1aed94e3..205530b1e 100644 --- a/static/app-strings.json +++ b/static/app-strings.json @@ -989,8 +989,6 @@ "Share usage data with LBRY inc.": "Share usage data with LBRY inc.", "Required": "Required", "Email %help_link% or join our %chat_link% if you encounter any trouble verifying.": "Email %help_link% or join our %chat_link% if you encounter any trouble verifying.", - "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...", "try again in a few seconds.": "try again in a few seconds.", "Any": "Any", "Video": "Video", @@ -1005,5 +1003,12 @@ "Model": "Model", "Binary": "Binary", "Other": "Other", - "For video content, use MP4s in H264/AAC format and a friendly bitrate (720p) for more reliable streaming.": "For video content, use MP4s in H264/AAC format and a friendly bitrate (720p) for more reliable streaming." -} \ No newline at end of file + "For video content, use MP4s in H264/AAC format and a friendly bitrate (720p) for more reliable streaming.": "For video content, use MP4s in H264/AAC format and a friendly bitrate (720p) for more reliable streaming.", + "Show reposts": "Show reposts", + "Show reposts from the creators you follow.": "Show reposts from the creators you follow.", + "You can try refreshing to fix it. If you still have issues, your anti-virus software or firewall may be preventing startup.": "You can try refreshing to fix it. If you still have issues, your anti-virus software or firewall may be preventing startup.", + "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%" +} diff --git a/ui/component/publishForm/view.jsx b/ui/component/publishForm/view.jsx index 7c8a3c8d1..722ce3e8b 100644 --- a/ui/component/publishForm/view.jsx +++ b/ui/component/publishForm/view.jsx @@ -87,8 +87,10 @@ function PublishForm(props: Props) { publish, disabled = false, } = 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 = @@ -152,15 +154,16 @@ function PublishForm(props: Props) { hideHeader label={__('Selected Tags')} empty={__('No tags added')} + limit={TAGS_LIMIT} help={__( - 'Only apply a few 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.' )} placeholder={__('Add relevant tags...')} onSelect={newTags => { const validatedTags = []; newTags.forEach(newTag => { if (!tags.some(tag => tag.name === newTag.name)) { - validatedTags.push(newTag); + if (tagsCount + validatedTags.length < TAGS_LIMIT) validatedTags.push(newTag); } }); updatePublishForm({ tags: [...tags, ...validatedTags] }); diff --git a/ui/component/tagsSearch/view.jsx b/ui/component/tagsSearch/view.jsx index 2e6b8e2a9..0c93766e5 100644 --- a/ui/component/tagsSearch/view.jsx +++ b/ui/component/tagsSearch/view.jsx @@ -16,6 +16,7 @@ type Props = { onRemove: Tag => void, placeholder?: string, label?: string, + disabled?: boolean, }; /* @@ -38,6 +39,7 @@ export default function TagsSearch(props: Props) { disableAutoFocus, placeholder, label, + disabled, } = props; const [newTag, setNewTag] = useState(''); const doesTagMatch = name => { @@ -128,6 +130,7 @@ export default function TagsSearch(props: Props) { placeholder={placeholder || __('Follow more tags')} type="text" value={newTag} + disabled={disabled} /> @@ -135,7 +138,7 @@ export default function TagsSearch(props: Props) { diff --git a/ui/component/tagsSelect/view.jsx b/ui/component/tagsSelect/view.jsx index d3f0911a8..d1b1a0f0c 100644 --- a/ui/component/tagsSelect/view.jsx +++ b/ui/component/tagsSelect/view.jsx @@ -24,6 +24,7 @@ type Props = { placeholder?: string, disableAutoFocus?: boolean, hideHeader?: boolean, + limit?: number, }; /* @@ -44,6 +45,7 @@ export default function TagsSelect(props: Props) { placeholder, hideHeader, label, + limit, } = props; const [hasClosed, setHasClosed] = usePersistedState('tag-select:has-closed', false); const tagsToDisplay = tagsChosen || followedTags; @@ -105,6 +107,7 @@ export default function TagsSelect(props: Props) { disableAutoFocus={disableAutoFocus} tagsPassedIn={tagsToDisplay} placeholder={placeholder} + disabled={limit && tagCount >= limit} /> } From c630482eab47d472789bcd552f0515d9f059e0c6 Mon Sep 17 00:00:00 2001 From: jessop Date: Fri, 6 Mar 2020 17:11:40 -0500 Subject: [PATCH 2/4] 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); From 6d2289a3711f17b40dcf0056f2de6fc330697a6d Mon Sep 17 00:00:00 2001 From: jessop Date: Fri, 6 Mar 2020 17:29:06 -0500 Subject: [PATCH 3/4] review changes --- ui/component/tagsSearch/view.jsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/ui/component/tagsSearch/view.jsx b/ui/component/tagsSearch/view.jsx index f2c006db9..9f94129b0 100644 --- a/ui/component/tagsSearch/view.jsx +++ b/ui/component/tagsSearch/view.jsx @@ -3,7 +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'; +import I18nMessage from 'component/i18nMessage'; type Props = { tagsPassedIn: Array, @@ -154,7 +154,7 @@ export default function TagsSearch(props: Props) { label={'Add Tags'} />
    - +
      {Boolean(newTag.length) && !suggestedTags.includes(newTag) && ( ))} - {!suggestedTags.length &&

      No suggested tags

      } + {!suggestedTags.length &&

      {__('No matching tags')}

      }
    From 46d4d972aa5df0a88829546a08a2091348c39874 Mon Sep 17 00:00:00 2001 From: jessop Date: Fri, 6 Mar 2020 17:34:09 -0500 Subject: [PATCH 4/4] appstrings --- static/app-strings.json | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/static/app-strings.json b/static/app-strings.json index 09d22aa61..7623a60b7 100644 --- a/static/app-strings.json +++ b/static/app-strings.json @@ -1015,5 +1015,7 @@ "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)" + "%selectTagsLabel% (%number% left)": "%selectTagsLabel% (%number% left)", + "Matching": "Matching", + "No matching tags": "No matching tags" }