Mizah/mizzkey
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

インジケーターとか

Browse source
This commit is contained in:
mattyatea 2023-11-02 14:32:07 +09:00
parent b1b6966b6b
commit c2208fb1c5
15 changed files with 29 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

4
packages/frontend/src/ui/_common_/navbar-for-mobile.vue
View file

@ -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) {

6
packages/frontend/src/ui/_common_/navbar.vue
View file

@ -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);

4
packages/frontend/src/ui/classic.sidebar.vue
View file

@ -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>(() => {

3
packages/frontend/src/ui/deck.vue
View file

@ -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,

4
packages/frontend/src/ui/universal.vue
View file

@ -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) {