refs #3301 Rewrite TimelineSpace/Contents/SideBar with composition API
This commit is contained in:
parent
9fdd69ad0a
commit
6f143dc971
|
@ -23,12 +23,14 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
import TootDetail from './SideBar/TootDetail'
|
||||
import AccountProfile from './SideBar/AccountProfile'
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref, toRefs, computed, onBeforeUnmount } from 'vue'
|
||||
import TootDetail from './SideBar/TootDetail.vue'
|
||||
import AccountProfile from './SideBar/AccountProfile.vue'
|
||||
import { useStore } from '@/store'
|
||||
import { ACTION_TYPES } from '@/store/TimelineSpace/Contents/SideBar'
|
||||
|
||||
export default {
|
||||
export default defineComponent({
|
||||
components: {
|
||||
TootDetail,
|
||||
AccountProfile
|
||||
|
@ -40,43 +42,42 @@ export default {
|
|||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
setup(props) {
|
||||
const space = 'TimelineSpace/Contents/SideBar'
|
||||
const store = useStore()
|
||||
|
||||
const { overlaid } = toRefs(props)
|
||||
const loading = ref<boolean>(false)
|
||||
|
||||
const openSideBar = computed(() => store.state.TimelineSpace.Contents.SideBar.openSideBar)
|
||||
const component = computed(() => store.state.TimelineSpace.Contents.SideBar.component)
|
||||
const backgroundColor = computed(() => store.state.App.theme.background_color)
|
||||
const shortcutEnabled = computed(() => !overlaid.value)
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
close()
|
||||
})
|
||||
|
||||
const close = () => {
|
||||
store.dispatch(`${space}/${ACTION_TYPES.CLOSE}`)
|
||||
}
|
||||
const changeLoading = (value: boolean) => {
|
||||
loading.value = value
|
||||
}
|
||||
const reload = () => {
|
||||
store.dispatch(`${space}/${ACTION_TYPES.RELOAD}`)
|
||||
}
|
||||
|
||||
return {
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
openSideBar: state => state.TimelineSpace.Contents.SideBar.openSideBar,
|
||||
component: state => state.TimelineSpace.Contents.SideBar.component,
|
||||
backgroundColor: state => state.App.theme.background_color
|
||||
}),
|
||||
shortcutEnabled: function () {
|
||||
return !this.overlaid
|
||||
}
|
||||
},
|
||||
beforeUnmount() {
|
||||
this.close()
|
||||
},
|
||||
methods: {
|
||||
close() {
|
||||
this.$store.dispatch('TimelineSpace/Contents/SideBar/close')
|
||||
},
|
||||
changeLoading(value) {
|
||||
this.loading = value
|
||||
},
|
||||
reload() {
|
||||
this.$store.dispatch('TimelineSpace/Contents/SideBar/reload')
|
||||
},
|
||||
handleKey(event) {
|
||||
switch (event.srcKey) {
|
||||
case 'close':
|
||||
this.close()
|
||||
break
|
||||
}
|
||||
openSideBar,
|
||||
component,
|
||||
backgroundColor,
|
||||
shortcutEnabled,
|
||||
changeLoading,
|
||||
reload
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
@ -60,7 +60,7 @@ export default defineComponent({
|
|||
store.commit(`TimelineSpace/Contents/SideBar/AccountProfile/${PROFILE_MUTATION.CHANGE_LOADING}`, true)
|
||||
try {
|
||||
const followers = await store.dispatch(`${space}/${ACTION_TYPES.FETCH_FOLLOWERS}`, account.value)
|
||||
await store.dispatch(`${space}/${ACTION_TYPES.FETCH_RELATIONSHIPS}`, followers.value)
|
||||
await store.dispatch(`${space}/${ACTION_TYPES.FETCH_RELATIONSHIPS}`, followers)
|
||||
} catch (err) {
|
||||
ElMessage({
|
||||
message: i18n.t('message.followers_fetch_error'),
|
||||
|
|
|
@ -66,7 +66,7 @@ export default defineComponent({
|
|||
store.commit(`TimelineSpace/Contents/SideBar/AccountProfile/${PROFILE_MUTATION.CHANGE_LOADING}`, true)
|
||||
try {
|
||||
const follows = await store.dispatch(`${space}/${ACTION_TYPES.FETCH_FOLLOWS}`, account.value)
|
||||
await store.dispatch(`${space}/${ACTION_TYPES.FETCH_RELATIONSHIPS}`, follows.value)
|
||||
await store.dispatch(`${space}/${ACTION_TYPES.FETCH_RELATIONSHIPS}`, follows)
|
||||
} catch (err) {
|
||||
console.error(err)
|
||||
ElMessage({
|
||||
|
|
|
@ -146,7 +146,7 @@
|
|||
@click="changeBookmark(originalMessage)"
|
||||
:class="originalMessage.bookmarked ? 'bookmarked' : 'bookmark'"
|
||||
type="text"
|
||||
:text="$t('cards.toot.bookmark')"
|
||||
:title="$t('cards.toot.bookmark')"
|
||||
:aria-label="$t('cards.toot.bookmark')"
|
||||
v-if="bookmarkSupported"
|
||||
>
|
||||
|
|
Loading…
Reference in New Issue