diff --git a/CHANGELOG.md b/CHANGELOG.md index 363b2b14..2a740759 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,23 @@ All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org). +## [Unreleased] +### Added +* [#460](https://github.com/shlinkio/shlink-web-client/pull/460) Added dynamic title on hover for tags with a very long title. + +### Changed +* *Nothing* + +### Deprecated +* *Nothing* + +### Removed +* *Nothing* + +### Fixed +* *Nothing* + + ## [3.2.0] - 2021-07-12 ### Added * [#433](https://github.com/shlinkio/shlink-web-client/pull/433) Added support to provide a default server to connect to via env vars: diff --git a/src/tags/TagCard.tsx b/src/tags/TagCard.tsx index b72bca0e..e8036b04 100644 --- a/src/tags/TagCard.tsx +++ b/src/tags/TagCard.tsx @@ -1,7 +1,7 @@ import { Card, CardHeader, CardBody, Button, Collapse } from 'reactstrap'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faTrash as deleteIcon, faPencilAlt as editIcon, faLink, faEye } from '@fortawesome/free-solid-svg-icons'; -import { FC } from 'react'; +import { FC, useEffect, useRef } from 'react'; import { Link } from 'react-router-dom'; import { prettify } from '../utils/helpers/numbers'; import { useToggle } from '../utils/helpers/hooks'; @@ -20,6 +20,8 @@ export interface TagCardProps { toggle: () => void; } +const isTruncated = (el: HTMLElement | undefined): boolean => !!el && el.scrollWidth > el.clientWidth; + const TagCard = ( DeleteTagConfirmModal: FC, EditTagModal: FC, @@ -28,10 +30,18 @@ const TagCard = ( ) => ({ tag, tagStats, selectedServer, displayed, toggle }: TagCardProps) => { const [ isDeleteModalOpen, toggleDelete ] = useToggle(); const [ isEditModalOpen, toggleEdit ] = useToggle(); + const [ hasTitle,, displayTitle ] = useToggle(); + const titleRef = useRef(); const serverId = isServerWithId(selectedServer) ? selectedServer.id : ''; const shortUrlsLink = `/server/${serverId}/list-short-urls/1?tag=${tag}`; + useEffect(() => { + if (isTruncated(titleRef.current)) { + displayTitle(); + } + }, [ titleRef.current ]); + return ( @@ -41,7 +51,13 @@ const TagCard = ( -
+
{ + titleRef.current = el ?? undefined; + }} + > {tag}