diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-02-18 10:34:06 +0000 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-02-18 10:34:06 +0000 |
commit | 859a6fb938bb9ee2a317c46dfa4fcc1af49608f0 (patch) | |
tree | d7f2700abe6b4ffcb2dcfc80631b2d87d0609239 /app/assets/javascripts/notes/components/toggle_replies_widget.vue | |
parent | 446d496a6d000c73a304be52587cd9bbc7493136 (diff) | |
download | gitlab-ce-859a6fb938bb9ee2a317c46dfa4fcc1af49608f0.tar.gz |
Add latest changes from gitlab-org/gitlab@13-9-stable-eev13.9.0-rc42
Diffstat (limited to 'app/assets/javascripts/notes/components/toggle_replies_widget.vue')
-rw-r--r-- | app/assets/javascripts/notes/components/toggle_replies_widget.vue | 25 |
1 files changed, 15 insertions, 10 deletions
diff --git a/app/assets/javascripts/notes/components/toggle_replies_widget.vue b/app/assets/javascripts/notes/components/toggle_replies_widget.vue index ab7fa793bdc..01e3f84d00e 100644 --- a/app/assets/javascripts/notes/components/toggle_replies_widget.vue +++ b/app/assets/javascripts/notes/components/toggle_replies_widget.vue @@ -1,8 +1,8 @@ <script> -import { uniqBy } from 'lodash'; import { GlButton, GlIcon } from '@gitlab/ui'; -import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue'; +import { uniqBy } from 'lodash'; import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue'; +import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue'; export default { components: { @@ -39,13 +39,17 @@ export default { this.$emit('toggle'); }, }, + ICON_CLASS: 'gl-mr-3 gl-cursor-pointer', }; </script> <template> - <li :class="className" class="replies-toggle js-toggle-replies"> + <li + :class="className" + class="replies-toggle js-toggle-replies gl-display-flex! gl-align-items-center gl-flex-wrap" + > <template v-if="collapsed"> - <gl-icon name="chevron-right" @click.native="toggle" /> + <gl-icon :class="$options.ICON_CLASS" name="chevron-right" @click.native="toggle" /> <div> <user-avatar-link v-for="author in uniqueAuthors" @@ -59,7 +63,7 @@ export default { /> </div> <gl-button - class="js-replies-text" + class="js-replies-text gl-mr-2" category="tertiary" variant="link" data-qa-selector="expand_replies_button" @@ -68,18 +72,19 @@ export default { {{ replies.length }} {{ n__('reply', 'replies', replies.length) }} </gl-button> {{ __('Last reply by') }} - <a :href="lastReply.author.path" class="btn btn-link author-link"> + <a :href="lastReply.author.path" class="btn btn-link author-link gl-mx-2"> {{ lastReply.author.name }} </a> <time-ago-tooltip :time="lastReply.created_at" tooltip-placement="bottom" /> </template> - <span + <div v-else - class="collapse-replies-btn js-collapse-replies" + class="collapse-replies-btn js-collapse-replies gl-display-flex align-items-center" data-qa-selector="collapse_replies_button" @click="toggle" > - <gl-icon name="chevron-down" /> {{ s__('Notes|Collapse replies') }} - </span> + <gl-icon :class="$options.ICON_CLASS" name="chevron-down" /> + <span class="gl-cursor-pointer">{{ s__('Notes|Collapse replies') }}</span> + </div> </li> </template> |