2018-03-29 15:41:28 +02:00
|
|
|
<template>
|
2018-04-13 11:01:19 +02:00
|
|
|
<transition name="slide-detail">
|
2018-04-18 01:18:50 +02:00
|
|
|
<div id="side_bar" v-if="openSideBar">
|
2018-04-13 11:01:19 +02:00
|
|
|
<div class="header">
|
2018-05-04 06:37:54 +02:00
|
|
|
<i class="el-icon-loading" v-show="loading"></i>
|
2018-04-13 11:01:19 +02:00
|
|
|
<i class="el-icon-close" @click="close"></i>
|
|
|
|
</div>
|
2018-05-04 06:37:54 +02:00
|
|
|
<div class="scrollable">
|
|
|
|
<account-profile v-if="component === 1" v-on:change-loading="changeLoading"></account-profile>
|
|
|
|
<toot-detail v-if="component === 2"></toot-detail>
|
|
|
|
</div>
|
2018-03-29 15:41:28 +02:00
|
|
|
</div>
|
2018-04-13 11:01:19 +02:00
|
|
|
</transition>
|
2018-03-29 15:41:28 +02:00
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import { mapState } from 'vuex'
|
2018-04-10 10:10:40 +02:00
|
|
|
import TootDetail from './SideBar/TootDetail'
|
2018-03-30 09:48:32 +02:00
|
|
|
import AccountProfile from './SideBar/AccountProfile'
|
2018-03-29 15:41:28 +02:00
|
|
|
|
|
|
|
export default {
|
|
|
|
name: 'side-bar',
|
2018-03-30 09:48:32 +02:00
|
|
|
components: {
|
2018-04-10 10:10:40 +02:00
|
|
|
TootDetail,
|
2018-03-30 09:48:32 +02:00
|
|
|
AccountProfile
|
|
|
|
},
|
2018-05-04 06:37:54 +02:00
|
|
|
data () {
|
|
|
|
return {
|
|
|
|
loading: false
|
|
|
|
}
|
|
|
|
},
|
2018-03-29 15:41:28 +02:00
|
|
|
computed: {
|
|
|
|
...mapState({
|
2018-03-30 09:48:32 +02:00
|
|
|
openSideBar: state => state.TimelineSpace.Contents.SideBar.openSideBar,
|
2018-04-18 01:18:50 +02:00
|
|
|
component: state => state.TimelineSpace.Contents.SideBar.component
|
2018-03-29 15:41:28 +02:00
|
|
|
})
|
|
|
|
},
|
2018-04-17 02:15:55 +02:00
|
|
|
beforeDestroy () {
|
|
|
|
this.close()
|
|
|
|
},
|
2018-03-29 15:41:28 +02:00
|
|
|
methods: {
|
|
|
|
close () {
|
2018-03-29 17:20:15 +02:00
|
|
|
this.$store.dispatch('TimelineSpace/Contents/SideBar/close')
|
2018-05-04 06:37:54 +02:00
|
|
|
},
|
|
|
|
changeLoading (value) {
|
|
|
|
this.loading = value
|
2018-03-29 15:41:28 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
#side_bar {
|
|
|
|
position: fixed;
|
|
|
|
top: 48px;
|
|
|
|
right: 0;
|
2018-03-30 09:48:32 +02:00
|
|
|
width: 320px;
|
|
|
|
height: calc(100% - 48px);
|
2018-04-13 16:31:54 +02:00
|
|
|
border-left: solid 1px var(--theme-border-color);
|
2018-03-30 09:48:32 +02:00
|
|
|
|
|
|
|
.header {
|
2018-04-18 01:18:50 +02:00
|
|
|
background-color: var(--theme-selected-background-color);
|
2018-03-30 09:48:32 +02:00
|
|
|
padding: 4px 8px;
|
2018-04-13 16:31:54 +02:00
|
|
|
border-top: solid 1px var(--theme-border-color);
|
|
|
|
border-bottom: solid 1px var(--theme-border-color);
|
2018-03-30 09:48:32 +02:00
|
|
|
text-align: right;
|
2018-05-04 06:37:54 +02:00
|
|
|
height: 30px;
|
|
|
|
box-sizing: border-box;
|
2018-03-30 09:58:48 +02:00
|
|
|
|
|
|
|
.el-icon-close {
|
|
|
|
cursor: pointer;
|
|
|
|
}
|
2018-03-30 09:48:32 +02:00
|
|
|
}
|
2018-05-04 06:37:54 +02:00
|
|
|
|
|
|
|
.scrollable {
|
|
|
|
overflow: auto;
|
|
|
|
height: calc(100% - 30px);
|
|
|
|
}
|
2018-03-29 15:41:28 +02:00
|
|
|
}
|
2018-04-13 11:01:19 +02:00
|
|
|
|
|
|
|
.slide-detail-enter-active, .slide-detail-leave-active {
|
|
|
|
transition: all 0.5s;
|
|
|
|
}
|
|
|
|
.slide-detail-enter, .slide-detail-leave-to {
|
|
|
|
margin-right: -320px;
|
|
|
|
opacity: 0;
|
|
|
|
}
|
2018-03-29 15:41:28 +02:00
|
|
|
</style>
|