mirrors/barkey
1
0
Fork 0
mirror of https://codeberg.org/yeentown/barkey.git synced 2025-07-07 20:44:34 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor(frontend): refactor components

Browse source
This commit is contained in:
syuilo 2025-03-20 13:33:01 +09:00
parent 64cf101fe7
commit 3399c786a8
6 changed files with 72 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
packages/frontend/src/components/MkPageWithAnimBg.vue Normal file
View file

@ -0,0 +1,21 @@
<!--
SPDX-FileCopyrightText: syuilo and misskey-project
SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<div>
<MkAnimBg style="position: absolute;"/>
<div class="_pageScrollable" style="position: absolute; top: 0; width: 100%; height: 100%;">
<slot></slot>
</div>
</div>
</template>
<script lang="ts" setup>
import MkAnimBg from '@/components/MkAnimBg.vue';
</script>
<style lang="scss" module>
</style>

77
packages/frontend/src/pages/install-extensions.vue
View file

@ -4,46 +4,43 @@ SPDX-License-Identifier: AGPL-3.0-only
--> -->
<template> <template>
<div> <MkPageWithAnimBg>
<MkAnimBg style="position: absolute;"/> <MkStickyContainer>
<div class="_pageScrollable" style="position: absolute; top: 0; width: 100%; height: 100%;"> <template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
<MkStickyContainer> <MkSpacer :contentMax="550">
<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template> <MkLoading v-if="uiPhase === 'fetching'"/>
<MkSpacer :contentMax="550"> <MkExtensionInstaller v-else-if="uiPhase === 'confirm' && data" :extension="data" @confirm="install()" @cancel="close_()">
<MkLoading v-if="uiPhase === 'fetching'"/> <template #additionalInfo>
<MkExtensionInstaller v-else-if="uiPhase === 'confirm' && data" :extension="data" @confirm="install()" @cancel="close_()"> <FormSection>
<template #additionalInfo> <div class="_gaps_s">
<FormSection> <MkKeyValue>
<div class="_gaps_s"> <template #key>{{ i18n.ts._externalResourceInstaller._vendorInfo.endpoint }}</template>
<MkKeyValue> <template #value><MkUrl :url="url" :showUrlPreview="false"></MkUrl></template>
<template #key>{{ i18n.ts._externalResourceInstaller._vendorInfo.endpoint }}</template> </MkKeyValue>
<template #value><MkUrl :url="url" :showUrlPreview="false"></MkUrl></template> <MkKeyValue>
</MkKeyValue> <template #key>{{ i18n.ts._externalResourceInstaller._vendorInfo.hashVerify }}</template>
<MkKeyValue> <template #value>
<template #key>{{ i18n.ts._externalResourceInstaller._vendorInfo.hashVerify }}</template> <!-- この画面が出ている時点でハッシュの検証には成功している -->
<template #value> <i class="ti ti-check" style="color: var(--MI_THEME-accent)"></i>
<!-- この画面が出ている時点でハッシュの検証には成功している --> </template>
<i class="ti ti-check" style="color: var(--MI_THEME-accent)"></i> </MkKeyValue>
</template> </div>
</MkKeyValue> </FormSection>
</div> </template>
</FormSection> </MkExtensionInstaller>
</template> <div v-else-if="uiPhase === 'error'" class="_gaps_m" :class="[$style.extInstallerRoot, $style.error]">
</MkExtensionInstaller> <div :class="$style.extInstallerIconWrapper">
<div v-else-if="uiPhase === 'error'" class="_gaps_m" :class="[$style.extInstallerRoot, $style.error]"> <i class="ti ti-circle-x"></i>
<div :class="$style.extInstallerIconWrapper">
<i class="ti ti-circle-x"></i>
</div>
<h2 :class="$style.extInstallerTitle">{{ errorKV?.title }}</h2>
<div :class="$style.extInstallerNormDesc">{{ errorKV?.description }}</div>
<div class="_buttonsCenter">
<MkButton @click="close_()">{{ i18n.ts.close }}</MkButton>
</div>
</div> </div>
</MkSpacer> <h2 :class="$style.extInstallerTitle">{{ errorKV?.title }}</h2>
</MkStickyContainer> <div :class="$style.extInstallerNormDesc">{{ errorKV?.description }}</div>
</div> <div class="_buttonsCenter">
</div> <MkButton @click="close_()">{{ i18n.ts.close }}</MkButton>
</div>
</div>
</MkSpacer>
</MkStickyContainer>
</MkPageWithAnimBg>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@ -63,7 +60,7 @@ import { parseThemeCode, installTheme } from '@/theme.js';
import { unisonReload } from '@/utility/unison-reload.js'; import { unisonReload } from '@/utility/unison-reload.js';
import { i18n } from '@/i18n.js'; import { i18n } from '@/i18n.js';
import { definePage } from '@/page.js'; import { definePage } from '@/page.js';
import MkAnimBg from '@/components/MkAnimBg.vue'; import MkPageWithAnimBg from '@/components/MkPageWithAnimBg.vue';
const uiPhase = ref<'fetching' | 'confirm' | 'error'>('fetching'); const uiPhase = ref<'fetching' | 'confirm' | 'error'>('fetching');
const errorKV = ref<{ const errorKV = ref<{

9
packages/frontend/src/pages/miauth.vue
View file

@ -4,8 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
--> -->
<template> <template>
<div> <MkPageWithAnimBg>
<MkAnimBg style="position: fixed; top: 0;"/>
<div :class="$style.formContainer"> <div :class="$style.formContainer">
<div :class="$style.form"> <div :class="$style.form">
<MkAuthConfirm <MkAuthConfirm
@ -25,16 +24,14 @@ SPDX-License-Identifier: AGPL-3.0-only
</MkAuthConfirm> </MkAuthConfirm>
</div> </div>
</div> </div>
</div> </MkPageWithAnimBg>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { computed, useTemplateRef } from 'vue'; import { computed, useTemplateRef } from 'vue';
import * as Misskey from 'misskey-js'; import * as Misskey from 'misskey-js';
import MkPageWithAnimBg from '@/components/MkPageWithAnimBg.vue';
import MkAnimBg from '@/components/MkAnimBg.vue';
import MkAuthConfirm from '@/components/MkAuthConfirm.vue'; import MkAuthConfirm from '@/components/MkAuthConfirm.vue';
import { i18n } from '@/i18n.js'; import { i18n } from '@/i18n.js';
import { misskeyApi } from '@/utility/misskey-api.js'; import { misskeyApi } from '@/utility/misskey-api.js';
import { definePage } from '@/page.js'; import { definePage } from '@/page.js';

7
packages/frontend/src/pages/oauth.vue
View file

@ -4,8 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
--> -->
<template> <template>
<div> <MkPageWithAnimBg>
<MkAnimBg style="position: fixed; top: 0;"/>
<div :class="$style.formContainer"> <div :class="$style.formContainer">
<div :class="$style.form"> <div :class="$style.form">
<MkAuthConfirm <MkAuthConfirm
@ -19,12 +18,12 @@ SPDX-License-Identifier: AGPL-3.0-only
/> />
</div> </div>
</div> </div>
</div> </MkPageWithAnimBg>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import * as Misskey from 'misskey-js'; import * as Misskey from 'misskey-js';
import MkAnimBg from '@/components/MkAnimBg.vue'; import MkPageWithAnimBg from '@/components/MkPageWithAnimBg.vue';
import { definePage } from '@/page.js'; import { definePage } from '@/page.js';
import MkAuthConfirm from '@/components/MkAuthConfirm.vue'; import MkAuthConfirm from '@/components/MkAuthConfirm.vue';

11
packages/frontend/src/pages/signup-complete.vue
View file

@ -4,8 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
--> -->
<template> <template>
<div> <MkPageWithAnimBg>
<MkAnimBg style="position: fixed; top: 0;"/>
<div :class="$style.formContainer"> <div :class="$style.formContainer">
<form :class="$style.form" class="_panel" @submit.prevent="submit()"> <form :class="$style.form" class="_panel" @submit.prevent="submit()">
<div :class="$style.banner"> <div :class="$style.banner">
@ -21,13 +20,13 @@ SPDX-License-Identifier: AGPL-3.0-only
</div> </div>
</form> </form>
</div> </div>
</div> </MkPageWithAnimBg>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from 'vue'; import { ref } from 'vue';
import MkButton from '@/components/MkButton.vue'; import MkButton from '@/components/MkButton.vue';
import MkAnimBg from '@/components/MkAnimBg.vue'; import MkPageWithAnimBg from '@/components/MkPageWithAnimBg.vue';
import { i18n } from '@/i18n.js'; import { i18n } from '@/i18n.js';
import * as os from '@/os.js'; import * as os from '@/os.js';
import { misskeyApi } from '@/utility/misskey-api.js'; import { misskeyApi } from '@/utility/misskey-api.js';
@ -64,8 +63,8 @@ function submit() {
min-height: 100svh; min-height: 100svh;
padding: 32px 32px 64px 32px; padding: 32px 32px 64px 32px;
box-sizing: border-box; box-sizing: border-box;
display: grid; display: grid;
place-content: center; place-content: center;
} }
.form { .form {

7
packages/frontend/src/pages/welcome.setup.vue
View file

@ -4,8 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
--> -->
<template> <template>
<div> <MkPageWithAnimBg>
<MkAnimBg style="position: fixed; top: 0;"/>
<div :class="$style.formContainer"> <div :class="$style.formContainer">
<form :class="$style.form" class="_panel" @submit.prevent="submit()"> <form :class="$style.form" class="_panel" @submit.prevent="submit()">
<div :class="$style.title"> <div :class="$style.title">
@ -35,7 +34,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div> </div>
</form> </form>
</div> </div>
</div> </MkPageWithAnimBg>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@ -46,7 +45,7 @@ import MkInput from '@/components/MkInput.vue';
import * as os from '@/os.js'; import * as os from '@/os.js';
import { misskeyApi } from '@/utility/misskey-api.js'; import { misskeyApi } from '@/utility/misskey-api.js';
import { i18n } from '@/i18n.js'; import { i18n } from '@/i18n.js';
import MkAnimBg from '@/components/MkAnimBg.vue'; import MkPageWithAnimBg from '@/components/MkPageWithAnimBg.vue';
import { login } from '@/accounts.js'; import { login } from '@/accounts.js';
const username = ref(''); const username = ref('');