flavors: glitch: show emojified display name in quotes

NeuromatchAcademy · Dec 26, 2022 · 08aecd2 · 08aecd2
1 parent 005256a
commit 08aecd2
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 0 deletions.
diff --git a/app/javascript/flavours/glitch/components/status_content.js b/app/javascript/flavours/glitch/components/status_content.js
@@ -280,10 +280,26 @@ export default class StatusContent extends React.PureComponent {
     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') };
+
+      console.log('QUOTE:', quoteStatus);
+      console.log('ACCOUNT:', quoteStatusAccount);
 
       quote = (
         <div class="status__quote">
           <blockquote>
+            <bdi>
+              <span class="quote-display-name">
+                <Icon
+                  fixedWidth
+                  id='quote-right'
+                  aria-hidden='true'
+                  key='icon-quote-right' />
+                <strong class="display-name__html"
+                  dangerouslySetInnerHTML={quoteStatusDisplayName} />
+              </span>
+            </bdi>
             <div dangerouslySetInnerHTML={quoteStatusContent} />
           </blockquote>
         </div>

diff --git a/app/javascript/flavours/glitch/styles/components/status.scss b/app/javascript/flavours/glitch/styles/components/status.scss
@@ -77,6 +77,10 @@
     }
   }
 
+  .status__quote {
+    padding-bottom: 0.5em;
+  }
+
   .status__quote,
   .status__content__text,
   .e-content {
@@ -124,6 +128,11 @@
       font-style: italic;
     }
 
+    i[role=img] {
+      font-style: normal;
+      padding-right: 0.25em;
+    }
+
     sub {
       font-size: smaller;
       vertical-align: sub;