Browse Source

Revert "Revert "Merge remote-tracking branch 'upstream/develop' into neckbeard""

This reverts commit 6bdbb81d43
shitwasbroken
Your New SJW Waifu 4 months ago
parent
commit
36197e056b
  1. 4
      .babelrc
  2. 2
      .gitlab-ci.yml
  3. 17
      build/webpack.base.conf.js
  4. 4
      build/webpack.dev.conf.js
  5. 4
      build/webpack.prod.conf.js
  6. 30
      package.json
  7. 2
      src/App.js
  8. 2
      src/App.scss
  9. 4
      src/App.vue
  10. 41
      src/boot/after_store.js
  11. 4
      src/boot/routes.js
  12. 1
      src/components/async_component_error/async_component_error.vue
  13. 5
      src/components/auth_form/auth_form.js
  14. 2
      src/components/basic_user_card/basic_user_card.vue
  15. 2
      src/components/bookmark_timeline/bookmark_timeline.js
  16. 2
      src/components/chat/chat.js
  17. 118
      src/components/chat/chat.vue
  18. 1
      src/components/chat_message/chat_message.js
  19. 9
      src/components/chat_title/chat_title.js
  20. 13
      src/components/checkbox/checkbox.vue
  21. 23
      src/components/color_input/color_input.vue
  22. 48
      src/components/conversation/conversation.vue
  23. 2
      src/components/desktop_nav/desktop_nav.vue
  24. 31
      src/components/emoji_input/emoji_input.js
  25. 9
      src/components/emoji_picker/emoji_picker.js
  26. 14
      src/components/exporter/exporter.js
  27. 4
      src/components/exporter/exporter.vue
  28. 11
      src/components/font_control/font_control.js
  29. 3
      src/components/font_control/font_control.vue
  30. 4
      src/components/gallery/gallery.js
  31. 1
      src/components/gallery/gallery.vue
  32. 4
      src/components/image_cropper/image_cropper.js
  33. 21
      src/components/importer/importer.js
  34. 28
      src/components/importer/importer.vue
  35. 4
      src/components/interactions/interactions.js
  36. 1
      src/components/interface_language_switcher/interface_language_switcher.vue
  37. 12
      src/components/login_form/login_form.vue
  38. 2
      src/components/media_modal/media_modal.js
  39. 6
      src/components/mention_link/mention_link.vue
  40. 2
      src/components/mentions_line/mentions_line.vue
  41. 12
      src/components/mfa_form/recovery_form.vue
  42. 14
      src/components/mfa_form/totp_form.vue
  43. 2
      src/components/mobile_post_status_button/mobile_post_status_button.js
  44. 57
      src/components/mobile_post_status_button/mobile_post_status_button.vue
  45. 4
      src/components/moderation_tools/moderation_tools.vue
  46. 43
      src/components/notification/notification.vue
  47. 4
      src/components/notifications/notifications.scss
  48. 13
      src/components/opacity_input/opacity_input.vue
  49. 2
      src/components/poll/poll.js
  50. 19
      src/components/poll/poll.vue
  51. 1
      src/components/poll/poll_form.vue
  52. 2
      src/components/popover/popover.js
  53. 6
      src/components/post_status_form/post_status_form.js
  54. 19
      src/components/post_status_form/post_status_form.vue
  55. 2
      src/components/public_and_external_timeline/public_and_external_timeline.js
  56. 2
      src/components/public_timeline/public_timeline.js
  57. 15
      src/components/range_input/range_input.vue
  58. 12
      src/components/registration/registration.js
  59. 38
      src/components/registration/registration.vue
  60. 17
      src/components/rich_content/rich_content.jsx
  61. 3
      src/components/scope_selector/scope_selector.vue
  62. 4
      src/components/search/search.js
  63. 7
      src/components/select/select.js
  64. 9
      src/components/select/select.vue
  65. 8
      src/components/selectable_list/selectable_list.vue
  66. 5
      src/components/settings_modal/helpers/boolean_setting.vue
  67. 5
      src/components/settings_modal/helpers/choice_setting.vue
  68. 2
      src/components/settings_modal/helpers/integer_setting.js
  69. 1
      src/components/settings_modal/helpers/integer_setting.vue
  70. 4
      src/components/settings_modal/settings_modal.js
  71. 14
      src/components/settings_modal/settings_modal.vue
  72. 9
      src/components/settings_modal/settings_modal_content.js
  73. 1
      src/components/settings_modal/settings_modal_content.vue
  74. 14
      src/components/settings_modal/tabs/filtering_tab.vue
  75. 2
      src/components/settings_modal/tabs/mutes_and_blocks_tab.js
  76. 6
      src/components/settings_modal/tabs/profile_tab.scss
  77. 42
      src/components/settings_modal/tabs/profile_tab.vue
  78. 11
      src/components/settings_modal/tabs/theme_tab/preview.vue
  79. 15
      src/components/settings_modal/tabs/theme_tab/theme_tab.js
  80. 29
      src/components/settings_modal/tabs/theme_tab/theme_tab.vue
  81. 2
      src/components/settings_modal/tabs/version_tab.vue
  82. 11
      src/components/shadow_control/shadow_control.js
  83. 7
      src/components/shadow_control/shadow_control.vue
  84. 12
      src/components/status/status.js
  85. 14
      src/components/status/status.vue
  86. 6
      src/components/status_content/status_content.js
  87. 5
      src/components/status_popover/status_popover.js
  88. 2
      src/components/sticker_picker/sticker_picker.js
  89. 73
      src/components/tab_switcher/tab_switcher.jsx
  90. 7
      src/components/tab_switcher/tab_switcher.scss
  91. 2
      src/components/tag_timeline/tag_timeline.js
  92. 48
      src/components/thread_tree/thread_tree.vue
  93. 2
      src/components/timeago/timeago.vue
  94. 8
      src/components/timeline/timeline.js
  95. 44
      src/components/timeline/timeline.vue
  96. 2
      src/components/user_avatar/user_avatar.vue
  97. 1
      src/components/user_card/user_card.vue
  98. 8
      src/components/user_list_popover/user_list_popover.js
  99. 2
      src/components/user_panel/user_panel.vue
  100. 4
      src/components/user_profile/user_profile.js

4
.babelrc

@ -1,5 +1,5 @@
{
"presets": ["@babel/preset-env", "@vue/babel-preset-jsx"],
"plugins": ["@babel/plugin-transform-runtime", "lodash"],
"presets": ["@babel/preset-env"],
"plugins": ["@babel/plugin-transform-runtime", "lodash", "@vue/babel-plugin-jsx"],
"comments": false
}

2
.gitlab-ci.yml

@ -1,7 +1,7 @@
# This file is a template, and might need editing before it works on your project.
# Official framework image. Look for the different tagged releases at:
# https://hub.docker.com/r/library/node/tags/
image: node:10
image: node:12
stages:
- lint

17
build/webpack.base.conf.js

@ -4,6 +4,7 @@ var utils = require('./utils')
var projectRoot = path.resolve(__dirname, '../')
var ServiceWorkerWebpackPlugin = require('serviceworker-webpack-plugin')
var CopyPlugin = require('copy-webpack-plugin');
var { VueLoaderPlugin } = require('vue-loader')
var env = process.env.NODE_ENV
// check env & config/index.js to decide weither to enable CSS Sourcemaps for the
@ -29,12 +30,11 @@ module.exports = {
}
},
resolve: {
extensions: ['.js', '.vue'],
extensions: ['.js', '.jsx', '.vue'],
modules: [
path.join(__dirname, '../node_modules')
],
alias: {
'vue$': 'vue/dist/vue.runtime.common',
'static': path.resolve(__dirname, '../static'),
'src': path.resolve(__dirname, '../src'),
'assets': path.resolve(__dirname, '../src/assets'),
@ -60,7 +60,17 @@ module.exports = {
},
{
test: /\.vue$/,
use: 'vue-loader'
loader: 'vue-loader',
options: {
compilerOptions: {
isCustomElement(tag) {
if (tag === 'pinch-zoom') {
return true
}
return false
}
}
}
},
{
test: /\.jsx?$/,
@ -95,6 +105,7 @@ module.exports = {
entry: path.join(__dirname, '..', 'src/sw.js'),
filename: 'sw-pleroma.js'
}),
new VueLoaderPlugin(),
// This copies Ruffle's WASM to a directory so that JS side can access it
new CopyPlugin({
patterns: [

4
build/webpack.dev.conf.js

@ -21,7 +21,9 @@ module.exports = merge(baseWebpackConfig, {
new webpack.DefinePlugin({
'process.env': config.dev.env,
'COMMIT_HASH': JSON.stringify('DEV'),
'DEV_OVERRIDES': JSON.stringify(config.dev.settings)
'DEV_OVERRIDES': JSON.stringify(config.dev.settings),
'__VUE_OPTIONS_API__': true,
'__VUE_PROD_DEVTOOLS__': false
}),
// https://github.com/glenjamin/webpack-hot-middleware#installation--usage
new webpack.HotModuleReplacementPlugin(),

4
build/webpack.prod.conf.js

@ -36,7 +36,9 @@ var webpackConfig = merge(baseWebpackConfig, {
new webpack.DefinePlugin({
'process.env': env,
'COMMIT_HASH': JSON.stringify(commitHash),
'DEV_OVERRIDES': JSON.stringify(undefined)
'DEV_OVERRIDES': JSON.stringify(undefined),
'__VUE_OPTIONS_API__': true,
'__VUE_PROD_DEVTOOLS__': false
}),
// extract css into its own file
new MiniCssExtractPlugin({

30
package.json

@ -17,30 +17,31 @@
},
"dependencies": {
"@babel/runtime": "7.17.8",
"@chenfengyuan/vue-qrcode": "1.0.2",
"@chenfengyuan/vue-qrcode": "2.0.0",
"@fortawesome/fontawesome-svg-core": "1.3.0",
"@fortawesome/free-regular-svg-icons": "5.15.4",
"@fortawesome/free-solid-svg-icons": "5.15.4",
"@fortawesome/vue-fontawesome": "2.0.6",
"@fortawesome/vue-fontawesome": "3.0.0-5",
"@kazvmoe-infra/pinch-zoom-element": "1.2.0",
"@vuelidate/core": "2.0.0-alpha.35",
"@vuelidate/validators": "2.0.0-alpha.27",
"body-scroll-lock": "2.7.1",
"chromatism": "3.0.0",
"click-outside-vue3": "4.0.1",
"cropperjs": "1.5.12",
"diff": "3.5.0",
"escape-html": "1.0.3",
"localforage": "1.10.0",
"parse-link-header": "1.0.1",
"phoenix": "1.4.0",
"portal-vue": "2.1.7",
"punycode.js": "2.1.0",
"qrcode": "1",
"ruffle-mirror": "2021.12.31",
"v-click-outside": "2.1.5",
"vue": "2.6.11",
"vue-i18n": "7.8.1",
"vue-router": "3.0.2",
"vue": "^3.2.31",
"vue-i18n": "9.1.9",
"vue-router": "4.0.14",
"vue-template-compiler": "2.6.11",
"vuelidate": "0.7.7",
"vuex": "3.0.1"
"vuex": "4.0.2"
},
"devDependencies": {
"@babel/core": "7.17.8",
@ -49,8 +50,9 @@
"@babel/register": "7.17.7",
"@ungap/event-target": "0.2.3",
"@vue/babel-helper-vue-jsx-merge-props": "1.2.1",
"@vue/babel-preset-jsx": "1.2.4",
"@vue/test-utils": "1.0.0-beta.28",
"@vue/babel-plugin-jsx": "1.1.1",
"@vue/compiler-sfc": "^3.1.0",
"@vue/test-utils": "2.0.0-rc.17",
"autoprefixer": "6.7.7",
"babel-eslint": "7.2.3",
"babel-loader": "8.2.4",
@ -82,10 +84,10 @@
"iso-639-1": "2.1.13",
"isparta-loader": "2.0.0",
"json-loader": "0.5.7",
"karma": "3.1.4",
"karma": "6.3.17",
"karma-coverage": "1.1.2",
"karma-firefox-launcher": "1.3.0",
"karma-mocha": "1.3.0",
"karma-mocha": "2.0.1",
"karma-mocha-reporter": "2.2.5",
"karma-sinon-chai": "2.0.2",
"karma-sourcemap-loader": "0.3.8",
@ -112,7 +114,7 @@
"stylelint-config-standard": "20.0.0",
"stylelint-rscss": "0.4.0",
"url-loader": "1.1.2",
"vue-loader": "14.2.4",
"vue-loader": "^16.0.0",
"vue-style-loader": "4.1.2",
"webpack": "4.46.0",
"webpack-dev-middleware": "3.7.3",

2
src/App.js

@ -48,7 +48,7 @@ export default {
this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val })
window.addEventListener('resize', this.updateMobileState)
},
destroyed () {
unmounted () {
window.removeEventListener('resize', this.updateMobileState)
},
computed: {

2
src/App.scss

@ -582,7 +582,7 @@ nav {
.fade-enter-active, .fade-leave-active {
transition: opacity .2s
}
.fade-enter, .fade-leave-active {
.fade-enter-from, .fade-leave-active {
opacity: 0
}

4
src/App.vue

@ -1,6 +1,6 @@
<template>
<div
id="app"
id="app-loaded"
:style="bgStyle"
>
<div
@ -60,7 +60,7 @@
<UserReportingModal />
<PostStatusModal />
<SettingsModal />
<portal-target name="modal" />
<div id="modal" />
<GlobalNoticeList />
</div>
</template>

41
src/boot/after_store.js

@ -1,7 +1,13 @@
import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './routes'
import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import vClickOutside from 'click-outside-vue3'
import { FontAwesomeIcon, FontAwesomeLayers } from '@fortawesome/vue-fontawesome'
import App from '../App.vue'
import routes from './routes'
import VBodyScrollLock from 'src/directives/body_scroll_lock'
import { windowWidth } from '../services/window_utils/window_utils'
import { getOrCreateApp, getClientToken } from '../services/new_api/oauth.js'
import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js'
@ -367,25 +373,32 @@ const afterStoreSetup = async ({ store, i18n }) => {
getTOS({ store })
getStickers({ store })
const router = new VueRouter({
mode: 'history',
const router = createRouter({
history: createWebHistory(),
routes: routes(store),
scrollBehavior: (to, _from, savedPosition) => {
if (to.matched.some(m => m.meta.dontScroll)) {
return false
}
return savedPosition || { x: 0, y: 0 }
return savedPosition || { left: 0, top: 0 }
}
})
/* eslint-disable no-new */
return new Vue({
router,
store,
i18n,
el: '#app',
render: h => h(App)
})
const app = createApp(App)
app.use(router)
app.use(store)
app.use(i18n)
app.use(vClickOutside)
app.use(VBodyScrollLock)
app.component('FAIcon', FontAwesomeIcon)
app.component('FALayers', FontAwesomeLayers)
app.mount('#app')
return app
}
export default afterStoreSetup

4
src/boot/routes.js

@ -46,7 +46,7 @@ export default (store) => {
{ name: 'bookmarks', path: '/bookmarks', component: BookmarkTimeline },
{ name: 'conversation', path: '/notice/:id', component: ConversationPage, meta: { dontScroll: true } },
{ name: 'remote-user-profile-acct',
path: '/remote-users/(@?):username([^/@]+)@:hostname([^/@]+)',
path: '/remote-users/:_(@)?:username([^/@]+)@:hostname([^/@]+)',
component: RemoteUserResolver,
beforeEnter: validateAuthenticatedRoute
},
@ -69,7 +69,7 @@ export default (store) => {
{ name: 'search', path: '/search', component: Search, props: (route) => ({ query: route.query.query }) },
{ name: 'who-to-follow', path: '/who-to-follow', component: WhoToFollow, beforeEnter: validateAuthenticatedRoute },
{ name: 'about', path: '/about', component: About },
{ name: 'user-profile', path: '/(users/)?:name', component: UserProfile }
{ name: 'user-profile', path: '/:_(users)?/:name', component: UserProfile }
]
if (store.state.instance.pleromaChatMessagesAvailable) {

1
src/components/async_component_error/async_component_error.vue

@ -19,6 +19,7 @@
<script>
export default {
emits: ['resetAsyncComponent'],
methods: {
retry () {
this.$emit('resetAsyncComponent')

5
src/components/auth_form/auth_form.js

@ -1,3 +1,4 @@
import { h, resolveComponent } from 'vue'
import LoginForm from '../login_form/login_form.vue'
import MFARecoveryForm from '../mfa_form/recovery_form.vue'
import MFATOTPForm from '../mfa_form/totp_form.vue'
@ -5,8 +6,8 @@ import { mapGetters } from 'vuex'
const AuthForm = {
name: 'AuthForm',
render (createElement) {
return createElement('component', { is: this.authForm })
render () {
return h(resolveComponent(this.authForm))
},
computed: {
authForm () {

2
src/components/basic_user_card/basic_user_card.vue

@ -4,7 +4,7 @@
<UserAvatar
class="avatar"
:user="user"
@click.prevent.native="toggleUserExpanded"
@click.prevent="toggleUserExpanded"
/>
</router-link>
<div

2
src/components/bookmark_timeline/bookmark_timeline.js

@ -9,7 +9,7 @@ const Bookmarks = {
components: {
Timeline
},
destroyed () {
unmounted () {
this.$store.commit('clearTimeline', { timeline: 'bookmarks' })
}
}

2
src/components/chat/chat.js

@ -57,7 +57,7 @@ const Chat = {
})
this.setChatLayout()
},
destroyed () {
unmounted () {
window.removeEventListener('scroll', this.handleScroll)
window.removeEventListener('resize', this.handleLayoutChange)
this.unsetChatLayout()

118
src/components/chat/chat.vue

@ -26,73 +26,71 @@
/>
</div>
</div>
<template>
<div
ref="scrollable"
class="scrollable-message-list"
:style="{ height: scrollableContainerHeight }"
@scroll="handleScroll"
>
<template v-if="!errorLoadingChat">
<ChatMessage
v-for="chatViewItem in chatViewItems"
:key="chatViewItem.id"
:author="recipient"
:chat-view-item="chatViewItem"
:hovered-message-chain="chatViewItem.messageChainId === hoveredMessageChainId"
@hover="onMessageHover"
/>
</template>
<div
ref="scrollable"
class="scrollable-message-list"
:style="{ height: scrollableContainerHeight }"
@scroll="handleScroll"
v-else
class="chat-loading-error"
>
<template v-if="!errorLoadingChat">
<ChatMessage
v-for="chatViewItem in chatViewItems"
:key="chatViewItem.id"
:author="recipient"
:chat-view-item="chatViewItem"
:hovered-message-chain="chatViewItem.messageChainId === hoveredMessageChainId"
@hover="onMessageHover"
/>
</template>
<div
v-else
class="chat-loading-error"
>
<div class="alert error">
{{ $t('chats.error_loading_chat') }}
</div>
<div class="alert error">
{{ $t('chats.error_loading_chat') }}
</div>
</div>
</div>
<div
ref="footer"
class="panel-body footer"
>
<div
ref="footer"
class="panel-body footer"
class="jump-to-bottom-button"
:class="{ 'visible': jumpToBottomButtonVisible }"
@click="scrollDown({ behavior: 'smooth' })"
>
<div
class="jump-to-bottom-button"
:class="{ 'visible': jumpToBottomButtonVisible }"
@click="scrollDown({ behavior: 'smooth' })"
>
<span>
<FAIcon icon="chevron-down" />
<div
v-if="newMessageCount"
class="badge badge-notification unread-chat-count unread-message-count"
>
{{ newMessageCount }}
</div>
</span>
</div>
<PostStatusForm
:disable-subject="true"
:disable-scope-selector="true"
:disable-notice="true"
:disable-lock-warning="true"
:disable-polls="true"
:disable-sensitivity-checkbox="true"
:disable-submit="errorLoadingChat || !currentChat"
:disable-preview="true"
:optimistic-posting="true"
:post-handler="sendMessage"
:submit-on-enter="!mobileLayout"
:preserve-focus="!mobileLayout"
:auto-focus="!mobileLayout"
:placeholder="formPlaceholder"
:file-limit="1"
max-height="160"
emoji-picker-placement="top"
@resize="handleResize"
/>
<span>
<FAIcon icon="chevron-down" />
<div
v-if="newMessageCount"
class="badge badge-notification unread-chat-count unread-message-count"
>
{{ newMessageCount }}
</div>
</span>
</div>
</template>
<PostStatusForm
:disable-subject="true"
:disable-scope-selector="true"
:disable-notice="true"
:disable-lock-warning="true"
:disable-polls="true"
:disable-sensitivity-checkbox="true"
:disable-submit="errorLoadingChat || !currentChat"
:disable-preview="true"
:optimistic-posting="true"
:post-handler="sendMessage"
:submit-on-enter="!mobileLayout"
:preserve-focus="!mobileLayout"
:auto-focus="!mobileLayout"
:placeholder="formPlaceholder"
:file-limit="1"
max-height="160"
emoji-picker-placement="top"
@resize="handleResize"
/>
</div>
</div>
</div>
</div>

1
src/components/chat_message/chat_message.js

@ -27,6 +27,7 @@ const ChatMessage = {
'chatViewItem',
'hoveredMessageChain'
],
emits: ['hover'],
components: {
Popover,
Attachment,

9
src/components/chat_title/chat_title.js

@ -1,11 +1,12 @@
import Vue from 'vue'
import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
import UserAvatar from '../user_avatar/user_avatar.vue'
import RichContent from 'src/components/rich_content/rich_content.jsx'
export default Vue.component('chat-title', {
export default {
name: 'ChatTitle',
components: {
UserAvatar
UserAvatar,
RichContent
},
props: [
'user', 'withAvatar'
@ -23,4 +24,4 @@ export default Vue.component('chat-title', {
return generateProfileLink(user.id, user.screen_name)
}
}
})
}

13
src/components/checkbox/checkbox.vue

@ -6,9 +6,9 @@
<input
type="checkbox"
:disabled="disabled"
:checked="checked"
:indeterminate.prop="indeterminate"
@change="$emit('change', $event.target.checked)"
:checked="modelValue"
:indeterminate="indeterminate"
@change="$emit('update:modelValue', $event.target.checked)"
>
<i class="checkbox-indicator" />
<span
@ -22,12 +22,9 @@
<script>
export default {
model: {
prop: 'checked',
event: 'change'
},
emits: ['update:modelValue'],
props: [
'checked',
'modelValue',
'indeterminate',
'disabled'
]

23
src/components/color_input/color_input.vue

@ -11,28 +11,28 @@
</label>
<Checkbox
v-if="typeof fallback !== 'undefined' && showOptionalTickbox"
:checked="present"
:model-value="present"
:disabled="disabled"
class="opt"
@change="$emit('input', typeof value === 'undefined' ? fallback : undefined)"
@update:modelValue="$emit('update:modelValue', typeof modelValue === 'undefined' ? fallback : undefined)"
/>
<div class="input color-input-field">
<input
:id="name + '-t'"
class="textColor unstyled"
type="text"
:value="value || fallback"
:value="modelValue || fallback"
:disabled="!present || disabled"
@input="$emit('input', $event.target.value)"
@input="$emit('update:modelValue', $event.target.value)"
>
<input
v-if="validColor"
:id="name"
class="nativeColor unstyled"
type="color"
:value="value || fallback"
:value="modelValue || fallback"
:disabled="!present || disabled"
@input="$emit('input', $event.target.value)"
@input="$emit('update:modelValue', $event.target.value)"
>
<div
v-if="transparentColor"
@ -67,7 +67,7 @@ export default {
},
// Color value, should be required but vue cannot tell the difference
// between "property missing" and "property set to undefined"
value: {
modelValue: {
required: false,
type: String,
default: undefined
@ -91,18 +91,19 @@ export default {
default: true
}
},
emits: ['update:modelValue'],
computed: {
present () {
return typeof this.value !== 'undefined'
return typeof this.modelValue !== 'undefined'
},
validColor () {
return hex2rgb(this.value || this.fallback)
return hex2rgb(this.modelValue || this.fallback)
},
transparentColor () {
return this.value === 'transparent'
return this.modelValue === 'transparent'
},
computedColor () {
return this.value && this.value.startsWith('--')
return this.modelValue && this.modelValue.startsWith('--')
}
}
}

48
src/components/conversation/conversation.vue

@ -27,20 +27,24 @@
v-if="shouldShowAllConversationButton"
class="conversation-dive-to-top-level-box"
>
<i18n
path="status.show_all_conversation_with_icon"
<i18n-t
keypath="status.show_all_conversation_with_icon"
tag="button"
class="button-unstyled -link"
@click.prevent="diveToTopLevel"
scope="global"
>
<FAIcon
place="icon"
icon="angle-double-left"
/>
<span place="text">
{{ $tc('status.show_all_conversation', otherTopLevelCount, { numStatus: otherTopLevelCount }) }}
</span>
</i18n>
<template #icon>
<FAIcon
icon="angle-double-left"
/>
</template>
<template #text>
<span>
{{ $tc('status.show_all_conversation', otherTopLevelCount, { numStatus: otherTopLevelCount }) }}
</span>
</template>
</i18n-t>
</div>
<div
v-if="shouldShowAncestors"
@ -96,20 +100,24 @@
<div
class="thread-ancestor-dive-box-inner"
>
<i18n
<i18n-t
tag="button"
path="status.ancestor_follow_with_icon"
scope="global"
keypath="status.ancestor_follow_with_icon"
class="button-unstyled -link thread-tree-show-replies-button"
@click.prevent="diveIntoStatus(status.id)"
>
<FAIcon
place="icon"
icon="angle-double-right"
/>
<span place="text">
{{ $tc('status.ancestor_follow', getReplies(status.id).length - 1, { numReplies: getReplies(status.id).length - 1 }) }}
</span>
</i18n>
<template #icon>
<FAIcon
icon="angle-double-right"
/>
</template>
<template #text>
<span>
{{ $tc('status.ancestor_follow', getReplies(status.id).length - 1, { numReplies: getReplies(status.id).length - 1 }) }}
</span>
</template>
</i18n-t>
</div>
</div>
</div>

2
src/components/desktop_nav/desktop_nav.vue

@ -34,7 +34,7 @@
<search-bar
v-if="currentUser || !privateMode"
@toggled="onSearchBarToggled"
@click.stop.native
@click.stop
/>
<button
class="button-unstyled nav-icon"

31
src/components/emoji_input/emoji_input.js

@ -31,6 +31,7 @@ library.add(
*/
const EmojiInput = {
emits: ['update:modelValue', 'shown'],
props: {
suggest: {
/**
@ -57,8 +58,7 @@ const EmojiInput = {
required: true,
type: Function
},
// TODO VUE3: change to modelValue, change 'input' event to 'input'
value: {
modelValue: {
/**
* Used for v-model
*/
@ -137,8 +137,8 @@ const EmojiInput = {
return (this.wordAtCaret || {}).word || ''
},
wordAtCaret () {
if (this.value && this.caret) {
const word = Completion.wordAtPosition(this.value, this.caret - 1) || {}
if (this.modelValue && this.caret) {
const word = Completion.wordAtPosition(this.modelValue, this.caret - 1) || {}
return word
}
}
@ -189,8 +189,11 @@ const EmojiInput = {
img: imageUrl || ''
}))
},
suggestions (newValue) {
this.$nextTick(this.resize)
suggestions: {
handler (newValue) {
this.$nextTick(this.resize)
},
deep: true
}
},
methods: {
@ -225,13 +228,13 @@ const EmojiInput = {
}
},
replace (replacement) {
const newValue = Completion.replaceWord(this.value, this.wordAtCaret, replacement)
this.$emit('input', newValue)
const newValue = Completion.replaceWord(this.modelValue, this.wordAtCaret, replacement)
this.$emit('update:modelValue', newValue)
this.caret = 0
},
insert ({ insertion, keepOpen, surroundingSpace = true }) {
const before = this.value.substring(0, this.caret) || ''
const after = this.value.substring(this.caret) || ''
const before = this.modelValue.substring(0, this.caret) || ''
const after = this.modelValue.substring(this.caret) || ''
/* Using a bit more smart approach to padding emojis with spaces:
* - put a space before cursor if there isn't one already, unless we
@ -259,7 +262,7 @@ const EmojiInput = {
after
].join('')
this.keepOpen = keepOpen
this.$emit('input', newValue)
this.$emit('update:modelValue', newValue)
const position = this.caret + (insertion + spaceAfter + spaceBefore).length
if (!keepOpen) {
this.input.focus()
@ -278,8 +281,8 @@ const EmojiInput = {
if (len > 0 || suggestion) {
const chosenSuggestion = suggestion || this.suggestions[this.highlighted]
const replacement = chosenSuggestion.replacement
const newValue = Completion.replaceWord(this.value, this.wordAtCaret, replacement)
this.$emit('input', newValue)
const newValue = Completion.replaceWord(this.modelValue, this.wordAtCaret, replacement)
this.$emit('update:modelValue', newValue)
this.highlighted = 0
const position = this.wordAtCaret.start + replacement.length
@ -455,7 +458,7 @@ const EmojiInput = {
this.showPicker = false
this.setCaret(e)
this.resize()
this.$emit('input', e.target.value)
this.$emit('update:modelValue', e.target.value)
},
onClickInput (e) {
this.showPicker = false

9
src/components/emoji_picker/emoji_picker.js

@ -1,3 +1,4 @@
import { defineAsyncComponent } from 'vue'
import Checkbox from '../checkbox/checkbox.vue'
import { library } from '@fortawesome/fontawesome-svg-core'
import {
@ -57,7 +58,7 @@ const EmojiPicker = {
}
},
components: {
StickerPicker: () => import('../sticker_picker/sticker_picker.vue'),
StickerPicker: defineAsyncComponent(() => import('../sticker_picker/sticker_picker.vue')),
Checkbox
},
methods: {
@ -79,7 +80,7 @@ const EmojiPicker = {
},
highlight (key) {
const ref = this.$refs['group-' + key]
const top = ref[0].offsetTop
const top = ref.offsetTop
this.setShowStickers(false)
this.activeGroup = key
this.$nextTick(() => {
@ -96,7 +97,7 @@ const EmojiPicker = {
}
},
triggerLoadMore (target) {
const ref = this.$refs['group-end-custom'][0]
const ref = this.$refs['group-end-custom']
if (!ref) return
const bottom = ref.offsetTop + ref.offsetHeight
@ -119,7 +120,7 @@ const EmojiPicker = {
this.$nextTick(() => {
this.emojisView.forEach(group => {
const ref = this.$refs['group-' + group.id]
if (ref[0].offsetTop <= top) {
if (ref.offsetTop <= top) {
this.activeGroup = group.id
}
})

14
src/components/exporter/exporter.js

@ -15,18 +15,8 @@ const Exporter = {
type: String,
default: 'export.csv'
},
exportButtonLabel: {
type: String,
default () {
return this.$t('exporter.export')
}
},
processingMessage: {
type: String,
default () {
return this.$t('exporter.processing')
}
}
exportButtonLabel: { type: String },
processingMessage: { type: String }
},
data () {
return {

4
src/components/exporter/exporter.vue

@ -7,14 +7,14 @@
spin
/>
<span>{{ processingMessage }}</span>
<span>{{ processingMessage || $t('exporter.processing') }}</span>
</div>
<button
v-else
class="btn button-default"
@click="process"
>
{{ exportButtonLabel }}
{{ exportButtonLabel || $t('exporter.export') }}
</button>
</div>
</template>

11
src/components/font_control/font_control.js

@ -1,4 +1,4 @@
import { set } from 'vue'
import { set } from 'lodash'
import Select from '../select/select.vue'
export default {
@ -6,11 +6,12 @@ export default {
Select
},
props: [
'name', 'label', 'value', 'fallback', 'options', 'no-inherit'
'name', 'label', 'modelValue', 'fallback', 'options', 'no-inherit'
],
emits: ['update:modelValue'],
data () {
return {
lValue: this.value,
lValue: this.modelValue,
availableOptions: [
this.noInherit ? '' : 'inherit',
'custom',
@ -22,7 +23,7 @@ export default {
}
},
beforeUpdate () {
this.lValue = this.value
this.lValue = this.modelValue
},
computed: {
present () {
@ -37,7 +38,7 @@ export default {
},
set (v) {
set(this.lValue, 'family', v)
this.$emit('input', this.lValue)
this.$emit('update:modelValue', this.lValue)
}
},
isCustom () {

3
src/components/font_control/font_control.vue

@ -15,13 +15,14 @@
class="opt exlcude-disabled"
type="checkbox"
:checked="present"
@input="$emit('input', typeof value === 'undefined' ? fallback : undefined)"
@change="$emit('update:modelValue', typeof modelValue === 'undefined' ? fallback : undefined)"
>
<label
v-if="typeof fallback !== 'undefined'"
class="opt-l"
:for="name + '-o'"
/>
{{ ' ' }}
<Select
:id="name + '-font-switcher'"
v-model="preset"

4
src/components/gallery/gallery.js

@ -1,5 +1,5 @@
import Attachment from '../attachment/attachment.vue'
import { sumBy } from 'lodash'
import { sumBy, set } from 'lodash'
const Gallery = {
props: [
@ -85,7 +85,7 @@ const Gallery = {
},
methods: {
onNaturalSizeLoad ({ id, width, height }) {
this.$set(this.sizes, id, { width, height })
set(this.sizes, id, { width, height })
},
rowStyle (row) {
if (row.audio) {

1
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"

4
src/components/image_cropper/image_cropper.js

@ -66,7 +66,7 @@ const ImageCropper = {
}
},
methods: {
destroy () {
unmounted () {
if (this.cropper) {
this.cropper.destroy()
}
@ -117,7 +117,7 @@ const ImageCropper = {
const fileInput = this.$refs.input
fileInput.addEventListener('change', this.readFile)
},
beforeDestroy: function () {
beforeUnmount: function () {
// remove the event listeners
const trigger = this.getTriggerDOM()
if (trigger) {

21
src/components/importer/importer.js

@ -15,24 +15,9 @@ const Importer = {
type: Function,
required: true
},
submitButtonLabel: {
type: String,
default () {
return this.$t('importer.submit')
}
},
successMessage: {
type: String,
default () {
return this.$t('importer.success')
}
},
errorMessage: {
type: String,
default () {
return this.$t('importer.error')
}
}
submitButtonLabel: { type: String },
successMessage: { type: String },
errorMessage: { type: String }
},
data () {
return {

28
src/components/importer/importer.vue

@ -18,21 +18,31 @@
class="btn button-default"
@click="submit"
>
{{ submitButtonLabel }}
{{ submitButtonLabel || $t('importer.submit') }}
</button>
<div v-if="success">
<FAIcon
icon="times"
<button
class="button-unstyled"
@click="dismiss"
/>
<p>{{ successMessage }}</p>
>
<FAIcon
icon="times"
/>
</button>
{{ ' ' }}
<span>{{ successMessage || $t('importer.success') }}</span>
</div>
<div v-else-if="error">
<FAIcon
icon="times"
<button
class="button-unstyled"
@click="dismiss"
/>
<p>{{ errorMessage }}</p>
>
<FAIcon
icon="times"
/>
</button>
{{ ' ' }}
<span>{{ errorMessage || $t('importer.error') }}</span>
</div>
</div>
</template>

4
src/components/interactions/interactions.js

@ -1,4 +1,5 @@
import Notifications from '../notifications/notifications.vue'
import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
const tabModeDict = {
mentions: ['mention'],
@ -20,7 +21,8 @@ const Interactions = {
}
},
components: {
Notifications
Notifications,
TabSwitcher
}
}

1
src/components/interface_language_switcher/interface_language_switcher.vue

@ -3,6 +3,7 @@
<label for="interface-language-switcher">
{{ $t('settings.interfaceLanguage') }}
</label>
{{ ' ' }}
<Select
id="interface-language-switcher"
v-model="language"

12
src/components/login_form/login_form.vue

@ -76,11 +76,15 @@
>
<div class="alert error">
{{ error }}
<FAIcon
class="fa-scale-110 fa-old-padding"
icon="times"
<button
class="button-unstyled"
@click="clearError"
/>
>
<FAIcon
class="fa-scale-110 fa-old-padding"
icon="times"
/>
</button>
</div>
</div>
</div>

2
src/components/media_modal/media_modal.js

@ -142,7 +142,7 @@ const MediaModal = {
document.addEventListener('keyup', this.handleKeyupEvent)
document.addEventListener('keydown', this.handleKeydownEvent)
},
destroyed () {
unmounted () {
window.removeEventListener('popstate', this.hide)
document.removeEventListener('keyup', this.handleKeyupEvent)
document.removeEventListener('keydown', this.handleKeydownEvent)

6
src/components/mention_link/mention_link.vue

@ -41,10 +41,12 @@
class="serverName"
:class="{ '-faded': shouldFadeDomain }"
v-html="'@' + serverName"
/></span><span
/>
</span>
<span
v-if="isYou && shouldShowYous"
:class="{ '-you': shouldBoldenYou }"
> {{ $t('status.you') }}</span>
> {{ ' ' + $t('status.you') }}</span>
<!-- eslint-enable vue/no-v-html -->
</a><span
v-if="shouldShowTooltip"

2
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"

12
src/components/mfa_form/recovery_form.vue

@ -56,11 +56,15 @@
>
<div class="alert error">
{{ error }}
<FAIcon
class="fa-scale-110 fa-old-padding"
icon="times"
<button
class="button-unstyled"
@click="clearError"
/>
>
<FAIcon
class="fa-scale-110 fa-old-padding"
icon="times"
/>
</button>
</div>
</div>
</div>

14
src/components/mfa_form/totp_form.vue

@ -58,12 +58,16 @@
>
<div class="alert error">
{{ error }}
<FAIcon
size="lg"
class="fa-scale-110 fa-old-padding"
icon="times"
<button
class="button-unstyled"
@click="clearError"
/>
>
<FAIcon
size="lg"
class="fa-scale-110 fa-old-padding"
icon="times"
/>
</button>
</div>
</div>
</div>

2
src/components/mobile_post_status_button/mobile_post_status_button.js

@ -29,7 +29,7 @@ const MobilePostStatusButton = {
}
window.addEventListener('resize', this.handleOSK)
},
destroyed () {
unmounted () {
if (this.autohideFloatingPostButton) {
this.deactivateFloatingPostButtonAutohide()
}

57
src/components/mobile_post_status_button/mobile_post_status_button.vue

@ -1,13 +1,12 @@
<template>
<div v-if="isLoggedIn">
<button
class="button-default new-status-button"
:class="{ 'hidden': isHidden, 'always-show': isPersistent }"
@click="openPostForm"
>
<FAIcon icon="pen" />
</button>
</div>
<button
v-if="isLoggedIn"
class="MobilePostButton button-default new-status-button"
:class="{ 'hidden': isHidden, 'always-show': isPersistent }"
@click="openPostForm"
>
<FAIcon icon="pen" />
</button>
</template>
<script src="./mobile_post_status_button.js"></script>
@ -15,25 +14,27 @@
<style lang="scss">
@import '../../_variables.scss';
.new-status-button {
width: 5em;
height: 5em;
border-radius: 100%;
position: fixed;
bottom: 1.5em;
right: 1.5em;
// TODO: this needs its own color, it has to stand out enough and link color
// is not very optimal for this particular use.
background-color: $fallback--fg;
background-color: var(--btn, $fallback--fg);
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3), 0px 4px 6px rgba(0, 0, 0, 0.3);
z-index: 10;
transition: 0.35s transform;
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
.MobilePostButton {
&.button-default {
width: 5em;
height: 5em;
border-radius: 100%;
position: fixed;
bottom: 1.5em;
right: 1.5em;
// TODO: this needs its own color, it has to stand out enough and link color
// is not very optimal for this particular use.
background-color: $fallback--fg;
background-color: var(--btn, $fallback--fg);
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3), 0px 4px 6px rgba(0, 0, 0, 0.3);
z-index: 10;
transition: 0.35s transform;
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}
&.hidden {
transform: translateY(150%);