diff options
Diffstat (limited to 'app/assets/javascripts/batch_comments/components')
5 files changed, 58 insertions, 32 deletions
diff --git a/app/assets/javascripts/batch_comments/components/draft_note.vue b/app/assets/javascripts/batch_comments/components/draft_note.vue index 4c100ec7335..39c1b8decee 100644 --- a/app/assets/javascripts/batch_comments/components/draft_note.vue +++ b/app/assets/javascripts/batch_comments/components/draft_note.vue @@ -1,15 +1,17 @@ <script> import { mapActions, mapGetters, mapState } from 'vuex'; +import { GlButton } from '@gitlab/ui'; import NoteableNote from '~/notes/components/noteable_note.vue'; -import LoadingButton from '~/vue_shared/components/loading_button.vue'; import PublishButton from './publish_button.vue'; +import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; export default { components: { NoteableNote, PublishButton, - LoadingButton, + GlButton, }, + mixins: [glFeatureFlagsMixin()], props: { draft: { type: Object, @@ -64,14 +66,27 @@ export default { handleNotEditing() { this.isEditingDraft = false; }, + handleMouseEnter(draft) { + if (this.glFeatures.multilineComments && draft.position) { + this.setSelectedCommentPositionHover(draft.position.line_range); + } + }, + handleMouseLeave(draft) { + // Even though position isn't used here we still don't want to unecessarily call a mutation + // The lack of position tells us that highlighting is irrelevant in this context + if (this.glFeatures.multilineComments && draft.position) { + this.setSelectedCommentPositionHover(); + } + }, }, }; </script> <template> <article + role="article" class="draft-note-component note-wrapper" - @mouseenter="setSelectedCommentPositionHover(draft.position.line_range)" - @mouseleave="setSelectedCommentPositionHover()" + @mouseenter="handleMouseEnter(draft)" + @mouseleave="handleMouseLeave(draft)" > <ul class="notes draft-notes"> <noteable-note @@ -100,18 +115,15 @@ export default { ></div> <p class="draft-note-actions d-flex"> - <publish-button - :show-count="true" - :should-publish="false" - class="btn btn-success btn-inverted gl-mr-3" - /> - <loading-button + <publish-button :show-count="true" :should-publish="false" category="secondary" /> + <gl-button ref="publishNowButton" :loading="isPublishingDraft(draft.id) || isPublishing" - :label="__('Add comment now')" - container-class="btn btn-inverted" + class="gl-ml-3" @click="publishNow" - /> + > + {{ __('Add comment now') }} + </gl-button> </p> </template> </article> diff --git a/app/assets/javascripts/batch_comments/components/drafts_count.vue b/app/assets/javascripts/batch_comments/components/drafts_count.vue index f1180760c4d..7a8482ac341 100644 --- a/app/assets/javascripts/batch_comments/components/drafts_count.vue +++ b/app/assets/javascripts/batch_comments/components/drafts_count.vue @@ -1,15 +1,19 @@ <script> import { mapGetters } from 'vuex'; +import { GlBadge } from '@gitlab/ui'; export default { + components: { + GlBadge, + }, computed: { ...mapGetters('batchComments', ['draftsCount']), }, }; </script> <template> - <span class="drafts-count-component"> - <span class="drafts-count-number">{{ draftsCount }}</span> + <gl-badge size="sm" variant="success"> + {{ draftsCount }} <span class="sr-only"> {{ n__('draft', 'drafts', draftsCount) }} </span> - </span> + </gl-badge> </template> diff --git a/app/assets/javascripts/batch_comments/components/preview_item.vue b/app/assets/javascripts/batch_comments/components/preview_item.vue index 3162a83f099..982fb01f49a 100644 --- a/app/assets/javascripts/batch_comments/components/preview_item.vue +++ b/app/assets/javascripts/batch_comments/components/preview_item.vue @@ -1,10 +1,10 @@ <script> import { mapActions, mapGetters } from 'vuex'; +import { GlSprintf } from '@gitlab/ui'; import { IMAGE_DIFF_POSITION_TYPE } from '~/diffs/constants'; import { sprintf, __ } from '~/locale'; import Icon from '~/vue_shared/components/icon.vue'; import resolvedStatusMixin from '../mixins/resolved_status'; -import { GlSprintf } from '@gitlab/ui'; import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import { getStartLineNumber, diff --git a/app/assets/javascripts/batch_comments/components/publish_button.vue b/app/assets/javascripts/batch_comments/components/publish_button.vue index f4dc0f04dc3..0c79e185f06 100644 --- a/app/assets/javascripts/batch_comments/components/publish_button.vue +++ b/app/assets/javascripts/batch_comments/components/publish_button.vue @@ -1,12 +1,12 @@ <script> import { mapActions, mapState } from 'vuex'; +import { GlButton } from '@gitlab/ui'; import { __ } from '~/locale'; -import LoadingButton from '~/vue_shared/components/loading_button.vue'; import DraftsCount from './drafts_count.vue'; export default { components: { - LoadingButton, + GlButton, DraftsCount, }, props: { @@ -20,6 +20,16 @@ export default { required: false, default: __('Finish review'), }, + category: { + type: String, + required: false, + default: 'primary', + }, + variant: { + type: String, + required: false, + default: 'success', + }, shouldPublish: { type: Boolean, required: true, @@ -42,14 +52,14 @@ export default { </script> <template> - <loading-button + <gl-button :loading="isPublishing" - container-class="btn btn-success js-publish-draft-button qa-submit-review" + class="js-publish-draft-button qa-submit-review" + :category="category" + :variant="variant" @click="onClick" > - <span> - {{ label }} - <drafts-count v-if="showCount" /> - </span> - </loading-button> + {{ label }} + <drafts-count v-if="showCount" /> + </gl-button> </template> diff --git a/app/assets/javascripts/batch_comments/components/review_bar.vue b/app/assets/javascripts/batch_comments/components/review_bar.vue index b0e8b806701..2d7b86d2431 100644 --- a/app/assets/javascripts/batch_comments/components/review_bar.vue +++ b/app/assets/javascripts/batch_comments/components/review_bar.vue @@ -1,13 +1,12 @@ <script> import { mapActions, mapState, mapGetters } from 'vuex'; -import { GlModal, GlModalDirective } from '@gitlab/ui'; +import { GlModal, GlModalDirective, GlButton } from '@gitlab/ui'; import { sprintf, s__ } from '~/locale'; -import LoadingButton from '~/vue_shared/components/loading_button.vue'; import PreviewDropdown from './preview_dropdown.vue'; export default { components: { - LoadingButton, + GlButton, GlModal, PreviewDropdown, }, @@ -48,12 +47,13 @@ export default { <nav class="review-bar-component"> <div class="review-bar-content qa-review-bar"> <preview-dropdown /> - <loading-button + <gl-button v-gl-modal="$options.modalId" :loading="isDiscarding" - :label="__('Discard review')" class="qa-discard-review float-right" - /> + > + {{ __('Discard review') }} + </gl-button> </div> </nav> <gl-modal |