usbharu
/
misskey
mirror of https://github.com/misskey-dev/misskey.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

🎨

This commit is contained in:
syuilo 2024-10-01 12:30:18 +09:00
parent c3f1d27e2b
commit d4fa970a95
1 changed files with 50 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
packages/frontend/src/components/MkSigninDialog.vue
View File

@ -4,26 +4,27 @@ SPDX-License-Identifier: AGPL-3.0-only
--> -->
<template> <template>
<MkModalWindow <MkModal
ref="dialog" ref="modal"
:width="400" :preferType="'dialog'"
:height="450" @click="onClose"
@close="onClose"
@closed="emit('closed')" @closed="emit('closed')"
> >
<template #header>{{ i18n.ts.login }}</template> <div :class="$style.root">
<div :class="$style.header"><i class="ti ti-login-2"></i> {{ i18n.ts.login }}</div>
<MkSpacer :marginMin="20" :marginMax="28"> <button :class="$style.closeButton" class="_button" @click="onClose"><i class="ti ti-x"></i></button>
<MkSignin :autoSet="autoSet" :message="message" :openOnRemote="openOnRemote" @login="onLogin"/> <MkSpacer :marginMin="20" :marginMax="28" style="margin: auto;">
</MkSpacer> <MkSignin :autoSet="autoSet" :message="message" :openOnRemote="openOnRemote" @login="onLogin"/>
</MkModalWindow> </MkSpacer>
</div>
</MkModal>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { shallowRef } from 'vue'; import { shallowRef } from 'vue';
import type { OpenOnRemoteOptions } from '@/scripts/please-login.js'; import type { OpenOnRemoteOptions } from '@/scripts/please-login.js';
import MkSignin from '@/components/MkSignin.vue'; import MkSignin from '@/components/MkSignin.vue';
import MkModalWindow from '@/components/MkModalWindow.vue'; import MkModal from '@/components/MkModal.vue';
import { i18n } from '@/i18n.js'; import { i18n } from '@/i18n.js';
withDefaults(defineProps<{ withDefaults(defineProps<{
@ -42,15 +43,49 @@ const emit = defineEmits<{
(ev: 'cancelled'): void; (ev: 'cancelled'): void;
}>(); }>();
const dialog = shallowRef<InstanceType<typeof MkModalWindow>>(); const modal = shallowRef<InstanceType<typeof MkModal>>();
function onClose() { function onClose() {
emit('cancelled'); emit('cancelled');
if (dialog.value) dialog.value.close(); if (modal.value) modal.value.close();
} }
function onLogin(res) { function onLogin(res) {
emit('done', res); emit('done', res);
if (dialog.value) dialog.value.close(); if (modal.value) modal.value.close();
} }
</script> </script>
<style lang="scss" module>
.root {
display: flex;
margin: auto;
position: relative;
padding: 32px;
width: 100%;
max-width: 400px;
height: 100%;
max-height: 450px;
box-sizing: border-box;
text-align: center;
background: var(--panel);
border-radius: var(--radius);
}
.header {
position: absolute;
top: 0;
left: 0;
font-weight: bold;
padding: 16px 20px;
}
.closeButton {
position: absolute;
z-index: 1;
top: 0;
right: 0;
padding: 16px;
font-size: 16px;
}
</style>