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 #1766 Introduce vue-virtual-scroll in Home

This commit is contained in:
AkiraFukushima 2020-10-15 01:01:55 +09:00
parent f752496631
commit 3fbd04bf6c
6 changed files with 50 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -200,6 +200,7 @@
"vue-resize": "^0.5.0",
"vue-router": "^3.4.3",
"vue-shortkey": "^3.1.7",
"vue-virtual-scroller": "^1.0.10",
"vuex": "^3.5.1",
"vuex-router-sync": "^5.0.0"
},

2
src/renderer/components/TimelineSpace.vue
View File

@ -10,7 +10,7 @@
>
<side-menu></side-menu>
<div :class="collapse ? 'page-narrow' : 'page'">
<header class="header" style="-webkit-app-region: drag;">
<header class="header" style="-webkit-app-region: drag">
<header-menu></header-menu>
</header>
<contents></contents>

4
src/renderer/components/TimelineSpace/Contents.vue
View File

@ -49,7 +49,7 @@ export default {
openSideBar: state => state.openSideBar
}),
...mapGetters('TimelineSpace/Modals', ['modalOpened']),
customWidth: function() {
customWidth: function () {
return {
'--current-sidebar-width': `${this.sidebarWidth}px`
}
@ -77,7 +77,7 @@ export default {
#contents {
--current-sidebar-width: 360px;
padding-top: 48px;
padding-top: 49px;
height: 100%;
box-sizing: border-box;
user-select: text;

36
src/renderer/components/TimelineSpace/Contents/Home.vue
View File

@ -2,23 +2,25 @@
<div id="home" v-shortkey="shortcutEnabled ? { next: ['j'] } : {}" @shortkey="handleKey">
<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="home-timeline" v-for="message in filteredTimeline" :key="message.uri + message.id">
<toot
:message="message"
:filter="filter"
:focused="message.uri + message.id === focusedId"
:overlaid="modalOpened"
v-on:update="updateToot"
v-on:delete="deleteToot"
@focusNext="focusNext"
@focusPrev="focusPrev"
@focusRight="focusSidebar"
@selectToot="focusToot(message)"
>
</toot>
</div>
</transition-group>
<DynamicScroller :items="filteredTimeline" :min-item-size="10" class="scroller" page-mode>
<template v-slot="{ item, index, active }">
<DynamicScrollerItem :item="item" :active="active" :size-dependencies="[item.uri]" :data-index="index">
<toot
:message="item"
:filter="filter"
:focused="item.uri + item.id === focusedId"
:overlaid="modalOpened"
v-on:update="updateToot"
v-on:delete="deleteToot"
@focusNext="focusNext"
@focusPrev="focusPrev"
@focusRight="focusSidebar"
@selectToot="focusToot(item)"
>
</toot>
</DynamicScrollerItem>
</template>
</DynamicScroller>
<div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor"></div>
<div :class="openSideBar ? 'upper-with-side-bar' : 'upper'" v-show="!heading">
<el-button type="primary" icon="el-icon-arrow-up" @click="upper" circle> </el-button>

3
src/renderer/main.ts
View File

@ -11,6 +11,8 @@ import shortkey from 'vue-shortkey'
import VueI18Next from '@panter/vue-i18next'
import 'vue-resize/dist/vue-resize.css'
import VueResize from 'vue-resize'
import VueVirtualScroller from 'vue-virtual-scroller'
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
import './assets/fonts/fonts.css'
import App from './App.vue'
@ -22,6 +24,7 @@ Vue.use(ElementUI, { locale })
Vue.use(shortkey)
Vue.use(VueI18Next)
Vue.use(VueResize)
Vue.use(VueVirtualScroller)
Vue.component('icon', Icon)
Vue.component('popper', Popper)

24
yarn.lock
View File

@ -11213,6 +11213,11 @@ schema-utils@^2.6.5, schema-utils@^2.6.6, schema-utils@^2.7.0, schema-utils@^2.7
ajv "^6.12.4"
ajv-keywords "^3.5.2"
scrollparent@^2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/scrollparent/-/scrollparent-2.0.1.tgz#715d5b9cc57760fb22bdccc3befb5bfe06b1a317"
integrity sha1-cV1bnMV3YPsivczDvvtb/gaxoxc=
scss-tokenizer@^0.2.3:
version "0.2.3"
resolved "https://registry.yarnpkg.com/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz#8eb06db9a9723333824d3f5530641149847ce5d1"
@ -13313,6 +13318,11 @@ vue-loader@^15.9.3:
vue-hot-reload-api "^2.3.0"
vue-style-loader "^4.1.0"
vue-observe-visibility@^0.4.4:
version "0.4.6"
resolved "https://registry.yarnpkg.com/vue-observe-visibility/-/vue-observe-visibility-0.4.6.tgz#878cb8ebcf3078e40807af29774e97105ebd519e"
integrity sha512-xo0CEVdkjSjhJoDdLSvoZoQrw/H2BlzB5jrCBKGZNXN2zdZgMuZ9BKrxXDjNP2AxlcCoKc8OahI3F3r3JGLv2Q==
vue-popperjs@^2.3.0:
version "2.3.0"
resolved "https://registry.yarnpkg.com/vue-popperjs/-/vue-popperjs-2.3.0.tgz#9cfa052878a3b47b670339ea81e05edcb863200f"
@ -13321,6 +13331,11 @@ vue-popperjs@^2.3.0:
opencollective-postinstall "^2.0.2"
popper.js "^1.15.0"
vue-resize@^0.4.5:
version "0.4.5"
resolved "https://registry.yarnpkg.com/vue-resize/-/vue-resize-0.4.5.tgz#4777a23042e3c05620d9cbda01c0b3cc5e32dcea"
integrity sha512-bhP7MlgJQ8TIkZJXAfDf78uJO+mEI3CaLABLjv0WNzr4CcGRGPIAItyWYnP6LsPA4Oq0WE+suidNs6dgpO4RHg==
vue-resize@^0.5.0:
version "0.5.0"
resolved "https://registry.yarnpkg.com/vue-resize/-/vue-resize-0.5.0.tgz#f55bb2b721a0ebcdfad8f3c14dfd00e3fd0fd913"
@ -13360,6 +13375,15 @@ vue-template-es2015-compiler@^1.9.0:
resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==
vue-virtual-scroller@^1.0.10:
version "1.0.10"
resolved "https://registry.yarnpkg.com/vue-virtual-scroller/-/vue-virtual-scroller-1.0.10.tgz#fdf243240001f05bd79aa77f2e2e60403760e2fb"
integrity sha512-Hn4qSBDhRY4XdngPioYy/ykDjrLX/NMm1fQXm/4UQQ/Xv1x8JbHGFZNftQowTcfICgN7yc31AKnUk1UGLJ2ndA==
dependencies:
scrollparent "^2.0.1"
vue-observe-visibility "^0.4.4"
vue-resize "^0.4.5"
vue@^2.6.11:
version "2.6.12"
resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.12.tgz#f5ebd4fa6bd2869403e29a896aed4904456c9123"