diff --git a/app/javascript/flavours/glitch/components/quote_content.jsx b/app/javascript/flavours/glitch/components/quote_content.jsx
index 9cb5d572f28f8d..fa0e903331edcf 100644
--- a/app/javascript/flavours/glitch/components/quote_content.jsx
+++ b/app/javascript/flavours/glitch/components/quote_content.jsx
@@ -1,38 +1,94 @@
import PropTypes from "prop-types";
+import {useCallback} from "react";
+
+import {defineMessages, injectIntl} from "react-intl";
import ImmutablePropTypes from "react-immutable-proptypes";
import QuoteIcon from "@/material-icons/400-24px/format_quote-fill.svg?react";
+import {Avatar} from "flavours/glitch/components/avatar";
import {Icon} from "flavours/glitch/components/icon";
+import {RelativeTimestamp} from "flavours/glitch/components/relative_timestamp";
+const messages = defineMessages({
+ edited: {id: 'status.edited', defaultMessage: 'Edited {date}'},
+});
const QuoteContent = ({
quoteStatus,
- handleAccountClick
+ parseClick,
+ intl
}) => {
- let quoteStatusContent = { __html: quoteStatus.get('contentHtml') };
+ let quoteStatusContent = {__html: quoteStatus.get('contentHtml')};
let quoteStatusAccount = quoteStatus.get('account');
- let quoteStatusDisplayName = { __html: quoteStatusAccount.get('display_name_html') };
+ let quoteStatusDisplayName = {__html: quoteStatusAccount.get('display_name_html')};
+ const handle = quoteStatus.getIn(['account', 'acct']);
+ const accountURL = quoteStatus.getIn(['account', 'url']);
+ const statusID = quoteStatus.get('id');
+ const createdAt = quoteStatus.get('created_at');
+ const editedAt = quoteStatus.get('edited_at');
+
+ const handleAccountClick = useCallback((e) => {
+ parseClick(e, `/@${handle}`);
+ }, [handle, parseClick]);
+
+ const handleStatusClick = useCallback((e) => {
+ parseClick(e, `/@${handle}/${statusID}`);
+ }, [handle, statusID, parseClick]);
return (
-
+
@@ -41,7 +97,8 @@ const QuoteContent = ({
QuoteContent.propTypes = {
quoteStatus: ImmutablePropTypes.map.isRequired,
- handleAccountClick: PropTypes.func.isRequired,
+ parseClick: PropTypes.func.isRequired,
+ intl: PropTypes.object.isRequired,
};
-export default QuoteContent;
+export default injectIntl(QuoteContent);
diff --git a/app/javascript/flavours/glitch/components/status_content.jsx b/app/javascript/flavours/glitch/components/status_content.jsx
index 57a31da22dab25..1cb88d3ea8aad2 100644
--- a/app/javascript/flavours/glitch/components/status_content.jsx
+++ b/app/javascript/flavours/glitch/components/status_content.jsx
@@ -381,7 +381,7 @@ class StatusContent extends PureComponent {
if (quoteStatus !== null) {
quote = (
);
diff --git a/app/javascript/flavours/glitch/styles/neuromatchstodon/index.scss b/app/javascript/flavours/glitch/styles/neuromatchstodon/index.scss
index 9c3885ff72ad8f..3c4179096de599 100644
--- a/app/javascript/flavours/glitch/styles/neuromatchstodon/index.scss
+++ b/app/javascript/flavours/glitch/styles/neuromatchstodon/index.scss
@@ -1,3 +1,4 @@
@import 'latex';
@import 'bigger_collapsed_statuses';
@import 'better_code_blocks';
+@import 'quotes';
diff --git a/app/javascript/flavours/glitch/styles/neuromatchstodon/quotes.scss b/app/javascript/flavours/glitch/styles/neuromatchstodon/quotes.scss
new file mode 100644
index 00000000000000..8d231832f19183
--- /dev/null
+++ b/app/javascript/flavours/glitch/styles/neuromatchstodon/quotes.scss
@@ -0,0 +1,79 @@
+/*
+This stylesheet required more than usual injection of styles into
+stuff that can get overridden by upstream.
+
+That includes stuff in these files, findable by ctrl+f'ing "quote"
+unless indicated otherwise.
+
+- componenents.scss
+- contrast/diff.scss
+- mastodon-light/diff.scss
+ + dismissable-banner (L435)
+
+*/
+
+$header-gap: 0.2em;
+$header-font-size: 15px;
+
+.status__quote {
+ margin-top: 0.5em;
+ border: 1px solid var(--background-border-color);
+ border-radius: 8px;
+ padding: 8px;
+
+ .quote {
+ &__header {
+ display: flex;
+ font-size: $header-font-size;
+ gap: $header-gap;
+ }
+
+ &__author {
+ display: flex;
+ font-size: $header-font-size;
+ gap: $header-gap;
+
+ &:hover {
+ text-decoration: none;
+
+ & .quote__display-name {
+ text-decoration: underline;
+ }
+ }
+
+ // quote icon has its own left padding
+ svg {
+ margin-left: -5px;
+ }
+ }
+
+ &__spacer {
+ margin: 0 0.25em;
+ }
+
+ &__display-name {
+ &:hover {
+ text-decoration: underline;
+ }
+
+ & > .icon {
+ // needs to match below: &:is(blockquote)
+ color: $highlight-text-color;
+ }
+ }
+
+ &__content-link:hover {
+ text-decoration: none;
+ }
+ }
+
+ .deemphasized {
+ color: $action-button-color;
+ text-decoration: none;
+ }
+
+ // see below: .status_quote|&:is(blockquote)
+ &:is(blockquote) {
+ border-left-color: $highlight-text-color;
+ }
+}
diff --git a/app/javascript/flavours/glitch/styles/rich_text.scss b/app/javascript/flavours/glitch/styles/rich_text.scss
index f14e573915c35d..9bfe8b5079c3b4 100644
--- a/app/javascript/flavours/glitch/styles/rich_text.scss
+++ b/app/javascript/flavours/glitch/styles/rich_text.scss
@@ -98,27 +98,3 @@
list-style-type: decimal;
}
}
-
-.status__quote {
- margin-top: 0.5em;
- pointer-events: none;
- border: 1px solid var(--background-border-color);
- border-radius: 8px;
- padding: 8px;
-
- // HACK: adjust quote icon alignment & color icon for emph
- .quote-display-name > .icon {
- margin-left: -4px;
-
- // hopefully this doesn't break user css
- margin-bottom: -6px;
-
- // needs to match below: &:is(blockquote)
- color: $highlight-text-color;
- }
-
- // see below: .status_quote|&:is(blockquote)
- &:is(blockquote) {
- border-left-color: $highlight-text-color;
- }
-}