2 files changed, 100 insertions, 0 deletions
diff --git a/src/components/scope_selector/scope_selector.js b/src/components/scope_selector/scope_selector.js
new file mode 100644
index 00000000..8a42ee7b
--- /dev/null
+++ b/src/components/scope_selector/scope_selector.js
@@ -0,0 +1,54 @@
+const ScopeSelector = {
+  props: [
+    'showAll',
+    'userDefault',
+    'originalScope',
+    'initialScope',
+    'onScopeChange'
+  ],
+  data () {
+    return {
+      currentScope: this.initialScope
+    }
+  },
+  computed: {
+    showNothing () {
+      return !this.showPublic && !this.showUnlisted && !this.showPrivate && !this.showDirect
+    },
+    showPublic () {
+      return this.originalScope !== 'direct' && this.shouldShow('public')
+    },
+    showUnlisted () {
+      return this.originalScope !== 'direct' && this.shouldShow('unlisted')
+    },
+    showPrivate () {
+      return this.originalScope !== 'direct' && this.shouldShow('private')
+    },
+    showDirect () {
+      return this.shouldShow('direct')
+    },
+    css () {
+      return {
+        public: {selected: this.currentScope === 'public'},
+        unlisted: {selected: this.currentScope === 'unlisted'},
+        private: {selected: this.currentScope === 'private'},
+        direct: {selected: this.currentScope === 'direct'}
+      }
+    }
+  },
+  methods: {
+    shouldShow (scope) {
+      return this.showAll ||
+        this.currentScope === scope ||
+        this.originalScope === scope ||
+        this.userDefault === scope ||
+        scope === 'direct'
+    },
+    changeVis (scope) {
+      this.currentScope = scope
+      this.onScopeChange && this.onScopeChange(scope)
+    }
+  }
+}
+
+export default ScopeSelector
diff --git a/src/components/scope_selector/scope_selector.vue b/src/components/scope_selector/scope_selector.vue
new file mode 100644
index 00000000..5ebb5d56
--- /dev/null
+++ b/src/components/scope_selector/scope_selector.vue
@@ -0,0 +1,46 @@
+<template>
+<div v-if="!showNothing" class="scope-selector">
+  <i class="icon-mail-alt"
+     :class="css.direct"
+     :title="$t('post_status.scope.direct')"
+     v-if="showDirect"
+     @click="changeVis('direct')">
+  </i>
+  <i class="icon-lock"
+     :class="css.private"
+     :title="$t('post_status.scope.private')"
+     v-if="showPrivate"
+     v-on:click="changeVis('private')">
+  </i>
+  <i class="icon-lock-open-alt"
+     :class="css.unlisted"
+     :title="$t('post_status.scope.unlisted')"
+     v-if="showUnlisted"
+     @click="changeVis('unlisted')">
+  </i>
+  <i class="icon-globe"
+     :class="css.public"
+     :title="$t('post_status.scope.public')"
+     v-if="showPublic"
+     @click="changeVis('public')">
+  </i>
+</div>
+</template>
+
+<script src="./scope_selector.js"></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+
+.scope-selector {
+  i {
+    font-size: 1.2em;
+    cursor: pointer;
+
+    &.selected {
+      color: $fallback--lightText;
+      color: var(--lightText, $fallback--lightText);
+    }
+  }
+}
+</style>