From a7dd7bbfa46a97db77b110b466dd6ba96218346b Mon Sep 17 00:00:00 2001 From: Jan Tojnar Date: Sun, 30 May 2021 03:58:47 +0200 Subject: [PATCH 1/2] client: Extract colorchooser into a separate component --- assets/js/templates/ColorChooser.jsx | 37 +++++++++++++++++ assets/js/templates/NavTags.jsx | 62 ++++++++-------------------- 2 files changed, 54 insertions(+), 45 deletions(-) create mode 100644 assets/js/templates/ColorChooser.jsx diff --git a/assets/js/templates/ColorChooser.jsx b/assets/js/templates/ColorChooser.jsx new file mode 100644 index 0000000000..445bcfd6be --- /dev/null +++ b/assets/js/templates/ColorChooser.jsx @@ -0,0 +1,37 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +export default function ColorChooser({tag, onChange}) { + const colorChooser = React.useRef(null); + + React.useLayoutEffect(() => { + // init colorpicker + const picker = colorChooser.current; + $(picker).spectrum({ + showPaletteOnly: true, + color: 'blanchedalmond', + palette: [ + ['#ffccc9', '#ffce93', '#fffc9e', '#ffffc7', '#9aff99', '#96fffb', '#cdffff', '#cbcefb', '#fffe65', '#cfcfcf', '#fd6864', '#fe996b', '#fcff2f', '#67fd9a', '#38fff8', '#68fdff', '#9698ed', '#c0c0c0', '#fe0000', '#f8a102', '#ffcc67', '#f8ff00', '#34ff34', '#68cbd0', '#34cdf9', '#6665cd', '#9b9b9b', '#cb0000', '#f56b00', '#ffcb2f', '#ffc702', '#32cb00', '#00d2cb', '#3166ff', '#6434fc', '#656565', '#9a0000', '#ce6301', '#cd9934', '#999903', '#009901', '#329a9d', '#3531ff', '#6200c9', '#343434', '#680100', '#963400', '#986536', '#646809', '#036400', '#34696d', '#00009b', '#303498', '#000000', '#330001', '#643403', '#663234', '#343300', '#013300', '#003532', '#010066', '#340096'] + ], + change: onChange, + }); + + return () => { + $(picker).spectrum('destroy'); + }; + }, [onChange]); + + const style = React.useMemo( + () => ({ backgroundColor: tag.color }), + [tag.color] + ); + + return ( + + ); +} + +ColorChooser.propTypes = { + tag: PropTypes.object.isRequired, + onChange: PropTypes.func.isRequired, +}; diff --git a/assets/js/templates/NavTags.jsx b/assets/js/templates/NavTags.jsx index 61b28241cf..82cfdb226d 100644 --- a/assets/js/templates/NavTags.jsx +++ b/assets/js/templates/NavTags.jsx @@ -5,59 +5,31 @@ import { Link, useLocation, useRouteMatch } from 'react-router-dom'; import classNames from 'classnames'; import { unescape } from 'html-escaper'; import { makeEntriesLink, ENTRIES_ROUTE_PATTERN } from '../helpers/uri'; +import ColorChooser from './ColorChooser'; import { updateTag } from '../requests/tags'; import Collapse from '@kunukn/react-collapse'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import * as icons from '../icons'; import { LocalizationContext } from '../helpers/i18n'; -function ColorChooser({tag}) { - const colorChooser = React.useRef(null); - - React.useLayoutEffect(() => { - // init colorpicker - const picker = colorChooser.current; - $(picker).spectrum({ - showPaletteOnly: true, - color: 'blanchedalmond', - palette: [ - ['#ffccc9', '#ffce93', '#fffc9e', '#ffffc7', '#9aff99', '#96fffb', '#cdffff', '#cbcefb', '#fffe65', '#cfcfcf', '#fd6864', '#fe996b', '#fcff2f', '#67fd9a', '#38fff8', '#68fdff', '#9698ed', '#c0c0c0', '#fe0000', '#f8a102', '#ffcc67', '#f8ff00', '#34ff34', '#68cbd0', '#34cdf9', '#6665cd', '#9b9b9b', '#cb0000', '#f56b00', '#ffcb2f', '#ffc702', '#32cb00', '#00d2cb', '#3166ff', '#6434fc', '#656565', '#9a0000', '#ce6301', '#cd9934', '#999903', '#009901', '#329a9d', '#3531ff', '#6200c9', '#343434', '#680100', '#963400', '#986536', '#646809', '#036400', '#34696d', '#00009b', '#303498', '#000000', '#330001', '#643403', '#663234', '#343300', '#013300', '#003532', '#010066', '#340096'] - ], - change: function(color) { - updateTag( - tag.tag, - color.toHexString() - ).then(() => { - selfoss.entriesPage?.reloadList(); - }).catch((error) => { - selfoss.app.showError(selfoss.app._('error_saving_color') + ' ' + error.message); - }); - - } - }); - - return () => { - $(picker).spectrum('destroy'); - }; - }, [tag.tag]); - - const style = React.useMemo( - () => ({ backgroundColor: tag.color }), - [tag.color] - ); - - return ( - - ); -} - -ColorChooser.propTypes = { - tag: PropTypes.object.isRequired, -}; - function Tag({ tag, active, collapseNav }) { const location = useLocation(); const _ = React.useContext(LocalizationContext); + const tagName = tag !== null ? tag.tag : null; + + const colorChanged = React.useCallback( + (color) => { + updateTag( + tagName, + color.toHexString() + ).then(() => { + selfoss.entriesPage?.reloadList(); + }).catch((error) => { + selfoss.app.showError(selfoss.app._('error_saving_color') + ' ' + error.message); + }); + }, + [tagName] + ); return (
  • {tag.unread > 0 ? tag.unread : ''} - + )} From 57225ee94198ed277891d77aec4c93be37779854 Mon Sep 17 00:00:00 2001 From: Jan Tojnar Date: Sun, 30 May 2021 05:19:41 +0200 Subject: [PATCH 2/2] client: make spectrum respect changed the current color MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit For some reason, the initial value is no longer taken from the background colour (if it ever was). Let’s pass the colour to spectrum to have it selected instead of the terrible hardcoded colour. The downside is that changing a colour (and closing the popover) will cause the spectrum instance to be torn down and re-created. But the other simple alternative of caching the initial colour using React.useState would prevent updating the selected value from tag synchronization API response. --- NEWS.md | 1 + assets/js/templates/ColorChooser.jsx | 4 ++-- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/NEWS.md b/NEWS.md index 436e7cc554..17e9b1b80f 100644 --- a/NEWS.md +++ b/NEWS.md @@ -34,6 +34,7 @@ - Fixed loading full text on pages containing ampersands in URLs ([#1188](https://github.com/fossar/selfoss/pull/1188)) - Fixed missing styling in article contents ([#1221](https://github.com/fossar/selfoss/pull/1221)) - Golem, Lightreading and Heise spouts now use Graby for extracting article contents instead of our own defunct extraction rules. ([#1245](https://github.com/fossar/selfoss/pull/1245)) +- The tag colour picker now pre-selects the current colour instead of a placeholder colour. ([#1269](https://github.com/fossar/selfoss/pull/1269)) ### API changes - `tags` attribute is now consistently array of strings, numbers are numbers and booleans are booleans. **This might break third-party clients that have not updated yet.** ([#948](https://github.com/fossar/selfoss/pull/948)) diff --git a/assets/js/templates/ColorChooser.jsx b/assets/js/templates/ColorChooser.jsx index 445bcfd6be..213bb5b162 100644 --- a/assets/js/templates/ColorChooser.jsx +++ b/assets/js/templates/ColorChooser.jsx @@ -9,7 +9,7 @@ export default function ColorChooser({tag, onChange}) { const picker = colorChooser.current; $(picker).spectrum({ showPaletteOnly: true, - color: 'blanchedalmond', + color: tag.color, palette: [ ['#ffccc9', '#ffce93', '#fffc9e', '#ffffc7', '#9aff99', '#96fffb', '#cdffff', '#cbcefb', '#fffe65', '#cfcfcf', '#fd6864', '#fe996b', '#fcff2f', '#67fd9a', '#38fff8', '#68fdff', '#9698ed', '#c0c0c0', '#fe0000', '#f8a102', '#ffcc67', '#f8ff00', '#34ff34', '#68cbd0', '#34cdf9', '#6665cd', '#9b9b9b', '#cb0000', '#f56b00', '#ffcb2f', '#ffc702', '#32cb00', '#00d2cb', '#3166ff', '#6434fc', '#656565', '#9a0000', '#ce6301', '#cd9934', '#999903', '#009901', '#329a9d', '#3531ff', '#6200c9', '#343434', '#680100', '#963400', '#986536', '#646809', '#036400', '#34696d', '#00009b', '#303498', '#000000', '#330001', '#643403', '#663234', '#343300', '#013300', '#003532', '#010066', '#340096'] ], @@ -19,7 +19,7 @@ export default function ColorChooser({tag, onChange}) { return () => { $(picker).spectrum('destroy'); }; - }, [onChange]); + }, [onChange, tag.color]); const style = React.useMemo( () => ({ backgroundColor: tag.color }),