lint
This commit is contained in:
parent
58086fed0a
commit
8d12e9df9c
6 changed files with 38 additions and 29 deletions
|
|
@ -1,13 +1,13 @@
|
||||||
import { storeToRefs } from 'pinia'
|
import { storeToRefs } from 'pinia'
|
||||||
import {
|
import {
|
||||||
computed,
|
computed,
|
||||||
|
nextTick,
|
||||||
onUnmounted,
|
onUnmounted,
|
||||||
provide,
|
provide,
|
||||||
ref,
|
ref,
|
||||||
toRefs,
|
toRefs,
|
||||||
useTemplateRef,
|
useTemplateRef,
|
||||||
watch,
|
watch,
|
||||||
nextTick,
|
|
||||||
} from 'vue'
|
} from 'vue'
|
||||||
import { useRouter } from 'vue-router'
|
import { useRouter } from 'vue-router'
|
||||||
|
|
||||||
|
|
@ -97,7 +97,9 @@ export default {
|
||||||
provide('isExpanded', isExpanded)
|
provide('isExpanded', isExpanded)
|
||||||
provide('isPage', isPage)
|
provide('isPage', isPage)
|
||||||
provide('expandable', true)
|
provide('expandable', true)
|
||||||
watch(expanded, (val) => val ? emit('expanded') : emit('collapsed'), { flush: 'post' })
|
watch(expanded, (val) => (val ? emit('expanded') : emit('collapsed')), {
|
||||||
|
flush: 'post',
|
||||||
|
})
|
||||||
|
|
||||||
// # Main things
|
// # Main things
|
||||||
const {
|
const {
|
||||||
|
|
@ -189,7 +191,12 @@ export default {
|
||||||
if (isPage.value) {
|
if (isPage.value) {
|
||||||
return navbarSize.value + fontSize.value + panelHeaderSize.value
|
return navbarSize.value + fontSize.value + panelHeaderSize.value
|
||||||
} else if (expanded.value) {
|
} else if (expanded.value) {
|
||||||
return navbarSize.value + fontSize.value + panelHeaderSize.value * 2 + rootElementMargin.value
|
return (
|
||||||
|
navbarSize.value +
|
||||||
|
fontSize.value +
|
||||||
|
panelHeaderSize.value * 2 +
|
||||||
|
rootElementMargin.value
|
||||||
|
)
|
||||||
} else {
|
} else {
|
||||||
return navbarSize.value + fontSize.value
|
return navbarSize.value + fontSize.value
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -2,13 +2,13 @@ import { debounce, throttle } from 'lodash-es'
|
||||||
import { storeToRefs } from 'pinia'
|
import { storeToRefs } from 'pinia'
|
||||||
import {
|
import {
|
||||||
computed,
|
computed,
|
||||||
|
nextTick,
|
||||||
onMounted,
|
onMounted,
|
||||||
onUnmounted,
|
onUnmounted,
|
||||||
ref,
|
ref,
|
||||||
toRefs,
|
toRefs,
|
||||||
useTemplateRef,
|
useTemplateRef,
|
||||||
watch,
|
watch,
|
||||||
nextTick,
|
|
||||||
} from 'vue'
|
} from 'vue'
|
||||||
import { useI18n } from 'vue-i18n'
|
import { useI18n } from 'vue-i18n'
|
||||||
|
|
||||||
|
|
@ -83,17 +83,13 @@ const Timeline = {
|
||||||
const body = useTemplateRef('timeline')
|
const body = useTemplateRef('timeline')
|
||||||
const offset = computed(() => {
|
const offset = computed(() => {
|
||||||
if (embedded.value) {
|
if (embedded.value) {
|
||||||
// The fontsize after navbar is the little gap between navbar and content
|
// The fontsize after navbar is the little gap between navbar and content
|
||||||
return navbarSize.value + fontSize.value
|
return navbarSize.value + fontSize.value
|
||||||
} else {
|
} else {
|
||||||
return 0
|
return 0
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
const {
|
const { heightChart, changeSuspendState, updateVirtualHeight } =
|
||||||
heightChart,
|
|
||||||
changeSuspendState,
|
|
||||||
updateVirtualHeight,
|
|
||||||
} =
|
|
||||||
useVirtualScrolling({
|
useVirtualScrolling({
|
||||||
name: 'Timeline',
|
name: 'Timeline',
|
||||||
enabled: ref(true),
|
enabled: ref(true),
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
import { storeToRefs } from 'pinia'
|
import { storeToRefs } from 'pinia'
|
||||||
import { computed, provide, ref, watch, nextTick } from 'vue'
|
import { computed, nextTick, provide, ref, watch } from 'vue'
|
||||||
|
|
||||||
import { useMergedConfigStore } from 'src/stores/merged_config.js'
|
import { useMergedConfigStore } from 'src/stores/merged_config.js'
|
||||||
import { useOAuthStore } from 'src/stores/oauth.js'
|
import { useOAuthStore } from 'src/stores/oauth.js'
|
||||||
|
|
@ -173,7 +173,9 @@ export function useConversation(statusId, expanded) {
|
||||||
}
|
}
|
||||||
watch(statusId, (val) => setFocused(val), { immediate: true })
|
watch(statusId, (val) => setFocused(val), { immediate: true })
|
||||||
|
|
||||||
const focusedId = computed(() => (expanded.value && fullyLoaded.value) ? focusedStatus.value?.id : null)
|
const focusedId = computed(() =>
|
||||||
|
expanded.value && fullyLoaded.value ? focusedStatus.value?.id : null,
|
||||||
|
)
|
||||||
provide('focusedId', focusedId)
|
provide('focusedId', focusedId)
|
||||||
|
|
||||||
watch(
|
watch(
|
||||||
|
|
|
||||||
|
|
@ -20,17 +20,17 @@ export function useInterfaceSizes() {
|
||||||
watch(fontSizeSetting, updateFontSize, { immediate: true })
|
watch(fontSizeSetting, updateFontSize, { immediate: true })
|
||||||
|
|
||||||
const navbarSize = computed(() => {
|
const navbarSize = computed(() => {
|
||||||
const string =
|
const string = window
|
||||||
window.getComputedStyle(document.body).getPropertyValue('--navbarSize')
|
.getComputedStyle(document.body)
|
||||||
|
.getPropertyValue('--navbarSize')
|
||||||
|
|
||||||
return fontSize.value * Number.parseInt(string.slice(0, -3), 10) // remove the 'rem'
|
return fontSize.value * Number.parseInt(string.slice(0, -3), 10) // remove the 'rem'
|
||||||
})
|
})
|
||||||
|
|
||||||
const panelHeaderSize = computed(() => {
|
const panelHeaderSize = computed(() => {
|
||||||
const string =
|
const string = window
|
||||||
window
|
.getComputedStyle(document.body)
|
||||||
.getComputedStyle(document.body)
|
.getPropertyValue('--panelHeaderSize')
|
||||||
.getPropertyValue('--panelHeaderSize')
|
|
||||||
|
|
||||||
return fontSize.value * Number.parseInt(string.slice(0, -3), 10) // remove the 'rem'
|
return fontSize.value * Number.parseInt(string.slice(0, -3), 10) // remove the 'rem'
|
||||||
})
|
})
|
||||||
|
|
|
||||||
|
|
@ -1,13 +1,12 @@
|
||||||
import { computed, toValue } from 'vue'
|
import { computed, toValue } from 'vue'
|
||||||
import { storeToRefs } from 'pinia'
|
|
||||||
|
|
||||||
import { useStatusesStore } from 'src/stores/statuses.js'
|
import { useStatusesStore } from 'src/stores/statuses.js'
|
||||||
|
|
||||||
export function useMainStatus(statusId) {
|
export function useMainStatus(statusId) {
|
||||||
const statusesStore = storeToRefs(useStatusesStore())
|
const statusesStore = useStatusesStore()
|
||||||
const getStatusObject = (id) => statusesStore.allStatuses.value.get(id)
|
const getStatusObject = (id) => statusesStore.allStatuses.get(id)
|
||||||
|
|
||||||
const status = computed(() => getStatusObject(statusId.value))
|
const status = computed(() => getStatusObject(toValue(statusId)))
|
||||||
|
|
||||||
const mainStatus = computed(() => {
|
const mainStatus = computed(() => {
|
||||||
if (!status.value) return null
|
if (!status.value) return null
|
||||||
|
|
|
||||||
|
|
@ -235,19 +235,21 @@ export function useVirtualScrolling({
|
||||||
|
|
||||||
const expansion = (() => {
|
const expansion = (() => {
|
||||||
if (newVal.length < oldVal.length) return 0
|
if (newVal.length < oldVal.length) return 0
|
||||||
const oldVisible = oldVal.filter((item) => checkVisible(item) && item.real)
|
const oldVisible = oldVal.filter(
|
||||||
|
(item) => checkVisible(item) && item.real,
|
||||||
|
)
|
||||||
const oldItem = first(oldVisible)
|
const oldItem = first(oldVisible)
|
||||||
if (!oldItem) return 0 // probably out of bounds in timeline
|
if (!oldItem) return 0 // probably out of bounds in timeline
|
||||||
const oldItemUpdated = newVal.find(({ id }) => id === oldItem.id)
|
const oldItemUpdated = newVal.find(({ id }) => id === oldItem.id)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
oldItemUpdated.top -
|
oldItemUpdated.top -
|
||||||
oldItem.top -
|
oldItem.top -
|
||||||
(oldItem.height - oldItemUpdated.height)
|
(oldItem.height - oldItemUpdated.height)
|
||||||
)
|
)
|
||||||
})()
|
})()
|
||||||
|
|
||||||
const collapsing = (() => {
|
const collapsing = (() => {
|
||||||
if (newVal.length >= oldVal.length) return 0
|
if (newVal.length >= oldVal.length) return 0
|
||||||
const newVisible = newVal
|
const newVisible = newVal
|
||||||
const newItem = first(newVisible)
|
const newItem = first(newVisible)
|
||||||
|
|
@ -256,8 +258,8 @@ export function useVirtualScrolling({
|
||||||
|
|
||||||
return (
|
return (
|
||||||
newItem.top -
|
newItem.top -
|
||||||
newItemBefore.top -
|
newItemBefore.top -
|
||||||
(newItemBefore.height - newItem.height)
|
(newItemBefore.height - newItem.height)
|
||||||
)
|
)
|
||||||
})()
|
})()
|
||||||
|
|
||||||
|
|
@ -289,7 +291,10 @@ export function useVirtualScrolling({
|
||||||
|
|
||||||
const element = heightChart.value.find(({ id }) => anchors.has(id))
|
const element = heightChart.value.find(({ id }) => anchors.has(id))
|
||||||
const elementMiddle = element.top + element.height / 2
|
const elementMiddle = element.top + element.height / 2
|
||||||
const desiredTopBoundary = Math.min(element.top, elementMiddle - (windowHeight.value - offset.value) / 2)
|
const desiredTopBoundary = Math.min(
|
||||||
|
element.top,
|
||||||
|
elementMiddle - (windowHeight.value - offset.value) / 2,
|
||||||
|
)
|
||||||
|
|
||||||
scrollBy(0, desiredTopBoundary - topScrollBoundary.value)
|
scrollBy(0, desiredTopBoundary - topScrollBoundary.value)
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue