Merge branch 'vue3-no-compat' into shigusegubu-vue3

* vue3-no-compat:
  fix warning about custom component
  fix?
  fix some issues with trees
  removing uselsess stuff
  fix reset buttons in profile again
  fix spacing in poll expiration label
  remove unused props to fix test

build/webpack.base.conf.js

@@ -61,6 +61,16 @@ module.exports = {
       {
         test: /\.vue$/,
         loader: 'vue-loader',
+        options: {
+          compilerOptions: {
+            isCustomElement(tag) {
+              if (tag === 'pinch-zoom') {
+                return true
+              }
+              return false
+            }
+          }
+        }
       },
       {
         test: /\.jsx?$/,

src/components/gallery/gallery.vue

@@ -22,7 +22,6 @@
             class="gallery-item"
             :nsfw="nsfw"
             :attachment="attachment"
-            :allow-play="false"
             :size="size"
             :editable="editable"
             :remove="removeAttachment"

src/components/mentions_line/mentions_line.vue

@@ -6,7 +6,6 @@
       class="mention-link"
       :content="mention.content"
       :url="mention.url"
-      :first-mention="false"
     /><span
       v-if="manyMentions"
       class="extraMentions"
@@ -21,7 +20,6 @@
           class="mention-link"
           :content="mention.content"
           :url="mention.url"
-          :first-mention="false"
         />
       </span><button
         v-if="!expanded"

src/components/poll/poll.vue

@@ -71,16 +71,18 @@
           {{ $tc("polls.votes_count", poll.votes_count, { count: poll.votes_count }) }} · 
         </template>
       </div>
-      <i18n-t
-        scope="global"
-        :keypath="expired ? 'polls.expired' : 'polls.expires_in'"
-      >
-        <Timeago
-          :time="expiresAt"
-          :auto-update="60"
-          :now-threshold="0"
-        />
-      </i18n-t>
+      <span>
+        <i18n-t
+          scope="global"
+          :keypath="expired ? 'polls.expired' : 'polls.expires_in'"
+        >
+          <Timeago
+            :time="expiresAt"
+            :auto-update="60"
+            :now-threshold="0"
+          />
+        </i18n-t>
+      </span>
     </div>
   </div>
 </template>

src/components/settings_modal/tabs/profile_tab.scss

@@ -54,16 +54,20 @@
     border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
     background-color: rgba(0, 0, 0, 0.6);
     opacity: 0.7;
-    color: white;
     width: 1.5em;
     height: 1.5em;
     text-align: center;
     line-height: 1.5em;
     font-size: 1.5em;
     cursor: pointer;
+
     &:hover {
       opacity: 1;
     }
+
+    svg {
+      color: white;
+    }
   }
 
   .oauth-tokens {

src/components/settings_modal/tabs/profile_tab.vue

@@ -111,9 +111,9 @@
           v-if="!isDefaultAvatar && pickAvatarBtnVisible"
           :title="$t('settings.reset_avatar')"
           @click="resetAvatar"
+          class="button-unstyled reset-button"
         >
           <FAIcon
-            class="reset-button"
             icon="times"
             type="button"
           />
@@ -141,11 +141,11 @@
         <img :src="user.cover_photo">
         <button
           v-if="!isDefaultBanner"
+          class="button-unstyled reset-button"
           :title="$t('settings.reset_profile_banner')"
           @click="resetBanner"
         >
           <FAIcon
-            class="reset-button"
             icon="times"
             type="button"
           />
@@ -183,12 +183,11 @@
         <img :src="user.background_image">
         <button
           v-if="!isDefaultBackground"
-          class="button-unstyled"
+          class="button-unstyled reset-button"
           :title="$t('settings.reset_profile_background')"
           @click="resetBackground"
         >
           <FAIcon
-            class="reset-button"
             icon="times"
             type="button"
           />

src/components/status/status.js

@@ -69,7 +69,7 @@ const controlledOrUncontrolledGetters = list => list.reduce((res, name) => {
   const controlledName = `controlled${camelized}`
   const uncontrolledName = `uncontrolled${camelized}`
   res[name] = function () {
-    return (this.$props[toggle] && this[toggle]) ? this[controlledName] : this[uncontrolledName]
+    return ((this.$data[toggle] !== undefined || this.$props[toggle] !== undefined) && this[toggle]) ? this[controlledName] : this[uncontrolledName]
   }
   return res
 }, {})

src/components/status/status.vue

@@ -296,7 +296,6 @@
                   :url="replyProfileLink"
                   :user-id="status.in_reply_to_user_id"
                   :user-screen-name="status.in_reply_to_screen_name"
-                  :first-mention="false"
                 />
               </span>
 

src/components/status_content/status_content.js

@@ -31,7 +31,7 @@ const controlledOrUncontrolledGetters = list => list.reduce((res, name) => {
   const controlledName = `controlled${camelized}`
   const uncontrolledName = `uncontrolled${camelized}`
   res[name] = function () {
-    return (this.$props[toggle] && this[toggle]) ? this[controlledName] : this[uncontrolledName]
+    return ((this.$data[toggle] !== undefined || this.$props[toggle] !== undefined) && this[toggle]) ? this[controlledName] : this[uncontrolledName]
   }
   return res
 }, {})