move quote to bottom, separate into different component

NeuromatchAcademy · Jul 28, 2024 · 1860888 · 1860888
1 parent d8fcac6
commit 1860888
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 35 deletions.
diff --git a/app/javascript/flavours/glitch/components/quote_content.jsx b/app/javascript/flavours/glitch/components/quote_content.jsx
@@ -0,0 +1,47 @@
+import PropTypes from "prop-types";
+
+import ImmutablePropTypes from "react-immutable-proptypes";
+
+import QuoteIcon from "@/material-icons/400-24px/format_quote-fill.svg";
+import {Icon} from "flavours/glitch/components/icon";
+
+
+const QuoteContent = ({
+  quoteStatus,
+  handleAccountClick
+}) => {
+  let quoteStatusContent = { __html: quoteStatus.get('contentHtml') };
+  let quoteStatusAccount = quoteStatus.get('account');
+  let quoteStatusDisplayName = { __html: quoteStatusAccount.get('display_name_html') };
+
+  return (
+    <div className={"status__quote"}>
+      <blockquote>
+        <bdi>
+          <span className='quote-display-name'>
+            <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>
+          </span>
+        </bdi>
+        <div>
+          <a href={quoteStatus.get('url')} target='_blank' rel='noopener noreferrer'
+            dangerouslySetInnerHTML={quoteStatusContent} />
+        </div>
+      </blockquote>
+    </div>
+  );
+};
+
+QuoteContent.propTypes = {
+  quoteStatus: ImmutablePropTypes.map.isRequired,
+  handleAccountClick: PropTypes.func.isRequired,
+};
+
+export default QuoteContent;
diff --git a/app/javascript/flavours/glitch/components/status_content.jsx b/app/javascript/flavours/glitch/components/status_content.jsx
@@ -9,13 +9,12 @@ import { withRouter } from 'react-router-dom';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { connect } from 'react-redux';
 
-import QuoteIcon from '@/material-icons/400-24px/format_quote-fill.svg?react';
-import { Icon } from 'flavours/glitch/components/icon';
 import { identityContextPropShape, withIdentity } from 'flavours/glitch/identity_context';
 import { autoPlayGif, languages as preloadedLanguages } from 'flavours/glitch/initial_state';
 import { decode as decodeIDNA } from 'flavours/glitch/utils/idna';
 
 import { Permalink } from './permalink';
+import QuoteContent from "./quote_content";
 import StatusExpandButton from './status_expand_button';
 
 const textMatchesTarget = (text, origin, host) => {
@@ -376,34 +375,15 @@ class StatusContent extends PureComponent {
       <TranslateButton onClick={this.handleTranslate} translation={status.get('translation')} />
     );
 
-    let quote = '';
-
-    if (status.get('quote', null) !== null) {
-      let quoteStatus = status.get('quote');
-      let quoteStatusContent = { __html: quoteStatus.get('contentHtml') };
-      let quoteStatusAccount = quoteStatus.get('account');
-      let quoteStatusDisplayName = { __html: quoteStatusAccount.get('display_name_html') };
+    let quoteStatus = status.get('quote', null);
+    let quote = null;
 
+    if (quoteStatus !== null) {
       quote = (
-        <div className={"status__quote"}>
-          <blockquote>
-            <bdi>
-              <span className='quote-display-name'>
-                <Icon
-                  fixedWidth
-                  aria-hidden='true'
-                  key='icon-quote-right'
-                  icon={QuoteIcon} />
-                <strong className={"display-name__html"}>
-                  <a onClick={this.handleAccountClick} href={quoteStatus.getIn(['account', 'url'])} dangerouslySetInnerHTML={quoteStatusDisplayName} />
-                </strong>
-              </span>
-            </bdi>
-            <div>
-              <a href={quoteStatus.get('url')} target='_blank' rel='noopener noreferrer' dangerouslySetInnerHTML={quoteStatusContent} />
-            </div>
-          </blockquote>
-        </div>
+        <QuoteContent
+          handleAccountClick={this.handleAccountClick}
+          quoteStatus={quoteStatus}
+        />
       );
     }
 
@@ -442,7 +422,6 @@ class StatusContent extends PureComponent {
           {mentionsPlaceholder}
 
           <div className={`status__content__spoiler ${!hidden ? 'status__content__spoiler--visible' : ''}`}>
-            {quote}
             <div
               ref={this.setContentsRef}
               key={`contents-${tagLinks}`}
@@ -456,6 +435,7 @@ class StatusContent extends PureComponent {
             {!hidden && translateButton}
             {media}
           </div>
+          {quote}
 
           {extraMedia}
         </div>
@@ -468,7 +448,6 @@ class StatusContent extends PureComponent {
           onMouseUp={this.handleMouseUp}
           tabIndex={0}
         >
-          {quote}
           <div
             ref={this.setContentsRef}
             key={`contents-${tagLinks}-${rewriteMentions}`}
@@ -481,6 +460,7 @@ class StatusContent extends PureComponent {
           />
           {translateButton}
           {media}
+          {quote}
           {extraMedia}
         </div>
       );
@@ -490,7 +470,6 @@ class StatusContent extends PureComponent {
           className='status__content'
           tabIndex={0}
         >
-          {quote}
           <div
             ref={this.setContentsRef}
             key={`contents-${tagLinks}`}
@@ -503,6 +482,7 @@ class StatusContent extends PureComponent {
           />
           {translateButton}
           {media}
+          {quote}
           {extraMedia}
         </div>
       );

diff --git a/app/javascript/flavours/glitch/styles/rich_text.scss b/app/javascript/flavours/glitch/styles/rich_text.scss
@@ -100,8 +100,11 @@
 }
 
 .status__quote {
-  padding-bottom: 0.5em;
+  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 {

diff --git a/app/views/statuses/_detailed_status.html.haml b/app/views/statuses/_detailed_status.html.haml
@@ -15,9 +15,6 @@
 
   = account_action_button(status.account)
 
-  - if status.quote?
-    = render partial: 'statuses/quote_status', locals: { status: status.quote }
-
   .status__content.emojify{ data: ({ spoiler: current_account&.user&.setting_expand_spoilers ? 'expanded' : 'folded' } if status.spoiler_text?) }<
     - if status.spoiler_text?
       %p<
@@ -29,6 +26,9 @@
       - if status.preloadable_poll
         = render_poll_component(status)
 
+  - if status.quote?
+    = render partial: 'statuses/quote_status', locals: { status: status.quote }
+
   - if !status.ordered_media_attachments.empty?
     - if status.ordered_media_attachments.first.video?
       = render_video_component(status, width: 670, height: 380, detailed: true)