Use more clear explanation in the scope notice, make sure the hide button doesn't overlap with text in notice.

7 files changed, 30 insertions, 18 deletions

diff --git a/src/App.scss b/src/App.scss
index 921f2c3b..2729e0b0 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -648,6 +648,19 @@ nav {
   border-radius: var(--inputRadius, $fallback--inputRadius);
 }
 
+.notice-dismissible {
+  padding-right: 4rem;
+  position: relative;
+
+  .dismiss {
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: .5em;
+    color: inherit;
+  }
+}
+
 @keyframes modal-background-fadein {
   from {
     background-color: rgba(0, 0, 0, 0);
diff --git a/src/components/mobile_post_status_modal/mobile_post_status_modal.js b/src/components/mobile_post_status_modal/mobile_post_status_modal.js
index eb665b8d..2f24dd08 100644
--- a/src/components/mobile_post_status_modal/mobile_post_status_modal.js
+++ b/src/components/mobile_post_status_modal/mobile_post_status_modal.js
@@ -12,8 +12,7 @@ const MobilePostStatusModal = {
       scrollingDown: false,
       inputActive: false,
       oldScrollPos: 0,
-      amountScrolled: 0,
-      visibility: this.$store.state.users.currentUser.default_scope
+      amountScrolled: 0
     }
   },
   created () {
@@ -33,9 +32,6 @@ const MobilePostStatusModal = {
     }
   },
   methods: {
-    onScopeChange (visibility) {
-      this.visibility = visibility
-    },
     openPostForm () {
       this.postFormOpen = true
       this.hidden = true
diff --git a/src/components/mobile_post_status_modal/mobile_post_status_modal.vue b/src/components/mobile_post_status_modal/mobile_post_status_modal.vue
index c3cc5155..c762705b 100644
--- a/src/components/mobile_post_status_modal/mobile_post_status_modal.vue
+++ b/src/components/mobile_post_status_modal/mobile_post_status_modal.vue
@@ -7,7 +7,7 @@
   >
     <div class="post-form-modal-panel panel" @click.stop="">
       <div class="panel-heading">{{$t('post_status.new_status')}}</div>
-      <PostStatusForm class="panel-body" @posted="closePostForm" @onScopeChange="onScopeChange" />
+      <PostStatusForm class="panel-body" @posted="closePostForm" />
     </div>
   </div>
   <button
diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index 998794bf..cbd2024a 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -341,7 +341,6 @@ const PostStatusForm = {
     },
     changeVis (visibility) {
       this.newStatus.visibility = visibility
-      this.$emit('onScopeChange', visibility)
     },
     dismissScopeNotice () {
       this.$store.dispatch('setOption', { name: 'hideScopeNotice', value: true })
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 15a466ec..b8b93936 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -9,21 +9,21 @@
         class="visibility-notice">
         <router-link :to="{ name: 'user-settings' }">{{ $t('post_status.account_not_locked_warning_link') }}</router-link>
       </i18n>
-      <p v-if="!hideScopeNotice && newStatus.visibility === 'public'" class="visibility-notice">
+      <p v-if="!hideScopeNotice && newStatus.visibility === 'public'" class="visibility-notice notice-dismissible">
         <span>{{ $t('post_status.scope_notice.public') }}</span>
-        <a v-on:click.prevent="dismissScopeNotice()" style="float: right" class="button-icon">
+        <a v-on:click.prevent="dismissScopeNotice()" class="button-icon dismiss">
           <i class='icon-cancel'></i>
         </a>
       </p>
-      <p v-else-if="!hideScopeNotice && newStatus.visibility === 'unlisted'" class="visibility-notice">
+      <p v-else-if="!hideScopeNotice && newStatus.visibility === 'unlisted'" class="visibility-notice notice-dismissible">
         <span>{{ $t('post_status.scope_notice.unlisted') }}</span>
-        <a v-on:click.prevent="dismissScopeNotice()" style="float: right" class="button-icon">
+        <a v-on:click.prevent="dismissScopeNotice()" class="button-icon dismiss">
           <i class='icon-cancel'></i>
         </a>
       </p>
-      <p v-else-if="!hideScopeNotice && newStatus.visibility === 'private'" class="visibility-notice">
+      <p v-else-if="!hideScopeNotice && newStatus.visibility === 'private' && $store.state.users.currentUser.locked" class="visibility-notice notice-dismissible">
         <span>{{ $t('post_status.scope_notice.private') }}</span>
-        <a v-on:click.prevent="dismissScopeNotice()" style="float: right" class="button-icon">
+        <a v-on:click.prevent="dismissScopeNotice()" class="button-icon dismiss">
           <i class='icon-cancel'></i>
         </a>
       </p>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index f98fa034..6847646c 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -95,10 +95,9 @@
     "direct_warning_to_first_only": "This post will only be visible to the mentioned users at the beginning of the message.",
     "posting": "Posting",
     "scope_notice": {
-      "public": "Post to public timelines",
-      "private": "Post to followers only",
-      "unlisted": "Do not post to public timelines",
-      "direct": "Post to mentioned users only"
+      "public": "This post will be visible to everyone",
+      "private": "This post will be visible to your followers only",
+      "unlisted": "This post will not be visible in Public Timeline and The Whole Known Network"
     },
     "scope": {
       "direct": "Direct - Post to mentioned users only",
diff --git a/src/i18n/ru.json b/src/i18n/ru.json
index 5450f154..c4a55293 100644
--- a/src/i18n/ru.json
+++ b/src/i18n/ru.json
@@ -42,8 +42,13 @@
     "attachments_sensitive": "Вложения содержат чувствительный контент",
     "content_warning": "Тема (не обязательно)",
     "default": "Что нового?",
-    "direct_warning": "Этот пост будет видет только упомянутым пользователям",
+    "direct_warning": "Этот пост будет виден только упомянутым пользователям",
     "posting": "Отправляется",
+    "scope_notice": {
+      "public": "Этот пост будет виден всем",
+      "private": "Этот пост будет виден только вашим подписчикам",
+      "unlisted": "Этот пост не будет виден в публичной и федеративной ленте"
+    },
     "scope": {
       "direct": "Личное - этот пост видят только те кто в нём упомянут",
       "private": "Для подписчиков - этот пост видят только подписчики",