diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index c97aad482e..7748023790 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -687,6 +687,7 @@ _visibility: specified: "ダイレクト" specifiedDescription: "指定したユーザーのみに公開" localOnly: "ローカルのみ" + localOnlyDescription: "リモートユーザーには非公開" _postForm: replyPlaceholder: "このノートに返信..." diff --git a/src/client/components/post-form.vue b/src/client/components/post-form.vue index ee6148a355..07f6f0b5d6 100644 --- a/src/client/components/post-form.vue +++ b/src/client/components/post-form.vue @@ -8,6 +8,7 @@
+ {{ max - trimmedLength(text) }} -
@@ -397,10 +397,12 @@ export default Vue.extend({ setVisibility() { const w = this.$root.new(MkVisibilityChooser, { source: this.$refs.visibilityButton, - currentVisibility: this.visibility + currentVisibility: this.visibility, + currentLocalOnly: this.localOnly }); - w.$once('chosen', v => { - this.applyVisibility(v); + w.$once('chosen', ({ visibility, localOnly }) => { + this.applyVisibility(visibility); + this.localOnly = localOnly; }); }, @@ -628,15 +630,9 @@ export default Vue.extend({ margin-left: 0 !important; } } - - > .localOnly { - height: 34px; - width: 34px; + + .local-only { margin: 0 8px; - - &.active { - color: var(--accent); - } } > .submit { diff --git a/src/client/components/visibility-chooser.vue b/src/client/components/visibility-chooser.vue index 0f7e37a088..75368cd60d 100644 --- a/src/client/components/visibility-chooser.vue +++ b/src/client/components/visibility-chooser.vue @@ -1,5 +1,5 @@ @@ -75,6 +95,11 @@ export default Vue.extend({ width: 240px; padding: 8px 0; + > .divider { + margin: 8px 0; + border-top: solid 1px var(--divider); + } + > button { display: flex; padding: 8px 14px; @@ -96,7 +121,12 @@ export default Vue.extend({ background: var(--accent); } - > *:first-child { + &.localOnly.active { + color: var(--accent); + background: inherit; + } + + > *:nth-child(1) { display: flex; justify-content: center; align-items: center; @@ -108,8 +138,11 @@ export default Vue.extend({ margin-bottom: auto; } - > *:last-child { + > *:nth-child(2) { flex: 1 1 auto; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; > span:first-child { display: block; @@ -120,6 +153,18 @@ export default Vue.extend({ opacity: 0.6; } } + + > *:nth-child(3) { + display: flex; + justify-content: center; + align-items: center; + margin-left: 10px; + width: 16px; + top: 0; + bottom: 0; + margin-top: auto; + margin-bottom: auto; + } } }