This commit is contained in:
Henry Jameson 2026-09-16 15:54:02 +03:00
commit 8d12e9df9c
6 changed files with 38 additions and 29 deletions

View file

@ -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
} }

View file

@ -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),

View file

@ -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(

View file

@ -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'
}) })

View file

@ -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

View file

@ -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)