diff options
Diffstat (limited to 'app/assets/javascripts/sidebar/components/reviewers')
-rw-r--r-- | app/assets/javascripts/sidebar/components/reviewers/reviewer_avatar_link.vue | 4 | ||||
-rw-r--r-- | app/assets/javascripts/sidebar/components/reviewers/uncollapsed_reviewer_list.vue | 28 |
2 files changed, 22 insertions, 10 deletions
diff --git a/app/assets/javascripts/sidebar/components/reviewers/reviewer_avatar_link.vue b/app/assets/javascripts/sidebar/components/reviewers/reviewer_avatar_link.vue index 361a082def6..a11468c8761 100644 --- a/app/assets/javascripts/sidebar/components/reviewers/reviewer_avatar_link.vue +++ b/app/assets/javascripts/sidebar/components/reviewers/reviewer_avatar_link.vue @@ -73,10 +73,10 @@ export default { v-gl-tooltip="tooltipOption" :href="reviewerUrl" :title="tooltipTitle" - class="d-inline-block" + class="gl-display-inline-block" > <!-- use d-flex so that slot can be appropriately styled --> - <span class="gl-display-flex gl-align-items-center"> + <span class="gl-display-flex"> <reviewer-avatar :user="user" :img-size="32" :issuable-type="issuableType" /> <slot :user="user"></slot> </span> diff --git a/app/assets/javascripts/sidebar/components/reviewers/uncollapsed_reviewer_list.vue b/app/assets/javascripts/sidebar/components/reviewers/uncollapsed_reviewer_list.vue index 9485802d3da..3e6be3487b1 100644 --- a/app/assets/javascripts/sidebar/components/reviewers/uncollapsed_reviewer_list.vue +++ b/app/assets/javascripts/sidebar/components/reviewers/uncollapsed_reviewer_list.vue @@ -94,28 +94,40 @@ export default { <div v-for="(user, index) in users" :key="user.id" - :class="{ 'gl-mb-3': index !== users.length - 1 }" + :class="{ + 'gl-mb-3': index !== users.length - 1, + 'attention-requests': glFeatures.mrAttentionRequests, + }" + class="gl-display-grid gl-align-items-center reviewer-grid" data-testid="reviewer" > - <attention-requested-toggle - v-if="glFeatures.mrAttentionRequests" + <reviewer-avatar-link :user="user" - type="reviewer" - @toggle-attention-requested="toggleAttentionRequested" - /> - <reviewer-avatar-link :user="user" :root-path="rootPath" :issuable-type="issuableType"> + :root-path="rootPath" + :issuable-type="issuableType" + class="gl-word-break-word gl-mr-2" + data-css-area="user" + > <div class="gl-ml-3 gl-line-height-normal gl-display-grid"> <span>{{ user.name }}</span> <span>@{{ user.username }}</span> </div> </reviewer-avatar-link> + <attention-requested-toggle + v-if="glFeatures.mrAttentionRequests" + :user="user" + type="reviewer" + class="gl-mr-2" + data-css-area="attention" + @toggle-attention-requested="toggleAttentionRequested" + /> <gl-icon v-if="user.approved" v-gl-tooltip.left :size="16" :title="approvedByTooltipTitle(user)" name="status-success" - class="float-right gl-my-2 gl-ml-2 gl-text-green-500" + class="float-right gl-my-2 gl-ml-auto gl-text-green-500 gl-flex-shrink-0" data-testid="re-approved" /> <gl-icon |