1 files changed, 80 insertions, 71 deletions

diff --git a/app/assets/javascripts/sidebar/components/participants/participants.vue b/app/assets/javascripts/sidebar/components/participants/participants.vue
index b8510a6ce3a..006a6d2905d 100644
--- a/app/assets/javascripts/sidebar/components/participants/participants.vue
+++ b/app/assets/javascripts/sidebar/components/participants/participants.vue
@@ -1,73 +1,73 @@
 <script>
-import { __, n__, sprintf } from '../../../locale';
-import loadingIcon from '../../../vue_shared/components/loading_icon.vue';
-import userAvatarImage from '../../../vue_shared/components/user_avatar/user_avatar_image.vue';
+  import { __, n__, sprintf } from '../../../locale';
+  import loadingIcon from '../../../vue_shared/components/loading_icon.vue';
+  import userAvatarImage from '../../../vue_shared/components/user_avatar/user_avatar_image.vue';
 
-export default {
-  props: {
-    loading: {
-      type: Boolean,
-      required: false,
-      default: false,
+  export default {
+    components: {
+      loadingIcon,
+      userAvatarImage,
     },
-    participants: {
-      type: Array,
-      required: false,
-      default: () => [],
+    props: {
+      loading: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
+      participants: {
+        type: Array,
+        required: false,
+        default: () => [],
+      },
+      numberOfLessParticipants: {
+        type: Number,
+        required: false,
+        default: 7,
+      },
     },
-    numberOfLessParticipants: {
-      type: Number,
-      required: false,
-      default: 7,
+    data() {
+      return {
+        isShowingMoreParticipants: false,
+      };
     },
-  },
-  data() {
-    return {
-      isShowingMoreParticipants: false,
-    };
-  },
-  components: {
-    loadingIcon,
-    userAvatarImage,
-  },
-  computed: {
-    lessParticipants() {
-      return this.participants.slice(0, this.numberOfLessParticipants);
-    },
-    visibleParticipants() {
-      return this.isShowingMoreParticipants ? this.participants : this.lessParticipants;
-    },
-    hasMoreParticipants() {
-      return this.participants.length > this.numberOfLessParticipants;
-    },
-    toggleLabel() {
-      let label = '';
-      if (this.isShowingMoreParticipants) {
-        label = __('- show less');
-      } else {
-        label = sprintf(__('+ %{moreCount} more'), {
-          moreCount: this.participants.length - this.numberOfLessParticipants,
-        });
-      }
+    computed: {
+      lessParticipants() {
+        return this.participants.slice(0, this.numberOfLessParticipants);
+      },
+      visibleParticipants() {
+        return this.isShowingMoreParticipants ? this.participants : this.lessParticipants;
+      },
+      hasMoreParticipants() {
+        return this.participants.length > this.numberOfLessParticipants;
+      },
+      toggleLabel() {
+        let label = '';
+        if (this.isShowingMoreParticipants) {
+          label = __('- show less');
+        } else {
+          label = sprintf(__('+ %{moreCount} more'), {
+            moreCount: this.participants.length - this.numberOfLessParticipants,
+          });
+        }
 
-      return label;
-    },
-    participantLabel() {
-      return sprintf(
-        n__('%{count} participant', '%{count} participants', this.participants.length),
-        { count: this.loading ? '' : this.participantCount },
-      );
-    },
-    participantCount() {
-      return this.participants.length;
+        return label;
+      },
+      participantLabel() {
+        return sprintf(
+          n__('%{count} participant', '%{count} participants', this.participants.length),
+          { count: this.loading ? '' : this.participantCount },
+        );
+      },
+      participantCount() {
+        return this.participants.length;
+      },
     },
-  },
-  methods: {
-    toggleMoreParticipants() {
-      this.isShowingMoreParticipants = !this.isShowingMoreParticipants;
+    methods: {
+      toggleMoreParticipants() {
+        this.isShowingMoreParticipants = !this.isShowingMoreParticipants;
+      },
     },
-  },
-};
+  };
 </script>
 
 <template>
@@ -75,14 +75,17 @@ export default {
     <div class="sidebar-collapsed-icon">
       <i
         class="fa fa-users"
-        aria-hidden="true">
+        aria-hidden="true"
+      >
       </i>
       <loading-icon
         v-if="loading"
-        class="js-participants-collapsed-loading-icon" />
+        class="js-participants-collapsed-loading-icon"
+      />
       <span
         v-else
-        class="js-participants-collapsed-count">
+        class="js-participants-collapsed-count"
+      >
         {{ participantCount }}
       </span>
     </div>
@@ -90,34 +93,40 @@ export default {
       <loading-icon
         v-if="loading"
         :inline="true"
-        class="js-participants-expanded-loading-icon" />
+        class="js-participants-expanded-loading-icon"
+      />
       {{ participantLabel }}
     </div>
     <div class="participants-list hide-collapsed">
       <div
         v-for="participant in visibleParticipants"
         :key="participant.id"
-        class="participants-author js-participants-author">
+        class="participants-author js-participants-author"
+      >
         <a
           class="author_link"
-          :href="participant.web_url">
+          :href="participant.web_url"
+        >
           <user-avatar-image
             :lazy="true"
             :img-src="participant.avatar_url"
             css-classes="avatar-inline"
             :size="24"
             :tooltip-text="participant.name"
-            tooltip-placement="bottom" />
+            tooltip-placement="bottom"
+          />
         </a>
       </div>
     </div>
     <div
       v-if="hasMoreParticipants"
-      class="participants-more hide-collapsed">
+      class="participants-more hide-collapsed"
+    >
       <button
         type="button"
         class="btn-transparent btn-blank js-toggle-participants-button"
-        @click="toggleMoreParticipants">
+        @click="toggleMoreParticipants"
+      >
         {{ toggleLabel }}
       </button>
     </div>