diff --git a/app/javascript/flavours/glitch/components/collapse_button.jsx b/app/javascript/flavours/glitch/components/collapse_button.jsx new file mode 100644 index 00000000000000..36cda45361de5f --- /dev/null +++ b/app/javascript/flavours/glitch/components/collapse_button.jsx @@ -0,0 +1,45 @@ +import PropTypes from 'prop-types'; +import { useCallback } from 'react'; + +import { defineMessages, useIntl } from 'react-intl'; + +import ExpandLessIcon from '@/material-icons/400-24px/expand_less.svg?react'; + +import { IconButton } from './icon_button'; + +const messages = defineMessages({ + collapse: { id: 'status.collapse', defaultMessage: 'Collapse' }, + uncollapse: { id: 'status.uncollapse', defaultMessage: 'Uncollapse' }, +}); + +export const CollapseButton = ({ collapsed, setCollapsed }) => { + const intl = useIntl(); + + const handleCollapsedClick = useCallback((e) => { + if (e.button === 0) { + setCollapsed(!collapsed); + e.preventDefault(); + } + }, [collapsed, setCollapsed]); + + return ( + + ); +}; + +CollapseButton.propTypes = { + collapsed: PropTypes.bool, + setCollapsed: PropTypes.func.isRequired, +}; diff --git a/app/javascript/flavours/glitch/components/status.jsx b/app/javascript/flavours/glitch/components/status.jsx index e75bdc34217522..a6b459583bc2b1 100644 --- a/app/javascript/flavours/glitch/components/status.jsx +++ b/app/javascript/flavours/glitch/components/status.jsx @@ -23,6 +23,7 @@ import { MediaGallery, Video, Audio } from '../features/ui/util/async-components import { displayMedia } from '../initial_state'; import AttachmentList from './attachment_list'; +import { CollapseButton } from './collapse_button'; import { getHashtagBarForStatus } from './hashtag_bar'; import StatusActionBar from './status_action_bar'; import StatusContent from './status_content'; @@ -763,7 +764,13 @@ class Status extends ImmutablePureComponent { account={account} parseClick={parseClick} notificationId={this.props.notificationId} - /> + > + {muted && settings.getIn(['collapsed', 'enabled']) && ( +
+ +
+ )} + ); } @@ -801,24 +808,24 @@ class Status extends ImmutablePureComponent { {(connectReply || connectUp || connectToRoot) &&
}
- {(!muted || !isCollapsed) ? ( - - ) : ( - + {(!muted || !isCollapsed) && ( + <> + + + )} -
} {settings.get('media') && !!mediaIcons && mediaIcons.map(icon => this.renderIcon(icon))} {settings.get('visibility') && } - {collapsible && ( - - )} + {collapsible && }
); } diff --git a/app/javascript/flavours/glitch/components/status_prepend.jsx b/app/javascript/flavours/glitch/components/status_prepend.jsx index 355f65a3e21ff5..daaaaa4f026d0c 100644 --- a/app/javascript/flavours/glitch/components/status_prepend.jsx +++ b/app/javascript/flavours/glitch/components/status_prepend.jsx @@ -23,6 +23,7 @@ export default class StatusPrepend extends PureComponent { account: ImmutablePropTypes.map.isRequired, parseClick: PropTypes.func.isRequired, notificationId: PropTypes.number, + children: PropTypes.node, }; handleClick = (e) => { @@ -112,7 +113,7 @@ export default class StatusPrepend extends PureComponent { render () { const { Message } = this; - const { type } = this.props; + const { type, children } = this.props; let iconId, iconComponent; @@ -146,14 +147,13 @@ export default class StatusPrepend extends PureComponent { return !type ? null : ( ); } diff --git a/app/javascript/flavours/glitch/features/notifications/components/admin_report.jsx b/app/javascript/flavours/glitch/features/notifications/components/admin_report.jsx index d16a775ea57221..5ca8b59a5e2aad 100644 --- a/app/javascript/flavours/glitch/features/notifications/components/admin_report.jsx +++ b/app/javascript/flavours/glitch/features/notifications/components/admin_report.jsx @@ -95,9 +95,7 @@ class AdminReport extends ImmutablePureComponent {
-
- -
+ diff --git a/app/javascript/flavours/glitch/features/notifications/components/admin_signup.jsx b/app/javascript/flavours/glitch/features/notifications/components/admin_signup.jsx index 60affd444b6c91..4c815099b12f60 100644 --- a/app/javascript/flavours/glitch/features/notifications/components/admin_signup.jsx +++ b/app/javascript/flavours/glitch/features/notifications/components/admin_signup.jsx @@ -86,9 +86,7 @@ class NotificationAdminSignup extends ImmutablePureComponent {
-
- -
+
-
- -
+
-
- -
+ [data-popper-placement] { .notification__message { margin-bottom: 0; + white-space: nowrap; } - .status__info .notification__message > span { - white-space: nowrap; + .notification__message-collapse-button { + display: block; } } +} + +.notification__message-collapse-button { + display: none; + text-align: end; + flex-grow: 2; - .notification__message { - margin: -10px 0 10px; + .status__collapse-button .icon { + width: 24px; + height: 24px; } } @@ -1277,10 +1285,6 @@ body > [data-popper-placement] { display: flex; justify-content: space-between; gap: 10px; - - .notification__message > span { - word-wrap: break-word; - } } .status__info__icons { @@ -1294,10 +1298,10 @@ body > [data-popper-placement] { width: 16px; height: 16px; } +} - .status__collapse-button.active > .icon { - transform: rotate(-180deg); - } +.status__collapse-button.active > .icon { + transform: rotate(-180deg); } .no-reduce-motion .status__collapse-button { @@ -1470,11 +1474,6 @@ body > [data-popper-placement] { } } -.notification__favourite-icon-wrapper { - inset-inline-start: 0; - position: absolute; -} - .detailed-status__link { display: inline-flex; align-items: center; @@ -1811,14 +1810,14 @@ a.account__display-name { } .notification__message { - margin-inline-start: 42px; - padding-top: 8px; - padding-inline-start: 26px; + display: flex; cursor: default; color: $darker-text-color; font-size: 15px; position: relative; align-items: center; + height: 20px; + gap: 10px; .icon { color: $highlight-text-color; @@ -1837,6 +1836,14 @@ a.account__display-name { } } +.status .notification__message { + margin-bottom: 10px; +} + +.notification .notification__message { + padding: 8px 14px 0; +} + .icon-button.star-icon.active { color: $gold-star; }