Mastodon
/
Whalebird-desktop-client-mac-linux-windows
mirror of https://github.com/h3poteto/whalebird-desktop
1
0
Fork 0
Code Issues Releases Wiki Activity

Fix deprecated format

This commit is contained in:
AkiraFukushima 2022-04-19 19:18:29 +09:00
parent e92dbba320
commit 95242cf758
No known key found for this signature in database
GPG Key ID: B6E51BAC4DE1A957
15 changed files with 426 additions and 896 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
src/renderer/components/GlobalHeader.vue
View File

@ -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>

70
src/renderer/components/Login/LoginForm.vue
View File

@ -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>

86
src/renderer/components/Preferences/Account.vue
View File

@ -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,31 +110,27 @@ 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.loadAccounts()
})
this.$store.dispatch('Preferences/Account/forwardAccount', accounts[index]).then(() => {
this.loadAccounts()
})
},
backward(index, accounts) {
this.$store
.dispatch('Preferences/Account/backwardAccount', accounts[index])
.then(() => {
this.loadAccounts()
})
this.$store.dispatch('Preferences/Account/backwardAccount', accounts[index]).then(() => {
this.loadAccounts()
})
},
removeAllAssociations() {
this.deletePopoverVisible = false
this.$store.dispatch('Preferences/Account/removeAllAccounts').then(() => {
this.$router.push('/login')
})
},
},
}
}
}
</script>

92
src/renderer/components/Settings/Filters.vue
View File

@ -8,50 +8,38 @@
</router-link>
</el-button>
</div>
<template>
<el-table
:data="filters"
tooltip-effect="dark"
empty-text="No filters"
style="width: 100%"
v-loading="filtersLoading"
:element-loading-background="backgroundColor"
>
<el-table-column prop="phrase" label="Keyword" width="180">
</el-table-column>
<el-table-column label="Context">
<template slot-scope="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 width="80">
<template slot-scope="scope">
<el-button type="text">
<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)"
>
{{ $t('settings.filters.delete.title') }}
</el-button>
</template>
</el-table-column>
</el-table>
</template>
<el-table
:data="filters"
tooltip-effect="dark"
empty-text="No filters"
style="width: 100%"
v-loading="filtersLoading"
:element-loading-background="backgroundColor"
>
<el-table-column prop="phrase" label="Keyword" width="180"> </el-table-column>
<el-table-column label="Context">
<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 width="80">
<template #default="scope">
<el-button type="text">
<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 #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>
</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>

105
src/renderer/components/Settings/Filters/form.vue
View File

@ -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-group>
</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-group>
</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>

137
src/renderer/components/TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Posts.vue
View File

@ -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.$message({
message: this.$t('message.timeline_fetch_error'),
type: 'error',
})
this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Posts/fetchTimeline', this.account).catch(() => {
this.$message({
message: this.$t('message.timeline_fetch_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',
{
account: this.account,
status: this.timeline[this.timeline.length - 1],
}
)
.catch((err) => {
.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Posts/lazyFetchTimeline', {
account: this.account,
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>

49
src/renderer/components/TimelineSpace/Modals/AddListMember.vue
View File

@ -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>

58
src/renderer/components/TimelineSpace/Modals/ImageViewer.vue
View File

@ -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>

54
src/renderer/components/TimelineSpace/Modals/Jump.vue
View File

@ -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>

52
src/renderer/components/TimelineSpace/Modals/ListMembership.vue
View File

@ -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>

37
src/renderer/components/TimelineSpace/Modals/MuteConfirm.vue
View File

@ -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>

276
src/renderer/components/TimelineSpace/Modals/NewToot.vue
View File

@ -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.statusHeight = this.statusHeight + previousHeight
})
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;

35
src/renderer/components/TimelineSpace/Modals/Report.vue
View File

@ -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>

13
src/renderer/components/TimelineSpace/Modals/Shortcut.vue
View File

@ -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>

213
src/renderer/components/TimelineSpace/SideMenu.vue
View File

@ -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,29 +184,25 @@
<span>{{ $t('side_menu.hashtag') }}</span>
</div>
</el-menu-item>
<template v-for="tag in tags" v-if="enabledTimelines.tag">
<el-menu-item
:index="`/${id()}/hashtag/${tag.tagName}`"
:class="collapse ? '' : 'sub-menu'"
:key="tag.tagName"
role="menuitem"
:title="tag.tagName"
class="menu-item"
>
<div class="menu-item-icon">
<font-awesome-icon icon="hashtag" size="sm" />
</div>
<div>
<span>{{ tag.tagName }}</span>
</div>
</el-menu-item>
<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'"
role="menuitem"
:title="tag.tagName"
class="menu-item"
>
<div class="menu-item-icon">
<font-awesome-icon icon="hashtag" size="sm" />
</div>
<div>
<span>{{ tag.tagName }}</span>
</div>
</el-menu-item>
</template>
</template>
<el-menu-item
:index="`/${id()}/lists`"
role="menuitem"
:title="$t('side_menu.lists')"
class="menu-item"
>
<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,38 +210,29 @@
<span>{{ $t('side_menu.lists') }}</span>
</div>
</el-menu-item>
<template v-for="list in lists" v-if="enabledTimelines.list">
<el-menu-item
:index="`/${id()}/lists/${list.id}`"
:class="collapse ? '' : 'sub-menu'"
:key="list.id"
role="menuitem"
:title="list.title"
class="menu-item"
>
<div class="menu-item-icon">
<font-awesome-icon icon="list-ul" size="sm" />
</div>
<div>
<span>{{ list.title }}</span>
</div>
</el-menu-item>
<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'"
role="menuitem"
:title="list.title"
class="menu-item"
>
<div class="menu-item-icon">
<font-awesome-icon icon="list-ul" size="sm" />
</div>
<div>
<span>{{ list.title }}</span>
</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>