diff options
Diffstat (limited to 'app/assets/javascripts/design_management')
-rw-r--r-- | app/assets/javascripts/design_management/components/design_notes/design_discussion.vue | 26 | ||||
-rw-r--r-- | app/assets/javascripts/design_management/components/design_notes/design_note.vue | 31 |
2 files changed, 27 insertions, 30 deletions
diff --git a/app/assets/javascripts/design_management/components/design_notes/design_discussion.vue b/app/assets/javascripts/design_management/components/design_notes/design_discussion.vue index 7fefbab977d..618096c5bea 100644 --- a/app/assets/javascripts/design_management/components/design_notes/design_discussion.vue +++ b/app/assets/javascripts/design_management/components/design_notes/design_discussion.vue @@ -1,5 +1,5 @@ <script> -import { GlTooltipDirective, GlIcon, GlLoadingIcon, GlLink } from '@gitlab/ui'; +import { GlButton, GlLink, GlTooltipDirective } from '@gitlab/ui'; import { ApolloMutation } from 'vue-apollo'; import createFlash from '~/flash'; import { s__ } from '~/locale'; @@ -26,15 +26,14 @@ export default { components: { ApolloMutation, DesignNote, + DesignNotePin, DesignNoteSignedOut, - ReplyPlaceholder, DesignReplyForm, - GlIcon, - GlLoadingIcon, + GlButton, GlLink, - ToggleRepliesWidget, + ReplyPlaceholder, TimeAgoTooltip, - DesignNotePin, + ToggleRepliesWidget, }, directives: { GlTooltip: GlTooltipDirective, @@ -239,18 +238,17 @@ export default { @error="$emit('update-note-error', $event)" > <template v-if="isLoggedIn && discussion.resolvable" #resolve-discussion> - <button + <gl-button v-gl-tooltip - :class="{ 'is-active': discussion.resolved }" - :title="resolveCheckboxText" :aria-label="resolveCheckboxText" - class="line-resolve-btn note-action-button gl-mr-3" + :icon="resolveIconName" + :title="resolveCheckboxText" + :loading="isResolving" + category="tertiary" data-testid="resolve-button" + size="small" @click.stop="toggleResolvedStatus" - > - <gl-icon v-if="!isResolving" :name="resolveIconName" data-testid="resolve-icon" /> - <gl-loading-icon v-else size="sm" inline /> - </button> + /> </template> <template v-if="discussion.resolved" #resolved-status> <p class="gl-text-gray-500 gl-font-sm gl-m-0 gl-mt-5" data-testid="resolved-message"> diff --git a/app/assets/javascripts/design_management/components/design_notes/design_note.vue b/app/assets/javascripts/design_management/components/design_notes/design_note.vue index ba95faab53e..5fb5989e11a 100644 --- a/app/assets/javascripts/design_management/components/design_notes/design_note.vue +++ b/app/assets/javascripts/design_management/components/design_notes/design_note.vue @@ -1,11 +1,11 @@ <script> import { - GlTooltipDirective, - GlIcon, - GlLink, - GlSafeHtmlDirective, GlAvatar, GlAvatarLink, + GlButton, + GlLink, + GlSafeHtmlDirective, + GlTooltipDirective, } from '@gitlab/ui'; import { ApolloMutation } from 'vue-apollo'; import { getIdFromGraphQLId } from '~/graphql_shared/utils'; @@ -22,14 +22,14 @@ export default { editCommentLabel: __('Edit comment'), }, components: { + ApolloMutation, + DesignReplyForm, GlAvatar, GlAvatarLink, - TimelineEntryItem, - TimeAgoTooltip, - DesignReplyForm, - ApolloMutation, - GlIcon, + GlButton, GlLink, + TimeAgoTooltip, + TimelineEntryItem, }, directives: { GlTooltip: GlTooltipDirective, @@ -123,18 +123,17 @@ export default { </div> <div class="gl-display-flex gl-align-items-baseline"> <slot name="resolve-discussion"></slot> - <button + <gl-button v-if="isEditButtonVisible" v-gl-tooltip - type="button" - :title="$options.i18n.editCommentLabel" :aria-label="$options.i18n.editCommentLabel" - class="note-action-button btn btn-transparent qa-note-edit-button" + :title="$options.i18n.editCommentLabel" + category="tertiary" data-testid="note-edit" + icon="pencil" + size="small" @click="isEditing = true" - > - <gl-icon name="pencil" class="link-highlight" /> - </button> + /> </div> </div> <template v-if="!isEditing"> |