Merge pull request #979 from sophiabits/fix-925

Truncate text & show tooltip when website name is too long (Resolves #925)
This commit is contained in:
Mike Cao 2022-02-22 22:51:34 -08:00 committed by GitHub
commit b564ee6613
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 107 additions and 7 deletions

View File

@ -0,0 +1,66 @@
import PropTypes from 'prop-types';
import React, { useCallback, useEffect, useRef, useState } from 'react';
import ReactTooltip from 'react-tooltip';
import styles from './OverflowText.module.css';
const OverflowText = ({ children, tooltipId }) => {
const measureEl = useRef();
const [isOverflown, setIsOverflown] = useState(false);
const measure = useCallback(
el => {
if (!el) return;
setIsOverflown(el.scrollWidth > el.clientWidth);
},
[setIsOverflown],
);
// Do one measure on mount
useEffect(() => {
measure(measureEl.current);
}, [measure]);
// Set up resize listener for subsequent measures
useEffect(() => {
if (!measureEl.current) return;
// Destructure ref in case it changes out from under us
const el = measureEl.current;
if ('ResizeObserver' in global) {
// Ideally, we have access to ResizeObservers
const observer = new ResizeObserver(() => {
measure(el);
});
observer.observe(el);
return () => observer.unobserve(el);
} else {
// Otherwise, fall back to measuring on window resizes
const handler = () => measure(el);
window.addEventListener('resize', handler, { passive: true });
return () => window.removeEventListener('resize', handler, { passive: true });
}
});
return (
<span
ref={measureEl}
data-tip={children.toString()}
data-effect="solid"
data-for={tooltipId}
className={styles.root}
>
{children}
{isOverflown && <ReactTooltip id={tooltipId}>{children}</ReactTooltip>}
</span>
);
};
OverflowText.propTypes = {
children: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
tooltipId: PropTypes.string.isRequired,
};
export default OverflowText;

View File

@ -0,0 +1,6 @@
.root {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

View File

@ -1,6 +1,7 @@
import React from 'react';
import { FormattedMessage } from 'react-intl';
import Link from 'components/common/Link';
import OverflowText from 'components/common/OverflowText';
import PageHeader from 'components/layout/PageHeader';
import RefreshButton from 'components/common/RefreshButton';
import ButtonLayout from 'components/layout/ButtonLayout';
@ -13,15 +14,19 @@ export default function WebsiteHeader({ websiteId, title, domain, showLink = fal
const header = showLink ? (
<>
<Favicon domain={domain} />
<Link href="/website/[...id]" as={`/website/${websiteId}/${title}`}>
{title}
<Link
className={styles.titleLink}
href="/website/[...id]"
as={`/website/${websiteId}/${title}`}
>
<OverflowText tooltipId={`${websiteId}-title`}>{title}</OverflowText>
</Link>
</>
) : (
<div>
<>
<Favicon domain={domain} />
{title}
</div>
<OverflowText tooltipId={`${websiteId}-title`}>{title}</OverflowText>
</>
);
return (

View File

@ -2,6 +2,14 @@
color: var(--gray900);
font-size: var(--font-size-large);
line-height: var(--font-size-large);
align-items: center;
display: flex;
max-width: 100%;
overflow: hidden;
}
.titleLink {
max-width: 100%;
}
.link {

View File

@ -5,6 +5,7 @@ import classNames from 'classnames';
import Link from 'components/common/Link';
import Table from 'components/common/Table';
import Button from 'components/common/Button';
import OverflowText from 'components/common/OverflowText';
import PageHeader from 'components/layout/PageHeader';
import Modal from 'components/common/Modal';
import WebsiteEditForm from 'components/forms/WebsiteEditForm';
@ -84,12 +85,20 @@ export default function WebsiteSettings() {
);
const DetailsLink = ({ website_id, name, domain }) => (
<Link href="/website/[...id]" as={`/website/${website_id}/${name}`}>
<Link
className={styles.detailLink}
href="/website/[...id]"
as={`/website/${website_id}/${name}`}
>
<Favicon domain={domain} />
{name}
<OverflowText tooltipId={`${website_id}-name`}>{name}</OverflowText>
</Link>
);
const Domain = ({ domain, website_id }) => (
<OverflowText tooltipId={`${website_id}-domain`}>{domain}</OverflowText>
);
const adminColumns = [
{
key: 'name',
@ -101,6 +110,7 @@ export default function WebsiteSettings() {
key: 'domain',
label: <FormattedMessage id="label.domain" defaultMessage="Domain" />,
className: 'col-4 col-xl-3',
render: Domain,
},
{
key: 'account',
@ -125,6 +135,7 @@ export default function WebsiteSettings() {
key: 'domain',
label: <FormattedMessage id="label.domain" defaultMessage="Domain" />,
className: 'col-6 col-xl-4',
render: Domain,
},
{
key: 'action',

View File

@ -5,3 +5,7 @@
.buttons {
justify-content: flex-end;
}
.detailLink {
width: 100%;
}