fix: 💄 locales, transition for MkDonation

This commit is contained in:
ThatOneCalculator 2023-07-12 00:23:54 -07:00
parent c1ebe11ee9
commit d9fd0ea714
No known key found for this signature in database
GPG key ID: 8703CACD01000000
3 changed files with 74 additions and 37 deletions

View file

@ -1119,6 +1119,8 @@ showPopup: "Notify users with popup"
showWithSparkles: "Show with sparkles" showWithSparkles: "Show with sparkles"
youHaveUnreadAnnouncements: "You have unread announcements" youHaveUnreadAnnouncements: "You have unread announcements"
donationLink: "Link to donation page" donationLink: "Link to donation page"
neverShow: "Don't show again"
remindMeLater: "Maybe later"
_sensitiveMediaDetection: _sensitiveMediaDetection:
description: "Reduces the effort of server moderation through automatically recognizing description: "Reduces the effort of server moderation through automatically recognizing

View file

@ -983,6 +983,8 @@ enableIdenticonGeneration: "ユーザーごとのIdenticon生成を有効にす
showPopup: "ポップアップを表示してユーザーに知らせる" showPopup: "ポップアップを表示してユーザーに知らせる"
showWithSparkles: "タイトルをキラキラさせる" showWithSparkles: "タイトルをキラキラさせる"
youHaveUnreadAnnouncements: "未読のお知らせがあります" youHaveUnreadAnnouncements: "未読のお知らせがあります"
neverShow: "今後表示しない"
remindMeLater: "また後で"
_sensitiveMediaDetection: _sensitiveMediaDetection:
description: "機械学習を使って自動でセンシティブなメディアを検出し、モデレーションに役立てられます。サーバーの負荷が少し増えます。" description: "機械学習を使って自動でセンシティブなメディアを検出し、モデレーションに役立てられます。サーバーの負荷が少し増えます。"

View file

@ -1,50 +1,68 @@
<template> <template>
<div class="_panel _shadow" :class="$style.root"> <transition name="slide-fade">
<div :class="$style.icon"> <div v-if="show" class="_panel _shadow" :class="$style.root">
<i class="ph-hand-heart ph-bold ph-6x" /> <div :class="$style.icon">
<i class="ph-hand-heart ph-bold ph-5x" />
</div>
<div :class="$style.main">
<div :class="$style.title">
{{ i18n.ts._aboutMisskey.donateTitle }}
</div>
<div :class="$style.text">
{{ i18n.ts._aboutMisskey.pleaseDonateToCalckey }}
<p v-if="instance.donationLink">
{{
i18n.t("_aboutMisskey.pleaseDonateToHost", {
host: hostname,
})
}}
</p>
</div>
<div class="_flexList">
<MkButton
primary
@click="
openExternal('https://opencollective.com/calckey')
"
>{{ i18n.ts._aboutMisskey.donate }}</MkButton
>
<MkButton
v-if="instance.donationLink"
primary
@click="openExternal(instance.donationLink)"
>{{
i18n.t("_aboutMisskey.donateHost", {
host: hostname,
})
}}</MkButton
>
</div>
<div class="_flexList" style="margin-top: 0.6rem">
<MkButton @click="close">{{
i18n.ts.remindMeLater
}}</MkButton>
<MkButton @click="neverShow">{{
i18n.ts.neverShow
}}</MkButton>
</div>
</div>
<button class="_button" :class="$style.close" @click="close">
<i class="ph-x ph-bold ph-lg"></i>
</button>
</div> </div>
<div :class="$style.main"> </transition>
<div :class="$style.title">
{{ i18n.ts._aboutMisskey.donateTitle }}
</div>
<div :class="$style.text">
{{ i18n.ts._aboutMisskey.pleaseDonateToCalckey }}
<p v-if="instance.donationLink">
{{
i18n.t("_aboutMisskey.pleaseDonateToHost", {
host: hostname,
})
}}
</p>
</div>
<div class="_flexList">
<MkButton primary @click="openExternal('https://opencollective.com/calckey')">{{
i18n.ts._aboutMisskey.donate
}}</MkButton>
<MkButton v-if="instance.donationLink" primary @click="openExternal(instance.donationLink)">{{
i18n.t("_aboutMisskey.donateHost", {
host: hostname,
})
}}</MkButton>
</div>
<div class="_flexList">
<MkButton @click="close">{{ i18n.ts.remindMeLater }}</MkButton>
<MkButton @click="neverShow">{{ i18n.ts.neverShow }}</MkButton>
</div>
</div>
<button class="_button" :class="$style.close" @click="close">
<i class="ph-x ph-bold ph-lg"></i>
</button>
</div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from "vue";
import MkButton from "@/components/MkButton.vue"; import MkButton from "@/components/MkButton.vue";
import { host } from "@/config"; import { host } from "@/config";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
import * as os from "@/os"; import * as os from "@/os";
import { instance } from "@/instance"; import { instance } from "@/instance";
let show = ref(true);
const emit = defineEmits<{ const emit = defineEmits<{
(ev: "closed"): void; (ev: "closed"): void;
}>(); }>();
@ -56,6 +74,7 @@ const zIndex = os.claimZIndex("low");
function close() { function close() {
localStorage.setItem("latestDonationInfoShownAt", Date.now().toString()); localStorage.setItem("latestDonationInfoShownAt", Date.now().toString());
emit("closed"); emit("closed");
show.value = false;
} }
function neverShow() { function neverShow() {
@ -116,8 +135,22 @@ function openExternal(link) {
.title { .title {
font-weight: bold; font-weight: bold;
} }
.text { .text {
margin: 0.7em 0 1em 0; margin: 0.7em 0 1em 0;
} }
.slide-fade-enter {
opacity: 1;
transform: translateY(0);
}
.slide-fade-enter-active {
transition: opacity 0.5s, transform 0.5s;
}
.slide-fade-leave-to {
opacity: 0;
transform: translateY(100%);
}
.slide-fade-leave-active {
transition: opacity 0.5s, transform 0.5s;
}
</style> </style>