Merge pull request #1050 from h3poteto/loading
Fix loading color in preferences
This commit is contained in:
AkiraFukushima
GitHub
commit
fb94a9e0f5
|
|
@ -1,63 +1,60 @@
|
|||
<template>
|
||||
<div id="account">
|
||||
<h2>{{ $t('preferences.account.title') }}</h2>
|
||||
<el-form class="connected-account section" size="small">
|
||||
<h3>{{ $t('preferences.account.connected') }}</h3>
|
||||
<el-form-item>
|
||||
<el-table
|
||||
:data="accounts"
|
||||
tooltip-effect="dark"
|
||||
empty-text="No accounts"
|
||||
style="width: 100%"
|
||||
v-loading="accountLoading">
|
||||
<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">
|
||||
<i class="el-icon-close"></i> {{ $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">
|
||||
<div class="allow-up">
|
||||
<el-button class="arrow-up action" type="text" icon="el-icon-arrow-up" @click.native.prevent="forward(scope.$index, accounts)"></el-button>
|
||||
</div>
|
||||
<div class="allow-down">
|
||||
<el-button class="arrow-down action" type="text" icon="el-icon-arrow-down" @click.native.prevent="backward(scope.$index, accounts)"></el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<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>
|
||||
</div>
|
||||
<el-button slot="reference" type="danger">{{ $t('preferences.account.remove_all_associations') }}</el-button>
|
||||
</el-popover>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div id="account">
|
||||
<h2>{{ $t('preferences.account.title') }}</h2>
|
||||
<el-form class="connected-account section" size="small">
|
||||
<h3>{{ $t('preferences.account.connected') }}</h3>
|
||||
<el-form-item>
|
||||
<el-table
|
||||
:data="accounts"
|
||||
tooltip-effect="dark"
|
||||
empty-text="No accounts"
|
||||
style="width: 100%"
|
||||
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 :label="$t('preferences.account.association')">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click.native.prevent="removeAccount(scope.$index, accounts)" type="text" class="action">
|
||||
<i class="el-icon-close"></i> {{ $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">
|
||||
<div class="allow-up">
|
||||
<el-button
|
||||
class="arrow-up action"
|
||||
type="text"
|
||||
icon="el-icon-arrow-up"
|
||||
@click.native.prevent="forward(scope.$index, accounts)"
|
||||
></el-button>
|
||||
</div>
|
||||
<div class="allow-down">
|
||||
<el-button
|
||||
class="arrow-down action"
|
||||
type="text"
|
||||
icon="el-icon-arrow-down"
|
||||
@click.native.prevent="backward(scope.$index, accounts)"
|
||||
></el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<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>
|
||||
</div>
|
||||
<el-button slot="reference" type="danger">{{ $t('preferences.account.remove_all_associations') }}</el-button>
|
||||
</el-popover>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -65,7 +62,7 @@ import { mapState } from 'vuex'
|
|||
|
||||
export default {
|
||||
name: 'account',
|
||||
data () {
|
||||
data() {
|
||||
return {
|
||||
openRemoveDialog: false,
|
||||
deletePopoverVisible: false
|
||||
|
|
@ -75,13 +72,16 @@ export default {
|
|||
...mapState({
|
||||
accounts: state => state.Preferences.Account.accounts,
|
||||
accountLoading: state => state.Preferences.Account.accountLoading
|
||||
}),
|
||||
...mapState({
|
||||
backgroundColor: state => state.App.theme.background_color
|
||||
})
|
||||
},
|
||||
created () {
|
||||
created() {
|
||||
this.loadAccounts()
|
||||
},
|
||||
methods: {
|
||||
async loadAccounts () {
|
||||
async loadAccounts() {
|
||||
this.$store.commit('Preferences/Account/updateAccountLoading', true)
|
||||
try {
|
||||
await this.$store.dispatch('Preferences/Account/loadAccounts')
|
||||
|
|
@ -94,8 +94,9 @@ export default {
|
|||
this.$store.commit('Preferences/Account/updateAccountLoading', false)
|
||||
}
|
||||
},
|
||||
removeAccount (index, accounts) {
|
||||
this.$store.dispatch('Preferences/Account/removeAccount', accounts[index])
|
||||
removeAccount(index, accounts) {
|
||||
this.$store
|
||||
.dispatch('Preferences/Account/removeAccount', accounts[index])
|
||||
.then(() => {
|
||||
this.loadAccounts()
|
||||
})
|
||||
|
|
@ -106,24 +107,21 @@ export default {
|
|||
})
|
||||
})
|
||||
},
|
||||
forward (index, accounts) {
|
||||
this.$store.dispatch('Preferences/Account/forwardAccount', accounts[index])
|
||||
.then(() => {
|
||||
this.loadAccounts()
|
||||
})
|
||||
forward(index, accounts) {
|
||||
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()
|
||||
})
|
||||
backward(index, accounts) {
|
||||
this.$store.dispatch('Preferences/Account/backwardAccount', accounts[index]).then(() => {
|
||||
this.loadAccounts()
|
||||
})
|
||||
},
|
||||
removeAllAssociations () {
|
||||
removeAllAssociations() {
|
||||
this.deletePopoverVisible = false
|
||||
this.$store.dispatch('Preferences/Account/removeAllAccounts')
|
||||
.then(() => {
|
||||
this.$router.push('/login')
|
||||
})
|
||||
this.$store.dispatch('Preferences/Account/removeAllAccounts').then(() => {
|
||||
this.$router.push('/login')
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -164,5 +162,4 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div id="general" v-loading="loading">
|
||||
<div id="general" v-loading="loading" :element-loading-background="backgroundColor">
|
||||
<h2>{{ $t('preferences.general.title') }}</h2>
|
||||
<el-form class="sounds section" label-position="right" label-width="250px" size="small">
|
||||
<h3>{{ $t('preferences.general.sounds.title') }}</h3>
|
||||
|
|
@ -42,6 +42,9 @@ export default {
|
|||
...mapState('Preferences/General', {
|
||||
loading: state => state.loading
|
||||
}),
|
||||
...mapState({
|
||||
backgroundColor: state => state.App.theme.background_color
|
||||
}),
|
||||
...mapGetters('Preferences/General', ['notDarwin']),
|
||||
sound_fav_rb: {
|
||||
get() {
|
||||
|
|
|
|||
Loading…
Reference in New Issue