diff options
| author | Ebise Lutica <7106976+EbiseLutica@users.noreply.github.com> | 2023-06-09 14:00:53 +0900 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2023-06-09 14:00:53 +0900 |
| commit | 34a32a8334b332de1fd202c9e3fd871d566bab0b (patch) | |
| tree | c268e17ca8e4eddc61751d79dd9a197be2be2963 /packages/frontend/src | |
| parent | tweak of 6032c2be1 (diff) | |
| download | misskey-34a32a8334b332de1fd202c9e3fd871d566bab0b.tar.gz misskey-34a32a8334b332de1fd202c9e3fd871d566bab0b.tar.bz2 misskey-34a32a8334b332de1fd202c9e3fd871d566bab0b.zip | |
エラー画像URLを設定可能に (#10959)
* エラー画像URLを設定可能に
* Update CHANGELOG.md
* 設定したエラーアイコンをprefetchするようにbase.pugを変更
* 不足していたデータを追加
* enhance(frontend): デザイン調整
Diffstat (limited to 'packages/frontend/src')
21 files changed, 75 insertions, 21 deletions
diff --git a/packages/frontend/src/components/MkChannelList.vue b/packages/frontend/src/components/MkChannelList.vue index 4050520eb9..2d3ea8d177 100644 --- a/packages/frontend/src/components/MkChannelList.vue +++ b/packages/frontend/src/components/MkChannelList.vue @@ -2,7 +2,7 @@ <MkPagination :pagination="pagination"> <template #empty> <div class="_fullinfo"> - <img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/> + <img :src="infoImageUrl" class="_ghost"/> <div>{{ i18n.ts.notFound }}</div> </div> </template> @@ -17,6 +17,7 @@ import MkChannelPreview from '@/components/MkChannelPreview.vue'; import MkPagination, { Paging } from '@/components/MkPagination.vue'; import { i18n } from '@/i18n'; +import { infoImageUrl } from '@/instance'; const props = withDefaults(defineProps<{ pagination: Paging; diff --git a/packages/frontend/src/components/MkNotes.vue b/packages/frontend/src/components/MkNotes.vue index 9cc2b7a967..b49c8fa8b7 100644 --- a/packages/frontend/src/components/MkNotes.vue +++ b/packages/frontend/src/components/MkNotes.vue @@ -2,7 +2,7 @@ <MkPagination ref="pagingComponent" :pagination="pagination"> <template #empty> <div class="_fullinfo"> - <img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/> + <img :src="infoImageUrl" class="_ghost"/> <div>{{ i18n.ts.noNotes }}</div> </div> </template> @@ -32,6 +32,7 @@ import MkNote from '@/components/MkNote.vue'; import MkDateSeparatedList from '@/components/MkDateSeparatedList.vue'; import MkPagination, { Paging } from '@/components/MkPagination.vue'; import { i18n } from '@/i18n'; +import { infoImageUrl } from '@/instance'; const props = defineProps<{ pagination: Paging; diff --git a/packages/frontend/src/components/MkNotifications.vue b/packages/frontend/src/components/MkNotifications.vue index 70224bffa1..d4a30d1916 100644 --- a/packages/frontend/src/components/MkNotifications.vue +++ b/packages/frontend/src/components/MkNotifications.vue @@ -2,7 +2,7 @@ <MkPagination ref="pagingComponent" :pagination="pagination"> <template #empty> <div class="_fullinfo"> - <img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/> + <img :src="infoImageUrl" class="_ghost"/> <div>{{ i18n.ts.noNotifications }}</div> </div> </template> @@ -26,6 +26,7 @@ import { useStream } from '@/stream'; import { $i } from '@/account'; import { i18n } from '@/i18n'; import { notificationTypes } from '@/const'; +import { infoImageUrl } from '@/instance'; const props = defineProps<{ includeTypes?: typeof notificationTypes[number][]; diff --git a/packages/frontend/src/components/MkPagination.vue b/packages/frontend/src/components/MkPagination.vue index 740094b113..598529bf58 100644 --- a/packages/frontend/src/components/MkPagination.vue +++ b/packages/frontend/src/components/MkPagination.vue @@ -13,7 +13,7 @@ <div v-else-if="empty" key="_empty_" class="empty"> <slot name="empty"> <div class="_fullinfo"> - <img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/> + <img :src="infoImageUrl" class="_ghost"/> <div>{{ i18n.ts.nothing }}</div> </div> </slot> @@ -73,6 +73,8 @@ export type Paging<E extends keyof misskey.Endpoints = keyof misskey.Endpoints> }; </script> <script lang="ts" setup> +import { infoImageUrl } from '@/instance'; + const props = withDefaults(defineProps<{ pagination: Paging; disableAutoLoad?: boolean; diff --git a/packages/frontend/src/components/MkReactedUsersDialog.vue b/packages/frontend/src/components/MkReactedUsersDialog.vue index cd2a359d5c..0a858a8965 100644 --- a/packages/frontend/src/components/MkReactedUsersDialog.vue +++ b/packages/frontend/src/components/MkReactedUsersDialog.vue @@ -11,7 +11,7 @@ <MkSpacer :marginMin="20" :marginMax="28"> <div v-if="note" class="_gaps"> <div v-if="reactions.length === 0" class="_fullinfo"> - <img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/> + <img :src="infoImageUrl" class="_ghost"/> <div>{{ i18n.ts.nothing }}</div> </div> <template v-else> @@ -42,6 +42,7 @@ import MkUserCardMini from '@/components/MkUserCardMini.vue'; import { userPage } from '@/filters/user'; import { i18n } from '@/i18n'; import * as os from '@/os'; +import { infoImageUrl } from '@/instance'; const emit = defineEmits<{ (ev: 'closed'): void, diff --git a/packages/frontend/src/components/MkRenotedUsersDialog.vue b/packages/frontend/src/components/MkRenotedUsersDialog.vue index 814a68d4da..484cb2f9a7 100644 --- a/packages/frontend/src/components/MkRenotedUsersDialog.vue +++ b/packages/frontend/src/components/MkRenotedUsersDialog.vue @@ -11,7 +11,7 @@ <MkSpacer :marginMin="20" :marginMax="28"> <div v-if="renotes" class="_gaps"> <div v-if="renotes.length === 0" class="_fullinfo"> - <img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/> + <img :src="infoImageUrl" class="_ghost"/> <div>{{ i18n.ts.nothing }}</div> </div> <template v-else> @@ -35,6 +35,7 @@ import MkUserCardMini from '@/components/MkUserCardMini.vue'; import { userPage } from '@/filters/user'; import { i18n } from '@/i18n'; import * as os from '@/os'; +import { infoImageUrl } from '@/instance'; const emit = defineEmits<{ (ev: 'closed'): void, diff --git a/packages/frontend/src/components/MkUserList.vue b/packages/frontend/src/components/MkUserList.vue index 3571ca84d9..2a23f3e70d 100644 --- a/packages/frontend/src/components/MkUserList.vue +++ b/packages/frontend/src/components/MkUserList.vue @@ -2,7 +2,7 @@ <MkPagination :pagination="pagination"> <template #empty> <div class="_fullinfo"> - <img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/> + <img :src="infoImageUrl" class="_ghost"/> <div>{{ i18n.ts.noUsers }}</div> </div> </template> @@ -19,6 +19,7 @@ import MkUserInfo from '@/components/MkUserInfo.vue'; import MkPagination, { Paging } from '@/components/MkPagination.vue'; import { i18n } from '@/i18n'; +import { infoImageUrl } from '@/instance'; const props = withDefaults(defineProps<{ pagination: Paging; diff --git a/packages/frontend/src/components/global/MkError.vue b/packages/frontend/src/components/global/MkError.vue index 513ef21d35..24b0835135 100644 --- a/packages/frontend/src/components/global/MkError.vue +++ b/packages/frontend/src/components/global/MkError.vue @@ -1,7 +1,7 @@ <template> <Transition :name="defaultStore.state.animation ? '_transition_zoom' : ''" appear> <div :class="$style.root"> - <img :class="$style.img" src="https://xn--931a.moe/assets/error.jpg" class="_ghost"/> + <img :class="$style.img" :src="infoImageUrl" class="_ghost"/> <p :class="$style.text"><i class="ti ti-alert-triangle"></i> {{ i18n.ts.somethingHappened }}</p> <MkButton :class="$style.button" @click="() => emit('retry')">{{ i18n.ts.retry }}</MkButton> </div> @@ -12,6 +12,7 @@ import MkButton from '@/components/MkButton.vue'; import { i18n } from '@/i18n'; import { defaultStore } from '@/store'; +import { infoImageUrl } from '@/instance'; const emit = defineEmits<{ (ev: 'retry'): void; diff --git a/packages/frontend/src/const.ts b/packages/frontend/src/const.ts index aaa3d10302..ad7fa372e9 100644 --- a/packages/frontend/src/const.ts +++ b/packages/frontend/src/const.ts @@ -78,3 +78,7 @@ export const ROLE_POLICIES = [ //export const CURRENT_STICKY_BOTTOM = Symbol('CURRENT_STICKY_BOTTOM'); export const CURRENT_STICKY_TOP = 'CURRENT_STICKY_TOP'; export const CURRENT_STICKY_BOTTOM = 'CURRENT_STICKY_BOTTOM'; + +export const DEFAULT_SERVER_ERROR_IMAGE_URL = 'https://xn--931a.moe/assets/error.jpg'; +export const DEFAULT_NOT_FOUND_IMAGE_URL = 'https://xn--931a.moe/assets/not-found.jpg'; +export const DEFAULT_INFO_IMAGE_URL = 'https://xn--931a.moe/assets/info.jpg'; diff --git a/packages/frontend/src/instance.ts b/packages/frontend/src/instance.ts index f4c1988704..9cfcbcbc3f 100644 --- a/packages/frontend/src/instance.ts +++ b/packages/frontend/src/instance.ts @@ -1,7 +1,8 @@ -import { reactive } from 'vue'; +import { computed, reactive } from 'vue'; import * as Misskey from 'misskey-js'; import { api } from './os'; import { miLocalStorage } from './local-storage'; +import { DEFAULT_INFO_IMAGE_URL, DEFAULT_NOT_FOUND_IMAGE_URL, DEFAULT_SERVER_ERROR_IMAGE_URL } from '@/const'; // TODO: 他のタブと永続化されたstateを同期 @@ -13,6 +14,12 @@ export const instance: Misskey.entities.InstanceMetadata = reactive(cached ? JSO // TODO: set default values }); +export const serverErrorImageUrl = computed(() => instance.serverErrorImageUrl ?? DEFAULT_SERVER_ERROR_IMAGE_URL); + +export const infoImageUrl = computed(() => instance.infoImageUrl ?? DEFAULT_INFO_IMAGE_URL); + +export const notFoundImageUrl = computed(() => instance.notFoundImageUrl ?? DEFAULT_NOT_FOUND_IMAGE_URL); + export async function fetchInstance() { const meta = await api('meta', { detail: false, diff --git a/packages/frontend/src/pages/_error_.vue b/packages/frontend/src/pages/_error_.vue index f27d2df336..eee661bd8a 100644 --- a/packages/frontend/src/pages/_error_.vue +++ b/packages/frontend/src/pages/_error_.vue @@ -2,7 +2,7 @@ <MkLoading v-if="!loaded"/> <Transition :name="defaultStore.state.animation ? '_transition_zoom' : ''" appear> <div v-show="loaded" :class="$style.root"> - <img src="https://xn--931a.moe/assets/error.jpg" class="_ghost" :class="$style.img"/> + <img :src="serverErrorImageUrl" class="_ghost" :class="$style.img"/> <div class="_gaps"> <p><b><i class="ti ti-alert-triangle"></i> {{ i18n.ts.pageLoadError }}</b></p> <p v-if="meta && (version === meta.version)">{{ i18n.ts.pageLoadErrorDescription }}</p> @@ -30,6 +30,7 @@ import { i18n } from '@/i18n'; import { definePageMetadata } from '@/scripts/page-metadata'; import { miLocalStorage } from '@/local-storage'; import { defaultStore } from '@/store'; +import { serverErrorImageUrl } from '@/instance'; const props = withDefaults(defineProps<{ error?: Error; diff --git a/packages/frontend/src/pages/admin/roles.role.vue b/packages/frontend/src/pages/admin/roles.role.vue index 4ed6abf200..6cbe7ae658 100644 --- a/packages/frontend/src/pages/admin/roles.role.vue +++ b/packages/frontend/src/pages/admin/roles.role.vue @@ -23,7 +23,7 @@ <MkPagination :pagination="usersPagination"> <template #empty> <div class="_fullinfo"> - <img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/> + <img :src="infoImageUrl" class="_ghost"/> <div>{{ i18n.ts.noUsers }}</div> </div> </template> @@ -69,6 +69,7 @@ import MkButton from '@/components/MkButton.vue'; import MkUserCardMini from '@/components/MkUserCardMini.vue'; import MkInfo from '@/components/MkInfo.vue'; import MkPagination, { Paging } from '@/components/MkPagination.vue'; +import { infoImageUrl } from '@/instance'; const router = useRouter(); diff --git a/packages/frontend/src/pages/admin/settings.vue b/packages/frontend/src/pages/admin/settings.vue index 39d5ae8607..e98e1432a2 100644 --- a/packages/frontend/src/pages/admin/settings.vue +++ b/packages/frontend/src/pages/admin/settings.vue @@ -48,6 +48,21 @@ <template #label>{{ i18n.ts.backgroundImageUrl }}</template> </MkInput> + <MkInput v-model="notFoundImageUrl"> + <template #prefix><i class="ti ti-link"></i></template> + <template #label>{{ i18n.ts.notFoundDescription }}</template> + </MkInput> + + <MkInput v-model="infoImageUrl"> + <template #prefix><i class="ti ti-link"></i></template> + <template #label>{{ i18n.ts.nothing }}</template> + </MkInput> + + <MkInput v-model="serverErrorImageUrl"> + <template #prefix><i class="ti ti-link"></i></template> + <template #label>{{ i18n.ts.somethingHappened }}</template> + </MkInput> + <MkColorInput v-model="themeColor"> <template #label>{{ i18n.ts.themeColor }}</template> </MkColorInput> @@ -151,6 +166,9 @@ let backgroundImageUrl: string | null = $ref(null); let themeColor: any = $ref(null); let defaultLightTheme: any = $ref(null); let defaultDarkTheme: any = $ref(null); +let serverErrorImageUrl: string | null = $ref(null); +let infoImageUrl: string | null = $ref(null); +let notFoundImageUrl: string | null = $ref(null); let pinnedUsers: string = $ref(''); let cacheRemoteFiles: boolean = $ref(false); let enableServiceWorker: boolean = $ref(false); @@ -169,6 +187,9 @@ async function init() { themeColor = meta.themeColor; defaultLightTheme = meta.defaultLightTheme; defaultDarkTheme = meta.defaultDarkTheme; + serverErrorImageUrl = meta.serverErrorImageUrl; + infoImageUrl = meta.infoImageUrl; + notFoundImageUrl = meta.notFoundImageUrl; maintainerName = meta.maintainerName; maintainerEmail = meta.maintainerEmail; pinnedUsers = meta.pinnedUsers.join('\n'); @@ -190,6 +211,9 @@ function save() { themeColor: themeColor === '' ? null : themeColor, defaultLightTheme: defaultLightTheme === '' ? null : defaultLightTheme, defaultDarkTheme: defaultDarkTheme === '' ? null : defaultDarkTheme, + infoImageUrl, + notFoundImageUrl, + serverErrorImageUrl, maintainerName, maintainerEmail, pinnedUsers: pinnedUsers.split('\n'), diff --git a/packages/frontend/src/pages/favorites.vue b/packages/frontend/src/pages/favorites.vue index 460bf65d1e..21c306148b 100644 --- a/packages/frontend/src/pages/favorites.vue +++ b/packages/frontend/src/pages/favorites.vue @@ -5,7 +5,7 @@ <MkPagination :pagination="pagination"> <template #empty> <div class="_fullinfo"> - <img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/> + <img :src="infoImageUrl" class="_ghost"/> <div>{{ i18n.ts.noNotes }}</div> </div> </template> @@ -26,6 +26,7 @@ import MkNote from '@/components/MkNote.vue'; import MkDateSeparatedList from '@/components/MkDateSeparatedList.vue'; import { i18n } from '@/i18n'; import { definePageMetadata } from '@/scripts/page-metadata'; +import { infoImageUrl } from '@/instance'; const pagination = { endpoint: 'i/favorites' as const, diff --git a/packages/frontend/src/pages/follow-requests.vue b/packages/frontend/src/pages/follow-requests.vue index 1452942a1e..a70a4894a5 100644 --- a/packages/frontend/src/pages/follow-requests.vue +++ b/packages/frontend/src/pages/follow-requests.vue @@ -5,7 +5,7 @@ <MkPagination ref="paginationComponent" :pagination="pagination"> <template #empty> <div class="_fullinfo"> - <img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/> + <img :src="infoImageUrl" class="_ghost"/> <div>{{ i18n.ts.noFollowRequests }}</div> </div> </template> @@ -39,6 +39,7 @@ import { userPage, acct } from '@/filters/user'; import * as os from '@/os'; import { i18n } from '@/i18n'; import { definePageMetadata } from '@/scripts/page-metadata'; +import { infoImageUrl } from '@/instance'; const paginationComponent = shallowRef<InstanceType<typeof MkPagination>>(); diff --git a/packages/frontend/src/pages/list.vue b/packages/frontend/src/pages/list.vue index f92c06d1c5..40934fb71d 100644 --- a/packages/frontend/src/pages/list.vue +++ b/packages/frontend/src/pages/list.vue @@ -3,7 +3,7 @@ <template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template> <MKSpacer v-if="!(typeof error === 'undefined')" :contentMax="1200"> <div :class="$style.root"> - <img :class="$style.img" src="https://xn--931a.moe/assets/error.jpg" class="_ghost"/> + <img :class="$style.img" :src="serverErrorImageUrl" class="_ghost"/> <p :class="$style.text"> <i class="ti ti-alert-triangle"></i> {{ i18n.ts.nothing }} @@ -36,6 +36,7 @@ import { i18n } from '@/i18n'; import MkUserCardMini from '@/components/MkUserCardMini.vue'; import MkButton from '@/components/MkButton.vue'; import { definePageMetadata } from '@/scripts/page-metadata'; +import { serverErrorImageUrl } from '@/instance'; const props = defineProps<{ listId: string; diff --git a/packages/frontend/src/pages/not-found.vue b/packages/frontend/src/pages/not-found.vue index 2c9d949017..43dc41e7cc 100644 --- a/packages/frontend/src/pages/not-found.vue +++ b/packages/frontend/src/pages/not-found.vue @@ -1,7 +1,7 @@ <template> <div> <div class="_fullinfo"> - <img src="https://xn--931a.moe/assets/not-found.jpg" class="_ghost"/> + <img :src="notFoundImageUrl" class="_ghost"/> <div>{{ i18n.ts.notFoundDescription }}</div> </div> </div> @@ -10,6 +10,7 @@ <script lang="ts" setup> import { i18n } from '@/i18n'; import { definePageMetadata } from '@/scripts/page-metadata'; +import { notFoundImageUrl } from '@/instance'; const headerActions = $computed(() => []); diff --git a/packages/frontend/src/pages/role.vue b/packages/frontend/src/pages/role.vue index e85ab0917a..fc04468d5a 100644 --- a/packages/frontend/src/pages/role.vue +++ b/packages/frontend/src/pages/role.vue @@ -3,7 +3,7 @@ <template #header><MkPageHeader v-model:tab="tab" :tabs="headerTabs"/></template> <MKSpacer v-if="!(typeof error === 'undefined')" :contentMax="1200"> <div :class="$style.root"> - <img :class="$style.img" src="https://xn--931a.moe/assets/error.jpg" class="_ghost"/> + <img :class="$style.img" :src="serverErrorImageUrl" class="_ghost"/> <p :class="$style.text"> <i class="ti ti-alert-triangle"></i> {{ error }} @@ -30,6 +30,7 @@ import { definePageMetadata } from '@/scripts/page-metadata'; import { i18n } from '@/i18n'; import MkTimeline from '@/components/MkTimeline.vue'; import { instanceName } from '@/config'; +import { serverErrorImageUrl } from '@/instance'; const props = withDefaults(defineProps<{ role: string; diff --git a/packages/frontend/src/pages/settings/apps.vue b/packages/frontend/src/pages/settings/apps.vue index fbb78200d4..cadce49230 100644 --- a/packages/frontend/src/pages/settings/apps.vue +++ b/packages/frontend/src/pages/settings/apps.vue @@ -3,7 +3,7 @@ <FormPagination ref="list" :pagination="pagination"> <template #empty> <div class="_fullinfo"> - <img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/> + <img :src="infoImageUrl" class="_ghost"/> <div>{{ i18n.ts.nothing }}</div> </div> </template> @@ -47,6 +47,7 @@ import { i18n } from '@/i18n'; import { definePageMetadata } from '@/scripts/page-metadata'; import MkKeyValue from '@/components/MkKeyValue.vue'; import MkButton from '@/components/MkButton.vue'; +import { infoImageUrl } from '@/instance'; const list = ref<any>(null); diff --git a/packages/frontend/src/pages/settings/mute-block.vue b/packages/frontend/src/pages/settings/mute-block.vue index 3d0463f708..e0785ab9fe 100644 --- a/packages/frontend/src/pages/settings/mute-block.vue +++ b/packages/frontend/src/pages/settings/mute-block.vue @@ -10,7 +10,7 @@ <MkPagination :pagination="renoteMutingPagination"> <template #empty> <div class="_fullinfo"> - <img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/> + <img :src="infoImageUrl" class="_ghost"/> <div>{{ i18n.ts.noUsers }}</div> </div> </template> @@ -38,7 +38,7 @@ <MkPagination :pagination="mutingPagination"> <template #empty> <div class="_fullinfo"> - <img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/> + <img :src="infoImageUrl" class="_ghost"/> <div>{{ i18n.ts.noUsers }}</div> </div> </template> @@ -68,7 +68,7 @@ <MkPagination :pagination="blockingPagination"> <template #empty> <div class="_fullinfo"> - <img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/> + <img :src="infoImageUrl" class="_ghost"/> <div>{{ i18n.ts.noUsers }}</div> </div> </template> @@ -107,6 +107,7 @@ import { i18n } from '@/i18n'; import { definePageMetadata } from '@/scripts/page-metadata'; import MkUserCardMini from '@/components/MkUserCardMini.vue'; import * as os from '@/os'; +import { infoImageUrl } from '@/instance'; let tab = $ref('renoteMute'); diff --git a/packages/frontend/src/widgets/WidgetRss.vue b/packages/frontend/src/widgets/WidgetRss.vue index 1be882c66d..953ce2908d 100644 --- a/packages/frontend/src/widgets/WidgetRss.vue +++ b/packages/frontend/src/widgets/WidgetRss.vue @@ -7,7 +7,7 @@ <div class="ekmkgxbj"> <MkLoading v-if="fetching"/> <div v-else-if="(!items || items.length === 0) && widgetProps.showHeader" class="_fullinfo"> - <img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/> + <img :src="infoImageUrl" class="_ghost"/> <div>{{ i18n.ts.nothing }}</div> </div> <div v-else :class="$style.feed"> @@ -25,6 +25,7 @@ import MkContainer from '@/components/MkContainer.vue'; import { url as base } from '@/config'; import { i18n } from '@/i18n'; import { useInterval } from '@/scripts/use-interval'; +import { infoImageUrl } from '@/instance'; const name = 'rss'; |