2018-04-09 01:43:11 +02:00
|
|
|
<template>
|
2022-04-18 15:41:52 +02:00
|
|
|
<div
|
|
|
|
name="list"
|
|
|
|
class="list-timeline"
|
|
|
|
v-shortkey="shortcutEnabled ? { next: ['j'] } : {}"
|
|
|
|
@shortkey="handleKey"
|
|
|
|
>
|
|
|
|
<div
|
|
|
|
v-shortkey="{ linux: ['ctrl', 'r'], mac: ['meta', 'r'] }"
|
|
|
|
@shortkey="reload()"
|
|
|
|
></div>
|
|
|
|
<DynamicScroller
|
|
|
|
:items="timeline"
|
|
|
|
:min-item-size="86"
|
|
|
|
id="scroller"
|
|
|
|
class="scroller"
|
|
|
|
ref="scroller"
|
|
|
|
>
|
2020-10-19 18:04:23 +02:00
|
|
|
<template v-slot="{ item, index, active }">
|
2022-04-18 15:41:52 +02:00
|
|
|
<DynamicScrollerItem
|
|
|
|
:item="item"
|
|
|
|
:active="active"
|
|
|
|
:size-dependencies="[item.uri]"
|
|
|
|
:data-index="index"
|
|
|
|
:watchData="true"
|
|
|
|
>
|
2020-10-19 18:04:23 +02:00
|
|
|
<toot
|
|
|
|
:message="item"
|
|
|
|
:focused="item.uri + item.id === focusedId"
|
|
|
|
:overlaid="modalOpened"
|
2021-07-23 15:16:27 +02:00
|
|
|
:filters="[]"
|
2020-10-19 18:04:23 +02:00
|
|
|
v-on:update="updateToot"
|
|
|
|
v-on:delete="deleteToot"
|
|
|
|
@focusNext="focusNext"
|
|
|
|
@focusPrev="focusPrev"
|
|
|
|
@focusRight="focusSidebar"
|
|
|
|
@selectToot="focusToot(item)"
|
2021-10-23 15:02:11 +02:00
|
|
|
@sizeChanged="sizeChanged"
|
2020-10-19 18:04:23 +02:00
|
|
|
>
|
|
|
|
</toot>
|
|
|
|
</DynamicScrollerItem>
|
|
|
|
</template>
|
|
|
|
</DynamicScroller>
|
2022-04-18 15:41:52 +02:00
|
|
|
<div
|
|
|
|
:class="openSideBar ? 'upper-with-side-bar' : 'upper'"
|
|
|
|
v-show="!heading"
|
|
|
|
>
|
|
|
|
<el-button type="primary" :icon="ElIconArrowUp" @click="upper" circle>
|
|
|
|
</el-button>
|
2018-04-23 12:03:47 +02:00
|
|
|
</div>
|
2018-07-19 15:05:21 +02:00
|
|
|
</div>
|
2018-04-09 01:43:11 +02:00
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
2022-04-18 15:41:52 +02:00
|
|
|
import { ArrowUp as ElIconArrowUp } from '@element-plus/icons'
|
2018-08-23 17:14:37 +02:00
|
|
|
import { mapState, mapGetters } from 'vuex'
|
2021-08-28 17:41:07 +02:00
|
|
|
import moment from 'moment'
|
2019-07-14 11:55:38 +02:00
|
|
|
import Toot from '~/src/renderer/components/organisms/Toot'
|
2018-11-04 06:33:47 +01:00
|
|
|
import reloadable from '~/src/renderer/components/mixins/reloadable'
|
2018-11-28 15:03:07 +01:00
|
|
|
import { Event } from '~/src/renderer/components/event'
|
2021-07-25 16:31:32 +02:00
|
|
|
import { ScrollPosition } from '~/src/renderer/components/utils/scroll'
|
2018-04-09 14:10:25 +02:00
|
|
|
|
2018-04-09 01:43:11 +02:00
|
|
|
export default {
|
2019-05-16 16:43:32 +02:00
|
|
|
data() {
|
2018-08-21 16:52:00 +02:00
|
|
|
return {
|
2021-07-25 16:31:32 +02:00
|
|
|
focusedId: null,
|
2021-08-28 17:41:07 +02:00
|
|
|
scrollPosition: null,
|
|
|
|
observer: null,
|
|
|
|
scrollTime: null,
|
2022-04-18 15:41:52 +02:00
|
|
|
resizeTime: null,
|
|
|
|
ElIconArrowUp,
|
2018-08-21 16:52:00 +02:00
|
|
|
}
|
|
|
|
},
|
2022-04-18 15:41:52 +02:00
|
|
|
name: 'list',
|
|
|
|
props: ['list_id'],
|
|
|
|
components: { Toot },
|
|
|
|
mixins: [reloadable],
|
2018-04-09 14:10:25 +02:00
|
|
|
computed: {
|
|
|
|
...mapState({
|
2022-04-18 15:41:52 +02:00
|
|
|
openSideBar: (state) => state.TimelineSpace.Contents.SideBar.openSideBar,
|
|
|
|
backgroundColor: (state) => state.App.theme.background_color,
|
|
|
|
startReload: (state) => state.TimelineSpace.HeaderMenu.reload,
|
|
|
|
timeline: (state) => state.TimelineSpace.Contents.Lists.Show.timeline,
|
|
|
|
lazyLoading: (state) =>
|
|
|
|
state.TimelineSpace.Contents.Lists.Show.lazyLoading,
|
|
|
|
heading: (state) => state.TimelineSpace.Contents.Lists.Show.heading,
|
|
|
|
scrolling: (state) => state.TimelineSpace.Contents.Lists.Show.scrolling,
|
2018-08-23 17:14:37 +02:00
|
|
|
}),
|
2019-05-16 16:43:32 +02:00
|
|
|
...mapGetters('TimelineSpace/Modals', ['modalOpened']),
|
2020-08-20 15:38:30 +02:00
|
|
|
shortcutEnabled: function () {
|
2018-09-13 16:03:47 +02:00
|
|
|
if (this.modalOpened) {
|
|
|
|
return false
|
|
|
|
}
|
|
|
|
if (!this.focusedId) {
|
|
|
|
return true
|
|
|
|
}
|
|
|
|
// Sometimes toots are deleted, so perhaps focused toot don't exist.
|
2022-04-18 15:41:52 +02:00
|
|
|
const currentIndex = this.timeline.findIndex(
|
|
|
|
(toot) => this.focusedId === toot.uri + toot.id
|
|
|
|
)
|
2018-09-13 16:03:47 +02:00
|
|
|
return currentIndex === -1
|
2022-04-18 15:41:52 +02:00
|
|
|
},
|
2018-04-09 14:10:25 +02:00
|
|
|
},
|
2019-05-16 16:43:32 +02:00
|
|
|
created() {
|
|
|
|
this.$store.commit('TimelineSpace/Contents/changeLoading', true)
|
|
|
|
this.load().finally(() => {
|
|
|
|
this.$store.commit('TimelineSpace/Contents/changeLoading', false)
|
|
|
|
})
|
2018-04-09 14:10:25 +02:00
|
|
|
},
|
2019-05-16 16:43:32 +02:00
|
|
|
mounted() {
|
2022-04-18 15:41:52 +02:00
|
|
|
document
|
|
|
|
.getElementById('scroller')
|
|
|
|
.addEventListener('scroll', this.onScroll)
|
2018-11-28 15:03:07 +01:00
|
|
|
Event.$on('focus-timeline', () => {
|
|
|
|
// If focusedId does not change, we have to refresh focusedId because Toot component watch change events.
|
|
|
|
const previousFocusedId = this.focusedId
|
|
|
|
this.focusedId = 0
|
2020-08-20 15:38:30 +02:00
|
|
|
this.$nextTick(function () {
|
2018-11-28 15:03:07 +01:00
|
|
|
this.focusedId = previousFocusedId
|
|
|
|
})
|
|
|
|
})
|
2021-07-25 16:31:32 +02:00
|
|
|
const el = document.getElementById('scroller')
|
2021-08-28 17:41:07 +02:00
|
|
|
this.scrollPosition = new ScrollPosition(el)
|
|
|
|
this.scrollPosition.prepare()
|
2021-08-26 15:22:52 +02:00
|
|
|
|
|
|
|
this.observer = new ResizeObserver(() => {
|
2022-04-18 15:41:52 +02:00
|
|
|
if (
|
|
|
|
this.scrollPosition &&
|
|
|
|
!this.heading &&
|
|
|
|
!this.lazyLoading &&
|
|
|
|
!this.scrolling
|
|
|
|
) {
|
2021-08-28 17:41:07 +02:00
|
|
|
this.resizeTime = moment()
|
|
|
|
this.scrollPosition.restore()
|
2021-08-26 15:22:52 +02:00
|
|
|
}
|
|
|
|
})
|
|
|
|
|
2022-04-18 15:41:52 +02:00
|
|
|
const scrollWrapper = el.getElementsByClassName(
|
|
|
|
'vue-recycle-scroller__item-wrapper'
|
|
|
|
)[0]
|
2021-08-26 15:22:52 +02:00
|
|
|
this.observer.observe(scrollWrapper)
|
2021-07-25 16:31:32 +02:00
|
|
|
},
|
|
|
|
beforeUpdate() {
|
2021-08-28 17:41:07 +02:00
|
|
|
if (this.scrollPosition) {
|
|
|
|
this.scrollPosition.prepare()
|
|
|
|
}
|
2018-11-28 15:03:07 +01:00
|
|
|
},
|
2018-04-09 14:10:25 +02:00
|
|
|
watch: {
|
2020-08-20 15:38:30 +02:00
|
|
|
list_id: function () {
|
2019-05-16 16:43:32 +02:00
|
|
|
this.$store.commit('TimelineSpace/Contents/changeLoading', true)
|
|
|
|
this.load().finally(() => {
|
|
|
|
this.$store.commit('TimelineSpace/Contents/changeLoading', false)
|
|
|
|
})
|
2018-06-27 15:27:46 +02:00
|
|
|
},
|
2020-08-20 15:38:30 +02:00
|
|
|
startReload: function (newState, oldState) {
|
2018-06-27 15:27:46 +02:00
|
|
|
if (!oldState && newState) {
|
2019-05-16 16:43:32 +02:00
|
|
|
this.reload().finally(() => {
|
|
|
|
this.$store.commit('TimelineSpace/HeaderMenu/changeReload', false)
|
|
|
|
})
|
2018-06-27 15:27:46 +02:00
|
|
|
}
|
2018-08-21 16:52:00 +02:00
|
|
|
},
|
2020-08-20 15:38:30 +02:00
|
|
|
focusedId: function (newState, _oldState) {
|
2018-08-22 05:57:39 +02:00
|
|
|
if (newState && this.heading) {
|
2022-04-18 15:41:52 +02:00
|
|
|
this.$store.commit(
|
|
|
|
'TimelineSpace/Contents/Lists/Show/changeHeading',
|
|
|
|
false
|
|
|
|
)
|
2018-08-21 16:52:00 +02:00
|
|
|
} else if (newState === null && !this.heading) {
|
2022-04-18 15:41:52 +02:00
|
|
|
this.$store.commit(
|
|
|
|
'TimelineSpace/Contents/Lists/Show/changeHeading',
|
|
|
|
true
|
|
|
|
)
|
2018-08-21 16:52:00 +02:00
|
|
|
}
|
2022-04-18 15:41:52 +02:00
|
|
|
},
|
2018-04-09 14:10:25 +02:00
|
|
|
},
|
2019-05-16 16:43:32 +02:00
|
|
|
beforeDestroy() {
|
2018-06-16 08:33:52 +02:00
|
|
|
this.$store.dispatch('TimelineSpace/Contents/Lists/Show/stopStreaming')
|
2021-08-26 15:22:52 +02:00
|
|
|
this.observer.disconnect()
|
2018-04-09 16:43:36 +02:00
|
|
|
},
|
2019-05-16 16:43:32 +02:00
|
|
|
destroyed() {
|
2018-06-16 08:33:52 +02:00
|
|
|
this.$store.commit('TimelineSpace/Contents/Lists/Show/changeHeading', true)
|
|
|
|
this.$store.commit('TimelineSpace/Contents/Lists/Show/archiveTimeline')
|
|
|
|
this.$store.commit('TimelineSpace/Contents/Lists/Show/clearTimeline')
|
2022-04-18 15:41:52 +02:00
|
|
|
if (
|
|
|
|
document.getElementById('scroller') !== undefined &&
|
|
|
|
document.getElementById('scroller') !== null
|
|
|
|
) {
|
|
|
|
document
|
|
|
|
.getElementById('scroller')
|
|
|
|
.removeEventListener('scroll', this.onScroll)
|
2021-07-23 15:16:27 +02:00
|
|
|
document.getElementById('scroller').scrollTop = 0
|
2018-04-09 16:08:52 +02:00
|
|
|
}
|
|
|
|
},
|
2018-04-09 14:10:25 +02:00
|
|
|
methods: {
|
2019-05-16 16:43:32 +02:00
|
|
|
async load() {
|
2022-04-18 15:41:52 +02:00
|
|
|
await this.$store.dispatch(
|
|
|
|
'TimelineSpace/Contents/Lists/Show/stopStreaming'
|
|
|
|
)
|
2018-04-09 16:43:36 +02:00
|
|
|
try {
|
2022-04-18 15:41:52 +02:00
|
|
|
await this.$store.dispatch(
|
|
|
|
'TimelineSpace/Contents/Lists/Show/fetchTimeline',
|
|
|
|
this.list_id
|
|
|
|
)
|
2018-04-09 16:43:36 +02:00
|
|
|
} catch (err) {
|
|
|
|
this.$message({
|
2018-08-13 08:27:53 +02:00
|
|
|
message: this.$t('message.timeline_fetch_error'),
|
2022-04-18 15:41:52 +02:00
|
|
|
type: 'error',
|
2018-04-09 14:10:25 +02:00
|
|
|
})
|
2018-04-09 16:43:36 +02:00
|
|
|
}
|
2022-04-18 15:41:52 +02:00
|
|
|
this.$store
|
|
|
|
.dispatch(
|
|
|
|
'TimelineSpace/Contents/Lists/Show/startStreaming',
|
|
|
|
this.list_id
|
|
|
|
)
|
|
|
|
.catch(() => {
|
|
|
|
this.$message({
|
|
|
|
message: this.$t('message.start_streaming_error'),
|
|
|
|
type: 'error',
|
|
|
|
})
|
2018-04-09 14:10:25 +02:00
|
|
|
})
|
2018-04-09 16:43:36 +02:00
|
|
|
return 'started'
|
2018-04-09 15:05:15 +02:00
|
|
|
},
|
2019-05-16 16:43:32 +02:00
|
|
|
updateToot(message) {
|
2022-04-18 15:41:52 +02:00
|
|
|
this.$store.commit(
|
|
|
|
'TimelineSpace/Contents/Lists/Show/updateToot',
|
|
|
|
message
|
|
|
|
)
|
2018-04-09 16:08:52 +02:00
|
|
|
},
|
2019-05-16 16:43:32 +02:00
|
|
|
deleteToot(message) {
|
2022-04-18 15:41:52 +02:00
|
|
|
this.$store.commit(
|
|
|
|
'TimelineSpace/Contents/Lists/Show/deleteToot',
|
|
|
|
message.id
|
|
|
|
)
|
2018-04-30 15:11:40 +02:00
|
|
|
},
|
2019-05-16 16:43:32 +02:00
|
|
|
onScroll(event) {
|
2021-08-28 17:41:07 +02:00
|
|
|
if (moment().diff(this.resizeTime) < 500) {
|
|
|
|
return
|
|
|
|
}
|
|
|
|
this.scrollTime = moment()
|
|
|
|
if (!this.scrolling) {
|
2022-04-18 15:41:52 +02:00
|
|
|
this.$store.commit(
|
|
|
|
'TimelineSpace/Contents/Lists/Show/changeScrolling',
|
|
|
|
true
|
|
|
|
)
|
2021-08-28 17:41:07 +02:00
|
|
|
}
|
|
|
|
|
2019-05-16 16:43:32 +02:00
|
|
|
if (
|
2022-04-18 15:41:52 +02:00
|
|
|
event.target.clientHeight + event.target.scrollTop >=
|
|
|
|
document.getElementById('scroller').scrollHeight - 10 &&
|
2019-05-16 16:43:32 +02:00
|
|
|
!this.lazyloading
|
|
|
|
) {
|
2021-09-13 19:02:51 +02:00
|
|
|
this.$store
|
|
|
|
.dispatch('TimelineSpace/Contents/Lists/Show/lazyFetchTimeline', {
|
|
|
|
list_id: this.list_id,
|
2022-04-18 15:41:52 +02:00
|
|
|
status: this.timeline[this.timeline.length - 1],
|
2021-09-13 19:02:51 +02:00
|
|
|
})
|
2022-04-18 15:41:52 +02:00
|
|
|
.then((statuses) => {
|
2021-09-13 19:02:51 +02:00
|
|
|
if (statuses === null) {
|
|
|
|
return
|
|
|
|
}
|
|
|
|
if (statuses.length > 0) {
|
2022-04-18 15:41:52 +02:00
|
|
|
this.$store.commit(
|
|
|
|
'TimelineSpace/Contents/Lists/Show/changeScrolling',
|
|
|
|
true
|
|
|
|
)
|
2021-09-13 19:02:51 +02:00
|
|
|
setTimeout(() => {
|
2022-04-18 15:41:52 +02:00
|
|
|
this.$store.commit(
|
|
|
|
'TimelineSpace/Contents/Lists/Show/changeScrolling',
|
|
|
|
false
|
|
|
|
)
|
2021-09-13 19:02:51 +02:00
|
|
|
}, 500)
|
|
|
|
}
|
|
|
|
})
|
|
|
|
.catch(() => {
|
|
|
|
this.$message({
|
|
|
|
message: this.$t('message.timeline_fetch_error'),
|
2022-04-18 15:41:52 +02:00
|
|
|
type: 'error',
|
2021-09-13 19:02:51 +02:00
|
|
|
})
|
|
|
|
})
|
2018-04-09 16:08:52 +02:00
|
|
|
}
|
2021-07-25 16:31:32 +02:00
|
|
|
|
|
|
|
if (event.target.scrollTop > 10 && this.heading) {
|
2022-04-18 15:41:52 +02:00
|
|
|
this.$store.commit(
|
|
|
|
'TimelineSpace/Contents/Lists/Show/changeHeading',
|
|
|
|
false
|
|
|
|
)
|
2021-07-25 16:31:32 +02:00
|
|
|
} else if (event.target.scrollTop <= 10 && !this.heading) {
|
2022-04-18 15:41:52 +02:00
|
|
|
this.$store.commit(
|
|
|
|
'TimelineSpace/Contents/Lists/Show/changeHeading',
|
|
|
|
true
|
|
|
|
)
|
2018-04-21 08:53:06 +02:00
|
|
|
}
|
2021-08-28 17:41:07 +02:00
|
|
|
|
|
|
|
setTimeout(() => {
|
|
|
|
const now = moment()
|
|
|
|
if (now.diff(this.scrollTime) >= 150) {
|
|
|
|
this.scrollTime = null
|
2022-04-18 15:41:52 +02:00
|
|
|
this.$store.commit(
|
|
|
|
'TimelineSpace/Contents/Lists/Show/changeScrolling',
|
|
|
|
false
|
|
|
|
)
|
2021-08-28 17:41:07 +02:00
|
|
|
}
|
|
|
|
}, 150)
|
2018-06-10 08:00:33 +02:00
|
|
|
},
|
2019-05-16 16:43:32 +02:00
|
|
|
async reload() {
|
2018-07-02 14:53:09 +02:00
|
|
|
this.$store.commit('TimelineSpace/changeLoading', true)
|
|
|
|
try {
|
2018-11-04 06:33:47 +01:00
|
|
|
await this.reloadable()
|
2022-04-18 15:41:52 +02:00
|
|
|
await this.$store.dispatch(
|
|
|
|
'TimelineSpace/Contents/Lists/Show/stopStreaming'
|
|
|
|
)
|
|
|
|
await this.$store
|
|
|
|
.dispatch(
|
|
|
|
'TimelineSpace/Contents/Lists/Show/fetchTimeline',
|
|
|
|
this.list_id
|
|
|
|
)
|
|
|
|
.catch(() => {
|
|
|
|
this.$message({
|
|
|
|
message: this.$t('message.timeline_fetch_error'),
|
|
|
|
type: 'error',
|
|
|
|
})
|
2018-06-10 08:00:33 +02:00
|
|
|
})
|
2022-04-18 15:41:52 +02:00
|
|
|
this.$store
|
|
|
|
.dispatch(
|
|
|
|
'TimelineSpace/Contents/Lists/Show/startStreaming',
|
|
|
|
this.list_id
|
|
|
|
)
|
|
|
|
.catch(() => {
|
|
|
|
this.$message({
|
|
|
|
message: this.$t('message.start_streaming_error'),
|
|
|
|
type: 'error',
|
|
|
|
})
|
2018-07-02 14:53:09 +02:00
|
|
|
})
|
|
|
|
} finally {
|
|
|
|
this.$store.commit('TimelineSpace/changeLoading', false)
|
|
|
|
}
|
2018-07-19 15:05:21 +02:00
|
|
|
},
|
2019-05-16 16:43:32 +02:00
|
|
|
upper() {
|
2021-07-23 15:16:27 +02:00
|
|
|
this.$refs.scroller.scrollToItem(0)
|
2018-08-22 05:57:39 +02:00
|
|
|
this.focusedId = null
|
2018-08-21 16:52:00 +02:00
|
|
|
},
|
2019-05-16 16:43:32 +02:00
|
|
|
focusNext() {
|
2022-04-18 15:41:52 +02:00
|
|
|
const currentIndex = this.timeline.findIndex(
|
|
|
|
(toot) => this.focusedId === toot.uri + toot.id
|
|
|
|
)
|
2018-08-22 05:57:39 +02:00
|
|
|
if (currentIndex === -1) {
|
2018-10-05 16:57:16 +02:00
|
|
|
this.focusedId = this.timeline[0].uri + this.timeline[0].id
|
2018-08-22 05:57:39 +02:00
|
|
|
} else if (currentIndex < this.timeline.length) {
|
2022-04-18 15:41:52 +02:00
|
|
|
this.focusedId =
|
|
|
|
this.timeline[currentIndex + 1].uri +
|
|
|
|
this.timeline[currentIndex + 1].id
|
2018-08-21 16:52:00 +02:00
|
|
|
}
|
|
|
|
},
|
2019-05-16 16:43:32 +02:00
|
|
|
focusPrev() {
|
2022-04-18 15:41:52 +02:00
|
|
|
const currentIndex = this.timeline.findIndex(
|
|
|
|
(toot) => this.focusedId === toot.uri + toot.id
|
|
|
|
)
|
2018-08-22 05:57:39 +02:00
|
|
|
if (currentIndex === 0) {
|
|
|
|
this.focusedId = null
|
|
|
|
} else if (currentIndex > 0) {
|
2022-04-18 15:41:52 +02:00
|
|
|
this.focusedId =
|
|
|
|
this.timeline[currentIndex - 1].uri +
|
|
|
|
this.timeline[currentIndex - 1].id
|
2018-08-21 16:52:00 +02:00
|
|
|
}
|
|
|
|
},
|
2019-05-16 16:43:32 +02:00
|
|
|
focusToot(message) {
|
2018-10-05 16:57:16 +02:00
|
|
|
this.focusedId = message.uri + message.id
|
2018-08-23 17:14:37 +02:00
|
|
|
},
|
2019-05-16 16:43:32 +02:00
|
|
|
focusSidebar() {
|
2018-11-28 15:03:07 +01:00
|
|
|
Event.$emit('focus-sidebar')
|
|
|
|
},
|
2019-05-16 16:43:32 +02:00
|
|
|
handleKey(event) {
|
2018-08-23 17:14:37 +02:00
|
|
|
switch (event.srcKey) {
|
|
|
|
case 'next':
|
2018-10-05 16:57:16 +02:00
|
|
|
this.focusedId = this.timeline[0].uri + this.timeline[0].id
|
2018-08-23 17:14:37 +02:00
|
|
|
break
|
|
|
|
}
|
2021-10-23 15:02:11 +02:00
|
|
|
},
|
|
|
|
sizeChanged() {
|
2022-04-18 15:41:52 +02:00
|
|
|
this.$store.commit(
|
|
|
|
'TimelineSpace/Contents/Lists/Show/changeScrolling',
|
|
|
|
true
|
|
|
|
)
|
2021-10-23 15:02:11 +02:00
|
|
|
setTimeout(() => {
|
2022-04-18 15:41:52 +02:00
|
|
|
this.$store.commit(
|
|
|
|
'TimelineSpace/Contents/Lists/Show/changeScrolling',
|
|
|
|
false
|
|
|
|
)
|
2021-10-23 15:02:11 +02:00
|
|
|
}, 500)
|
2022-04-18 15:41:52 +02:00
|
|
|
},
|
|
|
|
},
|
2018-04-09 01:43:11 +02:00
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
2021-07-23 15:16:27 +02:00
|
|
|
.list-timeline {
|
|
|
|
height: 100%;
|
|
|
|
overflow: auto;
|
|
|
|
scroll-behavior: auto;
|
2018-04-21 08:53:06 +02:00
|
|
|
|
2021-07-23 15:16:27 +02:00
|
|
|
.scroller {
|
|
|
|
height: 100%;
|
2018-04-21 08:53:06 +02:00
|
|
|
}
|
|
|
|
|
2021-07-23 15:16:27 +02:00
|
|
|
.upper {
|
|
|
|
position: fixed;
|
|
|
|
bottom: 20px;
|
|
|
|
right: 20px;
|
|
|
|
}
|
2018-10-31 15:11:11 +01:00
|
|
|
|
2021-07-23 15:16:27 +02:00
|
|
|
.upper-with-side-bar {
|
|
|
|
position: fixed;
|
|
|
|
bottom: 20px;
|
|
|
|
right: calc(20px + var(--current-sidebar-width));
|
|
|
|
transition: all 0.5s;
|
|
|
|
}
|
2018-10-31 15:11:11 +01:00
|
|
|
}
|
2018-04-09 01:43:11 +02:00
|
|
|
</style>
|
2022-04-18 15:41:52 +02:00
|
|
|
|
2020-08-20 15:38:30 +02:00
|
|
|
<style lang="scss" src="@/assets/timeline-transition.scss"></style>
|