usbharu
/
misskey
mirror of https://github.com/misskey-dev/misskey.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

use cqh

This commit is contained in:
tamaina 2025-09-08 22:53:17 +09:00
parent d6a0e6f388
commit 73853b08f5
2 changed files with 3 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
packages/frontend/src/pages/qr.read.vue
View File

@ -8,8 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only
ref="rootEl" ref="rootEl"
:class="$style.root" :class="$style.root"
:style="{ :style="{
'--MI-QrReadScrollHeight': scrollContainer ? `${scrollHeight}px` : `calc( 100dvh - var(--MI-minBottomSpacing) )`, '--MI-QrReadViewHeight': 'calc(100cqh - var(--MI-stickyTop, 0px) - var(--MI-stickyBottom, 0px))',
'--MI-QrReadViewHeight': 'calc(var(--MI-QrReadScrollHeight) - var(--MI-stickyTop, 0px) - var(--MI-stickyBottom, 0px))',
'--MI-QrReadVideoHeight': 'min(calc(var(--MI-QrReadViewHeight) * 0.3), 512px)', '--MI-QrReadVideoHeight': 'min(calc(var(--MI-QrReadViewHeight) * 0.3), 512px)',
}" }"
> >
@ -82,9 +81,6 @@ const rootEl = ref<HTMLDivElement | null>(null);
const videoEl = ref<HTMLVideoElement | null>(null); const videoEl = ref<HTMLVideoElement | null>(null);
const overlayEl = ref<HTMLDivElement | null>(null); const overlayEl = ref<HTMLDivElement | null>(null);
const scrollContainer = shallowRef<HTMLElement | null>(null);
const scrollHeight = ref(window.innerHeight);
const scannerInstance = shallowRef<QrScanner | null>(null); const scannerInstance = shallowRef<QrScanner | null>(null);
const tab = ref<'users' | 'notes' | 'all'>('users'); const tab = ref<'users' | 'notes' | 'all'>('users');
@ -335,28 +331,6 @@ onUnmounted(() => {
scannerInstance.value?.destroy(); scannerInstance.value?.destroy();
}); });
//#region scroll height
function checkScrollHeight() {
scrollHeight.value = scrollContainer.value ? scrollContainer.value.clientHeight : window.innerHeight;
}
let ro: ResizeObserver | undefined;
onMounted(() => {
scrollContainer.value = getScrollContainer(rootEl.value);
checkScrollHeight();
if (scrollContainer.value) {
ro = new ResizeObserver(checkScrollHeight);
ro.observe(scrollContainer.value);
}
});
onUnmounted(() => {
ro?.disconnect();
});
//#endregion
</script> </script>
<style lang="scss" module> <style lang="scss" module>

28
packages/frontend/src/pages/qr.show.vue
View File

@ -7,7 +7,6 @@ SPDX-License-Identifier: AGPL-3.0-only
<div <div
ref="rootEl" :class="$style.root" :style="{ ref="rootEl" :class="$style.root" :style="{
backgroundColor: bgColor, backgroundColor: bgColor,
'--MI-QrShowScrollHeight': scrollContainer ? `${scrollHeight}px` : `calc( 100dvh - var(--MI-minBottomSpacing, 0px) )`,
}" }"
> >
<MkAnimBg style="position: absolute; top: 0;" :scale="1.5"/> <MkAnimBg style="position: absolute; top: 0;" :scale="1.5"/>
@ -62,7 +61,6 @@ const $i = ensureSignin();
const scrollContainer = shallowRef<HTMLElement | null>(null); const scrollContainer = shallowRef<HTMLElement | null>(null);
const rootEl = ref<HTMLDivElement | null>(null); const rootEl = ref<HTMLDivElement | null>(null);
const scrollHeight = ref(window.innerHeight);
const acct = computed(() => `@${$i.username}@${host}`); const acct = computed(() => `@${$i.username}@${host}`);
const userProfileUrl = computed(() => userPage($i, undefined, true)); const userProfileUrl = computed(() => userPage($i, undefined, true));
@ -131,28 +129,6 @@ onMounted(() => {
} }
}); });
//#region scroll height
function checkScrollHeight() {
scrollHeight.value = scrollContainer.value ? scrollContainer.value.clientHeight : window.innerHeight;
}
let ro: ResizeObserver | undefined;
onMounted(() => {
scrollContainer.value = getScrollContainer(rootEl.value);
checkScrollHeight();
if (scrollContainer.value) {
ro = new ResizeObserver(checkScrollHeight);
ro.observe(scrollContainer.value);
}
});
onUnmounted(() => {
ro?.disconnect();
});
//#endregion
//#region flip //#region flip
const THRESHOLD = -3; const THRESHOLD = -3;
// @ts-expect-error TS(2339) // @ts-expect-error TS(2339)
@ -216,7 +192,7 @@ $avatarSize: 58px;
margin-top: calc( -1 * var(--MI-stickyTop) ); margin-top: calc( -1 * var(--MI-stickyTop) );
margin-bottom: calc( -1 * var(--MI-stickyBottom) ); margin-bottom: calc( -1 * var(--MI-stickyBottom) );
height: fit-content; height: fit-content;
min-height: var(--MI-QrShowScrollHeight); min-height: 100cqh;
} }
.fg { .fg {
@ -239,7 +215,7 @@ $avatarSize: 58px;
display: flex; display: flex;
width: 100%; width: 100%;
padding: 0 0 $s3; padding: 0 0 $s3;
max-height: max(256px, calc((var(--MI-QrShowScrollHeight) - var(--MI-stickyTop, 0px) - var(--MI-stickyBottom, 0px)) * 0.55)); max-height: max(256px, calc((100cqh - var(--MI-stickyTop, 0px) - var(--MI-stickyBottom, 0px)) * 0.55));
} }
.qrInner { .qrInner {