Merge remote-tracking branch 'upstream/develop' into search-mobile-fixes

* upstream/develop: addressed PR comments added tooltip Add userId property to timelines so that we don't overwrite user timeline meant for another user Added option to auto-hide subject field when it's empty. removes hacks from notifications storage, adds api call to let server update is_seen attribute fixes vimium not giving retweet button a hint
2018-12-04 09:56:45 +03:00 · 2018-12-04 09:56:45 +03:00 · 7a13c530c7
commit 7a13c530c7
parent 6b3489a4d3 480f617c09
23 changed files with 94 additions and 33 deletions
--- a/src/App.vue
+++ b/src/App.vue
@ -11,7 +11,7 @@
        </div>
        <div class='item right'>
          <user-finder class="nav-icon" @toggled="onFinderToggled"></user-finder>
-          <router-link @click.native="activatePanel('timeline')" :to="{ name: 'settings'}"><i class="icon-cog nav-icon"></i></router-link>
+          <router-link @click.native="activatePanel('timeline')" :to="{ name: 'settings'}"><i class="icon-cog nav-icon" :title="$t('nav.preferences')"></i></router-link>
          <a href="#" v-if="currentUser" @click.prevent="logout"><i class="icon-logout nav-icon" :title="$t('login.logout')"></i></a>
        </div>
      </div>
--- a/src/components/favorite_button/favorite_button.vue
+++ b/src/components/favorite_button/favorite_button.vue
@ -1,10 +1,10 @@
 <template>
  <div v-if="loggedIn">
-    <i :class='classes' class='favorite-button fav-active' @click.prevent='favorite()'/>
+    <i :class='classes' class='favorite-button fav-active' @click.prevent='favorite()' :title="$t('tool_tip.favorite')"/>
    <span v-if='!hidePostStatsLocal && status.fave_num > 0'>{{status.fave_num}}</span>
  </div>
  <div v-else>
-    <i :class='classes' class='favorite-button'/>
+    <i :class='classes' class='favorite-button' :title="$t('tool_tip.favorite')"/>
    <span v-if='!hidePostStatsLocal && status.fave_num > 0'>{{status.fave_num}}</span>
  </div>
 </template>
--- a/src/components/media_upload/media_upload.vue
+++ b/src/components/media_upload/media_upload.vue
@ -1,6 +1,6 @@
 <template>
  <div class="media-upload" @drop.prevent @dragover.prevent="fileDrag" @drop="fileDrop">
-    <label class="btn btn-default">
+    <label class="btn btn-default" :title="$t('tool_tip.media_upload')">
      <i class="icon-spin4 animate-spin" v-if="uploading"></i>
      <i class="icon-upload" v-if="!uploading"></i>
      <input type="file" style="position: fixed; top: -100em" multiple="true"></input>
--- a/src/components/notification/notification.vue
+++ b/src/components/notification/notification.vue
@ -17,7 +17,7 @@
            <small>{{$t('notifications.favorited_you')}}</small>
          </span>
          <span v-if="notification.type === 'repeat'">
-            <i class="fa icon-retweet lit"></i>
+            <i class="fa icon-retweet lit" :title="$t('tool_tip.repeat')"></i>
            <small>{{$t('notifications.repeated_you')}}</small>
          </span>
          <span v-if="notification.type === 'follow'">
--- a/src/components/notifications/notifications.js
+++ b/src/components/notifications/notifications.js
@ -52,7 +52,7 @@ const Notifications = {
  },
  methods: {
    markAsSeen () {
-      this.$store.commit('markNotificationsAsSeen', this.visibleNotifications)
+      this.$store.dispatch('markNotificationsAsSeen', this.visibleNotifications)
    },
    fetchOlderNotifications () {
      const store = this.$store
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@ -150,6 +150,15 @@ const PostStatusForm = {
    scopeOptionsEnabled () {
      return this.$store.state.instance.scopeOptionsEnabled
    },
+    alwaysShowSubject () {
+      if (typeof this.$store.state.config.alwaysShowSubjectInput !== 'undefined') {
+        return this.$store.state.config.alwaysShowSubjectInput
+      } else if (typeof this.$store.state.instance.alwaysShowSubjectInput !== 'undefined') {
+        return this.$store.state.instance.alwaysShowSubjectInput
+      } else {
+        return this.$store.state.instance.scopeOptionsEnabled
+      }
+    },
    formattingOptionsEnabled () {
      return this.$store.state.instance.formattingOptionsEnabled
    }
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@ -11,7 +11,7 @@
      </i18n>
      <p v-if="this.newStatus.visibility == 'direct'" class="visibility-notice">{{ $t('post_status.direct_warning') }}</p>
      <input
-        v-if="scopeOptionsEnabled"
+        v-if="newStatus.spoilerText || alwaysShowSubject"
        type="text"
        :placeholder="$t('post_status.content_warning')"
        v-model="newStatus.spoilerText"
--- a/src/components/retweet_button/retweet_button.vue
+++ b/src/components/retweet_button/retweet_button.vue
@ -1,7 +1,7 @@
 <template>
  <div v-if="loggedIn">
    <template v-if="visibility !== 'private' && visibility !== 'direct'">
-      <i :class='classes' class='icon-retweet rt-active' v-on:click.prevent='retweet()'></i>
+      <i :class='classes' class='retweet-button icon-retweet rt-active' v-on:click.prevent='retweet()' :title="$t('tool_tip.repeat')"></i>
      <span v-if='!hidePostStatsLocal && status.repeat_num > 0'>{{status.repeat_num}}</span>
    </template>
    <template v-else>
@ -9,7 +9,7 @@
    </template>
  </div>
  <div v-else-if="!loggedIn">
-    <i :class='classes' class='icon-retweet'></i>
+    <i :class='classes' class='icon-retweet' :title="$t('tool_tip.repeat')"></i>
    <span v-if='!hidePostStatsLocal && status.repeat_num > 0'>{{status.repeat_num}}</span>
  </div>
 </template>
--- a/src/components/settings/settings.js
+++ b/src/components/settings/settings.js
@ -38,6 +38,10 @@ const settings = {
        ? instance.subjectLineBehavior
        : user.subjectLineBehavior,
      subjectLineBehaviorDefault: instance.subjectLineBehavior,
+      alwaysShowSubjectInputLocal: typeof user.alwaysShowSubjectInput === 'undefined'
+        ? instance.alwaysShowSubjectInput
+        : user.alwaysShowSubjectInput,
+      alwaysShowSubjectInputDefault: instance.alwaysShowSubjectInput,
      scopeCopyLocal: user.scopeCopy,
      scopeCopyDefault: this.$t('settings.values.' + instance.scopeCopy),
      stopGifs: user.stopGifs,
@ -122,6 +126,9 @@ const settings = {
    scopeCopyLocal (value) {
      this.$store.dispatch('setOption', { name: 'scopeCopy', value })
    },
+    alwaysShowSubjectInputLocal (value) {
+      this.$store.dispatch('setOption', { name: 'alwaysShowSubjectInput', value })
+    },
    subjectLineBehaviorLocal (value) {
      this.$store.dispatch('setOption', { name: 'subjectLineBehavior', value })
    },
--- a/src/components/settings/settings.vue
+++ b/src/components/settings/settings.vue
@ -63,6 +63,12 @@
                {{$t('settings.scope_copy')}} {{$t('settings.instance_default', { value: scopeCopyDefault })}}
              </label>
            </li>
+            <li>
+              <input type="checkbox" id="subjectHide" v-model="alwaysShowSubjectInputLocal">
+              <label for="subjectHide">
+                {{$t('settings.subject_input_always_show')}} {{$t('settings.instance_default', { value: alwaysShowSubjectInputDefault })}}
+              </label>
+            </li>
            <li>
              <div>
                {{$t('settings.subject_line_behavior')}}
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@ -13,7 +13,7 @@
        <div class="media-body faint">
          <a v-if="retweeterHtml" :href="statusoid.user.statusnet_profile_url" class="user-name" :title="'@'+statusoid.user.screen_name" v-html="retweeterHtml"></a>
          <a v-else :href="statusoid.user.statusnet_profile_url" class="user-name" :title="'@'+statusoid.user.screen_name">{{retweeter}}</a>
-          <i class='fa icon-retweet retweeted'></i>
+          <i class='fa icon-retweet retweeted' :title="$t('tool_tip.repeat')"></i>
          {{$t('timeline.repeated')}}
        </div>
      </div>
@ -41,7 +41,7 @@
                      {{status.in_reply_to_screen_name}}
                    </router-link>
                  </span>
-                  <a v-if="isReply && !noReplyLinks" href="#" @click.prevent="gotoOriginal(status.in_reply_to_status_id)">
+                  <a v-if="isReply && !noReplyLinks" href="#" @click.prevent="gotoOriginal(status.in_reply_to_status_id)" :title="$t('tool_tip.reply')">
                    <i class="icon-reply" @mouseenter="replyEnter(status.in_reply_to_status_id, $event)" @mouseout="replyLeave()"></i>
                  </a>
                </span>
@ -94,7 +94,7 @@

          <div v-if="!noHeading && !noReplyLinks" class='status-actions media-body'>
            <div v-if="loggedIn">
-              <a href="#" v-on:click.prevent="toggleReplying">
+              <a href="#" v-on:click.prevent="toggleReplying" :title="$t('tool_tip.reply')">
                <i class="icon-reply" :class="{'icon-reply-active': replying}"></i>
              </a>
            </div>
--- a/src/components/user_finder/user_finder.vue
+++ b/src/components/user_finder/user_finder.vue
@ -1,7 +1,7 @@
 <template>
  <span class="user-finder-container">
    <i class="icon-spin4 user-finder-icon animate-spin-slow" v-if="loading" />
-    <a href="#" v-if="hidden"><i class="icon-user-plus user-finder-icon" @click.prevent.stop="toggleHidden"/></a>
+    <a href="#" v-if="hidden" :title="$t('finder.find_user')"><i class="icon-user-plus user-finder-icon" @click.prevent.stop="toggleHidden" /></a>
    <template v-else>
      <input class="user-finder-input" @keyup.enter="findUser(username)" v-model="username" :placeholder="$t('finder.find_user')" id="user-finder-input" type="text"/>
      <button class="btn search-button" @click="findUser(username)">
--- a/src/components/user_profile/user_profile.js
+++ b/src/components/user_profile/user_profile.js
@ -27,6 +27,7 @@ const UserProfile = {
  },
  watch: {
    userId () {
+      this.$store.dispatch('stopFetching', 'user')
      this.$store.commit('clearTimeline', { timeline: 'user' })
      this.$store.dispatch('startFetching', ['user', this.userId])
    }
--- a/src/components/user_settings/user_settings.vue
+++ b/src/components/user_settings/user_settings.vue
@ -19,10 +19,10 @@
            <div v-if="scopeOptionsEnabled">
              <label for="default-vis">{{$t('settings.default_vis')}}</label>
              <div id="default-vis" class="visibility-tray">
-                <i v-on:click="changeVis('direct')" class="icon-mail-alt" :class="vis.direct"></i>
-                <i v-on:click="changeVis('private')" class="icon-lock" :class="vis.private"></i>
-                <i v-on:click="changeVis('unlisted')" class="icon-lock-open-alt" :class="vis.unlisted"></i>
-                <i v-on:click="changeVis('public')" class="icon-globe" :class="vis.public"></i>
+                <i v-on:click="changeVis('direct')" class="icon-mail-alt" :class="vis.direct" :title="$t('post_status.scope.direct')" ></i>
+                <i v-on:click="changeVis('private')" class="icon-lock" :class="vis.private" :title="$t('post_status.scope.private')"></i>
+                <i v-on:click="changeVis('unlisted')" class="icon-lock-open-alt" :class="vis.unlisted" :title="$t('post_status.scope.unlisted')"></i>
+                <i v-on:click="changeVis('public')" class="icon-globe" :class="vis.public" :title="$t('post_status.scope.public')"></i>
              </div>
            </div>
            <p>
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@ -36,7 +36,8 @@
    "public_tl": "Public Timeline",
    "timeline": "Timeline",
    "twkn": "The Whole Known Network",
-    "user_search": "User Search"
+    "user_search": "User Search",
+    "preferences": "Preferences"
  },
  "notifications": {
    "broken_favorite": "Unknown status, searching for it...",
@ -159,6 +160,7 @@
    "set_new_profile_background": "Set new profile background",
    "set_new_profile_banner": "Set new profile banner",
    "settings": "Settings",
+    "subject_input_always_show": "Always show subject field",
    "subject_line_behavior": "Copy subject when replying",
    "subject_line_email": "Like email: \"re: subject\"",
    "subject_line_mastodon": "Like mastodon: copy as is",
@ -207,5 +209,11 @@
  "who_to_follow": {
    "more": "More",
    "who_to_follow": "Who to follow"
+  },
+  "tool_tip": {
+    "media_upload": "Upload Media",
+    "repeat": "Repeat",
+    "reply": "Reply",
+    "favorite": "Favorite"
  }
 }
--- a/src/i18n/ru.json
+++ b/src/i18n/ru.json
@ -133,6 +133,7 @@
    "set_new_profile_background": "Загрузить новый фон профиля",
    "set_new_profile_banner": "Загрузить новый баннер профиля",
    "settings": "Настройки",
+    "subject_input_always_show": "Всегда показывать поле ввода темы",
    "stop_gifs": "Проигрывать GIF анимации только при наведении",
    "streaming": "Включить автоматическую загрузку новых сообщений при прокрутке вверх",
    "text": "Текст",
--- a/src/main.js
+++ b/src/main.js
@ -47,7 +47,6 @@ const persistedStateOptions = {
  paths: [
    'config',
    'users.lastLoginName',
-    'statuses.notifications.maxSavedId',
    'oauth'
  ]
 }
--- a/src/modules/config.js
+++ b/src/modules/config.js
@ -27,7 +27,8 @@ const defaultState = {
  highlight: {},
  interfaceLanguage: browserLocale,
  scopeCopy: undefined, // instance default
-  subjectLineBehavior: undefined // instance default
+  subjectLineBehavior: undefined, // instance default
+  alwaysShowSubjectInput: undefined // instance default
 }

 const config = {
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@ -17,6 +17,7 @@ const defaultState = {
  showInstanceSpecificPanel: false,
  scopeOptionsEnabled: true,
  formattingOptionsEnabled: false,
+  alwaysShowSubjectInput: true,
  collapseMessageWithSubject: false,
  hidePostStats: false,
  hideUserStats: false,
--- a/src/modules/statuses.js
+++ b/src/modules/statuses.js
@ -1,5 +1,4 @@
 import { includes, remove, slice, sortBy, toInteger, each, find, flatten, maxBy, minBy, merge, last, isArray } from 'lodash'
-import { set } from 'vue'
 import apiService from '../services/api/api.service.js'
 // import parse from '../services/status_parser/status_parser.js'

@ -16,6 +15,7 @@ const emptyTl = () => ({
  followers: [],
  friends: [],
  viewing: 'statuses',
+  userId: 0,
  flushMarker: 0
 })

@ -26,7 +26,6 @@ export const defaultState = {
  notifications: {
    desktopNotificationSilence: true,
    maxId: 0,
-    maxSavedId: 0,
    minId: Number.POSITIVE_INFINITY,
    data: [],
    error: false,
@ -132,7 +131,7 @@ const sortTimeline = (timeline) => {
  return timeline
 }

-const addNewStatuses = (state, { statuses, showImmediately = false, timeline, user = {}, noIdUpdate = false }) => {
+const addNewStatuses = (state, { statuses, showImmediately = false, timeline, user = {}, noIdUpdate = false, userId }) => {
  // Sanity check
  if (!isArray(statuses)) {
    return false
@ -149,6 +148,13 @@ const addNewStatuses = (state, { statuses, showImmediately = false, timeline, us
    timelineObject.maxId = maxNew
  }

+  // This makes sure that user timeline won't get data meant for other
+  // user. I.e. opening different user profiles makes request which could
+  // return data late after user already viewing different user profile
+  if (timeline === 'user' && timelineObject.userId !== userId) {
+    return
+  }
+
  const addStatus = (status, showImmediately, addToTimeline = true) => {
    const result = mergeOrAdd(allStatuses, allStatusesObject, status)
    status = result.item
@ -297,7 +303,7 @@ const addNewNotifications = (state, { dispatch, notifications, older, visibleNot
      state.notifications.maxId = Math.max(notification.id, state.notifications.maxId)
      state.notifications.minId = Math.min(notification.id, state.notifications.minId)

-      const fresh = !older && !notification.is_seen && notification.id > state.notifications.maxSavedId
+      const fresh = !notification.is_seen
      const status = notification.ntype === 'like'
            ? find(allStatuses, { id: action.in_reply_to_status_id })
            : action
@ -306,7 +312,6 @@ const addNewNotifications = (state, { dispatch, notifications, older, visibleNot
        type: notification.ntype,
        status,
        action,
-        // Always assume older notifications as seen
        seen: !fresh
      }

@ -404,9 +409,8 @@ export const mutations = {
  addFollowers (state, { followers }) {
    state.timelines['user'].followers = followers
  },
-  markNotificationsAsSeen (state, notifications) {
-    set(state.notifications, 'maxSavedId', state.notifications.maxId)
-    each(notifications, (notification) => {
+  markNotificationsAsSeen (state) {
+    each(state.notifications.data, (notification) => {
      notification.seen = true
    })
  },
@ -418,8 +422,8 @@ export const mutations = {
 const statuses = {
  state: defaultState,
  actions: {
-    addNewStatuses ({ rootState, commit }, { statuses, showImmediately = false, timeline = false, noIdUpdate = false }) {
-      commit('addNewStatuses', { statuses, showImmediately, timeline, noIdUpdate, user: rootState.users.currentUser })
+    addNewStatuses ({ rootState, commit }, { statuses, showImmediately = false, timeline = false, noIdUpdate = false, userId }) {
+      commit('addNewStatuses', { statuses, showImmediately, timeline, noIdUpdate, user: rootState.users.currentUser, userId })
    },
    addNewNotifications ({ rootState, commit, dispatch }, { notifications, older }) {
      commit('addNewNotifications', { visibleNotificationTypes: visibleNotificationTypes(rootState), dispatch, notifications, older })
@ -484,6 +488,13 @@ const statuses = {
    },
    queueFlush ({ rootState, commit }, { timeline, id }) {
      commit('queueFlush', { timeline, id })
+    },
+    markNotificationsAsSeen ({ rootState, commit }) {
+      commit('markNotificationsAsSeen')
+      apiService.markNotificationsAsSeen({
+        id: rootState.statuses.notifications.maxId,
+        credentials: rootState.users.currentUser.credentials
+      })
    }
  },
  mutations
--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@ -29,6 +29,7 @@ const PROFILE_UPDATE_URL = '/api/account/update_profile.json'
 const EXTERNAL_PROFILE_URL = '/api/externalprofile/show.json'
 const QVITTER_USER_TIMELINE_URL = '/api/qvitter/statuses/user_timeline.json'
 const QVITTER_USER_NOTIFICATIONS_URL = '/api/qvitter/statuses/notifications.json'
+const QVITTER_USER_NOTIFICATIONS_READ_URL = '/api/qvitter/statuses/notifications/read.json'
 const BLOCKING_URL = '/api/blocks/create.json'
 const UNBLOCKING_URL = '/api/blocks/destroy.json'
 const USER_URL = '/api/users/show.json'
@ -460,6 +461,18 @@ const suggestions = ({credentials}) => {
  }).then((data) => data.json())
 }

+const markNotificationsAsSeen = ({id, credentials}) => {
+  const body = new FormData()
+
+  body.append('latest_id', id)
+
+  return fetch(QVITTER_USER_NOTIFICATIONS_READ_URL, {
+    body,
+    headers: authHeaders(credentials),
+    method: 'POST'
+  }).then((data) => data.json())
+}
+
 const apiService = {
  verifyCredentials,
  fetchTimeline,
@ -494,7 +507,8 @@ const apiService = {
  fetchFollowRequests,
  approveUser,
  denyUser,
-  suggestions
+  suggestions,
+  markNotificationsAsSeen
 }

 export default apiService
--- a/src/services/timeline_fetcher/timeline_fetcher.service.js
+++ b/src/services/timeline_fetcher/timeline_fetcher.service.js
@ -2,13 +2,14 @@ import { camelCase } from 'lodash'

 import apiService from '../api/api.service.js'

-const update = ({store, statuses, timeline, showImmediately}) => {
+const update = ({store, statuses, timeline, showImmediately, userId}) => {
  const ccTimeline = camelCase(timeline)

  store.dispatch('setError', { value: false })

  store.dispatch('addNewStatuses', {
    timeline: ccTimeline,
+    userId,
    statuses,
    showImmediately
  })
@ -33,7 +34,7 @@ const fetchAndUpdate = ({store, credentials, timeline = 'friends', older = false
      if (!older && statuses.length >= 20 && !timelineData.loading) {
        store.dispatch('queueFlush', { timeline: timeline, id: timelineData.maxId })
      }
-      update({store, statuses, timeline, showImmediately})
+      update({store, statuses, timeline, showImmediately, userId})
    }, () => store.dispatch('setError', { value: true }))
 }

@ -41,6 +42,7 @@ const startFetching = ({timeline = 'friends', credentials, store, userId = false
  const rootState = store.rootState || store.state
  const timelineData = rootState.statuses.timelines[camelCase(timeline)]
  const showImmediately = timelineData.visibleStatuses.length === 0
+  timelineData.userId = userId
  fetchAndUpdate({timeline, credentials, store, showImmediately, userId, tag})
  const boundFetchAndUpdate = () => fetchAndUpdate({ timeline, credentials, store, userId, tag })
  return setInterval(boundFetchAndUpdate, 10000)
--- a/static/config.json
+++ b/static/config.json
@ -13,6 +13,7 @@
  "collapseMessageWithSubject": false,
  "scopeCopy": false,
  "subjectLineBehavior": "email",
+  "alwaysShowSubjectInput": true,
  "hidePostStats": false,
  "hideUserStats": false,
  "loginMethod": "password"