Commit 9997c1cc authored by Coung Ngo's avatar Coung Ngo Committed by Savas Vedova

Align note actions icons

Aligns the emoji icon with the other icons, and darkens its color
to match the others
parent df39fe86
......@@ -244,66 +244,62 @@ export default {
:title="displayContributorBadgeText"
>{{ __('Contributor') }}</span
>
<div v-if="canResolve" class="gl-ml-2">
<gl-button
ref="resolveButton"
v-gl-tooltip
size="small"
category="tertiary"
:variant="resolveVariant"
:class="{ 'is-disabled': !resolvable, 'is-active': isResolved }"
:title="resolveButtonTitle"
:aria-label="resolveButtonTitle"
:icon="resolveIcon"
:loading="isResolving"
class="line-resolve-btn note-action-button"
@click="onResolve"
/>
</div>
<div v-if="canAwardEmoji" class="gl-ml-3 gl-mr-2">
<a
v-gl-tooltip
:class="{ 'js-user-authored': isAuthoredByCurrentUser }"
class="note-action-button note-emoji-button js-add-award js-note-emoji"
href="#"
title="Add reaction"
data-position="right"
>
<gl-icon class="link-highlight award-control-icon-neutral" name="slight-smile" />
<gl-icon class="link-highlight award-control-icon-positive" name="smiley" />
<gl-icon class="link-highlight award-control-icon-super-positive" name="smile" />
</a>
</div>
<gl-button
v-if="canResolve"
ref="resolveButton"
v-gl-tooltip
size="small"
category="tertiary"
:variant="resolveVariant"
:class="{ 'is-disabled': !resolvable, 'is-active': isResolved }"
:title="resolveButtonTitle"
:aria-label="resolveButtonTitle"
:icon="resolveIcon"
:loading="isResolving"
class="line-resolve-btn note-action-button"
@click="onResolve"
/>
<a
v-if="canAwardEmoji"
v-gl-tooltip
:class="{ 'js-user-authored': isAuthoredByCurrentUser }"
class="note-action-button note-emoji-button js-add-award js-note-emoji gl-text-gray-600 gl-m-2"
href="#"
title="Add reaction"
data-position="right"
>
<gl-icon class="link-highlight award-control-icon-neutral" name="slight-smile" />
<gl-icon class="link-highlight award-control-icon-positive" name="smiley" />
<gl-icon class="link-highlight award-control-icon-super-positive" name="smile" />
</a>
<reply-button
v-if="showReply"
ref="replyButton"
class="js-reply-button"
@startReplying="$emit('startReplying')"
/>
<div v-if="canEdit" class="gl-ml-2">
<gl-button
v-gl-tooltip
title="Edit comment"
icon="pencil"
size="small"
category="tertiary"
class="note-action-button js-note-edit btn btn-transparent"
data-qa-selector="note_edit_button"
@click="onEdit"
/>
</div>
<div v-if="showDeleteAction" class="gl-ml-2">
<gl-button
v-gl-tooltip
title="Delete comment"
size="small"
icon="remove"
category="tertiary"
class="note-action-button js-note-delete btn btn-transparent"
@click="onDelete"
/>
</div>
<div v-else-if="shouldShowActionsDropdown" class="dropdown more-actions gl-ml-2">
<gl-button
v-if="canEdit"
v-gl-tooltip
title="Edit comment"
icon="pencil"
size="small"
category="tertiary"
class="note-action-button js-note-edit btn btn-transparent"
data-qa-selector="note_edit_button"
@click="onEdit"
/>
<gl-button
v-if="showDeleteAction"
v-gl-tooltip
title="Delete comment"
size="small"
icon="remove"
category="tertiary"
class="note-action-button js-note-delete btn btn-transparent"
@click="onDelete"
/>
<div v-else-if="shouldShowActionsDropdown" class="dropdown more-actions">
<gl-button
v-gl-tooltip
title="More actions"
......
<script>
import { GlTooltipDirective, GlButton } from '@gitlab/ui';
import { __ } from '~/locale';
export default {
i18n: {
buttonText: __('Reply to comment'),
},
name: 'ReplyButton',
components: {
GlButton,
......@@ -13,18 +17,16 @@ export default {
</script>
<template>
<div class="gl-ml-2">
<gl-button
ref="button"
v-gl-tooltip
data-track-event="click_button"
data-track-label="reply_comment_button"
category="tertiary"
size="small"
icon="comment"
:title="__('Reply to comment')"
:aria-label="__('Reply to comment')"
@click="$emit('startReplying')"
/>
</div>
<gl-button
ref="button"
v-gl-tooltip
data-track-event="click_button"
data-track-label="reply_comment_button"
category="tertiary"
size="small"
icon="comment"
:title="$options.i18n.buttonText"
:aria-label="$options.i18n.buttonText"
@click="$emit('startReplying')"
/>
</template>
---
title: Align note actions icons
merge_request: 53753
author: Claudius Ellsel (@clel)
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