From 265d6bda155696c23b3e932fb220871297758ba6 Mon Sep 17 00:00:00 2001 From: Xeltica <7106976+Xeltica@users.noreply.github.com> Date: Thu, 4 Jun 2020 22:06:38 +0900 Subject: [PATCH] =?UTF-8?q?=E3=83=AD=E3=83=BC=E3=82=AB=E3=83=AB=E3=81=AE?= =?UTF-8?q?=E3=81=BF=E3=83=9C=E3=82=BF=E3=83=B3=E3=82=92=E5=85=AC=E9=96=8B?= =?UTF-8?q?=E7=AF=84=E5=9B=B2=E3=83=94=E3=83=83=E3=82=AB=E3=83=BC=E3=81=AB?= =?UTF-8?q?=E7=B5=B1=E5=90=88=20(#6428)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * ローカルのみを公開範囲ピッカーに統合 * デザイン調整 * :art: Co-authored-by: syuilo --- locales/ja-JP.yml | 1 + src/client/components/post-form.vue | 20 +++---- src/client/components/visibility-chooser.vue | 59 +++++++++++++++++--- 3 files changed, 61 insertions(+), 19 deletions(-) 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; + } } }