laoxong/misskey
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

enhance(frontend): リファクタリングなど

Browse Source
This commit is contained in:
syuilo 2024-01-21 20:26:52 +09:00
parent 3784b39a5f
commit 3ff229af6f
13 changed files with 64 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
locales/index.d.ts vendored
View File

@ -4824,6 +4824,9 @@ export interface Locale extends ILocale {
* タイトルへ * タイトルへ
*/ */
"backToTitle": string; "backToTitle": string;
/**
* お住まいの地域
*/
"hemisphere": string; "hemisphere": string;
/** /**
* センシティブなファイルを含むノートを表示 * センシティブなファイルを含むノートを表示
@ -9422,8 +9425,17 @@ export interface Locale extends ILocale {
}; };
}; };
"_hemisphere": { "_hemisphere": {
/**
* 北半球
*/
"N": string; "N": string;
/**
* 南半球
*/
"S": string; "S": string;
/**
* 一部のクライアント設定で、季節を判定するために使用します。
*/
"caption": string; "caption": string;
}; };
"_reversi": { "_reversi": {

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

@ -138,7 +138,7 @@ function close() {
left: 32px; left: 32px;
color: var(--indicator); color: var(--indicator);
font-size: 8px; font-size: 8px;
animation: blink 1s infinite; animation: global-blink 1s infinite;
@media (max-width: 500px) { @media (max-width: 500px) {
top: 16px; top: 16px;

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

@ -450,7 +450,7 @@ onBeforeUnmount(() => {
align-items: center; align-items: center;
color: var(--indicator); color: var(--indicator);
font-size: 12px; font-size: 12px;
animation: blink 1s infinite; animation: global-blink 1s infinite;
} }
.divider { .divider {

2
packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.ts
View File

@ -118,7 +118,7 @@ export default function(props: MfmProps, context: SetupContext<MfmEvents>) {
case 'tada': { case 'tada': {
const speed = validTime(token.props.args.speed) ?? '1s'; const speed = validTime(token.props.args.speed) ?? '1s';
const delay = validTime(token.props.args.delay) ?? '0s'; const delay = validTime(token.props.args.delay) ?? '0s';
style = 'font-size: 150%;' + (useAnim ? `animation: tada ${speed} linear infinite both; animation-delay: ${delay};` : ''); style = 'font-size: 150%;' + (useAnim ? `animation: global-tada ${speed} linear infinite both; animation-delay: ${delay};` : '');
break; break;
} }
case 'jelly': { case 'jelly': {

2
packages/frontend/src/pages/reversi/game.board.vue
View File

@ -23,7 +23,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<Mfm :key="'past-turn-of:' + turnUser.id" :text="i18n.tsx._reversi.pastTurnOf({ name: turnUser.name ?? turnUser.username })" :plain="true" :customEmojis="turnUser.emojis"/> <Mfm :key="'past-turn-of:' + turnUser.id" :text="i18n.tsx._reversi.pastTurnOf({ name: turnUser.name ?? turnUser.username })" :plain="true" :customEmojis="turnUser.emojis"/>
</div> </div>
<div v-if="iAmPlayer && !game.isEnded && !isMyTurn">{{ i18n.ts._reversi.opponentTurn }}<MkEllipsis/><span style="margin-left: 1em; opacity: 0.7;">({{ i18n.tsx.remainingN({ n: opTurnTimerRmain }) }})</span></div> <div v-if="iAmPlayer && !game.isEnded && !isMyTurn">{{ i18n.ts._reversi.opponentTurn }}<MkEllipsis/><span style="margin-left: 1em; opacity: 0.7;">({{ i18n.tsx.remainingN({ n: opTurnTimerRmain }) }})</span></div>
<div v-if="iAmPlayer && !game.isEnded && isMyTurn"><span style="display: inline-block; font-weight: bold; animation: tada 1s linear infinite both;">{{ i18n.ts._reversi.myTurn }}</span><span style="margin-left: 1em; opacity: 0.7;">({{ i18n.tsx.remainingN({ n: myTurnTimerRmain }) }})</span></div> <div v-if="iAmPlayer && !game.isEnded && isMyTurn"><span style="display: inline-block; font-weight: bold; animation: global-tada 1s linear infinite both;">{{ i18n.ts._reversi.myTurn }}</span><span style="margin-left: 1em; opacity: 0.7;">({{ i18n.tsx.remainingN({ n: myTurnTimerRmain }) }})</span></div>
<div v-if="game.isEnded && logPos == game.logs.length"> <div v-if="game.isEnded && logPos == game.logs.length">
<template v-if="game.winner"> <template v-if="game.winner">
<Mfm :key="'won'" :text="i18n.tsx._reversi.won({ name: game.winner.name ?? game.winner.username })" :plain="true" :customEmojis="game.winner.emojis"/> <Mfm :key="'won'" :text="i18n.tsx._reversi.won({ name: game.winner.name ?? game.winner.username })" :plain="true" :customEmojis="game.winner.emojis"/>

41
packages/frontend/src/pages/reversi/index.vue
View File

@ -34,12 +34,19 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkPagination :pagination="myGamesPagination" :disableAutoLoad="true"> <MkPagination :pagination="myGamesPagination" :disableAutoLoad="true">
<template #default="{ items }"> <template #default="{ items }">
<div :class="$style.gamePreviews"> <div :class="$style.gamePreviews">
<MkA v-for="g in items" :key="g.id" v-panel :class="$style.gamePreview" tabindex="-1" :to="`/reversi/g/${g.id}`"> <MkA v-for="g in items" :key="g.id" v-panel :class="[$style.gamePreview, !g.isEnded && $style.gamePreviewActive]" tabindex="-1" :to="`/reversi/g/${g.id}`">
<div :class="$style.gamePreviewPlayers"> <div :class="$style.gamePreviewPlayers">
<MkAvatar :class="$style.gamePreviewPlayersAvatar" :user="g.user1"/> vs <MkAvatar :class="$style.gamePreviewPlayersAvatar" :user="g.user2"/> <span v-if="g.winnerId === g.user1Id" style="margin-right: 0.75em; color: var(--accent); font-weight: bold;"><i class="ti ti-trophy"></i></span>
<span v-if="g.winnerId === g.user2Id" style="margin-right: 0.75em; visibility: hidden;"><i class="ti ti-x"></i></span>
<MkAvatar :class="$style.gamePreviewPlayersAvatar" :user="g.user1"/>
<span style="margin: 0 1em;">vs</span>
<MkAvatar :class="$style.gamePreviewPlayersAvatar" :user="g.user2"/>
<span v-if="g.winnerId === g.user1Id" style="margin-left: 0.75em; visibility: hidden;"><i class="ti ti-x"></i></span>
<span v-if="g.winnerId === g.user2Id" style="margin-left: 0.75em; color: var(--accent); font-weight: bold;"><i class="ti ti-trophy"></i></span>
</div> </div>
<div :class="$style.gamePreviewFooter"> <div :class="$style.gamePreviewFooter">
<span :style="!g.isEnded ? 'color: var(--accent);' : ''">{{ g.isEnded ? i18n.ts._reversi.ended : i18n.ts._reversi.playing }}</span> <span v-if="!g.isEnded" :class="$style.gamePreviewStatusActive">{{ i18n.ts._reversi.playing }}</span>
<span v-else>{{ i18n.ts._reversi.ended }}</span>
<MkTime style="margin-left: auto; opacity: 0.7;" :time="g.createdAt"/> <MkTime style="margin-left: auto; opacity: 0.7;" :time="g.createdAt"/>
</div> </div>
</MkA> </MkA>
@ -53,12 +60,19 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkPagination :pagination="gamesPagination" :disableAutoLoad="true"> <MkPagination :pagination="gamesPagination" :disableAutoLoad="true">
<template #default="{ items }"> <template #default="{ items }">
<div :class="$style.gamePreviews"> <div :class="$style.gamePreviews">
<MkA v-for="g in items" :key="g.id" v-panel :class="$style.gamePreview" tabindex="-1" :to="`/reversi/g/${g.id}`"> <MkA v-for="g in items" :key="g.id" v-panel :class="[$style.gamePreview, !g.isEnded && $style.gamePreviewActive]" tabindex="-1" :to="`/reversi/g/${g.id}`">
<div :class="$style.gamePreviewPlayers"> <div :class="$style.gamePreviewPlayers">
<MkAvatar :class="$style.gamePreviewPlayersAvatar" :user="g.user1"/> vs <MkAvatar :class="$style.gamePreviewPlayersAvatar" :user="g.user2"/> <span v-if="g.winnerId === g.user1Id" style="margin-right: 0.75em; color: var(--accent); font-weight: bold;"><i class="ti ti-trophy"></i></span>
<span v-if="g.winnerId === g.user2Id" style="margin-right: 0.75em; visibility: hidden;"><i class="ti ti-x"></i></span>
<MkAvatar :class="$style.gamePreviewPlayersAvatar" :user="g.user1"/>
<span style="margin: 0 1em;">vs</span>
<MkAvatar :class="$style.gamePreviewPlayersAvatar" :user="g.user2"/>
<span v-if="g.winnerId === g.user1Id" style="margin-left: 0.75em; visibility: hidden;"><i class="ti ti-x"></i></span>
<span v-if="g.winnerId === g.user2Id" style="margin-left: 0.75em; color: var(--accent); font-weight: bold;"><i class="ti ti-trophy"></i></span>
</div> </div>
<div :class="$style.gamePreviewFooter"> <div :class="$style.gamePreviewFooter">
<span :style="!g.isEnded ? 'color: var(--accent);' : ''">{{ g.isEnded ? i18n.ts._reversi.ended : i18n.ts._reversi.playing }}</span> <span v-if="!g.isEnded" :class="$style.gamePreviewStatusActive">{{ i18n.ts._reversi.playing }}</span>
<span v-else>{{ i18n.ts._reversi.ended }}</span>
<MkTime style="margin-left: auto; opacity: 0.7;" :time="g.createdAt"/> <MkTime style="margin-left: auto; opacity: 0.7;" :time="g.createdAt"/>
</div> </div>
</MkA> </MkA>
@ -229,6 +243,11 @@ definePageMetadata(computed(() => ({
</script> </script>
<style lang="scss" module> <style lang="scss" module>
@keyframes blink {
0% { opacity: 1; }
50% { opacity: 0.2; }
}
.invitation { .invitation {
display: flex; display: flex;
box-sizing: border-box; box-sizing: border-box;
@ -250,6 +269,10 @@ definePageMetadata(computed(() => ({
overflow: clip; overflow: clip;
} }
.gamePreviewActive {
box-shadow: inset 0 0 8px 0px var(--accent);
}
.gamePreviewPlayers { .gamePreviewPlayers {
text-align: center; text-align: center;
padding: 16px; padding: 16px;
@ -277,6 +300,12 @@ definePageMetadata(computed(() => ({
font-size: 0.9em; font-size: 0.9em;
} }
.gamePreviewStatusActive {
color: var(--accent);
font-weight: bold;
animation: blink 2s infinite;
}
.waitingScreen { .waitingScreen {
text-align: center; text-align: center;
} }

8
packages/frontend/src/style.scss
View File

@ -425,13 +425,13 @@ rt {
transform: scale(0.9); transform: scale(0.9);
} }
@keyframes blink { @keyframes global-blink {
0% { opacity: 1; transform: scale(1); } 0% { opacity: 1; transform: scale(1); }
30% { opacity: 1; transform: scale(1); } 30% { opacity: 1; transform: scale(1); }
90% { opacity: 0; transform: scale(0.5); } 90% { opacity: 0; transform: scale(0.5); }
} }
@keyframes tada { @keyframes global-tada {
from { from {
transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1);
} }
@ -461,7 +461,7 @@ rt {
._anime_bounce { ._anime_bounce {
will-change: transform; will-change: transform;
animation: bounce ease 0.7s; animation: global-bounce ease 0.7s;
animation-iteration-count: 1; animation-iteration-count: 1;
transform-origin: 50% 50%; transform-origin: 50% 50%;
} }
@ -473,7 +473,7 @@ rt {
transition: transform 0.1s ease; transition: transform 0.1s ease;
} }
@keyframes bounce { @keyframes global-bounce {
0% { 0% {
transform: scaleX(0.90) scaleY(0.90) ; transform: scaleX(0.90) scaleY(0.90) ;
} }

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

@ -254,7 +254,7 @@ function more() {
left: 20px; left: 20px;
color: var(--navIndicator); color: var(--navIndicator);
font-size: 8px; font-size: 8px;
animation: blink 1s infinite; animation: global-blink 1s infinite;
&:has(.itemIndicateValueIcon) { &:has(.itemIndicateValueIcon) {
animation: none; animation: none;

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

@ -313,7 +313,7 @@ function more(ev: MouseEvent) {
left: 20px; left: 20px;
color: var(--navIndicator); color: var(--navIndicator);
font-size: 8px; font-size: 8px;
animation: blink 1s infinite; animation: global-blink 1s infinite;
&:has(.itemIndicateValueIcon) { &:has(.itemIndicateValueIcon) {
animation: none; animation: none;
@ -483,7 +483,7 @@ function more(ev: MouseEvent) {
left: 24px; left: 24px;
color: var(--navIndicator); color: var(--navIndicator);
font-size: 8px; font-size: 8px;
animation: blink 1s infinite; animation: global-blink 1s infinite;
&:has(.itemIndicateValueIcon) { &:has(.itemIndicateValueIcon) {
animation: none; animation: none;

2
packages/frontend/src/ui/classic.header.vue
View File

@ -141,7 +141,7 @@ onMounted(() => {
left: 0; left: 0;
color: var(--navIndicator); color: var(--navIndicator);
font-size: 8px; font-size: 8px;
animation: blink 1s infinite; animation: global-blink 1s infinite;
} }
&:hover { &:hover {

2
packages/frontend/src/ui/classic.sidebar.vue
View File

@ -220,7 +220,7 @@ watch(defaultStore.reactiveState.menuDisplay, () => {
left: 0; left: 0;
color: var(--navIndicator); color: var(--navIndicator);
font-size: 8px; font-size: 8px;
animation: blink 1s infinite; animation: global-blink 1s infinite;
&:has(.itemIndicateValueIcon) { &:has(.itemIndicateValueIcon) {
animation: none; animation: none;

2
packages/frontend/src/ui/deck.vue
View File

@ -488,7 +488,7 @@ body {
left: 0; left: 0;
color: var(--indicator); color: var(--indicator);
font-size: 16px; font-size: 16px;
animation: blink 1s infinite; animation: global-blink 1s infinite;
&:has(.itemIndicateValueIcon) { &:has(.itemIndicateValueIcon) {
animation: none; animation: none;

2
packages/frontend/src/ui/universal.vue
View File

@ -448,7 +448,7 @@ $widgets-hide-threshold: 1090px;
left: 0; left: 0;
color: var(--indicator); color: var(--indicator);
font-size: 16px; font-size: 16px;
animation: blink 1s infinite; animation: global-blink 1s infinite;
&:has(.itemIndicateValueIcon) { &:has(.itemIndicateValueIcon) {
animation: none; animation: none;