2 files changed, 107 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..e9ccdefc
--- /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..291236f2
--- /dev/null
+++ b/src/components/scope_selector/scope_selector.vue
@@ -0,0 +1,53 @@
+<template>
+  <div
+    v-if="!showNothing"
+    class="scope-selector"
+  >
+    <i
+      v-if="showDirect"
+      class="icon-mail-alt"
+      :class="css.direct"
+      :title="$t('post_status.scope.direct')"
+      @click="changeVis('direct')"
+    />
+    <i
+      v-if="showPrivate"
+      class="icon-lock"
+      :class="css.private"
+      :title="$t('post_status.scope.private')"
+      @click="changeVis('private')"
+    />
+    <i
+      v-if="showUnlisted"
+      class="icon-lock-open-alt"
+      :class="css.unlisted"
+      :title="$t('post_status.scope.unlisted')"
+      @click="changeVis('unlisted')"
+    />
+    <i
+      v-if="showPublic"
+      class="icon-globe"
+      :class="css.public"
+      :title="$t('post_status.scope.public')"
+      @click="changeVis('public')"
+    />
+  </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>