From 80c5f7018989375532bf531d3fc8bd0f947e7b01 Mon Sep 17 00:00:00 2001 From: Jan Tojnar Date: Sun, 16 Jul 2023 12:53:58 +0200 Subject: [PATCH 01/12] client: Add tag autocomplete Fixes: https://github.com/fossar/selfoss/issues/669 --- NEWS.md | 1 + client/js/templates/App.jsx | 4 +- client/js/templates/Source.jsx | 114 ++++++++++++++++---- client/js/templates/SourcesPage.jsx | 31 +++++- client/locale/cs.json | 2 + client/locale/en.json | 2 + client/package-lock.json | 12 +++ client/package.json | 1 + client/styles/main.scss | 12 ++- client/styles/tags.scss | 158 ++++++++++++++++++++++++++++ 10 files changed, 308 insertions(+), 29 deletions(-) create mode 100644 client/styles/tags.scss diff --git a/NEWS.md b/NEWS.md index 8bbe947cc1..78ee7287a6 100644 --- a/NEWS.md +++ b/NEWS.md @@ -11,6 +11,7 @@ - Sources can be filtered based on item’s author, URL or categories. ([#1423](https://github.com/fossar/selfoss/pull/1423), [#1424](https://github.com/fossar/selfoss/pull/1424)) - Source filter expression is now validated whenever a source is modified. ([#1423](https://github.com/fossar/selfoss/pull/1423)) - Garbage collection can be completely disabled by setting `items_lifetime=0`. +- Tags are now autocompleted when editing a new source. ([#1311](https://github.com/fossar/selfoss/pull/1311), [#669](https://github.com/fossar/selfoss/issues/669)) ### Bug fixes - Configuration parser was changed to *raw* method, which relaxes the requirement to quote option values containing special characters in `config.ini`. ([#1371](https://github.com/fossar/selfoss/issues/1371)) diff --git a/client/js/templates/App.jsx b/client/js/templates/App.jsx index 32d13bbfa3..e7b2bea123 100644 --- a/client/js/templates/App.jsx +++ b/client/js/templates/App.jsx @@ -307,7 +307,9 @@ function PureApp({ )} - + diff --git a/client/js/templates/Source.jsx b/client/js/templates/Source.jsx index ec1dce046b..8bb282bc55 100644 --- a/client/js/templates/Source.jsx +++ b/client/js/templates/Source.jsx @@ -1,7 +1,8 @@ import React from 'react'; -import { useRef } from 'react'; +import { useMemo, useRef } from 'react'; import { Menu, MenuButton, MenuItem } from '@szhsin/react-menu'; import { useHistory, useLocation } from 'react-router-dom'; +import ReactTags from 'react-tag-autocomplete'; import { fadeOut } from '@siteparts/show-hide-effects'; import { makeEntriesLinkLocation } from '../helpers/uri'; import PropTypes from 'prop-types'; @@ -67,10 +68,7 @@ function handleSave({ // Make tags into a list. const tagsList = tags - ? tags - .split(',') - .map((tag) => tag.trim()) - .filter((tag) => tag !== '') + ? tags.map((tag) => tag.name) : []; const values = { @@ -189,7 +187,7 @@ function handleDelete({ } // start editing -function handleEdit({ event, source, setEditedSource }) { +function handleEdit({ event, source, tagInfo, setEditedSource }) { event.preventDefault(); const { id, title, tags, filter, spout, params } = source; @@ -197,7 +195,7 @@ function handleEdit({ event, source, setEditedSource }) { setEditedSource({ id, title: title ? unescape(title) : '', - tags: tags ? tags.map(unescape).join(',') : '', + tags: tags ? tags.map(unescape).map((name) => ({ id: tagInfo[name]?.id, name })) : [], filter, spout, params @@ -264,6 +262,21 @@ function daysAgo(date) { return Math.floor((today - old) / MS_PER_DAY); } +const reactTagsClassNames = { + root: 'react-tags', + rootFocused: 'is-focused', + selected: 'react-tags-selected', + selectedTag: 'react-tags-selected-tag', + selectedTagName: 'react-tags-selected-tag-name', + search: 'react-tags-search', + searchWrapper: 'react-tags-search-wrapper', + searchInput: 'react-tags-search-input', + suggestions: 'react-tags-suggestions', + suggestionActive: 'is-active', + suggestionDisabled: 'is-disabled', + suggestionPrefix: 'react-tags-suggestion-prefix' +}; + function SourceEditForm({ source, sourceElem, @@ -271,6 +284,7 @@ function SourceEditForm({ setSources, spouts, setSpouts, + tagInfo, setEditedSource, sourceActionLoading, setSourceActionLoading, @@ -302,8 +316,39 @@ function SourceEditForm({ [updateEditedSource] ); - const tagsOnChange = React.useCallback( - (event) => updateEditedSource({ tags: event.target.value }), + const tagsOnAddition = React.useCallback( + (input) => { + // We need to handle pasting as well. + const tagsToAdd = + typeof input.id !== 'undefined' + ? [input] + : input.name + .split(',') + .map((tag) => tag.trim()) + .filter((tag) => tag !== '') + .map((tag) => ({ name: tag, id: undefined })); + updateEditedSource(({ tags }) => { + const usedTagNames = tags.map(({ name }) => name); + const freshTagsToAdd = tagsToAdd.filter((tag) => !usedTagNames.includes(tag.name)); + if (freshTagsToAdd.length === 0) { + // All tags already included, no change. + return {}; + } + + return { tags: [...tags, ...freshTagsToAdd] }; + }); + }, + [updateEditedSource] + ); + + const tagsOnDelete = React.useCallback( + (index) => { + updateEditedSource(({ tags }) => { + let newTags = tags.slice(0); + newTags.splice(index, 1); + return { tags: newTags}; + }); + }, [updateEditedSource] ); @@ -363,6 +408,11 @@ function SourceEditForm({ [source, sourceElem, setSources, setEditedSource, dirty, setDirty] ); + const tagSuggestions = useMemo( + () => Object.entries(tagInfo).map(([name, { id }]) => ({ id, name })), + [tagInfo] + ); + const _ = React.useContext(LocalizationContext); const sourceParamsContent = ( @@ -400,6 +450,8 @@ function SourceEditForm({ ); + const reactTags = useRef(); + return (
    @@ -428,18 +480,23 @@ function SourceEditForm({ - - - {' '} - {_('source_comma')} - {sourceErrors['tags'] ? ( {sourceErrors['tags']} ) : null} @@ -545,6 +602,7 @@ SourceEditForm.propTypes = { setSources: PropTypes.func.isRequired, spouts: PropTypes.object.isRequired, setSpouts: PropTypes.func.isRequired, + tagInfo: PropTypes.object.isRequired, setEditedSource: PropTypes.func.isRequired, sourceActionLoading: PropTypes.bool.isRequired, setSourceActionLoading: PropTypes.func.isRequired, @@ -559,7 +617,15 @@ SourceEditForm.propTypes = { setDirty: PropTypes.func.isRequired, }; -export default function Source({ source, setSources, spouts, setSpouts, dirty, setDirtySources }) { +export default function Source({ + source, + setSources, + spouts, + setSpouts, + tagInfo, + dirty, + setDirtySources, +}) { const isNew = !source.title; let classes = { source: true, @@ -588,8 +654,8 @@ export default function Source({ source, setSources, spouts, setSpouts, dirty, s }, [justSavedTimeout]); const editOnClick = React.useCallback( - (event) => handleEdit({ event, source, setEditedSource }), - [source] + (event) => handleEdit({ event, source, tagInfo, setEditedSource }), + [source, tagInfo] ); const setDirty = React.useCallback( @@ -717,6 +783,7 @@ export default function Source({ source, setSources, spouts, setSpouts, dirty, s setSources, spouts, setSpouts, + tagInfo, setEditedSource, sourceActionLoading, setSourceActionLoading, @@ -744,6 +811,7 @@ Source.propTypes = { setSources: PropTypes.func.isRequired, spouts: PropTypes.object.isRequired, setSpouts: PropTypes.func.isRequired, + tagInfo: PropTypes.object.isRequired, dirty: PropTypes.bool.isRequired, setDirtySources: PropTypes.func.isRequired, }; diff --git a/client/js/templates/SourcesPage.jsx b/client/js/templates/SourcesPage.jsx index 62e7105868..8c1b5be943 100644 --- a/client/js/templates/SourcesPage.jsx +++ b/client/js/templates/SourcesPage.jsx @@ -1,3 +1,4 @@ +import PropTypes from 'prop-types'; import React from 'react'; import { useMemo } from 'react'; import { Prompt } from 'react-router'; @@ -90,9 +91,26 @@ function loadSources({ abortController, location, setSpouts, setSources, setLoad }); } -export default function SourcesPage() { +export default function SourcesPage({ tags }) { const [spouts, setSpouts] = React.useState([]); const [sources, setSources] = React.useState([]); + const tagInfo = useMemo( + () => { + let maxTagId = 1; + let info = {}; + + tags.forEach(({ tag }) => { + if (typeof info[tag] === 'undefined') { + info[tag] = { + id: maxTagId++, + }; + } + }); + + return info; + }, + [tags] + ); const [loadingState, setLoadingState] = React.useState(LoadingState.INITIAL); @@ -105,6 +123,11 @@ export default function SourcesPage() { React.useEffect(() => { const abortController = new AbortController(); + if (selfoss.app.state.tags.length === 0) { + // Ensure tags are loaded. + selfoss.reloadTags(); + } + loadSources({ abortController, location, setSpouts, setSources, setLoadingState }) .then(() => { if (isAdding) { @@ -183,7 +206,7 @@ export default function SourcesPage() { ))}
@@ -197,3 +220,7 @@ export default function SourcesPage() { ); } + +SourcesPage.propTypes = { + tags: PropTypes.array.isRequired, +}; diff --git a/client/locale/cs.json b/client/locale/cs.json index b0f02a84fe..20b2074514 100644 --- a/client/locale/cs.json +++ b/client/locale/cs.json @@ -43,6 +43,8 @@ "lang_source_title": "Název", "lang_source_autotitle_hint": "Pro automatické vyplnění ponechte prázdné", "lang_source_tags": "Štítky", + "lang_source_tags_placeholder": "Přidat nový štítek", + "lang_source_tag_remove_button_label": "Klikněte pro odstranění štítku", "lang_source_pwd_placeholder": "Beze změny", "lang_source_comma": "Oddělené čárkou", "lang_source_select": "Vyberte prosím zdroj", diff --git a/client/locale/en.json b/client/locale/en.json index f4865aa66d..888e2a1e91 100644 --- a/client/locale/en.json +++ b/client/locale/en.json @@ -56,6 +56,8 @@ "lang_source_title": "Title", "lang_source_autotitle_hint": "Leave empty to fetch title", "lang_source_tags": "Tags", + "lang_source_tags_placeholder": "Add new tag", + "lang_source_tag_remove_button_label": "Click to remove tag", "lang_source_pwd_placeholder": "Not changed", "lang_source_comma": "Comma separated", "lang_source_select": "Please select source", diff --git a/client/package-lock.json b/client/package-lock.json index 5e28869473..2da49edd44 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -27,6 +27,7 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^5.2.0", + "react-tag-autocomplete": "^7.0.0", "reset-css": "^5.0.1", "rooks": "^7.1.1", "tinykeys": "^2.0.0", @@ -5588,6 +5589,17 @@ "react": ">=15" } }, + "node_modules/react-tag-autocomplete": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/react-tag-autocomplete/-/react-tag-autocomplete-7.0.0.tgz", + "integrity": "sha512-PFxT7fpMB8Au+S9cJYAGRVTnacZpeXybc5SkpTCyuJHmUN1Bt8gHb9vZi3f+aX/eDX44x2WIwYiqfRBi2E5AMg==", + "engines": { + "node": ">= 16.12.0" + }, + "peerDependencies": { + "react": "^18.0.0" + } + }, "node_modules/react-transition-state": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/react-transition-state/-/react-transition-state-2.1.0.tgz", diff --git a/client/package.json b/client/package.json index 1286edaaa9..b67584d5a2 100644 --- a/client/package.json +++ b/client/package.json @@ -22,6 +22,7 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^5.2.0", + "react-tag-autocomplete": "^7.0.0", "reset-css": "^5.0.1", "rooks": "^7.1.1", "tinykeys": "^2.0.0", diff --git a/client/styles/main.scss b/client/styles/main.scss index efd84b1f52..dc14db7739 100644 --- a/client/styles/main.scss +++ b/client/styles/main.scss @@ -16,6 +16,7 @@ $text-color: black; // https://github.com/sass/libsass/issues/2621 --primary: #{$primary}; --primary-contrast: #ffffff; + --text-color-for-primary: #eeeeec; --primary-highlight: #{$primary-highlight}; --primary-highlight-shadow: #{$primary-highlight-shadow}; --text-color: #{$text-color}; @@ -30,6 +31,7 @@ $search-entry-width: 20rem; $search-button-width: 30px; @import 'color-chooser'; +@import 'tags'; html, body { @@ -47,7 +49,8 @@ button { } select, -input { +input, +.react-tags { border: solid 1px #cccccc; background: var(--background-color); color: var(--text-color); @@ -57,7 +60,8 @@ input { } select:focus, -input:focus { +input:not(.react-tags-search-input):focus, +.react-tags.is-focused { color: color.mix($text-color, $primary, 50%); border-color: var(--primary); outline: 0; @@ -719,8 +723,10 @@ span.offline-count.diff { /* sources */ -.source input { +.source input, +.react-tags { width: 60%; + box-sizing: border-box; } .source-title { diff --git a/client/styles/tags.scss b/client/styles/tags.scss new file mode 100644 index 0000000000..43ec43d088 --- /dev/null +++ b/client/styles/tags.scss @@ -0,0 +1,158 @@ +// SPDX-License-Identifier: MIT +// Taken with minor changes from: +// https://github.com/i-like-robots/react-tags/blob/9ac82a9879f53d46759dbd559d8b0a99bcd376ae/example/styles.css +// © 2015 Prakhar Srivastav +// © 2016–2018 Matt Hinchliffe + +/** + *
+ *
+ * + *
+ *
+ *
+ * + *
+ *
+ *
+ *
    + *
  • + * + *
    • + *
  • + * + *
    • + *
+ *
+ *
+ */ + +.react-tags { + position: relative; + display: inline-block; + padding: 3px 0 0 3px; + + /* shared font styles */ + font-size: 1em; + line-height: 1.2; + + /* clicking anywhere will focus the input */ + cursor: text; +} + +.react-tags-selected { + display: inline; +} + +.react-tags-selected-tag { + display: inline-block; + box-sizing: border-box; + margin: 3px; + padding: 3px 4px; + border: 1px solid #d1d1d1; + border-radius: 4px; + background: #f1f1f1; + color: #1f1f1f; + cursor: pointer; + + /* match the font styles */ + font-size: inherit; + line-height: inherit; + + &:hover, + &:focus { + border-color: #b1b1b1; + } +} + +.react-tags-selected-tag::after { + content: '✕'; + color: #aaaaaa; + margin-left: 4px; +} + +.react-tags-search { + display: inline-block; + + /* match tag layout */ + padding: 4px 2px; + margin: 3px 0; + + /* prevent autoresize overflowing the container */ + max-width: 100%; +} + +@media screen and (min-width: 30em) { + .react-tags-search { + /* this will become the offsetParent for suggestions */ + position: relative; + } +} + +.react-tags-search-input { + /* prevent autoresize overflowing the container */ + max-width: 100%; + + /* remove styles and layout from this element */ + margin: 0; + padding: 0; + border: 0; + outline: none; + + /* match the font styles */ + font-size: inherit; + line-height: inherit; +} + +.react-tags-suggestions { + position: absolute; + top: 100%; + left: 0; + width: 100%; +} + +@media screen and (min-width: 30em) { + .react-tags-suggestions { + width: 240px; + } +} + +.react-tags-suggestions ul { + margin: 4px -1px; + padding: 0; + list-style: none; + background: var(--background-color); + color: var(--text-color); + border: 1px solid #d1d1d1; + border-radius: 2px; + box-shadow: 0 2px 3px rgb(0 0 0 / 20%); +} + +.react-tags-suggestions li { + border-bottom: 1px solid #dddddd; + padding: 3px 4px; +} + +.react-tags-suggestions li mark { + text-decoration: underline; + background: none; + font-weight: 600; +} + +.react-tags-suggestions li.is-active { + background: var(--primary-highlight); + color: var(--text-color); +} + +.react-tags-suggestions li:hover { + cursor: pointer; + background: var(--primary); + color: var(--text-color-for-primary); +} + +.react-tags-suggestions li.is-disabled { + opacity: 0.5; + cursor: auto; +} From 80738d649cbcb9eca25bb65b21b8512c77ac8946 Mon Sep 17 00:00:00 2001 From: Jan Tojnar Date: Sun, 16 Jul 2023 12:54:33 +0200 Subject: [PATCH 02/12] fixup! client: Add tag autocomplete --- client/js/templates/Source.jsx | 42 ++++--- client/locale/cs.json | 1 + client/locale/en.json | 1 + client/styles/main.scss | 2 +- client/styles/tags.scss | 214 +++++++++++++++++++-------------- 5 files changed, 146 insertions(+), 114 deletions(-) diff --git a/client/js/templates/Source.jsx b/client/js/templates/Source.jsx index 8bb282bc55..19239c9a3c 100644 --- a/client/js/templates/Source.jsx +++ b/client/js/templates/Source.jsx @@ -2,7 +2,7 @@ import React from 'react'; import { useMemo, useRef } from 'react'; import { Menu, MenuButton, MenuItem } from '@szhsin/react-menu'; import { useHistory, useLocation } from 'react-router-dom'; -import ReactTags from 'react-tag-autocomplete'; +import { ReactTags } from 'react-tag-autocomplete'; import { fadeOut } from '@siteparts/show-hide-effects'; import { makeEntriesLinkLocation } from '../helpers/uri'; import PropTypes from 'prop-types'; @@ -68,7 +68,7 @@ function handleSave({ // Make tags into a list. const tagsList = tags - ? tags.map((tag) => tag.name) + ? tags.map((tag) => tag.label) : []; const values = { @@ -195,7 +195,7 @@ function handleEdit({ event, source, tagInfo, setEditedSource }) { setEditedSource({ id, title: title ? unescape(title) : '', - tags: tags ? tags.map(unescape).map((name) => ({ id: tagInfo[name]?.id, name })) : [], + tags: tags ? tags.map(unescape).map((label) => ({ value: tagInfo[label]?.id, label })) : [], filter, spout, params @@ -316,20 +316,21 @@ function SourceEditForm({ [updateEditedSource] ); - const tagsOnAddition = React.useCallback( + const tagsOnAdd = React.useCallback( (input) => { + // TODO: Paste not working, // We need to handle pasting as well. const tagsToAdd = - typeof input.id !== 'undefined' + typeof input.value !== 'undefined' ? [input] - : input.name + : input.label .split(',') .map((tag) => tag.trim()) .filter((tag) => tag !== '') - .map((tag) => ({ name: tag, id: undefined })); + .map((tag) => ({ label: tag, value: undefined })); updateEditedSource(({ tags }) => { - const usedTagNames = tags.map(({ name }) => name); - const freshTagsToAdd = tagsToAdd.filter((tag) => !usedTagNames.includes(tag.name)); + const usedTagLabels = tags.map(({ label }) => label); + const freshTagsToAdd = tagsToAdd.filter((tag) => !usedTagLabels.includes(tag.label)); if (freshTagsToAdd.length === 0) { // All tags already included, no change. return {}; @@ -409,7 +410,7 @@ function SourceEditForm({ ); const tagSuggestions = useMemo( - () => Object.entries(tagInfo).map(([name, { id }]) => ({ id, name })), + () => Object.entries(tagInfo).map(([label, { id }]) => ({ value: id, label })), [tagInfo] ); @@ -482,20 +483,21 @@ function SourceEditForm({ {sourceErrors['tags'] ? ( {sourceErrors['tags']} diff --git a/client/locale/cs.json b/client/locale/cs.json index 20b2074514..ee49d22103 100644 --- a/client/locale/cs.json +++ b/client/locale/cs.json @@ -43,6 +43,7 @@ "lang_source_title": "Název", "lang_source_autotitle_hint": "Pro automatické vyplnění ponechte prázdné", "lang_source_tags": "Štítky", + "lang_source_tags_create_new": "Vytvořit nový štítek “{0}” a přidat jej.", "lang_source_tags_placeholder": "Přidat nový štítek", "lang_source_tag_remove_button_label": "Klikněte pro odstranění štítku", "lang_source_pwd_placeholder": "Beze změny", diff --git a/client/locale/en.json b/client/locale/en.json index 888e2a1e91..cda8277173 100644 --- a/client/locale/en.json +++ b/client/locale/en.json @@ -56,6 +56,7 @@ "lang_source_title": "Title", "lang_source_autotitle_hint": "Leave empty to fetch title", "lang_source_tags": "Tags", + "lang_source_tags_create_new": "Create a new tag “{0}” and add it.", "lang_source_tags_placeholder": "Add new tag", "lang_source_tag_remove_button_label": "Click to remove tag", "lang_source_pwd_placeholder": "Not changed", diff --git a/client/styles/main.scss b/client/styles/main.scss index dc14db7739..9d36e2bfb6 100644 --- a/client/styles/main.scss +++ b/client/styles/main.scss @@ -60,7 +60,7 @@ input, } select:focus, -input:not(.react-tags-search-input):focus, +input:not(.react-tags__search-input):focus, .react-tags.is-focused { color: color.mix($text-color, $primary, 50%); border-color: var(--primary); diff --git a/client/styles/tags.scss b/client/styles/tags.scss index 43ec43d088..897b80b56b 100644 --- a/client/styles/tags.scss +++ b/client/styles/tags.scss @@ -1,8 +1,7 @@ // SPDX-License-Identifier: MIT // Taken with minor changes from: -// https://github.com/i-like-robots/react-tags/blob/9ac82a9879f53d46759dbd559d8b0a99bcd376ae/example/styles.css -// © 2015 Prakhar Srivastav -// © 2016–2018 Matt Hinchliffe +// https://github.com/i-like-robots/react-tag-autocomplete/blob/de2d9a4b76b7349e44d1e9953fe7c329bf17c162/example/src/styles.css +// SPDX-FileCopyrightText: 2021–2023 Matt Hinchliffe /** *
@@ -30,129 +29,158 @@ */ .react-tags { - position: relative; - display: inline-block; - padding: 3px 0 0 3px; - - /* shared font styles */ - font-size: 1em; - line-height: 1.2; + position: relative; + padding: 0.25rem 0 0 0.25rem; + border: 2px solid #afb8c1; + border-radius: 6px; + background: #ffffff; + /* shared font styles */ + font-size: 1rem; + line-height: 1.2; + /* clicking anywhere will focus the input */ + cursor: text; +} - /* clicking anywhere will focus the input */ - cursor: text; +.react-tags.is-active { + border-color: #4f46e5; } -.react-tags-selected { - display: inline; +.react-tags.is-disabled { + opacity: 0.75; + background-color: #eaeef2; + /* Prevent any clicking on the component */ + pointer-events: none; + cursor: not-allowed; } -.react-tags-selected-tag { - display: inline-block; - box-sizing: border-box; - margin: 3px; - padding: 3px 4px; - border: 1px solid #d1d1d1; - border-radius: 4px; - background: #f1f1f1; - color: #1f1f1f; - cursor: pointer; +.react-tags.is-invalid { + border-color: #fd5956; + box-shadow: 0 0 0 2px rgba(253, 86, 83, 0.25); +} - /* match the font styles */ - font-size: inherit; - line-height: inherit; +.react-tags__label { + position: absolute; + left: -10000px; + top: auto; + width: 1px; + height: 1px; + overflow: hidden; +} - &:hover, - &:focus { - border-color: #b1b1b1; - } +.react-tags__list { + /* Do not use display: contents, it's too buggy */ + display: inline; + padding: 0; } -.react-tags-selected-tag::after { - content: '✕'; - color: #aaaaaa; - margin-left: 4px; +.react-tags__list-item { + display: inline; + list-style: none; } -.react-tags-search { - display: inline-block; +.react-tags__tag { + margin: 0 0.25rem 0.25rem 0; + padding: 0.375rem 0.5rem; + border: 0; + border-radius: 3px; + background: #eaeef2; + /* match the font styles */ + font-size: inherit; + line-height: inherit; +} - /* match tag layout */ - padding: 4px 2px; - margin: 3px 0; +.react-tags__tag:hover { + color: #ffffff; + background-color: #4f46e5; +} - /* prevent autoresize overflowing the container */ - max-width: 100%; +.react-tags__tag::after { + content: ''; + display: inline-block; + width: 0.65rem; + height: 0.65rem; + clip-path: polygon(10% 0, 0 10%, 40% 50%, 0 90%, 10% 100%, 50% 60%, 90% 100%, 100% 90%, 60% 50%, 100% 10%, 90% 0, 50% 40%); + margin-left: 0.5rem; + font-size: 0.875rem; + background-color: #7c7d86; } -@media screen and (min-width: 30em) { - .react-tags-search { - /* this will become the offsetParent for suggestions */ - position: relative; - } +.react-tags__tag:hover::after { + background-color: #ffffff; } -.react-tags-search-input { - /* prevent autoresize overflowing the container */ - max-width: 100%; +.react-tags__combobox { + display: inline-block; + /* match tag layout */ + padding: 0.375rem 0.25rem; + margin-bottom: 0.25rem; + /* prevents autoresize overflowing the container */ + max-width: 100%; +} - /* remove styles and layout from this element */ - margin: 0; - padding: 0; - border: 0; - outline: none; +.react-tags__combobox-input { + /* prevent autoresize overflowing the container */ + max-width: 100%; + /* remove styles and layout from this element */ + margin: 0; + padding: 0; + border: 0; + outline: none; + background: none; + /* match the font styles */ + font-size: inherit; + line-height: inherit; +} - /* match the font styles */ - font-size: inherit; - line-height: inherit; +.react-tags__combobox-input::placeholder { + color: #7c7d86; + opacity: 1; } -.react-tags-suggestions { - position: absolute; - top: 100%; - left: 0; - width: 100%; +.react-tags__listbox { + position: absolute; + z-index: 1; + top: calc(100% + 5px); + /* Negate the border width on the container */ + left: -2px; + right: -2px; + max-height: 12.5rem; + overflow-y: auto; + background: #ffffff; + border: 1px solid #afb8c1; + border-radius: 6px; + box-shadow: rgba(0, 0, 0, 0.1) 0 10px 15px -4px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px; } -@media screen and (min-width: 30em) { - .react-tags-suggestions { - width: 240px; - } +.react-tags__listbox-option { + padding: 0.375rem 0.5rem; } -.react-tags-suggestions ul { - margin: 4px -1px; - padding: 0; - list-style: none; - background: var(--background-color); - color: var(--text-color); - border: 1px solid #d1d1d1; - border-radius: 2px; - box-shadow: 0 2px 3px rgb(0 0 0 / 20%); +.react-tags__listbox-option:hover { + cursor: pointer; + background: #eaeef2; } -.react-tags-suggestions li { - border-bottom: 1px solid #dddddd; - padding: 3px 4px; +.react-tags__listbox-option:not([aria-disabled='true']).is-active { + background: #4f46e5; + color: #ffffff; } -.react-tags-suggestions li mark { - text-decoration: underline; - background: none; - font-weight: 600; +.react-tags__listbox-option[aria-disabled='true'] { + color: #7c7d86; + cursor: not-allowed; + pointer-events: none; } -.react-tags-suggestions li.is-active { - background: var(--primary-highlight); - color: var(--text-color); +.react-tags__listbox-option[aria-selected='true']::after { + content: '✓'; + margin-left: 0.5rem; } -.react-tags-suggestions li:hover { - cursor: pointer; - background: var(--primary); - color: var(--text-color-for-primary); +.react-tags__listbox-option[aria-selected='true']:not(.is-active)::after { + color: #4f46e5; } -.react-tags-suggestions li.is-disabled { - opacity: 0.5; - cursor: auto; +.react-tags__listbox-option-highlight { + background-color: #ffdd00; } From df8af454add1f0f6a3f3a83013389f56240bd300 Mon Sep 17 00:00:00 2001 From: Jan Tojnar Date: Sun, 16 Jul 2023 14:21:23 +0200 Subject: [PATCH 03/12] client: Use existing tag colours in source editor --- client/js/templates/Source.jsx | 39 ++++++++++++++++++++++++++++- client/js/templates/SourcesPage.jsx | 25 +++++++++++++++++- 2 files changed, 62 insertions(+), 2 deletions(-) diff --git a/client/js/templates/Source.jsx b/client/js/templates/Source.jsx index 19239c9a3c..942ca8163e 100644 --- a/client/js/templates/Source.jsx +++ b/client/js/templates/Source.jsx @@ -192,10 +192,20 @@ function handleEdit({ event, source, tagInfo, setEditedSource }) { const { id, title, tags, filter, spout, params } = source; + const newTags = + tags + ? tags.map(unescape).map((label) => ({ + value: tagInfo[label]?.id, + label, + color: tagInfo[label]?.color, + foregroundColor: tagInfo[label]?.foregroundColor + })) + : []; + setEditedSource({ id, title: title ? unescape(title) : '', - tags: tags ? tags.map(unescape).map((label) => ({ value: tagInfo[label]?.id, label })) : [], + tags: newTags, filter, spout, params @@ -262,6 +272,32 @@ function daysAgo(date) { return Math.floor((today - old) / MS_PER_DAY); } + +function Tag({ classNames, removeButtonText, onDelete, tag }) { + return ( + + ); +} + +Tag.propTypes = { + classNames: PropTypes.object.isRequired, + removeButtonText: PropTypes.string.isRequired, + onDelete: PropTypes.func.isRequired, + tag: PropTypes.object.isRequired, +}; + + const reactTagsClassNames = { root: 'react-tags', rootFocused: 'is-focused', @@ -498,6 +534,7 @@ function SourceEditForm({ deleteButtonText={_('source_tag_remove_button_label')} // classNames={reactTagsClassNames} delimiterKeys={['Enter', 'Tab', ',']} + renderTag={Tag} /> {sourceErrors['tags'] ? ( {sourceErrors['tags']} diff --git a/client/js/templates/SourcesPage.jsx b/client/js/templates/SourcesPage.jsx index 8c1b5be943..9f55e6edfc 100644 --- a/client/js/templates/SourcesPage.jsx +++ b/client/js/templates/SourcesPage.jsx @@ -91,6 +91,27 @@ function loadSources({ abortController, location, setSpouts, setSources, setLoad }); } + +/** + * Get dark OR bright color depending the color contrast. + * + * @param {string} color color (hex) value + * @param {string} darkColor dark color value + * @param {string} brightColor bright color value + * + * @return {string} dark OR bright color value + * + * @see https://24ways.org/2010/calculating-color-contrast/ + */ +function getContrastYiq(hexcolor, darkColor = '#555', brightColor = '#eee') { + const r = parseInt(hexcolor.substr(1 + 0, 2), 16); + const g = parseInt(hexcolor.substr(1 + 2, 2), 16); + const b = parseInt(hexcolor.substr(1 + 4, 2), 16); + const yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000; + return (yiq >= 128) ? darkColor : brightColor; +} + + export default function SourcesPage({ tags }) { const [spouts, setSpouts] = React.useState([]); const [sources, setSources] = React.useState([]); @@ -99,10 +120,12 @@ export default function SourcesPage({ tags }) { let maxTagId = 1; let info = {}; - tags.forEach(({ tag }) => { + tags.forEach(({ tag, color }) => { if (typeof info[tag] === 'undefined') { info[tag] = { id: maxTagId++, + color, + foregroundColor: getContrastYiq(color.substr()), }; } }); From 347fe3d60be7e5f7afd3ec812069f0c7ace4cf07 Mon Sep 17 00:00:00 2001 From: Jan Tojnar Date: Sun, 16 Jul 2023 14:33:33 +0200 Subject: [PATCH 04/12] fixup! client: Add tag autocomplete --- client/js/templates/Source.jsx | 25 ++++++++++++++----------- client/styles/main.scss | 4 ++-- 2 files changed, 16 insertions(+), 13 deletions(-) diff --git a/client/js/templates/Source.jsx b/client/js/templates/Source.jsx index 942ca8163e..b2202cafdf 100644 --- a/client/js/templates/Source.jsx +++ b/client/js/templates/Source.jsx @@ -300,17 +300,20 @@ Tag.propTypes = { const reactTagsClassNames = { root: 'react-tags', - rootFocused: 'is-focused', - selected: 'react-tags-selected', - selectedTag: 'react-tags-selected-tag', - selectedTagName: 'react-tags-selected-tag-name', - search: 'react-tags-search', - searchWrapper: 'react-tags-search-wrapper', - searchInput: 'react-tags-search-input', - suggestions: 'react-tags-suggestions', - suggestionActive: 'is-active', - suggestionDisabled: 'is-disabled', - suggestionPrefix: 'react-tags-suggestion-prefix' + rootIsActive: 'is-active', + rootIsDisabled: 'is-disabled', + rootIsInvalid: 'is-invalid', + label: 'react-tags-label', + tagList: 'react-tags-list', + tagListItem: 'react-tags-list-item', + tag: 'react-tags-tag', + tagName: 'react-tags-tag-name', + comboBox: 'react-tags-combobox', + input: 'react-tags-combobox-input', + listBox: 'react-tags-list-box', + option: 'react-tags-list-box-option', + optionIsActive: 'is-active', + highligh: 'react-tags-listbox-option-highlight', }; function SourceEditForm({ diff --git a/client/styles/main.scss b/client/styles/main.scss index 9d36e2bfb6..233edd2786 100644 --- a/client/styles/main.scss +++ b/client/styles/main.scss @@ -60,8 +60,8 @@ input, } select:focus, -input:not(.react-tags__search-input):focus, -.react-tags.is-focused { +input:not(.react-tags__input):focus, +.react-tags.is-active { color: color.mix($text-color, $primary, 50%); border-color: var(--primary); outline: 0; From 25fe6fc17a5a049b7c3e50c6a696af78732ff345 Mon Sep 17 00:00:00 2001 From: Jan Tojnar Date: Sun, 16 Jul 2023 14:33:49 +0200 Subject: [PATCH 05/12] fixup! client: Use existing tag colours in source editor --- client/js/templates/Source.jsx | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/client/js/templates/Source.jsx b/client/js/templates/Source.jsx index b2202cafdf..5cd2fa0074 100644 --- a/client/js/templates/Source.jsx +++ b/client/js/templates/Source.jsx @@ -273,28 +273,26 @@ function daysAgo(date) { } -function Tag({ classNames, removeButtonText, onDelete, tag }) { +function Tag({ classNames, tag, tagProps }) { return ( ); } Tag.propTypes = { classNames: PropTypes.object.isRequired, - removeButtonText: PropTypes.string.isRequired, - onDelete: PropTypes.func.isRequired, tag: PropTypes.object.isRequired, + tagProps: PropTypes.object.isRequired, }; From 7a2376f416c765de23c3f2b4fdef6c5b6cbcad31 Mon Sep 17 00:00:00 2001 From: Jan Tojnar Date: Sun, 16 Jul 2023 14:48:40 +0200 Subject: [PATCH 06/12] fixup! client: Add tag autocomplete --- client/styles/main.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/styles/main.scss b/client/styles/main.scss index 233edd2786..ce313733d3 100644 --- a/client/styles/main.scss +++ b/client/styles/main.scss @@ -60,7 +60,7 @@ input, } select:focus, -input:not(.react-tags__input):focus, +input:not(.react-tags__combobox-input):focus, .react-tags.is-active { color: color.mix($text-color, $primary, 50%); border-color: var(--primary); From fdf3983658ca988d3555a8ff0a5cfc83b1a62b0e Mon Sep 17 00:00:00 2001 From: Jan Tojnar Date: Sun, 16 Jul 2023 14:55:58 +0200 Subject: [PATCH 07/12] fixup! client: Use existing tag colours in source editor --- client/js/templates/Source.jsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/client/js/templates/Source.jsx b/client/js/templates/Source.jsx index 5cd2fa0074..14ec05c679 100644 --- a/client/js/templates/Source.jsx +++ b/client/js/templates/Source.jsx @@ -273,7 +273,7 @@ function daysAgo(date) { } -function Tag({ classNames, tag, tagProps }) { +function Tag({ classNames, tag, ...tagProps }) { return ( ); diff --git a/client/js/templates/SourcesPage.jsx b/client/js/templates/SourcesPage.jsx index 9f55e6edfc..8259efc921 100644 --- a/client/js/templates/SourcesPage.jsx +++ b/client/js/templates/SourcesPage.jsx @@ -92,26 +92,6 @@ function loadSources({ abortController, location, setSpouts, setSources, setLoad } -/** - * Get dark OR bright color depending the color contrast. - * - * @param {string} color color (hex) value - * @param {string} darkColor dark color value - * @param {string} brightColor bright color value - * - * @return {string} dark OR bright color value - * - * @see https://24ways.org/2010/calculating-color-contrast/ - */ -function getContrastYiq(hexcolor, darkColor = '#555', brightColor = '#eee') { - const r = parseInt(hexcolor.substr(1 + 0, 2), 16); - const g = parseInt(hexcolor.substr(1 + 2, 2), 16); - const b = parseInt(hexcolor.substr(1 + 4, 2), 16); - const yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000; - return (yiq >= 128) ? darkColor : brightColor; -} - - export default function SourcesPage({ tags }) { const [spouts, setSpouts] = React.useState([]); const [sources, setSources] = React.useState([]); @@ -125,7 +105,6 @@ export default function SourcesPage({ tags }) { info[tag] = { id: maxTagId++, color, - foregroundColor: getContrastYiq(color.substr()), }; } }); diff --git a/client/styles/tags.scss b/client/styles/tags.scss index 897b80b56b..1c63faea92 100644 --- a/client/styles/tags.scss +++ b/client/styles/tags.scss @@ -78,6 +78,13 @@ list-style: none; } +.react-tags .color { + display: inline-block; + width: 0.625rem; + height: 0.625rem; + border-radius: 2px; +} + .react-tags__tag { margin: 0 0.25rem 0.25rem 0; padding: 0.375rem 0.5rem; From 4695698add7776c1dae84339d46693f167dcd717 Mon Sep 17 00:00:00 2001 From: Jan Tojnar Date: Fri, 21 Jan 2022 12:55:25 +0100 Subject: [PATCH 09/12] client: Show colours next to suggestions in source editor --- client/js/templates/Source.jsx | 50 +++++++++++++++++++++++++++++----- 1 file changed, 43 insertions(+), 7 deletions(-) diff --git a/client/js/templates/Source.jsx b/client/js/templates/Source.jsx index bf2a67601c..e39625c02c 100644 --- a/client/js/templates/Source.jsx +++ b/client/js/templates/Source.jsx @@ -272,6 +272,22 @@ function daysAgo(date) { } +function ColorBox({ color }) { + return ( + + ); +} + +ColorBox.propTypes = { + color: nullable(PropTypes.string).isRequired, +}; + + function Tag({ classNames, tag, ...tagProps }) { return ( @@ -301,6 +312,30 @@ Tag.propTypes = { }; +function TagOption({ children, classNames, option, ...optionProps }) { + const classes = [ + classNames.option, + option.active ? 'is-active' : '', + option.selected ? 'is-selected' : '', + ]; + + return ( +
+ + {' '} + {children} +
+ ); +} + +TagOption.propTypes = { + classNames: PropTypes.object.isRequired, + tag: PropTypes.object.isRequired, + children: PropTypes.any.isRequired, + // TODO: Add extra proptypes. +}; + + const reactTagsClassNames = { root: 'react-tags', rootIsActive: 'is-active', @@ -452,7 +487,7 @@ function SourceEditForm({ ); const tagSuggestions = useMemo( - () => Object.entries(tagInfo).map(([label, { id }]) => ({ value: id, label })), + () => Object.entries(tagInfo).map(([label, { id, color }]) => ({ value: id, label, color })), [tagInfo] ); @@ -541,6 +576,7 @@ function SourceEditForm({ // classNames={reactTagsClassNames} delimiterKeys={['Enter', 'Tab', ',']} renderTag={Tag} + renderOption={TagOption} /> {sourceErrors['tags'] ? ( {sourceErrors['tags']} From d22abe88e16a44be31091c9dd465439f19ec123f Mon Sep 17 00:00:00 2001 From: Jan Tojnar Date: Sat, 22 Jan 2022 05:39:00 +0100 Subject: [PATCH 10/12] client: Use color from top-level tags in source editor tag input This will make tags added to a source have access to colour despite https://github.com/i-like-robots/react-tags/pull/260 not being merged. Additionally, this will also update the colors when the tags are updated. --- client/js/templates/Source.jsx | 104 +++++++++++++++++++-------------- 1 file changed, 61 insertions(+), 43 deletions(-) diff --git a/client/js/templates/Source.jsx b/client/js/templates/Source.jsx index e39625c02c..8087b7e896 100644 --- a/client/js/templates/Source.jsx +++ b/client/js/templates/Source.jsx @@ -287,54 +287,61 @@ ColorBox.propTypes = { color: nullable(PropTypes.string).isRequired, }; +function mkTag(tagInfo) { + function Tag({ classNames, tag, ...tagProps }) { + return ( + + ); + } -function Tag({ classNames, tag, ...tagProps }) { - return ( - - ); + Tag.propTypes = { + classNames: PropTypes.object.isRequired, + tag: PropTypes.object.isRequired, + tagProps: PropTypes.object.isRequired, + 'aria-disabled': PropTypes.bool.isRequired, + title: PropTypes.string.isRequired, + onClick: PropTypes.func.isRequired, + }; + + return Tag; } -Tag.propTypes = { - classNames: PropTypes.object.isRequired, - tag: PropTypes.object.isRequired, - tagProps: PropTypes.object.isRequired, - 'aria-disabled': PropTypes.bool.isRequired, - title: PropTypes.string.isRequired, - onClick: PropTypes.func.isRequired, -}; +function mkTagOption(tagInfo) { + function TagOption({ children, classNames, option, ...optionProps }) { + const classes = [ + classNames.option, + option.active ? 'is-active' : '', + option.selected ? 'is-selected' : '', + ]; + + return ( +
+ + {' '} + {children} +
+ ); + } -function TagOption({ children, classNames, option, ...optionProps }) { - const classes = [ - classNames.option, - option.active ? 'is-active' : '', - option.selected ? 'is-selected' : '', - ]; + TagOption.propTypes = { + classNames: PropTypes.object.isRequired, + tag: PropTypes.object.isRequired, + children: PropTypes.any.isRequired, + // TODO: Add extra proptypes. + }; - return ( -
- - {' '} - {children} -
- ); + return TagOption; } -TagOption.propTypes = { - classNames: PropTypes.object.isRequired, - tag: PropTypes.object.isRequired, - children: PropTypes.any.isRequired, - // TODO: Add extra proptypes. -}; - const reactTagsClassNames = { root: 'react-tags', @@ -487,7 +494,7 @@ function SourceEditForm({ ); const tagSuggestions = useMemo( - () => Object.entries(tagInfo).map(([label, { id, color }]) => ({ value: id, label, color })), + () => Object.entries(tagInfo).map(([label, { id }]) => ({ value: id, label })), [tagInfo] ); @@ -530,6 +537,17 @@ function SourceEditForm({ const reactTags = useRef(); + const { + tagComponent, + tagOptionComponent, + } = useMemo( + () => ({ + tagComponent: mkTag(tagInfo), + tagOptionComponent: mkTagOption(tagInfo), + }), + [tagInfo] + ); + return (
    @@ -575,8 +593,8 @@ function SourceEditForm({ deleteButtonText={_('source_tag_remove_button_label')} // classNames={reactTagsClassNames} delimiterKeys={['Enter', 'Tab', ',']} - renderTag={Tag} - renderOption={TagOption} + renderTag={tagComponent} + renderOption={tagOptionComponent} /> {sourceErrors['tags'] ? ( {sourceErrors['tags']} From d7cd1e8bf072ccef53ed471c483642e6c0367c16 Mon Sep 17 00:00:00 2001 From: Jan Tojnar Date: Sat, 22 Jan 2022 06:16:18 +0100 Subject: [PATCH 11/12] client: Add tag on blur in source editor --- client/js/templates/Source.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/client/js/templates/Source.jsx b/client/js/templates/Source.jsx index 8087b7e896..53ed95b09d 100644 --- a/client/js/templates/Source.jsx +++ b/client/js/templates/Source.jsx @@ -588,6 +588,7 @@ function SourceEditForm({ onAdd={tagsOnAdd} allowNew={true} // minQueryLength={1} + // addOnBlur={true} placeholderText={_('source_tags_placeholder')} newOptionText={_('source_tags_create_new').replace('{0}', '%value%')} deleteButtonText={_('source_tag_remove_button_label')} From 10a32dc06c95d5cd1ef599666b6de7b2edf3ff91 Mon Sep 17 00:00:00 2001 From: Jan Tojnar Date: Sun, 16 Jul 2023 16:53:33 +0200 Subject: [PATCH 12/12] fixup! client: Add tag autocomplete --- NEWS.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/NEWS.md b/NEWS.md index 78ee7287a6..efc03cb349 100644 --- a/NEWS.md +++ b/NEWS.md @@ -11,7 +11,7 @@ - Sources can be filtered based on item’s author, URL or categories. ([#1423](https://github.com/fossar/selfoss/pull/1423), [#1424](https://github.com/fossar/selfoss/pull/1424)) - Source filter expression is now validated whenever a source is modified. ([#1423](https://github.com/fossar/selfoss/pull/1423)) - Garbage collection can be completely disabled by setting `items_lifetime=0`. -- Tags are now autocompleted when editing a new source. ([#1311](https://github.com/fossar/selfoss/pull/1311), [#669](https://github.com/fossar/selfoss/issues/669)) +- Tags are now autocompleted when editing a new source. ([#1445](https://github.com/fossar/selfoss/pull/1445), [#669](https://github.com/fossar/selfoss/issues/669)) ### Bug fixes - Configuration parser was changed to *raw* method, which relaxes the requirement to quote option values containing special characters in `config.ini`. ([#1371](https://github.com/fossar/selfoss/issues/1371))