kopia lustrzana https://gitlab.com/soapbox-pub/soapbox
StatusHoverCard: use a smaller max-height for status content
rodzic
82e437cdda
commit
a0c20d1a5f
|
@ -71,6 +71,7 @@ export const StatusHoverCard: React.FC<IStatusHoverCard> = ({ visible = true })
|
||||||
key={statusId}
|
key={statusId}
|
||||||
id={statusId}
|
id={statusId}
|
||||||
hoverable={false}
|
hoverable={false}
|
||||||
|
maxContentHeight={128}
|
||||||
hideActionBar
|
hideActionBar
|
||||||
muted
|
muted
|
||||||
/>
|
/>
|
||||||
|
|
|
@ -95,6 +95,7 @@ interface IStatus extends RouteComponentProps {
|
||||||
withDismiss?: boolean,
|
withDismiss?: boolean,
|
||||||
hideActionBar?: boolean,
|
hideActionBar?: boolean,
|
||||||
hoverable?: boolean,
|
hoverable?: boolean,
|
||||||
|
maxContentHeight?: number,
|
||||||
}
|
}
|
||||||
|
|
||||||
interface IStatusState {
|
interface IStatusState {
|
||||||
|
@ -505,6 +506,7 @@ class Status extends ImmutablePureComponent<IStatus, IStatusState> {
|
||||||
onClick={this.handleClick}
|
onClick={this.handleClick}
|
||||||
expanded={!status.hidden}
|
expanded={!status.hidden}
|
||||||
onExpandedToggle={this.handleExpandedToggle}
|
onExpandedToggle={this.handleExpandedToggle}
|
||||||
|
maxContentHeight={this.props.maxContentHeight}
|
||||||
collapsable
|
collapsable
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
|
|
@ -70,10 +70,18 @@ interface IStatusContent {
|
||||||
onExpandedToggle?: () => void,
|
onExpandedToggle?: () => void,
|
||||||
onClick?: () => void,
|
onClick?: () => void,
|
||||||
collapsable?: boolean,
|
collapsable?: boolean,
|
||||||
|
maxContentHeight?: number,
|
||||||
}
|
}
|
||||||
|
|
||||||
/** Renders the text content of a status */
|
/** Renders the text content of a status */
|
||||||
const StatusContent: React.FC<IStatusContent> = ({ status, expanded = false, onExpandedToggle, onClick, collapsable = false }) => {
|
const StatusContent: React.FC<IStatusContent> = ({
|
||||||
|
status,
|
||||||
|
expanded = false,
|
||||||
|
onExpandedToggle,
|
||||||
|
onClick,
|
||||||
|
collapsable = false,
|
||||||
|
maxContentHeight = MAX_HEIGHT,
|
||||||
|
}) => {
|
||||||
const history = useHistory();
|
const history = useHistory();
|
||||||
|
|
||||||
const [hidden, setHidden] = useState(true);
|
const [hidden, setHidden] = useState(true);
|
||||||
|
@ -141,7 +149,7 @@ const StatusContent: React.FC<IStatusContent> = ({ status, expanded = false, onE
|
||||||
if (!node.current) return;
|
if (!node.current) return;
|
||||||
|
|
||||||
if (collapsable && onClick && !collapsed && status.spoiler_text.length === 0) {
|
if (collapsable && onClick && !collapsed && status.spoiler_text.length === 0) {
|
||||||
if (node.current.clientHeight > MAX_HEIGHT) {
|
if (node.current.clientHeight > maxContentHeight) {
|
||||||
setCollapsed(true);
|
setCollapsed(true);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -215,21 +223,21 @@ const StatusContent: React.FC<IStatusContent> = ({ status, expanded = false, onE
|
||||||
|
|
||||||
const content = { __html: parsedHtml };
|
const content = { __html: parsedHtml };
|
||||||
const spoilerContent = { __html: status.spoilerHtml };
|
const spoilerContent = { __html: status.spoilerHtml };
|
||||||
const directionStyle: React.CSSProperties = { direction: 'ltr' };
|
|
||||||
const className = classNames('status__content', {
|
const className = classNames('status__content', {
|
||||||
'status__content--with-action': onClick,
|
'status__content--with-action': onClick,
|
||||||
'status__content--with-spoiler': status.spoiler_text.length > 0,
|
'status__content--with-spoiler': status.spoiler_text.length > 0,
|
||||||
'status__content--collapsed': collapsed,
|
|
||||||
'status__content--big': onlyEmoji,
|
'status__content--big': onlyEmoji,
|
||||||
});
|
});
|
||||||
|
|
||||||
if (isRtl(status.search_index)) {
|
const style: React.CSSProperties = {
|
||||||
directionStyle.direction = 'rtl';
|
maxHeight: collapsed ? maxContentHeight : undefined,
|
||||||
}
|
direction: isRtl(status.search_index) ? 'rtl' : 'ltr',
|
||||||
|
};
|
||||||
|
|
||||||
if (status.spoiler_text.length > 0) {
|
if (status.spoiler_text.length > 0) {
|
||||||
return (
|
return (
|
||||||
<div className={className} ref={node} tabIndex={0} style={directionStyle} onMouseDown={handleMouseDown} onMouseUp={handleMouseUp}>
|
<div className={className} ref={node} tabIndex={0} style={style} onMouseDown={handleMouseDown} onMouseUp={handleMouseUp}>
|
||||||
<p style={{ marginBottom: isHidden && status.mentions.isEmpty() ? 0 : undefined }}>
|
<p style={{ marginBottom: isHidden && status.mentions.isEmpty() ? 0 : undefined }}>
|
||||||
<span dangerouslySetInnerHTML={spoilerContent} lang={status.language || undefined} />
|
<span dangerouslySetInnerHTML={spoilerContent} lang={status.language || undefined} />
|
||||||
|
|
||||||
|
@ -245,7 +253,7 @@ const StatusContent: React.FC<IStatusContent> = ({ status, expanded = false, onE
|
||||||
className={classNames('status__content__text', {
|
className={classNames('status__content__text', {
|
||||||
'status__content__text--visible': !isHidden,
|
'status__content__text--visible': !isHidden,
|
||||||
})}
|
})}
|
||||||
style={directionStyle}
|
style={style}
|
||||||
dangerouslySetInnerHTML={content}
|
dangerouslySetInnerHTML={content}
|
||||||
lang={status.language || undefined}
|
lang={status.language || undefined}
|
||||||
/>
|
/>
|
||||||
|
@ -262,7 +270,7 @@ const StatusContent: React.FC<IStatusContent> = ({ status, expanded = false, onE
|
||||||
tabIndex={0}
|
tabIndex={0}
|
||||||
key='content'
|
key='content'
|
||||||
className={className}
|
className={className}
|
||||||
style={directionStyle}
|
style={style}
|
||||||
dangerouslySetInnerHTML={content}
|
dangerouslySetInnerHTML={content}
|
||||||
lang={status.language || undefined}
|
lang={status.language || undefined}
|
||||||
onMouseDown={handleMouseDown}
|
onMouseDown={handleMouseDown}
|
||||||
|
@ -289,7 +297,7 @@ const StatusContent: React.FC<IStatusContent> = ({ status, expanded = false, onE
|
||||||
className={classNames('status__content', {
|
className={classNames('status__content', {
|
||||||
'status__content--big': onlyEmoji,
|
'status__content--big': onlyEmoji,
|
||||||
})}
|
})}
|
||||||
style={directionStyle}
|
style={style}
|
||||||
dangerouslySetInnerHTML={content}
|
dangerouslySetInnerHTML={content}
|
||||||
lang={status.language || undefined}
|
lang={status.language || undefined}
|
||||||
/>,
|
/>,
|
||||||
|
|
|
@ -93,10 +93,6 @@
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.status__content.status__content--collapsed {
|
|
||||||
max-height: 20px * 15; // 15 lines is roughly above 500 characters
|
|
||||||
}
|
|
||||||
|
|
||||||
.status__content__read-more-button {
|
.status__content__read-more-button {
|
||||||
@apply block text-gray-900 dark:text-gray-300 border-0 bg-transparent p-0 pt-2 hover:underline active:underline;
|
@apply block text-gray-900 dark:text-gray-300 border-0 bg-transparent p-0 pt-2 hover:underline active:underline;
|
||||||
}
|
}
|
||||||
|
|
Ładowanie…
Reference in New Issue