fix: change unlisted quote display

mashirozx · Mar 13, 2021 · b1b2585 · b1b2585
1 parent a8fb491
commit b1b2585
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 3 deletions.
diff --git a/app/javascript/mastodon/components/status.js b/app/javascript/mastodon/components/status.js
@@ -610,11 +610,15 @@ class Status extends ImmutablePureComponent {
       }
 
       if (quote_status.get('visibility') === 'unlisted' && contextType !== 'home') {
-        unlistedQuoteText = intl.formatMessage({ id: 'status.unlisted_quote', defaultMessage: 'Unlisted quote' });
+        unlistedQuoteText = intl.formatMessage({ id: 'status.unlisted_quote', defaultMessage: 'Unlisted quote content, click to expand' });
         quote = (
           <div className={classNames('quote-status', `status-${quote_status.get('visibility')}`, { muted: this.props.muted })} data-id={quote_status.get('id')}>
             <div className={classNames('status__content unlisted-quote', { 'status__content--with-action': this.context.router })}>
-              <button onClick={this.handleQuoteClick}>{unlistedQuoteText}</button>
+              <button onClick={this.handleQuoteClick}>
+                <Icon id='unlock:fad' />
+                {unlistedQuoteText}
+                <Icon id='angle-double-right:fad' />
+              </button>
             </div>
           </div>
         );

diff --git a/app/javascript/mastodon/locales/defaultMessages.json b/app/javascript/mastodon/locales/defaultMessages.json
@@ -458,7 +458,7 @@
         "id": "status.quote"
       },
       {
-        "defaultMessage": "Unlisted quote",
+        "defaultMessage": "Unlisted quote content, click to expand",
         "id": "status.unlisted_quote"
       },
       {

diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
@@ -1044,6 +1044,19 @@
       outline: none;
       padding: 0;
       appearance: none;
+      text-align: left;
+
+      i {
+        font-style: normal;
+
+        &:first-child{
+          margin-right: 4px;
+        }
+
+        &:last-child{
+          margin-left: 4px;
+        }
+      }
     }
   }