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;
}