Troplo/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

update vue, try to use vue virtual scroller, not great

Browse source
This commit is contained in:
Shpuld Shpuldson 2020-01-15 11:54:12 +02:00
parent 7397636914
commit 8c9b7bf533
14 changed files with 84 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
package.json
View file

@ -29,11 +29,12 @@
"sanitize-html": "^1.13.0", "sanitize-html": "^1.13.0",
"v-click-outside": "^2.1.1", "v-click-outside": "^2.1.1",
"v-tooltip": "^2.0.2", "v-tooltip": "^2.0.2",
"vue": "^2.5.13", "vue": "^2.6.11",
"vue-chat-scroll": "^1.2.1", "vue-chat-scroll": "^1.2.1",
"vue-i18n": "^7.3.2", "vue-i18n": "^7.3.2",
"vue-router": "^3.0.1", "vue-router": "^3.0.1",
"vue-template-compiler": "^2.3.4", "vue-template-compiler": "^2.3.4",
"vue-virtual-scroller": "^1.0.0-rc.2",
"vuelidate": "^0.7.4", "vuelidate": "^0.7.4",
"vuex": "^3.0.1", "vuex": "^3.0.1",
"whatwg-fetch": "^2.0.3" "whatwg-fetch": "^2.0.3"

4
src/components/account_actions/account_actions.vue
View file

@ -7,7 +7,7 @@
placement="bottom-end" placement="bottom-end"
:offset="5" :offset="5"
> >
<div slot="popover"> <template v-slot:popover>
<div class="dropdown-menu"> <div class="dropdown-menu">
<template v-if="user.following"> <template v-if="user.following">
<button <button
@ -50,7 +50,7 @@
{{ $t('user_card.report') }} {{ $t('user_card.report') }}
</button> </button>
</div> </div>
</div> </template>
<div class="btn btn-default ellipsis-button"> <div class="btn btn-default ellipsis-button">
<i class="icon-ellipsis trigger-button" /> <i class="icon-ellipsis trigger-button" />
</div> </div>

4
src/components/extra_buttons/extra_buttons.vue
View file

@ -5,7 +5,7 @@
placement="top" placement="top"
class="extra-button-popover" class="extra-button-popover"
> >
<div slot="popover"> <template v-slot:popover>
<div class="dropdown-menu"> <div class="dropdown-menu">
<button <button
v-if="canMute && !status.thread_muted" v-if="canMute && !status.thread_muted"
@ -46,7 +46,7 @@
<i class="icon-cancel" /><span>{{ $t("status.delete") }}</span> <i class="icon-cancel" /><span>{{ $t("status.delete") }}</span>
</button> </button>
</div> </div>
</div> </template>
<div class="button-icon"> <div class="button-icon">
<i class="icon-ellipsis" /> <i class="icon-ellipsis" />
</div> </div>

8
src/components/moderation_tools/moderation_tools.vue
View file

@ -7,7 +7,7 @@
@show="showDropDown = true" @show="showDropDown = true"
@hide="showDropDown = false" @hide="showDropDown = false"
> >
<div slot="popover"> <template v-slot:popover>
<div class="dropdown-menu"> <div class="dropdown-menu">
<span v-if="user.is_local"> <span v-if="user.is_local">
<button <button
@ -120,7 +120,7 @@
</button> </button>
</span> </span>
</div> </div>
</div> </template>
<button <button
class="btn btn-default btn-block" class="btn btn-default btn-block"
:class="{ pressed: showDropDown }" :class="{ pressed: showDropDown }"
@ -133,11 +133,11 @@
v-if="showDeleteUserDialog" v-if="showDeleteUserDialog"
:on-cancel="deleteUserDialog.bind(this, false)" :on-cancel="deleteUserDialog.bind(this, false)"
> >
<template slot="header"> <template v-slot:header>
{{ $t('user_card.admin_menu.delete_user') }} {{ $t('user_card.admin_menu.delete_user') }}
</template> </template>
<p>{{ $t('user_card.admin_menu.delete_user_confirmation') }}</p> <p>{{ $t('user_card.admin_menu.delete_user_confirmation') }}</p>
<template slot="footer"> <template v-slot:footer>
<button <button
class="btn btn-default" class="btn btn-default"
@click="deleteUserDialog(false)" @click="deleteUserDialog(false)"

5
src/components/selectable_list/selectable_list.vue
View file

@ -25,8 +25,7 @@
:get-key="getKey" :get-key="getKey"
> >
<template <template
slot="item" v-slot:item="{item}"
slot-scope="{item}"
> >
<div <div
class="selectable-list-item-inner" class="selectable-list-item-inner"
@ -44,7 +43,7 @@
/> />
</div> </div>
</template> </template>
<template slot="empty"> <template v-slot:empty>
<slot name="empty" /> <slot name="empty" />
</template> </template>
</List> </List>

2
src/components/status_popover/status_popover.vue
View file

@ -5,7 +5,7 @@
:popper-options="popperOptions" :popper-options="popperOptions"
@show="enter()" @show="enter()"
> >
<template slot="popover"> <template v-slot:popover>
<Status <Status
v-if="status" v-if="status"
:is-preview="true" :is-preview="true"

2
src/components/style_switcher/style_switcher.vue
View file

@ -10,7 +10,7 @@
:on-import="onImport" :on-import="onImport"
:validator="importValidator" :validator="importValidator"
> >
<template slot="before"> <template v-slot:before>
<div class="presets"> <div class="presets">
{{ $t('settings.presets') }} {{ $t('settings.presets') }}
<label <label

1
src/components/timeline/timeline.js
View file

@ -136,6 +136,7 @@ const Timeline = {
userId: this.userId, userId: this.userId,
tag: this.tag tag: this.tag
}).then(statuses => { }).then(statuses => {
console.log(this.timeline.visibleStatuses)
store.commit('setLoading', { timeline: this.timelineName, value: false }) store.commit('setLoading', { timeline: this.timelineName, value: false })
if (statuses && statuses.length === 0) { if (statuses && statuses.length === 0) {
this.bottomedOut = true this.bottomedOut = true

35
src/components/timeline/timeline.vue
View file

@ -47,17 +47,30 @@
:profile-user-id="userId" :profile-user-id="userId"
/> />
</template> </template>
<template v-for="status in timeline.visibleStatuses"> <DynamicScroller
<conversation :items="timeline.visibleStatuses"
v-if="!excludedStatusIdsObject[status.id]" :min-item-size="115"
:key="status.id" page-mode
class="status-fadein" class="scroller"
:status-id="status.id" >
:collapsable="true" <template v-slot="{ item, index, active }">
:in-profile="inProfile" <DynamicScrollerItem
:profile-user-id="userId" v-if="!excludedStatusIdsObject[item.id]"
/> :item="item"
</template> :active="active"
:data-index="index"
:size-dependencies="[item.id]"
>
<conversation
class="status-fadein"
:status-id="item.id"
:collapsable="true"
:in-profile="inProfile"
:profile-user-id="userId"
/>
</DynamicScrollerItem>
</template>
</DynamicScroller>
</div> </div>
</div> </div>
<div :class="classes.footer"> <div :class="classes.footer">

6
src/components/user_profile/user_profile.vue
View file

@ -36,8 +36,7 @@
> >
<FriendList :user-id="userId"> <FriendList :user-id="userId">
<template <template
slot="item" v-slot:item="{item}"
slot-scope="{item}"
> >
<FollowCard :user="item" /> <FollowCard :user="item" />
</template> </template>
@ -51,8 +50,7 @@
> >
<FollowerList :user-id="userId"> <FollowerList :user-id="userId">
<template <template
slot="item" v-slot:item="{item}"
slot-scope="{item}"
> >
<FollowCard <FollowCard
:user="item" :user="item"

3
src/components/user_reporting_modal/user_reporting_modal.vue
View file

@ -46,8 +46,7 @@
<div class="user-reporting-panel-right"> <div class="user-reporting-panel-right">
<List :items="statuses"> <List :items="statuses">
<template <template
slot="item" v-slot:item="{item}"
slot-scope="{item}"
> >
<div class="status-fadein user-reporting-panel-sitem"> <div class="status-fadein user-reporting-panel-sitem">
<Status <Status

28
src/components/user_settings/user_settings.vue
View file

@ -460,7 +460,7 @@
:placeholder="$t('settings.search_user_to_block')" :placeholder="$t('settings.search_user_to_block')"
> >
<BlockCard <BlockCard
slot-scope="row" v-slot="row"
:user-id="row.item" :user-id="row.item"
/> />
</Autosuggest> </Autosuggest>
@ -470,8 +470,7 @@
:get-key="identity" :get-key="identity"
> >
<template <template
slot="header" v-slot:header="{selected}"
slot-scope="{selected}"
> >
<div class="profile-edit-bulk-actions"> <div class="profile-edit-bulk-actions">
<ProgressButton <ProgressButton
@ -480,7 +479,7 @@
:click="() => blockUsers(selected)" :click="() => blockUsers(selected)"
> >
{{ $t('user_card.block') }} {{ $t('user_card.block') }}
<template slot="progress"> <template v-slot:progress>
{{ $t('user_card.block_progress') }} {{ $t('user_card.block_progress') }}
</template> </template>
</ProgressButton> </ProgressButton>
@ -490,19 +489,18 @@
:click="() => unblockUsers(selected)" :click="() => unblockUsers(selected)"
> >
{{ $t('user_card.unblock') }} {{ $t('user_card.unblock') }}
<template slot="progress"> <template v-slot:progress>
{{ $t('user_card.unblock_progress') }} {{ $t('user_card.unblock_progress') }}
</template> </template>
</ProgressButton> </ProgressButton>
</div> </div>
</template> </template>
<template <template
slot="item" v-slot:item="{item}"
slot-scope="{item}"
> >
<BlockCard :user-id="item" /> <BlockCard :user-id="item" />
</template> </template>
<template slot="empty"> <template v-slot:empty>
{{ $t('settings.no_blocks') }} {{ $t('settings.no_blocks') }}
</template> </template>
</BlockList> </BlockList>
@ -516,7 +514,7 @@
:placeholder="$t('settings.search_user_to_mute')" :placeholder="$t('settings.search_user_to_mute')"
> >
<MuteCard <MuteCard
slot-scope="row" v-slot="row"
:user-id="row.item" :user-id="row.item"
/> />
</Autosuggest> </Autosuggest>
@ -526,8 +524,7 @@
:get-key="identity" :get-key="identity"
> >
<template <template
slot="header" v-slot:header="{selected}"
slot-scope="{selected}"
> >
<div class="profile-edit-bulk-actions"> <div class="profile-edit-bulk-actions">
<ProgressButton <ProgressButton
@ -536,7 +533,7 @@
:click="() => muteUsers(selected)" :click="() => muteUsers(selected)"
> >
{{ $t('user_card.mute') }} {{ $t('user_card.mute') }}
<template slot="progress"> <template v-slot:progress>
{{ $t('user_card.mute_progress') }} {{ $t('user_card.mute_progress') }}
</template> </template>
</ProgressButton> </ProgressButton>
@ -546,19 +543,18 @@
:click="() => unmuteUsers(selected)" :click="() => unmuteUsers(selected)"
> >
{{ $t('user_card.unmute') }} {{ $t('user_card.unmute') }}
<template slot="progress"> <template v-slot:progress>
{{ $t('user_card.unmute_progress') }} {{ $t('user_card.unmute_progress') }}
</template> </template>
</ProgressButton> </ProgressButton>
</div> </div>
</template> </template>
<template <template
slot="item" v-slot:item="{item}"
slot-scope="{item}"
> >
<MuteCard :user-id="item" /> <MuteCard :user-id="item" />
</template> </template>
<template slot="empty"> <template v-slot:empty>
{{ $t('settings.no_mutes') }} {{ $t('settings.no_mutes') }}
</template> </template>
</MuteList> </MuteList>

3
src/main.js
View file

@ -29,6 +29,8 @@ import VueClickOutside from 'v-click-outside'
import PortalVue from 'portal-vue' import PortalVue from 'portal-vue'
import VBodyScrollLock from './directives/body_scroll_lock' import VBodyScrollLock from './directives/body_scroll_lock'
import VTooltip from 'v-tooltip' import VTooltip from 'v-tooltip'
import VueVirtualScroller from 'vue-virtual-scroller'
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
import afterStoreSetup from './boot/after_store.js' import afterStoreSetup from './boot/after_store.js'
@ -41,6 +43,7 @@ Vue.use(VueChatScroll)
Vue.use(VueClickOutside) Vue.use(VueClickOutside)
Vue.use(PortalVue) Vue.use(PortalVue)
Vue.use(VBodyScrollLock) Vue.use(VBodyScrollLock)
Vue.use(VueVirtualScroller)
Vue.use(VTooltip, { Vue.use(VTooltip, {
popover: { popover: {
defaultTrigger: 'hover click', defaultTrigger: 'hover click',

32
yarn.lock
View file

@ -2317,6 +2317,7 @@ dateformat@^1.0.6:
de-indent@^1.0.2: de-indent@^1.0.2:
version "1.0.2" version "1.0.2"
resolved "https://registry.yarnpkg.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d" resolved "https://registry.yarnpkg.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"
integrity sha1-sgOOhG3DO6pXlhKNCAS0VbjB4h0=
debug@2, debug@2.6.9, debug@^2.1.2, debug@^2.2.0, debug@^2.3.3, debug@^2.6.8, debug@^2.6.9: debug@2, debug@2.6.9, debug@^2.1.2, debug@^2.2.0, debug@^2.3.3, debug@^2.6.8, debug@^2.6.9:
version "2.6.9" version "2.6.9"
@ -6876,6 +6877,11 @@ schema-utils@^1.0.0:
ajv-errors "^1.0.0" ajv-errors "^1.0.0"
ajv-keywords "^3.1.0" ajv-keywords "^3.1.0"
scrollparent@^2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/scrollparent/-/scrollparent-2.0.1.tgz#715d5b9cc57760fb22bdccc3befb5bfe06b1a317"
integrity sha1-cV1bnMV3YPsivczDvvtb/gaxoxc=
selenium-server@2.53.1: selenium-server@2.53.1:
version "2.53.1" version "2.53.1"
resolved "https://registry.yarnpkg.com/selenium-server/-/selenium-server-2.53.1.tgz#d681528812f3c2e0531a6b7e613e23bb02cce8a6" resolved "https://registry.yarnpkg.com/selenium-server/-/selenium-server-2.53.1.tgz#d681528812f3c2e0531a6b7e613e23bb02cce8a6"
@ -7895,6 +7901,11 @@ vue-loader@^14.0.0:
vue-style-loader "^4.0.1" vue-style-loader "^4.0.1"
vue-template-es2015-compiler "^1.6.0" vue-template-es2015-compiler "^1.6.0"
vue-observe-visibility@^0.4.3:
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-resize@^0.4.5: vue-resize@^0.4.5:
version "0.4.5" version "0.4.5"
resolved "https://registry.yarnpkg.com/vue-resize/-/vue-resize-0.4.5.tgz#4777a23042e3c05620d9cbda01c0b3cc5e32dcea" resolved "https://registry.yarnpkg.com/vue-resize/-/vue-resize-0.4.5.tgz#4777a23042e3c05620d9cbda01c0b3cc5e32dcea"
@ -7912,8 +7923,9 @@ vue-style-loader@^4.0.0, vue-style-loader@^4.0.1:
loader-utils "^1.0.2" loader-utils "^1.0.2"
vue-template-compiler@^2.3.4: vue-template-compiler@^2.3.4:
version "2.5.21" version "2.6.11"
resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.5.21.tgz#a57ceb903177e8f643560a8d639a0f8db647054a" resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.6.11.tgz#c04704ef8f498b153130018993e56309d4698080"
integrity sha512-KIq15bvQDrcCjpGjrAhx4mUlyyHfdmTaoNfeoATHLAiWB+MU3cx4lOzMwrnUh9cCxy0Lt1T11hAFY6TQgroUAA==
dependencies: dependencies:
de-indent "^1.0.2" de-indent "^1.0.2"
he "^1.1.0" he "^1.1.0"
@ -7922,9 +7934,19 @@ vue-template-es2015-compiler@^1.6.0:
version "1.9.1" version "1.9.1"
resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825" resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
vue@^2.5.13: vue-virtual-scroller@^1.0.0-rc.2:
version "2.5.21" version "1.0.0-rc.2"
resolved "https://registry.yarnpkg.com/vue/-/vue-2.5.21.tgz#3d33dcd03bb813912ce894a8303ab553699c4a85" resolved "https://registry.yarnpkg.com/vue-virtual-scroller/-/vue-virtual-scroller-1.0.0-rc.2.tgz#b03828496c87889641bdacc75510e5b1bf5bda7f"
integrity sha512-4YFx1a+QDP4f6HW/HBI/qHcmSTlh7BMH6IjEH8WC3ylt499cErl0LpvLLAx9yo3c6NtuK/XvjYXi0vvdxFB5dw==
dependencies:
scrollparent "^2.0.1"
vue-observe-visibility "^0.4.3"
vue-resize "^0.4.5"
vue@^2.6.11:
version "2.6.11"
resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.11.tgz#76594d877d4b12234406e84e35275c6d514125c5"
integrity sha512-VfPwgcGABbGAue9+sfrD4PuwFar7gPb1yl1UK1MwXoQPAw0BKSqWfoYCT/ThFrdEVWoI51dBuyCoiNU9bZDZxQ==
vuelidate@^0.7.4: vuelidate@^0.7.4:
version "0.7.4" version "0.7.4"