Merge branch 'develop' into feat/report-notification

src/components/desktop_nav/desktop_nav.scss

@@ -5,6 +5,10 @@
   width: 100%;
   position: fixed;
 
+  a {
+    color: var(--topBarLink, $fallback--link);
+  }
+
   .inner-nav {
     display: grid;
     grid-template-rows: 50px;

src/components/extra_buttons/extra_buttons.js

@@ -5,7 +5,8 @@ import {
   faBookmark,
   faEyeSlash,
   faThumbtack,
-  faShareAlt
+  faShareAlt,
+  faExternalLinkAlt
 } from '@fortawesome/free-solid-svg-icons'
 import {
   faBookmark as faBookmarkReg
@@ -17,7 +18,8 @@ library.add(
   faBookmarkReg,
   faEyeSlash,
   faThumbtack,
-  faShareAlt
+  faShareAlt,
+  faExternalLinkAlt
 )
 
 const ExtraButtons = {

src/components/extra_buttons/extra_buttons.vue

@@ -1,5 +1,6 @@
 <template>
   <Popover
+    class="ExtraButtons"
     trigger="click"
     placement="top"
     :offset="{ y: 5 }"
@@ -96,11 +97,23 @@
             icon="share-alt"
           /><span>{{ $t("status.copy_link") }}</span>
         </button>
+        <a
+          v-if="!status.is_local"
+          class="button-default dropdown-item dropdown-item-icon"
+          title="Source"
+          :href="status.external_url"
+          target="_blank"
+        >
+          <FAIcon
+            fixed-width
+            icon="external-link-alt"
+          /><span>{{ $t("status.external_source") }}</span>
+        </a>
       </div>
     </div>
     <span
       slot="trigger"
-      class="ExtraButtons"
+      class="popover-trigger"
     >
       <FAIcon
         class="fa-scale-110 fa-old-padding"
@@ -116,13 +129,15 @@
 @import '../../_variables.scss';
 
 .ExtraButtons {
-  position: static;
-  padding: 10px;
-  margin: -10px;
+  .popover-trigger {
+    position: static;
+    padding: 10px;
+    margin: -10px;
 
-  &:hover .svg-inline--fa {
-    color: $fallback--text;
-    color: var(--text, $fallback--text);
+    &:hover .svg-inline--fa {
+      color: $fallback--text;
+      color: var(--text, $fallback--text);
+    }
   }
 }
 </style>

src/components/features_panel/features_panel.js

@@ -1,3 +1,5 @@
+import fileSizeFormatService from '../../services/file_size_format/file_size_format.js'
+
 const FeaturesPanel = {
   computed: {
     chat: function () { return this.$store.state.instance.chatAvailable },
@@ -6,7 +8,8 @@ const FeaturesPanel = {
     whoToFollow: function () { return this.$store.state.instance.suggestionsEnabled },
     mediaProxy: function () { return this.$store.state.instance.mediaProxyAvailable },
     minimalScopesMode: function () { return this.$store.state.instance.minimalScopesMode },
-    textlimit: function () { return this.$store.state.instance.textlimit }
+    textlimit: function () { return this.$store.state.instance.textlimit },
+    uploadlimit: function () { return fileSizeFormatService.fileSizeFormat(this.$store.state.instance.uploadlimit) }
   }
 }
 

src/components/features_panel/features_panel.vue

@@ -25,6 +25,7 @@
           </li>
           <li>{{ $t('features_panel.scope_options') }}</li>
           <li>{{ $t('features_panel.text_limit') }} = {{ textlimit }}</li>
+          <li>{{ $t('features_panel.upload_limit') }} = {{ uploadlimit.num }} {{ $t('upload.file_size_units.' + uploadlimit.unit) }}</li>
         </ul>
       </div>
     </div>

src/components/global_notice_list/global_notice_list.vue

@@ -9,11 +9,15 @@
       <div class="notice-message">
         {{ $t(notice.messageKey, notice.messageArgs) }}
       </div>
-      <FAIcon
-        class="fa-scale-110 fa-old-padding"
-        icon="times"
+      <button
+        class="button-unstyled close-notice"
         @click="closeNotice(notice)"
-      />
+      >
+        <FAIcon
+          class="fa-scale-110 fa-old-padding"
+          icon="times"
+        />
+      </button>
     </div>
   </div>
 </template>
@@ -54,7 +58,7 @@
   .global-error {
     background-color: var(--alertPopupError, $fallback--cRed);
     color: var(--alertPopupErrorText, $fallback--text);
-    i {
+    .svg-inline--fa {
       color: var(--alertPopupErrorText, $fallback--text);
     }
   }
@@ -62,7 +66,7 @@
   .global-warning {
     background-color: var(--alertPopupWarning, $fallback--cOrange);
     color: var(--alertPopupWarningText, $fallback--text);
-    i {
+    .svg-inline--fa {
       color: var(--alertPopupWarningText, $fallback--text);
     }
   }
@@ -70,9 +74,16 @@
   .global-info {
     background-color: var(--alertPopupNeutral, $fallback--fg);
     color: var(--alertPopupNeutralText, $fallback--text);
-    i {
+    .svg-inline--fa {
       color: var(--alertPopupNeutralText, $fallback--text);
     }
   }
+
+  .close-notice {
+    padding-right: 0.2em;
+    .svg-inline--fa:hover {
+      opacity: 0.6;
+    }
+  }
 }
 </style>

src/components/image_cropper/image_cropper.js

@@ -2,12 +2,10 @@ import Cropper from 'cropperjs'
 import 'cropperjs/dist/cropper.css'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
-  faTimes,
   faCircleNotch
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
-  faTimes,
   faCircleNotch
 )
 
@@ -53,8 +51,7 @@ const ImageCropper = {
       cropper: undefined,
       dataUrl: undefined,
       filename: undefined,
-      submitting: false,
-      submitError: null
+      submitting: false
     }
   },
   computed: {
@@ -66,9 +63,6 @@ const ImageCropper = {
     },
     cancelText () {
       return this.cancelButtonLabel || this.$t('image_cropper.cancel')
-    },
-    submitErrorMsg () {
-      return this.submitError && this.submitError instanceof Error ? this.submitError.toString() : this.submitError
     }
   },
   methods: {
@@ -82,12 +76,8 @@ const ImageCropper = {
     },
     submit (cropping = true) {
       this.submitting = true
-      this.avatarUploadError = null
       this.submitHandler(cropping && this.cropper, this.file)
         .then(() => this.destroy())
-        .catch((err) => {
-          this.submitError = err
-        })
         .finally(() => {
           this.submitting = false
         })
@@ -113,9 +103,6 @@ const ImageCropper = {
         reader.readAsDataURL(this.file)
         this.$emit('changed', this.file, reader)
       }
-    },
-    clearError () {
-      this.submitError = null
     }
   },
   mounted () {

src/components/image_cropper/image_cropper.vue

@@ -37,17 +37,6 @@
           icon="circle-notch"
         />
       </div>
-      <div
-        v-if="submitError"
-        class="alert error"
-      >
-        {{ submitErrorMsg }}
-        <FAIcon
-          class="fa-scale-110 fa-old-padding"
-          icon="times"
-          @click="clearError"
-        />
-      </div>
     </div>
     <input
       ref="input"

src/components/interface_language_switcher/interface_language_switcher.vue

@@ -63,7 +63,8 @@ export default {
       const specialLanguageNames = {
         'ja': 'Japanese (日本語)',
         'ja_easy': 'Japanese (やさしいにほんご)',
-        'zh': 'Chinese (简体中文)'
+        'zh': 'Simplified Chinese (简体中文)',
+        'zh_Hant': 'Traditional Chinese (繁體中文)'
       }
       return specialLanguageNames[code] || ISO6391.getName(code)
     }

src/components/poll/poll.vue

@@ -42,7 +42,8 @@
           :value="index"
         >
         <label class="option-vote">
-          <div>{{ option.title }}</div>
+          <!-- eslint-disable-next-line vue/no-v-html -->
+          <div v-html="option.title_html" />
         </label>
       </div>
     </div>

src/components/popover/popover.vue

@@ -95,6 +95,7 @@
     box-shadow: none;
     width: 100%;
     height: 100%;
+    box-sizing: border-box;
 
     --btnText: var(--popoverText, $fallback--text);
 

src/components/react_button/react_button.vue

@@ -20,10 +20,10 @@
       <div class="reaction-picker">
         <span
           v-for="emoji in commonEmojis"
-          :key="emoji"
+          :key="emoji.replacement"
           class="emoji-button"
           :title="emoji.displayText"
-          @click="addReaction($event, emoji, close)"
+          @click="addReaction($event, emoji.replacement, close)"
         >
           {{ emoji.replacement }}
         </span>

src/components/remote_follow/remote_follow.vue

@@ -16,7 +16,7 @@
       >
       <button
         click="submit"
-        class="remote-button"
+        class="button-default remote-button"
       >
         {{ $t('user_card.remote_follow') }}
       </button>

src/components/settings_modal/tabs/filtering_tab.vue

@@ -75,6 +75,7 @@
         <p>{{ $t('settings.filtering_explanation') }}</p>
         <textarea
           id="muteWords"
+          class="resize-height"
           v-model="muteWordsString"
         />
       </div>

src/components/settings_modal/tabs/general_tab.js

@@ -34,6 +34,10 @@ const GeneralTab = {
       return this.$store.state.instance.postFormats || []
     },
     instanceSpecificPanelPresent () { return this.$store.state.instance.showInstanceSpecificPanel },
+    instanceWallpaperUsed () {
+      return this.$store.state.instance.background &&
+        !this.$store.state.users.currentUser.background_image
+    },
     ...SharedComputedObject()
   }
 }

src/components/settings_modal/tabs/general_tab.vue

@@ -11,6 +11,11 @@
             {{ $t('settings.hide_isp') }}
           </Checkbox>
         </li>
+        <li v-if="instanceWallpaperUsed">
+          <Checkbox v-model="hideInstanceWallpaper">
+            {{ $t('settings.hide_wallpaper') }}
+          </Checkbox>
+        </li>
       </ul>
     </div>
     <div class="setting-item">

src/components/settings_modal/tabs/profile_tab.js

@@ -45,9 +45,7 @@ const ProfileTab = {
       banner: null,
       bannerPreview: null,
       background: null,
-      backgroundPreview: null,
-      bannerUploadError: null,
-      backgroundUploadError: null
+      backgroundPreview: null
     }
   },
   components: {
@@ -162,18 +160,18 @@ const ProfileTab = {
       if (file.size > this.$store.state.instance[slot + 'limit']) {
         const filesize = fileSizeFormatService.fileSizeFormat(file.size)
         const allowedsize = fileSizeFormatService.fileSizeFormat(this.$store.state.instance[slot + 'limit'])
-        this[slot + 'UploadError'] = [
-          this.$t('upload.error.base'),
-          this.$t(
-            'upload.error.file_too_big',
-            {
+        this.$store.dispatch('pushGlobalNotice', {
+          messageKey: 'upload.error.message',
+          messageArgs: [
+            this.$t('upload.error.file_too_big', {
               filesize: filesize.num,
               filesizeunit: filesize.unit,
               allowedsize: allowedsize.num,
               allowedsizeunit: allowedsize.unit
-            }
-          )
-        ].join(' ')
+            })
+          ],
+          level: 'error'
+        })
         return
       }
       // eslint-disable-next-line no-undef
@@ -213,8 +211,9 @@ const ProfileTab = {
               that.$store.commit('setCurrentUser', user)
               resolve()
             })
-            .catch((err) => {
-              reject(new Error(that.$t('upload.error.base') + ' ' + err.message))
+            .catch((error) => {
+              that.displayUploadError(error)
+              reject(error)
             })
         }
 
@@ -235,24 +234,27 @@ const ProfileTab = {
           this.$store.commit('setCurrentUser', user)
           this.bannerPreview = null
         })
-        .catch((err) => {
-          this.bannerUploadError = this.$t('upload.error.base') + ' ' + err.message
-        })
-        .then(() => { this.bannerUploading = false })
+        .catch(this.displayUploadError)
+        .finally(() => { this.bannerUploading = false })
     },
     submitBackground (background) {
       if (!this.backgroundPreview && background !== '') { return }
 
       this.backgroundUploading = true
-      this.$store.state.api.backendInteractor.updateProfileImages({ background }).then((data) => {
-        if (!data.error) {
+      this.$store.state.api.backendInteractor.updateProfileImages({ background })
+        .then((data) => {
           this.$store.commit('addNewUsers', [data])
           this.$store.commit('setCurrentUser', data)
           this.backgroundPreview = null
-        } else {
-          this.backgroundUploadError = this.$t('upload.error.base') + data.error
-        }
-        this.backgroundUploading = false
+        })
+        .catch(this.displayUploadError)
+        .finally(() => { this.backgroundUploading = false })
+    },
+    displayUploadError (error) {
+      this.$store.dispatch('pushGlobalNotice', {
+        messageKey: 'upload.error.message',
+        messageArgs: [error.message],
+        level: 'error'
       })
     }
   }

src/components/settings_modal/tabs/profile_tab.vue

@@ -11,7 +11,7 @@
         <input
           id="username"
           v-model="newName"
-          classname="name-changer"
+          class="name-changer"
         >
       </EmojiInput>
       <p>{{ $t('settings.bio') }}</p>
@@ -22,7 +22,7 @@
       >
         <textarea
           v-model="newBio"
-          classname="bio"
+          class="bio resize-height"
         />
       </EmojiInput>
       <p>
@@ -229,17 +229,6 @@
       >
         {{ $t('general.submit') }}
       </button>
-      <div
-        v-if="bannerUploadError"
-        class="alert error"
-      >
-        Error: {{ bannerUploadError }}
-        <FAIcon
-          class="fa-scale-110 fa-old-padding"
-          icon="times"
-          @click="clearUploadError('banner')"
-        />
-      </div>
     </div>
     <div class="setting-item">
       <h2>{{ $t('settings.profile_background') }}</h2>
@@ -279,18 +268,6 @@
       >
         {{ $t('general.submit') }}
       </button>
-      <div
-        v-if="backgroundUploadError"
-        class="alert error"
-      >
-        Error: {{ backgroundUploadError }}
-        <FAIcon
-          size="lg"
-          class="fa-scale-110 fa-old-padding"
-          icon="times"
-          @click="clearUploadError('background')"
-        />
-      </div>
     </div>
   </div>
 </template>

src/components/settings_modal/tabs/theme_tab/theme_tab.scss

@@ -165,7 +165,8 @@
     border-color: var(--border, $fallback--border);
     margin: 1em 0;
     padding: 1em;
-    background: var(--body-background-image);
+    background-color: var(--wallpaper);
+    background-image: var(--body-background-image);
     background-size: cover;
     background-position: 50% 50%;
 

src/components/settings_modal/tabs/theme_tab/theme_tab.vue

@@ -616,6 +616,15 @@
               :disabled="underlayOpacityLocal === 'transparent'"
             />
           </div>
+          <div class="color-item">
+            <h4>{{ $t('settings.style.advanced_colors.wallpaper') }}</h4>
+            <ColorInput
+              v-model="wallpaperColorLocal"
+              name="wallpaper"
+              :label="$t('settings.style.advanced_colors.wallpaper')"
+              :fallback="previewTheme.colors.wallpaper"
+            />
+          </div>
           <div class="color-item">
             <h4>{{ $t('settings.style.advanced_colors.poll') }}</h4>
             <ColorInput

src/components/status/status.js

@@ -26,7 +26,6 @@ import {
   faTimes,
   faRetweet,
   faReply,
-  faExternalLinkSquareAlt,
   faPlusSquare,
   faSmileBeam,
   faEllipsisH,
@@ -44,7 +43,6 @@ library.add(
   faTimes,
   faRetweet,
   faReply,
-  faExternalLinkSquareAlt,
   faPlusSquare,
   faStar,
   faSmileBeam,

src/components/status/status.scss

@@ -139,6 +139,20 @@ $status-margin: 0.75em;
   .heading-right {
     display: flex;
     flex-shrink: 0;
+
+    .button-unstyled {
+      padding: 5px;
+      margin: -5px;
+
+      &:hover svg {
+        color: $fallback--lightText;
+        color: var(--lightText, $fallback--lightText);
+      }
+    }
+
+    .svg-inline--fa {
+      margin-left: 0.25em;
+    }
   }
 
   .timeago {

src/components/status/status.vue

@@ -184,30 +184,20 @@
                   :title="status.visibility | capitalize"
                 >
                   <FAIcon
-                    class="fa-scale-110 fa-old-padding"
+                    fixed-width
+                    class="fa-scale-110"
                     :icon="visibilityIcon(status.visibility)"
                   />
                 </span>
-                <a
-                  v-if="!status.is_local && !isPreview"
-                  :href="status.external_url"
-                  target="_blank"
-                  class="source_url"
-                  title="Source"
-                >
-                  <FAIcon
-                    class="fa-scale-110 fa-old-padding"
-                    icon="external-link-square-alt"
-                  />
-                </a>
                 <button
                   v-if="expandable && !isPreview"
                   class="button-unstyled"
-                  title="Expand"
+                  :title="$t('status.expand')"
                   @click.prevent="toggleExpanded"
                 >
                   <FAIcon
-                    class="fa-scale-110 fa-old-padding"
+                    fixed-width
+                    class="fa-scale-110"
                     icon="plus-square"
                   />
                 </button>
@@ -217,8 +207,9 @@
                   @click.prevent="toggleMute"
                 >
                   <FAIcon
+                    fixed-width
                     icon="eye-slash"
-                    class="fa-scale-110 fa-old-padding"
+                    class="fa-scale-110"
                   />
                 </button>
               </span>

src/components/timeline/timeline.vue

@@ -102,6 +102,7 @@
 .timeline-heading {
   max-width: 100%;
   flex-wrap: nowrap;
+  align-items: center;
   .loadmore-button {
     flex-shrink: 0;
   }

src/components/timeline_menu/timeline_menu.js

@@ -59,6 +59,14 @@ const TimelineMenu = {
         this.isOpen = true
       }, 25)
     },
+    blockOpen (event) {
+      // For the blank area inside the button element.
+      // Just setting @click.stop="" makes unintuitive behavior when
+      // menu is open and clicking on the blank area doesn't close it.
+      if (!this.isOpen) {
+        event.stopPropagation()
+      }
+    },
     timelineName () {
       const route = this.$route.name
       if (route === 'tag-timeline') {

src/components/timeline_menu/timeline_menu.vue

@@ -65,10 +65,16 @@
       slot="trigger"
       class="title timeline-menu-title"
     >
-      <span>{{ timelineName() }}</span>
-      <FAIcon
-        size="sm"
-        icon="chevron-down"
+      <span class="timeline-title">{{ timelineName() }}</span>
+      <span>
+        <FAIcon
+          size="sm"
+          icon="chevron-down"
+        />
+      </span>
+      <span
+        class="click-blocker"
+        @click="blockOpen"
       />
     </div>
   </Popover>
@@ -117,8 +123,9 @@
     cursor: pointer;
     user-select: none;
     width: 100%;
+    display: flex;
 
-    span {
+    .timeline-menu-name {
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
@@ -128,6 +135,11 @@
       margin-left: 0.6em;
       transition: transform 100ms;
     }
+
+    .click-blocker {
+      cursor: default;
+      flex-grow: 1;
+    }
   }
 
   &.open .timeline-menu-title svg {