Fix deprecated format
This commit is contained in:
parent
e92dbba320
commit
95242cf758
|
@ -18,25 +18,12 @@
|
|||
v-bind:key="account._id"
|
||||
role="menuitem"
|
||||
>
|
||||
<el-icon><el-icon-menu /></el-icon>
|
||||
<FailoverImg
|
||||
v-else
|
||||
:src="account.avatar"
|
||||
class="avatar"
|
||||
:title="account.username + '@' + account.domain"
|
||||
/>
|
||||
<FailoverImg
|
||||
:src="`${account.baseURL}/favicon.ico`"
|
||||
:failoverSrc="`${account.baseURL}/favicon.png`"
|
||||
class="instance-icon"
|
||||
/>
|
||||
<el-icon v-if="account.avatar === undefined || account.avatar === null || account.avatar === ''"><el-icon-menu /></el-icon>
|
||||
<FailoverImg v-else :src="account.avatar" class="avatar" :title="account.username + '@' + account.domain" />
|
||||
<FailoverImg :src="`${account.baseURL}/favicon.ico`" :failoverSrc="`${account.baseURL}/favicon.png`" class="instance-icon" />
|
||||
<span slot="title">{{ account.domain }}</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item
|
||||
index="/login"
|
||||
:title="$t('global_header.add_new_account')"
|
||||
role="menuitem"
|
||||
>
|
||||
<el-menu-item index="/login" :title="$t('global_header.add_new_account')" role="menuitem">
|
||||
<el-icon><el-icon-plus /></el-icon>
|
||||
<span slot="new">New</span>
|
||||
</el-menu-item>
|
||||
|
@ -57,17 +44,17 @@ export default {
|
|||
components: {
|
||||
FailoverImg,
|
||||
ElIconMenu,
|
||||
ElIconPlus,
|
||||
ElIconPlus
|
||||
},
|
||||
name: 'global-header',
|
||||
computed: {
|
||||
...mapState('GlobalHeader', {
|
||||
accounts: (state) => state.accounts,
|
||||
hide: (state) => state.hide,
|
||||
accounts: state => state.accounts,
|
||||
hide: state => state.hide
|
||||
}),
|
||||
...mapState({
|
||||
themeColor: (state) => state.App.theme.global_header_color,
|
||||
}),
|
||||
themeColor: state => state.App.theme.global_header_color
|
||||
})
|
||||
},
|
||||
created() {
|
||||
this.initialize()
|
||||
|
@ -79,14 +66,14 @@ export default {
|
|||
async initialize() {
|
||||
await this.$store
|
||||
.dispatch('GlobalHeader/initLoad')
|
||||
.then((accounts) => {
|
||||
this.$store.dispatch('GlobalHeader/startStreamings').catch((err) => {
|
||||
.then(accounts => {
|
||||
this.$store.dispatch('GlobalHeader/startStreamings').catch(err => {
|
||||
if (err instanceof StreamingError) {
|
||||
this.$message({
|
||||
message: this.$t('message.start_all_streamings_error', {
|
||||
domain: err.domain,
|
||||
domain: err.domain
|
||||
}),
|
||||
type: 'error',
|
||||
type: 'error'
|
||||
})
|
||||
}
|
||||
})
|
||||
|
@ -94,11 +81,11 @@ export default {
|
|||
this.$router.push({ path: `/${accounts[0]._id}/home` })
|
||||
}
|
||||
})
|
||||
.catch((_) => {
|
||||
.catch(_ => {
|
||||
return this.$router.push({ path: '/login' })
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
@ -9,18 +9,10 @@
|
|||
:model="form"
|
||||
>
|
||||
<el-form-item :label="$t('login.domain_name_label')" prop="domainName">
|
||||
<el-input
|
||||
v-model="form.domainName"
|
||||
placeholder="mastodon.social"
|
||||
v-shortkey="['enter']"
|
||||
@shortkey.native="handleKey"
|
||||
></el-input>
|
||||
<el-input v-model="form.domainName" placeholder="mastodon.social" v-shortkey="['enter']" @shortkey="handleKey"></el-input>
|
||||
</el-form-item>
|
||||
<p class="proxy-info">
|
||||
{{ $t('login.proxy_info')
|
||||
}}<router-link to="/preferences/network">{{
|
||||
$t('login.proxy_here')
|
||||
}}</router-link>
|
||||
{{ $t('login.proxy_info') }}<router-link to="/preferences/network">{{ $t('login.proxy_here') }}</router-link>
|
||||
</p>
|
||||
<!-- Dummy form to guard submitting with enter -->
|
||||
<el-form-item class="hidden">
|
||||
|
@ -30,13 +22,7 @@
|
|||
<el-button type="primary" class="login" @click="login" v-if="allowLogin">
|
||||
{{ $t('login.login') }}
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
v-else
|
||||
@click="confirm('loginForm')"
|
||||
v-loading="searching"
|
||||
element-loading-background="rgba(0, 0, 0, 0.8)"
|
||||
>
|
||||
<el-button type="primary" v-else @click="confirm('loginForm')" v-loading="searching" element-loading-background="rgba(0, 0, 0, 0.8)">
|
||||
{{ $t('login.search') }}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
|
@ -52,20 +38,18 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
form: {
|
||||
domainName: '',
|
||||
},
|
||||
domainName: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
selectedInstance: (state) => state.Login.selectedInstance,
|
||||
searching: (state) => state.Login.searching,
|
||||
sns: (state) => state.Login.sns,
|
||||
selectedInstance: state => state.Login.selectedInstance,
|
||||
searching: state => state.Login.searching,
|
||||
sns: state => state.Login.sns
|
||||
}),
|
||||
allowLogin: function () {
|
||||
return (
|
||||
this.selectedInstance && this.form.domainName === this.selectedInstance
|
||||
)
|
||||
return this.selectedInstance && this.form.domainName === this.selectedInstance
|
||||
},
|
||||
rules: {
|
||||
get() {
|
||||
|
@ -74,17 +58,17 @@ export default {
|
|||
{
|
||||
type: 'string',
|
||||
required: true,
|
||||
message: this.$t('validation.login.require_domain_name'),
|
||||
message: this.$t('validation.login.require_domain_name')
|
||||
},
|
||||
{
|
||||
pattern: domainFormat,
|
||||
trigger: 'change',
|
||||
message: this.$t('validation.login.domain_format'),
|
||||
},
|
||||
],
|
||||
message: this.$t('validation.login.domain_format')
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
login() {
|
||||
|
@ -92,51 +76,51 @@ export default {
|
|||
lock: true,
|
||||
text: this.$t('message.loading'),
|
||||
spinner: 'el-icon-loading',
|
||||
background: 'rgba(0, 0, 0, 0.7)',
|
||||
background: 'rgba(0, 0, 0, 0.7)'
|
||||
})
|
||||
this.$store
|
||||
.dispatch('Login/fetchLogin')
|
||||
.then((url) => {
|
||||
.then(url => {
|
||||
loading.close()
|
||||
this.$store.dispatch('Login/pageBack')
|
||||
this.$router.push({
|
||||
path: '/authorize',
|
||||
query: { url: url, sns: this.sns },
|
||||
query: { url: url, sns: this.sns }
|
||||
})
|
||||
})
|
||||
.catch(() => {
|
||||
loading.close()
|
||||
this.$message({
|
||||
message: this.$t('message.authorize_url_error'),
|
||||
type: 'error',
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
},
|
||||
confirm(formName) {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
this.$refs[formName].validate(valid => {
|
||||
if (valid) {
|
||||
this.$store
|
||||
.dispatch('Login/confirmInstance', this.form.domainName)
|
||||
.then(() => {
|
||||
this.$message({
|
||||
message: this.$t('message.domain_confirmed', {
|
||||
domain: this.form.domainName,
|
||||
domain: this.form.domainName
|
||||
}),
|
||||
type: 'success',
|
||||
type: 'success'
|
||||
})
|
||||
})
|
||||
.catch(() => {
|
||||
this.$message({
|
||||
message: this.$t('message.domain_doesnt_exist', {
|
||||
domain: this.form.domainName,
|
||||
domain: this.form.domainName
|
||||
}),
|
||||
type: 'error',
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
} else {
|
||||
this.$message({
|
||||
message: this.$t('validation.login.domain_format'),
|
||||
type: 'error',
|
||||
type: 'error'
|
||||
})
|
||||
return false
|
||||
}
|
||||
|
@ -148,8 +132,8 @@ export default {
|
|||
} else {
|
||||
this.login()
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
@ -12,36 +12,24 @@
|
|||
v-loading="accountLoading"
|
||||
:element-loading-background="backgroundColor"
|
||||
>
|
||||
<el-table-column
|
||||
prop="username"
|
||||
:label="$t('preferences.account.username')"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="domain"
|
||||
:label="$t('preferences.account.domain')"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column prop="username" :label="$t('preferences.account.username')"> </el-table-column>
|
||||
<el-table-column prop="domain" :label="$t('preferences.account.domain')"> </el-table-column>
|
||||
<el-table-column :label="$t('preferences.account.association')">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
@click.native.prevent="removeAccount(scope.$index, accounts)"
|
||||
type="text"
|
||||
class="action"
|
||||
>
|
||||
<template #default="scope">
|
||||
<el-button @click.prevent="removeAccount(scope.$index, accounts)" type="text" class="action">
|
||||
<el-icon><el-icon-close /></el-icon>
|
||||
{{ $t('preferences.account.remove_association') }}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="$t('preferences.account.order')" width="60">
|
||||
<template slot-scope="scope">
|
||||
<template #default="scope">
|
||||
<div class="allow-up">
|
||||
<el-button
|
||||
class="arrow-up action"
|
||||
type="text"
|
||||
:icon="ElIconArrowUp"
|
||||
@click.native.prevent="forward(scope.$index, accounts)"
|
||||
@click.prevent="forward(scope.$index, accounts)"
|
||||
></el-button>
|
||||
</div>
|
||||
<div class="allow-down">
|
||||
|
@ -49,7 +37,7 @@
|
|||
class="arrow-down action"
|
||||
type="text"
|
||||
:icon="ElIconArrowDown"
|
||||
@click.native.prevent="backward(scope.$index, accounts)"
|
||||
@click.prevent="backward(scope.$index, accounts)"
|
||||
></el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
@ -60,22 +48,10 @@
|
|||
<el-popover placement="top" width="160" v-model="deletePopoverVisible">
|
||||
<p>{{ $t('preferences.account.confirm_message') }}</p>
|
||||
<div style="text-align: right; margin: 0">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
@click="deletePopoverVisible = false"
|
||||
>{{ $t('preferences.account.cancel') }}</el-button
|
||||
>
|
||||
<el-button
|
||||
type="danger"
|
||||
size="mini"
|
||||
@click="removeAllAssociations"
|
||||
>{{ $t('preferences.account.confirm') }}</el-button
|
||||
>
|
||||
<el-button size="mini" type="text" @click="deletePopoverVisible = false">{{ $t('preferences.account.cancel') }}</el-button>
|
||||
<el-button type="danger" size="mini" @click="removeAllAssociations">{{ $t('preferences.account.confirm') }}</el-button>
|
||||
</div>
|
||||
<el-button slot="reference" type="danger">{{
|
||||
$t('preferences.account.remove_all_associations')
|
||||
}}</el-button>
|
||||
<el-button slot="reference" type="danger">{{ $t('preferences.account.remove_all_associations') }}</el-button>
|
||||
</el-popover>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
@ -83,11 +59,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
Close as ElIconClose,
|
||||
ArrowUp as ElIconArrowUp,
|
||||
ArrowDown as ElIconArrowDown,
|
||||
} from '@element-plus/icons'
|
||||
import { Close as ElIconClose, ArrowUp as ElIconArrowUp, ArrowDown as ElIconArrowDown } from '@element-plus/icons'
|
||||
import { mapState } from 'vuex'
|
||||
|
||||
export default {
|
||||
|
@ -96,21 +68,21 @@ export default {
|
|||
openRemoveDialog: false,
|
||||
deletePopoverVisible: false,
|
||||
ElIconArrowUp,
|
||||
ElIconArrowDown,
|
||||
ElIconArrowDown
|
||||
}
|
||||
},
|
||||
components: {
|
||||
ElIconClose,
|
||||
ElIconClose
|
||||
},
|
||||
name: 'account',
|
||||
computed: {
|
||||
...mapState({
|
||||
accounts: (state) => state.Preferences.Account.accounts,
|
||||
accountLoading: (state) => state.Preferences.Account.accountLoading,
|
||||
accounts: state => state.Preferences.Account.accounts,
|
||||
accountLoading: state => state.Preferences.Account.accountLoading
|
||||
}),
|
||||
...mapState({
|
||||
backgroundColor: (state) => state.App.theme.background_color,
|
||||
}),
|
||||
backgroundColor: state => state.App.theme.background_color
|
||||
})
|
||||
},
|
||||
created() {
|
||||
this.loadAccounts()
|
||||
|
@ -123,7 +95,7 @@ export default {
|
|||
} catch (err) {
|
||||
return this.$message({
|
||||
message: this.$t('message.account_load_error'),
|
||||
type: 'error',
|
||||
type: 'error'
|
||||
})
|
||||
} finally {
|
||||
this.$store.commit('Preferences/Account/updateAccountLoading', false)
|
||||
|
@ -138,21 +110,17 @@ export default {
|
|||
.catch(() => {
|
||||
this.$message({
|
||||
message: this.$t('message.account_remove_error'),
|
||||
type: 'error',
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
},
|
||||
forward(index, accounts) {
|
||||
this.$store
|
||||
.dispatch('Preferences/Account/forwardAccount', accounts[index])
|
||||
.then(() => {
|
||||
this.$store.dispatch('Preferences/Account/forwardAccount', accounts[index]).then(() => {
|
||||
this.loadAccounts()
|
||||
})
|
||||
},
|
||||
backward(index, accounts) {
|
||||
this.$store
|
||||
.dispatch('Preferences/Account/backwardAccount', accounts[index])
|
||||
.then(() => {
|
||||
this.$store.dispatch('Preferences/Account/backwardAccount', accounts[index]).then(() => {
|
||||
this.loadAccounts()
|
||||
})
|
||||
},
|
||||
|
@ -161,8 +129,8 @@ export default {
|
|||
this.$store.dispatch('Preferences/Account/removeAllAccounts').then(() => {
|
||||
this.$router.push('/login')
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
@ -8,7 +8,6 @@
|
|||
</router-link>
|
||||
</el-button>
|
||||
</div>
|
||||
<template>
|
||||
<el-table
|
||||
:data="filters"
|
||||
tooltip-effect="dark"
|
||||
|
@ -17,41 +16,30 @@
|
|||
v-loading="filtersLoading"
|
||||
:element-loading-background="backgroundColor"
|
||||
>
|
||||
<el-table-column prop="phrase" label="Keyword" width="180">
|
||||
</el-table-column>
|
||||
<el-table-column prop="phrase" label="Keyword" width="180"> </el-table-column>
|
||||
<el-table-column label="Context">
|
||||
<template slot-scope="scope">
|
||||
<template #default="scope">
|
||||
<span>{{ filters[scope.$index].context.join(',') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="expires_at" label="Expires" width="180">
|
||||
</el-table-column>
|
||||
<el-table-column prop="expires_at" label="Expires" width="180"> </el-table-column>
|
||||
<el-table-column width="80">
|
||||
<template slot-scope="scope">
|
||||
<template #default="scope">
|
||||
<el-button type="text">
|
||||
<router-link
|
||||
tag="span"
|
||||
:to="`/${id()}/settings/filters/${
|
||||
filters[scope.$index].id
|
||||
}/edit`"
|
||||
>
|
||||
<router-link tag="span" :to="`/${id()}/settings/filters/${filters[scope.$index].id}/edit`">
|
||||
{{ $t('settings.filters.edit.title') }}
|
||||
</router-link>
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column width="80">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
type="text"
|
||||
@click="deleteFilter(filters[scope.$index].id)"
|
||||
>
|
||||
<template #default="scope">
|
||||
<el-button type="text" @click="deleteFilter(filters[scope.$index].id)">
|
||||
{{ $t('settings.filters.delete.title') }}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
@ -62,15 +50,15 @@ export default {
|
|||
name: 'Filters',
|
||||
computed: {
|
||||
...mapState('Settings/Filters', {
|
||||
filters: (state) => state.filters,
|
||||
filtersLoading: (state) => state.filtersLoading,
|
||||
filters: state => state.filters,
|
||||
filtersLoading: state => state.filtersLoading
|
||||
}),
|
||||
...mapState({
|
||||
backgroundColor: (state) => state.App.theme.background_color,
|
||||
backgroundColor: state => state.App.theme.background_color
|
||||
}),
|
||||
...mapState('TimelineSpace', {
|
||||
sns: (state) => state.sns,
|
||||
}),
|
||||
sns: state => state.sns
|
||||
})
|
||||
},
|
||||
async created() {
|
||||
await this.$store.dispatch('Settings/Filters/fetchFilters')
|
||||
|
@ -83,12 +71,12 @@ export default {
|
|||
this.$confirm(this.$t('settings.filters.delete.confirm'), 'Warning', {
|
||||
confirmButtonText: this.$t('settings.filters.delete.confirm_ok'),
|
||||
cancelButtonText: this.$t('settings.filters.delete.confirm_cancel'),
|
||||
type: 'warning',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
return this.$store.dispatch('Settings/Filters/deleteFilter', id)
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
@ -1,56 +1,31 @@
|
|||
<template>
|
||||
<el-form
|
||||
ref="form"
|
||||
class="section"
|
||||
label-width="200px"
|
||||
label-position="right"
|
||||
size="medium"
|
||||
>
|
||||
<el-form ref="form" class="section" label-width="200px" label-position="right" size="medium">
|
||||
<el-form-item :label="$t('settings.filters.form.phrase')">
|
||||
<el-input v-model="filterPhrase"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('settings.filters.form.expire')">
|
||||
<el-select v-model="filterExpire" value-key="value">
|
||||
<el-option
|
||||
v-for="exp in expires"
|
||||
:key="exp.value"
|
||||
:label="exp.label"
|
||||
:value="exp"
|
||||
>
|
||||
</el-option>
|
||||
<el-option v-for="exp in expires" :key="exp.value" :label="exp.label" :value="exp"> </el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('settings.filters.form.context')">
|
||||
<template>
|
||||
<el-checkbox-group v-model="filterContext">
|
||||
<el-checkbox label="home"></el-checkbox>
|
||||
<el-checkbox label="notifications"></el-checkbox>
|
||||
<el-checkbox label="public"></el-checkbox>
|
||||
<el-checkbox label="thread"></el-checkbox>
|
||||
<el-checkbox
|
||||
label="account"
|
||||
:disabled="accountDisabled()"
|
||||
></el-checkbox>
|
||||
<el-checkbox label="account" :disabled="accountDisabled()"></el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</template>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="filterIrreversible">{{
|
||||
$t('settings.filters.form.irreversible')
|
||||
}}</el-checkbox>
|
||||
<el-checkbox v-model="filterIrreversible">{{ $t('settings.filters.form.irreversible') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="filterWholeWord">{{
|
||||
$t('settings.filters.form.whole_word')
|
||||
}}</el-checkbox>
|
||||
<el-checkbox v-model="filterWholeWord">{{ $t('settings.filters.form.whole_word') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit" v-loading="loading">{{
|
||||
$t('settings.filters.form.submit')
|
||||
}}</el-button>
|
||||
<el-button @click="cancel">{{
|
||||
$t('settings.filters.form.cancel')
|
||||
}}</el-button>
|
||||
<el-button type="primary" @click="onSubmit" v-loading="loading">{{ $t('settings.filters.form.submit') }}</el-button>
|
||||
<el-button @click="cancel">{{ $t('settings.filters.form.cancel') }}</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
|
@ -61,48 +36,48 @@ export default {
|
|||
props: {
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
default: false
|
||||
},
|
||||
value: {
|
||||
type: Object,
|
||||
type: Object
|
||||
},
|
||||
sns: {
|
||||
type: String,
|
||||
default: 'mastodon',
|
||||
},
|
||||
default: 'mastodon'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
expires: [
|
||||
{
|
||||
label: this.$t('settings.filters.expires.never'),
|
||||
value: null,
|
||||
value: null
|
||||
},
|
||||
{
|
||||
label: this.$t('settings.filters.expires.30_minutes'),
|
||||
value: 60 * 30,
|
||||
value: 60 * 30
|
||||
},
|
||||
{
|
||||
label: this.$t('settings.filters.expires.1_hour'),
|
||||
value: 3600,
|
||||
value: 3600
|
||||
},
|
||||
{
|
||||
label: this.$t('settings.filters.expires.6_hours'),
|
||||
value: 3600 * 6,
|
||||
value: 3600 * 6
|
||||
},
|
||||
{
|
||||
label: this.$t('settings.filters.expires.12_hours'),
|
||||
value: 3600 * 12,
|
||||
value: 3600 * 12
|
||||
},
|
||||
{
|
||||
label: this.$t('settings.filters.expires.1_day'),
|
||||
value: 3600 * 24,
|
||||
value: 3600 * 24
|
||||
},
|
||||
{
|
||||
label: this.$t('settings.filters.expires.1_week'),
|
||||
value: 3600 * 24 * 7,
|
||||
},
|
||||
],
|
||||
value: 3600 * 24 * 7
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
@ -112,7 +87,7 @@ export default {
|
|||
},
|
||||
set(value) {
|
||||
this.$emit('input', value)
|
||||
},
|
||||
}
|
||||
},
|
||||
filterPhrase: {
|
||||
get() {
|
||||
|
@ -120,9 +95,9 @@ export default {
|
|||
},
|
||||
set(value) {
|
||||
this.filter = Object.assign({}, this.filter, {
|
||||
phrase: value,
|
||||
phrase: value
|
||||
})
|
||||
},
|
||||
}
|
||||
},
|
||||
filterExpire: {
|
||||
get() {
|
||||
|
@ -130,9 +105,9 @@ export default {
|
|||
},
|
||||
set(value) {
|
||||
this.filter = Object.assign({}, this.filter, {
|
||||
expires_at: value,
|
||||
expires_at: value
|
||||
})
|
||||
},
|
||||
}
|
||||
},
|
||||
filterContext: {
|
||||
get() {
|
||||
|
@ -140,9 +115,9 @@ export default {
|
|||
},
|
||||
set(value) {
|
||||
this.filter = Object.assign({}, this.filter, {
|
||||
context: value,
|
||||
context: value
|
||||
})
|
||||
},
|
||||
}
|
||||
},
|
||||
filterIrreversible: {
|
||||
get() {
|
||||
|
@ -150,9 +125,9 @@ export default {
|
|||
},
|
||||
set(value) {
|
||||
this.filter = Object.assign({}, this.filter, {
|
||||
irreversible: value,
|
||||
irreversible: value
|
||||
})
|
||||
},
|
||||
}
|
||||
},
|
||||
filterWholeWord: {
|
||||
get() {
|
||||
|
@ -160,10 +135,10 @@ export default {
|
|||
},
|
||||
set(value) {
|
||||
this.filter = Object.assign({}, this.filter, {
|
||||
whole_word: value,
|
||||
whole_word: value
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
cancel() {
|
||||
|
@ -174,8 +149,8 @@ export default {
|
|||
},
|
||||
accountDisabled() {
|
||||
return this.sns === 'pleroma'
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
@ -1,9 +1,8 @@
|
|||
<template>
|
||||
<div id="timeline">
|
||||
<template v-for="message in pinnedToots">
|
||||
<template v-for="message in pinnedToots" :key="message.id">
|
||||
<toot
|
||||
:message="message"
|
||||
:key="message.id"
|
||||
:focused="message.uri + message.id === focusedId"
|
||||
:pinned="true"
|
||||
:overlaid="modalOpened"
|
||||
|
@ -17,21 +16,9 @@
|
|||
>
|
||||
</toot>
|
||||
</template>
|
||||
<DynamicScroller
|
||||
:items="timeline"
|
||||
:min-item-size="60"
|
||||
class="scroller"
|
||||
:buffer="buffer"
|
||||
page-mode
|
||||
>
|
||||
<DynamicScroller :items="timeline" :min-item-size="60" class="scroller" :buffer="buffer" page-mode>
|
||||
<template v-slot="{ item, index, active }">
|
||||
<DynamicScrollerItem
|
||||
:item="item"
|
||||
:active="active"
|
||||
:size-dependencies="[item.uri]"
|
||||
:data-index="index"
|
||||
:watchData="true"
|
||||
>
|
||||
<DynamicScrollerItem :item="item" :active="active" :size-dependencies="[item.uri]" :data-index="index" :watchData="true">
|
||||
<toot
|
||||
:message="item"
|
||||
:key="item.id"
|
||||
|
@ -49,11 +36,7 @@
|
|||
</DynamicScrollerItem>
|
||||
</template>
|
||||
</DynamicScroller>
|
||||
<div
|
||||
class="loading-card"
|
||||
v-loading="lazyLoading"
|
||||
:element-loading-background="backgroundColor"
|
||||
></div>
|
||||
<div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
@ -68,33 +51,26 @@ export default {
|
|||
components: { Toot },
|
||||
data() {
|
||||
return {
|
||||
focusedId: null,
|
||||
focusedId: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(
|
||||
'TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Posts',
|
||||
{
|
||||
timeline: (state) => state.timeline,
|
||||
pinnedToots: (state) => state.pinnedToots,
|
||||
lazyLoading: (state) => state.lazyLoading,
|
||||
}
|
||||
),
|
||||
...mapState('App', {
|
||||
backgroundColor: (state) => state.theme.background_color,
|
||||
...mapState('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Posts', {
|
||||
timeline: state => state.timeline,
|
||||
pinnedToots: state => state.pinnedToots,
|
||||
lazyLoading: state => state.lazyLoading
|
||||
}),
|
||||
...mapGetters('TimelineSpace/Modals', ['modalOpened']),
|
||||
...mapState('App', {
|
||||
backgroundColor: state => state.theme.background_color
|
||||
}),
|
||||
...mapGetters('TimelineSpace/Modals', ['modalOpened'])
|
||||
},
|
||||
created() {
|
||||
this.load()
|
||||
},
|
||||
mounted() {
|
||||
this.$store.dispatch(
|
||||
'TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Posts/clearTimeline'
|
||||
)
|
||||
document
|
||||
.getElementById('sidebar_scrollable')
|
||||
.addEventListener('scroll', this.onScroll)
|
||||
this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Posts/clearTimeline')
|
||||
document.getElementById('sidebar_scrollable').addEventListener('scroll', this.onScroll)
|
||||
Event.$on('focus-sidebar', () => {
|
||||
this.focusedId = 0
|
||||
this.$nextTick(function () {
|
||||
|
@ -107,99 +83,66 @@ export default {
|
|||
Event.$off('focus-sidebar')
|
||||
},
|
||||
destroyed() {
|
||||
if (
|
||||
document.getElementById('sidebar_scrollable') !== undefined &&
|
||||
document.getElementById('sidebar_scrollable') !== null
|
||||
) {
|
||||
document
|
||||
.getElementById('sidebar_scrollable')
|
||||
.removeEventListener('scroll', this.onScroll)
|
||||
if (document.getElementById('sidebar_scrollable') !== undefined && document.getElementById('sidebar_scrollable') !== null) {
|
||||
document.getElementById('sidebar_scrollable').removeEventListener('scroll', this.onScroll)
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
account: function (_newAccount, _oldAccount) {
|
||||
this.$store.dispatch(
|
||||
'TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Posts/clearTimeline'
|
||||
)
|
||||
this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Posts/clearTimeline')
|
||||
this.load()
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
load() {
|
||||
this.$store
|
||||
.dispatch(
|
||||
'TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Posts/fetchTimeline',
|
||||
this.account
|
||||
)
|
||||
.catch(() => {
|
||||
this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Posts/fetchTimeline', this.account).catch(() => {
|
||||
this.$message({
|
||||
message: this.$t('message.timeline_fetch_error'),
|
||||
type: 'error',
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
},
|
||||
onScroll(event) {
|
||||
// for lazyLoading
|
||||
if (
|
||||
event.target.clientHeight + event.target.scrollTop >=
|
||||
document.getElementById('account_profile').clientHeight - 10 &&
|
||||
event.target.clientHeight + event.target.scrollTop >= document.getElementById('account_profile').clientHeight - 10 &&
|
||||
!this.lazyloading
|
||||
) {
|
||||
this.$store
|
||||
.dispatch(
|
||||
'TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Posts/lazyFetchTimeline',
|
||||
{
|
||||
.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Posts/lazyFetchTimeline', {
|
||||
account: this.account,
|
||||
status: this.timeline[this.timeline.length - 1],
|
||||
}
|
||||
)
|
||||
.catch((err) => {
|
||||
status: this.timeline[this.timeline.length - 1]
|
||||
})
|
||||
.catch(err => {
|
||||
console.error(err)
|
||||
this.$message({
|
||||
message: this.$t('message.timeline_fetch_error'),
|
||||
type: 'error',
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
updatePinnedToot(message) {
|
||||
this.$store.commit(
|
||||
'TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Posts/updatePinnedToot',
|
||||
message
|
||||
)
|
||||
this.$store.commit('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Posts/updatePinnedToot', message)
|
||||
},
|
||||
updateToot(message) {
|
||||
this.$store.commit(
|
||||
'TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Posts/updateToot',
|
||||
message
|
||||
)
|
||||
this.$store.commit('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Posts/updateToot', message)
|
||||
},
|
||||
deleteToot(message) {
|
||||
this.$store.commit(
|
||||
'TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Posts/deleteToot',
|
||||
message
|
||||
)
|
||||
this.$store.commit('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Posts/deleteToot', message)
|
||||
},
|
||||
focusNext() {
|
||||
const currentIndex = this.timeline.findIndex(
|
||||
(toot) => this.focusedId === toot.uri + toot.id
|
||||
)
|
||||
const currentIndex = this.timeline.findIndex(toot => this.focusedId === toot.uri + toot.id)
|
||||
if (currentIndex === -1) {
|
||||
this.focusedId = this.timeline[0].uri + this.timeline[0].id
|
||||
} else if (currentIndex < this.timeline.length - 1) {
|
||||
this.focusedId =
|
||||
this.timeline[currentIndex + 1].uri +
|
||||
this.timeline[currentIndex + 1].id
|
||||
this.focusedId = this.timeline[currentIndex + 1].uri + this.timeline[currentIndex + 1].id
|
||||
}
|
||||
},
|
||||
focusPrev() {
|
||||
const currentIndex = this.timeline.findIndex(
|
||||
(toot) => this.focusedId === toot.uri + toot.id
|
||||
)
|
||||
const currentIndex = this.timeline.findIndex(toot => this.focusedId === toot.uri + toot.id)
|
||||
if (currentIndex > 0) {
|
||||
this.focusedId =
|
||||
this.timeline[currentIndex - 1].uri +
|
||||
this.timeline[currentIndex - 1].id
|
||||
this.focusedId = this.timeline[currentIndex - 1].uri + this.timeline[currentIndex - 1].id
|
||||
}
|
||||
},
|
||||
focusToot(message) {
|
||||
|
@ -208,8 +151,8 @@ export default {
|
|||
focusTimeline() {
|
||||
this.focusedId = 0
|
||||
Event.$emit('focus-timeline')
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
@ -1,20 +1,8 @@
|
|||
<template>
|
||||
<el-dialog
|
||||
:title="$t('modals.add_list_member.title')"
|
||||
:visible.sync="addListMemberModal"
|
||||
width="400px"
|
||||
class="add-member"
|
||||
>
|
||||
<el-dialog :title="$t('modals.add_list_member.title')" v-model="addListMemberModal" width="400px" class="add-member">
|
||||
<div class="search-account" :element-loading-background="loadingBackground">
|
||||
<el-form :inline="true">
|
||||
<input
|
||||
v-model="name"
|
||||
placeholder="Account name"
|
||||
class="account-name"
|
||||
v-shortkey="['enter']"
|
||||
@shortkey="search"
|
||||
autofocus
|
||||
/>
|
||||
<input v-model="name" placeholder="Account name" class="account-name" v-shortkey="['enter']" @shortkey="search" autofocus />
|
||||
<el-button type="text" class="search" @click="search">
|
||||
<font-awesome-icon icon="magnifying-glass" />
|
||||
</el-button>
|
||||
|
@ -50,26 +38,23 @@ export default {
|
|||
name: 'add-list-member',
|
||||
data() {
|
||||
return {
|
||||
name: '',
|
||||
name: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
loadingBackground: (state) => state.App.theme.wrapper_mask_color,
|
||||
accounts: (state) => state.TimelineSpace.Modals.AddListMember.accounts,
|
||||
listId: (state) => state.TimelineSpace.Modals.AddListMember.targetListId,
|
||||
loadingBackground: state => state.App.theme.wrapper_mask_color,
|
||||
accounts: state => state.TimelineSpace.Modals.AddListMember.accounts,
|
||||
listId: state => state.TimelineSpace.Modals.AddListMember.targetListId
|
||||
}),
|
||||
addListMemberModal: {
|
||||
get() {
|
||||
return this.$store.state.TimelineSpace.Modals.AddListMember.modalOpen
|
||||
},
|
||||
set(value) {
|
||||
this.$store.dispatch(
|
||||
'TimelineSpace/Modals/AddListMember/changeModal',
|
||||
value
|
||||
)
|
||||
},
|
||||
},
|
||||
this.$store.dispatch('TimelineSpace/Modals/AddListMember/changeModal', value)
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
username(account) {
|
||||
|
@ -80,29 +65,23 @@ export default {
|
|||
}
|
||||
},
|
||||
search() {
|
||||
this.$store.dispatch(
|
||||
'TimelineSpace/Modals/AddListMember/search',
|
||||
this.name
|
||||
)
|
||||
this.$store.dispatch('TimelineSpace/Modals/AddListMember/search', this.name)
|
||||
},
|
||||
add(user) {
|
||||
this.$store
|
||||
.dispatch('TimelineSpace/Modals/AddListMember/add', user)
|
||||
.then(() => {
|
||||
this.addListMemberModal = false
|
||||
this.$store.dispatch(
|
||||
'TimelineSpace/Contents/Lists/Edit/fetchMembers',
|
||||
this.listId
|
||||
)
|
||||
this.$store.dispatch('TimelineSpace/Contents/Lists/Edit/fetchMembers', this.listId)
|
||||
})
|
||||
.catch(() => {
|
||||
this.$message({
|
||||
message: this.$t('message.add_user_error'),
|
||||
type: 'error',
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
@ -1,42 +1,18 @@
|
|||
<template>
|
||||
<transition name="image-viewer">
|
||||
<div
|
||||
id="image"
|
||||
v-show="modalOpen"
|
||||
@click="close"
|
||||
:aria-hidden="!modalOpen"
|
||||
aria-modal="true"
|
||||
role="dialog"
|
||||
>
|
||||
<div
|
||||
class="image-wrapper"
|
||||
v-shortkey="modalOpen ? { close: ['esc'] } : {}"
|
||||
@shortkey="closeHandle"
|
||||
>
|
||||
<div id="image" v-show="modalOpen" @click="close" :aria-hidden="!modalOpen" aria-modal="true" role="dialog">
|
||||
<div class="image-wrapper" v-shortkey="modalOpen ? { close: ['esc'] } : {}" @shortkey="closeHandle">
|
||||
<div class="image-header">
|
||||
<el-button
|
||||
type="text"
|
||||
:icon="ElIconClose"
|
||||
@click="close"
|
||||
class="close-button"
|
||||
></el-button>
|
||||
<el-button type="text" :icon="ElIconClose" @click="close" class="close-button"></el-button>
|
||||
</div>
|
||||
<div class="image-content" role="presentation">
|
||||
<span class="button-area"
|
||||
><el-button
|
||||
type="text"
|
||||
v-show="showLeft"
|
||||
v-shortkey="['arrowleft']"
|
||||
@shortkey.native="decrementIndex()"
|
||||
><el-button type="text" v-show="showLeft" v-shortkey="['arrowleft']" @shortkey="decrementIndex()"
|
||||
><el-icon><el-icon-arrow-left /></el-icon></el-button
|
||||
></span>
|
||||
<Media :src="imageURL" :type="imageType"></Media>
|
||||
<span class="button-area"
|
||||
><el-button
|
||||
type="text"
|
||||
v-show="showRight"
|
||||
v-shortkey="['arrowright']"
|
||||
@shortkey.native="incrementIndex()"
|
||||
><el-button type="text" v-show="showRight" v-shortkey="['arrowright']" @shortkey="incrementIndex()"
|
||||
><el-icon><el-icon-arrow-right /></el-icon></el-button
|
||||
></span>
|
||||
</div>
|
||||
|
@ -46,29 +22,25 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
ArrowLeft as ElIconArrowLeft,
|
||||
ArrowRight as ElIconArrowRight,
|
||||
Close as ElIconClose,
|
||||
} from '@element-plus/icons'
|
||||
import { ArrowLeft as ElIconArrowLeft, ArrowRight as ElIconArrowRight, Close as ElIconClose } from '@element-plus/icons'
|
||||
import Media from './Media'
|
||||
import { mapState } from 'vuex'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
ElIconClose,
|
||||
ElIconClose
|
||||
}
|
||||
},
|
||||
components: {
|
||||
Media,
|
||||
ElIconArrowLeft,
|
||||
ElIconArrowRight,
|
||||
ElIconArrowRight
|
||||
},
|
||||
name: 'image-viewer',
|
||||
computed: {
|
||||
...mapState({
|
||||
modalOpen: (state) => state.TimelineSpace.Modals.ImageViewer.modalOpen,
|
||||
modalOpen: state => state.TimelineSpace.Modals.ImageViewer.modalOpen
|
||||
}),
|
||||
imageURL() {
|
||||
return this.$store.getters['TimelineSpace/Modals/ImageViewer/imageURL']
|
||||
|
@ -81,19 +53,17 @@ export default {
|
|||
},
|
||||
showRight() {
|
||||
return this.$store.getters['TimelineSpace/Modals/ImageViewer/showRight']
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
close() {
|
||||
this.$store.dispatch('TimelineSpace/Modals/ImageViewer/closeModal')
|
||||
},
|
||||
decrementIndex() {
|
||||
if (this.showLeft)
|
||||
this.$store.dispatch('TimelineSpace/Modals/ImageViewer/decrementIndex')
|
||||
if (this.showLeft) this.$store.dispatch('TimelineSpace/Modals/ImageViewer/decrementIndex')
|
||||
},
|
||||
incrementIndex() {
|
||||
if (this.showRight)
|
||||
this.$store.dispatch('TimelineSpace/Modals/ImageViewer/incrementIndex')
|
||||
if (this.showRight) this.$store.dispatch('TimelineSpace/Modals/ImageViewer/incrementIndex')
|
||||
},
|
||||
closeHandle(event) {
|
||||
switch (event.srcKey) {
|
||||
|
@ -101,8 +71,8 @@ export default {
|
|||
this.close()
|
||||
break
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<el-dialog :visible.sync="jumpModal" width="440px" class="jump-modal">
|
||||
<el-dialog v-model="jumpModal" width="440px" class="jump-modal">
|
||||
<el-form class="jump-form" v-on:submit.prevent="jump">
|
||||
<div class="channel">
|
||||
<input
|
||||
|
@ -7,21 +7,13 @@
|
|||
v-model="channel"
|
||||
:placeholder="$t('modals.jump.jump_to')"
|
||||
ref="channel"
|
||||
v-shortkey="
|
||||
shortcutEnabled
|
||||
? { next: ['arrowdown'], prev: ['arrowup'], select: ['enter'] }
|
||||
: {}
|
||||
"
|
||||
v-shortkey="shortcutEnabled ? { next: ['arrowdown'], prev: ['arrowup'], select: ['enter'] } : {}"
|
||||
@shortkey="handleKey"
|
||||
/>
|
||||
<ul class="channel-list">
|
||||
<li
|
||||
v-for="c in filterdChannel"
|
||||
:class="
|
||||
c.name === selectedChannel.name
|
||||
? 'channel-list-item selected'
|
||||
: 'channel-list-item'
|
||||
"
|
||||
:class="c.name === selectedChannel.name ? 'channel-list-item selected' : 'channel-list-item'"
|
||||
@click="jump(c)"
|
||||
@mouseover="changeSelected(c)"
|
||||
>
|
||||
|
@ -44,11 +36,8 @@ export default {
|
|||
name: 'jump',
|
||||
computed: {
|
||||
...mapState('TimelineSpace/Modals/Jump', {
|
||||
channelList: (state) =>
|
||||
state.defaultChannelList
|
||||
.concat(state.tagChannelList)
|
||||
.concat(state.listChannelList),
|
||||
selectedChannel: (state) => state.selectedChannel,
|
||||
channelList: state => state.defaultChannelList.concat(state.tagChannelList).concat(state.listChannelList),
|
||||
selectedChannel: state => state.selectedChannel
|
||||
}),
|
||||
channel: {
|
||||
get() {
|
||||
|
@ -56,7 +45,7 @@ export default {
|
|||
},
|
||||
set(value) {
|
||||
this.$store.commit('TimelineSpace/Modals/Jump/updateChannel', value)
|
||||
},
|
||||
}
|
||||
},
|
||||
filterdChannel() {
|
||||
return this.filterChannelForm()
|
||||
|
@ -67,18 +56,15 @@ export default {
|
|||
},
|
||||
set(value) {
|
||||
this.$store.commit('TimelineSpace/Modals/Jump/changeModal', value)
|
||||
},
|
||||
}
|
||||
},
|
||||
shortcutEnabled: function () {
|
||||
return this.jumpModal
|
||||
},
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
channel: function (_newChannel, _oldChannel) {
|
||||
this.$store.commit(
|
||||
'TimelineSpace/Modals/Jump/changeSelected',
|
||||
this.filterChannelForm()[0]
|
||||
)
|
||||
this.$store.commit('TimelineSpace/Modals/Jump/changeSelected', this.filterChannelForm()[0])
|
||||
},
|
||||
jumpModal: function (newModal, oldModal) {
|
||||
if (!oldModal && newModal) {
|
||||
|
@ -90,36 +76,30 @@ export default {
|
|||
} else {
|
||||
this.channel = ''
|
||||
}
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
filterChannelForm() {
|
||||
return this.channelList.filter((c) => {
|
||||
return this.channelList.filter(c => {
|
||||
return c.name.toLowerCase().indexOf(this.channel.toLowerCase()) !== -1
|
||||
})
|
||||
},
|
||||
nextChannel() {
|
||||
const filterd = this.filterChannelForm()
|
||||
const i = filterd.findIndex((e) => {
|
||||
const i = filterd.findIndex(e => {
|
||||
return e.name === this.selectedChannel.name
|
||||
})
|
||||
if (i !== undefined && i < filterd.length - 1) {
|
||||
this.$store.commit(
|
||||
'TimelineSpace/Modals/Jump/changeSelected',
|
||||
filterd[i + 1]
|
||||
)
|
||||
this.$store.commit('TimelineSpace/Modals/Jump/changeSelected', filterd[i + 1])
|
||||
}
|
||||
},
|
||||
prevChannel() {
|
||||
const filterd = this.filterChannelForm()
|
||||
const i = filterd.findIndex((e) => {
|
||||
const i = filterd.findIndex(e => {
|
||||
return e.name === this.selectedChannel.name
|
||||
})
|
||||
if (i !== undefined && i > 0) {
|
||||
this.$store.commit(
|
||||
'TimelineSpace/Modals/Jump/changeSelected',
|
||||
filterd[i - 1]
|
||||
)
|
||||
this.$store.commit('TimelineSpace/Modals/Jump/changeSelected', filterd[i - 1])
|
||||
}
|
||||
},
|
||||
changeSelected(channel) {
|
||||
|
@ -147,8 +127,8 @@ export default {
|
|||
default:
|
||||
return true
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
@ -1,10 +1,5 @@
|
|||
<template>
|
||||
<el-dialog
|
||||
:title="$t('modals.list_membership.title')"
|
||||
:visible.sync="listMembershipModal"
|
||||
width="400px"
|
||||
class="list-membership-modal"
|
||||
>
|
||||
<el-dialog :title="$t('modals.list_membership.title')" v-model="listMembershipModal" width="400px" class="list-membership-modal">
|
||||
<el-checkbox-group v-model="belongToLists" v-loading="loading">
|
||||
<table class="lists">
|
||||
<tbody>
|
||||
|
@ -26,76 +21,63 @@ export default {
|
|||
name: 'list-membership',
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
account: (state) => state.TimelineSpace.Modals.ListMembership.account,
|
||||
lists: (state) => state.TimelineSpace.Modals.ListMembership.lists,
|
||||
account: state => state.TimelineSpace.Modals.ListMembership.account,
|
||||
lists: state => state.TimelineSpace.Modals.ListMembership.lists
|
||||
}),
|
||||
listMembershipModal: {
|
||||
get() {
|
||||
return this.$store.state.TimelineSpace.Modals.ListMembership.modalOpen
|
||||
},
|
||||
set(value) {
|
||||
this.$store.dispatch(
|
||||
'TimelineSpace/Modals/ListMembership/changeModal',
|
||||
value
|
||||
)
|
||||
},
|
||||
this.$store.dispatch('TimelineSpace/Modals/ListMembership/changeModal', value)
|
||||
}
|
||||
},
|
||||
belongToLists: {
|
||||
get() {
|
||||
return this.$store.state.TimelineSpace.Modals.ListMembership.belongToLists.map(
|
||||
(l) => l.id
|
||||
)
|
||||
return this.$store.state.TimelineSpace.Modals.ListMembership.belongToLists.map(l => l.id)
|
||||
},
|
||||
set(value) {
|
||||
this.loading = true
|
||||
return this.$store
|
||||
.dispatch(
|
||||
'TimelineSpace/Modals/ListMembership/changeBelongToLists',
|
||||
value
|
||||
)
|
||||
.dispatch('TimelineSpace/Modals/ListMembership/changeBelongToLists', value)
|
||||
.catch(() => {
|
||||
this.$message({
|
||||
message: this.$t('message.update_list_memberships_error'),
|
||||
type: 'error',
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
.finally(() => (this.loading = false))
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
listMembershipModal: function (newState, oldState) {
|
||||
if (!oldState && newState) {
|
||||
this.init()
|
||||
}
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async init() {
|
||||
this.loading = true
|
||||
try {
|
||||
await this.$store.dispatch(
|
||||
'TimelineSpace/Modals/ListMembership/fetchListMembership',
|
||||
this.account
|
||||
)
|
||||
await this.$store.dispatch(
|
||||
'TimelineSpace/Modals/ListMembership/fetchLists'
|
||||
)
|
||||
await this.$store.dispatch('TimelineSpace/Modals/ListMembership/fetchListMembership', this.account)
|
||||
await this.$store.dispatch('TimelineSpace/Modals/ListMembership/fetchLists')
|
||||
} catch (err) {
|
||||
this.$message({
|
||||
message: this.$t('message.lists_fetch_error'),
|
||||
type: 'error',
|
||||
type: 'error'
|
||||
})
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
@ -1,22 +1,13 @@
|
|||
<template>
|
||||
<el-dialog
|
||||
:title="$t('modals.mute_confirm.title')"
|
||||
:visible.sync="muteConfirmModal"
|
||||
width="400px"
|
||||
custom-class="mute-confirm"
|
||||
>
|
||||
<el-dialog :title="$t('modals.mute_confirm.title')" v-model="muteConfirmModal" width="400px" custom-class="mute-confirm">
|
||||
<el-form class="description">
|
||||
<el-form-item for="notify" :label="$t('modals.mute_confirm.body')">
|
||||
<el-switch id="notify" v-model="notify"></el-switch>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="closeModal">{{
|
||||
$t('modals.mute_confirm.cancel')
|
||||
}}</el-button>
|
||||
<el-button type="primary" @click="submit">{{
|
||||
$t('modals.mute_confirm.ok')
|
||||
}}</el-button>
|
||||
<el-button @click="closeModal">{{ $t('modals.mute_confirm.cancel') }}</el-button>
|
||||
<el-button type="primary" @click="submit">{{ $t('modals.mute_confirm.ok') }}</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
@ -28,24 +19,21 @@ export default {
|
|||
name: 'MuteConfirm',
|
||||
data() {
|
||||
return {
|
||||
notify: true,
|
||||
notify: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState('TimelineSpace/Modals/MuteConfirm', {
|
||||
account: (state) => state.account,
|
||||
account: state => state.account
|
||||
}),
|
||||
muteConfirmModal: {
|
||||
get() {
|
||||
return this.$store.state.TimelineSpace.Modals.MuteConfirm.modalOpen
|
||||
},
|
||||
set(value) {
|
||||
this.$store.dispatch(
|
||||
'TimelineSpace/Modals/MuteConfirm/changeModal',
|
||||
value
|
||||
)
|
||||
},
|
||||
},
|
||||
this.$store.dispatch('TimelineSpace/Modals/MuteConfirm/changeModal', value)
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
closeModal() {
|
||||
|
@ -53,12 +41,9 @@ export default {
|
|||
},
|
||||
async submit() {
|
||||
this.closeModal()
|
||||
await this.$store.dispatch(
|
||||
'TimelineSpace/Modals/MuteConfirm/submit',
|
||||
this.notify
|
||||
)
|
||||
},
|
||||
},
|
||||
await this.$store.dispatch('TimelineSpace/Modals/MuteConfirm/submit', this.notify)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<el-dialog
|
||||
:title="$t('modals.new_toot.title')"
|
||||
:visible.sync="newTootModal"
|
||||
v-model="newTootModal"
|
||||
v-if="newTootModal"
|
||||
:before-close="closeConfirm"
|
||||
width="600px"
|
||||
|
@ -9,21 +9,10 @@
|
|||
ref="dialog"
|
||||
>
|
||||
<el-form v-on:submit.prevent="toot" role="form">
|
||||
<Quote
|
||||
:message="quoteToMessage"
|
||||
:displayNameStyle="displayNameStyle"
|
||||
v-if="quoteToMessage !== null"
|
||||
ref="quote"
|
||||
></Quote>
|
||||
<Quote :message="quoteToMessage" :displayNameStyle="displayNameStyle" v-if="quoteToMessage !== null" ref="quote"></Quote>
|
||||
<div class="spoiler" v-if="showContentWarning" ref="spoiler">
|
||||
<div class="el-input">
|
||||
<input
|
||||
type="text"
|
||||
class="el-input__inner"
|
||||
:placeholder="$t('modals.new_toot.cw')"
|
||||
v-model="spoiler"
|
||||
v-shortkey.avoid
|
||||
/>
|
||||
<input type="text" class="el-input__inner" :placeholder="$t('modals.new_toot.cw')" v-model="spoiler" v-shortkey.avoid />
|
||||
</div>
|
||||
</div>
|
||||
<Status
|
||||
|
@ -47,18 +36,9 @@
|
|||
ref="poll"
|
||||
></Poll>
|
||||
<div class="preview" ref="preview">
|
||||
<div
|
||||
class="image-wrapper"
|
||||
v-for="media in attachedMedias"
|
||||
v-bind:key="media.id"
|
||||
>
|
||||
<div class="image-wrapper" v-for="media in attachedMedias" v-bind:key="media.id">
|
||||
<img :src="media.preview_url" class="preview-image" />
|
||||
<el-button
|
||||
type="text"
|
||||
@click="removeAttachment(media)"
|
||||
class="remove-image"
|
||||
><font-awesome-icon icon="circle-xmark"
|
||||
/></el-button>
|
||||
<el-button type="text" @click="removeAttachment(media)" class="remove-image"><font-awesome-icon icon="circle-xmark" /></el-button>
|
||||
<textarea
|
||||
maxlength="420"
|
||||
class="image-description"
|
||||
|
@ -75,40 +55,19 @@
|
|||
</div>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<div class="upload-image">
|
||||
<el-button
|
||||
size="default"
|
||||
type="text"
|
||||
@click="selectImage"
|
||||
:title="$t('modals.new_toot.footer.add_image')"
|
||||
>
|
||||
<el-button size="default" type="text" @click="selectImage" :title="$t('modals.new_toot.footer.add_image')">
|
||||
<font-awesome-icon icon="camera" />
|
||||
</el-button>
|
||||
<input
|
||||
name="image"
|
||||
type="file"
|
||||
class="image-input"
|
||||
ref="image"
|
||||
@change="onChangeImage"
|
||||
:key="attachedMediaId"
|
||||
/>
|
||||
<input name="image" type="file" class="image-input" ref="image" @change="onChangeImage" :key="attachedMediaId" />
|
||||
</div>
|
||||
<div class="poll">
|
||||
<el-button
|
||||
size="default"
|
||||
type="text"
|
||||
@click="togglePollForm"
|
||||
:title="$t('modals.new_toot.footer.poll')"
|
||||
>
|
||||
<el-button size="default" type="text" @click="togglePollForm" :title="$t('modals.new_toot.footer.poll')">
|
||||
<font-awesome-icon icon="square-poll-horizontal" />
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="privacy">
|
||||
<el-dropdown trigger="click" @command="changeVisibility">
|
||||
<el-button
|
||||
size="default"
|
||||
type="text"
|
||||
:title="$t('modals.new_toot.footer.change_visibility')"
|
||||
>
|
||||
<el-button size="default" type="text" :title="$t('modals.new_toot.footer.change_visibility')">
|
||||
<font-awesome-icon :icon="visibilityIcon" />
|
||||
</el-button>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
|
@ -125,11 +84,7 @@
|
|||
{{ $t(visibilityList.Private.name) }}
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item :command="visibilityList.Direct.value">
|
||||
<font-awesome-icon
|
||||
icon="envelope"
|
||||
class="privacy-icon"
|
||||
size="sm"
|
||||
/>
|
||||
<font-awesome-icon icon="envelope" class="privacy-icon" size="sm" />
|
||||
{{ $t(visibilityList.Direct.name) }}
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
|
@ -172,27 +127,13 @@
|
|||
</el-button>
|
||||
</div>
|
||||
<div class="info">
|
||||
<img
|
||||
src="../../../assets/images/loading-spinner-wide.svg"
|
||||
v-show="loading"
|
||||
class="loading"
|
||||
/>
|
||||
<img src="../../../assets/images/loading-spinner-wide.svg" v-show="loading" class="loading" />
|
||||
<span class="text-count">{{ tootMax - status.length }}</span>
|
||||
|
||||
<el-button
|
||||
class="toot-action"
|
||||
size="small"
|
||||
@click="closeConfirm(close)"
|
||||
>{{ $t('modals.new_toot.cancel') }}</el-button
|
||||
>
|
||||
<el-button
|
||||
class="toot-action"
|
||||
size="small"
|
||||
type="primary"
|
||||
@click="toot"
|
||||
:loading="blockSubmit"
|
||||
>{{ $t('modals.new_toot.toot') }}</el-button
|
||||
>
|
||||
<el-button class="toot-action" size="small" @click="closeConfirm(close)">{{ $t('modals.new_toot.cancel') }}</el-button>
|
||||
<el-button class="toot-action" size="small" type="primary" @click="toot" :loading="blockSubmit">{{
|
||||
$t('modals.new_toot.toot')
|
||||
}}</el-button>
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
|
@ -206,13 +147,7 @@ import Visibility from '~/src/constants/visibility'
|
|||
import Status from './NewToot/Status'
|
||||
import Poll from './NewToot/Poll'
|
||||
import Quote from './NewToot/Quote'
|
||||
import {
|
||||
NewTootTootLength,
|
||||
NewTootAttachLength,
|
||||
NewTootModalOpen,
|
||||
NewTootBlockSubmit,
|
||||
NewTootPollInvalid,
|
||||
} from '@/errors/validations'
|
||||
import { NewTootTootLength, NewTootAttachLength, NewTootModalOpen, NewTootBlockSubmit, NewTootPollInvalid } from '@/errors/validations'
|
||||
import { Event } from '~/src/renderer/components/event'
|
||||
|
||||
export default {
|
||||
|
@ -220,7 +155,7 @@ export default {
|
|||
components: {
|
||||
Status,
|
||||
Poll,
|
||||
Quote,
|
||||
Quote
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
@ -232,30 +167,30 @@ export default {
|
|||
polls: [],
|
||||
pollExpire: {
|
||||
label: this.$t('modals.new_toot.poll.expires.1_day'),
|
||||
value: 3600 * 24,
|
||||
value: 3600 * 24
|
||||
},
|
||||
statusHeight: 240,
|
||||
statusHeight: 240
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState('TimelineSpace/Modals/NewToot', {
|
||||
replyToId: (state) => {
|
||||
replyToId: state => {
|
||||
if (state.replyToMessage !== null) {
|
||||
return state.replyToMessage.id
|
||||
} else {
|
||||
return null
|
||||
}
|
||||
},
|
||||
quoteToMessage: (state) => state.quoteToMessage,
|
||||
attachedMedias: (state) => state.attachedMedias,
|
||||
attachedMediaId: (state) => state.attachedMediaId,
|
||||
mediaDescriptions: (state) => state.mediaDescriptions,
|
||||
blockSubmit: (state) => state.blockSubmit,
|
||||
visibility: (state) => state.visibility,
|
||||
sensitive: (state) => state.sensitive,
|
||||
initialStatus: (state) => state.initialStatus,
|
||||
initialSpoiler: (state) => state.initialSpoiler,
|
||||
visibilityIcon: (state) => {
|
||||
quoteToMessage: state => state.quoteToMessage,
|
||||
attachedMedias: state => state.attachedMedias,
|
||||
attachedMediaId: state => state.attachedMediaId,
|
||||
mediaDescriptions: state => state.mediaDescriptions,
|
||||
blockSubmit: state => state.blockSubmit,
|
||||
visibility: state => state.visibility,
|
||||
sensitive: state => state.sensitive,
|
||||
initialStatus: state => state.initialStatus,
|
||||
initialSpoiler: state => state.initialSpoiler,
|
||||
visibilityIcon: state => {
|
||||
switch (state.visibility) {
|
||||
case Visibility.Public.value:
|
||||
return 'globe'
|
||||
|
@ -269,13 +204,13 @@ export default {
|
|||
return 'globe'
|
||||
}
|
||||
},
|
||||
loading: (state) => state.loading,
|
||||
loading: state => state.loading
|
||||
}),
|
||||
...mapState('TimelineSpace', {
|
||||
tootMax: (state) => state.tootMax,
|
||||
tootMax: state => state.tootMax
|
||||
}),
|
||||
...mapState('App', {
|
||||
displayNameStyle: (state) => state.displayNameStyle,
|
||||
displayNameStyle: state => state.displayNameStyle
|
||||
}),
|
||||
...mapGetters('TimelineSpace/Modals/NewToot', ['hashtagInserting']),
|
||||
newTootModal: {
|
||||
|
@ -288,19 +223,16 @@ export default {
|
|||
} else {
|
||||
this.$store.dispatch('TimelineSpace/Modals/NewToot/closeModal')
|
||||
}
|
||||
},
|
||||
}
|
||||
},
|
||||
pinedHashtag: {
|
||||
get() {
|
||||
return this.$store.state.TimelineSpace.Modals.NewToot.pinedHashtag
|
||||
},
|
||||
set(value) {
|
||||
this.$store.commit(
|
||||
'TimelineSpace/Modals/NewToot/changePinedHashtag',
|
||||
value
|
||||
)
|
||||
},
|
||||
},
|
||||
this.$store.commit('TimelineSpace/Modals/NewToot/changePinedHashtag', value)
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.$store.dispatch('TimelineSpace/Modals/NewToot/setupLoading')
|
||||
|
@ -319,14 +251,12 @@ export default {
|
|||
this.status = this.initialStatus
|
||||
this.spoiler = this.initialSpoiler
|
||||
}
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
close() {
|
||||
this.filteredAccount = []
|
||||
const spoilerHeight = this.$refs.spoiler
|
||||
? this.$refs.spoiler.offsetHeight
|
||||
: 0
|
||||
const spoilerHeight = this.$refs.spoiler ? this.$refs.spoiler.offsetHeight : 0
|
||||
this.showContentWarning = false
|
||||
this.spoiler = ''
|
||||
this.statusHeight = this.statusHeight + spoilerHeight
|
||||
|
@ -335,16 +265,12 @@ export default {
|
|||
this.polls = []
|
||||
this.pollExpire = {
|
||||
label: this.$t('modals.new_toot.poll.expires.1_day'),
|
||||
value: 3600 * 24,
|
||||
value: 3600 * 24
|
||||
}
|
||||
this.statusHeight = this.statusHeight + pollHeight
|
||||
const quoteHeight = this.$refs.quote
|
||||
? this.$refs.quote.$el.offsetHeight
|
||||
: 0
|
||||
const quoteHeight = this.$refs.quote ? this.$refs.quote.$el.offsetHeight : 0
|
||||
this.statusHeight = this.statusHeight + quoteHeight
|
||||
const attachmentHeight = this.$refs.preview
|
||||
? this.$refs.preview.offsetHeight
|
||||
: 0
|
||||
const attachmentHeight = this.$refs.preview ? this.$refs.preview.offsetHeight : 0
|
||||
this.statusHeight = this.statusHeight + attachmentHeight
|
||||
this.$store.dispatch('TimelineSpace/Modals/NewToot/resetMediaCount')
|
||||
this.$store.dispatch('TimelineSpace/Modals/NewToot/closeModal')
|
||||
|
@ -354,18 +280,12 @@ export default {
|
|||
status: this.status,
|
||||
spoiler: this.spoiler,
|
||||
polls: this.polls,
|
||||
pollExpireSeconds: this.pollExpire.value,
|
||||
pollExpireSeconds: this.pollExpire.value
|
||||
}
|
||||
|
||||
try {
|
||||
const status = await this.$store.dispatch(
|
||||
'TimelineSpace/Modals/NewToot/postToot',
|
||||
form
|
||||
)
|
||||
this.$store.dispatch(
|
||||
'TimelineSpace/Modals/NewToot/updateHashtags',
|
||||
status.tags
|
||||
)
|
||||
const status = await this.$store.dispatch('TimelineSpace/Modals/NewToot/postToot', form)
|
||||
this.$store.dispatch('TimelineSpace/Modals/NewToot/updateHashtags', status.tags)
|
||||
this.close()
|
||||
} catch (err) {
|
||||
console.error(err)
|
||||
|
@ -373,29 +293,26 @@ export default {
|
|||
this.$message({
|
||||
message: this.$t('validation.new_toot.toot_length', {
|
||||
min: 1,
|
||||
max: this.tootMax,
|
||||
max: this.tootMax
|
||||
}),
|
||||
type: 'error',
|
||||
type: 'error'
|
||||
})
|
||||
} else if (err instanceof NewTootAttachLength) {
|
||||
this.$message({
|
||||
message: this.$t('validation.new_toot.attach_length', { max: 4 }),
|
||||
type: 'error',
|
||||
type: 'error'
|
||||
})
|
||||
} else if (err instanceof NewTootPollInvalid) {
|
||||
this.$message({
|
||||
message: this.$t('validation.new_toot.poll_invalid'),
|
||||
type: 'error',
|
||||
type: 'error'
|
||||
})
|
||||
} else if (
|
||||
err instanceof NewTootModalOpen ||
|
||||
err instanceof NewTootBlockSubmit
|
||||
) {
|
||||
} else if (err instanceof NewTootModalOpen || err instanceof NewTootBlockSubmit) {
|
||||
// Nothing
|
||||
} else {
|
||||
this.$message({
|
||||
message: this.$t('message.toot_error'),
|
||||
type: 'error',
|
||||
type: 'error'
|
||||
})
|
||||
}
|
||||
}
|
||||
|
@ -404,26 +321,21 @@ export default {
|
|||
this.$refs.image.click()
|
||||
},
|
||||
onChangeImage(e) {
|
||||
if (
|
||||
e.target.files.item(0) === null ||
|
||||
e.target.files.item(0) === undefined
|
||||
) {
|
||||
if (e.target.files.item(0) === null || e.target.files.item(0) === undefined) {
|
||||
return
|
||||
}
|
||||
const file = e.target.files.item(0)
|
||||
if (!file.type.includes('image') && !file.type.includes('video')) {
|
||||
this.$message({
|
||||
message: this.$t('validation.new_toot.attach_image'),
|
||||
type: 'error',
|
||||
type: 'error'
|
||||
})
|
||||
return
|
||||
}
|
||||
this.updateImage(file)
|
||||
},
|
||||
onPaste(e) {
|
||||
const mimeTypes = window.clipboard
|
||||
.availableFormats()
|
||||
.filter((type) => type.startsWith('image'))
|
||||
const mimeTypes = window.clipboard.availableFormats().filter(type => type.startsWith('image'))
|
||||
if (mimeTypes.length === 0) {
|
||||
return
|
||||
}
|
||||
|
@ -443,42 +355,33 @@ export default {
|
|||
this.$store
|
||||
.dispatch('TimelineSpace/Modals/NewToot/uploadImage', file)
|
||||
.then(() => {
|
||||
this.statusHeight =
|
||||
this.statusHeight - this.$refs.preview.offsetHeight
|
||||
this.statusHeight = this.statusHeight - this.$refs.preview.offsetHeight
|
||||
})
|
||||
.catch((err) => {
|
||||
.catch(err => {
|
||||
if (err instanceof NewTootAttachLength) {
|
||||
this.$message({
|
||||
message: this.$t('validation.new_toot.attach_length', { max: 4 }),
|
||||
type: 'error',
|
||||
type: 'error'
|
||||
})
|
||||
} else {
|
||||
this.$message({
|
||||
message: this.$t('message.attach_error'),
|
||||
type: 'error',
|
||||
type: 'error'
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
removeAttachment(media) {
|
||||
const previousHeight = this.$refs.preview.offsetHeight
|
||||
this.$store
|
||||
.dispatch('TimelineSpace/Modals/NewToot/removeMedia', media)
|
||||
.then(() => {
|
||||
this.$store.dispatch('TimelineSpace/Modals/NewToot/removeMedia', media).then(() => {
|
||||
this.statusHeight = this.statusHeight + previousHeight
|
||||
})
|
||||
},
|
||||
changeVisibility(level) {
|
||||
this.$store.commit(
|
||||
'TimelineSpace/Modals/NewToot/changeVisibilityValue',
|
||||
level
|
||||
)
|
||||
this.$store.commit('TimelineSpace/Modals/NewToot/changeVisibilityValue', level)
|
||||
},
|
||||
changeSensitive() {
|
||||
this.$store.commit(
|
||||
'TimelineSpace/Modals/NewToot/changeSensitive',
|
||||
!this.sensitive
|
||||
)
|
||||
this.$store.commit('TimelineSpace/Modals/NewToot/changeSensitive', !this.sensitive)
|
||||
},
|
||||
closeConfirm(done) {
|
||||
if (this.status.length === 0) {
|
||||
|
@ -486,24 +389,19 @@ export default {
|
|||
} else {
|
||||
this.$confirm(this.$t('modals.new_toot.close_confirm'), {
|
||||
confirmButtonText: this.$t('modals.new_toot.close_confirm_ok'),
|
||||
cancelButtonText: this.$t('modals.new_toot.close_confirm_cancel'),
|
||||
cancelButtonText: this.$t('modals.new_toot.close_confirm_cancel')
|
||||
})
|
||||
.then((_) => {
|
||||
.then(_ => {
|
||||
done()
|
||||
})
|
||||
.catch((_) => {})
|
||||
.catch(_ => {})
|
||||
}
|
||||
},
|
||||
updateDescription(id, value) {
|
||||
this.$store.commit(
|
||||
'TimelineSpace/Modals/NewToot/updateMediaDescription',
|
||||
{ id: id, description: value }
|
||||
)
|
||||
this.$store.commit('TimelineSpace/Modals/NewToot/updateMediaDescription', { id: id, description: value })
|
||||
},
|
||||
async togglePollForm() {
|
||||
const previousHeight = this.$refs.poll
|
||||
? this.$refs.poll.$el.offsetHeight
|
||||
: 0
|
||||
const previousHeight = this.$refs.poll ? this.$refs.poll.$el.offsetHeight : 0
|
||||
const toggle = () => {
|
||||
this.openPoll = !this.openPoll
|
||||
if (this.openPoll) {
|
||||
|
@ -535,9 +433,7 @@ export default {
|
|||
this.pollExpire = obj
|
||||
},
|
||||
async toggleContentWarning() {
|
||||
const previousHeight = this.$refs.spoiler
|
||||
? this.$refs.spoiler.offsetHeight
|
||||
: 0
|
||||
const previousHeight = this.$refs.spoiler ? this.$refs.spoiler.offsetHeight : 0
|
||||
await (this.showContentWarning = !this.showContentWarning)
|
||||
if (this.showContentWarning) {
|
||||
this.statusHeight = this.statusHeight - this.$refs.spoiler.offsetHeight
|
||||
|
@ -548,8 +444,7 @@ export default {
|
|||
handleResize(event) {
|
||||
// Ignore when the modal height already reach window height.
|
||||
const vHeight = this.$refs.dialog.$el.firstChild.style.marginTop
|
||||
const marginTop =
|
||||
(document.documentElement.clientHeight / 100) * parseInt(vHeight)
|
||||
const marginTop = (document.documentElement.clientHeight / 100) * parseInt(vHeight)
|
||||
const limitHeight = document.documentElement.clientHeight - marginTop - 80
|
||||
if (this.$refs.dialog.$el.firstChild.offsetHeight >= limitHeight) {
|
||||
return
|
||||
|
@ -557,25 +452,13 @@ export default {
|
|||
// When emoji picker is opened, resize event has to be stopped.
|
||||
const style = this.$refs.dialog.$el.firstChild.style
|
||||
if (style.overflow === '' || style.overflow === 'hidden') {
|
||||
const pollHeight = this.$refs.poll
|
||||
? this.$refs.poll.$el.offsetHeight
|
||||
: 0
|
||||
const spoilerHeight = this.$refs.spoiler
|
||||
? this.$refs.spoiler.offsetHeight
|
||||
: 0
|
||||
const quoteHeight = this.$refs.quote
|
||||
? this.$refs.quote.$el.offsetHeight
|
||||
: 0
|
||||
const pollHeight = this.$refs.poll ? this.$refs.poll.$el.offsetHeight : 0
|
||||
const spoilerHeight = this.$refs.spoiler ? this.$refs.spoiler.offsetHeight : 0
|
||||
const quoteHeight = this.$refs.quote ? this.$refs.quote.$el.offsetHeight : 0
|
||||
const headerHeight = 54
|
||||
const footerHeight = 63
|
||||
this.statusHeight =
|
||||
event.height -
|
||||
footerHeight -
|
||||
headerHeight -
|
||||
this.$refs.preview.offsetHeight -
|
||||
pollHeight -
|
||||
spoilerHeight -
|
||||
quoteHeight
|
||||
event.height - footerHeight - headerHeight - this.$refs.preview.offsetHeight - pollHeight - spoilerHeight - quoteHeight
|
||||
}
|
||||
},
|
||||
innerElementOpened(open) {
|
||||
|
@ -584,8 +467,8 @@ export default {
|
|||
} else {
|
||||
this.$refs.dialog.$el.firstChild.style.overflow = 'hidden'
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
@ -661,12 +544,7 @@ export default {
|
|||
border: 0;
|
||||
border-bottom-left-radius: 8px;
|
||||
border-bottom-right-radius: 8px;
|
||||
background: linear-gradient(
|
||||
0deg,
|
||||
rgba(0, 0, 0, 0.8) 0,
|
||||
rgba(0, 0, 0, 0.35) 80%,
|
||||
transparent
|
||||
);
|
||||
background: linear-gradient(0deg, rgba(0, 0, 0, 0.8) 0, rgba(0, 0, 0, 0.35) 80%, transparent);
|
||||
font-size: var(--font-base-size);
|
||||
color: #fff;
|
||||
opacity: 1;
|
||||
|
|
|
@ -1,22 +1,9 @@
|
|||
<template>
|
||||
<el-dialog
|
||||
:title="$t('modals.report.title')"
|
||||
:visible.sync="reportModal"
|
||||
width="400px"
|
||||
custom-class="report"
|
||||
>
|
||||
<el-input
|
||||
type="textarea"
|
||||
v-model="comment"
|
||||
:placeholder="$t('modals.report.comment')"
|
||||
></el-input>
|
||||
<el-dialog :title="$t('modals.report.title')" v-model="reportModal" width="400px" custom-class="report">
|
||||
<el-input type="textarea" v-model="comment" :placeholder="$t('modals.report.comment')"></el-input>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="closeModal">{{
|
||||
$t('modals.report.cancel')
|
||||
}}</el-button>
|
||||
<el-button type="primary" @click="submit">{{
|
||||
$t('modals.report.ok')
|
||||
}}</el-button>
|
||||
<el-button @click="closeModal">{{ $t('modals.report.cancel') }}</el-button>
|
||||
<el-button type="primary" @click="submit">{{ $t('modals.report.ok') }}</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
@ -28,12 +15,12 @@ export default {
|
|||
name: 'Report',
|
||||
data() {
|
||||
return {
|
||||
comment: '',
|
||||
comment: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState('TimelineSpace/Modals/Report', {
|
||||
toot: (state) => state.message,
|
||||
toot: state => state.message
|
||||
}),
|
||||
reportModal: {
|
||||
get() {
|
||||
|
@ -41,8 +28,8 @@ export default {
|
|||
},
|
||||
set(value) {
|
||||
this.$store.commit('TimelineSpace/Modals/Report/changeModalOpen', value)
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
closeModal() {
|
||||
|
@ -53,10 +40,10 @@ export default {
|
|||
await this.$store.dispatch('TimelineSpace/Modals/Report/submit', {
|
||||
account_id: this.toot.account.id,
|
||||
status_id: this.toot.id,
|
||||
comment: this.comment,
|
||||
comment: this.comment
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
@ -1,10 +1,5 @@
|
|||
<template>
|
||||
<el-dialog
|
||||
:title="$t('modals.shortcut.title')"
|
||||
:visible.sync="shortcutModal"
|
||||
width="500px"
|
||||
class="shortcut-modal"
|
||||
>
|
||||
<el-dialog :title="$t('modals.shortcut.title')" v-model="shortcutModal" width="500px" class="shortcut-modal">
|
||||
<table class="shortcuts">
|
||||
<tbody>
|
||||
<tr>
|
||||
|
@ -94,9 +89,9 @@ export default {
|
|||
},
|
||||
set(value) {
|
||||
this.$store.commit('TimelineSpace/Modals/Shortcut/changeModal', value)
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
@ -1,9 +1,6 @@
|
|||
<template>
|
||||
<div id="side_menu">
|
||||
<div
|
||||
:class="collapse ? 'profile-wrapper narrow-menu' : 'profile-wrapper'"
|
||||
style="-webkit-app-region: drag"
|
||||
>
|
||||
<div :class="collapse ? 'profile-wrapper narrow-menu' : 'profile-wrapper'" style="-webkit-app-region: drag">
|
||||
<div :class="collapse ? 'profile-narrow' : 'profile-wide'">
|
||||
<div class="account">
|
||||
<div class="avatar" v-if="collapse">
|
||||
|
@ -13,45 +10,23 @@
|
|||
@{{ account.username }}
|
||||
<span class="domain-name">{{ account.domain }}</span>
|
||||
</div>
|
||||
<el-dropdown
|
||||
trigger="click"
|
||||
@command="handleProfile"
|
||||
:title="$t('side_menu.profile')"
|
||||
>
|
||||
<el-dropdown trigger="click" @command="handleProfile" :title="$t('side_menu.profile')">
|
||||
<span class="el-dropdown-link">
|
||||
<el-icon class="el-icon--right"><el-icon-arrow-down /></el-icon>
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item command="show">{{
|
||||
$t('side_menu.show_profile')
|
||||
}}</el-dropdown-item>
|
||||
<el-dropdown-item command="edit">{{
|
||||
$t('side_menu.edit_profile')
|
||||
}}</el-dropdown-item>
|
||||
<el-dropdown-item command="settings">{{
|
||||
$t('side_menu.settings')
|
||||
}}</el-dropdown-item>
|
||||
<el-dropdown-item command="show">{{ $t('side_menu.show_profile') }}</el-dropdown-item>
|
||||
<el-dropdown-item command="edit">{{ $t('side_menu.edit_profile') }}</el-dropdown-item>
|
||||
<el-dropdown-item command="settings">{{ $t('side_menu.settings') }}</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
<div class="collapse">
|
||||
<el-button
|
||||
type="text"
|
||||
class="release-collapse"
|
||||
@click="releaseCollapse"
|
||||
v-if="collapse"
|
||||
:title="$t('side_menu.expand')"
|
||||
>
|
||||
<el-button type="text" class="release-collapse" @click="releaseCollapse" v-if="collapse" :title="$t('side_menu.expand')">
|
||||
<font-awesome-icon :icon="['fa', 'angles-right']" />
|
||||
</el-button>
|
||||
<el-button
|
||||
type="text"
|
||||
class="do-collapse"
|
||||
@click="doCollapse"
|
||||
v-else
|
||||
:title="$t('side_menu.collapse')"
|
||||
>
|
||||
<el-button type="text" class="do-collapse" @click="doCollapse" v-else :title="$t('side_menu.collapse')">
|
||||
<font-awesome-icon :icon="['fa', 'angles-left']" />
|
||||
</el-button>
|
||||
</div>
|
||||
|
@ -63,19 +38,10 @@
|
|||
:collapse="collapse"
|
||||
active-text-color="#ffffff"
|
||||
:router="true"
|
||||
:class="
|
||||
collapse
|
||||
? 'el-menu-vertical timeline-menu narrow-menu'
|
||||
: 'el-menu-vertical timeline-menu'
|
||||
"
|
||||
:class="collapse ? 'el-menu-vertical timeline-menu narrow-menu' : 'el-menu-vertical timeline-menu'"
|
||||
role="menu"
|
||||
>
|
||||
<el-menu-item
|
||||
:index="`/${id()}/home`"
|
||||
role="menuitem"
|
||||
:title="$t('side_menu.home')"
|
||||
class="menu-item"
|
||||
>
|
||||
<el-menu-item :index="`/${id()}/home`" role="menuitem" :title="$t('side_menu.home')" class="menu-item">
|
||||
<div class="menu-item-icon">
|
||||
<font-awesome-icon icon="home" />
|
||||
</div>
|
||||
|
@ -202,12 +168,7 @@
|
|||
<el-badge is-dot :hidden="!unreadPublicTimeline"> </el-badge>
|
||||
</div>
|
||||
</el-menu-item>
|
||||
<el-menu-item
|
||||
:index="`/${id()}/search`"
|
||||
role="menuitem"
|
||||
:title="$t('side_menu.search')"
|
||||
class="menu-item"
|
||||
>
|
||||
<el-menu-item :index="`/${id()}/search`" role="menuitem" :title="$t('side_menu.search')" class="menu-item">
|
||||
<div class="menu-item-icon">
|
||||
<font-awesome-icon icon="magnifying-glass" />
|
||||
</div>
|
||||
|
@ -215,12 +176,7 @@
|
|||
<span>{{ $t('side_menu.search') }}</span>
|
||||
</div>
|
||||
</el-menu-item>
|
||||
<el-menu-item
|
||||
:index="`/${id()}/hashtag`"
|
||||
role="menuitem"
|
||||
:title="$t('side_menu.hashtag')"
|
||||
class="menu-item"
|
||||
>
|
||||
<el-menu-item :index="`/${id()}/hashtag`" role="menuitem" :title="$t('side_menu.hashtag')" class="menu-item">
|
||||
<div class="menu-item-icon">
|
||||
<font-awesome-icon icon="hashtag" />
|
||||
</div>
|
||||
|
@ -228,11 +184,11 @@
|
|||
<span>{{ $t('side_menu.hashtag') }}</span>
|
||||
</div>
|
||||
</el-menu-item>
|
||||
<template v-for="tag in tags" v-if="enabledTimelines.tag">
|
||||
<template v-if="enabledTemplates.tag">
|
||||
<template v-for="tag in tags" :key="tag.tagName">
|
||||
<el-menu-item
|
||||
:index="`/${id()}/hashtag/${tag.tagName}`"
|
||||
:class="collapse ? '' : 'sub-menu'"
|
||||
:key="tag.tagName"
|
||||
role="menuitem"
|
||||
:title="tag.tagName"
|
||||
class="menu-item"
|
||||
|
@ -245,12 +201,8 @@
|
|||
</div>
|
||||
</el-menu-item>
|
||||
</template>
|
||||
<el-menu-item
|
||||
:index="`/${id()}/lists`"
|
||||
role="menuitem"
|
||||
:title="$t('side_menu.lists')"
|
||||
class="menu-item"
|
||||
>
|
||||
</template>
|
||||
<el-menu-item :index="`/${id()}/lists`" role="menuitem" :title="$t('side_menu.lists')" class="menu-item">
|
||||
<div class="menu-item-icon">
|
||||
<font-awesome-icon icon="list-ul" />
|
||||
</div>
|
||||
|
@ -258,11 +210,11 @@
|
|||
<span>{{ $t('side_menu.lists') }}</span>
|
||||
</div>
|
||||
</el-menu-item>
|
||||
<template v-for="list in lists" v-if="enabledTimelines.list">
|
||||
<template v-if="enabledTimelines.list">
|
||||
<template v-for="list in lists" :key="list.id">
|
||||
<el-menu-item
|
||||
:index="`/${id()}/lists/${list.id}`"
|
||||
:class="collapse ? '' : 'sub-menu'"
|
||||
:key="list.id"
|
||||
role="menuitem"
|
||||
:title="list.title"
|
||||
class="menu-item"
|
||||
|
@ -275,21 +227,12 @@
|
|||
</div>
|
||||
</el-menu-item>
|
||||
</template>
|
||||
</template>
|
||||
</el-menu>
|
||||
<el-button
|
||||
v-if="hideGlobalHeader"
|
||||
class="global-header-control"
|
||||
type="text"
|
||||
@click="changeGlobalHeader(false)"
|
||||
>
|
||||
<el-button v-if="hideGlobalHeader" class="global-header-control" type="text" @click="changeGlobalHeader(false)">
|
||||
<font-awesome-icon icon="angles-right" />
|
||||
</el-button>
|
||||
<el-button
|
||||
v-else
|
||||
class="global-header-control"
|
||||
type="text"
|
||||
@click="changeGlobalHeader(true)"
|
||||
>
|
||||
<el-button v-else class="global-header-control" type="text" @click="changeGlobalHeader(true)">
|
||||
<font-awesome-icon icon="angles-left" />
|
||||
</el-button>
|
||||
</div>
|
||||
|
@ -301,29 +244,28 @@ import { mapState } from 'vuex'
|
|||
|
||||
export default {
|
||||
components: {
|
||||
ElIconArrowDown,
|
||||
ElIconArrowDown
|
||||
},
|
||||
name: 'side-menu',
|
||||
computed: {
|
||||
...mapState('TimelineSpace/SideMenu', {
|
||||
unreadHomeTimeline: (state) => state.unreadHomeTimeline,
|
||||
unreadNotifications: (state) => state.unreadNotifications,
|
||||
unreadMentions: (state) => state.unreadMentions,
|
||||
unreadLocalTimeline: (state) => state.unreadLocalTimeline,
|
||||
unreadDirectMessagesTimeline: (state) =>
|
||||
state.unreadDirectMessagesTimeline,
|
||||
unreadPublicTimeline: (state) => state.unreadPublicTimeline,
|
||||
unreadFollowRequests: (state) => state.unreadFollowRequests,
|
||||
lists: (state) => state.lists,
|
||||
tags: (state) => state.tags,
|
||||
collapse: (state) => state.collapse,
|
||||
enabledTimelines: (state) => state.enabledTimelines,
|
||||
unreadHomeTimeline: state => state.unreadHomeTimeline,
|
||||
unreadNotifications: state => state.unreadNotifications,
|
||||
unreadMentions: state => state.unreadMentions,
|
||||
unreadLocalTimeline: state => state.unreadLocalTimeline,
|
||||
unreadDirectMessagesTimeline: state => state.unreadDirectMessagesTimeline,
|
||||
unreadPublicTimeline: state => state.unreadPublicTimeline,
|
||||
unreadFollowRequests: state => state.unreadFollowRequests,
|
||||
lists: state => state.lists,
|
||||
tags: state => state.tags,
|
||||
collapse: state => state.collapse,
|
||||
enabledTimelines: state => state.enabledTimelines
|
||||
}),
|
||||
...mapState({
|
||||
account: (state) => state.TimelineSpace.account,
|
||||
themeColor: (state) => state.App.theme.side_menu_color,
|
||||
hideGlobalHeader: (state) => state.GlobalHeader.hide,
|
||||
}),
|
||||
account: state => state.TimelineSpace.account,
|
||||
themeColor: state => state.App.theme.side_menu_color,
|
||||
hideGlobalHeader: state => state.GlobalHeader.hide
|
||||
})
|
||||
},
|
||||
created() {
|
||||
this.$store.dispatch('TimelineSpace/SideMenu/readCollapse')
|
||||
|
@ -339,25 +281,12 @@ export default {
|
|||
handleProfile(command) {
|
||||
switch (command) {
|
||||
case 'show':
|
||||
this.$store
|
||||
.dispatch(
|
||||
'TimelineSpace/Contents/SideBar/AccountProfile/fetchAccount',
|
||||
this.account.accountId
|
||||
)
|
||||
.then((account) => {
|
||||
this.$store.dispatch(
|
||||
'TimelineSpace/Contents/SideBar/AccountProfile/changeAccount',
|
||||
account
|
||||
)
|
||||
this.$store.commit(
|
||||
'TimelineSpace/Contents/SideBar/changeOpenSideBar',
|
||||
true
|
||||
)
|
||||
this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/fetchAccount', this.account.accountId).then(account => {
|
||||
this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/changeAccount', account)
|
||||
this.$store.commit('TimelineSpace/Contents/SideBar/changeOpenSideBar', true)
|
||||
})
|
||||
|
||||
this.$store.dispatch(
|
||||
'TimelineSpace/Contents/SideBar/openAccountComponent'
|
||||
)
|
||||
this.$store.dispatch('TimelineSpace/Contents/SideBar/openAccountComponent')
|
||||
break
|
||||
case 'edit':
|
||||
window.shell.openExternal(this.account.baseURL + '/settings/profile')
|
||||
|
@ -377,8 +306,8 @@ export default {
|
|||
},
|
||||
async changeGlobalHeader(value) {
|
||||
await this.$store.dispatch('GlobalHeader/switchHide', value)
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
Loading…
Reference in New Issue