Merge branch 'vue3-again' into 'develop'

Migration to Vue 3 (again)

See merge request pleroma/pleroma-fe!1385
This commit is contained in:
HJ 2022-03-31 17:45:29 +00:00
commit f71f101fce
122 changed files with 1637 additions and 1554 deletions

View File

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

View File

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

View File

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

View File

@ -21,7 +21,9 @@ module.exports = merge(baseWebpackConfig, {
new webpack.DefinePlugin({ new webpack.DefinePlugin({
'process.env': config.dev.env, 'process.env': config.dev.env,
'COMMIT_HASH': JSON.stringify('DEV'), '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 // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
new webpack.HotModuleReplacementPlugin(), new webpack.HotModuleReplacementPlugin(),

View File

@ -36,7 +36,9 @@ var webpackConfig = merge(baseWebpackConfig, {
new webpack.DefinePlugin({ new webpack.DefinePlugin({
'process.env': env, 'process.env': env,
'COMMIT_HASH': JSON.stringify(commitHash), '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 // extract css into its own file
new MiniCssExtractPlugin({ new MiniCssExtractPlugin({

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -26,73 +26,71 @@
/> />
</div> </div>
</div> </div>
<template> <div
<div ref="scrollable"
ref="scrollable" class="scrollable-message-list"
class="scrollable-message-list" :style="{ height: scrollableContainerHeight }"
:style="{ height: scrollableContainerHeight }" @scroll="handleScroll"
@scroll="handleScroll" >
> <template v-if="!errorLoadingChat">
<template v-if="!errorLoadingChat"> <ChatMessage
<ChatMessage v-for="chatViewItem in chatViewItems"
v-for="chatViewItem in chatViewItems" :key="chatViewItem.id"
:key="chatViewItem.id" :author="recipient"
:author="recipient" :chat-view-item="chatViewItem"
:chat-view-item="chatViewItem" :hovered-message-chain="chatViewItem.messageChainId === hoveredMessageChainId"
:hovered-message-chain="chatViewItem.messageChainId === hoveredMessageChainId" @hover="onMessageHover"
@hover="onMessageHover"
/>
</template>
<div
v-else
class="chat-loading-error"
>
<div class="alert error">
{{ $t('chats.error_loading_chat') }}
</div>
</div>
</div>
<div
ref="footer"
class="panel-body footer"
>
<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"
/> />
</template>
<div
v-else
class="chat-loading-error"
>
<div class="alert error">
{{ $t('chats.error_loading_chat') }}
</div>
</div> </div>
</template> </div>
<div
ref="footer"
class="panel-body footer"
>
<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"
/>
</div>
</div> </div>
</div> </div>
</div> </div>

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -132,7 +132,7 @@
</button> </button>
</template> </template>
</Popover> </Popover>
<portal to="modal"> <teleport to="#modal">
<DialogModal <DialogModal
v-if="showDeleteUserDialog" v-if="showDeleteUserDialog"
:on-cancel="deleteUserDialog.bind(this, false)" :on-cancel="deleteUserDialog.bind(this, false)"
@ -156,7 +156,7 @@
</button> </button>
</template> </template>
</DialogModal> </DialogModal>
</portal> </teleport>
</div> </div>
</template> </template>

View File

@ -33,7 +33,7 @@
> >
<a <a
class="avatar-container" class="avatar-container"
:href="notification.from_profile.statusnet_profile_url" :href="$router.resolve(userProfileLink).href"
@click.stop.prevent.capture="toggleUserExpanded" @click.stop.prevent.capture="toggleUserExpanded"
> >
<UserAvatar <UserAvatar
@ -65,12 +65,16 @@
v-else v-else
class="username" class="username"
:title="'@'+notification.from_profile.screen_name_ui" :title="'@'+notification.from_profile.screen_name_ui"
>{{ notification.from_profile.name }}</span> >
{{ notification.from_profile.name }}
</span>
{{ ' ' }}
<span v-if="notification.type === 'like'"> <span v-if="notification.type === 'like'">
<FAIcon <FAIcon
class="type-icon" class="type-icon"
icon="star" icon="star"
/> />
{{ ' ' }}
<small>{{ $t('notifications.favorited_you') }}</small> <small>{{ $t('notifications.favorited_you') }}</small>
</span> </span>
<span v-if="notification.type === 'repeat'"> <span v-if="notification.type === 'repeat'">
@ -79,6 +83,7 @@
icon="retweet" icon="retweet"
:title="$t('tool_tip.repeat')" :title="$t('tool_tip.repeat')"
/> />
{{ ' ' }}
<small>{{ $t('notifications.repeated_you') }}</small> <small>{{ $t('notifications.repeated_you') }}</small>
</span> </span>
<span v-if="notification.type === 'follow'"> <span v-if="notification.type === 'follow'">
@ -86,6 +91,7 @@
class="type-icon" class="type-icon"
icon="user-plus" icon="user-plus"
/> />
{{ ' ' }}
<small>{{ $t('notifications.followed_you') }}</small> <small>{{ $t('notifications.followed_you') }}</small>
</span> </span>
<span v-if="notification.type === 'follow_request'"> <span v-if="notification.type === 'follow_request'">
@ -93,6 +99,7 @@
class="type-icon" class="type-icon"
icon="user" icon="user"
/> />
{{ ' ' }}
<small>{{ $t('notifications.follow_request') }}</small> <small>{{ $t('notifications.follow_request') }}</small>
</span> </span>
<span v-if="notification.type === 'move'"> <span v-if="notification.type === 'move'">
@ -100,13 +107,17 @@
class="type-icon" class="type-icon"
icon="suitcase-rolling" icon="suitcase-rolling"
/> />
{{ ' ' }}
<small>{{ $t('notifications.migrated_to') }}</small> <small>{{ $t('notifications.migrated_to') }}</small>
</span> </span>
<span v-if="notification.type === 'pleroma:emoji_reaction'"> <span v-if="notification.type === 'pleroma:emoji_reaction'">
<small> <small>
<i18n path="notifications.reacted_with"> <i18n-t
scope="global"
keypath="notifications.reacted_with"
>
<span class="emoji-reaction-emoji">{{ notification.emoji }}</span> <span class="emoji-reaction-emoji">{{ notification.emoji }}</span>
</i18n> </i18n-t>
</small> </small>
</span> </span>
</div> </div>
@ -161,18 +172,26 @@
v-if="notification.type === 'follow_request'" v-if="notification.type === 'follow_request'"
style="white-space: nowrap;" style="white-space: nowrap;"
> >
<FAIcon <button
icon="check" class="button-unstyled"
class="fa-scale-110 fa-old-padding follow-request-accept"
:title="$t('tool_tip.accept_follow_request')" :title="$t('tool_tip.accept_follow_request')"
@click="approveUser()" @click="approveUser()"
/> >
<FAIcon <FAIcon
icon="times" icon="check"
class="fa-scale-110 fa-old-padding follow-request-reject" class="fa-scale-110 fa-old-padding follow-request-accept"
/>
</button>
<button
class="button-unstyled"
:title="$t('tool_tip.reject_follow_request')" :title="$t('tool_tip.reject_follow_request')"
@click="denyUser()" @click="denyUser()"
/> >
<FAIcon
icon="times"
class="fa-scale-110 fa-old-padding follow-request-reject"
/>
</button>
</div> </div>
</div> </div>
<div <div

View File

@ -64,8 +64,6 @@
} }
.follow-request-accept { .follow-request-accept {
cursor: pointer;
&:hover { &:hover {
color: $fallback--text; color: $fallback--text;
color: var(--text, $fallback--text); color: var(--text, $fallback--text);
@ -73,8 +71,6 @@
} }
.follow-request-reject { .follow-request-reject {
cursor: pointer;
&:hover { &:hover {
color: $fallback--cRed; color: $fallback--cRed;
color: var(--cRed, $fallback--cRed); color: var(--cRed, $fallback--cRed);

View File

@ -11,21 +11,21 @@
</label> </label>
<Checkbox <Checkbox
v-if="typeof fallback !== 'undefined'" v-if="typeof fallback !== 'undefined'"
:checked="present" :model-value="present"
:disabled="disabled" :disabled="disabled"
class="opt" class="opt"
@change="$emit('input', !present ? fallback : undefined)" @update:modelValue="$emit('update:modelValue', !present ? fallback : undefined)"
/> />
<input <input
:id="name" :id="name"
class="input-number" class="input-number"
type="number" type="number"
:value="value || fallback" :value="modelValue || fallback"
:disabled="!present || disabled" :disabled="!present || disabled"
max="1" max="1"
min="0" min="0"
step=".05" step=".05"
@input="$emit('input', $event.target.value)" @input="$emit('update:modelValue', $event.target.value)"
> >
</div> </div>
</template> </template>
@ -37,11 +37,12 @@ export default {
Checkbox Checkbox
}, },
props: [ props: [
'name', 'value', 'fallback', 'disabled' 'name', 'modelValue', 'fallback', 'disabled'
], ],
emits: ['update:modelValue'],
computed: { computed: {
present () { present () {
return typeof this.value !== 'undefined' return typeof this.modelValue !== 'undefined'
} }
} }
} }

View File

@ -21,7 +21,7 @@ export default {
} }
this.$store.dispatch('trackPoll', this.pollId) this.$store.dispatch('trackPoll', this.pollId)
}, },
destroyed () { unmounted () {
this.$store.dispatch('untrackPoll', this.pollId) this.$store.dispatch('untrackPoll', this.pollId)
}, },
computed: { computed: {

View File

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

View File

@ -72,6 +72,7 @@
:max="maxExpirationInCurrentUnit" :max="maxExpirationInCurrentUnit"
@change="expiryAmountChange" @change="expiryAmountChange"
> >
{{ ' ' }}
<Select <Select
v-model="expiryUnit" v-model="expiryUnit"
unstyled="true" unstyled="true"

View File

@ -178,7 +178,7 @@ const Popover = {
created () { created () {
document.addEventListener('click', this.onClickOutside) document.addEventListener('click', this.onClickOutside)
}, },
destroyed () { unmounted () {
document.removeEventListener('click', this.onClickOutside) document.removeEventListener('click', this.onClickOutside)
this.hidePopover() this.hidePopover()
} }

View File

@ -78,6 +78,12 @@ const PostStatusForm = {
'emojiPickerPlacement', 'emojiPickerPlacement',
'optimisticPosting' 'optimisticPosting'
], ],
emits: [
'posted',
'resize',
'mediaplay',
'mediapause'
],
components: { components: {
MediaUpload, MediaUpload,
EmojiInput, EmojiInput,

View File

@ -18,11 +18,12 @@
<FAIcon :icon="uploadFileLimitReached ? 'ban' : 'upload'" /> <FAIcon :icon="uploadFileLimitReached ? 'ban' : 'upload'" />
</div> </div>
<div class="form-group"> <div class="form-group">
<i18n <i18n-t
v-if="!$store.state.users.currentUser.locked && newStatus.visibility == 'private' && !disableLockWarning" v-if="!$store.state.users.currentUser.locked && newStatus.visibility == 'private' && !disableLockWarning"
path="post_status.account_not_locked_warning" keypath="post_status.account_not_locked_warning"
tag="p" tag="p"
class="visibility-notice" class="visibility-notice"
scope="global"
> >
<button <button
class="button-unstyled -link" class="button-unstyled -link"
@ -30,7 +31,7 @@
> >
{{ $t('post_status.account_not_locked_warning_link') }} {{ $t('post_status.account_not_locked_warning_link') }}
</button> </button>
</i18n> </i18n-t>
<p <p
v-if="!hideScopeNotice && newStatus.visibility === 'public'" v-if="!hideScopeNotice && newStatus.visibility === 'public'"
class="visibility-notice notice-dismissible" class="visibility-notice notice-dismissible"
@ -281,11 +282,15 @@
class="alert error" class="alert error"
> >
Error: {{ error }} Error: {{ error }}
<FAIcon <button
class="fa-scale-110 fa-old-padding" class="button-unstyled"
icon="times"
@click="clearError" @click="clearError"
/> >
<FAIcon
class="fa-scale-110 fa-old-padding"
icon="times"
/>
</button>
</div> </div>
<gallery <gallery
v-if="newStatus.files && newStatus.files.length > 0" v-if="newStatus.files && newStatus.files.length > 0"

View File

@ -9,7 +9,7 @@ const PublicAndExternalTimeline = {
created () { created () {
this.$store.dispatch('startFetchingTimeline', { timeline: 'publicAndExternal' }) this.$store.dispatch('startFetchingTimeline', { timeline: 'publicAndExternal' })
}, },
destroyed () { unmounted () {
this.$store.dispatch('stopFetchingTimeline', 'publicAndExternal') this.$store.dispatch('stopFetchingTimeline', 'publicAndExternal')
} }
} }

View File

@ -9,7 +9,7 @@ const PublicTimeline = {
created () { created () {
this.$store.dispatch('startFetchingTimeline', { timeline: 'public' }) this.$store.dispatch('startFetchingTimeline', { timeline: 'public' })
}, },
destroyed () { unmounted () {
this.$store.dispatch('stopFetchingTimeline', 'public') this.$store.dispatch('stopFetchingTimeline', 'public')
} }

View File

@ -15,7 +15,7 @@
class="opt" class="opt"
type="checkbox" type="checkbox"
:checked="present" :checked="present"
@input="$emit('input', !present ? fallback : undefined)" @change="$emit('update:modelValue', !present ? fallback : undefined)"
> >
<label <label
v-if="typeof fallback !== 'undefined'" v-if="typeof fallback !== 'undefined'"
@ -26,23 +26,23 @@
:id="name" :id="name"
class="input-number" class="input-number"
type="range" type="range"
:value="value || fallback" :value="modelValue || fallback"
:disabled="!present || disabled" :disabled="!present || disabled"
:max="max || hardMax || 100" :max="max || hardMax || 100"
:min="min || hardMin || 0" :min="min || hardMin || 0"
:step="step || 1" :step="step || 1"
@input="$emit('input', $event.target.value)" @input="$emit('update:modelValue', $event.target.value)"
> >
<input <input
:id="name" :id="name"
class="input-number" class="input-number"
type="number" type="number"
:value="value || fallback" :value="modelValue || fallback"
:disabled="!present || disabled" :disabled="!present || disabled"
:max="hardMax" :max="hardMax"
:min="hardMin" :min="hardMin"
:step="step || 1" :step="step || 1"
@input="$emit('input', $event.target.value)" @input="$emit('update:modelValue', $event.target.value)"
> >
</div> </div>
</template> </template>
@ -50,11 +50,12 @@
<script> <script>
export default { export default {
props: [ props: [
'name', 'value', 'fallback', 'disabled', 'label', 'max', 'min', 'step', 'hardMin', 'hardMax' 'name', 'modelValue', 'fallback', 'disabled', 'label', 'max', 'min', 'step', 'hardMin', 'hardMax'
], ],
emits: ['update:modelValue'],
computed: { computed: {
present () { present () {
return typeof this.value !== 'undefined' return typeof this.modelValue !== 'undefined'
} }
} }
} }

View File

@ -1,9 +1,9 @@
import { validationMixin } from 'vuelidate' import useVuelidate from '@vuelidate/core'
import { required, requiredIf, sameAs } from 'vuelidate/lib/validators' import { required, requiredIf, sameAs } from '@vuelidate/validators'
import { mapActions, mapState } from 'vuex' import { mapActions, mapState } from 'vuex'
const registration = { const registration = {
mixins: [validationMixin], setup () { return { v$: useVuelidate() } },
data: () => ({ data: () => ({
user: { user: {
email: '', email: '',
@ -24,7 +24,7 @@ const registration = {
password: { required }, password: { required },
confirm: { confirm: {
required, required,
sameAsPassword: sameAs('password') sameAs: sameAs(this.user.password)
}, },
reason: { required: requiredIf(() => this.accountApprovalRequired) } reason: { required: requiredIf(() => this.accountApprovalRequired) }
} }
@ -65,9 +65,9 @@ const registration = {
this.user.captcha_token = this.captcha.token this.user.captcha_token = this.captcha.token
this.user.captcha_answer_data = this.captcha.answer_data this.user.captcha_answer_data = this.captcha.answer_data
this.$v.$touch() this.v$.$touch()
if (!this.$v.$invalid) { if (!this.v$.$invalid) {
try { try {
await this.signUp(this.user) await this.signUp(this.user)
this.$router.push({ name: 'friends' }) this.$router.push({ name: 'friends' })

View File

@ -12,7 +12,7 @@
<div class="text-fields"> <div class="text-fields">
<div <div
class="form-group" class="form-group"
:class="{ 'form-group--error': $v.user.username.$error }" :class="{ 'form-group--error': v$.user.username.$error }"
> >
<label <label
class="form--label" class="form--label"
@ -20,18 +20,18 @@
>{{ $t('login.username') }}</label> >{{ $t('login.username') }}</label>
<input <input
id="sign-up-username" id="sign-up-username"
v-model.trim="$v.user.username.$model" v-model.trim="v$.user.username.$model"
:disabled="isPending" :disabled="isPending"
class="form-control" class="form-control"
:placeholder="$t('registration.username_placeholder')" :placeholder="$t('registration.username_placeholder')"
> >
</div> </div>
<div <div
v-if="$v.user.username.$dirty" v-if="v$.user.username.$dirty"
class="form-error" class="form-error"
> >
<ul> <ul>
<li v-if="!$v.user.username.required"> <li v-if="!v$.user.username.required">
<span>{{ $t('registration.validations.username_required') }}</span> <span>{{ $t('registration.validations.username_required') }}</span>
</li> </li>
</ul> </ul>
@ -39,7 +39,7 @@
<div <div
class="form-group" class="form-group"
:class="{ 'form-group--error': $v.user.fullname.$error }" :class="{ 'form-group--error': v$.user.fullname.$error }"
> >
<label <label
class="form--label" class="form--label"
@ -47,18 +47,18 @@
>{{ $t('registration.fullname') }}</label> >{{ $t('registration.fullname') }}</label>
<input <input
id="sign-up-fullname" id="sign-up-fullname"
v-model.trim="$v.user.fullname.$model" v-model.trim="v$.user.fullname.$model"
:disabled="isPending" :disabled="isPending"
class="form-control" class="form-control"
:placeholder="$t('registration.fullname_placeholder')" :placeholder="$t('registration.fullname_placeholder')"
> >
</div> </div>
<div <div
v-if="$v.user.fullname.$dirty" v-if="v$.user.fullname.$dirty"
class="form-error" class="form-error"
> >
<ul> <ul>
<li v-if="!$v.user.fullname.required"> <li v-if="!v$.user.fullname.required">
<span>{{ $t('registration.validations.fullname_required') }}</span> <span>{{ $t('registration.validations.fullname_required') }}</span>
</li> </li>
</ul> </ul>
@ -66,7 +66,7 @@
<div <div
class="form-group" class="form-group"
:class="{ 'form-group--error': $v.user.email.$error }" :class="{ 'form-group--error': v$.user.email.$error }"
> >
<label <label
class="form--label" class="form--label"
@ -74,18 +74,18 @@
>{{ $t('registration.email') }}</label> >{{ $t('registration.email') }}</label>
<input <input
id="email" id="email"
v-model="$v.user.email.$model" v-model="v$.user.email.$model"
:disabled="isPending" :disabled="isPending"
class="form-control" class="form-control"
type="email" type="email"
> >
</div> </div>
<div <div
v-if="$v.user.email.$dirty" v-if="v$.user.email.$dirty"
class="form-error" class="form-error"
> >
<ul> <ul>
<li v-if="!$v.user.email.required"> <li v-if="!v$.user.email.required">
<span>{{ $t('registration.validations.email_required') }}</span> <span>{{ $t('registration.validations.email_required') }}</span>
</li> </li>
</ul> </ul>
@ -107,7 +107,7 @@
<div <div
class="form-group" class="form-group"
:class="{ 'form-group--error': $v.user.password.$error }" :class="{ 'form-group--error': v$.user.password.$error }"
> >
<label <label
class="form--label" class="form--label"
@ -122,11 +122,11 @@
> >
</div> </div>
<div <div
v-if="$v.user.password.$dirty" v-if="v$.user.password.$dirty"
class="form-error" class="form-error"
> >
<ul> <ul>
<li v-if="!$v.user.password.required"> <li v-if="!v$.user.password.required">
<span>{{ $t('registration.validations.password_required') }}</span> <span>{{ $t('registration.validations.password_required') }}</span>
</li> </li>
</ul> </ul>
@ -134,7 +134,7 @@
<div <div
class="form-group" class="form-group"
:class="{ 'form-group--error': $v.user.confirm.$error }" :class="{ 'form-group--error': v$.user.confirm.$error }"
> >
<label <label
class="form--label" class="form--label"
@ -149,14 +149,14 @@
> >
</div> </div>
<div <div
v-if="$v.user.confirm.$dirty" v-if="v$.user.confirm.$dirty"
class="form-error" class="form-error"
> >
<ul> <ul>
<li v-if="!$v.user.confirm.required"> <li v-if="!v$.user.confirm.required">
<span>{{ $t('registration.validations.password_confirmation_required') }}</span> <span>{{ $t('registration.validations.password_confirmation_required') }}</span>
</li> </li>
<li v-if="!$v.user.confirm.sameAsPassword"> <li v-if="!v$.user.confirm.sameAsPassword">
<span>{{ $t('registration.validations.password_confirmation_match') }}</span> <span>{{ $t('registration.validations.password_confirmation_match') }}</span>
</li> </li>
</ul> </ul>

View File

@ -1,4 +1,3 @@
import Vue from 'vue'
import { unescape, flattenDeep } from 'lodash' import { unescape, flattenDeep } from 'lodash'
import { getTagName, processTextForEmoji, getAttrs } from 'src/services/html_converter/utility.service.js' import { getTagName, processTextForEmoji, getAttrs } from 'src/services/html_converter/utility.service.js'
import { convertHtmlToTree } from 'src/services/html_converter/html_tree_converter.service.js' import { convertHtmlToTree } from 'src/services/html_converter/html_tree_converter.service.js'
@ -27,7 +26,7 @@ import './rich_content.scss'
* *
* Apart from that one small hiccup with emit in render this _should_ be vue3-ready * Apart from that one small hiccup with emit in render this _should_ be vue3-ready
*/ */
export default Vue.component('RichContent', { export default {
name: 'RichContent', name: 'RichContent',
props: { props: {
// Original html content // Original html content
@ -58,7 +57,7 @@ export default Vue.component('RichContent', {
} }
}, },
// NEVER EVER TOUCH DATA INSIDE RENDER // NEVER EVER TOUCH DATA INSIDE RENDER
render (h) { render () {
// Pre-process HTML // Pre-process HTML
const { newHtml: html } = preProcessPerLine(this.html, this.greentext) const { newHtml: html } = preProcessPerLine(this.html, this.greentext)
let currentMentions = null // Current chain of mentions, we group all mentions together let currentMentions = null // Current chain of mentions, we group all mentions together
@ -76,18 +75,18 @@ export default Vue.component('RichContent', {
const renderImage = (tag) => { const renderImage = (tag) => {
return <StillImage return <StillImage
{...{ attrs: getAttrs(tag) }} {...getAttrs(tag)}
class="img" class="img"
/> />
} }
const renderHashtag = (attrs, children, encounteredTextReverse) => { const renderHashtag = (attrs, children, encounteredTextReverse) => {
const linkData = getLinkData(attrs, children, tagsIndex++) const { index, ...linkData } = getLinkData(attrs, children, tagsIndex++)
writtenTags.push(linkData) writtenTags.push(linkData)
if (!encounteredTextReverse) { if (!encounteredTextReverse) {
lastTags.push(linkData) lastTags.push(linkData)
} }
return <HashtagLink {...{ props: linkData }}/> return <HashtagLink { ...linkData }/>
} }
const renderMention = (attrs, children) => { const renderMention = (attrs, children) => {
@ -222,7 +221,7 @@ export default Vue.component('RichContent', {
attrs.target = '_blank' attrs.target = '_blank'
const newChildren = [...children].reverse().map(processItemReverse).reverse() const newChildren = [...children].reverse().map(processItemReverse).reverse()
return <a {...{ attrs }}> return <a {...attrs}>
{ newChildren } { newChildren }
</a> </a>
} }
@ -235,7 +234,7 @@ export default Vue.component('RichContent', {
const newChildren = Array.isArray(children) const newChildren = Array.isArray(children)
? [...children].reverse().map(processItemReverse).reverse() ? [...children].reverse().map(processItemReverse).reverse()
: children : children
return <Tag {...{ attrs: getAttrs(opener) }}> return <Tag {...getAttrs(opener)}>
{ newChildren } { newChildren }
</Tag> </Tag>
} else { } else {
@ -266,7 +265,7 @@ export default Vue.component('RichContent', {
return result return result
} }
}) }
const getLinkData = (attrs, children, index) => { const getLinkData = (attrs, children, index) => {
const stripTags = (item) => { const stripTags = (item) => {

View File

@ -16,6 +16,7 @@
class="fa-scale-110 fa-old-padding" class="fa-scale-110 fa-old-padding"
/> />
</button> </button>
{{ ' ' }}
<button <button
v-if="showPrivate" v-if="showPrivate"
class="button-unstyled scope" class="button-unstyled scope"
@ -29,6 +30,7 @@
class="fa-scale-110 fa-old-padding" class="fa-scale-110 fa-old-padding"
/> />
</button> </button>
{{ ' ' }}
<button <button
v-if="showUnlisted" v-if="showUnlisted"
class="button-unstyled scope" class="button-unstyled scope"
@ -42,6 +44,7 @@
class="fa-scale-110 fa-old-padding" class="fa-scale-110 fa-old-padding"
/> />
</button> </button>
{{ ' ' }}
<button <button
v-if="showPublic" v-if="showPublic"
class="button-unstyled scope" class="button-unstyled scope"

View File

@ -1,6 +1,7 @@
import FollowCard from '../follow_card/follow_card.vue' import FollowCard from '../follow_card/follow_card.vue'
import Conversation from '../conversation/conversation.vue' import Conversation from '../conversation/conversation.vue'
import Status from '../status/status.vue' import Status from '../status/status.vue'
import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
import map from 'lodash/map' import map from 'lodash/map'
import { library } from '@fortawesome/fontawesome-svg-core' import { library } from '@fortawesome/fontawesome-svg-core'
import { import {
@ -17,7 +18,8 @@ const Search = {
components: { components: {
FollowCard, FollowCard,
Conversation, Conversation,
Status Status,
TabSwitcher
}, },
props: [ props: [
'query' 'query'

View File

@ -8,12 +8,9 @@ library.add(
) )
export default { export default {
model: { emits: ['update:modelValue'],
prop: 'value',
event: 'change'
},
props: [ props: [
'value', 'modelValue',
'disabled', 'disabled',
'unstyled', 'unstyled',
'kind' 'kind'

View File

@ -1,4 +1,3 @@
<template> <template>
<label <label
class="Select input" class="Select input"
@ -6,11 +5,12 @@
> >
<select <select
:disabled="disabled" :disabled="disabled"
:value="value" :value="modelValue"
@change="$emit('change', $event.target.value)" @change="$emit('update:modelValue', $event.target.value)"
> >
<slot /> <slot />
</select> </select>
{{ ' ' }}
<FAIcon <FAIcon
class="select-down-icon" class="select-down-icon"
icon="chevron-down" icon="chevron-down"
@ -23,7 +23,8 @@
<style lang="scss"> <style lang="scss">
@import '../../_variables.scss'; @import '../../_variables.scss';
.Select { /* TODO fix order of styles */
label.Select {
padding: 0; padding: 0;
select { select {

View File

@ -6,9 +6,9 @@
> >
<div class="selectable-list-checkbox-wrapper"> <div class="selectable-list-checkbox-wrapper">
<Checkbox <Checkbox
:checked="allSelected" :model-value="allSelected"
:indeterminate="someSelected" :indeterminate="someSelected"
@change="toggleAll" @update:model-value="toggleAll"
> >
{{ $t('selectable_list.select_all') }} {{ $t('selectable_list.select_all') }}
</Checkbox> </Checkbox>
@ -31,8 +31,8 @@
> >
<div class="selectable-list-checkbox-wrapper"> <div class="selectable-list-checkbox-wrapper">
<Checkbox <Checkbox
:checked="isSelected(item)" :model-value="isSelected(item)"
@change="checked => toggle(checked, item)" @update:model-value="checked => toggle(checked, item)"
/> />
</div> </div>
<slot <slot

View File

@ -4,9 +4,9 @@
class="BooleanSetting" class="BooleanSetting"
> >
<Checkbox <Checkbox
:checked="state" :model-value="state"
:disabled="disabled" :disabled="disabled"
@change="update" @update:modelValue="update"
> >
<span <span
v-if="!!$slots.default" v-if="!!$slots.default"
@ -14,6 +14,7 @@
> >
<slot /> <slot />
</span> </span>
{{ ' ' }}
<ModifiedIndicator :changed="isChanged" /><ServerSideIndicator :server-side="isServerSide" /> </Checkbox> <ModifiedIndicator :changed="isChanged" /><ServerSideIndicator :server-side="isServerSide" /> </Checkbox>
</label> </label>
</template> </template>

View File

@ -4,10 +4,11 @@
class="ChoiceSetting" class="ChoiceSetting"
> >
<slot /> <slot />
{{ ' ' }}
<Select <Select
:value="state" :model-value="state"
:disabled="disabled" :disabled="disabled"
@change="update" @update:modelValue="update"
> >
<option <option
v-for="option in options" v-for="option in options"

View File

@ -8,7 +8,7 @@ export default {
path: String, path: String,
disabled: Boolean, disabled: Boolean,
min: Number, min: Number,
expert: Number expert: [Number, String]
}, },
computed: { computed: {
pathDefault () { pathDefault () {

View File

@ -16,6 +16,7 @@
:value="state" :value="state"
@change="update" @change="update"
> >
{{ ' ' }}
<ModifiedIndicator :changed="isChanged" /> <ModifiedIndicator :changed="isChanged" />
</span> </span>
</template> </template>

View File

@ -56,8 +56,8 @@ const SettingsModal = {
SettingsModalContent: getResettableAsyncComponent( SettingsModalContent: getResettableAsyncComponent(
() => import('./settings_modal_content.vue'), () => import('./settings_modal_content.vue'),
{ {
loading: PanelLoading, loadingComponent: PanelLoading,
error: AsyncComponentError, errorComponent: AsyncComponentError,
delay: 0 delay: 0
} }
) )

View File

@ -11,7 +11,7 @@
{{ $t('settings.settings') }} {{ $t('settings.settings') }}
</span> </span>
<transition name="fade"> <transition name="fade">
<template v-if="currentSaveStateNotice"> <div v-if="currentSaveStateNotice">
<div <div
v-if="currentSaveStateNotice.error" v-if="currentSaveStateNotice.error"
class="alert error" class="alert error"
@ -27,7 +27,7 @@
> >
{{ $t('settings.saving_ok') }} {{ $t('settings.saving_ok') }}
</div> </div>
</template> </div>
</transition> </transition>
<button <button
class="btn button-default" class="btn button-default"
@ -68,6 +68,7 @@
:title="$t('general.close')" :title="$t('general.close')"
> >
<span>{{ $t("settings.file_export_import.backup_restore") }}</span> <span>{{ $t("settings.file_export_import.backup_restore") }}</span>
{{ ' ' }}
<FAIcon <FAIcon
icon="chevron-down" icon="chevron-down"
/> />
@ -109,12 +110,15 @@
</template> </template>
</Popover> </Popover>
<Checkbox v-model="expertLevel"> <Checkbox
:model-value="!!expertLevel"
@update:modelValue="expertLevel = Number($event)"
>
{{ $t("settings.expert_mode") }} {{ $t("settings.expert_mode") }}
</Checkbox> </Checkbox>
<portal-target <span
id="unscrolled-content"
class="extra-content" class="extra-content"
name="unscrolled-content"
/> />
</div> </div>
</div> </div>

View File

@ -1,4 +1,4 @@
import TabSwitcher from 'src/components/tab_switcher/tab_switcher.js' import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
import DataImportExportTab from './tabs/data_import_export_tab.vue' import DataImportExportTab from './tabs/data_import_export_tab.vue'
import MutesAndBlocksTab from './tabs/mutes_and_blocks_tab.vue' import MutesAndBlocksTab from './tabs/mutes_and_blocks_tab.vue'
@ -53,6 +53,9 @@ const SettingsModalContent = {
}, },
open () { open () {
return this.$store.state.interface.settingsModalState !== 'hidden' return this.$store.state.interface.settingsModalState !== 'hidden'
},
bodyLock () {
return this.$store.state.interface.settingsModalState === 'visible'
} }
}, },
methods: { methods: {
@ -60,8 +63,8 @@ const SettingsModalContent = {
const targetTab = this.$store.state.interface.settingsModalTargetTab const targetTab = this.$store.state.interface.settingsModalTargetTab
// We're being told to open in specific tab // We're being told to open in specific tab
if (targetTab) { if (targetTab) {
const tabIndex = this.$refs.tabSwitcher.$slots.default.findIndex(elm => { const tabIndex = this.$refs.tabSwitcher.$slots.default().findIndex(elm => {
return elm.data && elm.data.attrs['data-tab-name'] === targetTab return elm.props && elm.props['data-tab-name'] === targetTab
}) })
if (tabIndex >= 0) { if (tabIndex >= 0) {
this.$refs.tabSwitcher.setTab(tabIndex) this.$refs.tabSwitcher.setTab(tabIndex)

View File

@ -4,6 +4,7 @@
class="settings_tab-switcher" class="settings_tab-switcher"
:side-tab-bar="true" :side-tab-bar="true"
:scrollable-tabs="true" :scrollable-tabs="true"
:body-scroll-lock="bodyLock"
> >
<div <div
:label="$t('settings.general')" :label="$t('settings.general')"

View File

@ -72,22 +72,10 @@
<div>{{ $t('settings.filtering_explanation') }}</div> <div>{{ $t('settings.filtering_explanation') }}</div>
</li> </li>
<h3>{{ $t('settings.attachments') }}</h3> <h3>{{ $t('settings.attachments') }}</h3>
<li v-if="expertLevel > 0">
<label for="maxThumbnails">
{{ $t('settings.max_thumbnails') }}
</label>
<input
id="maxThumbnails"
path.number="maxThumbnails"
class="number-input"
type="number"
min="0"
step="1"
>
</li>
<li> <li>
<IntegerSetting <IntegerSetting
path="maxThumbnails" path="maxThumbnails"
expert="1"
:min="0" :min="0"
> >
{{ $t('settings.max_thumbnails') }} {{ $t('settings.max_thumbnails') }}

View File

@ -2,7 +2,7 @@ import get from 'lodash/get'
import map from 'lodash/map' import map from 'lodash/map'
import reject from 'lodash/reject' import reject from 'lodash/reject'
import Autosuggest from 'src/components/autosuggest/autosuggest.vue' import Autosuggest from 'src/components/autosuggest/autosuggest.vue'
import TabSwitcher from 'src/components/tab_switcher/tab_switcher.js' import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
import BlockCard from 'src/components/block_card/block_card.vue' import BlockCard from 'src/components/block_card/block_card.vue'
import MuteCard from 'src/components/mute_card/mute_card.vue' import MuteCard from 'src/components/mute_card/mute_card.vue'
import DomainMuteCard from 'src/components/domain_mute_card/domain_mute_card.vue' import DomainMuteCard from 'src/components/domain_mute_card/domain_mute_card.vue'

View File

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

View File

@ -68,8 +68,9 @@
class="delete-field button-unstyled -hover-highlight" class="delete-field button-unstyled -hover-highlight"
@click="deleteField(i)" @click="deleteField(i)"
> >
<!-- TODO something is wrong with v-show here -->
<FAIcon <FAIcon
v-show="newFields.length > 1" v-if="newFields.length > 1"
icon="times" icon="times"
/> />
</button> </button>
@ -106,14 +107,17 @@
:src="user.profile_image_url_original" :src="user.profile_image_url_original"
class="current-avatar" class="current-avatar"
> >
<FAIcon <button
v-if="!isDefaultAvatar && pickAvatarBtnVisible" v-if="!isDefaultAvatar && pickAvatarBtnVisible"
:title="$t('settings.reset_avatar')" :title="$t('settings.reset_avatar')"
class="reset-button"
icon="times"
type="button"
@click="resetAvatar" @click="resetAvatar"
/> class="button-unstyled reset-button"
>
<FAIcon
icon="times"
type="button"
/>
</button>
</div> </div>
<p>{{ $t('settings.set_new_avatar') }}</p> <p>{{ $t('settings.set_new_avatar') }}</p>
<button <button
@ -135,14 +139,17 @@
<h2>{{ $t('settings.profile_banner') }}</h2> <h2>{{ $t('settings.profile_banner') }}</h2>
<div class="banner-background-preview"> <div class="banner-background-preview">
<img :src="user.cover_photo"> <img :src="user.cover_photo">
<FAIcon <button
v-if="!isDefaultBanner" v-if="!isDefaultBanner"
class="button-unstyled reset-button"
:title="$t('settings.reset_profile_banner')" :title="$t('settings.reset_profile_banner')"
class="reset-button"
icon="times"
type="button"
@click="resetBanner" @click="resetBanner"
/> >
<FAIcon
icon="times"
type="button"
/>
</button>
</div> </div>
<p>{{ $t('settings.set_new_profile_banner') }}</p> <p>{{ $t('settings.set_new_profile_banner') }}</p>
<img <img
@ -174,14 +181,17 @@
<h2>{{ $t('settings.profile_background') }}</h2> <h2>{{ $t('settings.profile_background') }}</h2>
<div class="banner-background-preview"> <div class="banner-background-preview">
<img :src="user.background_image"> <img :src="user.background_image">
<FAIcon <button
v-if="!isDefaultBackground" v-if="!isDefaultBackground"
class="button-unstyled reset-button"
:title="$t('settings.reset_profile_background')" :title="$t('settings.reset_profile_background')"
class="reset-button"
icon="times"
type="button"
@click="resetBackground" @click="resetBackground"
/> >
<FAIcon
icon="times"
type="button"
/>
</button>
</div> </div>
<p>{{ $t('settings.set_new_profile_background') }}</p> <p>{{ $t('settings.set_new_profile_background') }}</p>
<img <img

View File

@ -29,14 +29,14 @@
{{ $t('settings.style.preview.content') }} {{ $t('settings.style.preview.content') }}
</h4> </h4>
<i18n path="settings.style.preview.text"> <i18n-t scope="global" keypath="settings.style.preview.text">
<code style="font-family: var(--postCodeFont)"> <code style="font-family: var(--postCodeFont)">
{{ $t('settings.style.preview.mono') }} {{ $t('settings.style.preview.mono') }}
</code> </code>
<a style="color: var(--link)"> <a style="color: var(--link)">
{{ $t('settings.style.preview.link') }} {{ $t('settings.style.preview.link') }}
</a> </a>
</i18n> </i18n-t>
<div class="icons"> <div class="icons">
<FAIcon <FAIcon
@ -72,15 +72,16 @@
:^) :^)
</div> </div>
<div class="content"> <div class="content">
<i18n <i18n-t
path="settings.style.preview.fine_print" keypath="settings.style.preview.fine_print"
tag="span" tag="span"
class="faint" class="faint"
scope="global"
> >
<a style="color: var(--faintLink)"> <a style="color: var(--faintLink)">
{{ $t('settings.style.preview.faint_link') }} {{ $t('settings.style.preview.faint_link') }}
</a> </a>
</i18n> </i18n-t>
</div> </div>
</div> </div>
<div class="separator" /> <div class="separator" />

View File

@ -1,4 +1,3 @@
import { set, delete as del } from 'vue'
import { import {
rgb2hex, rgb2hex,
hex2rgb, hex2rgb,
@ -34,7 +33,7 @@ import OpacityInput from 'src/components/opacity_input/opacity_input.vue'
import ShadowControl from 'src/components/shadow_control/shadow_control.vue' import ShadowControl from 'src/components/shadow_control/shadow_control.vue'
import FontControl from 'src/components/font_control/font_control.vue' import FontControl from 'src/components/font_control/font_control.vue'
import ContrastRatio from 'src/components/contrast_ratio/contrast_ratio.vue' import ContrastRatio from 'src/components/contrast_ratio/contrast_ratio.vue'
import TabSwitcher from 'src/components/tab_switcher/tab_switcher.js' import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
import Checkbox from 'src/components/checkbox/checkbox.vue' import Checkbox from 'src/components/checkbox/checkbox.vue'
import Select from 'src/components/select/select.vue' import Select from 'src/components/select/select.vue'
@ -320,9 +319,9 @@ export default {
}, },
set (val) { set (val) {
if (val) { if (val) {
set(this.shadowsLocal, this.shadowSelected, this.currentShadowFallback.map(_ => Object.assign({}, _))) this.shadowsLocal[this.shadowSelected] = this.currentShadowFallback.map(_ => Object.assign({}, _))
} else { } else {
del(this.shadowsLocal, this.shadowSelected) delete this.shadowsLocal[this.shadowSelected]
} }
} }
}, },
@ -334,7 +333,7 @@ export default {
return this.shadowsLocal[this.shadowSelected] return this.shadowsLocal[this.shadowSelected]
}, },
set (v) { set (v) {
set(this.shadowsLocal, this.shadowSelected, v) this.shadowsLocal[this.shadowSelected] = v
} }
}, },
themeValid () { themeValid () {
@ -561,7 +560,7 @@ export default {
.filter(_ => _.endsWith('ColorLocal') || _.endsWith('OpacityLocal')) .filter(_ => _.endsWith('ColorLocal') || _.endsWith('OpacityLocal'))
.filter(_ => !v1OnlyNames.includes(_)) .filter(_ => !v1OnlyNames.includes(_))
.forEach(key => { .forEach(key => {
set(this.$data, key, undefined) this.$data[key] = undefined
}) })
}, },
@ -569,7 +568,7 @@ export default {
Object.keys(this.$data) Object.keys(this.$data)
.filter(_ => _.endsWith('RadiusLocal')) .filter(_ => _.endsWith('RadiusLocal'))
.forEach(key => { .forEach(key => {
set(this.$data, key, undefined) this.$data[key] = undefined
}) })
}, },
@ -577,7 +576,7 @@ export default {
Object.keys(this.$data) Object.keys(this.$data)
.filter(_ => _.endsWith('OpacityLocal')) .filter(_ => _.endsWith('OpacityLocal'))
.forEach(key => { .forEach(key => {
set(this.$data, key, undefined) this.$data[key] = undefined
}) })
}, },

View File

@ -903,6 +903,7 @@
<div class="tab-header shadow-selector"> <div class="tab-header shadow-selector">
<div class="select-container"> <div class="select-container">
{{ $t('settings.style.shadows.component') }} {{ $t('settings.style.shadows.component') }}
{{ ' ' }}
<Select <Select
id="shadow-switcher" id="shadow-switcher"
v-model="shadowSelected" v-model="shadowSelected"
@ -924,6 +925,7 @@
> >
{{ $t('settings.style.shadows.override') }} {{ $t('settings.style.shadows.override') }}
</label> </label>
{{ ' ' }}
<input <input
id="override" id="override"
v-model="currentShadowOverriden" v-model="currentShadowOverriden"
@ -949,27 +951,30 @@
:fallback="currentShadowFallback" :fallback="currentShadowFallback"
/> />
<div v-if="shadowSelected === 'avatar' || shadowSelected === 'avatarStatus'"> <div v-if="shadowSelected === 'avatar' || shadowSelected === 'avatarStatus'">
<i18n <i18n-t
path="settings.style.shadows.filter_hint.always_drop_shadow" scope="global"
keypath="settings.style.shadows.filter_hint.always_drop_shadow"
tag="p" tag="p"
> >
<code>filter: drop-shadow()</code> <code>filter: drop-shadow()</code>
</i18n> </i18n-t>
<p>{{ $t('settings.style.shadows.filter_hint.avatar_inset') }}</p> <p>{{ $t('settings.style.shadows.filter_hint.avatar_inset') }}</p>
<i18n <i18n-t
path="settings.style.shadows.filter_hint.drop_shadow_syntax" scope="global"
keypath="settings.style.shadows.filter_hint.drop_shadow_syntax"
tag="p" tag="p"
> >
<code>drop-shadow</code> <code>drop-shadow</code>
<code>spread-radius</code> <code>spread-radius</code>
<code>inset</code> <code>inset</code>
</i18n> </i18n-t>
<i18n <i18n-t
path="settings.style.shadows.filter_hint.inset_classic" scope="global"
keypath="settings.style.shadows.filter_hint.inset_classic"
tag="p" tag="p"
> >
<code>box-shadow</code> <code>box-shadow</code>
</i18n> </i18n-t>
<p>{{ $t('settings.style.shadows.filter_hint.spread_zero') }}</p> <p>{{ $t('settings.style.shadows.filter_hint.spread_zero') }}</p>
</div> </div>
</div> </div>
@ -1016,9 +1021,9 @@
</tab-switcher> </tab-switcher>
</keep-alive> </keep-alive>
<portal <teleport
v-if="isActive" v-if="isActive"
to="unscrolled-content" to="#unscrolled-content"
> >
<div class="apply-container"> <div class="apply-container">
<button <button
@ -1035,7 +1040,7 @@
{{ $t('settings.style.switcher.reset') }} {{ $t('settings.style.switcher.reset') }}
</button> </button>
</div> </div>
</portal> </teleport>
</div> </div>
</template> </template>

View File

@ -28,4 +28,4 @@
</div> </div>
</div> </div>
</template> </template>
<script src="./version_tab.js"> <script src="./version_tab.js" />

View File

@ -30,18 +30,19 @@ const toModel = (object = {}) => ({
}) })
export default { export default {
// 'Value' and 'Fallback' can be undefined, but if they are // 'modelValue' and 'Fallback' can be undefined, but if they are
// initially vue won't detect it when they become something else // initially vue won't detect it when they become something else
// therefore i'm using "ready" which should be passed as true when // therefore i'm using "ready" which should be passed as true when
// data becomes available // data becomes available
props: [ props: [
'value', 'fallback', 'ready' 'modelValue', 'fallback', 'ready'
], ],
emits: ['update:modelValue'],
data () { data () {
return { return {
selectedId: 0, selectedId: 0,
// TODO there are some bugs regarding display of array (it's not getting updated when deleting for some reason) // TODO there are some bugs regarding display of array (it's not getting updated when deleting for some reason)
cValue: (this.value || this.fallback || []).map(toModel) cValue: (this.modelValue || this.fallback || []).map(toModel)
} }
}, },
components: { components: {
@ -70,7 +71,7 @@ export default {
} }
}, },
beforeUpdate () { beforeUpdate () {
this.cValue = this.value || this.fallback this.cValue = this.modelValue || this.fallback
}, },
computed: { computed: {
anyShadows () { anyShadows () {
@ -105,7 +106,7 @@ export default {
!this.usingFallback !this.usingFallback
}, },
usingFallback () { usingFallback () {
return typeof this.value === 'undefined' return typeof this.modelValue === 'undefined'
}, },
rgb () { rgb () {
return hex2rgb(this.selected.color) return hex2rgb(this.selected.color)

View File

@ -204,12 +204,13 @@
v-model="selected.alpha" v-model="selected.alpha"
:disabled="!present" :disabled="!present"
/> />
<i18n <i18n-t
path="settings.style.shadows.hintV3" scope="global"
keypath="settings.style.shadows.hintV3"
tag="p" tag="p"
> >
<code>--variable,mod</code> <code>--variable,mod</code>
</i18n> </i18n-t>
</div> </div>
</div> </div>
</template> </template>

View File

@ -69,7 +69,7 @@ const controlledOrUncontrolledGetters = list => list.reduce((res, name) => {
const controlledName = `controlled${camelized}` const controlledName = `controlled${camelized}`
const uncontrolledName = `uncontrolled${camelized}` const uncontrolledName = `uncontrolled${camelized}`
res[name] = function () { res[name] = function () {
return this[toggle] ? this[controlledName] : this[uncontrolledName] return ((this.$data[toggle] !== undefined || this.$props[toggle] !== undefined) && this[toggle]) ? this[controlledName] : this[uncontrolledName]
} }
return res return res
}, {}) }, {})
@ -311,7 +311,7 @@ const Status = {
return this.mergedConfig.hideWordFilteredPosts return this.mergedConfig.hideWordFilteredPosts
}, },
hideStatus () { hideStatus () {
return (this.virtualHidden || !this.shouldNotMute) && ( return (!this.shouldNotMute) && (
(this.muted && this.hideFilteredStatuses) || (this.muted && this.hideFilteredStatuses) ||
(this.userIsMuted && this.hideMutedUsers) || (this.userIsMuted && this.hideMutedUsers) ||
(this.status.thread_muted && this.hideMutedThreads) || (this.status.thread_muted && this.hideMutedThreads) ||
@ -389,6 +389,9 @@ const Status = {
}, },
threadShowing () { threadShowing () {
return this.controlledThreadDisplayStatus === 'showing' return this.controlledThreadDisplayStatus === 'showing'
},
visibilityLocalized () {
return this.$i18n.t('general.scope_in_timeline.' + this.status.visibility)
} }
}, },
methods: { methods: {
@ -478,11 +481,6 @@ const Status = {
'isSuspendable': function (val) { 'isSuspendable': function (val) {
this.suspendable = val this.suspendable = val
} }
},
filters: {
capitalize: function (str) {
return str.charAt(0).toUpperCase() + str.slice(1)
}
} }
} }

View File

@ -1,6 +1,7 @@
<template> <template>
<div <div
v-if="!hideStatus" v-if="!hideStatus"
ref="root"
class="Status" class="Status"
:class="[{ '-focused': isFocused }, { '-conversation': inlineExpanded }]" :class="[{ '-focused': isFocused }, { '-conversation': inlineExpanded }]"
> >
@ -100,6 +101,7 @@
:to="retweeterProfileLink" :to="retweeterProfileLink"
>{{ retweeter }}</router-link> >{{ retweeter }}</router-link>
</span> </span>
{{ ' ' }}
<FAIcon <FAIcon
icon="retweet" icon="retweet"
class="repeat-icon" class="repeat-icon"
@ -120,9 +122,9 @@
v-if="!noHeading" v-if="!noHeading"
class="left-side" class="left-side"
> >
<router-link <a
:to="userProfileLink" :href="$router.resolve(userProfileLink).href"
@click.stop.prevent.capture.native="toggleUserExpanded" @click.stop.prevent.capture="toggleUserExpanded"
> >
<UserAvatar <UserAvatar
class="post-avatar" class="post-avatar"
@ -131,7 +133,7 @@
:better-shadow="betterShadow" :better-shadow="betterShadow"
:user="status.user" :user="status.user"
/> />
</router-link> </a>
</div> </div>
<div class="right-side"> <div class="right-side">
<UserCard <UserCard
@ -191,7 +193,7 @@
<span <span
v-if="status.visibility" v-if="status.visibility"
class="visibility-icon" class="visibility-icon"
:title="status.visibility | capitalize" :title="visibilityLocalized"
> >
<FAIcon <FAIcon
fixed-width fixed-width
@ -274,6 +276,7 @@
icon="reply" icon="reply"
flip="horizontal" flip="horizontal"
/> />
{{ ' ' }}
<span <span
class="reply-to-text" class="reply-to-text"
> >
@ -293,7 +296,6 @@
:url="replyProfileLink" :url="replyProfileLink"
:user-id="status.in_reply_to_user_id" :user-id="status.in_reply_to_user_id"
:user-screen-name="status.in_reply_to_screen_name" :user-screen-name="status.in_reply_to_screen_name"
:first-mention="false"
/> />
</span> </span>

View File

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

View File

@ -1,6 +1,7 @@
import { find } from 'lodash' import { find } from 'lodash'
import { library } from '@fortawesome/fontawesome-svg-core' import { library } from '@fortawesome/fontawesome-svg-core'
import { faCircleNotch } from '@fortawesome/free-solid-svg-icons' import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
import { defineAsyncComponent } from 'vue'
library.add( library.add(
faCircleNotch faCircleNotch
@ -22,8 +23,8 @@ const StatusPopover = {
} }
}, },
components: { components: {
Status: () => import('../status/status.vue'), Status: defineAsyncComponent(() => import('../status/status.vue')),
Popover: () => import('../popover/popover.vue') Popover: defineAsyncComponent(() => import('../popover/popover.vue'))
}, },
methods: { methods: {
enter () { enter () {

View File

@ -1,6 +1,6 @@
/* eslint-env browser */ /* eslint-env browser */
import statusPosterService from '../../services/status_poster/status_poster.service.js' import statusPosterService from '../../services/status_poster/status_poster.service.js'
import TabSwitcher from '../tab_switcher/tab_switcher.js' import TabSwitcher from '../tab_switcher/tab_switcher.jsx'
const StickerPicker = { const StickerPicker = {
components: { components: {

View File

@ -1,10 +1,13 @@
import Vue from 'vue' // eslint-disable-next-line no-unused
import { h, Fragment } from 'vue'
import { mapState } from 'vuex' import { mapState } from 'vuex'
import { FontAwesomeIcon as FAIcon } from '@fortawesome/vue-fontawesome' import { FontAwesomeIcon as FAIcon } from '@fortawesome/vue-fontawesome'
import './tab_switcher.scss' import './tab_switcher.scss'
export default Vue.component('tab-switcher', { const findFirstUsable = (slots) => slots.findIndex(_ => _.props)
export default {
name: 'TabSwitcher', name: 'TabSwitcher',
props: { props: {
renderOnlyFocused: { renderOnlyFocused: {
@ -31,26 +34,31 @@ export default Vue.component('tab-switcher', {
required: false, required: false,
type: Boolean, type: Boolean,
default: false default: false
},
bodyScrollLock: {
required: false,
type: Boolean,
default: false
} }
}, },
data () { data () {
return { return {
active: this.$slots.default.findIndex(_ => _.tag) active: findFirstUsable(this.slots())
} }
}, },
computed: { computed: {
activeIndex () { activeIndex () {
// In case of controlled component // In case of controlled component
if (this.activeTab) { if (this.activeTab) {
return this.$slots.default.findIndex(slot => this.activeTab === slot.key) return this.slots().findIndex(slot => this.activeTab === slot.props.key)
} else { } else {
return this.active return this.active
} }
}, },
isActive () { isActive () {
return tabName => { return tabName => {
const isWanted = slot => slot.data && slot.data.attrs['data-tab-name'] === tabName const isWanted = slot => slot.props && slot.props['data-tab-name'] === tabName
return this.$slots.default.findIndex(isWanted) === this.activeIndex return this.$slots.default().findIndex(isWanted) === this.activeIndex
} }
}, },
settingsModalVisible () { settingsModalVisible () {
@ -61,9 +69,9 @@ export default Vue.component('tab-switcher', {
}) })
}, },
beforeUpdate () { beforeUpdate () {
const currentSlot = this.$slots.default[this.active] const currentSlot = this.slots()[this.active]
if (!currentSlot.tag) { if (!currentSlot.props) {
this.active = this.$slots.default.findIndex(_ => _.tag) this.active = findFirstUsable(this.slots())
} }
}, },
methods: { methods: {
@ -73,9 +81,16 @@ export default Vue.component('tab-switcher', {
this.setTab(index) this.setTab(index)
} }
}, },
// DO NOT put it to computed, it doesn't work (caching?)
slots () {
if (this.$slots.default()[0].type === Fragment) {
return this.$slots.default()[0].children
}
return this.$slots.default()
},
setTab (index) { setTab (index) {
if (typeof this.onSwitch === 'function') { if (typeof this.onSwitch === 'function') {
this.onSwitch.call(null, this.$slots.default[index].key) this.onSwitch.call(null, this.slots()[index].key)
} }
this.active = index this.active = index
if (this.scrollableTabs) { if (this.scrollableTabs) {
@ -83,27 +98,28 @@ export default Vue.component('tab-switcher', {
} }
} }
}, },
render (h) { render () {
const tabs = this.$slots.default const tabs = this.slots()
.map((slot, index) => { .map((slot, index) => {
if (!slot.tag) return const props = slot.props
if (!props) return
const classesTab = ['tab', 'button-default'] const classesTab = ['tab', 'button-default']
const classesWrapper = ['tab-wrapper'] const classesWrapper = ['tab-wrapper']
if (this.activeIndex === index) { if (this.activeIndex === index) {
classesTab.push('active') classesTab.push('active')
classesWrapper.push('active') classesWrapper.push('active')
} }
if (slot.data.attrs.image) { if (props.image) {
return ( return (
<div class={classesWrapper.join(' ')}> <div class={classesWrapper.join(' ')}>
<button <button
disabled={slot.data.attrs.disabled} disabled={props.disabled}
onClick={this.clickTab(index)} onClick={this.clickTab(index)}
class={classesTab.join(' ')} class={classesTab.join(' ')}
type="button" type="button"
> >
<img src={slot.data.attrs.image} title={slot.data.attrs['image-tooltip']}/> <img src={props.image} title={props['image-tooltip']}/>
{slot.data.attrs.label ? '' : slot.data.attrs.label} {props.label ? '' : props.label}
</button> </button>
</div> </div>
) )
@ -111,25 +127,26 @@ export default Vue.component('tab-switcher', {
return ( return (
<div class={classesWrapper.join(' ')}> <div class={classesWrapper.join(' ')}>
<button <button
disabled={slot.data.attrs.disabled} disabled={props.disabled}
onClick={this.clickTab(index)} onClick={this.clickTab(index)}
class={classesTab.join(' ')} class={classesTab.join(' ')}
type="button" type="button"
> >
{!slot.data.attrs.icon ? '' : (<FAIcon class="tab-icon" size="2x" fixed-width icon={slot.data.attrs.icon}/>)} {!props.icon ? '' : (<FAIcon class="tab-icon" size="2x" fixed-width icon={props.icon}/>)}
<span class="text"> <span class="text">
{slot.data.attrs.label} {props.label}
</span> </span>
</button> </button>
</div> </div>
) )
}) })
const contents = this.$slots.default.map((slot, index) => { const contents = this.slots().map((slot, index) => {
if (!slot.tag) return const props = slot.props
if (!props) return
const active = this.activeIndex === index const active = this.activeIndex === index
const classes = [ active ? 'active' : 'hidden' ] const classes = [ active ? 'active' : 'hidden' ]
if (slot.data.attrs.fullHeight) { if (props.fullHeight) {
classes.push('full-height') classes.push('full-height')
} }
const renderSlot = (!this.renderOnlyFocused || active) const renderSlot = (!this.renderOnlyFocused || active)
@ -140,7 +157,7 @@ export default Vue.component('tab-switcher', {
<div class={classes}> <div class={classes}>
{ {
this.sideTabBar this.sideTabBar
? <h1 class="mobile-label">{slot.data.attrs.label}</h1> ? <h1 class="mobile-label">{props.label}</h1>
: '' : ''
} }
{renderSlot} {renderSlot}
@ -153,10 +170,14 @@ export default Vue.component('tab-switcher', {
<div class="tabs"> <div class="tabs">
{tabs} {tabs}
</div> </div>
<div ref="contents" class={'contents' + (this.scrollableTabs ? ' scrollable-tabs' : '')} v-body-scroll-lock={this.settingsModalVisible}> <div
ref="contents"
class={'contents' + (this.scrollableTabs ? ' scrollable-tabs' : '')}
v-body-scroll-lock={this.bodyScrollLock}
>
{contents} {contents}
</div> </div>
</div> </div>
) )
} }
}) }

View File

@ -166,13 +166,6 @@
position: relative; position: relative;
white-space: nowrap; white-space: nowrap;
padding: 6px 1em; padding: 6px 1em;
background-color: $fallback--fg;
background-color: var(--tab, $fallback--fg);
&, &:active .tab-icon {
color: $fallback--text;
color: var(--tabText, $fallback--text);
}
&:not(.active) { &:not(.active) {
z-index: 4; z-index: 4;

View File

@ -18,7 +18,7 @@ const TagTimeline = {
this.$store.dispatch('startFetchingTimeline', { timeline: 'tag', tag: this.tag }) this.$store.dispatch('startFetchingTimeline', { timeline: 'tag', tag: this.tag })
} }
}, },
destroyed () { unmounted () {
this.$store.dispatch('stopFetchingTimeline', 'tag') this.$store.dispatch('stopFetchingTimeline', 'tag')
} }
} }

View File

@ -74,36 +74,44 @@
v-if="currentReplies.length && !threadShowing" v-if="currentReplies.length && !threadShowing"
class="thread-tree-replies thread-tree-replies-hidden" class="thread-tree-replies thread-tree-replies-hidden"
> >
<i18n <i18n-t
v-if="simple" v-if="simple"
scope="global"
tag="button" tag="button"
path="status.thread_follow_with_icon" keypath="status.thread_follow_with_icon"
class="button-unstyled -link thread-tree-show-replies-button" class="button-unstyled -link thread-tree-show-replies-button"
@click.prevent="dive(status.id)" @click.prevent="dive(status.id)"
> >
<FAIcon <template #icon>
place="icon" <FAIcon
icon="angle-double-right" icon="angle-double-right"
/> />
<span place="text"> </template>
{{ $tc('status.thread_follow', totalReplyCount[status.id], { numStatus: totalReplyCount[status.id] }) }} <template #text>
</span> <span>
</i18n> {{ $tc('status.thread_follow', totalReplyCount[status.id], { numStatus: totalReplyCount[status.id] }) }}
<i18n </span>
</template>
</i18n-t>
<i18n-t
v-else v-else
scope="global"
tag="button" tag="button"
path="status.thread_show_full_with_icon" keypath="status.thread_show_full_with_icon"
class="button-unstyled -link thread-tree-show-replies-button" class="button-unstyled -link thread-tree-show-replies-button"
@click.prevent="showThreadRecursively(status.id)" @click.prevent="showThreadRecursively(status.id)"
> >
<FAIcon <template #icon>
place="icon" <FAIcon
icon="angle-double-down" icon="angle-double-down"
/> />
<span place="text"> </template>
{{ $tc('status.thread_show_full', totalReplyCount[status.id], { numStatus: totalReplyCount[status.id], depth: totalReplyDepth[status.id] }) }} <template #text>
</span> <span>
</i18n> {{ $tc('status.thread_show_full', totalReplyCount[status.id], { numStatus: totalReplyCount[status.id], depth: totalReplyDepth[status.id] }) }}
</span>
</template>
</i18n-t>
</div> </div>
</div> </div>
</template> </template>

View File

@ -31,7 +31,7 @@ export default {
created () { created () {
this.refreshRelativeTimeObject() this.refreshRelativeTimeObject()
}, },
destroyed () { unmounted () {
clearTimeout(this.interval) clearTimeout(this.interval)
}, },
methods: { methods: {

View File

@ -40,6 +40,12 @@ const Timeline = {
TimelineQuickSettings TimelineQuickSettings
}, },
computed: { computed: {
filteredVisibleStatuses () {
return this.timeline.visibleStatuses.filter(status => this.timelineName !== 'user' || (status.id >= this.timeline.minId && status.id <= this.timeline.maxId))
},
filteredPinnedStatusIds () {
return (this.pinnedStatusIds || []).filter(statusId => this.timeline.statusesObject[statusId])
},
newStatusCount () { newStatusCount () {
return this.timeline.newStatusCount return this.timeline.newStatusCount
}, },
@ -104,7 +110,7 @@ const Timeline = {
window.addEventListener('keydown', this.handleShortKey) window.addEventListener('keydown', this.handleShortKey)
setTimeout(this.determineVisibleStatuses, 250) setTimeout(this.determineVisibleStatuses, 250)
}, },
destroyed () { unmounted () {
window.removeEventListener('scroll', this.handleScroll) window.removeEventListener('scroll', this.handleScroll)
window.removeEventListener('keydown', this.handleShortKey) window.removeEventListener('keydown', this.handleShortKey)
if (typeof document.hidden !== 'undefined') document.removeEventListener('visibilitychange', this.handleVisibilityChange, false) if (typeof document.hidden !== 'undefined') document.removeEventListener('visibilitychange', this.handleVisibilityChange, false)

View File

@ -23,30 +23,26 @@
ref="timeline" ref="timeline"
class="timeline" class="timeline"
> >
<template v-for="statusId in pinnedStatusIds"> <conversation
<conversation v-for="statusId in filteredPinnedStatusIds"
v-if="timeline.statusesObject[statusId]" :key="statusId + '-pinned'"
:key="statusId + '-pinned'" class="status-fadein"
class="status-fadein" :status-id="statusId"
:status-id="statusId" :collapsable="true"
:collapsable="true" :pinned-status-ids-object="pinnedStatusIdsObject"
:pinned-status-ids-object="pinnedStatusIdsObject" :in-profile="inProfile"
:in-profile="inProfile" :profile-user-id="userId"
:profile-user-id="userId" />
/> <conversation
</template> v-for="status in filteredVisibleStatuses"
<template v-for="status in timeline.visibleStatuses"> :key="status.id"
<conversation class="status-fadein"
v-if="timelineName !== 'user' || (status.id >= timeline.minId && status.id <= timeline.maxId)" :status-id="status.id"
:key="status.id" :collapsable="true"
class="status-fadein" :in-profile="inProfile"
:status-id="status.id" :profile-user-id="userId"
:collapsable="true" :virtual-hidden="virtualScrollingEnabled && !statusesToDisplay.includes(status.id)"
:in-profile="inProfile" />
:profile-user-id="userId"
:virtual-hidden="virtualScrollingEnabled && !statusesToDisplay.includes(status.id)"
/>
</template>
</div> </div>
</div> </div>
<div :class="classes.footer"> <div :class="classes.footer">

View File

@ -2,7 +2,7 @@
<span <span
class="Avatar" class="Avatar"
:class="{ '-compact': compact }" :class="{ '-compact': compact }"
> >
<StillImage <StillImage
v-if="user" v-if="user"
class="avatar" class="avatar"

View File

@ -141,6 +141,7 @@
class="userHighlightCl" class="userHighlightCl"
type="color" type="color"
> >
{{ ' ' }}
<Select <Select
:id="'userHighlightSel'+user.id" :id="'userHighlightSel'+user.id"
v-model="userHighlightType" v-model="userHighlightType"

View File

@ -1,3 +1,6 @@
import { defineAsyncComponent } from 'vue'
import RichContent from 'src/components/rich_content/rich_content.jsx'
import { library } from '@fortawesome/fontawesome-svg-core' import { library } from '@fortawesome/fontawesome-svg-core'
import { faCircleNotch } from '@fortawesome/free-solid-svg-icons' import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
@ -11,8 +14,9 @@ const UserListPopover = {
'users' 'users'
], ],
components: { components: {
Popover: () => import('../popover/popover.vue'), RichContent,
UserAvatar: () => import('../user_avatar/user_avatar.vue') Popover: defineAsyncComponent(() => import('../popover/popover.vue')),
UserAvatar: defineAsyncComponent(() => import('../user_avatar/user_avatar.vue'))
}, },
computed: { computed: {
usersCapped () { usersCapped () {

View File

@ -2,7 +2,7 @@
<div class="user-panel"> <div class="user-panel">
<div <div
v-if="signedIn" v-if="signedIn"
key="user-panel" key="user-panel-signed"
class="panel panel-default signed-in" class="panel panel-default signed-in"
> >
<UserCard <UserCard

View File

@ -3,7 +3,7 @@ import UserCard from '../user_card/user_card.vue'
import FollowCard from '../follow_card/follow_card.vue' import FollowCard from '../follow_card/follow_card.vue'
import Timeline from '../timeline/timeline.vue' import Timeline from '../timeline/timeline.vue'
import Conversation from '../conversation/conversation.vue' import Conversation from '../conversation/conversation.vue'
import TabSwitcher from 'src/components/tab_switcher/tab_switcher.js' import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
import RichContent from 'src/components/rich_content/rich_content.jsx' import RichContent from 'src/components/rich_content/rich_content.jsx'
import List from '../list/list.vue' import List from '../list/list.vue'
import withLoadMore from '../../hocs/with_load_more/with_load_more' import withLoadMore from '../../hocs/with_load_more/with_load_more'
@ -47,7 +47,7 @@ const UserProfile = {
this.load(routeParams.name || routeParams.id) this.load(routeParams.name || routeParams.id)
this.tab = get(this.$route, 'query.tab', defaultTabKey) this.tab = get(this.$route, 'query.tab', defaultTabKey)
}, },
destroyed () { unmounted () {
this.stopFetching() this.stopFetching()
}, },
computed: { computed: {

Some files were not shown because too many files have changed in this diff Show More