sendnrw/misskey
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore(client): tweak ui

Browse Source
This commit is contained in:
syuilo
2022-07-01 18:55:45 +09:00
parent 80a033c1cf
commit add6e9b14b
7 changed files with 655 additions and 498 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
packages/client/src/components/global/page-header.vue
View File

@@ -34,7 +34,7 @@
</template>
<script lang="ts" setup>
import { computed, onMounted, onUnmounted, ref, inject, watch } from 'vue';
import { computed, onMounted, onUnmounted, ref, inject, watch, shallowReactive, nextTick, reactive } from 'vue';
import tinycolor from 'tinycolor2';
import { popupMenu } from '@/os';
import { scrollToTop } from '@/scripts/scroll';
@@ -137,16 +137,18 @@ onMounted(() => {
calcBg();
globalEvents.on('themeChanged', calcBg);
watch(() => props.tab, () => {
const tabEl = tabRefs[props.tab];
if (tabEl && tabHighlightEl) {
// offsetWidth や offsetLeft は少数を丸めてしまうため getBoundingClientRect を使う必要がある
// https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/offsetWidth#%E5%80%A4
const parentRect = tabEl.parentElement.getBoundingClientRect();
const rect = tabEl.getBoundingClientRect();
tabHighlightEl.style.width = rect.width + 'px';
tabHighlightEl.style.left = (rect.left - parentRect.left) + 'px';
}
watch(() => [props.tab, props.tabs], () => {
nextTick(() => {
const tabEl = tabRefs[props.tab];
if (tabEl && tabHighlightEl) {
// offsetWidth や offsetLeft は少数を丸めてしまうため getBoundingClientRect を使う必要がある
// https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/offsetWidth#%E5%80%A4
const parentRect = tabEl.parentElement.getBoundingClientRect();
const rect = tabEl.getBoundingClientRect();
tabHighlightEl.style.width = rect.width + 'px';
tabHighlightEl.style.left = (rect.left - parentRect.left) + 'px';
}
});
}, {
immediate: true,
});