fix(frontend): Friendly UI가 아닌 경우 헤더 디자인이 잘못 표시되는 문제
This commit is contained in:
NoriDev
parent
84023b523b
commit
2028181015
|
|
@ -44,7 +44,11 @@ Misskey의 전체 변경 사항을 확인하려면, [CHANGELOG.md#2023xx](CHANGE
|
|||
- Fix: 외부 리소스 설치 페이지에서 페이지 캐시가 작동하는 문제 수정 (misskey-dev/misskey#12105)
|
||||
- Fix: 채널 생성/업데이트 시 실패하면 아무 것도 표시되지 않는 문제 수정 misskey-dev/misskey#11983 (misskey-dev/misskey#12142)
|
||||
- Fix: 유저 페이지의 미디어 타임라인에서 미디어가 없는 답글이 표시됨 #388
|
||||
- Fix: 헤더의 액션 항목이 여러 개 일 때 왼쪽으로 타이틀이 치우치는 문제
|
||||
- Fix: Friendly UI가 아닌 경우 헤더 디자인이 잘못 표시되는 문제
|
||||
- 헤더의 액션 항목이 여러 개 일 때 왼쪽으로 타이틀이 치우칠 수 있음
|
||||
- 특정 조건에서 헤더의 왼쪽에 여백이 발생할 수 있음
|
||||
- 일부 페이지에서 잘못된 디자인이 표시됨
|
||||
- 일부 페이지에서 액션 항목이 존재해도 버튼이 표시되지 않을 수 있음
|
||||
|
||||
### Server
|
||||
- Feat: 연합에서 노트 수정이 반영됨 (libnare/cp-castella#1)
|
||||
|
|
|
|||
|
|
@ -43,15 +43,14 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
</div>
|
||||
</template>
|
||||
<div v-if="!thin_ && !narrow && (actions && actions.length > 0) && hideTitle && ['index'].includes(<string>mainRouter.currentRoute.value.name)" :class="$style.buttonsRight"/>
|
||||
<div v-else-if="(!thin_ && narrow && !hideTitle) || (actions && actions.length > 0)" :class="$style.buttonsRight">
|
||||
<div v-if="(!thin_ && narrow && !hideTitle) || (actions && actions.length > 0)" :class="$style.buttonsRight">
|
||||
<template v-for="action in actions">
|
||||
<button v-vibrate="ColdDeviceStorage.get('vibrateSystem') ? 5 : ''" v-tooltip.noDelay="action.text" class="_button" :class="[$style.button, { [$style.highlighted]: action.highlighted }]" @click.stop="action.handler" @touchstart="preventDrag"><i :class="action.icon"></i></button>
|
||||
</template>
|
||||
</div>
|
||||
<div v-else-if="!thin_ && !canBack && !(actions && actions.length > 0)" :class="$style.buttonsRight"/>
|
||||
<div v-if="metadata && metadata.avatar && showFollowButton" :class="$style.followButton">
|
||||
<MkFollowButton v-if="narrow && mainRouter.currentRoute.value.name === 'user'" :user="metadata.avatar" :transparent="false" :full="false"/>
|
||||
<MkFollowButton v-else-if="mainRouter.currentRoute.value.name === 'user'" :user="metadata.avatar" :transparent="false" :full="true"/>
|
||||
<MkFollowButton v-if="mainRouter.currentRoute.value.name === 'user'" :user="metadata.avatar" :transparent="false" :full="!narrow"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -104,7 +103,7 @@ const emit = defineEmits<{
|
|||
|
||||
const metadata = injectPageMetadata();
|
||||
|
||||
const hideTitle = inject('shouldOmitHeaderTitle', false);
|
||||
const hideTitle = false;
|
||||
const thin_ = props.thin || inject('shouldHeaderThin', false);
|
||||
|
||||
let el = $shallowRef<HTMLElement | undefined>(undefined);
|
||||
|
|
|
|||
|
|
@ -13,8 +13,8 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<MkAvatar v-vibrate="ColdDeviceStorage.get('vibrateSystem') ? 5 : ''" :class="$style.avatar" :user="$i"/>
|
||||
</div>
|
||||
<div v-else-if="!thin_ && narrow && !hideTitle && canBack" :class="$style.buttonsLeft"/>
|
||||
<div v-else-if="!thin_ && canBack && (actions && actions.length > 0)" :class="$style.buttonsLeft"/>
|
||||
<div v-if="!thin_ && canBack && (actions && actions.length === 2 && ['index', 'my-notifications', 'messaging'].includes(<string>mainRouter.currentRoute.value.name))" :class="$style.buttonsLeft"/>
|
||||
<div v-if="!thin_ && !narrow && canBack && (actions && actions.length === 2 && mainRouter.currentRoute.value.name === 'index')" :class="$style.buttonsLeft"/>
|
||||
<div v-if="!thin_ && !narrow && canBack && (actions && actions.length === 2 && mainRouter.currentRoute.value.name === 'index')" :class="$style.buttonsLeft" style="margin-right: auto;"/>
|
||||
|
||||
<template v-if="metadata">
|
||||
<div v-if="!hideTitle" :class="[$style.titleContainer, { [$style.titleContainer_canBack]: !canBack }]" @click="top">
|
||||
|
|
@ -34,15 +34,14 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<XTabs v-if="(!narrow || hideTitle) && !isFriendly" :class="[$style.tabs, { [$style.tabs_canBack]: !canBack }]" :tab="tab" :tabs="tabs" :rootEl="el" @update:tab="key => emit('update:tab', key)" @tabClick="onTabClick"/>
|
||||
</template>
|
||||
<div v-if="!thin_ && !narrow && (actions && actions.length > 0) && hideTitle && ['index'].includes(<string>mainRouter.currentRoute.value.name)" :class="$style.buttonsRight"/>
|
||||
<div v-else-if="(!thin_ && narrow && !hideTitle) || (actions && actions.length > 0)" :class="$style.buttonsRight">
|
||||
<div v-if="(!thin_ && narrow && !hideTitle) || (actions && actions.length > 0)" :class="$style.buttonsRight">
|
||||
<template v-for="action in actions">
|
||||
<button v-vibrate="ColdDeviceStorage.get('vibrateSystem') ? 5 : ''" v-tooltip.noDelay="action.text" class="_button" :class="[$style.button, { [$style.highlighted]: action.highlighted }]" @click.stop="action.handler" @touchstart="preventDrag"><i :class="action.icon"></i></button>
|
||||
</template>
|
||||
</div>
|
||||
<div v-else-if="!thin_ && !canBack && !(actions && actions.length > 0)" :class="$style.buttonsRight"/>
|
||||
<div v-if="metadata && metadata.avatar && showFollowButton" :class="$style.followButton">
|
||||
<MkFollowButton v-if="narrow && mainRouter.currentRoute.value.name === 'user'" :user="metadata.avatar" :transparent="false" :full="false"/>
|
||||
<MkFollowButton v-else-if="mainRouter.currentRoute.value.name === 'user'" :user="metadata.avatar" :transparent="false" :full="true"/>
|
||||
<MkFollowButton v-if="mainRouter.currentRoute.value.name === 'user'" :user="metadata.avatar" :transparent="false" :full="!narrow"/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="((narrow && !hideTitle) || isFriendly) && hasTabs" :class="[$style.lower, { [$style.slim]: narrow && !isFriendly, [$style.thin]: thin_ }]">
|
||||
|
|
@ -52,7 +51,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, onUnmounted, ref, inject, defineAsyncComponent } from 'vue';
|
||||
import { onMounted, onUnmounted, ref, inject } from 'vue';
|
||||
import tinycolor from 'tinycolor2';
|
||||
import XTabs, { Tab } from './MkPageHeader.tabs.vue';
|
||||
import { getScrollPosition, scrollToTop } from '@/scripts/scroll.js';
|
||||
|
|
@ -206,7 +205,6 @@ onUnmounted(() => {
|
|||
}
|
||||
|
||||
.tabs_canBack {
|
||||
margin-left: auto;
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
|
|
@ -325,7 +323,7 @@ onUnmounted(() => {
|
|||
}
|
||||
|
||||
.titleContainer_canBack {
|
||||
margin-left: -32px;
|
||||
margin-left: -16px;
|
||||
}
|
||||
|
||||
.titleAvatarContainer {
|
||||
|
|
|
|||
|
|
@ -106,6 +106,7 @@ const enableLongPressOpenAccountMenu = computed(defaultStore.makeGetterSetter('e
|
|||
|
||||
watch([
|
||||
reactableRemoteReactionEnabled,
|
||||
mobileHeaderChange,
|
||||
renameTheButtonInPostFormToNya,
|
||||
friendlyEnableNotifications,
|
||||
friendlyEnableWidgets,
|
||||
|
|
|
|||
|
|
@ -88,8 +88,6 @@ import { unisonReload } from '@/scripts/unison-reload.js';
|
|||
let showEl = $ref(false);
|
||||
const isFriendly = ref(miLocalStorage.getItem('ui') === 'friendly');
|
||||
|
||||
if (!isFriendly.value && !defaultStore.state.mobileHeaderChange) provide('shouldOmitHeaderTitle', true);
|
||||
|
||||
const MOBILE_THRESHOLD = 500;
|
||||
|
||||
const isMobile = ref(deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD);
|
||||
|
|
@ -97,6 +95,8 @@ window.addEventListener('resize', () => {
|
|||
isMobile.value = deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD;
|
||||
});
|
||||
|
||||
if (!isFriendly.value) provide('shouldOmitHeaderTitle', true);
|
||||
|
||||
const XTutorial = defineAsyncComponent(() => import('./timeline.tutorial.vue'));
|
||||
|
||||
const isLocalTimelineAvailable = ($i == null && instance.policies.ltlAvailable) || ($i != null && $i.policies.ltlAvailable);
|
||||
|
|
|
|||
Loading…
Reference in a new issue