blob: 2e5629f2321bcc88c0095f92fbc942a9194aec6a (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
|
<!--
SPDX-FileCopyrightText: syuilo and misskey-project
SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<div :class="$style.root" class="_pageScrollable">
<div class="_spacer" :class="$style.main">
<MkButton v-if="read" :class="$style.button" rounded @click="read = false"><i class="ti ti-qrcode"></i> {{ i18n.ts._qr.showTabTitle }}</MkButton>
<MkButton v-else :class="$style.button" rounded @click="read = true"><i class="ti ti-scan"></i> {{ i18n.ts._qr.readTabTitle }}</MkButton>
<MkQrRead v-if="read"/>
<MkQrShow v-else/>
</div>
<MkPolkadots v-if="!read" accented revered :height="200" style="position: sticky; bottom: 0; margin-top: -200px;"/>
</div>
</template>
<script lang="ts" setup>
import { defineAsyncComponent, ref, shallowRef } from 'vue';
import MkQrShow from './qr.show.vue';
import { definePage } from '@/page.js';
import { i18n } from '@/i18n.js';
import { ensureSignin } from '@/i';
import MkButton from '@/components/MkButton.vue';
import MkPolkadots from '@/components/MkPolkadots.vue';
// router definitionでloginRequiredが設定されているためエラーハンドリングしない
const $i = ensureSignin();
const read = ref(false);
const MkQrRead = defineAsyncComponent(() => import('./qr.read.vue'));
definePage(() => ({
title: i18n.ts.qr,
icon: 'ti ti-qrcode',
}));
</script>
<style lang="scss" module>
.root {
height: 100%;
}
.main {
min-height: 100%;
display: flex;
flex-direction: column;
position: relative;
z-index: 1;
}
.button {
margin: 0 auto 16px auto;
}
</style>
|
