Mastodon
/
Whalebird-desktop-client-mac-linux-windows
mirror of https://github.com/h3poteto/whalebird-desktop
1
0
Fork 0
Code Issues Releases Wiki Activity

refs #441 Add scroll top button in public

This commit is contained in:
AkiraFukushima 2018-07-19 21:57:54 +09:00
parent 5966a71b8f
commit 66979e1156
1 changed files with 28 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/renderer/components/TimelineSpace/Contents/Public.vue
View File

@ -1,21 +1,26 @@
<template>
<div id="public">
<div class="unread">{{ unread.length > 0 ? unread.length : '' }}</div>
<div v-shortkey="{linux: ['ctrl', 'r'], mac: ['meta', 'r']}" @shortkey="reload()">
</div>
<transition-group name="timeline" tag="div">
<div class="public-timeline" v-for="message in timeline" v-bind:key="message.id">
<toot :message="message" :filter="filter" v-on:update="updateToot" v-on:delete="deleteToot"></toot>
</div>
</transition-group>
<div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor">
</div>
<div id="public">
<div class="unread">{{ unread.length > 0 ? unread.length : '' }}</div>
<div v-shortkey="{linux: ['ctrl', 'r'], mac: ['meta', 'r']}" @shortkey="reload()">
</div>
<transition-group name="timeline" tag="div">
<div class="public-timeline" v-for="message in timeline" v-bind:key="message.id">
<toot :message="message" :filter="filter" v-on:update="updateToot" v-on:delete="deleteToot"></toot>
</div>
</transition-group>
<div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor">
</div>
<div class="upper" v-show="!heading">
<el-button type="primary" icon="el-icon-arrow-up" @click="upper" circle>
</el-button>
</div>
</div>
</template>
<script>
import { mapState } from 'vuex'
import Toot from './Cards/Toot'
import scrollTop from '../../utils/scroll'
export default {
name: 'public',
@ -140,6 +145,12 @@ export default {
} finally {
this.$store.commit('TimelineSpace/changeLoading', false)
}
},
upper () {
scrollTop(
document.getElementById('scrollable'),
0
)
}
}
}
@ -168,6 +179,12 @@ export default {
.loading-card:empty {
height: 0;
}
.upper {
position: fixed;
bottom: 20px;
right: 20px;
}
}
</style>
<style src="@/assets/timeline-transition.scss"></style>