Merge branch 'develop' into 'feature/accountHighlight'

# Conflicts:
#   src/components/user_card_content/user_card_content.vue

src/App.scss

@@ -168,6 +168,13 @@ input, textarea, .select {
   }
 }
 
+option {
+  color: $fallback--fg;
+  color: var(--fg, $fallback--fg);
+  background-color: $fallback--bg;
+  background-color: var(--bg, $fallback--bg);
+}
+
 i[class*=icon-] {
   color: $fallback--icon;
   color: var(--icon, $fallback--icon)

src/components/notification/notification.vue

@@ -10,7 +10,8 @@
       </div>
       <span class="notification-details">
         <div class="name-and-action">
-          <span class="username" :title="'@'+notification.action.user.screen_name">{{ notification.action.user.name }}</span>
+          <span class="username" v-if="!!notification.action.user.name_html" :title="'@'+notification.action.user.screen_name" v-html="notification.action.user.name_html"></span>
+          <span class="username" v-else :title="'@'+notification.action.user.screen_name">{{ notification.action.user.name }}</span>
           <span v-if="notification.type === 'favorite'">
             <i class="fa icon-star lit"></i>
             <small>{{$t('notifications.favorited_you')}}</small>

src/components/post_status_form/post_status_form.js

@@ -31,6 +31,10 @@ const PostStatusForm = {
   },
   mounted () {
     this.resize(this.$refs.textarea)
+
+    if (this.replyTo) {
+      this.$refs.textarea.focus()
+    }
   },
   data () {
     const preset = this.$route.query.message
@@ -87,11 +91,11 @@ const PostStatusForm = {
           return false
         }
         return map(take(matchedEmoji, 5), ({shortcode, image_url, utf}, index) => ({
-          // eslint-disable-next-line camelcase
           screen_name: `:${shortcode}:`,
           name: '',
           utf: utf || '',
-          img: image_url,
+          // eslint-disable-next-line camelcase
+          img: utf ? '' : this.$store.state.config.server + image_url,
           highlighted: index === this.highlighted
         }))
       } else {

src/components/retweet_button/retweet_button.js

@@ -1,5 +1,5 @@
 const RetweetButton = {
-  props: ['status', 'loggedIn'],
+  props: ['status', 'loggedIn', 'visibility'],
   data () {
     return {
       animated: false

src/components/retweet_button/retweet_button.vue

@@ -1,9 +1,9 @@
 <template>
-  <div v-if="loggedIn">
+  <div v-if="loggedIn && visibility !== 'private' && visibility !== 'direct'">
     <i :class='classes' class='icon-retweet rt-active' v-on:click.prevent='retweet()'></i>
     <span v-if='status.repeat_num > 0'>{{status.repeat_num}}</span>
   </div>
-  <div v-else>
+  <div v-else-if="!loggedIn">
     <i :class='classes' class='icon-retweet'></i>
     <span v-if='status.repeat_num > 0'>{{status.repeat_num}}</span>
   </div>

src/components/status/status.js

@@ -60,6 +60,7 @@ const Status = {
     },
     retweet () { return !!this.statusoid.retweeted_status },
     retweeter () { return this.statusoid.user.name },
+    retweeterHtml () { return this.statusoid.user.name_html },
     status () {
       if (this.retweet) {
         return this.statusoid.retweeted_status

src/components/status/status.vue

@@ -11,7 +11,8 @@
       <div v-if="retweet && !noHeading" :class="[repeaterClass, { highlighted: repeaterStyle }]" :style="[repeaterStyle]" class="media container retweet-info">
         <StillImage v-if="retweet" class='avatar' :src="statusoid.user.profile_image_url_original"/>
         <div class="media-body faint">
-          <a :href="statusoid.user.statusnet_profile_url" style="font-weight: bold;" :title="'@'+statusoid.user.screen_name">{{retweeter}}</a>
+          <a v-if="retweeterHtml" :href="statusoid.user.statusnet_profile_url" style="font-weight: bold;" :title="'@'+statusoid.user.screen_name" v-html="retweeterHtml"></a>
+          <a v-else :href="statusoid.user.statusnet_profile_url" style="font-weight: bold;" :title="'@'+statusoid.user.screen_name">{{retweeter}}</a>
           <i class='fa icon-retweet retweeted'></i>
           {{$t('timeline.repeated')}}
         </div>
@@ -30,7 +31,8 @@
           <div v-if="!noHeading" class="media-body container media-heading">
             <div class="media-heading-left">
               <div class="name-and-links">
-                <h4 class="user-name">{{status.user.name}}</h4>
+                <h4 class="user-name" v-if="status.user.name_html" v-html="status.user.name_html"></h4>
+                <h4 class="user-name" v-else>{{status.user.name}}</h4>
                 <span class="links">
                   <router-link :to="{ name: 'user-profile', params: { id: status.user.id } }">{{status.user.screen_name}}</router-link>
                   <span v-if="status.in_reply_to_screen_name" class="faint reply-info">
@@ -88,7 +90,7 @@
                 <i class="icon-reply" :class="{'icon-reply-active': replying}"></i>
               </a>
             </div>
-            <retweet-button :loggedIn='loggedIn' :status='status'></retweet-button>
+            <retweet-button :visibility='status.visibility' :loggedIn='loggedIn' :status='status'></retweet-button>
             <favorite-button :loggedIn='loggedIn' :status='status'></favorite-button>
             <delete-button :status='status'></delete-button>
           </div>

src/components/style_switcher/style_switcher.vue

@@ -3,7 +3,10 @@
     <div>{{$t('settings.presets')}}
       <label for="style-switcher" class='select'>
         <select id="style-switcher" v-model="selected" class="style-switcher">
-          <option v-for="style in availableStyles" :value="style">{{style[0]}}</option>
+          <option v-for="style in availableStyles" :value="style" :style="{
+                  backgroundColor: style[1],
+                  color: style[3]
+                  }">{{style[0]}}</option>
         </select>
         <i class="icon-down-open"/>
       </label>

src/components/timeline/timeline.js

@@ -13,7 +13,8 @@ const Timeline = {
   ],
   data () {
     return {
-      paused: false
+      paused: false,
+      unfocused: false
     }
   },
   computed: {
@@ -65,8 +66,15 @@ const Timeline = {
       this.fetchFollowers()
     }
   },
+  mounted () {
+    if (typeof document.hidden !== 'undefined') {
+      document.addEventListener('visibilitychange', this.handleVisibilityChange, false)
+      this.unfocused = document.hidden
+    }
+  },
   destroyed () {
     window.removeEventListener('scroll', this.scrollLoad)
+    if (typeof document.hidden !== 'undefined') document.removeEventListener('visibilitychange', this.handleVisibilityChange, false)
     this.$store.commit('setLoading', { timeline: this.timelineName, value: false })
   },
   methods: {
@@ -113,6 +121,9 @@ const Timeline = {
           (window.innerHeight + window.pageYOffset) >= (height - 750)) {
         this.fetchOlderStatuses()
       }
+    },
+    handleVisibilityChange () {
+      this.unfocused = document.hidden
     }
   },
   watch: {
@@ -122,7 +133,7 @@ const Timeline = {
       }
       if (count > 0) {
         // only 'stream' them when you're scrolled to the top
-        if (window.pageYOffset < 15 && !this.paused) {
+        if (window.pageYOffset < 15 && !this.paused && !this.unfocused) {
           this.showNewStatuses()
         } else {
           this.paused = true

src/components/user_card/user_card.vue

@@ -7,10 +7,16 @@
       <user-card-content :user="user" :switcher="false"></user-card-content>
     </div>
     <div class="name-and-screen-name" v-else>
-      <div :title="user.name" class="user-name">
+      <div :title="user.name" v-if="user.name_html" class="user-name">
+        <span v-html="user.name_html"></span>
+        <span class="follows-you" v-if="!userExpanded && showFollows && user.follows_you">
+          {{ $t('user_card.follows_you') }}
+        </span>
+      </div>
+      <div :title="user.name" v-else class="user-name">
         {{ user.name }}
         <span class="follows-you" v-if="!userExpanded && showFollows && user.follows_you">
-            {{ $t('user_card.follows_you') }}
+          {{ $t('user_card.follows_you') }}
         </span>
       </div>
       <a :href="user.statusnet_profile_url" target="blank"><div class="user-screen-name">@{{ user.screen_name }}</div></a>

src/components/user_card_content/user_card_content.vue

@@ -13,7 +13,8 @@
           <StillImage class="avatar" :src="user.profile_image_url_original"/>
         </router-link>
         <div class="name-and-screen-name">
-          <div :title="user.name" class='user-name'>{{user.name}}</div>
+          <div :title="user.name" class='user-name' v-if="user.name_html" v-html="user.name_html"></div>
+          <div :title="user.name" class='user-name' v-else>{{user.name}}</div>
           <router-link class='user-screen-name':to="{ name: 'user-profile', params: { id: user.id } }">
             <span>@{{user.screen_name}}</span><span v-if="user.locked"><i class="icon icon-lock"></i></span>
             <span class="dailyAvg">{{dailyAvg}} {{ $t('user_card.per_day') }}</span>
@@ -104,7 +105,8 @@
           <span>{{user.followers_count}}</span>
         </div>
       </div>
-      <p v-if="!hideBio">{{user.description}}</p>
+      <p v-if="!hideBio && user.description_html" v-html="user.description_html"></p>
+      <p v-else-if="!hideBio">{{ user.description }}</p>
     </div>
   </div>
 </template>

src/main.js

@@ -80,11 +80,12 @@ const i18n = new VueI18n({
 window.fetch('/api/statusnet/config.json')
   .then((res) => res.json())
   .then((data) => {
-    const {name, closed: registrationClosed, textlimit} = data.site
+    const {name, closed: registrationClosed, textlimit, server} = data.site
 
     store.dispatch('setOption', { name: 'name', value: name })
     store.dispatch('setOption', { name: 'registrationOpen', value: (registrationClosed === '0') })
     store.dispatch('setOption', { name: 'textlimit', value: parseInt(textlimit) })
+    store.dispatch('setOption', { name: 'server', value: server })
   })
 
 window.fetch('/static/config.json')