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