feat: ゲーミングモード
This commit is contained in:
mattyatea
parent
093540375d
commit
13de104634
28 changed files with 2917 additions and 865 deletions
|
|
@ -14,44 +14,44 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
>
|
||||
<template v-for="(item, i) in items2">
|
||||
<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]">
|
||||
<span v-else-if="item.type === 'label'" role="menuitem" :class="[$style.label, $style.item, { [$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light' }]">
|
||||
<span>{{ item.text }}</span>
|
||||
</span>
|
||||
<span v-else-if="item.type === 'pending'" role="menuitem" :tabindex="i" :class="[$style.pending, $style.item]">
|
||||
<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><MkEllipsis/></span>
|
||||
</span>
|
||||
<MkA v-else-if="item.type === 'link'" role="menuitem" :to="item.to" :tabindex="i" class="_button" :class="$style.item" @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]: gaming === 'dark',[$style.gamingLight]: gaming === '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>
|
||||
<MkAvatar v-if="item.avatar" :user="item.avatar" :class="$style.avatar"/>
|
||||
<span>{{ item.text }}</span>
|
||||
<span v-if="item.indicate" :class="$style.indicator"><i class="_indicatorCircle"></i></span>
|
||||
</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" @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]: gaming === 'dark',[$style.gamingLight]: gaming === '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>
|
||||
<span>{{ item.text }}</span>
|
||||
<span v-if="item.indicate" :class="$style.indicator"><i class="_indicatorCircle"></i></span>
|
||||
</a>
|
||||
<button v-else-if="item.type === 'user'" role="menuitem" :tabindex="i" class="_button" :class="[$style.item, { [$style.active]: item.active }]" :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]: gaming === 'dark',[$style.gamingLight]: gaming === '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"/>
|
||||
<span v-if="item.indicate" :class="$style.indicator"><i class="_indicatorCircle"></i></span>
|
||||
</button>
|
||||
<button v-else-if="item.type === 'switch'" role="menuitemcheckbox" :tabindex="i" class="_button" :class="[$style.item, $style.switch, { [$style.switchDisabled]: item.disabled } ]" @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]: gaming === 'dark',[$style.gamingLight]: gaming === '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)" />
|
||||
<span :class="$style.switchText">{{ item.text }}</span>
|
||||
</button>
|
||||
<div v-else-if="item.type === 'parent'" role="menuitem" :tabindex="i" :class="[$style.item, $style.parent, { [$style.childShowing]: childShowingItem === item }]" @mouseenter="preferClick ? null : showChildren(item, $event)" @click="!preferClick ? null : showChildren(item, $event)">
|
||||
<div v-else-if="item.type === 'parent'" 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)">
|
||||
<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i>
|
||||
<span>{{ item.text }}</span>
|
||||
<span :class="$style.caret"><i class="ti ti-chevron-right ti-fw"></i></span>
|
||||
</div>
|
||||
<button v-else :tabindex="i" class="_button" role="menuitem" :class="[$style.item, { [$style.danger]: item.danger, [$style.active]: item.active }]" :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]"></i>
|
||||
<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)">
|
||||
<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon, { [$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light' }]"></i>
|
||||
<MkAvatar v-if="item.avatar" :user="item.avatar" :class="$style.avatar"/>
|
||||
<span>{{ item.text }}</span>
|
||||
<span v-if="item.indicate" :class="$style.indicator"><i class="_indicatorCircle"></i></span>
|
||||
</button>
|
||||
</template>
|
||||
<span v-if="items2.length === 0" :class="[$style.none, $style.item]">
|
||||
<span v-if="items2.length === 0" :class="[$style.none, $style.item, { [$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light' }]">
|
||||
<span>{{ i18n.ts.none }}</span>
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -62,14 +62,51 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Ref, defineAsyncComponent, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
|
||||
import {Ref, defineAsyncComponent, nextTick, onBeforeUnmount, onMounted, ref, watch, computed} from 'vue';
|
||||
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 * as os from '@/os.js';
|
||||
import { i18n } from '@/i18n.js';
|
||||
import { isTouchUsing } from '@/scripts/touch.js';
|
||||
import {defaultStore} from '@/store.js'
|
||||
let gaming = ref('');
|
||||
|
||||
const gamingMode = computed(defaultStore.makeGetterSetter('gamingMode'));
|
||||
const darkMode = computed(defaultStore.makeGetterSetter('darkMode'));
|
||||
if (darkMode.value && gamingMode.value == true) {
|
||||
gaming.value = 'dark';
|
||||
document.documentElement.style.setProperty('--accent', '#fff');
|
||||
document.documentElement.style.setProperty('--accentLighten', '#fff');
|
||||
} else if (!darkMode.value && gamingMode.value == true) {
|
||||
gaming.value = 'light';
|
||||
} else {
|
||||
gaming.value = '';
|
||||
}
|
||||
|
||||
watch(darkMode, () => {
|
||||
if (darkMode.value && gamingMode.value == true) {
|
||||
gaming.value = 'dark';
|
||||
document.documentElement.style.setProperty('--accent', '#fff');
|
||||
document.documentElement.style.setProperty('--accentLighten', '#fff');
|
||||
} else if (!darkMode.value && gamingMode.value == true) {
|
||||
gaming.value = 'light';
|
||||
} else {
|
||||
gaming.value = '';
|
||||
}
|
||||
})
|
||||
|
||||
watch(gamingMode, () => {
|
||||
if (darkMode.value && gamingMode.value == true) {
|
||||
gaming.value = 'dark';
|
||||
document.documentElement.style.setProperty('--accent', '#fff');
|
||||
document.documentElement.style.setProperty('--accentLighten', '#fff');
|
||||
} else if (!darkMode.value && gamingMode.value == true) {
|
||||
gaming.value = 'light';
|
||||
} else {
|
||||
gaming.value = '';
|
||||
}
|
||||
})
|
||||
const childrenCache = new WeakMap<MenuParent, MenuItem[]>();
|
||||
</script>
|
||||
|
||||
|
|
@ -294,10 +331,32 @@ onBeforeUnmount(() => {
|
|||
&:not(:disabled):hover {
|
||||
color: var(--accent);
|
||||
text-decoration: none;
|
||||
&:before {
|
||||
background: var(--accentedBg);
|
||||
}
|
||||
&.gamingDark{
|
||||
color:black !important;
|
||||
}
|
||||
&.gamingLight{
|
||||
color:white !important;
|
||||
}
|
||||
&.gamingDark:before{
|
||||
color:black !important;
|
||||
background: linear-gradient(270deg, #e7a2a2, #e3cfa2, #ebefa1, #b3e7a6, #a6ebe7, #aec5e3, #cabded, #e0b9e3, #f4bddd); background-size: 1800% 1800%;
|
||||
-webkit-animation: AnimationDark 44s cubic-bezier(0, 0.2, 0.90, 1) infinite;
|
||||
-moz-animation: AnimationDark 44s cubic-bezier(0, 0.2, 0.90, 1) infinite;
|
||||
animation: AnimationDark 44s cubic-bezier(0, 0.2, 0.90, 1) infinite;
|
||||
|
||||
}
|
||||
&.gamingLight:before{
|
||||
color:white !important;
|
||||
background: linear-gradient(270deg, #c06161, #c0a567, #b6ba69, #81bc72, #63c3be, #8bacd6, #9f8bd6, #d18bd6, #d883b4); background-size: 1800% 1800% !important;
|
||||
-webkit-animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important;
|
||||
-moz-animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important;
|
||||
animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important;
|
||||
|
||||
}
|
||||
|
||||
&:before {
|
||||
background: var(--accentedBg);
|
||||
}
|
||||
}
|
||||
|
||||
&.danger {
|
||||
|
|
@ -322,12 +381,32 @@ onBeforeUnmount(() => {
|
|||
|
||||
&:active,
|
||||
&.active {
|
||||
color: var(--fgOnAccent) !important;
|
||||
color: var(--fgOnAccent);
|
||||
opacity: 1;
|
||||
|
||||
&.gamingDark{
|
||||
color:black !important;
|
||||
}
|
||||
&.gamingLight{
|
||||
color:white !important;
|
||||
}
|
||||
&:before {
|
||||
background: var(--accent) !important;
|
||||
background: var(--accent);
|
||||
}
|
||||
&.gamingDark:before{
|
||||
color:black !important;
|
||||
background: linear-gradient(270deg, #e7a2a2, #e3cfa2, #ebefa1, #b3e7a6, #a6ebe7, #aec5e3, #cabded, #e0b9e3, #f4bddd); background-size: 1800% 1800%;
|
||||
-webkit-animation: AnimationDark 44s cubic-bezier(0, 0.2, 0.90, 1) infinite;
|
||||
-moz-animation: AnimationDark 44s cubic-bezier(0, 0.2, 0.90, 1) infinite;
|
||||
animation: AnimationDark 44s cubic-bezier(0, 0.2, 0.90, 1) infinite;
|
||||
}
|
||||
|
||||
&.gamingLight:before{
|
||||
color:white !important;
|
||||
background: linear-gradient(270deg, #c06161, #c0a567, #b6ba69, #81bc72, #63c3be, #8bacd6, #9f8bd6, #d18bd6, #d883b4); background-size: 1800% 1800% !important;
|
||||
-webkit-animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important;
|
||||
-moz-animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important;
|
||||
animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:active):focus-visible {
|
||||
|
|
@ -364,9 +443,32 @@ onBeforeUnmount(() => {
|
|||
color: var(--accent);
|
||||
text-decoration: none;
|
||||
|
||||
&:before {
|
||||
background: var(--accentedBg);
|
||||
}
|
||||
&:before {
|
||||
background: var(--accentedBg);
|
||||
}
|
||||
&.gamingDark{
|
||||
color:black !important;
|
||||
}
|
||||
&.gamingLight{
|
||||
color:white !important;
|
||||
}
|
||||
&.gamingDark:before{
|
||||
color:black !important;
|
||||
background: linear-gradient(270deg, #e7a2a2, #e3cfa2, #ebefa1, #b3e7a6, #a6ebe7, #aec5e3, #cabded, #e0b9e3, #f4bddd); background-size: 1800% 1800%;
|
||||
-webkit-animation: AnimationDark 44s cubic-bezier(0, 0.2, 0.90, 1) infinite;
|
||||
-moz-animation: AnimationDark 44s cubic-bezier(0, 0.2, 0.90, 1) infinite;
|
||||
animation: AnimationDark 44s cubic-bezier(0, 0.2, 0.90, 1) infinite;
|
||||
}
|
||||
|
||||
&.gamingLight:before{
|
||||
color:white !important;
|
||||
background: linear-gradient(270deg, #c06161, #c0a567, #b6ba69, #81bc72, #63c3be, #8bacd6, #9f8bd6, #d18bd6, #d883b4); background-size: 1800% 1800% !important;
|
||||
-webkit-animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important;
|
||||
-moz-animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important;
|
||||
animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -429,4 +531,69 @@ onBeforeUnmount(() => {
|
|||
margin: 8px 0;
|
||||
border-top: solid 0.5px var(--divider);
|
||||
}
|
||||
@-webkit-keyframes AnimationLight {
|
||||
0% {
|
||||
background-position: 0% 50%
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 50%
|
||||
}
|
||||
100% {
|
||||
background-position: 0% 50%
|
||||
}
|
||||
}
|
||||
@-moz-keyframes AnimationLight {
|
||||
0% {
|
||||
background-position: 0% 50%
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 50%
|
||||
}
|
||||
100% {
|
||||
background-position: 0% 50%
|
||||
}
|
||||
} @keyframes AnimationLight {
|
||||
0% {
|
||||
background-position: 0% 50%
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 50%
|
||||
}
|
||||
100% {
|
||||
background-position: 0% 50%
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes AnimationDark {
|
||||
0% {
|
||||
background-position: 0% 50%
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 50%
|
||||
}
|
||||
100% {
|
||||
background-position: 0% 50%
|
||||
}
|
||||
}
|
||||
@-moz-keyframes AnimationDark {
|
||||
0% {
|
||||
background-position: 0% 50%
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 50%
|
||||
}
|
||||
100% {
|
||||
background-position: 0% 50%
|
||||
}
|
||||
}
|
||||
@keyframes AnimationDark {
|
||||
0% {
|
||||
background-position: 0% 50%
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 50%
|
||||
}
|
||||
100% {
|
||||
background-position: 0% 50%
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue