Merge remote-tracking branch 'origin/develop' into disjointed-popovers

* origin/develop: (25 commits) force panel headers to be square on mobile (for now?) fix gap between panel heading and timeline menu Fix Open Chat button fix? fix Revert "Merge branch 'revert-a88abc7e' into 'develop'" Revert "Merge branch 'from/develop/tusooa/lang-opts' into 'develop'" Fix registration error stick chat scroll to bottom to help with OSK resizing the viewport Pass file name of cropped avatar to form data Add English translation for filtering end-of-poll notifications Add settings for filtering end-of-poll notifications Add English translations for poll-end notifications Show poll-end notifications Fix virtual scrolling when the user has a lot of pinned statuses Update dependency @vuelidate/core to v2.0.0-alpha.41 Make lint happy Make lint happy Add English translation for language options Add email language option to registration form ...
2022-06-08 02:13:47 +03:00 · 2022-06-08 02:13:47 +03:00 · 1154a6514b
commit 1154a6514b
parent fd831a27f4 0aa334515b
26 changed files with 224 additions and 77 deletions
--- a/src/components/account_actions/account_actions.js
+++ b/src/components/account_actions/account_actions.js
@ -40,7 +40,7 @@ const AccountActions = {
    openChat () {
      this.$router.push({
        name: 'chat',
-        params: { recipient_id: this.user.id }
+        params: { username: this.$store.state.users.currentUser.screen_name, recipient_id: this.user.id }
      })
    }
  },
--- a/src/components/chat/chat.js
+++ b/src/components/chat/chat.js
@ -43,6 +43,7 @@ const Chat = {
  },
  created () {
    this.startFetching()
+    window.addEventListener('resize', this.handleResize)
  },
  mounted () {
    window.addEventListener('scroll', this.handleScroll)
@ -132,7 +133,7 @@ const Chat = {
        }
      })
    },
-    // Preserves the scroll position when OSK appears or the posting form changes its height.
+    // "Sticks" scroll to bottom instead of top, helps with OSK resizing the viewport
    handleResize (opts = {}) {
      const { expand = false, delayed = false } = opts

@ -144,15 +145,14 @@ const Chat = {
      }

      this.$nextTick(() => {
-        const { scrollHeight = undefined } = this.lastScrollPosition
-        this.lastScrollPosition = getScrollPosition()
-
-        const diff = this.lastScrollPosition.scrollHeight - scrollHeight
-        if (diff > 0 || (!this.bottomedOut() && expand)) {
+        const { offsetHeight = undefined } = getScrollPosition()
+        const diff = this.lastScrollPosition.offsetHeight - offsetHeight
+        if (diff !== 0 || (!this.bottomedOut() && expand)) {
          this.$nextTick(() => {
            window.scrollTo({ top: window.scrollY + diff })
          })
        }
+        this.lastScrollPosition = getScrollPosition()
      })
    },
    scrollDown (options = {}) {
--- a/src/components/interface_language_switcher/interface_language_switcher.vue
+++ b/src/components/interface_language_switcher/interface_language_switcher.vue
@ -1,12 +1,12 @@
 <template>
  <div>
    <label for="interface-language-switcher">
-      {{ $t('settings.interfaceLanguage') }}
+      {{ promptText }}
    </label>
    {{ ' ' }}
    <Select
      id="interface-language-switcher"
-      v-model="language"
+      v-model="controlledLanguage"
    >
      <option
        v-for="lang in languages"
@ -20,39 +20,43 @@
 </template>

 <script>
-import languagesObject from '../../i18n/messages'
 import localeService from '../../services/locale/locale.service.js'
-import ISO6391 from 'iso-639-1'
-import _ from 'lodash'
 import Select from '../select/select.vue'

 export default {
  components: {
    Select
  },
+  props: {
+    promptText: {
+      type: String,
+      required: true
+    },
+    language: {
+      type: String,
+      required: true
+    },
+    setLanguage: {
+      type: Function,
+      required: true
+    }
+  },
  computed: {
    languages () {
-      return _.map(languagesObject.languages, (code) => ({ code: code, name: this.getLanguageName(code) })).sort((a, b) => a.name.localeCompare(b.name))
+      return localeService.languages
    },

-    language: {
-      get: function () { return this.$store.getters.mergedConfig.interfaceLanguage },
+    controlledLanguage: {
+      get: function () { return this.language },
      set: function (val) {
-        this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val })
+        this.setLanguage(val)
      }
    }
  },

  methods: {
    getLanguageName (code) {
-      const specialLanguageNames = {
-        'ja_easy': 'やさしいにほんご',
-        'zh': '简体中文',
-        'zh_Hant': '繁體中文'
-      }
-      const languageName = specialLanguageNames[code] || ISO6391.getNativeName(code)
-      const browserLocale = localeService.internalToBrowserLocale(code)
-      return languageName.charAt(0).toLocaleUpperCase(browserLocale) + languageName.slice(1)
+      return localeService.getLanguageName(code)
    }
  }
 }
--- a/src/components/notification/notification.vue
+++ b/src/components/notification/notification.vue
@ -120,6 +120,14 @@
                </i18n-t>
              </small>
            </span>
+            <span v-if="notification.type === 'poll'">
+              <FAIcon
+                class="type-icon"
+                icon="poll-h"
+              />
+              {{ ' ' }}
+              <small>{{ $t('notifications.poll_ended') }}</small>
+            </span>
          </div>
          <div
            v-if="isStatusNotification"
--- a/src/components/notifications/notification_filters.vue
+++ b/src/components/notifications/notification_filters.vue
@ -61,6 +61,15 @@
            :class="{ 'menu-checkbox-checked': filters.moves }"
          />{{ $t('settings.notification_visibility_moves') }}
        </button>
+        <button
+          class="button-default dropdown-item"
+          @click="toggleNotificationFilter('polls')"
+        >
+          <span
+            class="menu-checkbox"
+            :class="{ 'menu-checkbox-checked': filters.polls }"
+          />{{ $t('settings.notification_visibility_polls') }}
+        </button>
      </div>
    </template>
    <template v-slot:trigger>
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@ -30,7 +30,7 @@
            v-for="notification in notificationsToDisplay"
            :key="notification.id"
            class="notification"
-            :class="{&quot;unseen&quot;: !minimalMode && !notification.seen}"
+            :class="{unseen: !minimalMode && !notification.seen}"
          >
            <div class="notification-overlay" />
            <notification :notification="notification" />
--- a/src/components/registration/registration.js
+++ b/src/components/registration/registration.js
@ -1,6 +1,8 @@
 import useVuelidate from '@vuelidate/core'
 import { required, requiredIf, sameAs } from '@vuelidate/validators'
 import { mapActions, mapState } from 'vuex'
+import InterfaceLanguageSwitcher from '../interface_language_switcher/interface_language_switcher.vue'
+import localeService from '../../services/locale/locale.service.js'

 const registration = {
  setup () { return { v$: useVuelidate() } },
@ -11,10 +13,14 @@ const registration = {
      username: '',
      password: '',
      confirm: '',
-      reason: ''
+      reason: '',
+      language: ''
    },
    captcha: {}
  }),
+  components: {
+    InterfaceLanguageSwitcher
+  },
  validations () {
    return {
      user: {
@ -26,7 +32,8 @@ const registration = {
          required,
          sameAs: sameAs(this.user.password)
        },
-        reason: { required: requiredIf(() => this.accountApprovalRequired) }
+        reason: { required: requiredIf(() => this.accountApprovalRequired) },
+        language: {}
      }
    }
  },
@ -64,6 +71,9 @@ const registration = {
      this.user.captcha_solution = this.captcha.solution
      this.user.captcha_token = this.captcha.token
      this.user.captcha_answer_data = this.captcha.answer_data
+      if (this.user.language) {
+        this.user.language = localeService.internalToBackendLocale(this.user.language)
+      }

      this.v$.$touch()

--- a/src/components/registration/registration.vue
+++ b/src/components/registration/registration.vue
@ -162,6 +162,18 @@
              </ul>
            </div>

+            <div
+              class="form-group"
+              :class="{ 'form-group--error': v$.user.language.$error }"
+            >
+              <interface-language-switcher
+                for="email-language"
+                :prompt-text="$t('registration.email_language')"
+                :language="v$.user.language.$model"
+                :set-language="val => v$.user.language.$model = val"
+              />
+            </div>
+
            <div
              v-if="accountApprovalRequired"
              class="form-group"
--- a/src/components/settings_modal/tabs/general_tab.js
+++ b/src/components/settings_modal/tabs/general_tab.js
@ -77,6 +77,12 @@ const GeneralTab = {
        !this.$store.state.users.currentUser.background_image
    },
    instanceShoutboxPresent () { return this.$store.state.instance.shoutAvailable },
+    language: {
+      get: function () { return this.$store.getters.mergedConfig.interfaceLanguage },
+      set: function (val) {
+        this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val })
+      }
+    },
    ...SharedComputedObject()
  },
  methods: {
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@ -4,7 +4,11 @@
      <h2>{{ $t('settings.interface') }}</h2>
      <ul class="setting-list">
        <li>
-          <interface-language-switcher />
+          <interface-language-switcher
+            :prompt-text="$t('settings.interfaceLanguage')"
+            :language="language"
+            :set-language="val => language = val"
+          />
        </li>
        <li v-if="instanceSpecificPanelPresent">
          <BooleanSetting path="hideISP">
--- a/src/components/settings_modal/tabs/notifications_tab.vue
+++ b/src/components/settings_modal/tabs/notifications_tab.vue
@ -41,6 +41,11 @@
                {{ $t('settings.notification_visibility_emoji_reactions') }}
              </BooleanSetting>
            </li>
+            <li>
+              <BooleanSetting path="notificationVisibility.polls">
+                {{ $t('settings.notification_visibility_polls') }}
+              </BooleanSetting>
+            </li>
          </ul>
        </li>
      </ul>
--- a/src/components/settings_modal/tabs/profile_tab.js
+++ b/src/components/settings_modal/tabs/profile_tab.js
@ -8,8 +8,10 @@ import EmojiInput from 'src/components/emoji_input/emoji_input.vue'
 import suggestor from 'src/components/emoji_input/suggestor.js'
 import Autosuggest from 'src/components/autosuggest/autosuggest.vue'
 import Checkbox from 'src/components/checkbox/checkbox.vue'
+import InterfaceLanguageSwitcher from 'src/components/interface_language_switcher/interface_language_switcher.vue'
 import BooleanSetting from '../helpers/boolean_setting.vue'
 import SharedComputedObject from '../helpers/shared_computed_object.js'
+import localeService from 'src/services/locale/locale.service.js'

 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
@ -40,7 +42,8 @@ const ProfileTab = {
      banner: null,
      bannerPreview: null,
      background: null,
-      backgroundPreview: null
+      backgroundPreview: null,
+      emailLanguage: this.$store.state.users.currentUser.language || ''
    }
  },
  components: {
@ -50,7 +53,8 @@ const ProfileTab = {
    Autosuggest,
    ProgressButton,
    Checkbox,
-    BooleanSetting
+    BooleanSetting,
+    InterfaceLanguageSwitcher
  },
  computed: {
    user () {
@ -111,19 +115,25 @@ const ProfileTab = {
  },
  methods: {
    updateProfile () {
+      const params = {
+        note: this.newBio,
+        locked: this.newLocked,
+        // Backend notation.
+        /* eslint-disable camelcase */
+        display_name: this.newName,
+        fields_attributes: this.newFields.filter(el => el != null),
+        bot: this.bot,
+        show_role: this.showRole
+        /* eslint-enable camelcase */
+      }
+
+      if (this.emailLanguage) {
+        params.language = localeService.internalToBackendLocale(this.emailLanguage)
+      }
+
      this.$store.state.api.backendInteractor
-        .updateProfile({
-          params: {
-            note: this.newBio,
-            locked: this.newLocked,
-            // Backend notation.
-            /* eslint-disable camelcase */
-            display_name: this.newName,
-            fields_attributes: this.newFields.filter(el => el != null),
-            bot: this.bot,
-            show_role: this.showRole
-            /* eslint-enable camelcase */
-          } }).then((user) => {
+        .updateProfile({ params })
+        .then((user) => {
          this.newFields.splice(user.fields.length)
          merge(this.newFields, user.fields)
          this.$store.commit('addNewUsers', [user])
@ -193,8 +203,8 @@ const ProfileTab = {
    submitAvatar (cropper, file) {
      const that = this
      return new Promise((resolve, reject) => {
-        function updateAvatar (avatar) {
-          that.$store.state.api.backendInteractor.updateProfileImages({ avatar })
+        function updateAvatar (avatar, avatarName) {
+          that.$store.state.api.backendInteractor.updateProfileImages({ avatar, avatarName })
            .then((user) => {
              that.$store.commit('addNewUsers', [user])
              that.$store.commit('setCurrentUser', user)
@ -207,9 +217,9 @@ const ProfileTab = {
        }

        if (cropper) {
-          cropper.getCroppedCanvas().toBlob(updateAvatar, file.type)
+          cropper.getCroppedCanvas().toBlob((data) => updateAvatar(data, file.name), file.type)
        } else {
-          updateAvatar(file)
+          updateAvatar(file, file.name)
        }
      })
    },
--- a/src/components/settings_modal/tabs/profile_tab.vue
+++ b/src/components/settings_modal/tabs/profile_tab.vue
@ -89,6 +89,13 @@
          {{ $t('settings.bot') }}
        </Checkbox>
      </p>
+      <p>
+        <interface-language-switcher
+          :prompt-text="$t('settings.email_language')"
+          :language="emailLanguage"
+          :set-language="val => emailLanguage = val"
+        />
+      </p>
      <button
        :disabled="newName && newName.length === 0"
        class="btn button-default"
--- a/src/components/status_body/status_body.scss
+++ b/src/components/status_body/status_body.scss
@ -33,7 +33,7 @@
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
-      height: 1.4;
+      height: 1.4em;
    }
  }

--- a/src/components/timeline/timeline.js
+++ b/src/components/timeline/timeline.js
@ -77,8 +77,9 @@ const Timeline = {
    statusesToDisplay () {
      const amount = this.timeline.visibleStatuses.length
      const statusesPerSide = Math.ceil(Math.max(3, window.innerHeight / 80))
-      const min = Math.max(0, this.virtualScrollIndex - statusesPerSide)
-      const max = Math.min(amount, this.virtualScrollIndex + statusesPerSide)
+      const nonPinnedIndex = this.virtualScrollIndex - this.filteredPinnedStatusIds.length
+      const min = Math.max(0, nonPinnedIndex - statusesPerSide)
+      const max = Math.min(amount, nonPinnedIndex + statusesPerSide)
      return this.timeline.visibleStatuses.slice(min, max).map(_ => _.id)
    },
    virtualScrollingEnabled () {
--- a/src/components/timeline/timeline_quick_settings.vue
+++ b/src/components/timeline/timeline_quick_settings.vue
@ -93,7 +93,6 @@
 <style lang="scss">

 .TimelineQuickSettings {
-  align-self: stretch;

  > button {
    line-height: 100%;
--- a/src/components/timeline_menu/timeline_menu.vue
+++ b/src/components/timeline_menu/timeline_menu.vue
@ -43,6 +43,10 @@
  min-width: 0;
  width: 24rem;

+  .popover-trigger-button {
+    vertical-align: bottom;
+  }
+
  .timeline-menu-popover-wrap {
    overflow: hidden;
    // Match panel heading padding to line up menu with bottom of heading