crt's compose box changes

src/components/post_status_form/post_status_form.js

@@ -46,6 +46,12 @@ const PostStatusForm = {
       error: null,
       posting: false,
       highlighted: 0,
+      vis: {
+        public: { 'icon-globe': true, big: true, selected: true },
+        unlisted: { 'icon-lock-open-alt': true, big: true, selected: false },
+        private: { 'icon-lock': true, big: true, selected: false },
+        direct: { 'icon-mail-alt': true, big: true, selected: false }
+      },
       newStatus: {
         status: statusText,
         files: []
@@ -170,6 +176,7 @@ const PostStatusForm = {
       this.caret = selectionStart
     },
     postStatus (newStatus) {
+      console.log(newStatus);
       if (this.posting) { return }
       if (this.submitDisabled) { return }
 
@@ -185,6 +192,8 @@ const PostStatusForm = {
       this.posting = true
       statusPoster.postStatus({
         status: newStatus.status,
+        spoilerText: newStatus.spoilerText || undefined,
+        visibility: newStatus.visibility,
         media: newStatus.files,
         store: this.$store,
         inReplyToStatusId: this.replyTo
@@ -198,6 +207,9 @@ const PostStatusForm = {
           let el = this.$el.querySelector('textarea')
           el.style.height = '16px'
           this.error = null
+          
+          Object.keys(this.vis).forEach(x => this.vis[x].selected = false)
+          this.vis.public.selected = true
         } else {
           this.error = data.error
         }
@@ -249,6 +261,11 @@ const PostStatusForm = {
     },
     clearError () {
       this.error = null
+    },
+    changeVis (visibility) {
+      console.log(visibility)
+      Object.keys(this.vis).forEach(x => this.vis[x].selected = x == visibility)
+      this.newStatus.visibility = visibility
     }
   }
 }

src/components/post_status_form/post_status_form.vue

@@ -2,6 +2,11 @@
 <div class="post-status-form">
   <form @submit.prevent="postStatus(newStatus)">
     <div class="form-group" >
+      <input
+        type="text"
+        placeholder="Content warning (optional)"
+        v-model="newStatus.spoilerText"
+        class="form-cw">
       <textarea
         ref="textarea"
         @click="setCaret"
@@ -18,6 +23,12 @@
         @input="resize"
         @paste="paste">
       </textarea>
+      <div class="visibility-tray">
+        <i v-on:click="changeVis('direct')" v-bind:class="vis.direct"></i>
+        <i v-on:click="changeVis('private')" v-bind:class="vis.private"></i>
+        <i v-on:click="changeVis('unlisted')" v-bind:class="vis.unlisted"></i>
+        <i v-on:click="changeVis('public')" v-bind:class="vis.public"></i>
+      </div>
     </div>
     <div style="position:relative;" v-if="candidates">
         <div class="autocomplete-panel">
@@ -143,7 +154,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;
@@ -152,7 +171,7 @@
     box-sizing: content-box;
   }
 
-  form textarea:focus {
+  form textarea.form-control:focus {
     min-height: 48px;
   }
 

src/services/api/api.service.js

@@ -331,12 +331,14 @@ const retweet = ({ id, credentials }) => {
   })
 }
 
-const postStatus = ({credentials, status, mediaIds, inReplyToStatusId}) => {
+const postStatus = ({credentials, status, spoilerText, visibility, mediaIds, inReplyToStatusId}) => {
   const idsText = mediaIds.join(',')
   const form = new FormData()
 
   form.append('status', status)
   form.append('source', 'Pleroma FE')
+  if (spoilerText) form.append('spoiler_text', spoilerText)
+  if (visibility) form.append('visibility', visibility)
   form.append('media_ids', idsText)
   if (inReplyToStatusId) {
     form.append('in_reply_to_status_id', inReplyToStatusId)

src/services/status_poster/status_poster.service.js

@@ -1,10 +1,10 @@
 import { map } from 'lodash'
 import apiService from '../api/api.service.js'
 
-const postStatus = ({ store, status, media = [], inReplyToStatusId = undefined }) => {
+const postStatus = ({ store, status, spoilerText, visibility, media = [], inReplyToStatusId = undefined }) => {
   const mediaIds = map(media, 'id')
 
-  return apiService.postStatus({credentials: store.state.users.currentUser.credentials, status, mediaIds, inReplyToStatusId})
+  return apiService.postStatus({credentials: store.state.users.currentUser.credentials, status, spoilerText, visibility, mediaIds, inReplyToStatusId})
     .then((data) => data.json())
     .then((data) => {
       if (!data.error) {