usbharu
/
misskey
mirror of https://github.com/misskey-dev/misskey.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

ref: gaming mode

This commit is contained in:
mattyatea 2023-10-24 21:13:30 +09:00
parent ccf1ab5564
commit ff2df67c57
19 changed files with 85 additions and 577 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
packages/frontend/src/components/MkButton.vue
View File

@ -20,8 +20,8 @@ SPDX-License-Identifier: AGPL-3.0-only
[$style.large]: large, [$style.large]: large,
[$style.transparent]: transparent, [$style.transparent]: transparent,
[$style.asLike]: asLike, [$style.asLike]: asLike,
[$style.gamingDark]: gaming === 'dark', [$style.gamingDark]: gamingType === 'dark',
[$style.gamingLight]: gaming === 'light', [$style.gamingLight]: gamingType === 'light',
} }
]" ]"
:type="type" :type="type"
@ -50,8 +50,8 @@ SPDX-License-Identifier: AGPL-3.0-only
[$style.large]: large, [$style.large]: large,
[$style.transparent]: transparent, [$style.transparent]: transparent,
[$style.asLike]: asLike, [$style.asLike]: asLike,
[$style.gamingDark]: gaming === 'dark', [$style.gamingDark]: gamingType === 'dark',
[$style.gamingLight]: gaming === 'light', [$style.gamingLight]: gamingType === 'light',
} }
]" ]"
:to="to" :to="to"
@ -90,39 +90,9 @@ const props = defineProps<{
name?: string; name?: string;
value?: string; value?: string;
}>(); }>();
const darkMode = computed(defaultStore.makeGetterSetter('darkMode'));
const gamingMode = computed(defaultStore.makeGetterSetter('gamingMode'));
// gamingをrefで初期化する
let gaming = ref(''); // 0-off , 1-dark , 2-light
// gaming.valueに新しい値を代入する const gamingType = computed(defaultStore.makeGetterSetter('gamingType'));
if (darkMode.value && gamingMode.value && props.primary || darkMode.value && gamingMode.value && props.gradate ) {
gaming.value = 'dark';
} else if (!darkMode.value && gamingMode.value && props.primary || darkMode.value && gamingMode.value && props.gradate ) {
gaming.value = 'light';
}else{
gaming.value = '';
}
watch(darkMode, () => {
if (darkMode.value && gamingMode.value && props.primary || darkMode.value && gamingMode.value && props.gradate ) {
gaming.value = 'dark';
} else if (!darkMode.value && gamingMode.value && props.primary|| darkMode.value && gamingMode.value && props.gradate) {
gaming.value = 'light';
}else{
gaming.value = '';
}
})
watch(gamingMode, () => {
if (darkMode.value && gamingMode.value && props.primary|| darkMode.value && gamingMode.value && props.gradate ) {
gaming.value = 'dark';
} else if (!darkMode.value && gamingMode.value && props.primary || darkMode.value && gamingMode.value && props.gradate ) {
gaming.value = 'light';
}else{
gaming.value = '';
}
})
const emit = defineEmits<{ const emit = defineEmits<{
(ev: 'click', payload: MouseEvent): void; (ev: 'click', payload: MouseEvent): void;

41
packages/frontend/src/components/MkChannelFollowButton.vue
View File

@ -6,27 +6,27 @@ SPDX-License-Identifier: AGPL-3.0-only
<template> <template>
<button <button
class="_button" class="_button"
:class="[$style.root, { [$style.wait]: wait, [$style.active]: isFollowing, [$style.full]: full },[$style.text,{[$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light'}]]" :class="[$style.root, { [$style.wait]: wait, [$style.active]: isFollowing, [$style.full]: full },[$style.text,{[$style.gamingDark]: gamingType === 'dark',[$style.gamingLight]: gamingType === 'light'}]]"
:disabled="wait" :disabled="wait"
@click="onClick" @click="onClick"
> >
<template v-if="!wait"> <template v-if="!wait">
<template v-if="isFollowing"> <template v-if="isFollowing">
<span v-if="full" <span v-if="full"
:class="[$style.text,{[$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light'}]">{{ :class="[$style.text,{[$style.gamingDark]: gamingType === 'dark',[$style.gamingLight]: gamingType === 'light'}]">{{
i18n.ts.unfollow i18n.ts.unfollow
}}</span><i class="ti ti-minus"></i> }}</span><i class="ti ti-minus"></i>
</template> </template>
<template v-else> <template v-else>
<span v-if="full" <span v-if="full"
:class="[$style.text,{[$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light'}]">{{ :class="[$style.text,{[$style.gamingDark]: gamingType === 'dark',[$style.gamingLight]: gamingType === 'light'}]">{{
i18n.ts.follow i18n.ts.follow
}}</span><i class="ti ti-plus"></i> }}</span><i class="ti ti-plus"></i>
</template> </template>
</template> </template>
<template v-else> <template v-else>
<span v-if="full" <span v-if="full"
:class="[$style.text,{[$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light'}]">{{ :class="[$style.text,{[$style.gamingDark]: gamingType === 'dark',[$style.gamingLight]: gamingType === 'light'}]">{{
i18n.ts.processing i18n.ts.processing
}}</span> }}</span>
<MkLoading :em="true"/> <MkLoading :em="true"/>
@ -47,39 +47,8 @@ const props = withDefaults(defineProps<{
full: false, full: false,
}); });
const gamingType = computed(defaultStore.makeGetterSetter('gamingType'));
let gaming = ref('');
const gamingMode = computed(defaultStore.makeGetterSetter('gamingMode'));
const darkMode = computed(defaultStore.makeGetterSetter('darkMode'));
if (darkMode.value && gamingMode.value == true) {
gaming.value = 'dark';
} else if (!darkMode.value && gamingMode.value == true) {
gaming.value = 'light';
} else {
gaming.value = '';
}
watch(darkMode, () => {
console.log(gaming)
if (darkMode.value && gamingMode.value == true) {
gaming.value = 'dark';
} else if (!darkMode.value && gamingMode.value == true) {
gaming.value = 'light';
} else {
gaming.value = '';
}
})
watch(gamingMode, () => {
if (darkMode.value && gamingMode.value == true) {
gaming.value = 'dark';
} else if (!darkMode.value && gamingMode.value == true) {
gaming.value = 'light';
} else {
gaming.value = '';
}
})
const isFollowing = ref<boolean>(props.channel.isFollowing); const isFollowing = ref<boolean>(props.channel.isFollowing);
const wait = ref(false); const wait = ref(false);

46
packages/frontend/src/components/MkFollowButton.vue
View File

@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template> <template>
<button <button
class="_button" class="_button"
:class="[$style.root, { [$style.wait]: wait, [$style.active]: isFollowing || hasPendingFollowRequestFromYou, [$style.full]: full, [$style.large]: large },{[$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light' :class="[$style.root, { [$style.wait]: wait, [$style.active]: isFollowing || hasPendingFollowRequestFromYou, [$style.full]: full, [$style.large]: large },{[$style.gamingDark]: gamingType === 'dark',[$style.gamingLight]: gamingType === 'light'
,}]" ,}]"
:disabled="wait" :disabled="wait"
@click="onClick" @click="onClick"
@ -13,40 +13,40 @@ SPDX-License-Identifier: AGPL-3.0-only
<template v-if="!wait"> <template v-if="!wait">
<template v-if="hasPendingFollowRequestFromYou && user.isLocked"> <template v-if="hasPendingFollowRequestFromYou && user.isLocked">
<span v-if="full" <span v-if="full"
:class="[$style.text,{[$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light',}]">{{ :class="[$style.text,{[$style.gamingDark]: gamingType === 'dark',[$style.gamingLight]: gamingType === 'light',}]">{{
i18n.ts.followRequestPending i18n.ts.followRequestPending
}}</span><i class="ti ti-hourglass-empty"></i> }}</span><i class="ti ti-hourglass-empty"></i>
</template> </template>
<template v-else-if="hasPendingFollowRequestFromYou && !user.isLocked"> <template v-else-if="hasPendingFollowRequestFromYou && !user.isLocked">
<!-- つまりリモートフォローの場合。 --> <!-- つまりリモートフォローの場合。 -->
<span v-if="full" <span v-if="full"
:class="[$style.text,{[$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light' }] ">{{ :class="[$style.text,{[$style.gamingDark]: gamingType === 'dark',[$style.gamingLight]: gamingType === 'light' }] ">{{
i18n.ts.processing i18n.ts.processing
}}</span> }}</span>
<MkLoading :em="true" :colored="false"/> <MkLoading :em="true" :colored="false"/>
</template> </template>
<template v-else-if="isFollowing"> <template v-else-if="isFollowing">
<span v-if="full" <span v-if="full"
:class="[$style.text,{[$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light' }] ">{{ :class="[$style.text,{[$style.gamingDark]: gamingType === 'dark',[$style.gamingLight]: gamingType === 'light' }] ">{{
i18n.ts.unfollow i18n.ts.unfollow
}}</span><i class="ti ti-minus"></i> }}</span><i class="ti ti-minus"></i>
</template> </template>
<template v-else-if="!isFollowing && user.isLocked"> <template v-else-if="!isFollowing && user.isLocked">
<span v-if="full" <span v-if="full"
:class="[$style.text,{[$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light' }]">{{ :class="[$style.text,{[$style.gamingDark]: gamingType === 'dark',[$style.gamingLight]: gamingType === 'light' }]">{{
i18n.ts.followRequest i18n.ts.followRequest
}}</span><i class="ti ti-plus"></i> }}</span><i class="ti ti-plus"></i>
</template> </template>
<template v-else-if="!isFollowing && !user.isLocked"> <template v-else-if="!isFollowing && !user.isLocked">
<span v-if="full" <span v-if="full"
:class="[$style.text,{[$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light' }]">{{ :class="[$style.text,{[$style.gamingDark]: gamingType === 'dark',[$style.gamingLight]: gamingType === 'light' }]">{{
i18n.ts.follow i18n.ts.follow
}}</span><i class="ti ti-plus"></i> }}</span><i class="ti ti-plus"></i>
</template> </template>
</template> </template>
<template v-else> <template v-else>
<span v-if="full" <span v-if="full"
:class="[$style.text,{[$style.gamingDark]: gaming === 'dark' ,[$style.gamingLight]: gaming === 'light'} ]">{{ :class="[$style.text,{[$style.gamingDark]: gamingType === 'dark' ,[$style.gamingLight]: gamingType === 'light'} ]">{{
i18n.ts.processing i18n.ts.processing
}}</span> }}</span>
<MkLoading :em="true" :colored="false"/> <MkLoading :em="true" :colored="false"/>
@ -64,37 +64,7 @@ import {claimAchievement} from '@/scripts/achievements.js';
import {$i} from '@/account.js'; import {$i} from '@/account.js';
import {defaultStore} from "@/store.js"; import {defaultStore} from "@/store.js";
let gaming = ref(''); const gamingType = computed(defaultStore.makeGetterSetter('gamingType'));
const gamingMode = computed(defaultStore.makeGetterSetter('gamingMode'));
const darkMode = computed(defaultStore.makeGetterSetter('darkMode'));
if (darkMode.value && gamingMode.value == true) {
gaming.value = 'dark';
} else if (!darkMode.value && gamingMode.value == true) {
gaming.value = 'light';
} else {
gaming.value = '';
}
watch(darkMode, () => {
if (darkMode.value && gamingMode.value == true) {
gaming.value = 'dark';
} else if (!darkMode.value && gamingMode.value == true) {
gaming.value = 'light';
} else {
gaming.value = '';
}
})
watch(gamingMode, () => {
if (darkMode.value && gamingMode.value == true) {
gaming.value = 'dark';
} else if (!darkMode.value && gamingMode.value == true) {
gaming.value = 'light';
} else {
gaming.value = '';
}
})
const props = withDefaults(defineProps<{ const props = withDefaults(defineProps<{
user: Misskey.entities.UserDetailed, user: Misskey.entities.UserDetailed,

35
packages/frontend/src/components/MkLaunchPad.vue
View File

@ -8,12 +8,12 @@ SPDX-License-Identifier: AGPL-3.0-only
<div class="szkkfdyq _popup _shadow" :class="{ asDrawer: type === 'drawer' }" :style="{ maxHeight: maxHeight ? maxHeight + 'px' : '' }"> <div class="szkkfdyq _popup _shadow" :class="{ asDrawer: type === 'drawer' }" :style="{ maxHeight: maxHeight ? maxHeight + 'px' : '' }">
<div class="main"> <div class="main">
<template v-for="item in items"> <template v-for="item in items">
<button v-if="item.action" v-click-anime class="_button item" :class="{gamingDark: gaming === 'dark',gamingLight: gaming === 'light' }" @click="$event => { item.action($event); close(); }"> <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> <i class="icon" :class="item.icon"></i>
<div class="text">{{ item.text }}</div> <div class="text">{{ item.text }}</div>
<span v-if="item.indicate" class="indicator"><i class="_indicatorCircle"></i></span> <span v-if="item.indicate" class="indicator"><i class="_indicatorCircle"></i></span>
</button> </button>
<MkA v-else v-click-anime :to="item.to" class="item" :class="{gamingDark: gaming === 'dark',gamingLight: gaming === 'light' }" @click.passive="close()"> <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> <i class="icon" :class="item.icon"></i>
<div class="text">{{ item.text }}</div> <div class="text">{{ item.text }}</div>
<span v-if="item.indicate" class="indicator"><i class="_indicatorCircle"></i></span> <span v-if="item.indicate" class="indicator"><i class="_indicatorCircle"></i></span>
@ -31,37 +31,8 @@ import { navbarItemDef } from '@/navbar';
import { defaultStore } from '@/store.js'; import { defaultStore } from '@/store.js';
import { deviceKind } from '@/scripts/device-kind.js'; import { deviceKind } from '@/scripts/device-kind.js';
let gaming = ref(''); const gamingType = computed(defaultStore.makeGetterSetter('gamingType'));
const gamingMode = computed(defaultStore.makeGetterSetter('gamingMode'));
const darkMode = computed(defaultStore.makeGetterSetter('darkMode'));
if (darkMode.value && gamingMode.value == true) {
gaming.value = 'dark';
} else if (!darkMode.value && gamingMode.value == true) {
gaming.value = 'light';
} else {
gaming.value = '';
}
watch(darkMode, () => {
if (darkMode.value && gamingMode.value == true) {
gaming.value = 'dark';
} else if (!darkMode.value && gamingMode.value == true) {
gaming.value = 'light';
} else {
gaming.value = '';
}
})
watch(gamingMode, () => {
if (darkMode.value && gamingMode.value == true) {
gaming.value = 'dark';
} else if (!darkMode.value && gamingMode.value == true) {
gaming.value = 'light';
} else {
gaming.value = '';
}
})
const props = withDefaults(defineProps<{ const props = withDefaults(defineProps<{
src?: HTMLElement; src?: HTMLElement;
anchor?: { x: string; y: string; }; anchor?: { x: string; y: string; };

32
packages/frontend/src/components/MkMention.vue
View File

@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
--> -->
<template> <template>
<MkA v-user-preview="canonical" :class="[$style.root, { [$style.isMe]: isMe && gaming === '' , [$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light' }]" :to="url" :style="{ background: bgCss }"> <MkA v-user-preview="canonical" :class="[$style.root, { [$style.isMe]: isMe && gamingType === '' , [$style.gamingDark]: gamingType === 'dark',[$style.gamingLight]: gamingType === 'light' }]" :to="url" :style="{ background: bgCss }">
<img :class="$style.icon" :src="avatarUrl" alt=""> <img :class="$style.icon" :src="avatarUrl" alt="">
<span> <span>
<span>@{{ username }}</span> <span>@{{ username }}</span>
@ -21,37 +21,9 @@ import { host as localHost } from '@/config.js';
import { $i } from '@/account.js'; import { $i } from '@/account.js';
import { defaultStore } from '@/store.js'; import { defaultStore } from '@/store.js';
import { getStaticImageUrl } from '@/scripts/media-proxy.js'; import { getStaticImageUrl } from '@/scripts/media-proxy.js';
let gaming = ref('');
const gamingMode = computed(defaultStore.makeGetterSetter('gamingMode')); const gamingType = computed(defaultStore.makeGetterSetter('gamingType'));
const darkMode = computed(defaultStore.makeGetterSetter('darkMode'));
if (darkMode.value && gamingMode.value == true) {
gaming.value = 'dark';
} else if (!darkMode.value && gamingMode.value == true) {
gaming.value = 'light';
} else {
gaming.value = '';
}
watch(darkMode, () => {
if (darkMode.value && gamingMode.value == true) {
gaming.value = 'dark';
} else if (!darkMode.value && gamingMode.value == true) {
gaming.value = 'light';
} else {
gaming.value = '';
}
})
watch(gamingMode, () => {
if (darkMode.value && gamingMode.value == true) {
gaming.value = 'dark';
} else if (!darkMode.value && gamingMode.value == true) {
gaming.value = 'light';
} else {
gaming.value = '';
}
})
const props = defineProps<{ const props = defineProps<{
username: string; username: string;
host: string; host: string;

56
packages/frontend/src/components/MkMenu.vue
View File

@ -8,44 +8,44 @@ SPDX-License-Identifier: AGPL-3.0-only
<div <div
ref="itemsEl" v-hotkey="keymap" ref="itemsEl" v-hotkey="keymap"
class="_popup _shadow" class="_popup _shadow"
:class="[$style.root, { [$style.center]: align === 'center', [$style.asDrawer]: asDrawer },{[$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light' }]" :class="[$style.root, { [$style.center]: align === 'center', [$style.asDrawer]: asDrawer },{[$style.gamingDark]: gamingType === 'dark',[$style.gamingLight]: gamingType === 'light' }]"
:style="{ width: (width && !asDrawer) ? width + 'px' : '', maxHeight: maxHeight ? maxHeight + 'px' : '' }" :style="{ width: (width && !asDrawer) ? width + 'px' : '', maxHeight: maxHeight ? maxHeight + 'px' : '' }"
@contextmenu.self="e => e.preventDefault()" @contextmenu.self="e => e.preventDefault()"
> >
<template v-for="(item, i) in items2"> <template v-for="(item, i) in items2">
<div v-if="item === null" role="separator" :class="$style.divider"></div> <div v-if="item === null" role="separator" :class="$style.divider"></div>
<span v-else-if="item.type === 'label'" role="menuitem" :class="[$style.label, $style.item,{[$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light' }]"> <span v-else-if="item.type === 'label'" role="menuitem" :class="[$style.label, $style.item,{[$style.gamingDark]: gamingType === 'dark',[$style.gamingLight]: gamingType === 'light' }]">
<span>{{ item.text }}</span> <span>{{ item.text }}</span>
</span> </span>
<span v-else-if="item.type === 'pending'" role="menuitem" :tabindex="i" :class="[$style.pending, $style.item,{[$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light' }]"> <span v-else-if="item.type === 'pending'" role="menuitem" :tabindex="i" :class="[$style.pending, $style.item,{[$style.gamingDark]: gamingType === 'dark',[$style.gamingLight]: gamingType === 'light' }]">
<span><MkEllipsis/></span> <span><MkEllipsis/></span>
</span> </span>
<MkA v-else-if="item.type === 'link'" role="menuitem" :to="item.to" :tabindex="i" class="_button" :class="[$style.item,{[$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light' }]" @click.passive="close(true)" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)"> <MkA v-else-if="item.type === 'link'" role="menuitem" :to="item.to" :tabindex="i" class="_button" :class="[$style.item,{[$style.gamingDark]: gamingType === 'dark',[$style.gamingLight]: gamingType === 'light' }]" @click.passive="close(true)" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)">
<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i> <i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i>
<MkAvatar v-if="item.avatar" :user="item.avatar" :class="$style.avatar"/> <MkAvatar v-if="item.avatar" :user="item.avatar" :class="$style.avatar"/>
<span>{{ item.text }}</span> <span>{{ item.text }}</span>
<span v-if="item.indicate" :class="$style.indicator"><i class="_indicatorCircle"></i></span> <span v-if="item.indicate" :class="$style.indicator"><i class="_indicatorCircle"></i></span>
</MkA> </MkA>
<a v-else-if="item.type === 'a'" role="menuitem" :href="item.href" :target="item.target" :download="item.download" :tabindex="i" class="_button" :class="[$style.item,{[$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light' }]" @click="close(true)" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)"> <a v-else-if="item.type === 'a'" role="menuitem" :href="item.href" :target="item.target" :download="item.download" :tabindex="i" class="_button" :class="[$style.item,{[$style.gamingDark]: gamingType === 'dark',[$style.gamingLight]: gamingType === 'light' }]" @click="close(true)" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)">
<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i> <i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i>
<span>{{ item.text }}</span> <span>{{ item.text }}</span>
<span v-if="item.indicate" :class="$style.indicator"><i class="_indicatorCircle"></i></span> <span v-if="item.indicate" :class="$style.indicator"><i class="_indicatorCircle"></i></span>
</a> </a>
<button v-else-if="item.type === 'user'" role="menuitem" :tabindex="i" class="_button" :class="[$style.item, { [$style.active]: item.active },{[$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light' }]" :disabled="item.active" @click="clicked(item.action, $event)" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)"> <button v-else-if="item.type === 'user'" role="menuitem" :tabindex="i" class="_button" :class="[$style.item, { [$style.active]: item.active },{[$style.gamingDark]: gamingType === 'dark',[$style.gamingLight]: gamingType === 'light' }]" :disabled="item.active" @click="clicked(item.action, $event)" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)">
<MkAvatar :user="item.user" :class="$style.avatar"/><MkUserName :user="item.user"/> <MkAvatar :user="item.user" :class="$style.avatar"/><MkUserName :user="item.user"/>
<span v-if="item.indicate" :class="$style.indicator"><i class="_indicatorCircle"></i></span> <span v-if="item.indicate" :class="$style.indicator"><i class="_indicatorCircle"></i></span>
</button> </button>
<button v-else-if="item.type === 'switch'" role="menuitemcheckbox" :tabindex="i" class="_button" :class="[$style.item, $style.switch, { [$style.switchDisabled]: item.disabled } , { [$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light' }]" @click="switchItem(item)" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)"> <button v-else-if="item.type === 'switch'" role="menuitemcheckbox" :tabindex="i" class="_button" :class="[$style.item, $style.switch, { [$style.switchDisabled]: item.disabled } , { [$style.gamingDark]: gamingType === 'dark',[$style.gamingLight]: gamingType === 'light' }]" @click="switchItem(item)" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)">
<MkSwitchButton :class="$style.switchButton" :checked="item.ref" :disabled="item.disabled" @toggle="switchItem(item)"/> <MkSwitchButton :class="$style.switchButton" :checked="item.ref" :disabled="item.disabled" @toggle="switchItem(item)"/>
<span :class="$style.switchText">{{ item.text }}</span> <span :class="$style.switchText">{{ item.text }}</span>
</button> </button>
<button v-else-if="item.type === 'parent'" class="_button" role="menuitem" :tabindex="i" :class="[$style.item, $style.parent, { [$style.childShowing]: childShowingItem === item } , { [$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light' }]" @mouseenter="preferClick ? null : showChildren(item, $event)" @click="!preferClick ? null : showChildren(item, $event)"> <button v-else-if="item.type === 'parent'" class="_button" role="menuitem" :tabindex="i" :class="[$style.item, $style.parent, { [$style.childShowing]: childShowingItem === item } , { [$style.gamingDark]: gamingType === 'dark',[$style.gamingLight]: gamingType === 'light' }]" @mouseenter="preferClick ? null : showChildren(item, $event)" @click="!preferClick ? null : showChildren(item, $event)">
<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]" style="pointer-events: none;"></i> <i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]" style="pointer-events: none;"></i>
<span style="pointer-events: none;">{{ item.text }}</span> <span style="pointer-events: none;">{{ item.text }}</span>
<span :class="$style.caret" style="pointer-events: none;"><i class="ti ti-chevron-right ti-fw"></i></span> <span :class="$style.caret" style="pointer-events: none;"><i class="ti ti-chevron-right ti-fw"></i></span>
</button> </button>
<button v-else :tabindex="i" class="_button" role="menuitem" :class="[$style.item, { [$style.danger]: item.danger, [$style.active]: item.active }, { [$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light' }]" :disabled="item.active" @click="clicked(item.action, $event)" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)"> <button v-else :tabindex="i" class="_button" role="menuitem" :class="[$style.item, { [$style.danger]: item.danger, [$style.active]: item.active }, { [$style.gamingDark]: gamingType === 'dark',[$style.gamingLight]: gamingType === 'light' }]" :disabled="item.active" @click="clicked(item.action, $event)" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)">
<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon, { [$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light' }]"></i> <i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon, { [$style.gamingDark]: gamingType === 'dark',[$style.gamingLight]: gamingType === 'light' }]"></i>
<MkAvatar v-if="item.avatar" :user="item.avatar" :class="$style.avatar"/> <MkAvatar v-if="item.avatar" :user="item.avatar" :class="$style.avatar"/>
<span>{{ item.text }}</span> <span>{{ item.text }}</span>
<span v-if="item.indicate" :class="$style.indicator"><i class="_indicatorCircle"></i></span> <span v-if="item.indicate" :class="$style.indicator"><i class="_indicatorCircle"></i></span>
@ -62,48 +62,16 @@ SPDX-License-Identifier: AGPL-3.0-only
</template> </template>
<script lang="ts"> <script lang="ts">
import { Ref, computed, defineAsyncComponent, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'; import { computed, defineAsyncComponent, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
import { focusPrev, focusNext } from '@/scripts/focus.js'; import { focusPrev, focusNext } from '@/scripts/focus.js';
import MkSwitchButton from '@/components/MkSwitch.button.vue';
import { MenuItem, InnerMenuItem, MenuPending, MenuAction, MenuSwitch, MenuParent } from '@/types/menu'; import { MenuItem, InnerMenuItem, MenuPending, MenuAction, MenuSwitch, MenuParent } from '@/types/menu';
import * as os from '@/os.js'; import * as os from '@/os.js';
import { i18n } from '@/i18n.js'; import { i18n } from '@/i18n.js';
import { isTouchUsing } from '@/scripts/touch.js'; import { isTouchUsing } from '@/scripts/touch.js';
import {defaultStore} from '@/store.js' import {defaultStore} from '@/store.js'
let gaming = ref('');
const gamingMode = computed(defaultStore.makeGetterSetter('gamingMode')); let gamingType = computed(defaultStore.makeGetterSetter('gamingType'));
const darkMode = computed(defaultStore.makeGetterSetter('darkMode'));
if (darkMode.value && gamingMode.value == true) {
gaming.value = 'dark';
} else if (!darkMode.value && gamingMode.value == true) {
gaming.value = 'light';
} else {
gaming.value = '';
}
watch(darkMode, () => {
if (darkMode.value && gamingMode.value == true) {
gaming.value = 'dark';
} else if (!darkMode.value && gamingMode.value == true) {
gaming.value = 'light';
} else {
gaming.value = '';
}
})
watch(gamingMode, () => {
if (darkMode.value && gamingMode.value == true) {
gaming.value = 'dark';
} else if (!darkMode.value && gamingMode.value == true) {
gaming.value = 'light';
} else {
gaming.value = '';
}
})
const childrenCache = new WeakMap<MenuParent, MenuItem[]>(); const childrenCache = new WeakMap<MenuParent, MenuItem[]>();
</script> </script>

4
packages/frontend/src/components/MkPostForm.vue
View File

@ -42,7 +42,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<span v-else><i class="ti ti-icons"></i></span> <span v-else><i class="ti ti-icons"></i></span>
</button> </button>
<button v-click-anime class="_button" :class="$style.submit" :disabled="!canPost" data-cy-open-post-form-submit @click="post"> <button v-click-anime class="_button" :class="$style.submit" :disabled="!canPost" data-cy-open-post-form-submit @click="post">
<div :class="[$style.submitInner ,{ [$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light' }]"> <div :class="[$style.submitInner ,{ [$style.gamingDark]: gamingType === 'dark',[$style.gamingLight]: gamingType === 'light' }]">
<template v-if="posted"></template> <template v-if="posted"></template>
<template v-else-if="posting"><MkEllipsis/></template> <template v-else-if="posting"><MkEllipsis/></template>
<template v-else>{{ submitText }}</template> <template v-else>{{ submitText }}</template>
@ -135,7 +135,7 @@ import MkRippleEffect from '@/components/MkRippleEffect.vue';
import { miLocalStorage } from '@/local-storage.js'; import { miLocalStorage } from '@/local-storage.js';
import { claimAchievement } from '@/scripts/achievements.js'; import { claimAchievement } from '@/scripts/achievements.js';
const modal = inject('modal'); const modal = inject('modal');
let gaming = ref(''); let gamingType = computed(defaultStore.makeGetterSetter('gamingType'));
const gamingMode = computed(defaultStore.makeGetterSetter('gamingMode')); const gamingMode = computed(defaultStore.makeGetterSetter('gamingMode'));
const darkMode = computed(defaultStore.makeGetterSetter('darkMode')); const darkMode = computed(defaultStore.makeGetterSetter('darkMode'));

35
packages/frontend/src/components/MkRadio.vue
View File

@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template> <template>
<div <div
v-adaptive-border v-adaptive-border
:class="[$style.root, { [$style.disabled]: disabled, [$style.checked]: checked ,[$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light' } ]" :class="[$style.root, { [$style.disabled]: disabled, [$style.checked]: checked ,[$style.gamingDark]: gamingType === 'dark',[$style.gamingLight]: gamingType === 'light' } ]"
:aria-checked="checked" :aria-checked="checked"
:aria-disabled="disabled" :aria-disabled="disabled"
@click="toggle" @click="toggle"
@ -16,7 +16,7 @@ SPDX-License-Identifier: AGPL-3.0-only
:disabled="disabled" :disabled="disabled"
:class="$style.input" :class="$style.input"
> >
<span :class="[$style.button , {[$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light'}]"> <span :class="[$style.button , {[$style.gamingDark]: gamingType === 'dark',[$style.gamingLight]: gamingType === 'light'}]">
<span></span> <span></span>
</span> </span>
<span :class="$style.label"><slot></slot></span> <span :class="$style.label"><slot></slot></span>
@ -27,37 +27,8 @@ SPDX-License-Identifier: AGPL-3.0-only
import { ref,computed,watch } from 'vue'; import { ref,computed,watch } from 'vue';
import {defaultStore} from "@/store.js"; import {defaultStore} from "@/store.js";
let gaming = ref(''); let gamingType = computed(defaultStore.makeGetterSetter('gamingType'));
const gamingMode = computed(defaultStore.makeGetterSetter('gamingMode'));
const darkMode = computed(defaultStore.makeGetterSetter('darkMode'));
if (darkMode.value && gamingMode.value == true) {
gaming.value = 'dark';
} else if (!darkMode.value && gamingMode.value == true) {
gaming.value = 'light';
} else {
gaming.value = '';
}
watch(darkMode, () => {
if (darkMode.value && gamingMode.value == true) {
gaming.value = 'dark';
} else if (!darkMode.value && gamingMode.value == true) {
gaming.value = 'light';
} else {
gaming.value = '';
}
})
watch(gamingMode, () => {
if (darkMode.value && gamingMode.value == true) {
gaming.value = 'dark';
} else if (!darkMode.value && gamingMode.value == true) {
gaming.value = 'light';
} else {
gaming.value = '';
}
})
const props = defineProps<{ const props = defineProps<{
modelValue: any; modelValue: any;
value: any; value: any;

8
packages/frontend/src/components/MkRange.vue
View File

@ -9,12 +9,12 @@ SPDX-License-Identifier: AGPL-3.0-only
<div v-adaptive-border class="body"> <div v-adaptive-border class="body">
<div ref="containerEl" class="container"> <div ref="containerEl" class="container">
<div class="track"> <div class="track">
<div :class="{gamingDark: gaming === 'dark',gamingLight: gaming === 'light'}" class="highlight" :style="{ width: (steppedRawValue * 100) + '%' }"></div> <div :class="{gamingDark: gamingType === 'dark',gamingLight: gamingType === 'light'}" class="highlight" :style="{ width: (steppedRawValue * 100) + '%' }"></div>
</div> </div>
<div v-if="steps && showTicks" class="ticks"> <div v-if="steps && showTicks" class="ticks">
<div v-for="i in (steps + 1)" class="tick" :style="{ left: (((i - 1) / steps) * 100) + '%' }"></div> <div v-for="i in (steps + 1)" class="tick" :style="{ left: (((i - 1) / steps) * 100) + '%' }"></div>
</div> </div>
<div ref="thumbEl" v-tooltip="textConverter(finalValue)" :class="{gamingDark: gaming === 'dark',gamingLight: gaming === 'light'}" class="thumb" :style="{ left: thumbPosition + 'px' }" @mousedown="onMousedown" @touchstart="onMousedown"></div> <div ref="thumbEl" v-tooltip="textConverter(finalValue)" :class="{gamingDark: gamingType === 'dark',gamingLight: gamingType === 'light'}" class="thumb" :style="{ left: thumbPosition + 'px' }" @mousedown="onMousedown" @touchstart="onMousedown"></div>
</div> </div>
</div> </div>
<div class="caption"><slot name="caption"></slot></div> <div class="caption"><slot name="caption"></slot></div>
@ -27,10 +27,8 @@ import * as os from '@/os.js';
import {defaultStore} from "@/store.js"; import {defaultStore} from "@/store.js";
let gaming = ref(''); let gamingType = computed(defaultStore.makeGetterSetter('gamingType'));
const gamingMode = computed(defaultStore.makeGetterSetter('gamingMode'));
const darkMode = computed(defaultStore.makeGetterSetter('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) {

35
packages/frontend/src/components/MkReactionsViewer.reaction.vue
View File

@ -8,11 +8,11 @@ SPDX-License-Identifier: AGPL-3.0-only
ref="buttonEl" ref="buttonEl"
v-ripple="canToggle" v-ripple="canToggle"
class="_button" class="_button"
:class="[$style.root, { [$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light' ,[$style.reacted]: note.myReaction == reaction, [$style.canToggle]: canToggle, [$style.small]: defaultStore.state.reactionsDisplaySize === 'small', [$style.large]: defaultStore.state.reactionsDisplaySize === 'large' }]" :class="[$style.root, { [$style.gamingDark]: gamingType === 'dark',[$style.gamingLight]: gamingType === 'light' ,[$style.reacted]: note.myReaction == reaction, [$style.canToggle]: canToggle, [$style.small]: defaultStore.state.reactionsDisplaySize === 'small', [$style.large]: defaultStore.state.reactionsDisplaySize === 'large' }]"
@click="toggleReaction()" @click="toggleReaction()"
> >
<MkReactionIcon :class="$style.icon" :reaction="reaction" :emojiUrl="note.reactionEmojis[reaction.substring(1, reaction.length - 1)]"/> <MkReactionIcon :class="$style.icon" :reaction="reaction" :emojiUrl="note.reactionEmojis[reaction.substring(1, reaction.length - 1)]"/>
<span :class="[$style.count,{ [$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light'}]">{{ count }}</span> <span :class="[$style.count,{ [$style.gamingDark]: gamingType === 'dark',[$style.gamingLight]: gamingType === 'light'}]">{{ count }}</span>
</button> </button>
</template> </template>
@ -29,37 +29,8 @@ import { claimAchievement } from '@/scripts/achievements.js';
import { defaultStore } from '@/store.js'; import { defaultStore } from '@/store.js';
import { i18n } from '@/i18n.js'; import { i18n } from '@/i18n.js';
let gaming = ref(''); let gamingType = computed(defaultStore.makeGetterSetter('gamingType'));
const gamingMode = computed(defaultStore.makeGetterSetter('gamingMode'));
const darkMode = computed(defaultStore.makeGetterSetter('darkMode'));
if (darkMode.value && gamingMode.value == true) {
gaming.value = 'dark';
} else if (!darkMode.value && gamingMode.value == true) {
gaming.value = 'light';
} else {
gaming.value = '';
}
watch(darkMode, () => {
if (darkMode.value && gamingMode.value == true) {
gaming.value = 'dark';
} else if (!darkMode.value && gamingMode.value == true) {
gaming.value = 'light';
} else {
gaming.value = '';
}
})
watch(gamingMode, () => {
if (darkMode.value && gamingMode.value == true) {
gaming.value = 'dark';
} else if (!darkMode.value && gamingMode.value == true) {
gaming.value = 'light';
} else {
gaming.value = '';
}
})
const props = defineProps<{ const props = defineProps<{
reaction: string; reaction: string;
count: number; count: number;

32
packages/frontend/src/components/MkSignupDialog.form.vue
View File

@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template> <template>
<div> <div>
<div :class="[$style.banner ,{[$style.gamingDark]: gaming==='dark' , [$style.gamingLight]: gaming==='light'}]"> <div :class="[$style.banner ,{[$style.gamingDark]: gamingType ==='dark' , [$style.gamingLight]: gamingType ==='light'}]">
<i class="ti ti-user-edit"></i> <i class="ti ti-user-edit"></i>
</div> </div>
<MkSpacer :marginMin="20" :marginMax="32"> <MkSpacer :marginMin="20" :marginMax="32">
@ -124,37 +124,9 @@ import {instance} from '@/instance.js';
import {i18n} from '@/i18n.js'; import {i18n} from '@/i18n.js';
import {defaultStore} from "@/store.js"; import {defaultStore} from "@/store.js";
let gaming = ref('');
const gamingMode = computed(defaultStore.makeGetterSetter('gamingMode')); let gamingType = computed(defaultStore.makeGetterSetter('gamingType'));
const darkMode = computed(defaultStore.makeGetterSetter('darkMode'));
if (darkMode.value && gamingMode.value == true) {
gaming.value = 'dark';
} else if (!darkMode.value && gamingMode.value == true) {
gaming.value = 'light';
} else {
gaming.value = '';
}
watch(darkMode, () => {
if (darkMode.value && gamingMode.value == true) {
gaming.value = 'dark';
} else if (!darkMode.value && gamingMode.value == true) {
gaming.value = 'light';
} else {
gaming.value = '';
}
})
watch(gamingMode, () => {
if (darkMode.value && gamingMode.value == true) {
gaming.value = 'dark';
} else if (!darkMode.value && gamingMode.value == true) {
gaming.value = 'light';
} else {
gaming.value = '';
}
})
const props = withDefaults(defineProps<{ const props = withDefaults(defineProps<{
autoSet?: boolean; autoSet?: boolean;
}>(), { }>(), {

34
packages/frontend/src/components/MkSignupDialog.rules.vue
View File

@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template> <template>
<div> <div>
<div :class="[$style.banner ,{[$style.gamingDark]: gaming==='dark' , [$style.gamingLight]: gaming==='light'}]"> <div :class="[$style.banner ,{[$style.gamingDark]: gamingType ==='dark' , [$style.gamingLight]: gamingType ==='light'}]">
<i class="ti ti-checklist"></i> <i class="ti ti-checklist"></i>
</div> </div>
<MkSpacer :marginMin="20" :marginMax="28"> <MkSpacer :marginMin="20" :marginMax="28">
@ -71,38 +71,8 @@ import MkSwitch from '@/components/MkSwitch.vue';
import MkInfo from '@/components/MkInfo.vue'; import MkInfo from '@/components/MkInfo.vue';
import * as os from '@/os.js'; import * as os from '@/os.js';
import {defaultStore} from "@/store.js"; import {defaultStore} from "@/store.js";
let gamingType = computed(defaultStore.makeGetterSetter('gamingType'));
let gaming = ref('');
const gamingMode = computed(defaultStore.makeGetterSetter('gamingMode'));
const darkMode = computed(defaultStore.makeGetterSetter('darkMode'));
if (darkMode.value && gamingMode.value == true) {
gaming.value = 'dark';
} else if (!darkMode.value && gamingMode.value == true) {
gaming.value = 'light';
} else {
gaming.value = '';
}
watch(darkMode, () => {
if (darkMode.value && gamingMode.value == true) {
gaming.value = 'dark';
} else if (!darkMode.value && gamingMode.value == true) {
gaming.value = 'light';
} else {
gaming.value = '';
}
})
watch(gamingMode, () => {
if (darkMode.value && gamingMode.value == true) {
gaming.value = 'dark';
} else if (!darkMode.value && gamingMode.value == true) {
gaming.value = 'light';
} else {
gaming.value = '';
}
})
const availableServerRules = instance.serverRules.length > 0; const availableServerRules = instance.serverRules.length > 0;
const availableTos = instance.tosUrl != null && instance.tosUrl !== ''; const availableTos = instance.tosUrl != null && instance.tosUrl !== '';
const availablePrivacyPolicy = instance.privacyPolicyUrl != null && instance.privacyPolicyUrl !== ''; const availablePrivacyPolicy = instance.privacyPolicyUrl != null && instance.privacyPolicyUrl !== '';

37
packages/frontend/src/components/MkSuperMenu.vue
View File

@ -10,15 +10,15 @@ SPDX-License-Identifier: AGPL-3.0-only
<div class="items"> <div class="items">
<template v-for="(item, i) in group.items"> <template v-for="(item, i) in group.items">
<a v-if="item.type === 'a'" :href="item.href" :target="item.target" :tabindex="i" class="_button item" :class="{ danger: item.danger, active: item.active, gamingDark: gaming === 'dark',gamingLight: gaming === 'light' }"> <a v-if="item.type === 'a'" :href="item.href" :target="item.target" :tabindex="i" class="_button item" :class="{ danger: item.danger, active: item.active, gamingDark: gamingType === 'dark',gamingLight: gamingType === 'light' }">
<span v-if="item.icon" class="icon"><i :class="item.icon" class="ti-fw"></i></span> <span v-if="item.icon" class="icon"><i :class="item.icon" class="ti-fw"></i></span>
<span class="text">{{ item.text }}</span> <span class="text">{{ item.text }}</span>
</a> </a>
<button v-else-if="item.type === 'button'" :tabindex="i" class="_button item" :class="{ danger: item.danger, active: item.active , gamingDark: gaming === 'dark',gamingLight: gaming === 'light' }" :disabled="item.active" @click="ev => item.action(ev)"> <button v-else-if="item.type === 'button'" :tabindex="i" class="_button item" :class="{ danger: item.danger, active: item.active , gamingDark: gamingType === 'dark',gamingLight: gamingType === 'light' }" :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 v-if="item.icon" class="icon"><i :class="item.icon" class="ti-fw"></i></span>
<span class="text">{{ item.text }}</span> <span class="text">{{ item.text }}</span>
</button> </button>
<MkA v-else :to="item.to" :tabindex="i" class="_button item" :class="{ danger: item.danger, active: item.active , gamingDark: gaming === 'dark',gamingLight: gaming === 'light' }"> <MkA v-else :to="item.to" :tabindex="i" class="_button item" :class="{ danger: item.danger, active: item.active , gamingDark: gamingType === 'dark',gamingLight: gamingType === 'light' }">
<span v-if="item.icon" class="icon"><i :class="item.icon" class="ti-fw"></i></span> <span v-if="item.icon" class="icon"><i :class="item.icon" class="ti-fw"></i></span>
<span class="text">{{ item.text }}</span> <span class="text">{{ item.text }}</span>
</MkA> </MkA>
@ -32,37 +32,8 @@ SPDX-License-Identifier: AGPL-3.0-only
import {ref , computed , watch } from 'vue'; import {ref , computed , watch } from 'vue';
import {defaultStore} from "@/store.js"; import {defaultStore} from "@/store.js";
let gaming = ref(''); let gamingType = computed(defaultStore.makeGetterSetter('gamingType'));
const gamingMode = computed(defaultStore.makeGetterSetter('gamingMode'));
const darkMode = computed(defaultStore.makeGetterSetter('darkMode'));
if (darkMode.value && gamingMode.value == true) {
gaming.value = 'dark';
} else if (!darkMode.value && gamingMode.value == true) {
gaming.value = 'light';
} else {
gaming.value = '';
}
watch(darkMode, () => {
if (darkMode.value && gamingMode.value == true) {
gaming.value = 'dark';
} else if (!darkMode.value && gamingMode.value == true) {
gaming.value = 'light';
} else {
gaming.value = '';
}
})
watch(gamingMode, () => {
if (darkMode.value && gamingMode.value == true) {
gaming.value = 'dark';
} else if (!darkMode.value && gamingMode.value == true) {
gaming.value = 'light';
} else {
gaming.value = '';
}
})
defineProps<{ defineProps<{
def: any[]; def: any[];
grid?: boolean; grid?: boolean;

40
packages/frontend/src/components/MkSwitch.button.vue
View File

@ -8,8 +8,8 @@ SPDX-License-Identifier: AGPL-3.0-only
v-tooltip="checked ? i18n.ts.itsOn : i18n.ts.itsOff" v-tooltip="checked ? i18n.ts.itsOn : i18n.ts.itsOff"
:class="{ :class="{
[$style.button]: true, [$style.button]: true,
[$style.gamingDark]: gaming === 'dark' && checked, [$style.gamingDark]: gamingType === 'dark' && checked,
[$style.gamingLight]: gaming === 'light' && checked, [$style.gamingLight]: gamingType === 'light' && checked,
[$style.buttonChecked]: checked, [$style.buttonChecked]: checked,
[$style.buttonDisabled]: props.disabled, [$style.buttonDisabled]: props.disabled,
@ -18,47 +18,17 @@ SPDX-License-Identifier: AGPL-3.0-only
@click.prevent.stop="toggle" @click.prevent.stop="toggle"
> >
<div <div
:class="{ [$style.knob]: true, [$style.knobChecked]: checked, [$style.gamingDark]: gaming === 'dark' && checked,[$style.gamingLight]: gaming === 'light' && checked}"></div> :class="{ [$style.knob]: true, [$style.knobChecked]: checked, [$style.gamingDark]: gamingType === 'dark' && checked,[$style.gamingLight]: gamingType === 'light' && checked}"></div>
</span> </span>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import {toRefs, Ref, ref, computed, watch} from 'vue'; import {toRefs, Ref, computed} from 'vue';
import {i18n} from '@/i18n.js'; import {i18n} from '@/i18n.js';
import {defaultStore} from "@/store.js"; import {defaultStore} from "@/store.js";
let gaming = ref(''); let gamingType = computed(defaultStore.makeGetterSetter('gamingType'));
const gamingMode = computed(defaultStore.makeGetterSetter('gamingMode'));
const darkMode = computed(defaultStore.makeGetterSetter('darkMode'));
if (darkMode.value && gamingMode.value == true) {
gaming.value = 'dark';
} else if (!darkMode.value && gamingMode.value == true) {
gaming.value = 'light';
} else {
gaming.value = '';
}
watch(darkMode, () => {
console.log(gaming)
if (darkMode.value && gamingMode.value == true) {
gaming.value = 'dark';
} else if (!darkMode.value && gamingMode.value == true) {
gaming.value = 'light';
} else {
gaming.value = '';
}
})
watch(gamingMode, () => {
if (darkMode.value && gamingMode.value == true) {
gaming.value = 'dark';
} else if (!darkMode.value && gamingMode.value == true) {
gaming.value = 'light';
} else {
gaming.value = '';
}
})
const props = withDefaults(defineProps<{ const props = withDefaults(defineProps<{
checked: boolean | Ref<boolean>; checked: boolean | Ref<boolean>;
disabled?: boolean; disabled?: boolean;

38
packages/frontend/src/components/MkSwitch.vue
View File

@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
--> -->
<template> <template>
<div :class="[$style.root, { [$style.disabled]: disabled && gaming === '', [$style.checked]: checked && gaming === '' }]"> <div :class="[$style.root, { [$style.disabled]: disabled && gamingType === '', [$style.checked]: checked && gamingType === '' }]">
<input <input
ref="input" ref="input"
type="checkbox" type="checkbox"
@ -13,7 +13,7 @@ SPDX-License-Identifier: AGPL-3.0-only
@keydown.enter="toggle" @keydown.enter="toggle"
> >
<XButton :checked="checked" :disabled="disabled" @toggle="toggle"/> <XButton :checked="checked" :disabled="disabled" @toggle="toggle"/>
<span :class="$style.body,{[$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light'}"> <span :class="$style.body,{[$style.gamingDark]: gamingType === 'dark',[$style.gamingLight]: gamingType === 'light'}">
<!-- TODO: 無名slotの方は廃止 --> <!-- TODO: 無名slotの方は廃止 -->
<span :class="$style.label"> <span :class="$style.label">
<span @click="toggle"> <span @click="toggle">
@ -30,39 +30,7 @@ SPDX-License-Identifier: AGPL-3.0-only
import {toRefs, Ref, ref, computed, watch} from 'vue'; import {toRefs, Ref, ref, computed, watch} from 'vue';
import XButton from '@/components/MkSwitch.button.vue'; import XButton from '@/components/MkSwitch.button.vue';
import {defaultStore} from "@/store.js"; import {defaultStore} from "@/store.js";
let gaming = ref(''); let gamingType = computed(defaultStore.makeGetterSetter('gamingType'));
const gamingMode = computed(defaultStore.makeGetterSetter('gamingMode'));
const darkMode = computed(defaultStore.makeGetterSetter('darkMode'));
// gaming.valueに新しい値を代入する
if (darkMode.value && gamingMode.value == true) {
gaming.value = 'dark';
} else if (!darkMode.value && gamingMode.value == true) {
gaming.value = 'light';
} else {
gaming.value = '';
}
watch(darkMode, () => {
console.log(gaming)
if (darkMode.value && gamingMode.value == true) {
gaming.value = 'dark';
} else if (!darkMode.value && gamingMode.value == true) {
gaming.value = 'light';
} else {
gaming.value = '';
}
})
watch(gamingMode, () => {
if (darkMode.value && gamingMode.value == true) {
gaming.value = 'dark';
} else if (!darkMode.value && gamingMode.value == true) {
gaming.value = 'light';
} else {
gaming.value = '';
}
})
const props = defineProps<{ const props = defineProps<{
modelValue: boolean | Ref<boolean>; modelValue: boolean | Ref<boolean>;

33
packages/frontend/src/components/MkTab.vue
View File

@ -7,37 +7,8 @@ SPDX-License-Identifier: AGPL-3.0-only
import {computed, defineComponent, h, resolveDirective, withDirectives , ref , watch} from 'vue'; import {computed, defineComponent, h, resolveDirective, withDirectives , ref , watch} from 'vue';
import {defaultStore} from "@/store.js"; import {defaultStore} from "@/store.js";
let gaming = ref(''); let gamingType = computed(defaultStore.makeGetterSetter('gamingType'));
const gamingMode = computed(defaultStore.makeGetterSetter('gamingMode'));
const darkMode = computed(defaultStore.makeGetterSetter('darkMode'));
if (darkMode.value && gamingMode.value == true) {
gaming.value = 'dark';
} else if (!darkMode.value && gamingMode.value == true) {
gaming.value = 'light';
} else {
gaming.value = '';
}
watch(darkMode, () => {
if (darkMode.value && gamingMode.value == true) {
gaming.value = 'dark';
} else if (!darkMode.value && gamingMode.value == true) {
gaming.value = 'light';
} else {
gaming.value = '';
}
})
watch(gamingMode, () => {
if (darkMode.value && gamingMode.value == true) {
gaming.value = 'dark';
} else if (!darkMode.value && gamingMode.value == true) {
gaming.value = 'light';
} else {
gaming.value = '';
}
})
export default defineComponent({ export default defineComponent({
props: { props: {
modelValue: { modelValue: {
@ -50,7 +21,7 @@ export default defineComponent({
return () => h('div', { return () => h('div', {
class: 'pxhvhrfw', class: 'pxhvhrfw',
}, options.map(option => withDirectives(h('button', { }, options.map(option => withDirectives(h('button', {
class: ['_button', { active: props.modelValue === option.props.value , gamingDark: gaming.value == 'dark' && props.modelValue === option.props.value,gamingLight: gaming.value == 'light' && props.modelValue === option.props.value } ], class: ['_button', { active: props.modelValue === option.props.value , gamingDark: gamingType.value == 'dark' && props.modelValue === option.props.value,gamingLight: gamingType.value == 'light' && props.modelValue === option.props.value } ],
key: option.key, key: option.key,
disabled: props.modelValue === option.props.value, disabled: props.modelValue === option.props.value,
onClick: () => { onClick: () => {

35
packages/frontend/src/components/MkUserSetupDialog.vue
View File

@ -21,7 +21,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<div style="overflow-x: clip;"> <div style="overflow-x: clip;">
<div :class="$style.progressBar"> <div :class="$style.progressBar">
<div :class="[$style.progressBarValue , {[$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light' }]" :style="{ width: `${(page / 5) * 100}%` }"></div> <div :class="[$style.progressBarValue , {[$style.gamingDark]: gamingType === 'dark',[$style.gamingLight]: gamingType === 'light' }]" :style="{ width: `${(page / 5) * 100}%` }"></div>
</div> </div>
<Transition <Transition
mode="out-in" mode="out-in"
@ -136,39 +136,8 @@ import { host } from '@/config.js';
import MkPushNotificationAllowButton from '@/components/MkPushNotificationAllowButton.vue'; import MkPushNotificationAllowButton from '@/components/MkPushNotificationAllowButton.vue';
import { defaultStore } from '@/store.js'; import { defaultStore } from '@/store.js';
import * as os from '@/os.js'; import * as os from '@/os.js';
const gamingType = computed(defaultStore.makeGetterSetter('gamingType'));
let gaming = ref('');
const gamingMode = computed(defaultStore.makeGetterSetter('gamingMode'));
const darkMode = computed(defaultStore.makeGetterSetter('darkMode'));
if (darkMode.value && gamingMode.value == true) {
gaming.value = 'dark';
} else if (!darkMode.value && gamingMode.value == true) {
gaming.value = 'light';
} else {
gaming.value = '';
}
watch(darkMode, () => {
if (darkMode.value && gamingMode.value == true) {
gaming.value = 'dark';
} else if (!darkMode.value && gamingMode.value == true) {
gaming.value = 'light';
} else {
gaming.value = '';
}
})
watch(gamingMode, () => {
if (darkMode.value && gamingMode.value == true) {
gaming.value = 'dark';
} else if (!darkMode.value && gamingMode.value == true) {
gaming.value = 'light';
} else {
gaming.value = '';
}
})
const emit = defineEmits<{ const emit = defineEmits<{
(ev: 'closed'): void; (ev: 'closed'): void;
}>(); }>();

32
packages/frontend/src/components/global/MkPageHeader.tabs.vue
View File

@ -30,7 +30,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div> </div>
<div <div
ref="tabHighlightEl" ref="tabHighlightEl"
:class="[$style.tabHighlight, { [$style.animate]: defaultStore.reactiveState.animation.value , [$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light' }]" :class="[$style.tabHighlight, { [$style.animate]: defaultStore.reactiveState.animation.value , [$style.gamingDark]: gamingType === 'dark',[$style.gamingLight]: gamingType === 'light' }]"
></div> ></div>
</div> </div>
</template> </template>
@ -55,37 +55,9 @@ export type Tab = {
<script lang="ts" setup> <script lang="ts" setup>
import {onMounted, onUnmounted, watch, nextTick, shallowRef, ref, computed} from 'vue'; import {onMounted, onUnmounted, watch, nextTick, shallowRef, ref, computed} from 'vue';
import { defaultStore } from '@/store.js'; import { defaultStore } from '@/store.js';
let gaming = ref('');
const gamingMode = computed(defaultStore.makeGetterSetter('gamingMode')); const gamingType = computed(defaultStore.makeGetterSetter('gamingType'));
const darkMode = computed(defaultStore.makeGetterSetter('darkMode'));
if (darkMode.value && gamingMode.value == true) {
gaming.value = 'dark';
} else if (!darkMode.value && gamingMode.value == true) {
gaming.value = 'light';
} else {
gaming.value = '';
}
watch(darkMode, () => {
if (darkMode.value && gamingMode.value == true) {
gaming.value = 'dark';
} else if (!darkMode.value && gamingMode.value == true) {
gaming.value = 'light';
} else {
gaming.value = '';
}
})
watch(gamingMode, () => {
if (darkMode.value && gamingMode.value == true) {
gaming.value = 'dark';
} else if (!darkMode.value && gamingMode.value == true) {
gaming.value = 'light';
} else {
gaming.value = '';
}
})
const props = withDefaults(defineProps<{ const props = withDefaults(defineProps<{
tabs?: Tab[]; tabs?: Tab[];
tab?: string; tab?: string;

49
packages/frontend/src/ui/_common_/navbar.vue
View File

@ -15,7 +15,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div> </div>
<div :class="$style.middle"> <div :class="$style.middle">
<MkA v-tooltip.noDelay.right="i18n.ts.timeline" <MkA v-tooltip.noDelay.right="i18n.ts.timeline"
:class="[$style.item, { [$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light' }]" :class="[$style.item, { [$style.gamingDark]: gamingType === 'dark',[$style.gamingLight]: gamingType === 'light' }]"
:activeClass="$style.active" to="/" exact> :activeClass="$style.active" to="/" exact>
<i :class="$style.itemIcon" class="ti ti-home ti-fw"></i><span :class="$style.itemText">{{ <i :class="$style.itemIcon" class="ti ti-home ti-fw"></i><span :class="$style.itemText">{{
i18n.ts.timeline i18n.ts.timeline
@ -28,7 +28,7 @@ SPDX-License-Identifier: AGPL-3.0-only
v-else-if="navbarItemDef[item] && (navbarItemDef[item].show !== false)" v-else-if="navbarItemDef[item] && (navbarItemDef[item].show !== false)"
v-tooltip.noDelay.right="navbarItemDef[item].title" v-tooltip.noDelay.right="navbarItemDef[item].title"
class="_button" class="_button"
:class="[$style.item, { [$style.active]: gaming === '' && navbarItemDef[item].active, [$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light' }]" :class="[$style.item, { [$style.active]: gamingType === '' && navbarItemDef[item].active, [$style.gamingDark]: gamingType === 'dark',[$style.gamingLight]: gamingType === 'light' }]"
:activeClass="$style.active" :activeClass="$style.active"
:to="navbarItemDef[item].to" :to="navbarItemDef[item].to"
v-on="navbarItemDef[item].action ? { click: navbarItemDef[item].action } : {}" v-on="navbarItemDef[item].action ? { click: navbarItemDef[item].action } : {}"
@ -36,29 +36,29 @@ SPDX-License-Identifier: AGPL-3.0-only
<i class="ti-fw" :class="[$style.itemIcon, navbarItemDef[item].icon]"></i><span <i class="ti-fw" :class="[$style.itemIcon, navbarItemDef[item].icon]"></i><span
:class="$style.itemText">{{ navbarItemDef[item].title }}</span> :class="$style.itemText">{{ navbarItemDef[item].title }}</span>
<span v-if="navbarItemDef[item].indicated" <span v-if="navbarItemDef[item].indicated"
:class="[$style.itemIndicator,{[$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light'}]"><i :class="[$style.itemIndicator,{[$style.gamingDark]: gamingType === 'dark',[$style.gamingLight]: gamingType === 'light'}]"><i
class="_indicatorCircle"></i></span> class="_indicatorCircle"></i></span>
</component> </component>
</template> </template>
<div :class="$style.divider"></div> <div :class="$style.divider"></div>
<MkA v-if="$i.isAdmin || $i.isModerator" v-tooltip.noDelay.right="i18n.ts.controlPanel" <MkA v-if="$i.isAdmin || $i.isModerator" v-tooltip.noDelay.right="i18n.ts.controlPanel"
:class="[$style.item, { [$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light' }]" :class="[$style.item, { [$style.gamingDark]: gamingType === 'dark',[$style.gamingLight]: gamingType === 'light' }]"
:activeClass="$style.active" to="/admin"> :activeClass="$style.active" to="/admin">
<i :class="$style.itemIcon" class="ti ti-dashboard ti-fw"></i><span <i :class="$style.itemIcon" class="ti ti-dashboard ti-fw"></i><span
:class="$style.itemText">{{ i18n.ts.controlPanel }}</span> :class="$style.itemText">{{ i18n.ts.controlPanel }}</span>
</MkA> </MkA>
<button class="_button" <button class="_button"
:class="[$style.item, { [$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light' }]" :class="[$style.item, { [$style.gamingDark]: gamingType === 'dark',[$style.gamingLight]: gamingType === 'light' }]"
@click="more"> @click="more">
<i :class="$style.itemIcon" class="ti ti-grid-dots ti-fw"></i><span :class="$style.itemText">{{ <i :class="$style.itemIcon" class="ti ti-grid-dots ti-fw"></i><span :class="$style.itemText">{{
i18n.ts.more i18n.ts.more
}}</span> }}</span>
<span v-if="otherMenuItemIndicated" <span v-if="otherMenuItemIndicated"
:class="[$style.itemIndicator,{[$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light'}]"><i :class="[$style.itemIndicator,{[$style.gamingDark]: gamingType === 'dark',[$style.gamingLight]: gamingType === 'light'}]"><i
class="_indicatorCircle"></i></span> class="_indicatorCircle"></i></span>
</button> </button>
<MkA v-tooltip.noDelay.right="i18n.ts.settings" <MkA v-tooltip.noDelay.right="i18n.ts.settings"
:class="[$style.item, { [$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light' }]" :class="[$style.item, { [$style.gamingDark]: gamingType === 'dark',[$style.gamingLight]: gamingType === 'light' }]"
:activeClass="$style.active" :activeClass="$style.active"
to="/settings"> to="/settings">
<i :class="$style.itemIcon" class="ti ti-settings ti-fw"></i><span <i :class="$style.itemIcon" class="ti ti-settings ti-fw"></i><span
@ -67,11 +67,11 @@ SPDX-License-Identifier: AGPL-3.0-only
</div> </div>
<div :class="$style.bottom"> <div :class="$style.bottom">
<button v-tooltip.noDelay.right="i18n.ts.note" class="_button" <button v-tooltip.noDelay.right="i18n.ts.note" class="_button"
:class="[$style.post ,{[$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light',}]" :class="[$style.post ,{[$style.gamingDark]: gamingType === 'dark',[$style.gamingLight]: gamingType === 'light',}]"
data-cy-open-post-form data-cy-open-post-form
@click="os.post"> @click="os.post">
<i class="ti ti-pencil ti-fw" :class="$style.postIcon"></i><span <i class="ti ti-pencil ti-fw" :class="$style.postIcon"></i><span
:class="$style.postText,{[$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light',}">{{ :class="$style.postText,{[$style.gamingDark]: gamingType === 'dark',[$style.gamingLight]: gamingType === 'light',}">{{
i18n.ts.note i18n.ts.note
}}</span> }}</span>
</button> </button>
@ -96,10 +96,7 @@ import {i18n} from '@/i18n';
import {instance} from '@/instance'; import {instance} from '@/instance';
function hexToRgb(hex) { function hexToRgb(hex) {
// 16進数のカラーコードから "#" を除去
hex = hex.replace(/^#/, ''); hex = hex.replace(/^#/, '');
// 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);
@ -116,7 +113,7 @@ document.documentElement.style.setProperty('--gamingspeed', defaultStore.state.n
const iconOnly = ref(false); const iconOnly = ref(false);
let bannerUrl = ref(defaultStore.state.bannerUrl); let bannerUrl = ref(defaultStore.state.bannerUrl);
let iconUrl = ref(); let iconUrl = ref();
let gaming = ref(''); let gamingType = ref(defaultStore.state.gamingType);
const gamingMode = computed(defaultStore.makeGetterSetter('gamingMode')); const gamingMode = computed(defaultStore.makeGetterSetter('gamingMode'));
const darkMode = computed(defaultStore.makeGetterSetter('darkMode')); const darkMode = computed(defaultStore.makeGetterSetter('darkMode'));
@ -141,35 +138,23 @@ watch(darkMode, () => {
}) })
if (darkMode.value && gamingMode.value == true) { if (darkMode.value && gamingMode.value == true) {
gaming.value = 'dark'; gamingType.value = 'dark';
} else if (!darkMode.value && gamingMode.value == true) { } else if (!darkMode.value && gamingMode.value == true) {
gaming.value = 'light'; gamingType.value = 'light';
} else { } else {
gaming.value = ''; gamingType.value = '';
} }
watch(darkMode, () => { watch([darkMode,gamingMode], () => {
if (darkMode.value && gamingMode.value == true) { if (darkMode.value && gamingMode.value == true) {
gaming.value = 'dark'; gamingType.value = 'dark';
} else if (!darkMode.value && gamingMode.value == true) { } else if (!darkMode.value && gamingMode.value == true) {
gaming.value = 'light'; gamingType.value = 'light';
} else { } else {
gaming.value = ''; gamingType.value = '';
} }
}) })
watch(gamingMode, () => {
if (darkMode.value && gamingMode.value == true) {
gaming.value = 'dark';
} else if (!darkMode.value && gamingMode.value == true) {
gaming.value = 'light';
} else {
gaming.value = '';
}
})
const menu = computed(() => defaultStore.state.menu); const menu = computed(() => defaultStore.state.menu);
const otherMenuItemIndicated = computed(() => { const otherMenuItemIndicated = computed(() => {
for (const def in navbarItemDef) { for (const def in navbarItemDef) {