インジケーターとか
This commit is contained in:
mattyatea
parent
b1b6966b6b
commit
c2208fb1c5
15 changed files with 29 additions and 21 deletions
|
|
@ -11,13 +11,13 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<button v-if="item.action" v-click-anime class="_button item" :class="{gamingDark: gamingType === 'dark',gamingLight: gamingType === 'light' }" @click="$event => { item.action($event); close(); }">
|
||||
<i class="icon" :class="item.icon"></i>
|
||||
<div class="text">{{ item.text }}</div>
|
||||
<span v-if="item.indicate && item.indicateValue" class="_indicateCounter indicatorWithValue">{{ item.indicateValue }}</span>
|
||||
<span v-if="item.indicate && item.indicateValue && indicatorCounterToggle" class="_indicateCounter indicatorWithValue">{{ item.indicateValue }}</span>
|
||||
<span v-else-if="item.indicate" class="indicator"><i class="_indicatorCircle"></i></span>
|
||||
</button>
|
||||
<MkA v-else v-click-anime :to="item.to" class="item" :class="{gamingDark: gamingType === 'dark',gamingLight: gamingType === 'light' }" @click.passive="close()">
|
||||
<i class="icon" :class="item.icon"></i>
|
||||
<div class="text">{{ item.text }}</div>
|
||||
<span v-if="item.indicate && item.indicateValue" class="_indicateCounter indicatorWithValue">{{ item.indicateValue }}</span>
|
||||
<span v-if="item.indicate && item.indicateValue && indicatorCounterToggle" class="_indicateCounter indicatorWithValue">{{ item.indicateValue }}</span>
|
||||
<span v-else-if="item.indicate" class="indicator"><i class="_indicatorCircle"></i></span>
|
||||
</MkA>
|
||||
</template>
|
||||
|
|
@ -34,6 +34,7 @@ import { defaultStore } from '@/store.js';
|
|||
import { deviceKind } from '@/scripts/device-kind.js';
|
||||
|
||||
const gamingType = computed(defaultStore.makeGetterSetter('gamingType'));
|
||||
const indicatorCounterToggle = computed(defaultStore.makeGetterSetter('indicatorCounterToggle'));
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
src?: HTMLElement;
|
||||
|
|
|
|||
|
|
@ -69,9 +69,6 @@ onUnmounted(() => {
|
|||
if (connection) connection.dispose();
|
||||
});
|
||||
|
||||
onDeactivated(() => {
|
||||
if (connection) connection.dispose();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
|
|
|
|||
|
|
@ -144,6 +144,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<MkSwitch v-model="enableGamingMode">{{ i18n.ts.gamingMode }} <template #caption>{{ i18n.ts.gamingModeInfo }} </template></MkSwitch>
|
||||
<MkSwitch v-model="enableonlyAndWithSave">{{ i18n.ts.onlyAndWithSave}}<template #caption>{{ i18n.ts.onlyAndWithSaveInfo }} </template></MkSwitch>
|
||||
<MkSwitch v-model="enablehanntenn">{{ i18n.ts.hanntenn }}<template #caption>{{ i18n.ts.hanntennInfo }} </template></MkSwitch>
|
||||
<MkSwitch v-model="indicatorCounterToggle">{{ i18n.ts.notificationIndicator }}</MkSwitch>
|
||||
</div>
|
||||
<div>
|
||||
<MkRadios v-model="emojiStyle">
|
||||
|
|
@ -297,6 +298,7 @@ const showVisibilityColor = computed(defaultStore.makeGetterSetter('showVisibili
|
|||
const FeaturedOrNote = computed(defaultStore.makeGetterSetter('FeaturedOrNote'))
|
||||
const defaultWithReplies = computed(defaultStore.makeGetterSetter('defaultWithReplies'));
|
||||
const disableStreamingTimeline = computed(defaultStore.makeGetterSetter('disableStreamingTimeline'));
|
||||
const indicatorCounterToggle = computed(defaultStore.makeGetterSetter('indicatorCounterToggle'));
|
||||
|
||||
watch(lang, () => {
|
||||
miLocalStorage.setItem('lang', lang.value as string);
|
||||
|
|
|
|||
|
|
@ -74,11 +74,11 @@ let sendReadMessage = $computed(() => pushRegistrationInServer?.sendReadMessage
|
|||
const userLists = await os.api('users/lists/list');
|
||||
|
||||
async function readAllUnreadNotes() {
|
||||
await os.apiWithDialog('i/read-all-unread-notes');
|
||||
await os.api('i/read-all-unread-notes');
|
||||
}
|
||||
|
||||
async function readAllNotifications() {
|
||||
await os.apiWithDialog('notifications/mark-all-as-read');
|
||||
await os.api('notifications/mark-all-as-read');
|
||||
}
|
||||
|
||||
async function updateReceiveConfig(type, value) {
|
||||
|
|
|
|||
|
|
@ -276,6 +276,10 @@ export const defaultStore = markRaw(new Storage('base', {
|
|||
where: 'device',
|
||||
default: 'dark',
|
||||
},
|
||||
indicatorCounterToggle: {
|
||||
where: 'device',
|
||||
default: 'true',
|
||||
},
|
||||
bannerUrl:{
|
||||
where: 'device',
|
||||
default: bannerDark
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
:class="$style.itemText">{{ navbarItemDef[item].title }}</span>
|
||||
<span v-if="navbarItemDef[item].indicated"
|
||||
:class="[$style.itemIndicator,{[$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light'}]">
|
||||
<span v-if="navbarItemDef[item].indicateValue" class="_indicateCounter" :class="$style.itemIndicateValueIcon">{{ navbarItemDef[item].indicateValue }}</span><i
|
||||
<span v-if="navbarItemDef[item].indicateValue && indicatorCounterToggle" class="_indicateCounter" :class="$style.itemIndicateValueIcon">{{ navbarItemDef[item].indicateValue }}</span><i
|
||||
v-else class="_indicatorCircle"></i></span>
|
||||
</component>
|
||||
</template>
|
||||
|
|
@ -82,7 +82,7 @@ import {$i, openAccountMenu as openAccountMenu_} from '@/account';
|
|||
import {bannerDark, bannerLight, defaultStore, iconDark, iconLight} from '@/store';
|
||||
import {i18n} from '@/i18n';
|
||||
import {instance} from '@/instance';
|
||||
|
||||
const indicatorCounterToggle = computed(defaultStore.makeGetterSetter('indicatorCounterToggle'));
|
||||
let bannerUrl = ref(defaultStore.state.bannerUrl);
|
||||
let iconUrl = ref(defaultStore.state.iconUrl);
|
||||
function hexToRgb(hex) {
|
||||
|
|
|
|||
|
|
@ -36,8 +36,8 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<i class="ti-fw" :class="[$style.itemIcon, navbarItemDef[item].icon]"></i><span
|
||||
:class="$style.itemText">{{ navbarItemDef[item].title }}</span>
|
||||
<span v-if="navbarItemDef[item].indicated"
|
||||
:class="[$style.itemIndicator,{[$style.gamingDark]: gamingType === 'dark',[$style.gamingLight]: gamingType === 'light'}]">
|
||||
<span v-if="navbarItemDef[item].indicateValue" class="_indicateCounter" :class="$style.itemIndicateValueIcon">{{ navbarItemDef[item].indicateValue }}</span><i
|
||||
:class="[$style.itemIndicator ,{[$style.gamingDark]: gamingType === 'dark',[$style.gamingLight]: gamingType === 'light'}]">
|
||||
<span v-if="navbarItemDef[item].indicateValue && indicatorCounterToggle" class="_indicateCounter" :class="$style.itemIndicateValueIcon">{{ navbarItemDef[item].indicateValue }}</span><i
|
||||
v-else class="_indicatorCircle"></i></span>
|
||||
</component>
|
||||
</template>
|
||||
|
|
@ -95,7 +95,7 @@ import {$i, openAccountMenu as openAccountMenu_} from '@/account';
|
|||
import {bannerDark, bannerLight, defaultStore, iconDark, iconLight} from '@/store';
|
||||
import {i18n} from '@/i18n';
|
||||
import {instance} from '@/instance';
|
||||
|
||||
const indicatorCounterToggle = computed(defaultStore.makeGetterSetter('indicatorCounterToggle'));
|
||||
function hexToRgb(hex) {
|
||||
hex = hex.replace(/^#/, '');
|
||||
const r = parseInt(hex.substring(0, 2), 16);
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<component :is="navbarItemDef[item].to ? 'MkA' : 'button'" v-else-if="navbarItemDef[item] && (navbarItemDef[item].show !== false)" v-click-anime class="item _button" :class="item" activeClass="active" :to="navbarItemDef[item].to" v-on="navbarItemDef[item].action ? { click: navbarItemDef[item].action } : {}">
|
||||
<i class="ti-fw" :class="navbarItemDef[item].icon"></i><span class="text">{{ navbarItemDef[item].title }}</span>
|
||||
<span v-if="navbarItemDef[item].indicated" class="indicator">
|
||||
<span v-if="navbarItemDef[item].indicateValue" class="_indicateCounter itemIndicateValueIcon">{{ navbarItemDef[item].indicateValue }}</span>
|
||||
<span v-if="navbarItemDef[item].indicateValue && indicatorCounterToggle" class="_indicateCounter itemIndicateValueIcon">{{ navbarItemDef[item].indicateValue }}</span>
|
||||
<i v-else class="_indicatorCircle"></i>
|
||||
</span>
|
||||
</component>
|
||||
|
|
@ -64,7 +64,7 @@ import { instance } from '@/instance.js';
|
|||
import { i18n } from '@/i18n.js';
|
||||
|
||||
const WINDOW_THRESHOLD = 1400;
|
||||
|
||||
const indicatorCounterToggle = computed(defaultStore.makeGetterSetter('indicatorCounterToggle'));
|
||||
const menu = $ref(defaultStore.state.menu);
|
||||
const menuDisplay = computed(defaultStore.makeGetterSetter('menuDisplay'));
|
||||
const otherNavItemIndicated = computed<boolean>(() => {
|
||||
|
|
|
|||
|
|
@ -55,7 +55,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<button :class="$style.navButton" class="_button" @click="mainRouter.push('/my/notifications')">
|
||||
<i :class="$style.navButtonIcon" class="ti ti-bell"></i>
|
||||
<span v-if="$i?.hasUnreadNotification" :class="$style.navButtonIndicator">
|
||||
<span class="_indicateCounter" :class="$style.itemIndicateValueIcon">{{ $i.unreadNotificationsCount > 99 ? '99+' : $i.unreadNotificationsCount }}</span>
|
||||
<span class="_indicateCounter" :class="$style.itemIndicateValueIcon">{{ $i.unreadNotificationsCount > 99 && indicatorCounterToggle ? '99+' : $i.unreadNotificationsCount }}</span>
|
||||
</span>
|
||||
</button>
|
||||
<button :class="$style.postButton" class="_button" @click="os.post()"><i :class="$style.navButtonIcon" class="ti ti-pencil"></i></button>
|
||||
|
|
@ -120,6 +120,7 @@ import XDirectColumn from '@/ui/deck/direct-column.vue';
|
|||
import XRoleTimelineColumn from '@/ui/deck/role-timeline-column.vue';
|
||||
const XStatusBars = defineAsyncComponent(() => import('@/ui/_common_/statusbars.vue'));
|
||||
const XAnnouncements = defineAsyncComponent(() => import('@/ui/_common_/announcements.vue'));
|
||||
const indicatorCounterToggle = computed(defaultStore.makeGetterSetter('indicatorCounterToggle'));
|
||||
|
||||
const columnComponents = {
|
||||
main: XMainColumn,
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<button :class="$style.navButton" class="_button" @click="mainRouter.push('/my/notifications')"><i
|
||||
:class="$style.navButtonIcon" class="ti ti-bell"></i><span v-if="$i?.hasUnreadNotification"
|
||||
:class="[$style.navButtonIndicator,{[$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light'}]">
|
||||
<span class="_indicateCounter" :class="$style.itemIndicateValueIcon">{{ $i.unreadNotificationsCount > 99 ? '99+' : $i.unreadNotificationsCount }}</span>
|
||||
<span class="_indicateCounter" :class="$style.itemIndicateValueIcon">{{ $i.unreadNotificationsCount > 99 && indicatorCounterToggle ? '99+' : $i.unreadNotificationsCount }}</span>
|
||||
</span></button>
|
||||
<button :class="$style.navButton" class="_button" @click="widgetsShowing = true"><i :class="$style.navButtonIcon"
|
||||
class="ti ti-apps"></i>
|
||||
|
|
@ -126,7 +126,7 @@ import {useScrollPositionManager} from '@/nirax';
|
|||
|
||||
const darkMode = computed(defaultStore.makeGetterSetter('darkMode'));
|
||||
const gamingMode = computed(defaultStore.makeGetterSetter('gamingMode'));
|
||||
|
||||
const indicatorCounterToggle = computed(defaultStore.makeGetterSetter('indicatorCounterToggle'));
|
||||
let gaming = ref()
|
||||
// gaming.valueに新しい値を代入する
|
||||
if (darkMode.value && gamingMode.value == true) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue