Merge remote-tracking branch 'upstream/develop' into docs

* upstream/develop: (374 commits)
  fix typo
  rename mutations according to actual property names
  fix
  fix
  fix logged out post-update
  fix user banner
  fix
  AMERICA
  comments
  No longer sending extra data, renamed some properties
  Revert "add TOTP/Recovery Form for mobile version"
  Apply suggestion to src/services/entity_normalizer/entity_normalizer.service.js
  i18n/Update Japanese translation
  render modal at the root level using portal
  install portal vue
  Small improve of the who to follow panel layout
  Fix/Small fix in the who to follow page
  remove console spam
  i18n
  wire up user.description with masto api data
  ...

2 files changed, 57 insertions, 23 deletions

diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index 229aefb7..cbd2024a 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -1,5 +1,6 @@
 import statusPoster from '../../services/status_poster/status_poster.service.js'
 import MediaUpload from '../media_upload/media_upload.vue'
+import ScopeSelector from '../scope_selector/scope_selector.vue'
 import EmojiInput from '../emoji-input/emoji-input.vue'
 import fileTypeService from '../../services/file_type/file_type.service.js'
 import Completion from '../../services/completion/completion.js'
@@ -30,6 +31,7 @@ const PostStatusForm = {
   ],
   components: {
     MediaUpload,
+    ScopeSelector,
     EmojiInput
   },
   mounted () {
@@ -80,14 +82,6 @@ const PostStatusForm = {
     }
   },
   computed: {
-    vis () {
-      return {
-        public: { selected: this.newStatus.visibility === 'public' },
-        unlisted: { selected: this.newStatus.visibility === 'unlisted' },
-        private: { selected: this.newStatus.visibility === 'private' },
-        direct: { selected: this.newStatus.visibility === 'direct' }
-      }
-    },
     candidates () {
       const firstchar = this.textAtCaret.charAt(0)
       if (firstchar === '@') {
@@ -135,6 +129,15 @@ const PostStatusForm = {
     users () {
       return this.$store.state.users.users
     },
+    userDefaultScope () {
+      return this.$store.state.users.currentUser.default_scope
+    },
+    showAllScopes () {
+      const minimalScopesMode = typeof this.$store.state.config.minimalScopesMode === 'undefined'
+            ? this.$store.state.instance.minimalScopesMode
+            : this.$store.state.config.minimalScopesMode
+      return !minimalScopesMode
+    },
     emoji () {
       return this.$store.state.instance.emoji || []
     },
@@ -159,8 +162,8 @@ const PostStatusForm = {
     isOverLengthLimit () {
       return this.hasStatusLengthLimit && (this.charactersLeft < 0)
     },
-    scopeOptionsEnabled () {
-      return this.$store.state.instance.scopeOptionsEnabled
+    minimalScopesMode () {
+      return this.$store.state.instance.minimalScopesMode
     },
     alwaysShowSubject () {
       if (typeof this.$store.state.config.alwaysShowSubjectInput !== 'undefined') {
@@ -168,7 +171,7 @@ const PostStatusForm = {
       } else if (typeof this.$store.state.instance.alwaysShowSubjectInput !== 'undefined') {
         return this.$store.state.instance.alwaysShowSubjectInput
       } else {
-        return this.$store.state.instance.scopeOptionsEnabled
+        return true
       }
     },
     formattingOptionsEnabled () {
@@ -176,6 +179,12 @@ const PostStatusForm = {
     },
     postFormats () {
       return this.$store.state.instance.postFormats || []
+    },
+    safeDMEnabled () {
+      return this.$store.state.instance.safeDM
+    },
+    hideScopeNotice () {
+      return this.$store.state.config.hideScopeNotice
     }
   },
   methods: {
@@ -332,6 +341,9 @@ const PostStatusForm = {
     },
     changeVis (visibility) {
       this.newStatus.visibility = 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 9f9f16ba..25c5284f 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -3,13 +3,34 @@
   <form @submit.prevent="postStatus(newStatus)">
     <div class="form-group" >
       <i18n
-        v-if="!this.$store.state.users.currentUser.locked && this.newStatus.visibility == 'private'"
+        v-if="!$store.state.users.currentUser.locked && newStatus.visibility == 'private'"
         path="post_status.account_not_locked_warning"
         tag="p"
         class="visibility-notice">
         <router-link :to="{ name: 'user-settings' }">{{ $t('post_status.account_not_locked_warning_link') }}</router-link>
       </i18n>
-      <p v-if="this.newStatus.visibility == 'direct'" class="visibility-notice">{{ $t('post_status.direct_warning') }}</p>
+      <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>
       <EmojiInput
         v-if="newStatus.spoilerText || alwaysShowSubject"
         type="text"
@@ -37,7 +58,7 @@
       >
       </textarea>
       <div class="visibility-tray">
-        <span class="text-format" v-if="formattingOptionsEnabled">
+        <div class="text-format" v-if="formattingOptionsEnabled">
           <label for="post-content-type" class="select">
             <select id="post-content-type" v-model="newStatus.contentType" class="form-control">
               <option v-for="postFormat in postFormats" :key="postFormat" :value="postFormat">
@@ -46,14 +67,14 @@
             </select>
             <i class="icon-down-open"></i>
           </label>
-        </span>
-
-        <div v-if="scopeOptionsEnabled">
-          <i v-on:click="changeVis('direct')" class="icon-mail-alt" :class="vis.direct" :title="$t('post_status.scope.direct')"></i>
-          <i v-on:click="changeVis('private')" class="icon-lock" :class="vis.private" :title="$t('post_status.scope.private')"></i>
-          <i v-on:click="changeVis('unlisted')" class="icon-lock-open-alt" :class="vis.unlisted" :title="$t('post_status.scope.unlisted')"></i>
-          <i v-on:click="changeVis('public')" class="icon-globe" :class="vis.public" :title="$t('post_status.scope.public')"></i>
         </div>
+
+        <scope-selector
+          :showAll="showAllScopes"
+          :userDefault="userDefaultScope"
+          :originalScope="copyMessageScope"
+          :initialScope="newStatus.visibility"
+          :onScopeChange="changeVis"/>
       </div>
     </div>
     <div class="autocomplete-panel" v-if="candidates">
@@ -131,10 +152,11 @@
     display: flex;
     justify-content: space-between;
     flex-direction: row-reverse;
+    padding-top: 5px;
   }
 }
 
-.post-status-form, .login {
+.post-status-form {
   .form-bottom {
     display: flex;
     padding: 0.5em;
@@ -229,7 +251,7 @@
   .form-group {
     display: flex;
     flex-direction: column;
-    padding: 0.3em 0.5em 0.6em;
+    padding: 0.25em 0.5em 0.5em;
     line-height:24px;
   }