fix links in quotes, separate out CSS

NeuromatchAcademy · Aug 4, 2024 · 44a37e7 · 44a37e7
1 parent 3f1cd4b
commit 44a37e7
Show file tree

Hide file tree

Showing 5 changed files with 153 additions and 40 deletions.
diff --git 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 (
-    <div className={"status__quote"}>
+    <div className={"status__quote"} onClick={handleStatusClick}>
       <blockquote>
-        <bdi>
-          <span className='quote-display-name'>
+        <div className={"quote__header"}>
+          <a href={accountURL} onClick={handleAccountClick}
+            className={"quote__author"}
+            data-hover-card-account={quoteStatus.getIn(['account', 'id'])}>
             <Icon
               fixedWidth
               aria-hidden='true'
               key='icon-quote-right'
               icon={QuoteIcon} />
-            <strong className={"display-name__html"}>
-              <a onClick={handleAccountClick} href={quoteStatus.getIn(['account', 'url'])}
-                dangerouslySetInnerHTML={quoteStatusDisplayName} />
-            </strong>
+            <Avatar account={quoteStatusAccount} size={24} />
+            <bdi>
+              <span className='quote__display-name'>
+                <strong className={"display-name__html"}
+                  dangerouslySetInnerHTML={quoteStatusDisplayName} />
+              </span>
+            </bdi>
+            <span
+              className={"quote__account deemphasized"}>
+              @{handle}
+            </span>
+
+          </a>
+          <span className={"quote__spacer deemphasized"}>
+              ·
           </span>
-        </bdi>
+          <a href={quoteStatus.get('url')}
+            onClick={handleStatusClick}
+            className={"quote__datetime deemphasized"}>
+            <RelativeTimestamp timestamp={createdAt} />{editedAt && <abbr
+              title={intl.formatMessage(messages.edited, {
+                date: intl.formatDate(editedAt, {
+                  year: 'numeric',
+                  month: 'short',
+                  day: '2-digit',
+                  hour: '2-digit',
+                  minute: '2-digit'
+                })
+              })}> *</abbr>}
+
+          </a>
+        </div>
         <div>
-          <a href={quoteStatus.get('url')} target='_blank' rel='noopener noreferrer'
-            dangerouslySetInnerHTML={quoteStatusContent} />
+          <a className={"quote__content-link"}
+            href={quoteStatus.get('url')}
+            onClick={handleStatusClick}
+            target='_blank' rel='noopener noreferrer'
+          >
+            <p className={"quote__content"} dangerouslySetInnerHTML={quoteStatusContent} />
+          </a>
+
         </div>
       </blockquote>
     </div>
@@ -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
@@ -381,7 +381,7 @@ class StatusContent extends PureComponent {
     if (quoteStatus !== null) {
       quote = (
         <QuoteContent
-          handleAccountClick={this.handleAccountClick}
+          parseClick={this.props.parseClick}
           quoteStatus={quoteStatus}
         />
       );

diff --git 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
@@ -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
@@ -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;
-  }
-}