Mizah/mizzkey
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

fix: icon

Browse source
This commit is contained in:
mattyatea 2023-09-22 20:07:39 +09:00
parent a63bef2d8f
commit 093540375d
8 changed files with 1787 additions and 1083 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

240
packages/frontend/src/components/MkFollowButton.vue
View file

@ -2,46 +2,100 @@
SPDX-FileCopyrightText: syuilo and other misskey contributors SPDX-FileCopyrightText: syuilo and other misskey contributors
SPDX-License-Identifier: AGPL-3.0-only 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 }]" :class="[$style.root, ,{ [$style.wait]: wait, [$style.active]: isFollowing || hasPendingFollowRequestFromYou,[$style.gamingDark]: gaming === 'dark' || isFollowing || hasPendingFollowRequestFromYou,[$style.gamingLight]: gaming === 'light' || isFollowing || hasPendingFollowRequestFromYou
, [$style.full]: full, [$style.large]: large }]"
:disabled="wait" :disabled="wait"
@click="onClick" @click="onClick"
> >
<template v-if="!wait"> <template v-if="!wait">
<template v-if="hasPendingFollowRequestFromYou && user.isLocked"> <template v-if="hasPendingFollowRequestFromYou && user.isLocked">
<span v-if="full" :class="$style.text">{{ i18n.ts.followRequestPending }}</span><i class="ti ti-hourglass-empty"></i> <span v-if="full"
:class="$style.text,{[$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light'} ">{{
i18n.ts.followRequestPending
}}</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" :class="$style.text">{{ i18n.ts.processing }}</span><MkLoading :em="true" :colored="false"/> <span v-if="full"
:class="$style.text,{[$style.gamingDark]: gaming === 'dark' ,[$style.gamingLight]: gaming === 'light'} ">{{
i18n.ts.processing
}}</span>
<MkLoading :em="true" :colored="false"/>
</template> </template>
<template v-else-if="isFollowing"> <template v-else-if="isFollowing">
<span v-if="full" :class="$style.text">{{ i18n.ts.unfollow }}</span><i class="ti ti-minus"></i> <span v-if="full"
:class="$style.text,{[$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light' } ">{{
i18n.ts.unfollow
}}</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" :class="$style.text">{{ i18n.ts.followRequest }}</span><i class="ti ti-plus"></i> <span v-if="full"
:class="$style.text,{[$style.gamingDark]: gaming === 'dark' ,[$style.gamingLight]: gaming === 'light'} ">{{
i18n.ts.followRequest
}}</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" :class="$style.text">{{ i18n.ts.follow }}</span><i class="ti ti-plus"></i> <span v-if="full"
:class="$style.text,{[$style.gamingDark]: gaming === 'dark' ,[$style.gamingLight]: gaming === 'light'} ">{{
i18n.ts.follow
}}</span><i class="ti ti-plus"></i>
</template> </template>
</template> </template>
<template v-else> <template v-else>
<span v-if="full" :class="$style.text">{{ i18n.ts.processing }}</span><MkLoading :em="true" :colored="false"/> <span v-if="full"
:class="$style.text,{[$style.gamingDark]: gaming === 'dark' ,[$style.gamingLight]: gaming === 'light'} ">{{
i18n.ts.processing
}}</span>
<MkLoading :em="true" :colored="false"/>
</template> </template>
</button> </button>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { onBeforeUnmount, onMounted } from 'vue'; import {computed, onBeforeUnmount, onMounted, ref, watch} from 'vue';
import * as Misskey from 'misskey-js'; import * as Misskey from 'misskey-js';
import * as os from '@/os.js'; import * as os from '@/os.js';
import { useStream } from '@/stream.js'; import {useStream} from '@/stream.js';
import { i18n } from '@/i18n.js'; import {i18n} from '@/i18n.js';
import { claimAchievement } from '@/scripts/achievements.js'; import {claimAchievement} from '@/scripts/achievements.js';
import { $i } from '@/account.js'; import {$i} from '@/account.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';
} 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<{
user: Misskey.entities.UserDetailed, user: Misskey.entities.UserDetailed,
@ -76,9 +130,9 @@ async function onClick() {
try { try {
if (isFollowing) { if (isFollowing) {
const { canceled } = await os.confirm({ const {canceled} = await os.confirm({
type: 'warning', type: 'warning',
text: i18n.t('unfollowConfirm', { name: props.user.name || props.user.username }), text: i18n.t('unfollowConfirm', {name: props.user.name || props.user.username}),
}); });
if (canceled) return; if (canceled) return;
@ -137,7 +191,7 @@ onBeforeUnmount(() => {
display: inline-block; display: inline-block;
font-weight: bold; font-weight: bold;
color: var(--fgOnWhite); color: var(--fgOnWhite);
border: solid 1px var(--accent); border: solid 1px;
padding: 0; padding: 0;
height: 31px; height: 31px;
font-size: 16px; font-size: 16px;
@ -194,6 +248,61 @@ onBeforeUnmount(() => {
background: var(--accentDarken); background: var(--accentDarken);
border-color: var(--accentDarken); border-color: var(--accentDarken);
} }
&.gamingDark:hover {
background: linear-gradient(270deg, #c06161, #c0a567, #b6ba69, #81bc72, #63c3be, #8bacd6, #9f8bd6, #d18bd6, #d883b4);
background-size: 1800% 1800%;
-webkit-animation: AnimationDark 44s cubic-bezier(0, 0.25, 0.25, 1) infinite;
-moz-animation: AnimationDark 44s cubic-bezier(0, 0.25, 0.25, 1) infinite;
animation: AnimationDark 44s cubic-bezier(0, 0.25, 0.25, 1) infinite;
}
&.gamingDark:active {
color: white;
background: linear-gradient(270deg, #c06161, #c0a567, #b6ba69, #81bc72, #63c3be, #8bacd6, #9f8bd6, #d18bd6, #d883b4);
background-size: 1800% 1800%;
-webkit-animation: AnimationDark 44s cubic-bezier(0, 0.25, 0.25, 1) infinite;
-moz-animation: AnimationDark 44s cubic-bezier(0, 0.25, 0.25, 1) infinite;
animation: AnimationDark 44s cubic-bezier(0, 0.25, 0.25, 1) infinite;
border-color: white;
}
&.gamingLight:hover {
background: linear-gradient(270deg, #e7a2a2, #e3cfa2, #ebefa1, #b3e7a6, #a6ebe7, #aec5e3, #cabded, #e0b9e3, #f4bddd);
background-size: 1800% 1800% !important;
-webkit-animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
-moz-animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
border-color: white;
}
&.gamingLight:active {
color: white;
background: linear-gradient(270deg, #e7a2a2, #e3cfa2, #ebefa1, #b3e7a6, #a6ebe7, #aec5e3, #cabded, #e0b9e3, #f4bddd);
background-size: 1800% 1800% !important;
-webkit-animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
-moz-animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
border-color: white;
}
&.gamingDark {
background: linear-gradient(270deg, #c06161, #c0a567, #b6ba69, #81bc72, #63c3be, #8bacd6, #9f8bd6, #d18bd6, #d883b4);
background-size: 1800% 1800%;
-webkit-animation: AnimationDark 44s cubic-bezier(0, 0.25, 0.25, 1) infinite;
-moz-animation: AnimationDark 44s cubic-bezier(0, 0.25, 0.25, 1) infinite;
animation: AnimationDark 44s cubic-bezier(0, 0.25, 0.25, 1) infinite;
}
&.gamingLight {
background: linear-gradient(270deg, #e7a2a2, #e3cfa2, #ebefa1, #b3e7a6, #a6ebe7, #aec5e3, #cabded, #e0b9e3, #f4bddd);
background-size: 1800% 1800% !important;
-webkit-animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
-moz-animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
}
} }
&.wait { &.wait {
@ -204,5 +313,98 @@ onBeforeUnmount(() => {
.text { .text {
margin-right: 6px; margin-right: 6px;
&.gamingDark {
background: linear-gradient(270deg, #c06161, #c0a567, #b6ba69, #81bc72, #63c3be, #8bacd6, #9f8bd6, #d18bd6, #d883b4);
background-size: 1800% 1800%;
-webkit-animation: AnimationDark 44s cubic-bezier(0, 0.25, 0.25, 1) infinite;
-moz-animation: AnimationDark 44s cubic-bezier(0, 0.25, 0.25, 1) infinite;
animation: AnimationDark 44s cubic-bezier(0, 0.25, 0.25, 1) infinite;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
&.gamingLight {
background: linear-gradient(270deg, #e7a2a2, #e3cfa2, #ebefa1, #b3e7a6, #a6ebe7, #aec5e3, #cabded, #e0b9e3, #f4bddd);
background-size: 1800% 1800% !important;
-webkit-animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
-moz-animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
@-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> </style>

273
packages/frontend/src/components/MkPostForm.vue
View file

@ -4,23 +4,25 @@ SPDX-License-Identifier: AGPL-3.0-only
--> -->
<template> <template>
<div <div
:class="[$style.root, { [$style.modal]: modal, _popup: modal }]" :class="[$style.root, { [$style.modal]: modal, _popup: modal }]"
@dragover.stop="onDragover" @dragover.stop="onDragover"
@dragenter="onDragenter" @dragenter="onDragenter"
@dragleave="onDragleave" @dragleave="onDragleave"
@drop.stop="onDrop" @drop.stop="onDrop"
> >
<header :class="$style.header"> <header :class="$style.header">
<div :class="$style.headerLeft"> <div :class="$style.headerLeft">
<button v-if="!fixed" :class="$style.cancel" class="_button" @click="cancel"><i class="ti ti-x"></i></button> <button v-if="!fixed" :class="$style.cancel" class="_button" @click="cancel"><i class="ti ti-x"></i></button>
<button v-click-anime v-tooltip="i18n.ts.switchAccount" :class="$style.account" class="_button" @click="openAccountMenu"> <button v-click-anime v-tooltip="i18n.ts.switchAccount" :class="$style.account" class="_button"
@click="openAccountMenu">
<MkAvatar :user="postAccount ?? $i" :class="$style.avatar"/> <MkAvatar :user="postAccount ?? $i" :class="$style.avatar"/>
</button> </button>
</div> </div>
<div :class="$style.headerRight"> <div :class="$style.headerRight">
<template v-if="!(channel != null && fixed)"> <template v-if="!(channel != null && fixed)">
<button v-if="channel == null" ref="visibilityButton" v-click-anime v-tooltip="i18n.ts.visibility" :class="['_button', $style.headerRightItem, $style.visibility]" @click="setVisibility"> <button v-if="channel == null" ref="visibilityButton" v-click-anime v-tooltip="i18n.ts.visibility"
:class="['_button', $style.headerRightItem, $style.visibility]" @click="setVisibility">
<span v-if="visibility === 'public'"><i class="ti ti-world"></i></span> <span v-if="visibility === 'public'"><i class="ti ti-world"></i></span>
<span v-if="visibility === 'home'"><i class="ti ti-home"></i></span> <span v-if="visibility === 'home'"><i class="ti ti-home"></i></span>
<span v-if="visibility === 'followers'"><i class="ti ti-lock"></i></span> <span v-if="visibility === 'followers'"><i class="ti ti-lock"></i></span>
@ -32,28 +34,39 @@ SPDX-License-Identifier: AGPL-3.0-only
<span :class="$style.headerRightButtonText">{{ channel.name }}</span> <span :class="$style.headerRightButtonText">{{ channel.name }}</span>
</button> </button>
</template> </template>
<button v-click-anime v-tooltip="i18n.ts._visibility.disableFederation" class="_button" :class="[$style.headerRightItem, { [$style.danger]: localOnly }]" :disabled="channel != null || visibility === 'specified'" @click="toggleLocalOnly"> <button v-click-anime v-tooltip="i18n.ts._visibility.disableFederation" class="_button"
:class="[$style.headerRightItem, { [$style.danger]: localOnly }]"
:disabled="channel != null || visibility === 'specified'" @click="toggleLocalOnly">
<span v-if="!localOnly"><i class="ti ti-rocket"></i></span> <span v-if="!localOnly"><i class="ti ti-rocket"></i></span>
<span v-else><i class="ti ti-rocket-off"></i></span> <span v-else><i class="ti ti-rocket-off"></i></span>
</button> </button>
<button v-click-anime v-tooltip="i18n.ts.reactionAcceptance" class="_button" :class="[$style.headerRightItem, { [$style.danger]: reactionAcceptance === 'likeOnly' }]" @click="toggleReactionAcceptance"> <button v-click-anime v-tooltip="i18n.ts.reactionAcceptance" class="_button"
:class="[$style.headerRightItem, { [$style.danger]: reactionAcceptance === 'likeOnly' }]"
@click="toggleReactionAcceptance">
<span v-if="reactionAcceptance === 'likeOnly'"><i class="ti ti-heart"></i></span> <span v-if="reactionAcceptance === 'likeOnly'"><i class="ti ti-heart"></i></span>
<span v-else-if="reactionAcceptance === 'likeOnlyForRemote'"><i class="ti ti-heart-plus"></i></span> <span v-else-if="reactionAcceptance === 'likeOnlyForRemote'"><i class="ti ti-heart-plus"></i></span>
<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
<div :class="$style.submitInner"> @click="post">
<div
:class="[$style.submitInner , { [$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === '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>
<i style="margin-left: 6px;" :class="posted ? 'ti ti-check' : reply ? 'ti ti-arrow-back-up' : renote ? 'ti ti-quote' : 'ti ti-send'"></i> <i style="margin-left: 6px;"
:class="posted ? 'ti ti-check' : reply ? 'ti ti-arrow-back-up' : renote ? 'ti ti-quote' : 'ti ti-send'"></i>
</div> </div>
</button> </button>
</div> </div>
</header> </header>
<MkNoteSimple v-if="reply" :class="$style.targetNote" :note="reply"/> <MkNoteSimple v-if="reply" :class="$style.targetNote" :note="reply"/>
<MkNoteSimple v-if="renote" :class="$style.targetNote" :note="renote"/> <MkNoteSimple v-if="renote" :class="$style.targetNote" :note="renote"/>
<div v-if="quoteId" :class="$style.withQuote"><i class="ti ti-quote"></i> {{ i18n.ts.quoteAttached }}<button @click="quoteId = null"><i class="ti ti-x"></i></button></div> <div v-if="quoteId" :class="$style.withQuote"><i class="ti ti-quote"></i> {{ i18n.ts.quoteAttached }}
<button @click="quoteId = null"><i class="ti ti-x"></i></button>
</div>
<div v-if="visibility === 'specified'" :class="$style.toSpecified"> <div v-if="visibility === 'specified'" :class="$style.toSpecified">
<span style="margin-right: 8px;">{{ i18n.ts.recipient }}</span> <span style="margin-right: 8px;">{{ i18n.ts.recipient }}</span>
<div :class="$style.visibleUsers"> <div :class="$style.visibleUsers">
@ -61,69 +74,93 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkAcct :user="u"/> <MkAcct :user="u"/>
<button class="_button" style="padding: 4px 8px;" @click="removeVisibleUser(u)"><i class="ti ti-x"></i></button> <button class="_button" style="padding: 4px 8px;" @click="removeVisibleUser(u)"><i class="ti ti-x"></i></button>
</span> </span>
<button class="_buttonPrimary" style="padding: 4px; border-radius: 8px;" @click="addVisibleUser"><i class="ti ti-plus ti-fw"></i></button> <button class="_buttonPrimary" style="padding: 4px; border-radius: 8px;" @click="addVisibleUser"><i
class="ti ti-plus ti-fw"></i></button>
</div> </div>
</div> </div>
<MkInfo v-if="hasNotSpecifiedMentions" warn :class="$style.hasNotSpecifiedMentions">{{ i18n.ts.notSpecifiedMentionWarning }} - <button class="_textButton" @click="addMissingMention()">{{ i18n.ts.add }}</button></MkInfo> <MkInfo v-if="hasNotSpecifiedMentions" warn :class="$style.hasNotSpecifiedMentions">
<input v-show="useCw" ref="cwInputEl" v-model="cw" :class="$style.cw" :placeholder="i18n.ts.annotation" @keydown="onKeydown"> {{ i18n.ts.notSpecifiedMentionWarning }} -
<button class="_textButton" @click="addMissingMention()">{{ i18n.ts.add }}</button>
</MkInfo>
<input v-show="useCw" ref="cwInputEl" v-model="cw" :class="$style.cw" :placeholder="i18n.ts.annotation"
@keydown="onKeydown">
<div :class="[$style.textOuter, { [$style.withCw]: useCw }]"> <div :class="[$style.textOuter, { [$style.withCw]: useCw }]">
<textarea ref="textareaEl" v-model="text" :class="[$style.text]" :disabled="posting || posted" :placeholder="placeholder" data-cy-post-form-text @keydown="onKeydown" @paste="onPaste" @compositionupdate="onCompositionUpdate" @compositionend="onCompositionEnd"/> <textarea ref="textareaEl" v-model="text" :class="[$style.text]" :disabled="posting || posted"
<div v-if="maxTextLength - textLength < 100" :class="['_acrylic', $style.textCount, { [$style.textOver]: textLength > maxTextLength }]">{{ maxTextLength - textLength }}</div> :placeholder="placeholder" data-cy-post-form-text @keydown="onKeydown" @paste="onPaste"
@compositionupdate="onCompositionUpdate" @compositionend="onCompositionEnd"/>
<div v-if="maxTextLength - textLength < 100"
:class="['_acrylic', $style.textCount, { [$style.textOver]: textLength > maxTextLength }]">
{{ maxTextLength - textLength }}
</div> </div>
<input v-show="withHashtags" ref="hashtagsInputEl" v-model="hashtags" :class="$style.hashtags" :placeholder="i18n.ts.hashtags" list="hashtags"> </div>
<XPostFormAttaches v-model="files" @detach="detachFile" @changeSensitive="updateFileSensitive" @changeName="updateFileName" @replaceFile="replaceFile"/> <input v-show="withHashtags" ref="hashtagsInputEl" v-model="hashtags" :class="$style.hashtags"
:placeholder="i18n.ts.hashtags" list="hashtags">
<XPostFormAttaches v-model="files" @detach="detachFile" @changeSensitive="updateFileSensitive"
@changeName="updateFileName" @replaceFile="replaceFile"/>
<MkPollEditor v-if="poll" v-model="poll" @destroyed="poll = null"/> <MkPollEditor v-if="poll" v-model="poll" @destroyed="poll = null"/>
<MkNotePreview v-if="showPreview" :class="$style.preview" :text="text"/> <MkNotePreview v-if="showPreview" :class="$style.preview" :text="text"/>
<div v-if="showingOptions" style="padding: 8px 16px;"> <div v-if="showingOptions" style="padding: 8px 16px;">
</div> </div>
<footer :class="$style.footer"> <footer :class="$style.footer">
<div :class="$style.footerLeft"> <div :class="$style.footerLeft">
<button v-tooltip="i18n.ts.attachFile" class="_button" :class="$style.footerButton" @click="chooseFileFrom"><i class="ti ti-photo-plus"></i></button> <button v-tooltip="i18n.ts.attachFile" class="_button" :class="$style.footerButton" @click="chooseFileFrom"><i
<button v-tooltip="i18n.ts.poll" class="_button" :class="[$style.footerButton, { [$style.footerButtonActive]: poll }]" @click="togglePoll"><i class="ti ti-chart-arrows"></i></button> class="ti ti-photo-plus"></i></button>
<button v-tooltip="i18n.ts.useCw" class="_button" :class="[$style.footerButton, { [$style.footerButtonActive]: useCw }]" @click="useCw = !useCw"><i class="ti ti-eye-off"></i></button> <button v-tooltip="i18n.ts.poll" class="_button"
<button v-tooltip="i18n.ts.mention" class="_button" :class="$style.footerButton" @click="insertMention"><i class="ti ti-at"></i></button> :class="[$style.footerButton, { [$style.footerButtonActive]: poll }]" @click="togglePoll"><i
<button v-tooltip="i18n.ts.hashtags" class="_button" :class="[$style.footerButton, { [$style.footerButtonActive]: withHashtags }]" @click="withHashtags = !withHashtags"><i class="ti ti-hash"></i></button> class="ti ti-chart-arrows"></i></button>
<button v-if="postFormActions.length > 0" v-tooltip="i18n.ts.plugin" class="_button" :class="$style.footerButton" @click="showActions"><i class="ti ti-plug"></i></button> <button v-tooltip="i18n.ts.useCw" class="_button"
<button v-tooltip="i18n.ts.emoji" :class="['_button', $style.footerButton]" @click="insertEmoji"><i class="ti ti-mood-happy"></i></button> :class="[$style.footerButton, { [$style.footerButtonActive]: useCw }]" @click="useCw = !useCw"><i
class="ti ti-eye-off"></i></button>
<button v-tooltip="i18n.ts.mention" class="_button" :class="$style.footerButton" @click="insertMention"><i
class="ti ti-at"></i></button>
<button v-tooltip="i18n.ts.hashtags" class="_button"
:class="[$style.footerButton, { [$style.footerButtonActive]: withHashtags }]"
@click="withHashtags = !withHashtags"><i class="ti ti-hash"></i></button>
<button v-if="postFormActions.length > 0" v-tooltip="i18n.ts.plugin" class="_button"
:class="$style.footerButton" @click="showActions"><i class="ti ti-plug"></i></button>
<button v-tooltip="i18n.ts.emoji" :class="['_button', $style.footerButton]" @click="insertEmoji"><i
class="ti ti-mood-happy"></i></button>
</div> </div>
<div :class="$style.footerRight"> <div :class="$style.footerRight">
<button v-tooltip="i18n.ts.previewNoteText" class="_button" :class="[$style.footerButton, { [$style.previewButtonActive]: showPreview }]" @click="showPreview = !showPreview"><i class="ti ti-eye"></i></button> <button v-tooltip="i18n.ts.previewNoteText" class="_button"
:class="[$style.footerButton, { [$style.previewButtonActive]: showPreview }]"
@click="showPreview = !showPreview"><i class="ti ti-eye"></i></button>
<!--<button v-tooltip="i18n.ts.more" class="_button" :class="$style.footerButton" @click="showingOptions = !showingOptions"><i class="ti ti-dots"></i></button>--> <!--<button v-tooltip="i18n.ts.more" class="_button" :class="$style.footerButton" @click="showingOptions = !showingOptions"><i class="ti ti-dots"></i></button>-->
</div> </div>
</footer> </footer>
<datalist id="hashtags"> <datalist id="hashtags">
<option v-for="hashtag in recentHashtags" :key="hashtag" :value="hashtag"/> <option v-for="hashtag in recentHashtags" :key="hashtag" :value="hashtag"/>
</datalist> </datalist>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { inject, watch, nextTick, onMounted, defineAsyncComponent } from 'vue'; import {inject, watch, nextTick, onMounted, defineAsyncComponent, computed, ref} from 'vue';
import * as mfm from 'mfm-js'; import * as mfm from 'mfm-js';
import * as Misskey from 'misskey-js'; import * as Misskey from 'misskey-js';
import insertTextAtCursor from 'insert-text-at-cursor'; import insertTextAtCursor from 'insert-text-at-cursor';
import { toASCII } from 'punycode/'; import {toASCII} from 'punycode/';
import MkNoteSimple from '@/components/MkNoteSimple.vue'; import MkNoteSimple from '@/components/MkNoteSimple.vue';
import MkNotePreview from '@/components/MkNotePreview.vue'; import MkNotePreview from '@/components/MkNotePreview.vue';
import XPostFormAttaches from '@/components/MkPostFormAttaches.vue'; import XPostFormAttaches from '@/components/MkPostFormAttaches.vue';
import MkPollEditor from '@/components/MkPollEditor.vue'; import MkPollEditor from '@/components/MkPollEditor.vue';
import { host, url } from '@/config.js'; import {host, url} from '@/config.js';
import { erase, unique } from '@/scripts/array.js'; import {erase, unique} from '@/scripts/array.js';
import { extractMentions } from '@/scripts/extract-mentions.js'; import {extractMentions} from '@/scripts/extract-mentions.js';
import { formatTimeString } from '@/scripts/format-time-string.js'; import {formatTimeString} from '@/scripts/format-time-string.js';
import { Autocomplete } from '@/scripts/autocomplete.js'; import {Autocomplete} from '@/scripts/autocomplete.js';
import * as os from '@/os.js'; import * as os from '@/os.js';
import { selectFiles } from '@/scripts/select-file.js'; import {selectFiles} from '@/scripts/select-file.js';
import { defaultStore, notePostInterruptors, postFormActions } from '@/store.js'; import {defaultStore, notePostInterruptors, postFormActions} from '@/store.js';
import MkInfo from '@/components/MkInfo.vue'; import MkInfo from '@/components/MkInfo.vue';
import { i18n } from '@/i18n.js'; import {i18n} from '@/i18n.js';
import { instance } from '@/instance.js'; import {instance} from '@/instance.js';
import { $i, notesCount, incNotesCount, getAccounts, openAccountMenu as openAccountMenu_ } from '@/account.js'; import {$i, notesCount, incNotesCount, getAccounts, openAccountMenu as openAccountMenu_} from '@/account.js';
import { uploadFile } from '@/scripts/upload.js'; import {uploadFile} from '@/scripts/upload.js';
import { deepClone } from '@/scripts/clone.js'; import {deepClone} from '@/scripts/clone.js';
import MkRippleEffect from '@/components/MkRippleEffect.vue'; 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');
@ -147,13 +184,43 @@ const props = withDefaults(defineProps<{
initialVisibleUsers: () => [], initialVisibleUsers: () => [],
autofocus: true, autofocus: true,
}); });
const gamingMode = computed(defaultStore.makeGetterSetter('gamingMode'));
const darkMode = computed(defaultStore.makeGetterSetter('darkMode'));
let gaming: any;
gaming = ref();
const emit = defineEmits<{ const emit = defineEmits<{
(ev: 'posted'): void; (ev: 'posted'): void;
(ev: 'cancel'): void; (ev: 'cancel'): void;
(ev: 'esc'): void; (ev: 'esc'): void;
}>(); }>();
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 textareaEl = $shallowRef<HTMLTextAreaElement | null>(null); const textareaEl = $shallowRef<HTMLTextAreaElement | null>(null);
const cwInputEl = $shallowRef<HTMLInputElement | null>(null); const cwInputEl = $shallowRef<HTMLInputElement | null>(null);
const hashtagsInputEl = $shallowRef<HTMLInputElement | null>(null); const hashtagsInputEl = $shallowRef<HTMLInputElement | null>(null);
@ -250,11 +317,11 @@ const hashtags = $computed(defaultStore.makeGetterSetter('postFormHashtags'));
watch($$(text), () => { watch($$(text), () => {
checkMissingMention(); checkMissingMention();
}, { immediate: true }); }, {immediate: true});
watch($$(visibility), () => { watch($$(visibility), () => {
checkMissingMention(); checkMissingMention();
}, { immediate: true }); }, {immediate: true});
watch($$(visibleUsers), () => { watch($$(visibleUsers), () => {
checkMissingMention(); checkMissingMention();
@ -317,7 +384,7 @@ if (props.reply && ['home', 'followers', 'specified'].includes(props.reply.visib
} }
if (props.reply.userId !== $i.id) { if (props.reply.userId !== $i.id) {
os.api('users/show', { userId: props.reply.userId }).then(user => { os.api('users/show', {userId: props.reply.userId}).then(user => {
pushVisibleUser(user); pushVisibleUser(user);
}); });
} }
@ -340,7 +407,7 @@ function watchForDraft() {
watch($$(useCw), () => saveDraft()); watch($$(useCw), () => saveDraft());
watch($$(cw), () => saveDraft()); watch($$(cw), () => saveDraft());
watch($$(poll), () => saveDraft()); watch($$(poll), () => saveDraft());
watch($$(files), () => saveDraft(), { deep: true }); watch($$(files), () => saveDraft(), {deep: true});
watch($$(visibility), () => saveDraft()); watch($$(visibility), () => saveDraft());
watch($$(localOnly), () => saveDraft()); watch($$(localOnly), () => saveDraft());
} }
@ -364,7 +431,7 @@ function addMissingMention() {
for (const x of extractMentions(ast)) { for (const x of extractMentions(ast)) {
if (!visibleUsers.some(u => (u.username === x.username) && (u.host === x.host))) { if (!visibleUsers.some(u => (u.username === x.username) && (u.host === x.host))) {
os.api('users/show', { username: x.username, host: x.host }).then(user => { os.api('users/show', {username: x.username, host: x.host}).then(user => {
visibleUsers.push(user); visibleUsers.push(user);
}); });
} }
@ -492,11 +559,11 @@ async function toggleReactionAcceptance() {
const select = await os.select({ const select = await os.select({
title: i18n.ts.reactionAcceptance, title: i18n.ts.reactionAcceptance,
items: [ items: [
{ value: null, text: i18n.ts.all }, {value: null, text: i18n.ts.all},
{ value: 'likeOnlyForRemote' as const, text: i18n.ts.likeOnlyForRemote }, {value: 'likeOnlyForRemote' as const, text: i18n.ts.likeOnlyForRemote},
{ value: 'nonSensitiveOnly' as const, text: i18n.ts.nonSensitiveOnly }, {value: 'nonSensitiveOnly' as const, text: i18n.ts.nonSensitiveOnly},
{ value: 'nonSensitiveOnlyForLocalLikeOnlyForRemote' as const, text: i18n.ts.nonSensitiveOnlyForLocalLikeOnlyForRemote }, {value: 'nonSensitiveOnlyForLocalLikeOnlyForRemote' as const, text: i18n.ts.nonSensitiveOnlyForLocalLikeOnlyForRemote},
{ value: 'likeOnly' as const, text: i18n.ts.likeOnly }, {value: 'likeOnly' as const, text: i18n.ts.likeOnly},
], ],
default: reactionAcceptance, default: reactionAcceptance,
}); });
@ -545,7 +612,7 @@ function onCompositionEnd(ev: CompositionEvent) {
} }
async function onPaste(ev: ClipboardEvent) { async function onPaste(ev: ClipboardEvent) {
for (const { item, i } of Array.from(ev.clipboardData.items, (item, i) => ({ item, i }))) { for (const {item, i} of Array.from(ev.clipboardData.items, (item, i) => ({item, i}))) {
if (item.kind === 'file') { if (item.kind === 'file') {
const file = item.getAsFile(); const file = item.getAsFile();
const lio = file.name.lastIndexOf('.'); const lio = file.name.lastIndexOf('.');
@ -563,7 +630,7 @@ async function onPaste(ev: ClipboardEvent) {
os.confirm({ os.confirm({
type: 'info', type: 'info',
text: i18n.ts.quoteQuestion, text: i18n.ts.quoteQuestion,
}).then(({ canceled }) => { }).then(({canceled}) => {
if (canceled) { if (canceled) {
insertTextAtCursor(textareaEl, paste); insertTextAtCursor(textareaEl, paste);
return; return;
@ -663,7 +730,7 @@ async function post(ev?: MouseEvent) {
const rect = el.getBoundingClientRect(); const rect = el.getBoundingClientRect();
const x = rect.left + (el.offsetWidth / 2); const x = rect.left + (el.offsetWidth / 2);
const y = rect.top + (el.offsetHeight / 2); const y = rect.top + (el.offsetHeight / 2);
os.popup(MkRippleEffect, { x, y }, {}, 'end'); os.popup(MkRippleEffect, {x, y}, {}, 'end');
} }
const annoying = const annoying =
@ -674,7 +741,7 @@ async function post(ev?: MouseEvent) {
text.includes('$[position'); text.includes('$[position');
if (annoying && visibility === 'public') { if (annoying && visibility === 'public') {
const { canceled, result } = await os.actions({ const {canceled, result} = await os.actions({
type: 'warning', type: 'warning',
text: i18n.ts.thisPostMayBeAnnoying, text: i18n.ts.thisPostMayBeAnnoying,
actions: [{ actions: [{
@ -820,7 +887,9 @@ function showActions(ev) {
action.handler({ action.handler({
text: text, text: text,
}, (key, value) => { }, (key, value) => {
if (key === 'text') { text = value; } if (key === 'text') {
text = value;
}
}); });
}, },
})), ev.currentTarget ?? ev.target); })), ev.currentTarget ?? ev.target);
@ -994,6 +1063,24 @@ defineExpose({
box-sizing: border-box; box-sizing: border-box;
color: var(--fgOnAccent); color: var(--fgOnAccent);
background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB)); background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
&.gamingLight {
background: linear-gradient(270deg, #e7a2a2, #e3cfa2, #ebefa1, #b3e7a6, #a6ebe7, #aec5e3, #cabded, #e0b9e3, #f4bddd);
background-size: 1800% 1800% !important;
-webkit-animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
-moz-animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
}
&.gamingDark{
color: white;
background: linear-gradient(270deg, #c06161, #c0a567, #b6ba69, #81bc72, #63c3be, #8bacd6, #9f8bd6, #d18bd6, #d883b4);
background-size: 1800% 1800%;
-webkit-animation: AnimationDark 44s cubic-bezier(0, 0.45, 0.30, 1) infinite;
-moz-animation: AnimationDark 44s cubic-bezier(0, 0.45, 0.30, 1) infinite;
animation: AnimationDark 44s cubic-bezier(0, 0.45, 0.30, 1) infinite;
}
} }
.headerRightItem { .headerRightItem {
@ -1029,6 +1116,7 @@ defineExpose({
} }
} }
} }
//#endregion //#endregion
.preview { .preview {
@ -1210,6 +1298,7 @@ defineExpose({
.preview { .preview {
padding: 16px 14px 0 14px; padding: 16px 14px 0 14px;
} }
.cw, .cw,
.hashtags, .hashtags,
.text { .text {
@ -1241,5 +1330,71 @@ defineExpose({
.headerRight { .headerRight {
gap: 0; gap: 0;
} }
@-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> </style>

152
packages/frontend/src/components/MkSwitch.button.vue
View file

@ -9,19 +9,55 @@ SPDX-License-Identifier: AGPL-3.0-only
:class="{ :class="{
[$style.button]: true, [$style.button]: true,
[$style.buttonChecked]: checked, [$style.buttonChecked]: checked,
[$style.buttonDisabled]: props.disabled [$style.buttonDisabled]: props.disabled,
[$style.gamingDark]: gaming === 'dark' && checked,
[$style.gamingLight]: gaming === 'light' && checked
}" }"
data-cy-switch-toggle data-cy-switch-toggle
@click.prevent.stop="toggle" @click.prevent.stop="toggle"
> >
<div :class="{ [$style.knob]: true, [$style.knobChecked]: checked }"></div> <div
:class="{ [$style.knob]: true, [$style.knobChecked]: checked, [$style.gamingDark]: gaming === 'dark' && checked,[$style.gamingLight]: gaming === 'light' && checked}"></div>
</span> </span>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { toRefs, Ref } from 'vue'; import {toRefs, Ref, ref, computed, watch} from 'vue';
import { i18n } from '@/i18n.js'; import {i18n} from '@/i18n.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';
} 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;
@ -56,13 +92,40 @@ const toggle = () => {
cursor: pointer; cursor: pointer;
transition: inherit; transition: inherit;
user-select: none; user-select: none;
&.gamingLight {
border-image: conic-gradient(#e7a2a2, #e3cfa2, #ebefa1, #b3e7a6, #a6ebe7, #aec5e3, #cabded, #e0b9e3, #f4bddd) 1;
border: solid 1px;
}
&.gamingDark {
border-image: conic-gradient(#c06161, #c0a567, #b6ba69, #81bc72, #63c3be, #8bacd6, #9f8bd6, #d18bd6, #d883b4) 1;
border: solid 1px;
}
} }
.buttonChecked { .buttonChecked {
background-color: var(--switchOnBg) !important; background-color: var(--switchOnBg) !important;
border-color: var(--switchOnBg) !important; border-color: var(--switchOnBg) !important;
&.gamingLight {
background: linear-gradient(270deg, #e7a2a2, #e3cfa2, #ebefa1, #b3e7a6, #a6ebe7, #aec5e3, #cabded, #e0b9e3, #f4bddd);
background-size: 1800% 1800% !important;
-webkit-animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
-moz-animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
}
&.gamingDark {
background: linear-gradient(270deg, #c06161, #c0a567, #b6ba69, #81bc72, #63c3be, #8bacd6, #9f8bd6, #d18bd6, #d883b4);
background-size: 1800% 1800% !important;
-webkit-animation: AnimationDark 44s cubic-bezier(0, 0.25, 0.25, 1) infinite;
-moz-animation: AnimationDark 44s cubic-bezier(0, 0.25, 0.25, 1) infinite;
animation: AnimationDark 44s cubic-bezier(0, 0.25, 0.25, 1) infinite;
}
} }
.buttonDisabled { .buttonDisabled {
cursor: not-allowed; cursor: not-allowed;
} }
@ -78,11 +141,92 @@ const toggle = () => {
&:not(.knobChecked) { &:not(.knobChecked) {
left: 3px; left: 3px;
background: var(--switchOffFg); background: var(--switchOffFg);
} }
} }
.knobChecked { .knobChecked {
left: 12px; left: 12px;
background: var(--switchOnFg); background: var(--switchOnFg);
&.gamingDark {
background: white !important;
}
&.gamingLight {
background: white !important;
}
}
@-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> </style>

78
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, [$style.checked]: checked }]"> <div :class="[$style.root, { [$style.disabled]: disabled && gaming === '', [$style.checked]: checked && gaming === '' , [$style.gamingdarkDisabled]: disabled && gaming === 'dark', [$style.gamingLightDisabled]: disabled && gaming === 'light'}]">
<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"> <span :class="$style.body,{[$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light'}">
<!-- TODO: 無名slotの方は廃止 --> <!-- TODO: 無名slotの方は廃止 -->
<span :class="$style.label"> <span :class="$style.label">
<span @click="toggle"> <span @click="toggle">
@ -27,8 +27,42 @@ SPDX-License-Identifier: AGPL-3.0-only
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { toRefs, Ref } 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";
let gaming = ref('');
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>;
@ -65,6 +99,26 @@ const toggle = () => {
cursor: not-allowed; cursor: not-allowed;
} }
&.gamingDarkDisabled{
opacity: 0.6;
cursor: not-allowed;
background: linear-gradient(270deg, #a84f4f, #a88c4f, #9aa24b, #6da85c, #53a8a6, #7597b5, #8679b5, #b579b5, #b56d96);
background-size: 1800% 1800% !important;
-webkit-animation: AnimationDark 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
-moz-animation: AnimationDark 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
animation: AnimationDark 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
}
&.gamingLightDisabled{
opacity: 0.6;
cursor: not-allowed;
background: linear-gradient(270deg, #c06161, #c0a567, #b6ba69, #81bc72, #63c3be, #8bacd6, #9f8bd6, #d18bd6, #d883b4);
background-size: 1800% 1800%;
-webkit-animation: AnimationDark 44s cubic-bezier(0, 0.25, 0.25, 1) infinite;
-moz-animation: AnimationDark 44s cubic-bezier(0, 0.25, 0.25, 1) infinite;
animation: AnimationDark 44s cubic-bezier(0, 0.25, 0.25, 1) infinite;
}
//&.checked { //&.checked {
//} //}
} }
@ -82,6 +136,22 @@ const toggle = () => {
display: block; display: block;
transition: inherit; transition: inherit;
color: var(--fg); color: var(--fg);
&.gamingDark {
background: linear-gradient(270deg, #c06161, #c0a567, #b6ba69, #81bc72, #63c3be, #8bacd6, #9f8bd6, #d18bd6, #d883b4);
background-size: 1800% 1800%;
-webkit-animation: AnimationDark 44s cubic-bezier(0, 0.25, 0.25, 1) infinite;
-moz-animation: AnimationDark 44s cubic-bezier(0, 0.25, 0.25, 1) infinite;
animation: AnimationDark 44s cubic-bezier(0, 0.25, 0.25, 1) infinite;
}
&.gamingLight{
background: linear-gradient(270deg, #e7a2a2, #e3cfa2, #ebefa1, #b3e7a6, #a6ebe7, #aec5e3, #cabded, #e0b9e3, #f4bddd);
background-size: 1800% 1800% !important;
-webkit-animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
-moz-animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
}
} }
.label { .label {
@ -106,4 +176,6 @@ const toggle = () => {
font-size: 85%; font-size: 85%;
vertical-align: top; vertical-align: top;
} }
</style> </style>

116
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 }]" :class="[$style.tabHighlight, { [$style.animate]: defaultStore.reactiveState.animation.value , [$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light' }]"
></div> ></div>
</div> </div>
</template> </template>
@ -53,9 +53,40 @@ export type Tab = {
</script> </script>
<script lang="ts" setup> <script lang="ts" setup>
import { onMounted, onUnmounted, watch, nextTick, shallowRef } 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 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<{
tabs?: Tab[]; tabs?: Tab[];
tab?: string; tab?: string;
@ -245,9 +276,88 @@ onUnmounted(() => {
border-radius: 999px; border-radius: 999px;
transition: none; transition: none;
pointer-events: none; pointer-events: none;
&.gamingLight{
background: linear-gradient(270deg, #e7a2a2, #e3cfa2, #ebefa1, #b3e7a6, #a6ebe7, #aec5e3, #cabded, #e0b9e3, #f4bddd);
background-size: 1800% 1800% !important;
-webkit-animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
-moz-animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
}
&.gamingDark{
background: linear-gradient(270deg, #c06161, #c0a567, #b6ba69, #81bc72, #63c3be, #8bacd6, #9f8bd6, #d18bd6, #d883b4);
background-size: 1800% 1800%;
-webkit-animation: AnimationDark 44s cubic-bezier(0, 0.25, 0.25, 1) infinite;
-moz-animation: AnimationDark 44s cubic-bezier(0, 0.25, 0.25, 1) infinite;
animation: AnimationDark 44s cubic-bezier(0, 0.25, 0.25, 1) infinite;
}
&.animate { &.animate {
transition: width 0.15s ease, left 0.15s ease; transition: width 0.15s ease, left 0.15s ease;
} }
} }
@-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> </style>

20
packages/frontend/src/pages/admin/index.vue
View file

@ -9,7 +9,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkSpacer :contentMax="700" :marginMin="16"> <MkSpacer :contentMax="700" :marginMin="16">
<div class="lxpfedzu"> <div class="lxpfedzu">
<div class="banner"> <div class="banner">
<img :src="instance.iconUrl || '/favicon.ico'" alt="" class="icon"/> <img :src="iconUrl" alt="" class="icon"/>
</div> </div>
<MkInfo v-if="thereIsUnresolvedAbuseReport" warn class="info">{{ i18n.ts.thereIsUnresolvedAbuseReportWarning }} <MkA to="/admin/abuses" class="_link">{{ i18n.ts.check }}</MkA></MkInfo> <MkInfo v-if="thereIsUnresolvedAbuseReport" warn class="info">{{ i18n.ts.thereIsUnresolvedAbuseReportWarning }} <MkA to="/admin/abuses" class="_link">{{ i18n.ts.check }}</MkA></MkInfo>
@ -28,7 +28,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { onActivated, onMounted, onUnmounted, provide, watch } from 'vue'; import {computed, onActivated, onMounted, onUnmounted, provide, ref, watch} from 'vue';
import { i18n } from '@/i18n.js'; import { i18n } from '@/i18n.js';
import MkSuperMenu from '@/components/MkSuperMenu.vue'; import MkSuperMenu from '@/components/MkSuperMenu.vue';
import MkInfo from '@/components/MkInfo.vue'; import MkInfo from '@/components/MkInfo.vue';
@ -37,6 +37,7 @@ import * as os from '@/os.js';
import { lookupUser } from '@/scripts/lookup-user.js'; import { lookupUser } from '@/scripts/lookup-user.js';
import { useRouter } from '@/router.js'; import { useRouter } from '@/router.js';
import { definePageMetadata, provideMetadataReceiver } from '@/scripts/page-metadata.js'; import { definePageMetadata, provideMetadataReceiver } from '@/scripts/page-metadata.js';
import {bannerDark, bannerLight, defaultStore, iconDark, iconLight} from "@/store.js";
const isEmpty = (x: string | null) => x == null || x === ''; const isEmpty = (x: string | null) => x == null || x === '';
@ -61,7 +62,20 @@ let noBotProtection = !instance.disableRegistration && !instance.enableHcaptcha
let noEmailServer = !instance.enableEmail; let noEmailServer = !instance.enableEmail;
let thereIsUnresolvedAbuseReport = $ref(false); let thereIsUnresolvedAbuseReport = $ref(false);
let currentPage = $computed(() => router.currentRef.value.child); let currentPage = $computed(() => router.currentRef.value.child);
const darkMode = computed(defaultStore.makeGetterSetter('darkMode'));
let iconUrl = ref();
if (darkMode.value) {
iconUrl.value = iconDark;
} else {
iconUrl.value = iconLight;
}
watch(darkMode, () => {
if (darkMode.value) {
iconUrl.value = iconDark;
} else {
iconUrl.value = iconLight;
}
})
os.api('admin/abuse-user-reports', { os.api('admin/abuse-user-reports', {
state: 'unresolved', state: 'unresolved',
limit: 1, limit: 1,

10
packages/frontend/src/ui/_common_/navbar-for-mobile.vue
View file

@ -375,20 +375,20 @@ function more() {
} }
&.gamingLight:hover, &.gamingLight.active { &.gamingLight:hover, &.gamingLight.active {
text-decoration: none; text-decoration: none;
color: black; color: white;
&.gamingLight:before { &.gamingLight:before {
content: ""; content: "";
display: block; display: block;
height: 100%;
aspect-ratio: 1;
margin: auto;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
margin: auto; border-radius: 999px;
width: 52px;
aspect-ratio: 1/1;
border-radius: 100%;
background: linear-gradient(270deg, #e7a2a2, #e3cfa2, #ebefa1, #b3e7a6, #a6ebe7, #aec5e3, #cabded, #e0b9e3, #f4bddd); background: linear-gradient(270deg, #e7a2a2, #e3cfa2, #ebefa1, #b3e7a6, #a6ebe7, #aec5e3, #cabded, #e0b9e3, #f4bddd);
background-size: 1800% 1800% !important; background-size: 1800% 1800% !important;
-webkit-animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important; -webkit-animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;

71
packages/frontend/src/ui/_common_/navbar.vue
View file

@ -283,6 +283,7 @@ function more(ev: MouseEvent) {
} }
&.gamingLight:before { &.gamingLight:before {
color: white;
content: ""; content: "";
display: block; display: block;
width: calc(100% - 38px); width: calc(100% - 38px);
@ -302,6 +303,7 @@ function more(ev: MouseEvent) {
} }
&.gamingLight:hover, &.gamingLight.active { &.gamingLight:hover, &.gamingLight.active {
color: white;
&.gamingLight:before { &.gamingLight:before {
background: linear-gradient(270deg, #d08c8c, #cfb28c, #dbdb8b, #95d08e, #8bdbdb, #94a9cf, #b09ecf, #cfa0cf, #e0a0bd); background: linear-gradient(270deg, #d08c8c, #cfb28c, #dbdb8b, #95d08e, #8bdbdb, #94a9cf, #b09ecf, #cfa0cf, #e0a0bd);
background-size: 1800% 1800% !important; background-size: 1800% 1800% !important;
@ -312,6 +314,7 @@ function more(ev: MouseEvent) {
} }
&.gamingDark:before { &.gamingDark:before {
color: white;
content: ""; content: "";
display: block; display: block;
width: calc(100% - 38px); width: calc(100% - 38px);
@ -331,6 +334,7 @@ function more(ev: MouseEvent) {
} }
&.gamingDark:hover, &.gamingDark.active { &.gamingDark:hover, &.gamingDark.active {
color: white;
&.gamingDark:before { &.gamingDark:before {
background: linear-gradient(270deg, #a84f4f, #a88c4f, #9aa24b, #6da85c, #53a8a6, #7597b5, #8679b5, #b579b5, #b56d96); background: linear-gradient(270deg, #a84f4f, #a88c4f, #9aa24b, #6da85c, #53a8a6, #7597b5, #8679b5, #b579b5, #b56d96);
background-size: 1800% 1800% !important; background-size: 1800% 1800% !important;
@ -470,7 +474,7 @@ function more(ev: MouseEvent) {
} }
&.gamingLight:hover { &.gamingLight:hover {
color: black; color: white;
background-size: 1800% 1800% !important; background-size: 1800% 1800% !important;
text-decoration: none; text-decoration: none;
-webkit-animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important; -webkit-animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
@ -479,7 +483,7 @@ function more(ev: MouseEvent) {
} }
&.gamingLight:active { &.gamingLight:active {
color: black; color: white;
background-size: 1800% 1800% !important; background-size: 1800% 1800% !important;
-webkit-animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important; -webkit-animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
-moz-animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important; -moz-animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
@ -487,7 +491,7 @@ function more(ev: MouseEvent) {
} }
&.gamingLight:hover, &.gamingLight.active { &.gamingLight:hover, &.gamingLight.active {
color: black; color: white;
&.gamingLight:before { &.gamingLight:before {
content: ""; content: "";
display: block; display: block;
@ -618,6 +622,7 @@ function more(ev: MouseEvent) {
} }
&.gamingLight:hover, &.gamingLight.active { &.gamingLight:hover, &.gamingLight.active {
&.gamingLight:before { &.gamingLight:before {
background: linear-gradient(270deg, #d08c8c, #cfb28c, #dbdb8b, #95d08e, #8bdbdb, #94a9cf, #b09ecf, #cfa0cf, #e0a0bd); background: linear-gradient(270deg, #d08c8c, #cfb28c, #dbdb8b, #95d08e, #8bdbdb, #94a9cf, #b09ecf, #cfa0cf, #e0a0bd);
background-size: 1800% 1800% !important; background-size: 1800% 1800% !important;
@ -628,6 +633,7 @@ function more(ev: MouseEvent) {
} }
&.gamingDark:before { &.gamingDark:before {
color: white;
content: ""; content: "";
display: block; display: block;
position: absolute; position: absolute;
@ -647,6 +653,7 @@ function more(ev: MouseEvent) {
} }
&.gamingDark:hover, &.gamingDark.active { &.gamingDark:hover, &.gamingDark.active {
color: white;
&.gamingDark:before { &.gamingDark:before {
background: linear-gradient(270deg, #a84f4f, #a88c4f, #9aa24b, #6da85c, #53a8a6, #7597b5, #8679b5, #b579b5, #b56d96); background: linear-gradient(270deg, #a84f4f, #a88c4f, #9aa24b, #6da85c, #53a8a6, #7597b5, #8679b5, #b579b5, #b56d96);
background-size: 1800% 1800% !important; background-size: 1800% 1800% !important;
@ -793,7 +800,30 @@ function more(ev: MouseEvent) {
animation: blink 1s infinite; animation: blink 1s infinite;
} }
@-webkit-keyframes AnimationLight {
}
@-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% { 0% {
background-position: 0% 50% background-position: 0% 50%
} }
@ -804,7 +834,7 @@ function more(ev: MouseEvent) {
background-position: 0% 50% background-position: 0% 50%
} }
} }
@-moz-keyframes AnimationLight { @-webkit-keyframes AnimationDark {
0% { 0% {
background-position: 0% 50% background-position: 0% 50%
} }
@ -814,8 +844,8 @@ function more(ev: MouseEvent) {
100% { 100% {
background-position: 0% 50% background-position: 0% 50%
} }
} }
@keyframes AnimationLight { @-moz-keyframes AnimationDark {
0% { 0% {
background-position: 0% 50% background-position: 0% 50%
} }
@ -825,8 +855,8 @@ function more(ev: MouseEvent) {
100% { 100% {
background-position: 0% 50% background-position: 0% 50%
} }
} }
@-webkit-keyframes AnimationDark { @keyframes AnimationDark {
0% { 0% {
background-position: 0% 50% background-position: 0% 50%
} }
@ -836,28 +866,5 @@ function more(ev: MouseEvent) {
100% { 100% {
background-position: 0% 50% 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> </style>