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