Merge branch 'develop' into 'patch-1'

# Conflicts:
#   src/i18n/messages.js

2 files changed, 68 insertions, 24 deletions

diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index 6bcf1c66..0597d652 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -48,12 +48,21 @@ const PostStatusForm = {
       highlighted: 0,
       newStatus: {
         status: statusText,
-        files: []
+        files: [],
+        visibility: 'public'
       },
       caret: 0
     }
   },
   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 === '@') {
@@ -118,6 +127,9 @@ const PostStatusForm = {
     },
     isOverLengthLimit () {
       return this.hasStatusLengthLimit && (this.statusLength > this.statusLengthLimit)
+    },
+    scopeOptionsEnabled () {
+      return this.$store.state.config.scopeOptionsEnabled
     }
   },
   methods: {
@@ -185,6 +197,8 @@ const PostStatusForm = {
       this.posting = true
       statusPoster.postStatus({
         status: newStatus.status,
+        spoilerText: newStatus.spoilerText || null,
+        visibility: newStatus.visibility,
         media: newStatus.files,
         store: this.$store,
         inReplyToStatusId: this.replyTo
@@ -192,7 +206,8 @@ const PostStatusForm = {
         if (!data.error) {
           this.newStatus = {
             status: '',
-            files: []
+            files: [],
+            visibility: newStatus.visibility
           }
           this.$emit('posted')
           let el = this.$el.querySelector('textarea')
@@ -239,18 +254,20 @@ const PostStatusForm = {
       e.dataTransfer.dropEffect = 'copy'
     },
     resize (e) {
-      const target = e.target || e
-      target.style.height = 'auto'
-      const heightPx = target.scrollHeight - 10
-      if (heightPx > 54) {
-        target.style.height = `${target.scrollHeight - 10}px`
-      }
-      if (target.value === '') {
-        target.style.height = '16px'
+      if (!e.target) { return }
+      const vertPadding = Number(window.getComputedStyle(e.target)['padding-top'].substr(0, 1)) +
+            Number(window.getComputedStyle(e.target)['padding-bottom'].substr(0, 1))
+      e.target.style.height = 'auto'
+      e.target.style.height = `${e.target.scrollHeight - vertPadding}px`
+      if (e.target.value === '') {
+        e.target.style.height = '16px'
       }
     },
     clearError () {
       this.error = null
+    },
+    changeVis (visibility) {
+      this.newStatus.visibility = visibility
     }
   }
 }
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 88627e3a..802d51ed 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -2,6 +2,12 @@
 <div class="post-status-form">
   <form @submit.prevent="postStatus(newStatus)">
     <div class="form-group" >
+      <input
+        v-if="scopeOptionsEnabled"
+        type="text"
+        :placeholder="$t('post_status.content_warning')"
+        v-model="newStatus.spoilerText"
+        class="form-cw">
       <textarea
         ref="textarea"
         @click="setCaret"
@@ -18,16 +24,17 @@
         @input="resize"
         @paste="paste">
       </textarea>
+      <div v-if="scopeOptionsEnabled" class="visibility-tray">
+        <i v-on:click="changeVis('direct')" class="icon-mail-alt" :class="vis.direct"></i>
+        <i v-on:click="changeVis('private')" class="icon-lock" :class="vis.private"></i>
+        <i v-on:click="changeVis('unlisted')" class="icon-lock-open-alt" :class="vis.unlisted"></i>
+        <i v-on:click="changeVis('public')" class="icon-globe" :class="vis.public"></i>
+      </div>
     </div>
     <div style="position:relative;" v-if="candidates">
         <div class="autocomplete-panel">
           <div v-for="candidate in candidates" @click="replace(candidate.utf || (candidate.screen_name + ' '))">
-            <div v-if="candidate.highlighted" class="autocomplete">
-              <span v-if="candidate.img"><img :src="candidate.img"></span>
-              <span v-else>{{candidate.utf}}</span>
-              <span>{{candidate.screen_name}}<small>{{candidate.name}}</small></span>
-            </div>
-            <div v-else class="autocomplete">
+            <div class="autocomplete" :class="{ highlighted: candidate.highlighted }">
               <span v-if="candidate.img"><img :src="candidate.img"></img></span>
               <span v-else>{{candidate.utf}}</span>
               <span>{{candidate.screen_name}}<small>{{candidate.name}}</small></span>
@@ -84,6 +91,17 @@
   }
 }
 
+.post-status-form .visibility-tray {
+  font-size: 1.2em;
+  padding: 3px;
+  cursor: pointer;
+
+  .selected {
+    color: $fallback--lightFg;
+    color: var(--lightFg, $fallback--lightFg);
+  }
+}
+
 .post-status-form, .login {
   .form-bottom {
     display: flex;
@@ -135,10 +153,6 @@
     cursor: not-allowed;
   }
 
-  .icon-cancel {
-    cursor: pointer;
-  }
-
   form {
     display: flex;
     flex-direction: column;
@@ -152,7 +166,15 @@
     line-height:24px;
   }
 
-  form textarea {
+  form textarea.form-cw {
+    line-height:16px;
+    resize: none;
+    overflow: hidden;
+    transition: min-height 200ms 100ms;
+    min-height: 1px;
+  }
+
+  form textarea.form-control {
     line-height:16px;
     resize: none;
     overflow: hidden;
@@ -161,7 +183,7 @@
     box-sizing: content-box;
   }
 
-  form textarea:focus {
+  form textarea.form-control:focus {
     min-height: 48px;
   }
 
@@ -186,8 +208,8 @@
     z-index: 1;
     box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
     min-width: 75%;
-    background: $fallback--btn;
-    background: var(--btn, $fallback--btn);
+    background: $fallback--bg;
+    background: var(--bg, $fallback--bg);
     color: $fallback--lightFg;
     color: var(--lightFg, $fallback--lightFg);
   }
@@ -216,6 +238,11 @@
       color: $fallback--faint;
       color: var(--faint, $fallback--faint);
     }
+
+    &.highlighted {
+      background-color: $fallback--btn;
+      background-color: var(--btn, $fallback--btn);
+    }
   }
 }
 </style>