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

fix

This commit is contained in:
mattyatea 2024-01-08 05:52:35 +09:00
parent 56066ae836
commit cb3983b741
2 changed files with 227 additions and 204 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,7 +4,7 @@ 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="[
@ -29,13 +29,13 @@ SPDX-License-Identifier: AGPL-3.0-only
: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,
@ -56,17 +56,17 @@ SPDX-License-Identifier: AGPL-3.0-only
]" ]"
: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';
@ -99,29 +99,29 @@ if (darkMode.value && gamingMode.value && props.primary || darkMode.value && gam
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 {

94
packages/frontend/src/ui/_common_/navbar-for-mobile.vue
View File

@ -4,7 +4,7 @@ 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">
@ -12,55 +12,74 @@ SPDX-License-Identifier: AGPL-3.0-only
</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' }]"
: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
}}</span> }}</span>
</MkA> </MkA>
<template v-for="item in menu"> <template v-for="item in menu">
<div v-if="item === '-'" :class="$style.divider"></div> <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" 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' }]" :class="[$style.item, { [$style.active]: gaming === '' && navbarItemDef[item].active, [$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light' }]"
:activeClass="$style.active" :to="navbarItemDef[item].to" :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 <i class="ti-fw" :class="[$style.itemIcon, navbarItemDef[item].icon]"></i><span
:class="$style.itemText">{{ navbarItemDef[item].title }}</span> :class="$style.itemText"
<span v-if="navbarItemDef[item].indicated" >{{ navbarItemDef[item].title }}</span>
:class="[$style.itemIndicator,{[$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light'}]"> <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"
></i></span>
</component> </component>
</template> </template>
<div :class="$style.divider"></div> <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' }]" :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 <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 <button
:class="[$style.item, { [$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light' }]" :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">{{ <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
:class="[$style.itemIndicator,{[$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light'}]"><i v-if="otherMenuItemIndicated"
class="_indicatorCircle"></i></span> :class="[$style.itemIndicator,{[$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light'}]"
><i
class="_indicatorCircle"
></i></span>
</button> </button>
<MkA :class="[$style.item, { [$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light' }]" <MkA
:activeClass="$style.active" to="/settings"> :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">{{ <i :class="$style.itemIcon" class="ti ti-settings ti-fw"></i><span :class="$style.itemText">{{
i18n.ts.settings i18n.ts.settings
}}</span> }}</span>
</MkA> </MkA>
</div> </div>
<div :class="$style.bottom"> <div :class="$style.bottom">
<button class="_button" <button
:class="[$style.post ,{[$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light',}]" class="_button"
data-cy-open-post-form @click="os.post"> :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;">{{ <i :class="$style.postIcon" class="ti ti-pencil ti-fw"></i><span style="position: relative;">{{
i18n.ts.note i18n.ts.note
}}</span> }}</span>
@ -70,21 +89,22 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkAcct :class="$style.acct" class="_nowrap" :user="$i"/> <MkAcct :class="$style.acct" class="_nowrap" :user="$i"/>
</button> </button>
</div> </div>
</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(/^#/, '');
@ -96,14 +116,15 @@ function hexToRgb(hex) {
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;
@ -119,7 +140,7 @@ watch(darkMode, () => {
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';
@ -137,7 +158,7 @@ watch(darkMode, () => {
} else { } else {
gaming.value = ''; gaming.value = '';
} }
}) });
watch(gamingMode, () => { watch(gamingMode, () => {
if (darkMode.value && gamingMode.value == true) { if (darkMode.value && gamingMode.value == true) {
@ -147,7 +168,7 @@ watch(gamingMode, () => {
} 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) {
@ -306,7 +327,6 @@ function more() {
} }
} }
} }
.postIcon { .postIcon {