Added support for Mastodon custom emojis in display names.

- Added support for Mastodon custom emojis in display names, with downloads of course. - Improved accessibility of the embeds. - Updated Twitter embeds to match closely the real ones. - Centering fixes on some themes.
Nebulius · Apr 22, 2019 · f848324 · f848324
1 parent 27de887
commit f848324
Show file tree

Hide file tree

Showing 10 changed files with 71 additions and 31 deletions.
diff --git a/assets/css-compiled/sse.min.css b/assets/css-compiled/sse.min.css
diff --git a/assets/scss/sse/_instagram.scss b/assets/scss/sse/_instagram.scss
@@ -1,4 +1,7 @@
 &.sse-instagram {
+    margin: 1rem auto;
+    padding: 0;
+
     font-size: $instagram-font-size-normal;
 
     header {

diff --git a/assets/scss/sse/_mastodon.scss b/assets/scss/sse/_mastodon.scss
@@ -70,20 +70,13 @@
                 font-size: 0;
                 line-height: 0;
             }
-
-            .sse-mastodon-custom-emoji {
-                position: relative;
-                top: .1rem;
-
-                height: $mastodon-font-size-medium;
-            }
         }
 
         &.sse-spoiler-text {
             .sse-spoiler-text-toggle-handle {
                 display: inline-block;
                 margin-left: 1rem;
-                padding: 0 1rem;
+                padding: .2rem 1rem 0;
                 vertical-align: middle;
 
                 border: 0;
@@ -213,6 +206,13 @@
         padding-bottom: .3rem;
     }
 
+    .sse-mastodon-custom-emoji {
+        position: relative;
+        top: .1rem;
+
+        height: $mastodon-font-size-medium;
+    }
+
     &.sse-theme-dark {
         border-color: $mastodon-dark-border;
         background-color: $mastodon-dark-background;

diff --git a/assets/scss/sse/_twitter.scss b/assets/scss/sse/_twitter.scss
@@ -1,4 +1,7 @@
 &.sse-status {
+    margin: 1rem auto;
+    padding: 0;
+
     width: 66%;
     max-width: 800px;
 
@@ -433,7 +436,7 @@
 
                 li {
                     display: inline-block;
-                    width: 6rem;
+                    width: 4rem;
 
                     text-align: left;
                     font-size: $twitter-font-size-medium;
@@ -462,6 +465,15 @@
 
                     a {
                         color: lighten($twitter-light-text-gray, 16%);
+                        text-decoration: none;
+
+                        .icon {
+                            // Hack for themes including Line-Awesome (that's the case of the default theme, Quark).
+                            // These are using the same class names as Font-Awesome and mess with the icon font.
+                            .fas.fa-reply:before {
+                                content: "\f3e5" !important;
+                            }
+                        }
 
                         .stat {
                             position: relative;

diff --git a/languages/en.yaml b/languages/en.yaml
@@ -16,7 +16,7 @@ PLUGIN_SSE:
     REPLY: Reply
     RETWEETS: $rts retweets
     LIKES: $likes likes
-    SEND: Send tweet
+    SHARE: Share tweet
   MASTODON:
     CANNOT_RENDER: Unable to render toot.
     VIEW_ON_MASTODON: (Click to view on Mastodon.)

diff --git a/languages/fr.yaml b/languages/fr.yaml
@@ -16,7 +16,7 @@ PLUGIN_SSE:
     REPLY: Répondre
     RETWEETS: $rts retweets
     LIKES: $likes mentions j'aime
-    SEND: Envoyer le tweet
+    SHARE: Partager le tweet
   MASTODON:
     CANNOT_RENDER: Impossible d'afficher le toot.
     VIEW_ON_MASTODON: (Cliquez pour le voir sur Mastodon.)

diff --git a/shortcodes/MastodonShortcode.php b/shortcodes/MastodonShortcode.php
@@ -174,6 +174,20 @@ protected function getData($url)
             }
         }
 
+        // Also emojis in the display name
+
+        if (isset($toot['account']['emojis']) && !empty($toot['account']['emojis']))
+        {
+            foreach ($toot['account']['emojis'] as $emoji)
+            {
+                $toot['account']['display_name'] = str_replace(
+                    ':' . $emoji['shortcode'] . ':',
+                    '<img src="' . $this->fetchImage($emoji['url']) . '" alt="' . $emoji['shortcode'] . '" class="sse-mastodon-custom-emoji" />',
+                    $toot['account']['display_name']
+                );
+            }
+        }
+
         return $toot;
     }
 }
diff --git a/templates/partials/static-social-embeds/instagram.html.twig b/templates/partials/static-social-embeds/instagram.html.twig
@@ -91,13 +91,22 @@
         </aside>
 
         <aside class="sse-status-instagram-links">
-            <a href="{{ link }}" class="sse-status-instagram-links-like" aria-label="{{ 'PLUGIN_SSE.INSTAGRAM.BUTTONS_ACCESSIBILITY.LIKES'|t|replace({'$likes': stats.likes}) }}">
+            <a href="{{ link }}"
+               class="sse-status-instagram-links-like"
+               aria-label="{{ 'PLUGIN_SSE.INSTAGRAM.BUTTONS_ACCESSIBILITY.LIKES'|t|replace({'$likes': stats.likes}) }}"
+               title="{{ 'PLUGIN_SSE.INSTAGRAM.BUTTONS_ACCESSIBILITY.LIKES'|t|replace({'$likes': stats.likes}) }}">
                 <span class="far fa-heart" aria-hidden="true"></span>
             </a>
-            <a href="{{ link }}" class="sse-status-instagram-links-comment" aria-label="{{ 'PLUGIN_SSE.INSTAGRAM.BUTTONS_ACCESSIBILITY.COMMENTS'|t|replace({'$comments': stats.comments}) }}">
+            <a href="{{ link }}"
+               class="sse-status-instagram-links-comment"
+               aria-label="{{ 'PLUGIN_SSE.INSTAGRAM.BUTTONS_ACCESSIBILITY.COMMENTS'|t|replace({'$comments': stats.comments}) }}"
+               title="{{ 'PLUGIN_SSE.INSTAGRAM.BUTTONS_ACCESSIBILITY.COMMENTS'|t|replace({'$comments': stats.comments}) }}">
                 <span class="far fa-comment fa-flip-horizontal" aria-hidden="true"></span>
             </a>
-            <a href="{{ link }}" class="sse-status-instagram-links-bookmark" aria-label="{{ 'PLUGIN_SSE.INSTAGRAM.BUTTONS_ACCESSIBILITY.BOOKMARK'|t }}">
+            <a href="{{ link }}"
+               class="sse-status-instagram-links-bookmark"
+               aria-label="{{ 'PLUGIN_SSE.INSTAGRAM.BUTTONS_ACCESSIBILITY.BOOKMARK'|t }}"
+               title="{{ 'PLUGIN_SSE.INSTAGRAM.BUTTONS_ACCESSIBILITY.BOOKMARK'|t }}">
                 <span class="far fa-bookmark" aria-hidden="true"></span>
             </a>
         </aside>

diff --git a/templates/partials/static-social-embeds/toot.html.twig b/templates/partials/static-social-embeds/toot.html.twig
@@ -41,7 +41,7 @@
                 </a>
             </div>
         </header>
-
+        
         {% if spoiler_text %}
             <p class="sse-status-content sse-spoiler-text">
                 {{ spoiler_text }} <button class="sse-spoiler-text-toggle-handle" data-show="{{ 'PLUGIN_SSE.MASTODON.SHOW_MORE'|t }}" data-hide="{{ 'PLUGIN_SSE.MASTODON.SHOW_LESS'|t }}" aria-haspopup="true">{{ 'PLUGIN_SSE.MASTODON.SHOW_MORE'|t }}</button>
@@ -114,13 +114,15 @@
                     } -%}
                     <span class="{{ visibility_icons[visibility] }}"></span>
                 </li>
-                <li class="sse-mastodon-stats-application">
-                    {%- if application.website -%}
-                        <a href="{{ application.website }}">{{ application.name }}</a>
-                    {%- else -%}
-                        {{- application.name -}}
-                    {%- endif -%}
-                </li>
+                {%- if application -%}
+                    <li class="sse-mastodon-stats-application">
+                        {%- if application.website -%}
+                            <a href="{{ application.website }}">{{ application.name }}</a>
+                        {%- else -%}
+                            {{- application.name -}}
+                        {%- endif -%}
+                    </li>
+                {%- endif -%}
                 <li title="{{ ('PLUGIN_SSE.' ~ federation_software|upper ~ '.REBLOGS')|t|replace({'$rbls': reblogs_count}) }}" class="sse-mastodon-stats-reblogs">
                     <span class="fas fa-retweet" aria-hidden="true"></span> {{ reblogs_count -}}
                 </li>

diff --git a/templates/partials/static-social-embeds/tweet.html.twig b/templates/partials/static-social-embeds/tweet.html.twig
@@ -134,29 +134,29 @@
             <aside class="sse-status-stats">
                 <ul>
                     <li class="link-reply">
-                        <a href="{{ tweet.link }}">
+                        <a href="{{ tweet.link }}" title="{{ 'PLUGIN_SSE.TWITTER.REPLY'|t }}">
                             <span class="icon" aria-hidden="true"><span class="fas fa-reply"></span></span>
                             <span class="sr-only">{{ 'PLUGIN_SSE.TWITTER.REPLY'|t }}</span>
                         </a>
                     </li>
                     <li class="link-retweet">
-                        <a href="{{ tweet.link }}">
+                        <a href="{{ tweet.link }}" title="{{ 'PLUGIN_SSE.TWITTER.RETWEETS'|t|replace({'$rts': tweet.stats.retweets}) }}">
                             <span class="icon" aria-hidden="true"><span class="fas fa-retweet"></span></span>
-                            <span class="stat" aria-hidden="true">{{ tweet.stats.retweets|number_format }}</span>
+                            {% if tweet.stats.retweets > 0 %}<span class="stat" aria-hidden="true">{{ tweet.stats.retweets|number_format }}</span>{% endif %}
                             <span class="sr-only">{{ 'PLUGIN_SSE.TWITTER.RETWEETS'|t|replace({'$rts': tweet.stats.retweets}) }}</span>
                         </a>
                     </li>
                     <li class="link-like">
-                        <a href="{{ tweet.link }}">
+                        <a href="{{ tweet.link }}" title="{{ 'PLUGIN_SSE.TWITTER.LIKES'|t|replace({'$likes': tweet.stats.likes}) }}">
                             <span class="icon" aria-hidden="true"><span class="far fa-heart"></span></span>
-                            <span class="stat" aria-hidden="true">{{ tweet.stats.likes|number_format }}</span>
+                            {% if tweet.stats.likes > 0 %}<span class="stat" aria-hidden="true">{{ tweet.stats.likes|number_format }}</span>{% endif %}
                             <span class="sr-only">{{ 'PLUGIN_SSE.TWITTER.LIKES'|t|replace({'$likes': tweet.stats.likes}) }}</span>
                         </a>
                     </li>
                     <li class="link-send">
-                        <a href="{{ tweet.link }}">
-                            <span class="icon" aria-hidden="true"><span class="far fa-envelope"></span></span>
-                            <span class="sr-only">{{ 'PLUGIN_SSE.TWITTER.SEND'|t }}</span>
+                        <a href="{{ tweet.link }}" title="{{ 'PLUGIN_SSE.TWITTER.SHARE'|t }}">
+                            <span class="icon" aria-hidden="true"><span class="fas fa-sign-out-alt fa-rotate-270"></span></span>
+                            <span class="sr-only">{{ 'PLUGIN_SSE.TWITTER.SHARE'|t }}</span>
                         </a>
                     </li>
                 </ul>