Merge branch 'mobile-scope' into 'develop'

Display additional scope description above the status form for mobile users.

Closes #505

See merge request pleroma/pleroma-fe!767

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);

src/components/post_status_form/post_status_form.js

@@ -182,6 +182,9 @@ const PostStatusForm = {
     },
     safeDMEnabled () {
       return this.$store.state.instance.safeDM
+    },
+    hideScopeNotice () {
+      return this.$store.state.config.hideScopeNotice
     }
   },
   methods: {
@@ -338,6 +341,9 @@ const PostStatusForm = {
     },
     changeVis (visibility) {
       this.newStatus.visibility = visibility
+    },
+    dismissScopeNotice () {
+      this.$store.dispatch('setOption', { name: 'hideScopeNotice', value: true })
     }
   }
 }

src/components/post_status_form/post_status_form.vue

@@ -9,7 +9,25 @@
         class="visibility-notice">
         <router-link :to="{ name: 'user-settings' }">{{ $t('post_status.account_not_locked_warning_link') }}</router-link>
       </i18n>
-      <p v-if="newStatus.visibility === 'direct'" 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()" class="button-icon dismiss">
+          <i class='icon-cancel'></i>
+        </a>
+      </p>
+      <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()" class="button-icon dismiss">
+          <i class='icon-cancel'></i>
+        </a>
+      </p>
+      <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()" class="button-icon dismiss">
+          <i class='icon-cancel'></i>
+        </a>
+      </p>
+      <p v-else-if="newStatus.visibility === 'direct'" class="visibility-notice">
         <span v-if="safeDMEnabled">{{ $t('post_status.direct_warning_to_first_only') }}</span>
         <span v-else>{{ $t('post_status.direct_warning_to_all') }}</span>
       </p>

src/i18n/en.json

@@ -94,6 +94,11 @@
     "direct_warning_to_all": "This post will be visible to all the mentioned users.",
     "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": "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",
       "private": "Followers-only - Post to followers only",

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": "Для подписчиков - этот пост видят только подписчики",

src/modules/config.js

@@ -31,6 +31,7 @@ const defaultState = {
   muteWords: [],
   highlight: {},
   interfaceLanguage: browserLocale,
+  hideScopeNotice: false,
   scopeCopy: undefined, // instance default
   subjectLineBehavior: undefined, // instance default
   alwaysShowSubjectInput: undefined, // instance default