All files / app/assets/javascripts/design_management/components/design_notes toggle_replies_widget.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<script>
import { GlButton, GlAvatar, GlAvatarLink, GlAvatarsInline, GlTooltipDirective } from '@gitlab/ui';
import { __, n__ } from '~/locale';
 
export default {
  name: 'ToggleNotesWidget',
  components: {
    GlButton,
    GlAvatar,
    GlAvatarLink,
    GlAvatarsInline,
  },
  directives: {
    GlTooltip: GlTooltipDirective,
  },
  props: {
    collapsed: {
      type: Boolean,
      required: true,
    },
    replies: {
      type: Array,
      required: true,
    },
  },
  computed: {
    iconName() {
      return this.collapsed ? 'chevron-right' : 'chevron-down';
    },
    toggleText() {
      return this.collapsed
        ? n__('%d reply', '%d replies', this.replies.length)
        : __('Collapse replies');
    },
    toggleTextColor() {
      return this.collapsed ? 'gl-text-blue-500' : 'gl-text-gray-900';
    },
    authors() {
      return [...new Set(this.replies.map((item) => item.author))];
    },
    authorCollapsedTooltip() {
      Iif (this.authors.length > 2) {
        return n__('%d reply', '%d replies', this.authors.length);
      }
      return '';
    },
  },
};
</script>
 
<template>
  <li
    class="toggle-comments gl-bg-gray-10 gl-display-flex gl-align-items-center gl-p-3 gl-min-h-8 gl-rounded-bottom-left-base gl-rounded-bottom-right-base"
    :class="{ expanded: !collapsed }"
    data-testid="toggle-comments-wrapper"
  >
    <gl-button
      category="tertiary"
      data-testid="toggle-replies-button"
      class="gl-my-2 gl-mr-3 gl-p-0!"
      :icon="iconName"
      @click="$emit('toggle')"
    />
    <template v-if="collapsed">
      <gl-avatars-inline
        v-if="authors.length"
        :avatars="authors"
        collapsed
        :max-visible="2"
        :avatar-size="24"
        badge-tooltip-prop="name"
        :badge-sr-only-text="authorCollapsedTooltip"
        class="gl-white-space-nowrap gl-mr-3"
      >
        <template #avatar="{ avatar }">
          <gl-avatar-link v-gl-tooltip :href="avatar.webUrl" :title="avatar.name">
            <gl-avatar :alt="avatar.name" :src="avatar.avatarUrl" :size="24" />
          </gl-avatar-link>
        </template>
      </gl-avatars-inline>
    </template>
    <gl-button
      variant="link"
      data-testid="replies-button"
      class="toggle-comments-button"
      @click="$emit('toggle')"
    >
      <span :class="toggleTextColor">{{ toggleText }}</span>
    </gl-button>
  </li>
</template>