Make scope options optional, refactoring.

3 files changed, 35 insertions, 19 deletions

diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index cc08c8a2..0597d652 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -46,20 +46,23 @@ const PostStatusForm = {
       error: null,
       posting: false,
       highlighted: 0,
-      vis: {
-        public: { icon: 'icon-globe', big: true, selected: true },
-        unlisted: { icon: 'icon-lock-open-alt', big: true, selected: false },
-        private: { icon: 'icon-lock', big: true, selected: false },
-        direct: { icon: 'icon-mail-alt', big: true, selected: false }
-      },
       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 === '@') {
@@ -124,6 +127,9 @@ const PostStatusForm = {
     },
     isOverLengthLimit () {
       return this.hasStatusLengthLimit && (this.statusLength > this.statusLengthLimit)
+    },
+    scopeOptionsEnabled () {
+      return this.$store.state.config.scopeOptionsEnabled
     }
   },
   methods: {
@@ -200,15 +206,13 @@ const PostStatusForm = {
         if (!data.error) {
           this.newStatus = {
             status: '',
-            files: []
+            files: [],
+            visibility: newStatus.visibility
           }
           this.$emit('posted')
           let el = this.$el.querySelector('textarea')
           el.style.height = '16px'
           this.error = null
-
-          for (key in Object.keys(this.vis)) { this.vis[key].selected = false }
-          this.vis.public.selected = true
         } else {
           this.error = data.error
         }
@@ -250,6 +254,7 @@ const PostStatusForm = {
       e.dataTransfer.dropEffect = 'copy'
     },
     resize (e) {
+      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'
@@ -262,8 +267,6 @@ const PostStatusForm = {
       this.error = null
     },
     changeVis (visibility) {
-      console.log(visibility)
-      Object.keys(this.vis).forEach(function (x) { this.vis[x].selected = x === 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 dbd11a19..802d51ed 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -3,6 +3,7 @@
   <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"
@@ -23,11 +24,11 @@
         @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 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">
@@ -90,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;
diff --git a/src/main.js b/src/main.js
index 3c4a072b..0c964dcc 100644
--- a/src/main.js
+++ b/src/main.js
@@ -88,7 +88,7 @@ window.fetch('/api/statusnet/config.json')
 window.fetch('/static/config.json')
   .then((res) => res.json())
   .then((data) => {
-    const {theme, background, logo, showWhoToFollowPanel, whoToFollowProvider, whoToFollowLink, showInstanceSpecificPanel} = data
+    const {theme, background, logo, showWhoToFollowPanel, whoToFollowProvider, whoToFollowLink, showInstanceSpecificPanel, scopeOptionsEnabled} = data
     store.dispatch('setOption', { name: 'theme', value: theme })
     store.dispatch('setOption', { name: 'background', value: background })
     store.dispatch('setOption', { name: 'logo', value: logo })
@@ -96,6 +96,7 @@ window.fetch('/static/config.json')
     store.dispatch('setOption', { name: 'whoToFollowProvider', value: whoToFollowProvider })
     store.dispatch('setOption', { name: 'whoToFollowLink', value: whoToFollowLink })
     store.dispatch('setOption', { name: 'showInstanceSpecificPanel', value: showInstanceSpecificPanel })
+    store.dispatch('setOption', { name: 'scopeOptionsEnabled', value: scopeOptionsEnabled })
     if (data['chatDisabled']) {
       store.dispatch('disableChat')
     }