Mastodon/Whalebird-desktop-client-mac-linux-windows
1
0
Fork 0
mirror of https://github.com/h3poteto/whalebird-desktop synced 2025-01-19 20:28:49 +01:00
Code Issues Releases Wiki Activity

refs #1035 Add refresh button for sidebar

Browse Source
This commit is contained in:
AkiraFukushima 2019-09-15 22:41:46 +09:00
parent 0579eb337e
commit ed432b56d3
1 changed files with 36 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
src/renderer/components/TimelineSpace/Contents/SideBar.vue
View File

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