improve scope selector

src/components/post_status_form/post_status_form.scss

@@ -104,8 +104,8 @@
   .visibility-tray {
     display: flex;
     justify-content: space-between;
-    padding-top: 0.5em;
     align-items: baseline;
+    margin-left: -0.5em;
   }
 
   .visibility-notice {

src/components/scope_selector/scope_selector.js

@@ -14,13 +14,33 @@ library.add(
 )
 
 const ScopeSelector = {
-  props: [
-    'showAll',
-    'userDefault',
-    'originalScope',
-    'initialScope',
-    'onScopeChange'
-  ],
+  props: {
+    showAll: {
+      required: true,
+      type: Boolean
+    },
+    userDefault: {
+      required: true,
+      type: String
+    },
+    originalScope: {
+      required: false,
+      type: String
+    },
+    initialScope: {
+      required: false,
+      type: String
+    },
+    onScopeChange: {
+      required: true,
+      type: Function
+    },
+    unstyled: {
+      required: false,
+      type: Boolean,
+      default: true
+    }
+  },
   data () {
     return {
       currentScope: this.initialScope
@@ -43,11 +63,12 @@ const ScopeSelector = {
       return this.shouldShow('direct')
     },
     css () {
+      const style = this.unstyled ? 'button-unstyled' : 'button-default'
       return {
-        public: { toggled: this.currentScope === 'public' },
-        unlisted: { toggled: this.currentScope === 'unlisted' },
-        private: { toggled: this.currentScope === 'private' },
-        direct: { toggled: this.currentScope === 'direct' }
+        public: [style, { toggled: this.currentScope === 'public' }],
+        unlisted: [style, { toggled: this.currentScope === 'unlisted' }],
+        private: [style, { toggled: this.currentScope === 'private' }],
+        direct: [style, { toggled: this.currentScope === 'direct' }]
       }
     }
   },

src/components/scope_selector/scope_selector.vue

@@ -1,11 +1,11 @@
 <template>
   <div
     v-if="!showNothing"
-    class="ScopeSelector"
+    class="ScopeSelector btn-group"
   >
     <button
       v-if="showDirect"
-      class="button-unstyled scope"
+      class="scope"
       :class="css.direct"
       :title="$t('post_status.scope.direct')"
       type="button"
@@ -19,7 +19,7 @@
     {{ ' ' }}
     <button
       v-if="showPrivate"
-      class="button-unstyled scope"
+      class="scope"
       :class="css.private"
       :title="$t('post_status.scope.private')"
       type="button"
@@ -33,7 +33,7 @@
     {{ ' ' }}
     <button
       v-if="showUnlisted"
-      class="button-unstyled scope"
+      class="scope"
       :class="css.unlisted"
       :title="$t('post_status.scope.unlisted')"
       type="button"
@@ -47,7 +47,7 @@
     {{ ' ' }}
     <button
       v-if="showPublic"
-      class="button-unstyled scope"
+      class="scope"
       :class="css.public"
       :title="$t('post_status.scope.public')"
       type="button"
@@ -65,12 +65,14 @@
 
 <style lang="scss">
 .ScopeSelector {
+  display: inline-block;
+
   .scope {
     display: inline-block;
-    cursor: pointer;
     min-width: 1.3em;
     min-height: 1.3em;
     text-align: center;
+    padding: 0.5em 0.25em
   }
 }
 </style>