From 938f85e2c577b69cd4459b891644291052613a64 Mon Sep 17 00:00:00 2001 From: Dlurak <84224239+Dlurak@users.noreply.github.com> Date: Tue, 24 Sep 2024 16:38:18 +0200 Subject: [PATCH] FeaturePanel: Highlight colours (#591) --- .../Properties/TagsTableInner.tsx | 13 +++- .../FeaturePanel/Properties/renderValue.tsx | 16 ++++- .../PublicTransport/LineNumber.tsx | 62 +------------------ src/components/FeaturePanel/helpers/color.ts | 59 ++++++++++++++++++ .../SearchBox/options/openstreetmap.tsx | 2 +- 5 files changed, 89 insertions(+), 63 deletions(-) create mode 100644 src/components/FeaturePanel/helpers/color.ts diff --git a/src/components/FeaturePanel/Properties/TagsTableInner.tsx b/src/components/FeaturePanel/Properties/TagsTableInner.tsx index 6571f70f0..7f6230194 100644 --- a/src/components/FeaturePanel/Properties/TagsTableInner.tsx +++ b/src/components/FeaturePanel/Properties/TagsTableInner.tsx @@ -6,6 +6,7 @@ import { InlineEditButton } from '../helpers/InlineEditButton'; import { buildAddress } from '../../../services/helpers'; import { ToggleButton } from '../helpers/ToggleButton'; import { renderValue } from './renderValue'; +import { Position } from '../../../services/types'; const isAddr = (k) => k.match(/^addr:|uir_adr|:addr/); const isName = (k) => k.match(/^name(:|$)/); @@ -59,7 +60,17 @@ const TagsGroup = ({ tags, label, value, hideArrow = false }) => { // TODO make it dynamic - count how many "first parts before :" are there, and group all >= 2 -export const TagsTableInner = ({ tags, center, except = [] }) => { +type TagsTableInnerProps = { + tags: Record; + center: Position; + except?: string[]; +}; + +export const TagsTableInner = ({ + tags, + center, + except = [], +}: TagsTableInnerProps) => { const tagsEntries = Object.entries(tags).filter(([k]) => !except.includes(k)); const addrs = tagsEntries.filter(([k]) => isAddr(k)); diff --git a/src/components/FeaturePanel/Properties/renderValue.tsx b/src/components/FeaturePanel/Properties/renderValue.tsx index 01ec4d657..dee406110 100644 --- a/src/components/FeaturePanel/Properties/renderValue.tsx +++ b/src/components/FeaturePanel/Properties/renderValue.tsx @@ -1,6 +1,8 @@ import React from 'react'; import { getUrlForTag } from './getUrlForTag'; import { slashToOptionalBr } from '../../helpers'; +import { osmColorToHex, whiteOrBlackText } from '../helpers/color'; +import styled from '@emotion/styled'; const getEllipsisHumanUrl = (humanUrl) => { const MAX_LENGTH = 40; @@ -42,9 +44,21 @@ const getHumanValue = (k, v, featured: boolean) => { return humanValue; }; -export const renderValue = (k, v, featured = false) => { +const ColorValue = styled.div<{ v: string }>` + background-color: ${({ v }) => osmColorToHex(v)}; + color: ${({ v }) => whiteOrBlackText(osmColorToHex(v))}; + padding: 0.2rem 0.4rem; + border-radius: 0.125rem; + display: inline; +`; + +export const renderValue = (k: string, v: string, featured = false) => { const url = getUrlForTag(k, v); const humanValue = getHumanValue(k, v, featured); + if (k === 'colour') { + return {humanValue}; + } + return url ? {slashToOptionalBr(humanValue)} : humanValue; }; diff --git a/src/components/FeaturePanel/PublicTransport/LineNumber.tsx b/src/components/FeaturePanel/PublicTransport/LineNumber.tsx index cb3383fc8..2c5e30a99 100644 --- a/src/components/FeaturePanel/PublicTransport/LineNumber.tsx +++ b/src/components/FeaturePanel/PublicTransport/LineNumber.tsx @@ -1,68 +1,10 @@ import React from 'react'; import { useUserThemeContext } from '../../../helpers/theme'; import styled from '@emotion/styled'; - -/** - * A function to map a color name to hex. When a color is not found, it is returned as is, the same goes for hex colors. - * @param color The color to map to hex - * @returns The color in hex format, e.g. #ff0000 - */ -function mapColorToHex(color: string) { - switch (color.toLowerCase()) { - case 'black': - return '#000000'; - case 'gray': - case 'grey': - return '#808080'; - case 'maroon': - return '#800000'; - case 'olive': - return '#808000'; - case 'green': - return '#008000'; - case 'teal': - return '#008080'; - case 'navy': - return '#000080'; - case 'purple': - return '#800080'; - case 'white': - return '#ffffff'; - case 'silver': - return '#c0c0c0'; - case 'red': - return '#ff0000'; - case 'yellow': - return '#ffff00'; - case 'lime': - return '#00ff00'; - case 'aqua': - case 'cyan': - return '#00ffff'; - case 'blue': - return '#0000ff'; - case 'fuchsia': - case 'magenta': - return '#ff00ff'; - default: - return color; - } -} -/** - * A function to determine whether the text color should be black or white - * @param hexBgColor The background color in hex format, e.g. #ff0000 - * @returns 'black' or 'white' depending on the brightness of the background color - */ -function whiteOrBlackText(hexBgColor: string) { - const r = parseInt(hexBgColor.slice(1, 3), 16); - const g = parseInt(hexBgColor.slice(3, 5), 16); - const b = parseInt(hexBgColor.slice(5, 7), 16); - const brightness = (r * 299 + g * 587 + b * 114) / 1000; - return brightness > 125 ? 'black' : 'white'; -} +import { osmColorToHex, whiteOrBlackText } from '../helpers/color'; const getBgColor = (color: string | undefined, darkmode: boolean) => { - if (color) return mapColorToHex(color); + if (color) return osmColorToHex(color); return darkmode ? '#898989' : '#dddddd'; }; diff --git a/src/components/FeaturePanel/helpers/color.ts b/src/components/FeaturePanel/helpers/color.ts new file mode 100644 index 000000000..2bf3c311b --- /dev/null +++ b/src/components/FeaturePanel/helpers/color.ts @@ -0,0 +1,59 @@ +/** + * A function to map a color name to hex. When a color is not found, it is returned as is, the same goes for hex colors. + * @param color The color to map to hex + * @returns The color in hex format, e.g. #ff0000 + */ +export function osmColorToHex(color: string) { + switch (color.toLowerCase()) { + case 'black': + return '#000000'; + case 'gray': + case 'grey': + return '#808080'; + case 'maroon': + return '#800000'; + case 'olive': + return '#808000'; + case 'green': + return '#008000'; + case 'teal': + return '#008080'; + case 'navy': + return '#000080'; + case 'purple': + return '#800080'; + case 'white': + return '#ffffff'; + case 'silver': + return '#c0c0c0'; + case 'red': + return '#ff0000'; + case 'yellow': + return '#ffff00'; + case 'lime': + return '#00ff00'; + case 'aqua': + case 'cyan': + return '#00ffff'; + case 'blue': + return '#0000ff'; + case 'fuchsia': + case 'magenta': + return '#ff00ff'; + default: + return color; + } +} + +/** + * A function to determine whether the text color should be black or white + * @param hexBgColor The background color in hex format, e.g. #ff0000 + * @returns 'black' or 'white' depending on the brightness of the background color + */ +export function whiteOrBlackText(hexBgColor: string) { + const r = parseInt(hexBgColor.slice(1, 3), 16); + const g = parseInt(hexBgColor.slice(3, 5), 16); + const b = parseInt(hexBgColor.slice(5, 7), 16); + const brightness = (r * 299 + g * 587 + b * 114) / 1000; + return brightness > 125 ? 'black' : 'white'; +} diff --git a/src/components/SearchBox/options/openstreetmap.tsx b/src/components/SearchBox/options/openstreetmap.tsx index 13efd1893..667b7bd0c 100644 --- a/src/components/SearchBox/options/openstreetmap.tsx +++ b/src/components/SearchBox/options/openstreetmap.tsx @@ -63,7 +63,7 @@ export const getOsmOptions = (inputValue: string): OsmOption[] => { const idString = splitted[1]; const id = parseInt(idString); - if (!type || (!idString.match(osmIdRegex) && !Number.isNaN(id))) { + if (!type || !(!!idString?.match(osmIdRegex) && !Number.isNaN(id))) { return []; }