refs #1035 Add refresh button for sidebar
This commit is contained in:
parent
0579eb337e
commit
ed432b56d3
|
@ -1,24 +1,25 @@
|
||||||
<template>
|
<template>
|
||||||
<transition name="slide-detail">
|
<transition name="slide-detail">
|
||||||
<div id="side_bar" v-if="openSideBar" v-shortkey="shortcutEnabled ? {close: ['esc']} : {}" @shortkey="handleKey">
|
<div id="side_bar" v-if="openSideBar" v-shortkey="shortcutEnabled ? { close: ['esc'] } : {}" @shortkey="handleKey">
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<i class="el-icon-loading" v-show="loading"></i>
|
<i class="el-icon-loading" v-show="loading"></i>
|
||||||
<i class="el-icon-close" @click="close"></i>
|
<i class="el-icon-refresh" @click="refresh"></i>
|
||||||
</div>
|
<i class="el-icon-close" @click="close"></i>
|
||||||
<div id="sidebar_scrollable">
|
</div>
|
||||||
<account-profile v-if="component === 1" v-on:change-loading="changeLoading"></account-profile>
|
<div id="sidebar_scrollable">
|
||||||
<toot-detail v-else-if="component === 2"></toot-detail>
|
<account-profile v-if="component === 1" v-on:change-loading="changeLoading"></account-profile>
|
||||||
<div
|
<toot-detail v-else-if="component === 2"></toot-detail>
|
||||||
class="loading"
|
<div
|
||||||
v-loading="true"
|
class="loading"
|
||||||
:element-loading-text="$t('message.loading')"
|
v-loading="true"
|
||||||
element-loading-spinner="el-icon-loading"
|
:element-loading-text="$t('message.loading')"
|
||||||
:element-loading-background="backgroundColor"
|
element-loading-spinner="el-icon-loading"
|
||||||
v-else>
|
:element-loading-background="backgroundColor"
|
||||||
|
v-else
|
||||||
|
></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</transition>
|
||||||
</transition>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
@ -38,7 +39,7 @@ export default {
|
||||||
default: false
|
default: false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data () {
|
data() {
|
||||||
return {
|
return {
|
||||||
loading: false
|
loading: false
|
||||||
}
|
}
|
||||||
|
@ -49,21 +50,22 @@ export default {
|
||||||
component: state => state.TimelineSpace.Contents.SideBar.component,
|
component: state => state.TimelineSpace.Contents.SideBar.component,
|
||||||
backgroundColor: state => state.App.theme.background_color
|
backgroundColor: state => state.App.theme.background_color
|
||||||
}),
|
}),
|
||||||
shortcutEnabled: function () {
|
shortcutEnabled: function() {
|
||||||
return !this.overlaid
|
return !this.overlaid
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
beforeDestroy () {
|
beforeDestroy() {
|
||||||
this.close()
|
this.close()
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
close () {
|
close() {
|
||||||
this.$store.dispatch('TimelineSpace/Contents/SideBar/close')
|
this.$store.dispatch('TimelineSpace/Contents/SideBar/close')
|
||||||
},
|
},
|
||||||
changeLoading (value) {
|
changeLoading(value) {
|
||||||
this.loading = value
|
this.loading = value
|
||||||
},
|
},
|
||||||
handleKey (event) {
|
refresh() {},
|
||||||
|
handleKey(event) {
|
||||||
switch (event.srcKey) {
|
switch (event.srcKey) {
|
||||||
case 'close':
|
case 'close':
|
||||||
this.close()
|
this.close()
|
||||||
|
@ -89,12 +91,17 @@ export default {
|
||||||
border-top: solid 1px var(--theme-border-color);
|
border-top: solid 1px var(--theme-border-color);
|
||||||
border-bottom: solid 1px var(--theme-border-color);
|
border-bottom: solid 1px var(--theme-border-color);
|
||||||
text-align: right;
|
text-align: right;
|
||||||
height: 30px;
|
height: 36px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
font-size: 18px;
|
||||||
|
|
||||||
.el-icon-close {
|
.el-icon-close {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.el-icon-refresh {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#sidebar_scrollable {
|
#sidebar_scrollable {
|
||||||
|
@ -107,10 +114,12 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.slide-detail-enter-active, .slide-detail-leave-active {
|
.slide-detail-enter-active,
|
||||||
|
.slide-detail-leave-active {
|
||||||
transition: all 0.5s;
|
transition: all 0.5s;
|
||||||
}
|
}
|
||||||
.slide-detail-enter, .slide-detail-leave-to {
|
.slide-detail-enter,
|
||||||
|
.slide-detail-leave-to {
|
||||||
margin-right: -360px;
|
margin-right: -360px;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue