enhance(frontend): 新しい通報がある場合、ナビゲーションバーのコントロールパネルアイコンとコントロールパネルページの通報セクションに点が表示
This commit is contained in:
NoriDev
parent
34a211fc70
commit
f5f8630812
|
|
@ -34,6 +34,7 @@
|
|||
### Client
|
||||
- 이모티콘 피커의 검색 건수를 100개로 증가 (misskey-dev/misskey#11371)
|
||||
- about-misskey 페이지에서 클라이언트 버전을 누르면 변경 사항을 볼 수 있음
|
||||
- 새로운 신고가 있는 경우, 네비게이션 바의 제어판 아이콘과 제어판 페이지의 신고 섹션에 점을 표시
|
||||
- Enhance: 제어판 - 신고 페이지의 버튼 가독성 향상
|
||||
- Fix: (Friendly) 흐림 효과를 사용할 때 하단 내비게이션 바의 가독성이 매우 떨어지는 문제
|
||||
- Fix: 움직임이 있는 MFM 설정을 사용하지 않아도 `$[rainbow ]`문자를 볼 수 있음 (misskey-dev/misskey#11361)
|
||||
|
|
|
|||
|
|
@ -13,14 +13,17 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<a v-if="item.type === 'a'" :href="item.href" :target="item.target" :tabindex="i" class="_button item" :class="{ danger: item.danger, active: item.active }">
|
||||
<span v-if="item.icon" class="icon"><i :class="item.icon" class="ti-fw"></i></span>
|
||||
<span class="text">{{ item.text }}</span>
|
||||
<span v-if="item.indicated" class="itemIndicator"><i class="_indicatorCircle"></i></span>
|
||||
</a>
|
||||
<button v-else-if="item.type === 'button'" :tabindex="i" class="_button item" :class="{ danger: item.danger, active: item.active }" :disabled="item.active" @click="ev => item.action(ev)">
|
||||
<span v-if="item.icon" class="icon"><i :class="item.icon" class="ti-fw"></i></span>
|
||||
<span class="text">{{ item.text }}</span>
|
||||
<span v-if="item.indicated" class="itemIndicator"><i class="_indicatorCircle"></i></span>
|
||||
</button>
|
||||
<MkA v-else :to="item.to" :tabindex="i" class="_button item" :class="{ danger: item.danger, active: item.active }">
|
||||
<span v-if="item.icon" class="icon"><i :class="item.icon" class="ti-fw"></i></span>
|
||||
<span class="text">{{ item.text }}</span>
|
||||
<span v-if="item.indicated" class="itemIndicator"><i class="_indicatorCircle"></i></span>
|
||||
</MkA>
|
||||
</template>
|
||||
</div>
|
||||
|
|
@ -90,6 +93,13 @@ defineProps<{
|
|||
flex-shrink: 1;
|
||||
}
|
||||
|
||||
> .itemIndicator {
|
||||
position: absolute;
|
||||
left: 1px;
|
||||
color: var(--navIndicator);
|
||||
font-size: 8px;
|
||||
animation: blink 1s infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -149,6 +159,11 @@ defineProps<{
|
|||
width: 100%;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
> .itemIndicator {
|
||||
left: 15px;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { onActivated, onMounted, onUnmounted, provide, watch } from 'vue';
|
||||
import {computed, onActivated, onMounted, onUnmounted, provide, watch} from 'vue';
|
||||
import { i18n } from '@/i18n';
|
||||
import MkSuperMenu from '@/components/MkSuperMenu.vue';
|
||||
import MkInfo from '@/components/MkInfo.vue';
|
||||
|
|
@ -143,6 +143,7 @@ const menuDef = $computed(() => [{
|
|||
}, {
|
||||
icon: 'ti ti-exclamation-circle',
|
||||
text: i18n.ts.abuseReports,
|
||||
indicated: computed(() => thereIsUnresolvedAbuseReport),
|
||||
to: '/admin/abuses',
|
||||
active: currentPage?.route.name === 'abuses',
|
||||
}],
|
||||
|
|
|
|||
|
|
@ -26,6 +26,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<div :class="$style.divider"></div>
|
||||
<MkA v-if="$i.isAdmin || $i.isModerator" :class="$style.item" :activeClass="$style.active" to="/admin">
|
||||
<i :class="$style.itemIcon" class="ti ti-dashboard ti-fw"></i><span :class="$style.itemText">{{ i18n.ts.controlPanel }}</span>
|
||||
<span v-if="controlPanelIndicated" :class="$style.itemIndicator"><i class="_indicatorCircle"></i></span>
|
||||
</MkA>
|
||||
<button :class="$style.item" class="_button" @click="more">
|
||||
<i :class="$style.itemIcon" class="ti ti-grid-dots ti-fw"></i><span :class="$style.itemText">{{ i18n.ts.more }}</span>
|
||||
|
|
@ -65,6 +66,14 @@ const otherMenuItemIndicated = computed(() => {
|
|||
}
|
||||
return false;
|
||||
});
|
||||
let controlPanelIndicated = $ref(false);
|
||||
|
||||
os.api('admin/abuse-user-reports', {
|
||||
state: 'unresolved',
|
||||
limit: 1,
|
||||
}).then(reports => {
|
||||
if (reports.length > 0) controlPanelIndicated = true;
|
||||
});
|
||||
|
||||
function openAccountMenu(ev: MouseEvent) {
|
||||
openAccountMenu_({
|
||||
|
|
|
|||
|
|
@ -36,6 +36,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<div :class="$style.divider"></div>
|
||||
<MkA v-if="$i.isAdmin || $i.isModerator" v-tooltip.noDelay.right="i18n.ts.controlPanel" :class="$style.item" :activeClass="$style.active" to="/admin">
|
||||
<i :class="$style.itemIcon" class="ti ti-dashboard ti-fw"></i><span :class="$style.itemText">{{ i18n.ts.controlPanel }}</span>
|
||||
<span v-if="controlPanelIndicated" :class="$style.itemIndicator"><i class="_indicatorCircle"></i></span>
|
||||
</MkA>
|
||||
<button class="_button" :class="$style.item" @click="more">
|
||||
<i :class="$style.itemIcon" class="ti ti-grid-dots ti-fw"></i><span :class="$style.itemText">{{ i18n.ts.more }}</span>
|
||||
|
|
@ -78,6 +79,14 @@ const otherMenuItemIndicated = computed(() => {
|
|||
}
|
||||
return false;
|
||||
});
|
||||
let controlPanelIndicated = $ref(false);
|
||||
|
||||
os.api('admin/abuse-user-reports', {
|
||||
state: 'unresolved',
|
||||
limit: 1,
|
||||
}).then(reports => {
|
||||
if (reports.length > 0) controlPanelIndicated = true;
|
||||
});
|
||||
|
||||
const calcViewState = () => {
|
||||
iconOnly.value = (window.innerWidth <= 1279) || (defaultStore.state.menuDisplay === 'sideIcon');
|
||||
|
|
|
|||
|
|
@ -27,6 +27,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<div class="divider"></div>
|
||||
<MkA v-if="$i.isAdmin || $i.isModerator" v-click-anime class="item" activeClass="active" to="/admin" :behavior="settingsWindowed ? 'window' : null">
|
||||
<i class="ti ti-dashboard ti-fw"></i><span class="text">{{ i18n.ts.controlPanel }}</span>
|
||||
<span v-if="controlPanelIndicated" class="indicator"><i class="_indicatorCircle"></i></span>
|
||||
</MkA>
|
||||
<button v-click-anime class="item _button" @click="more">
|
||||
<i class="ti ti-dots ti-fw"></i><span class="text">{{ i18n.ts.more }}</span>
|
||||
|
|
@ -76,6 +77,14 @@ let el = $shallowRef<HTMLElement>();
|
|||
// let connection = $ref(null);
|
||||
let iconOnly = $ref(false);
|
||||
let settingsWindowed = $ref(false);
|
||||
let controlPanelIndicated = $ref(false);
|
||||
|
||||
os.api('admin/abuse-user-reports', {
|
||||
state: 'unresolved',
|
||||
limit: 1,
|
||||
}).then(reports => {
|
||||
if (reports.length > 0) controlPanelIndicated = true;
|
||||
});
|
||||
|
||||
function calcViewState() {
|
||||
iconOnly = (window.innerWidth <= WINDOW_THRESHOLD) || (menuDisplay.value === 'sideIcon');
|
||||
|
|
|
|||
|
|
@ -26,6 +26,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<div :class="$style.divider"></div>
|
||||
<MkA v-if="$i.isAdmin || $i.isModerator" :class="$style.item" :activeClass="$style.active" to="/admin">
|
||||
<i :class="$style.itemIcon" class="ti ti-dashboard ti-fw"></i><span :class="$style.itemText">{{ i18n.ts.controlPanel }}</span>
|
||||
<span v-if="controlPanelIndicated" :class="$style.itemIndicator"><i class="_indicatorCircle"></i></span>
|
||||
</MkA>
|
||||
<button :class="$style.item" class="_button" @click="more">
|
||||
<i :class="$style.itemIcon" class="ti ti-grid-dots ti-fw"></i><span :class="$style.itemText">{{ i18n.ts.more }}</span>
|
||||
|
|
@ -69,6 +70,14 @@ const otherMenuItemIndicated = computed(() => {
|
|||
}
|
||||
return false;
|
||||
});
|
||||
let controlPanelIndicated = $ref(false);
|
||||
|
||||
os.api('admin/abuse-user-reports', {
|
||||
state: 'unresolved',
|
||||
limit: 1,
|
||||
}).then(reports => {
|
||||
if (reports.length > 0) controlPanelIndicated = true;
|
||||
});
|
||||
|
||||
function openAccountMenu(ev: MouseEvent) {
|
||||
openAccountMenu_({
|
||||
|
|
|
|||
|
|
@ -36,6 +36,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<div :class="$style.divider"></div>
|
||||
<MkA v-if="$i.isAdmin || $i.isModerator" v-tooltip.noDelay.right="i18n.ts.controlPanel" :class="$style.item" :activeClass="$style.active" to="/admin">
|
||||
<i :class="$style.itemIcon" class="ti ti-dashboard ti-fw"></i><span :class="$style.itemText">{{ i18n.ts.controlPanel }}</span>
|
||||
<span v-if="controlPanelIndicated" :class="$style.itemIndicator"><i class="_indicatorCircle"></i></span>
|
||||
</MkA>
|
||||
<button class="_button" :class="$style.item" @click="more">
|
||||
<i :class="$style.itemIcon" class="ti ti-grid-dots ti-fw"></i><span :class="$style.itemText">{{ i18n.ts.more }}</span>
|
||||
|
|
@ -85,6 +86,14 @@ const otherMenuItemIndicated = computed(() => {
|
|||
}
|
||||
return false;
|
||||
});
|
||||
let controlPanelIndicated = $ref(false);
|
||||
|
||||
os.api('admin/abuse-user-reports', {
|
||||
state: 'unresolved',
|
||||
limit: 1,
|
||||
}).then(reports => {
|
||||
if (reports.length > 0) controlPanelIndicated = true;
|
||||
});
|
||||
|
||||
const calcViewState = () => {
|
||||
iconOnly.value = (window.innerWidth <= 1279) || (defaultStore.state.menuDisplay === 'sideIcon');
|
||||
|
|
|
|||
Loading…
Reference in a new issue