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 @@
@@ -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 @@
- { $emit('closed'); destroyDom(); }">
+
-
@@ -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;
+ }
}
}