Commit 1a50806d authored by Yogi's avatar Yogi Committed by Paul Slaughter

Fix alignment of chevron-down icon in toggle replies

https://gitlab.com/gitlab-org/gitlab/-/merge_requests/51872
parent 62f8dab1
......@@ -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>
......@@ -91,29 +91,10 @@ $note-form-margin-left: 72px;
color: $blue-600;
}
&.expanded {
span {
cursor: pointer;
}
svg {
position: relative;
top: 3px;
}
}
&.collapsed {
color: $gl-text-color-secondary;
border-radius: 0 0 $border-radius-default $border-radius-default;
svg {
float: left;
position: relative;
top: $gl-padding-4;
margin-right: $gl-padding-8;
cursor: pointer;
}
img {
margin: -2px 4px 0 0;
}
......
---
title: Fix alignment of chevron-down icon in toggle replies
merge_request: 51872
author: Yogi (@yo)
type: fixed
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment