From c565076fac3c597f1b49f70e47c674a7056b0649 Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Wed, 9 Oct 2019 17:03:35 +0200
Subject: [PATCH] Fix participants panel icons and improve tabs

Close #198

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
 js/src/views/Event/Participants.vue | 105 ++++++++++++++++------------
 1 file changed, 60 insertions(+), 45 deletions(-)

diff --git a/js/src/views/Event/Participants.vue b/js/src/views/Event/Participants.vue
index df7342a4e..3e72ccc6b 100644
--- a/js/src/views/Event/Participants.vue
+++ b/js/src/views/Event/Participants.vue
@@ -3,60 +3,66 @@
         <b-tabs type="is-boxed" v-if="event">
             <b-tab-item>
                 <template slot="header">
-                    <b-icon icon="information-outline"></b-icon>
+                    <b-icon icon="account-multiple"></b-icon>
                     <span>{{ $t('Participants')}} <b-tag rounded> {{ participantStats.approved }} </b-tag> </span>
                 </template>
-                <section v-if="participantsAndCreators.length > 0">
-                    <h2 class="title">{{ $t('Participants') }}</h2>
-                    <div class="columns">
-                        <div class="column is-one-quarter-desktop" v-for="participant in participantsAndCreators" :key="participant.actor.id">
-                            <participant-card
-                                :participant="participant"
-                                :accept="acceptParticipant"
-                                :reject="refuseParticipant"
-                                :exclude="refuseParticipant"
-                            />
-                        </div>
-                    </div>
-                </section>
+                <template>
+                  <section v-if="participantsAndCreators.length > 0">
+                      <h2 class="title">{{ $t('Participants') }}</h2>
+                      <div class="columns">
+                          <div class="column is-one-quarter-desktop" v-for="participant in participantsAndCreators" :key="participant.actor.id">
+                              <participant-card
+                                  :participant="participant"
+                                  :accept="acceptParticipant"
+                                  :reject="refuseParticipant"
+                                  :exclude="refuseParticipant"
+                              />
+                          </div>
+                      </div>
+                  </section>
+                </template>
             </b-tab-item>
-            <b-tab-item>
+            <b-tab-item :disabled="participantStats.unapproved === 0">
                 <template slot="header">
-                    <b-icon icon="source-pull"></b-icon>
+                    <b-icon icon="account-multiple-plus"></b-icon>
                     <span>{{ $t('Requests') }} <b-tag rounded> {{ participantStats.unapproved }} </b-tag> </span>
                 </template>
-                <section v-if="queue.length > 0">
-                    <h2 class="title">{{ $t('Waiting list') }}</h2>
-                    <div class="columns">
-                        <div class="column is-one-quarter-desktop" v-for="participant in queue" :key="participant.actor.id">
-                            <participant-card
-                                :participant="participant"
-                                :accept="acceptParticipant"
-                                :reject="refuseParticipant"
-                                :exclude="refuseParticipant"
-                            />
-                        </div>
-                    </div>
-                </section>
+                <template>
+                  <section v-if="queue.length > 0">
+                      <h2 class="title">{{ $t('Waiting list') }}</h2>
+                      <div class="columns">
+                          <div class="column is-one-quarter-desktop" v-for="participant in queue" :key="participant.actor.id">
+                              <participant-card
+                                  :participant="participant"
+                                  :accept="acceptParticipant"
+                                  :reject="refuseParticipant"
+                                  :exclude="refuseParticipant"
+                              />
+                          </div>
+                      </div>
+                  </section>
+                </template>
             </b-tab-item>
-            <b-tab-item>
+            <b-tab-item :disabled="participantStats.rejected === 0">
                 <template slot="header">
-                    <b-icon icon="source-pull"></b-icon>
+                    <b-icon icon="account-multiple-minus"></b-icon>
                     <span>{{ $t('Rejected')}} <b-tag rounded> {{ participantStats.rejected }} </b-tag> </span>
                 </template>
-                <section v-if="rejected.length > 0">
-                    <h2 class="title">{{ $t('Rejected participations') }}</h2>
-                    <div class="columns">
-                        <div class="column is-one-quarter-desktop" v-for="participant in rejected" :key="participant.actor.id">
-                            <participant-card
-                                    :participant="participant"
-                                    :accept="acceptParticipant"
-                                    :reject="refuseParticipant"
-                                    :exclude="refuseParticipant"
-                            />
-                        </div>
-                    </div>
-                </section>
+                <template>
+                  <section v-if="rejected.length > 0">
+                      <h2 class="title">{{ $t('Rejected participations') }}</h2>
+                      <div class="columns">
+                          <div class="column is-one-quarter-desktop" v-for="participant in rejected" :key="participant.actor.id">
+                              <participant-card
+                                      :participant="participant"
+                                      :accept="acceptParticipant"
+                                      :reject="refuseParticipant"
+                                      :exclude="refuseParticipant"
+                              />
+                          </div>
+                      </div>
+                  </section>
+                </template>
             </b-tab-item>
         </b-tabs>
     </main>
@@ -231,6 +237,15 @@ export default class Participants extends Vue {
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style lang="scss" scoped>
     section {
-        padding: 3rem 0;
+        padding: 1rem 0;
     }
 </style>
+<style lang="scss">
+  nav.tabs li {
+    margin: 3rem 0 0;
+  }
+
+  .tab-content {
+    background: #fff;
+  }
+</style>