diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 35739d276..0c78ea149 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -778,6 +778,7 @@ whatIsNew: "更新情報を見る"
translate: "翻訳"
translatedFrom: "{x}から翻訳"
accountDeletionInProgress: "アカウントの削除が進行中です"
+usernameInfo: "サーバー上であなたのアカウントを一意に識別するための名前。アルファベット(a~z, A~Z)、数字(0~9)、およびアンダーバー(_)が使用できます。ユーザー名は後から変更することは出来ません。"
_accountDelete:
accountDelete: "アカウントの削除"
diff --git a/src/client/components/dialog.vue b/src/client/components/dialog.vue
index f3611f050..0a7508aee 100644
--- a/src/client/components/dialog.vue
+++ b/src/client/components/dialog.vue
@@ -10,6 +10,7 @@
+
diff --git a/src/client/components/signup.vue b/src/client/components/signup.vue
index b0b0c2ad4..a19b4f5bd 100644
--- a/src/client/components/signup.vue
+++ b/src/client/components/signup.vue
@@ -6,7 +6,7 @@
- {{ $ts.username }}
+ {{ $ts.username }}
@
@{{ host }}
diff --git a/src/client/directives/tooltip.ts b/src/client/directives/tooltip.ts
index 90247eacb..cf6f3c8e6 100644
--- a/src/client/directives/tooltip.ts
+++ b/src/client/directives/tooltip.ts
@@ -1,6 +1,6 @@
import { Directive, ref } from 'vue';
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 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 => {
if (!document.body.contains(el)) return;
if (self._close) return;
diff --git a/src/client/style.scss b/src/client/style.scss
index a6c027745..269cf8893 100644
--- a/src/client/style.scss
+++ b/src/client/style.scss
@@ -156,8 +156,10 @@ hr {
._button {
appearance: none;
+ display: inline-block;
padding: 0;
margin: 0; // for Safari
+ width: max-content;
background: none;
border: none;
cursor: pointer;
@@ -201,6 +203,11 @@ hr {
}
}
+._help {
+ color: var(--accent);
+ cursor: help
+}
+
._textButton {
@extend ._button;
color: var(--accent);