Place BlockButton into slot in FollowButtons

Author: roschaefer

components/Global/Elements/BlockButton/BlockButton.test.js

@@ -36,7 +36,7 @@ describe('BlockButton.vue', () => {
 
   test('renders', () => {
     wrapper = shallowMount(BlockButton, { store, localVue, propsData, mocks })
-    expect(wrapper.is('div')).toBeTruthy()
+    expect(wrapper.is('hc-button-stub')).toBeTruthy()
   })
 
   describe('request pending', () => {

components/Global/Elements/BlockButton/BlockButton.vue

@@ -1,19 +1,15 @@
 <template>
-  <div class="columns is-mobile field has-text-centered">
-    <div class="column control has-text-centered">
-      <hc-button color="button"
-                 :disabled="isPending"
-                 :isLoading="isPending"
-                 @click="click">
-        <template v-if="isBlacklisted()">
-          <hc-icon icon="ban" :class="['icon-left', 'is-danger']" /> {{ $t('component.blacklist.buttonLabelUnblock') }}
-        </template>
-        <template v-else>
-          <hc-icon icon="ban" class="icon-left" /> {{ $t('component.blacklist.buttonLabelBlock') }}
-        </template>
-      </hc-button>
-    </div>
-  </div>
+  <hc-button color="button"
+             :disabled="isPending"
+             :isLoading="isPending"
+             @click="click">
+    <template v-if="isBlacklisted()">
+      <hc-icon icon="ban" :class="['icon-left', 'is-danger']" /> {{ $t('component.blacklist.buttonLabelUnblock') }}
+    </template>
+    <template v-else>
+      <hc-icon icon="ban" class="icon-left" /> {{ $t('component.blacklist.buttonLabelBlock') }}
+    </template>
+  </hc-button>
 </template>
 <script>
 import Icon from '~/components/Global/Elements/Icon/Icon.vue'

components/Global/Elements/Follow/FollowButtons.vue

@@ -29,15 +29,8 @@
           </template>
         </hc-button>
       </div>
-      <div v-if="service === 'users'" class="column control has-text-centered" style="opacity: .25; pointer-events: none;">
-        <hc-button color="button" @click="toggleConnected" :disabled="true">
-          <template v-if="connected">
-            <hc-icon icon="user-times" class="icon-left" /> Trennen
-          </template>
-          <template v-else>
-            <hc-icon icon="user" class="icon-left" /> Verbinden
-          </template>
-        </hc-button>
+      <div v-if="service === 'users'" class="column is-mobile field has-text-centered">
+        <slot></slot>
       </div>
     </div>
   </div>
@@ -106,12 +99,6 @@
             })
           })
         }
-      },
-      toggleConnected () {
-        this.connected = !this.connected
-        this.$snackbar.open({
-          message: 'Connected!'
-        })
       }
     }
   }

pages/profile/_slug.vue

@@ -40,9 +40,10 @@
           </template>
           <hc-follow-buttons v-if="user"
                              :showButtons="!isOwner"
-                             :entity="user" />
+                             :entity="user">
+            <hc-block-button v-if="user && !isOwner" :foreignEntity="user" :confirmation="confirmUnfollow"/>
+          </hc-follow-buttons>
 
-          <hc-block-button v-if="user && !isOwner" :foreignEntity="user" :confirmation="confirmUnfollow"/>
           <div v-if="false" class="hc-shortcuts level under-construction">
             <!-- TODO: replace the cdn images with local hc icons -->
             <div class="level-item has-text-centered">