enhance(client): ユーザー名についてのヒントを追加

This commit is contained in:
syuilo 2021-08-22 13:16:15 +09:00
parent 7387e010c2
commit 8785e1c3a4
5 changed files with 25 additions and 2 deletions

View file

@ -778,6 +778,7 @@ whatIsNew: "更新情報を見る"
translate: "翻訳" translate: "翻訳"
translatedFrom: "{x}から翻訳" translatedFrom: "{x}から翻訳"
accountDeletionInProgress: "アカウントの削除が進行中です" accountDeletionInProgress: "アカウントの削除が進行中です"
usernameInfo: "サーバー上であなたのアカウントを一意に識別するための名前。アルファベット(a~z, A~Z)、数字(0~9)、およびアンダーバー(_)が使用できます。ユーザー名は後から変更することは出来ません。"
_accountDelete: _accountDelete:
accountDelete: "アカウントの削除" accountDelete: "アカウントの削除"

View file

@ -10,6 +10,7 @@
<i v-else-if="type === 'warning'" class="fas fa-exclamation-triangle"></i> <i v-else-if="type === 'warning'" class="fas fa-exclamation-triangle"></i>
<i v-else-if="type === 'info'" class="fas fa-info-circle"></i> <i v-else-if="type === 'info'" class="fas fa-info-circle"></i>
<i v-else-if="type === 'question'" class="fas fa-question-circle"></i> <i v-else-if="type === 'question'" class="fas fa-question-circle"></i>
<i v-else-if="type === 'help'" class="fas fa-question-circle"></i>
<i v-else-if="type === 'waiting'" class="fas fa-spinner fa-pulse"></i> <i v-else-if="type === 'waiting'" class="fas fa-spinner fa-pulse"></i>
</div> </div>
<header v-if="title"><Mfm :text="title"/></header> <header v-if="title"><Mfm :text="title"/></header>

View file

@ -6,7 +6,7 @@
<template #prefix><i class="fas fa-key"></i></template> <template #prefix><i class="fas fa-key"></i></template>
</MkInput> </MkInput>
<MkInput v-model="username" type="text" pattern="^[a-zA-Z0-9_]{1,20}$" :autocomplete="Math.random()" spellcheck="false" required @update:modelValue="onChangeUsername" data-cy-signup-username> <MkInput v-model="username" type="text" pattern="^[a-zA-Z0-9_]{1,20}$" :autocomplete="Math.random()" spellcheck="false" required @update:modelValue="onChangeUsername" data-cy-signup-username>
<template #label>{{ $ts.username }}</template> <template #label>{{ $ts.username }} <div class="_button _help" v-tooltip:dialog="$ts.usernameInfo"><i class="far fa-question-circle"></i></div></template>
<template #prefix>@</template> <template #prefix>@</template>
<template #suffix>@{{ host }}</template> <template #suffix>@{{ host }}</template>
<template #caption> <template #caption>

View file

@ -1,6 +1,6 @@
import { Directive, ref } from 'vue'; import { Directive, ref } from 'vue';
import { isDeviceTouch } from '@client/scripts/is-device-touch'; import { isDeviceTouch } from '@client/scripts/is-device-touch';
import { popup } from '@client/os'; import { popup, dialog } from '@client/os';
const start = isDeviceTouch ? 'touchstart' : 'mouseover'; const start = isDeviceTouch ? 'touchstart' : 'mouseover';
const end = isDeviceTouch ? 'touchend' : 'mouseleave'; const end = isDeviceTouch ? 'touchend' : 'mouseleave';
@ -24,6 +24,20 @@ export default {
} }
}; };
console.log(binding.arg);
if (binding.arg === 'dialog') {
el.addEventListener('click', (ev) => {
ev.preventDefault();
ev.stopPropagation();
dialog({
type: 'help',
text: binding.value,
});
return false;
});
}
const show = e => { const show = e => {
if (!document.body.contains(el)) return; if (!document.body.contains(el)) return;
if (self._close) return; if (self._close) return;

View file

@ -156,8 +156,10 @@ hr {
._button { ._button {
appearance: none; appearance: none;
display: inline-block;
padding: 0; padding: 0;
margin: 0; // for Safari margin: 0; // for Safari
width: max-content;
background: none; background: none;
border: none; border: none;
cursor: pointer; cursor: pointer;
@ -201,6 +203,11 @@ hr {
} }
} }
._help {
color: var(--accent);
cursor: help
}
._textButton { ._textButton {
@extend ._button; @extend ._button;
color: var(--accent); color: var(--accent);