fix
This commit is contained in:
mattyatea
parent
56066ae836
commit
cb3983b741
|
|
@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
-->
|
||||
|
||||
<template>
|
||||
<button
|
||||
<button
|
||||
v-if="!link"
|
||||
ref="el" class="_button"
|
||||
:class="[
|
||||
|
|
@ -29,13 +29,13 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
:value="value"
|
||||
@click="emit('click', $event)"
|
||||
@mousedown="onMousedown"
|
||||
>
|
||||
>
|
||||
<div ref="ripples" :class="$style.ripples" :data-children-class="$style.ripple"></div>
|
||||
<div :class="$style.content">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</button>
|
||||
<MkA
|
||||
</button>
|
||||
<MkA
|
||||
v-else class="_button"
|
||||
:class="[
|
||||
$style.root,
|
||||
|
|
@ -56,17 +56,17 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
]"
|
||||
:to="to"
|
||||
@mousedown="onMousedown"
|
||||
>
|
||||
>
|
||||
<div ref="ripples" :class="$style.ripples" :data-children-class="$style.ripple"></div>
|
||||
<div :class="$style.content">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</MkA>
|
||||
</MkA>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { nextTick, onMounted, shallowRef, computed, ref, watch } from 'vue';
|
||||
import {defaultStore} from "@/store.js";
|
||||
import { defaultStore } from '@/store.js';
|
||||
|
||||
const props = defineProps<{
|
||||
type?: 'button' | 'submit' | 'reset';
|
||||
|
|
@ -99,29 +99,29 @@ if (darkMode.value && gamingMode.value && props.primary || darkMode.value && gam
|
|||
gaming.value = 'dark';
|
||||
} else if (!darkMode.value && gamingMode.value && props.primary || darkMode.value && gamingMode.value && props.gradate ) {
|
||||
gaming.value = 'light';
|
||||
}else{
|
||||
} 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) {
|
||||
} else if (!darkMode.value && gamingMode.value && props.primary || darkMode.value && gamingMode.value && props.gradate) {
|
||||
gaming.value = 'light';
|
||||
}else{
|
||||
} 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{
|
||||
} else {
|
||||
gaming.value = '';
|
||||
}
|
||||
})
|
||||
});
|
||||
const emit = defineEmits<{
|
||||
(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 ;
|
||||
animation: AnimationLight var(--gamingspeed) cubic-bezier(0, 0.2, 0.90, 1) infinite ;
|
||||
}
|
||||
&:hover{
|
||||
background: var(--accent);
|
||||
}
|
||||
}
|
||||
|
||||
&.gamingDark {
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
-->
|
||||
|
||||
<template>
|
||||
<div :class="$style.root">
|
||||
<div :class="$style.root">
|
||||
<div :class="$style.top">
|
||||
<div :class="$style.banner" :style="{ backgroundImage: `url(${ bannerUrl })` }"></div>
|
||||
<button class="_button" :class="$style.instance" @click="openInstanceMenu">
|
||||
|
|
@ -12,55 +12,74 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
</button>
|
||||
</div>
|
||||
<div :class="$style.middle">
|
||||
<MkA :class="[$style.item, { [$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light' }]"
|
||||
:activeClass="$style.active" to="/" exact>
|
||||
<MkA
|
||||
:class="[$style.item, { [$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light' }]"
|
||||
:activeClass="$style.active" to="/" exact
|
||||
>
|
||||
<i :class="$style.itemIcon" class="ti ti-home ti-fw"></i><span :class="$style.itemText">{{
|
||||
i18n.ts.timeline
|
||||
}}</span>
|
||||
</MkA>
|
||||
<template v-for="item in menu">
|
||||
<div v-if="item === '-'" :class="$style.divider"></div>
|
||||
<component :is="navbarItemDef[item].to ? 'MkA' : 'button'"
|
||||
<component
|
||||
:is="navbarItemDef[item].to ? 'MkA' : 'button'"
|
||||
v-else-if="navbarItemDef[item] && (navbarItemDef[item].show !== false)" class="_button"
|
||||
:class="[$style.item, { [$style.active]: gaming === '' && navbarItemDef[item].active, [$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light' }]"
|
||||
:activeClass="$style.active" :to="navbarItemDef[item].to"
|
||||
v-on="navbarItemDef[item].action ? { click: navbarItemDef[item].action } : {}">
|
||||
v-on="navbarItemDef[item].action ? { click: navbarItemDef[item].action } : {}"
|
||||
>
|
||||
<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'}]">
|
||||
: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
|
||||
v-else class="_indicatorCircle"></i></span>
|
||||
v-else class="_indicatorCircle"
|
||||
></i></span>
|
||||
</component>
|
||||
</template>
|
||||
<div :class="$style.divider"></div>
|
||||
<MkA v-if="$i.isAdmin || $i.isModerator"
|
||||
<MkA
|
||||
v-if="$i.isAdmin || $i.isModerator"
|
||||
:class="[$style.item, { [$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light' }]"
|
||||
:activeClass="$style.active" to="/admin">
|
||||
:activeClass="$style.active" to="/admin"
|
||||
>
|
||||
<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>
|
||||
<button
|
||||
:class="[$style.item, { [$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light' }]"
|
||||
class="_button" @click="more">
|
||||
class="_button" @click="more"
|
||||
>
|
||||
<i :class="$style.itemIcon" class="ti ti-grid-dots ti-fw"></i><span :class="$style.itemText">{{
|
||||
i18n.ts.more
|
||||
}}</span>
|
||||
<span v-if="otherMenuItemIndicated"
|
||||
:class="[$style.itemIndicator,{[$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light'}]"><i
|
||||
class="_indicatorCircle"></i></span>
|
||||
<span
|
||||
v-if="otherMenuItemIndicated"
|
||||
:class="[$style.itemIndicator,{[$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light'}]"
|
||||
><i
|
||||
class="_indicatorCircle"
|
||||
></i></span>
|
||||
</button>
|
||||
<MkA :class="[$style.item, { [$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light' }]"
|
||||
:activeClass="$style.active" to="/settings">
|
||||
<MkA
|
||||
:class="[$style.item, { [$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light' }]"
|
||||
:activeClass="$style.active" to="/settings"
|
||||
>
|
||||
<i :class="$style.itemIcon" class="ti ti-settings ti-fw"></i><span :class="$style.itemText">{{
|
||||
i18n.ts.settings
|
||||
}}</span>
|
||||
</MkA>
|
||||
</div>
|
||||
<div :class="$style.bottom">
|
||||
<button class="_button"
|
||||
:class="[$style.post ,{[$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light',}]"
|
||||
data-cy-open-post-form @click="os.post">
|
||||
<button
|
||||
class="_button"
|
||||
: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>
|
||||
|
|
@ -70,21 +89,22 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<MkAcct :class="$style.acct" class="_nowrap" :user="$i"/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {computed, defineAsyncComponent, ref, toRef, watch} from 'vue';
|
||||
import {openInstanceMenu} from './common.js';
|
||||
import { computed, defineAsyncComponent, ref, toRef, watch } from 'vue';
|
||||
import { openInstanceMenu } from './common.js';
|
||||
import * as os from '@/os';
|
||||
import {navbarItemDef} from '@/navbar.js';
|
||||
import {$i, openAccountMenu as openAccountMenu_} from '@/account';
|
||||
import {bannerDark, bannerLight, defaultStore, iconDark, iconLight} from '@/store';
|
||||
import {i18n} from '@/i18n';
|
||||
import {instance} from '@/instance';
|
||||
import { navbarItemDef } from '@/navbar.js';
|
||||
import { $i, openAccountMenu as openAccountMenu_ } from '@/account';
|
||||
import { bannerDark, bannerLight, defaultStore, iconDark, iconLight } from '@/store';
|
||||
import { i18n } from '@/i18n';
|
||||
let gamingType = computed(defaultStore.makeGetterSetter('gamingType'));
|
||||
const indicatorCounterToggle = computed(defaultStore.makeGetterSetter('indicatorCounterToggle'));
|
||||
let bannerUrl = ref(defaultStore.state.bannerUrl);
|
||||
let iconUrl = ref(defaultStore.state.iconUrl);
|
||||
|
||||
function hexToRgb(hex) {
|
||||
// 16進数のカラーコードから "#" を除去
|
||||
hex = hex.replace(/^#/, '');
|
||||
|
|
@ -96,14 +116,15 @@ function hexToRgb(hex) {
|
|||
|
||||
return `${r},${g},${b}`;
|
||||
}
|
||||
|
||||
const darkMode = computed(defaultStore.makeGetterSetter('darkMode'));
|
||||
const gamingMode = computed(defaultStore.makeGetterSetter('gamingMode'));
|
||||
document.documentElement.style.setProperty('--homeColor', hexToRgb(defaultStore.state.homeColor));
|
||||
document.documentElement.style.setProperty("--followerColor",hexToRgb(defaultStore.state.followerColor));
|
||||
document.documentElement.style.setProperty("--specifiedColor",hexToRgb(defaultStore.state.specifiedColor))
|
||||
document.documentElement.style.setProperty('--gamingspeed', defaultStore.state.numberOfGamingSpeed+'s');
|
||||
document.documentElement.style.setProperty('--followerColor', hexToRgb(defaultStore.state.followerColor));
|
||||
document.documentElement.style.setProperty('--specifiedColor', hexToRgb(defaultStore.state.specifiedColor));
|
||||
document.documentElement.style.setProperty('--gamingspeed', defaultStore.state.numberOfGamingSpeed + 's');
|
||||
|
||||
let gaming = ref()
|
||||
let gaming = ref();
|
||||
if (darkMode.value) {
|
||||
bannerUrl.value = bannerDark;
|
||||
iconUrl.value = iconDark;
|
||||
|
|
@ -119,7 +140,7 @@ watch(darkMode, () => {
|
|||
bannerUrl.value = bannerLight;
|
||||
iconUrl.value = iconLight;
|
||||
}
|
||||
})
|
||||
});
|
||||
// gaming.valueに新しい値を代入する
|
||||
if (darkMode.value && gamingMode.value == true) {
|
||||
gaming.value = 'dark';
|
||||
|
|
@ -137,7 +158,7 @@ watch(darkMode, () => {
|
|||
} else {
|
||||
gaming.value = '';
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
watch(gamingMode, () => {
|
||||
if (darkMode.value && gamingMode.value == true) {
|
||||
|
|
@ -147,7 +168,7 @@ watch(gamingMode, () => {
|
|||
} else {
|
||||
gaming.value = '';
|
||||
}
|
||||
})
|
||||
});
|
||||
const menu = toRef(defaultStore.state, 'menu');
|
||||
const otherMenuItemIndicated = computed(() => {
|
||||
for (const def in navbarItemDef) {
|
||||
|
|
@ -306,7 +327,6 @@ function more() {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.postIcon {
|
||||
|
|
|
|||
Loading…
Reference in New Issue