-
-
Notifications
You must be signed in to change notification settings - Fork 1.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
refactor: 拡張機能インストールのページの一部をコンポーネントとして分離 #14654
Merged
Merged
Changes from 2 commits
Commits
Show all changes
8 commits
Select commit
Hold shift + click to select a range
1684ca2
create MkExtensionInstaller.vue
FineArchs fa79678
annotation
FineArchs 45f0853
add fallbacks
FineArchs 768e453
Merge branch 'sep-extInst' of https://github.com/FineArchs/misskey in…
FineArchs c02bed0
storybook
FineArchs eca5908
update annotations
FineArchs 717b387
Update MkExtensionInstaller.vue
FineArchs fd58e9c
use additonalInfo slot
FineArchs File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
159 changes: 159 additions & 0 deletions
159
packages/frontend/src/components/MkExtensionInstaller.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,159 @@ | ||
| <!-- | ||
| SPDX-FileCopyrightText: syuilo and misskey-project | ||
| SPDX-License-Identifier: AGPL-3.0-only | ||
| --> | ||
|
|
||
| <template> | ||
| <div class="_gaps_m" :class="$style.extInstallerRoot"> | ||
| <div :class="$style.extInstallerIconWrapper"> | ||
| <i v-if="extension.type === 'plugin'" class="ti ti-plug"></i> | ||
| <i v-else-if="extension.type === 'theme'" class="ti ti-palette"></i> | ||
| <i v-else class="ti ti-download"></i> | ||
| </div> | ||
| <h2 :class="$style.extInstallerTitle">{{ i18n.ts._externalResourceInstaller[`_${extension.type}`].title }}</h2> | ||
| <div :class="$style.extInstallerNormDesc">{{ i18n.ts._externalResourceInstaller.checkVendorBeforeInstall }}</div> | ||
| <MkInfo v-if="extension.type === 'plugin'" :warn="true">{{ i18n.ts._plugin.installWarn }}</MkInfo> | ||
| <FormSection> | ||
| <template #label>{{ i18n.ts._externalResourceInstaller[`_${extension.type}`].metaTitle }}</template> | ||
| <div class="_gaps_s"> | ||
| <FormSplit> | ||
| <MkKeyValue> | ||
| <template #key>{{ i18n.ts.name }}</template> | ||
| <template #value>{{ extension.meta.name }}</template> | ||
| </MkKeyValue> | ||
| <MkKeyValue> | ||
| <template #key>{{ i18n.ts.author }}</template> | ||
| <template #value>{{ extension.meta.author }}</template> | ||
| </MkKeyValue> | ||
| </FormSplit> | ||
| <MkKeyValue v-if="extension.type === 'plugin'"> | ||
| <template #key>{{ i18n.ts.description }}</template> | ||
| <template #value>{{ extension.meta.description }}</template> | ||
| </MkKeyValue> | ||
| <MkKeyValue v-if="extension.type === 'plugin'"> | ||
| <template #key>{{ i18n.ts.version }}</template> | ||
| <template #value>{{ extension.meta.version }}</template> | ||
| </MkKeyValue> | ||
| <MkKeyValue v-if="extension.type === 'plugin'"> | ||
| <template #key>{{ i18n.ts.permission }}</template> | ||
| <template #value> | ||
| <ul :class="$style.extInstallerKVList"> | ||
| <li v-for="permission in extension.meta.permissions" :key="permission">{{ i18n.ts._permissions[permission] }}</li> | ||
| </ul> | ||
| </template> | ||
| </MkKeyValue> | ||
| <MkKeyValue v-if="extension.type === 'theme' && extension.meta.base"> | ||
| <template #key>{{ i18n.ts._externalResourceInstaller._meta.base }}</template> | ||
| <template #value>{{ i18n.ts[extension.meta.base] }}</template> | ||
| </MkKeyValue> | ||
| <MkFolder> | ||
| <template #icon><i class="ti ti-code"></i></template> | ||
| <template #label>{{ i18n.ts._plugin.viewSource }}</template> | ||
|
|
||
| <MkCode :code="extension.raw"/> | ||
| </MkFolder> | ||
| </div> | ||
| </FormSection> | ||
| <FormSection> | ||
| <template #label>{{ i18n.ts._externalResourceInstaller._vendorInfo.title }}</template> | ||
| <div class="_gaps_s"> | ||
| <MkKeyValue v-if="url"> | ||
| <template #key>{{ i18n.ts._externalResourceInstaller._vendorInfo.endpoint }}</template> | ||
| <template #value><MkUrl :url="url" :showUrlPreview="false"></MkUrl></template> | ||
| </MkKeyValue> | ||
| <MkKeyValue v-if="hashVerified"> | ||
| <!-- TODO: ハッシュ検証に失敗した場合の表示も作る --> | ||
| <!-- その場合、hashVerifiedがfalseなら失敗表示、undefinedなら表示なしで分けたい --> | ||
| <template #key>{{ i18n.ts._externalResourceInstaller._vendorInfo.hashVerify }}</template> | ||
| <template #value> | ||
| <i class="ti ti-check" style="color: var(--accent)"></i> | ||
| </template> | ||
| </MkKeyValue> | ||
| </div> | ||
| </FormSection> | ||
| <div class="_buttonsCenter"> | ||
| <MkButton primary @click="emits('confirm')"><i class="ti ti-check"></i> {{ i18n.ts.install }}</MkButton> | ||
| </div> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script lang="ts"> | ||
| export type Extension = { | ||
| type: 'plugin'; | ||
| raw: string; | ||
| meta: { | ||
| name: string; | ||
| author: string; | ||
| description?: string; | ||
| version?: string; | ||
| permissions?: string[]; | ||
| config?: Record<string, any>; | ||
| }; | ||
| } | { | ||
| type: 'theme'; | ||
| raw: string; | ||
| meta: { | ||
| name: string; | ||
| author: string; | ||
| base?: 'light' | 'dark'; | ||
| }; | ||
| }; | ||
| </script> | ||
| <script lang="ts" setup> | ||
| import MkButton from '@/components/MkButton.vue'; | ||
| import FormSection from '@/components/form/section.vue'; | ||
| import FormSplit from '@/components/form/split.vue'; | ||
| import MkCode from '@/components/MkCode.vue'; | ||
| import MkUrl from '@/components/global/MkUrl.vue'; | ||
| import MkInfo from '@/components/MkInfo.vue'; | ||
| import MkFolder from '@/components/MkFolder.vue'; | ||
| import MkKeyValue from '@/components/MkKeyValue.vue'; | ||
| import { i18n } from '@/i18n.js'; | ||
|
|
||
| const props = defineProps<{ | ||
| extension: Extension; | ||
| url?: string; | ||
| hashVerified?: boolean; | ||
| }>(); | ||
|
|
||
| const emits = defineEmits<{ | ||
| (ev: 'confirm'): void; | ||
| }>(); | ||
| </script> | ||
|
|
||
| <style lang="scss" module> | ||
| .extInstallerRoot { | ||
| border-radius: var(--radius); | ||
| background: var(--panel); | ||
| padding: 1.5rem; | ||
| } | ||
|
|
||
| .extInstallerIconWrapper { | ||
| width: 48px; | ||
| height: 48px; | ||
| font-size: 24px; | ||
| line-height: 48px; | ||
| text-align: center; | ||
| border-radius: 50%; | ||
| margin-left: auto; | ||
| margin-right: auto; | ||
|
|
||
| background-color: var(--accentedBg); | ||
| color: var(--accent); | ||
| } | ||
|
|
||
| .extInstallerTitle { | ||
| font-size: 1.2rem; | ||
| text-align: center; | ||
| margin: 0; | ||
| } | ||
|
|
||
| .extInstallerNormDesc { | ||
| text-align: center; | ||
| } | ||
|
|
||
| .extInstallerKVList { | ||
| margin-top: 0; | ||
| margin-bottom: 0; | ||
| } | ||
| </style> | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ハッシュ検証のエラー画面出し分けはinstall-extensions.vueでやってるので、失敗した場合のハンドリングをここでやる必要はないかも
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
このコンポーネント分離は他の場所からも使用できるようにすることを念頭に置いています。
install-extensions.vue以外から使われる可能性があるので、場合によってはここでハンドリングすることもあると思います。
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ならエラー画面もろとも引っ越す必要がありそう（ハッシュ検証に失敗した場合はそもそもインストールさせないので）
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
すみません、色々混乱していました。
よく考えたらこのコンポーネントは表示専用に作っているのでエラーハンドリングを行わせる予定は最初から無かったですし、懸念事項は「props.hashVerifiedがboolean型なのを見て、falseにすれば失敗画面が出ると勘違いする人が出る」ことだったので単にコメントで注釈を書けばいいですね。その方向で修正します。