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

wheel

This commit is contained in:
tamaina 2023-02-10 18:36:26 +00:00
parent bee74e3f10
commit dc4a814490
1 changed files with 18 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
packages/frontend/src/components/global/MkPageHeader.vue
View File

@ -17,7 +17,7 @@
</div> </div>
</div> </div>
</div> </div>
<div v-if="(!narrow || hideTitle)" :class="$style.tabs"> <div v-if="(!narrow || hideTitle)" :class="$style.tabs" @wheel.passive="onTabWheel">
<div :class="$style.tabsInner"> <div :class="$style.tabsInner">
<button v-for="tab in tabs" :ref="(el) => tabRefs[tab.key] = (el as HTMLElement)" v-tooltip.noDelay="tab.title" class="_button" :class="[$style.tab, { [$style.active]: tab.key != null && tab.key === props.tab }]" @mousedown="(ev) => onTabMousedown(tab, ev)" @click="(ev) => onTabClick(tab, ev)"> <button v-for="tab in tabs" :ref="(el) => tabRefs[tab.key] = (el as HTMLElement)" v-tooltip.noDelay="tab.title" class="_button" :class="[$style.tab, { [$style.active]: tab.key != null && tab.key === props.tab }]" @mousedown="(ev) => onTabMousedown(tab, ev)" @click="(ev) => onTabClick(tab, ev)">
<i v-if="tab.icon" :class="[$style.tabIcon, tab.icon]"></i> <i v-if="tab.icon" :class="[$style.tabIcon, tab.icon]"></i>
@ -34,7 +34,7 @@
</div> </div>
</div> </div>
<div v-if="(narrow && !hideTitle) && hasTabs" :class="[$style.lower, { [$style.slim]: narrow, [$style.thin]: thin_ }]"> <div v-if="(narrow && !hideTitle) && hasTabs" :class="[$style.lower, { [$style.slim]: narrow, [$style.thin]: thin_ }]">
<div :class="$style.tabs"> <div :class="$style.tabs" @wheel.passive="onTabWheel">
<div :class="$style.tabsInner"> <div :class="$style.tabsInner">
<button v-for="tab in tabs" :ref="(el) => tabRefs[tab.key] = (el as HTMLElement)" v-tooltip.noDelay="tab.title" class="_button" :class="[$style.tab, { [$style.active]: tab.key != null && tab.key === props.tab }]" @mousedown="(ev) => onTabMousedown(tab, ev)" @click="(ev) => onTabClick(tab, ev)"> <button v-for="tab in tabs" :ref="(el) => tabRefs[tab.key] = (el as HTMLElement)" v-tooltip.noDelay="tab.title" class="_button" :class="[$style.tab, { [$style.active]: tab.key != null && tab.key === props.tab }]" @mousedown="(ev) => onTabMousedown(tab, ev)" @click="(ev) => onTabClick(tab, ev)">
<i v-if="tab.icon" :class="[$style.tabIcon, tab.icon]"></i> <i v-if="tab.icon" :class="[$style.tabIcon, tab.icon]"></i>
@ -87,9 +87,9 @@ const metadata = injectPageMetadata();
const hideTitle = inject('shouldOmitHeaderTitle', false); const hideTitle = inject('shouldOmitHeaderTitle', false);
const thin_ = props.thin || inject('shouldHeaderThin', false); const thin_ = props.thin || inject('shouldHeaderThin', false);
const el = $shallowRef<HTMLElement | undefined>(undefined); let el = $shallowRef<HTMLElement | undefined>(undefined);
const tabRefs: Record<string, HTMLElement | null> = {}; const tabRefs: Record<string, HTMLElement | null> = {};
const tabHighlightEl = $shallowRef<HTMLElement | null>(null); let tabHighlightEl = $shallowRef<HTMLElement | null>(null);
const bg = ref<string | undefined>(undefined); const bg = ref<string | undefined>(undefined);
let narrow = $ref(false); let narrow = $ref(false);
const hasTabs = $computed(() => props.tabs.length > 0); const hasTabs = $computed(() => props.tabs.length > 0);
@ -138,7 +138,7 @@ let ro2: ResizeObserver | null;
function renderTab() { function renderTab() {
const tabEl = props.tab ? tabRefs[props.tab] : undefined; const tabEl = props.tab ? tabRefs[props.tab] : undefined;
if (tabEl && tabHighlightEl && tabHighlightEl.parentElement) { if (tabEl && tabEl.parentElement && tabHighlightEl && tabHighlightEl.parentElement) {
// offsetWidth や offsetLeft は少数を丸めてしまうため getBoundingClientRect を使う必要がある // offsetWidth や offsetLeft は少数を丸めてしまうため getBoundingClientRect を使う必要がある
// https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/offsetWidth#%E5%80%A4 // https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/offsetWidth#%E5%80%A4
const parentRect = tabHighlightEl.parentElement.getBoundingClientRect(); const parentRect = tabHighlightEl.parentElement.getBoundingClientRect();
@ -148,6 +148,17 @@ function renderTab() {
} }
} }
function onTabWheel(ev: WheelEvent) {
if (ev.deltaX !== 0) {
ev.preventDefault();
ev.stopPropagation();
(ev.currentTarget as HTMLElement).scrollBy({
left: ev.deltaX,
behavior: 'smooth',
});
}
}
onMounted(() => { onMounted(() => {
calcBg(); calcBg();
globalEvents.on('themeChanged', calcBg); globalEvents.on('themeChanged', calcBg);
@ -161,7 +172,7 @@ onMounted(() => {
if (el && el.parentElement) { if (el && el.parentElement) {
narrow = el.parentElement.offsetWidth < 500; narrow = el.parentElement.offsetWidth < 500;
ro1 = new ResizeObserver((entries, observer) => { ro1 = new ResizeObserver((entries, observer) => {
if (el.parentElement && document.body.contains(el as HTMLElement)) { if (el && el.parentElement && document.body.contains(el as HTMLElement)) {
narrow = el.parentElement.offsetWidth < 500; narrow = el.parentElement.offsetWidth < 500;
} }
}); });
@ -377,7 +388,7 @@ onUnmounted(() => {
font-size: 0.8em; font-size: 0.8em;
overflow-x: auto; overflow-x: auto;
overflow-y: hidden; overflow-y: hidden;
scrollbar-width: thin; scrollbar-width: none;
} }
.tabsInner { .tabsInner {