style(ui): add tooltips for long playlist and album names - 5068

Signed-off-by: Thiago Sfreddo <sfredo@gmail.com>

ui/src/album/AlbumGridView.jsx

@@ -13,7 +13,12 @@ import { linkToRecord, useListContext, Loading } from 'react-admin'
 import { withContentRect } from 'react-measure'
 import { useDrag } from 'react-dnd'
 import subsonic from '../subsonic'
-import { AlbumContextMenu, PlayButton, ArtistLinkField } from '../common'
+import {
+  AlbumContextMenu,
+  PlayButton,
+  ArtistLinkField,
+  OverflowTooltip,
+} from '../common'
 import { DraggableTypes } from '../consts'
 import clsx from 'clsx'
 import { AlbumDatesField } from './AlbumDatesField.jsx'
@@ -198,7 +203,9 @@ const AlbumGridTile = ({ showArtist, record, basePath, ...props }) => {
         to={linkToRecord(basePath, record.id, 'show')}
       >
         <span>
-          <Typography className={classes.albumName}>{record.name}</Typography>
+          <OverflowTooltip title={record.name}>
+            <Typography className={classes.albumName}>{record.name}</Typography>
+          </OverflowTooltip>
           {record.tags && record.tags['albumversion'] && (
             <Typography className={classes.albumVersion}>
               {record.tags['albumversion']}

ui/src/common/OverflowTooltip.jsx

@@ -0,0 +1,46 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Tooltip } from '@material-ui/core'
+import useMenuTooltipStyles from './useMenuTooltipStyles'
+
+export const OverflowTooltip = ({
+  children,
+  title,
+  placement = 'bottom-start',
+}) => {
+  const classes = useMenuTooltipStyles()
+  const textRef = React.useRef(null)
+  const [isOverflowing, setIsOverflowing] = React.useState(false)
+
+  React.useLayoutEffect(() => {
+    const el = textRef.current
+    if (!el) return
+
+    const checkOverflow = () =>
+      setIsOverflowing(el.scrollWidth > el.clientWidth)
+
+    checkOverflow()
+    window.addEventListener('resize', checkOverflow)
+
+    return () => window.removeEventListener('resize', checkOverflow)
+  }, [title, children])
+
+  return (
+    <Tooltip
+      title={title}
+      disableHoverListener={!isOverflowing}
+      disableTouchListener
+      placement={placement}
+      TransitionProps={{ timeout: 0 }}
+      classes={{ tooltip: classes.tooltip }}
+    >
+      {React.cloneElement(children, { ref: textRef })}
+    </Tooltip>
+  )
+}
+
+OverflowTooltip.propTypes = {
+  children: PropTypes.element.isRequired,
+  title: PropTypes.string.isRequired,
+  placement: PropTypes.string,
+}

ui/src/common/index.js

@@ -41,3 +41,4 @@ export * from './formatRange.js'
 export * from './playlistUtils.js'
 export * from './PathField.jsx'
 export * from './ParticipantsInfo'
+export * from './OverflowTooltip'

ui/src/common/useMenuTooltipStyles.js

@@ -0,0 +1,20 @@
+import { makeStyles } from '@material-ui/core/styles'
+
+const useMenuTooltipStyles = makeStyles((theme) => {
+  const paperRoot = theme.overrides?.MuiPaper?.root || {}
+
+  return {
+    tooltip: {
+      backgroundColor:
+        paperRoot.backgroundColor || theme.palette.background.paper,
+      color: paperRoot.color || theme.palette.text.primary,
+      boxShadow: theme.shadows[8],
+      borderRadius: theme.shape.borderRadius,
+      ...theme.typography.body1,
+      padding: theme.spacing(1, 2),
+      maxWidth: '30vw',
+    },
+  }
+})
+
+export default useMenuTooltipStyles

ui/src/layout/PlaylistsSubMenu.jsx

@@ -12,7 +12,7 @@ import QueueMusicOutlinedIcon from '@material-ui/icons/QueueMusicOutlined'
 import { BiCog } from 'react-icons/bi'
 import { useDrop } from 'react-dnd'
 import SubMenu from './SubMenu'
-import { canChangeTracks } from '../common'
+import { canChangeTracks, OverflowTooltip } from '../common'
 import { DraggableTypes } from '../consts'
 import config from '../config'
 
@@ -39,9 +39,11 @@ const PlaylistMenuItemLink = ({ pls, sidebarIsOpen }) => {
     <MenuItemLink
       to={`/playlist/${pls.id}/show`}
       primaryText={
-        <Typography variant="inherit" noWrap ref={dropRef}>
-          {pls.name}
-        </Typography>
+        <OverflowTooltip title={pls.name} placement="right">
+          <Typography variant="inherit" noWrap ref={dropRef}>
+            {pls.name}
+          </Typography>
+        </OverflowTooltip>
       }
       sidebarIsOpen={sidebarIsOpen}
       dense={false}