fix
This commit is contained in:
mattyatea
parent
56066ae836
commit
cb3983b741
|
|
@ -4,69 +4,69 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
-->
|
-->
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<button
|
<button
|
||||||
v-if="!link"
|
v-if="!link"
|
||||||
ref="el" class="_button"
|
ref="el" class="_button"
|
||||||
:class="[
|
:class="[
|
||||||
$style.root,
|
$style.root,
|
||||||
{
|
{
|
||||||
[$style.inline]: inline,
|
[$style.inline]: inline,
|
||||||
[$style.primary]: primary,
|
[$style.primary]: primary,
|
||||||
[$style.gradate]: gradate,
|
[$style.gradate]: gradate,
|
||||||
[$style.danger]: danger,
|
[$style.danger]: danger,
|
||||||
[$style.rounded]: rounded,
|
[$style.rounded]: rounded,
|
||||||
[$style.full]: full,
|
[$style.full]: full,
|
||||||
[$style.small]: small,
|
[$style.small]: small,
|
||||||
[$style.large]: large,
|
[$style.large]: large,
|
||||||
[$style.transparent]: transparent,
|
[$style.transparent]: transparent,
|
||||||
[$style.asLike]: asLike,
|
[$style.asLike]: asLike,
|
||||||
[$style.gamingDark]: gaming === 'dark',
|
[$style.gamingDark]: gaming === 'dark',
|
||||||
[$style.gamingLight]: gaming === 'light',
|
[$style.gamingLight]: gaming === 'light',
|
||||||
}
|
}
|
||||||
]"
|
]"
|
||||||
:type="type"
|
:type="type"
|
||||||
:name="name"
|
:name="name"
|
||||||
:value="value"
|
:value="value"
|
||||||
@click="emit('click', $event)"
|
@click="emit('click', $event)"
|
||||||
@mousedown="onMousedown"
|
@mousedown="onMousedown"
|
||||||
>
|
>
|
||||||
<div ref="ripples" :class="$style.ripples" :data-children-class="$style.ripple"></div>
|
<div ref="ripples" :class="$style.ripples" :data-children-class="$style.ripple"></div>
|
||||||
<div :class="$style.content">
|
<div :class="$style.content">
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
</div>
|
</div>
|
||||||
</button>
|
</button>
|
||||||
<MkA
|
<MkA
|
||||||
v-else class="_button"
|
v-else class="_button"
|
||||||
:class="[
|
:class="[
|
||||||
$style.root,
|
$style.root,
|
||||||
{
|
{
|
||||||
[$style.inline]: inline,
|
[$style.inline]: inline,
|
||||||
[$style.primary]: primary,
|
[$style.primary]: primary,
|
||||||
[$style.gradate]: gradate,
|
[$style.gradate]: gradate,
|
||||||
[$style.danger]: danger,
|
[$style.danger]: danger,
|
||||||
[$style.rounded]: rounded,
|
[$style.rounded]: rounded,
|
||||||
[$style.full]: full,
|
[$style.full]: full,
|
||||||
[$style.small]: small,
|
[$style.small]: small,
|
||||||
[$style.large]: large,
|
[$style.large]: large,
|
||||||
[$style.transparent]: transparent,
|
[$style.transparent]: transparent,
|
||||||
[$style.asLike]: asLike,
|
[$style.asLike]: asLike,
|
||||||
[$style.gamingDark]: gaming === 'dark',
|
[$style.gamingDark]: gaming === 'dark',
|
||||||
[$style.gamingLight]: gaming === 'light',
|
[$style.gamingLight]: gaming === 'light',
|
||||||
}
|
}
|
||||||
]"
|
]"
|
||||||
:to="to"
|
:to="to"
|
||||||
@mousedown="onMousedown"
|
@mousedown="onMousedown"
|
||||||
>
|
>
|
||||||
<div ref="ripples" :class="$style.ripples" :data-children-class="$style.ripple"></div>
|
<div ref="ripples" :class="$style.ripples" :data-children-class="$style.ripple"></div>
|
||||||
<div :class="$style.content">
|
<div :class="$style.content">
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
</div>
|
</div>
|
||||||
</MkA>
|
</MkA>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { nextTick, onMounted, shallowRef, computed, ref, watch } from 'vue';
|
import { nextTick, onMounted, shallowRef, computed, ref, watch } from 'vue';
|
||||||
import {defaultStore} from "@/store.js";
|
import { defaultStore } from '@/store.js';
|
||||||
|
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
type?: 'button' | 'submit' | 'reset';
|
type?: 'button' | 'submit' | 'reset';
|
||||||
|
|
@ -96,32 +96,32 @@ let gaming = ref(''); // 0-off , 1-dark , 2-light
|
||||||
// gaming.valueに新しい値を代入する
|
// gaming.valueに新しい値を代入する
|
||||||
|
|
||||||
if (darkMode.value && gamingMode.value && props.primary || darkMode.value && gamingMode.value && props.gradate ) {
|
if (darkMode.value && gamingMode.value && props.primary || darkMode.value && gamingMode.value && props.gradate ) {
|
||||||
gaming.value = 'dark';
|
gaming.value = 'dark';
|
||||||
} else if (!darkMode.value && gamingMode.value && props.primary || darkMode.value && gamingMode.value && props.gradate ) {
|
} else if (!darkMode.value && gamingMode.value && props.primary || darkMode.value && gamingMode.value && props.gradate ) {
|
||||||
gaming.value = 'light';
|
gaming.value = 'light';
|
||||||
}else{
|
} else {
|
||||||
gaming.value = '';
|
gaming.value = '';
|
||||||
}
|
}
|
||||||
|
|
||||||
watch(darkMode, () => {
|
watch(darkMode, () => {
|
||||||
if (darkMode.value && gamingMode.value && props.primary || darkMode.value && gamingMode.value && props.gradate ) {
|
if (darkMode.value && gamingMode.value && props.primary || darkMode.value && gamingMode.value && props.gradate ) {
|
||||||
gaming.value = 'dark';
|
gaming.value = 'dark';
|
||||||
} else if (!darkMode.value && gamingMode.value && props.primary|| darkMode.value && gamingMode.value && props.gradate) {
|
} else if (!darkMode.value && gamingMode.value && props.primary || darkMode.value && gamingMode.value && props.gradate) {
|
||||||
gaming.value = 'light';
|
gaming.value = 'light';
|
||||||
}else{
|
} else {
|
||||||
gaming.value = '';
|
gaming.value = '';
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
|
|
||||||
watch(gamingMode, () => {
|
watch(gamingMode, () => {
|
||||||
if (darkMode.value && gamingMode.value && props.primary || darkMode.value && gamingMode.value && props.gradate ) {
|
if (darkMode.value && gamingMode.value && props.primary || darkMode.value && gamingMode.value && props.gradate ) {
|
||||||
gaming.value = 'dark';
|
gaming.value = 'dark';
|
||||||
} else if (!darkMode.value && gamingMode.value && props.primary || darkMode.value && gamingMode.value && props.gradate ) {
|
} else if (!darkMode.value && gamingMode.value && props.primary || darkMode.value && gamingMode.value && props.gradate ) {
|
||||||
gaming.value = 'light';
|
gaming.value = 'light';
|
||||||
}else{
|
} else {
|
||||||
gaming.value = '';
|
gaming.value = '';
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
const emit = defineEmits<{
|
const emit = defineEmits<{
|
||||||
(ev: 'click', payload: MouseEvent): void;
|
(ev: 'click', payload: MouseEvent): void;
|
||||||
}>();
|
}>();
|
||||||
|
|
@ -257,6 +257,9 @@ function onMousedown(evt: MouseEvent): void {
|
||||||
-moz-animation: AnimationLight var(--gamingspeed) cubic-bezier(0, 0.2, 0.90, 1) infinite ;
|
-moz-animation: AnimationLight var(--gamingspeed) cubic-bezier(0, 0.2, 0.90, 1) infinite ;
|
||||||
animation: AnimationLight var(--gamingspeed) cubic-bezier(0, 0.2, 0.90, 1) infinite ;
|
animation: AnimationLight var(--gamingspeed) cubic-bezier(0, 0.2, 0.90, 1) infinite ;
|
||||||
}
|
}
|
||||||
|
&:hover{
|
||||||
|
background: var(--accent);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.gamingDark {
|
&.gamingDark {
|
||||||
|
|
|
||||||
|
|
@ -4,167 +4,188 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
-->
|
-->
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div :class="$style.root">
|
<div :class="$style.root">
|
||||||
<div :class="$style.top">
|
<div :class="$style.top">
|
||||||
<div :class="$style.banner" :style="{ backgroundImage: `url(${ bannerUrl })` }"></div>
|
<div :class="$style.banner" :style="{ backgroundImage: `url(${ bannerUrl })` }"></div>
|
||||||
<button class="_button" :class="$style.instance" @click="openInstanceMenu">
|
<button class="_button" :class="$style.instance" @click="openInstanceMenu">
|
||||||
<img :src="iconUrl" alt="" :class="$style.instanceIcon"/>
|
<img :src="iconUrl" alt="" :class="$style.instanceIcon"/>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div :class="$style.middle">
|
<div :class="$style.middle">
|
||||||
<MkA :class="[$style.item, { [$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light' }]"
|
<MkA
|
||||||
:activeClass="$style.active" to="/" exact>
|
:class="[$style.item, { [$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light' }]"
|
||||||
<i :class="$style.itemIcon" class="ti ti-home ti-fw"></i><span :class="$style.itemText">{{
|
:activeClass="$style.active" to="/" exact
|
||||||
i18n.ts.timeline
|
>
|
||||||
}}</span>
|
<i :class="$style.itemIcon" class="ti ti-home ti-fw"></i><span :class="$style.itemText">{{
|
||||||
</MkA>
|
i18n.ts.timeline
|
||||||
<template v-for="item in menu">
|
}}</span>
|
||||||
<div v-if="item === '-'" :class="$style.divider"></div>
|
</MkA>
|
||||||
<component :is="navbarItemDef[item].to ? 'MkA' : 'button'"
|
<template v-for="item in menu">
|
||||||
v-else-if="navbarItemDef[item] && (navbarItemDef[item].show !== false)" class="_button"
|
<div v-if="item === '-'" :class="$style.divider"></div>
|
||||||
:class="[$style.item, { [$style.active]: gaming === '' && navbarItemDef[item].active, [$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light' }]"
|
<component
|
||||||
:activeClass="$style.active" :to="navbarItemDef[item].to"
|
:is="navbarItemDef[item].to ? 'MkA' : 'button'"
|
||||||
v-on="navbarItemDef[item].action ? { click: navbarItemDef[item].action } : {}">
|
v-else-if="navbarItemDef[item] && (navbarItemDef[item].show !== false)" class="_button"
|
||||||
<i class="ti-fw" :class="[$style.itemIcon, navbarItemDef[item].icon]"></i><span
|
:class="[$style.item, { [$style.active]: gaming === '' && navbarItemDef[item].active, [$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light' }]"
|
||||||
:class="$style.itemText">{{ navbarItemDef[item].title }}</span>
|
:activeClass="$style.active" :to="navbarItemDef[item].to"
|
||||||
<span v-if="navbarItemDef[item].indicated"
|
v-on="navbarItemDef[item].action ? { click: navbarItemDef[item].action } : {}"
|
||||||
:class="[$style.itemIndicator,{[$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light'}]">
|
>
|
||||||
|
<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]: gaming === 'dark',[$style.gamingLight]: gaming === 'light'}]"
|
||||||
|
>
|
||||||
<span v-if="navbarItemDef[item].indicateValue && indicatorCounterToggle" 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>
|
v-else class="_indicatorCircle"
|
||||||
</component>
|
></i></span>
|
||||||
</template>
|
</component>
|
||||||
<div :class="$style.divider"></div>
|
</template>
|
||||||
<MkA v-if="$i.isAdmin || $i.isModerator"
|
<div :class="$style.divider"></div>
|
||||||
:class="[$style.item, { [$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light' }]"
|
<MkA
|
||||||
:activeClass="$style.active" to="/admin">
|
v-if="$i.isAdmin || $i.isModerator"
|
||||||
<i :class="$style.itemIcon" class="ti ti-dashboard ti-fw"></i><span
|
:class="[$style.item, { [$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light' }]"
|
||||||
:class="$style.itemText">{{ i18n.ts.controlPanel }}</span>
|
:activeClass="$style.active" to="/admin"
|
||||||
</MkA>
|
>
|
||||||
<button
|
<i :class="$style.itemIcon" class="ti ti-dashboard ti-fw"></i><span
|
||||||
:class="[$style.item, { [$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light' }]"
|
:class="$style.itemText"
|
||||||
class="_button" @click="more">
|
>{{ i18n.ts.controlPanel }}</span>
|
||||||
<i :class="$style.itemIcon" class="ti ti-grid-dots ti-fw"></i><span :class="$style.itemText">{{
|
</MkA>
|
||||||
i18n.ts.more
|
<button
|
||||||
}}</span>
|
:class="[$style.item, { [$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light' }]"
|
||||||
<span v-if="otherMenuItemIndicated"
|
class="_button" @click="more"
|
||||||
:class="[$style.itemIndicator,{[$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light'}]"><i
|
>
|
||||||
class="_indicatorCircle"></i></span>
|
<i :class="$style.itemIcon" class="ti ti-grid-dots ti-fw"></i><span :class="$style.itemText">{{
|
||||||
</button>
|
i18n.ts.more
|
||||||
<MkA :class="[$style.item, { [$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light' }]"
|
}}</span>
|
||||||
:activeClass="$style.active" to="/settings">
|
<span
|
||||||
<i :class="$style.itemIcon" class="ti ti-settings ti-fw"></i><span :class="$style.itemText">{{
|
v-if="otherMenuItemIndicated"
|
||||||
i18n.ts.settings
|
:class="[$style.itemIndicator,{[$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light'}]"
|
||||||
}}</span>
|
><i
|
||||||
</MkA>
|
class="_indicatorCircle"
|
||||||
</div>
|
></i></span>
|
||||||
<div :class="$style.bottom">
|
</button>
|
||||||
<button class="_button"
|
<MkA
|
||||||
:class="[$style.post ,{[$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light',}]"
|
:class="[$style.item, { [$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light' }]"
|
||||||
data-cy-open-post-form @click="os.post">
|
:activeClass="$style.active" to="/settings"
|
||||||
<i :class="$style.postIcon" class="ti ti-pencil ti-fw"></i><span style="position: relative;">{{
|
>
|
||||||
i18n.ts.note
|
<i :class="$style.itemIcon" class="ti ti-settings ti-fw"></i><span :class="$style.itemText">{{
|
||||||
}}</span>
|
i18n.ts.settings
|
||||||
</button>
|
}}</span>
|
||||||
<button class="_button" :class="$style.account" @click="openAccountMenu">
|
</MkA>
|
||||||
<MkAvatar :user="$i" :class="$style.avatar"/>
|
</div>
|
||||||
<MkAcct :class="$style.acct" class="_nowrap" :user="$i"/>
|
<div :class="$style.bottom">
|
||||||
</button>
|
<button
|
||||||
</div>
|
class="_button"
|
||||||
</div>
|
:class="[$style.post ,{[$style.gamingDark]: gamingType === 'dark',[$style.gamingLight]: gamingType === 'light',}]"
|
||||||
|
data-cy-open-post-form @click="os.post"
|
||||||
|
>
|
||||||
|
<i :class="$style.postIcon" class="ti ti-pencil ti-fw"></i><span style="position: relative;">{{
|
||||||
|
i18n.ts.note
|
||||||
|
}}</span>
|
||||||
|
</button>
|
||||||
|
<button class="_button" :class="$style.account" @click="openAccountMenu">
|
||||||
|
<MkAvatar :user="$i" :class="$style.avatar"/>
|
||||||
|
<MkAcct :class="$style.acct" class="_nowrap" :user="$i"/>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import {computed, defineAsyncComponent, ref, toRef, watch} from 'vue';
|
import { computed, defineAsyncComponent, ref, toRef, watch } from 'vue';
|
||||||
import {openInstanceMenu} from './common.js';
|
import { openInstanceMenu } from './common.js';
|
||||||
import * as os from '@/os';
|
import * as os from '@/os';
|
||||||
import {navbarItemDef} from '@/navbar.js';
|
import { navbarItemDef } from '@/navbar.js';
|
||||||
import {$i, openAccountMenu as openAccountMenu_} from '@/account';
|
import { $i, openAccountMenu as openAccountMenu_ } from '@/account';
|
||||||
import {bannerDark, bannerLight, defaultStore, iconDark, iconLight} from '@/store';
|
import { bannerDark, bannerLight, defaultStore, iconDark, iconLight } from '@/store';
|
||||||
import {i18n} from '@/i18n';
|
import { i18n } from '@/i18n';
|
||||||
import {instance} from '@/instance';
|
let gamingType = computed(defaultStore.makeGetterSetter('gamingType'));
|
||||||
const indicatorCounterToggle = computed(defaultStore.makeGetterSetter('indicatorCounterToggle'));
|
const indicatorCounterToggle = computed(defaultStore.makeGetterSetter('indicatorCounterToggle'));
|
||||||
let bannerUrl = ref(defaultStore.state.bannerUrl);
|
let bannerUrl = ref(defaultStore.state.bannerUrl);
|
||||||
let iconUrl = ref(defaultStore.state.iconUrl);
|
let iconUrl = ref(defaultStore.state.iconUrl);
|
||||||
|
|
||||||
function hexToRgb(hex) {
|
function hexToRgb(hex) {
|
||||||
// 16進数のカラーコードから "#" を除去
|
// 16進数のカラーコードから "#" を除去
|
||||||
hex = hex.replace(/^#/, '');
|
hex = hex.replace(/^#/, '');
|
||||||
|
|
||||||
// 16進数をRGBに変換
|
// 16進数をRGBに変換
|
||||||
const r = parseInt(hex.substring(0, 2), 16);
|
const r = parseInt(hex.substring(0, 2), 16);
|
||||||
const g = parseInt(hex.substring(2, 4), 16);
|
const g = parseInt(hex.substring(2, 4), 16);
|
||||||
const b = parseInt(hex.substring(4, 6), 16);
|
const b = parseInt(hex.substring(4, 6), 16);
|
||||||
|
|
||||||
return `${r},${g},${b}`;
|
return `${r},${g},${b}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
const darkMode = computed(defaultStore.makeGetterSetter('darkMode'));
|
const darkMode = computed(defaultStore.makeGetterSetter('darkMode'));
|
||||||
const gamingMode = computed(defaultStore.makeGetterSetter('gamingMode'));
|
const gamingMode = computed(defaultStore.makeGetterSetter('gamingMode'));
|
||||||
document.documentElement.style.setProperty('--homeColor', hexToRgb(defaultStore.state.homeColor));
|
document.documentElement.style.setProperty('--homeColor', hexToRgb(defaultStore.state.homeColor));
|
||||||
document.documentElement.style.setProperty("--followerColor",hexToRgb(defaultStore.state.followerColor));
|
document.documentElement.style.setProperty('--followerColor', hexToRgb(defaultStore.state.followerColor));
|
||||||
document.documentElement.style.setProperty("--specifiedColor",hexToRgb(defaultStore.state.specifiedColor))
|
document.documentElement.style.setProperty('--specifiedColor', hexToRgb(defaultStore.state.specifiedColor));
|
||||||
document.documentElement.style.setProperty('--gamingspeed', defaultStore.state.numberOfGamingSpeed+'s');
|
document.documentElement.style.setProperty('--gamingspeed', defaultStore.state.numberOfGamingSpeed + 's');
|
||||||
|
|
||||||
let gaming = ref()
|
let gaming = ref();
|
||||||
if (darkMode.value) {
|
if (darkMode.value) {
|
||||||
bannerUrl.value = bannerDark;
|
bannerUrl.value = bannerDark;
|
||||||
iconUrl.value = iconDark;
|
iconUrl.value = iconDark;
|
||||||
} else {
|
} else {
|
||||||
bannerUrl.value = bannerLight;
|
bannerUrl.value = bannerLight;
|
||||||
iconUrl.value = iconLight;
|
iconUrl.value = iconLight;
|
||||||
}
|
}
|
||||||
watch(darkMode, () => {
|
watch(darkMode, () => {
|
||||||
if (darkMode.value) {
|
if (darkMode.value) {
|
||||||
bannerUrl.value = bannerDark;
|
bannerUrl.value = bannerDark;
|
||||||
iconUrl.value = iconDark;
|
iconUrl.value = iconDark;
|
||||||
} else {
|
} else {
|
||||||
bannerUrl.value = bannerLight;
|
bannerUrl.value = bannerLight;
|
||||||
iconUrl.value = iconLight;
|
iconUrl.value = iconLight;
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
// gaming.valueに新しい値を代入する
|
// gaming.valueに新しい値を代入する
|
||||||
if (darkMode.value && gamingMode.value == true) {
|
if (darkMode.value && gamingMode.value == true) {
|
||||||
gaming.value = 'dark';
|
gaming.value = 'dark';
|
||||||
} else if (!darkMode.value && gamingMode.value == true) {
|
} else if (!darkMode.value && gamingMode.value == true) {
|
||||||
gaming.value = 'light';
|
gaming.value = 'light';
|
||||||
} else {
|
} else {
|
||||||
gaming.value = '';
|
gaming.value = '';
|
||||||
}
|
}
|
||||||
|
|
||||||
watch(darkMode, () => {
|
watch(darkMode, () => {
|
||||||
if (darkMode.value && gamingMode.value == true) {
|
if (darkMode.value && gamingMode.value == true) {
|
||||||
gaming.value = 'dark';
|
gaming.value = 'dark';
|
||||||
} else if (!darkMode.value && gamingMode.value == true) {
|
} else if (!darkMode.value && gamingMode.value == true) {
|
||||||
gaming.value = 'light';
|
gaming.value = 'light';
|
||||||
} else {
|
} else {
|
||||||
gaming.value = '';
|
gaming.value = '';
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
|
|
||||||
watch(gamingMode, () => {
|
watch(gamingMode, () => {
|
||||||
if (darkMode.value && gamingMode.value == true) {
|
if (darkMode.value && gamingMode.value == true) {
|
||||||
gaming.value = 'dark';
|
gaming.value = 'dark';
|
||||||
} else if (!darkMode.value && gamingMode.value == true) {
|
} else if (!darkMode.value && gamingMode.value == true) {
|
||||||
gaming.value = 'light';
|
gaming.value = 'light';
|
||||||
} else {
|
} else {
|
||||||
gaming.value = '';
|
gaming.value = '';
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
const menu = toRef(defaultStore.state, 'menu');
|
const menu = toRef(defaultStore.state, 'menu');
|
||||||
const otherMenuItemIndicated = computed(() => {
|
const otherMenuItemIndicated = computed(() => {
|
||||||
for (const def in navbarItemDef) {
|
for (const def in navbarItemDef) {
|
||||||
if (menu.value.includes(def)) continue;
|
if (menu.value.includes(def)) continue;
|
||||||
if (navbarItemDef[def].indicated) return true;
|
if (navbarItemDef[def].indicated) return true;
|
||||||
}
|
}
|
||||||
return false;
|
return false;
|
||||||
});
|
});
|
||||||
|
|
||||||
function openAccountMenu(ev: MouseEvent) {
|
function openAccountMenu(ev: MouseEvent) {
|
||||||
openAccountMenu_({
|
openAccountMenu_({
|
||||||
withExtraOperation: true,
|
withExtraOperation: true,
|
||||||
}, ev);
|
}, ev);
|
||||||
}
|
}
|
||||||
|
|
||||||
function more() {
|
function more() {
|
||||||
os.popup(defineAsyncComponent(() => import('@/components/MkLaunchPad.vue')), {}, {}, 'closed');
|
os.popup(defineAsyncComponent(() => import('@/components/MkLaunchPad.vue')), {}, {}, 'closed');
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
@ -306,7 +327,6 @@ function more() {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.postIcon {
|
.postIcon {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue