Commit 2623b1b6 authored by Taurie Davis's avatar Taurie Davis Committed by Mike Greiling

Migrate batch publish buttons

Migrats loading buttons when finishing a
batch review or applying comments now
parent 9b203698
<script>
import { mapActions, mapGetters, mapState } from 'vuex';
import NoteableNote from '~/notes/components/noteable_note.vue';
import LoadingButton from '~/vue_shared/components/loading_button.vue';
import { GlButton } from '@gitlab/ui';
import PublishButton from './publish_button.vue';
import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
......@@ -9,7 +9,7 @@ export default {
components: {
NoteableNote,
PublishButton,
LoadingButton,
GlButton,
},
mixins: [glFeatureFlagsMixin()],
props: {
......@@ -115,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>
......
<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>
<script>
import { mapActions, mapState } from 'vuex';
import { __ } from '~/locale';
import LoadingButton from '~/vue_shared/components/loading_button.vue';
import { GlButton } from '@gitlab/ui';
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>
......@@ -4,18 +4,6 @@ $draft-actions-left-margin: 40px + $gl-padding;
margin: 0;
background: $orange-50;
.drafts-count-component {
@include transition(background-color);
background: rgba($green-500, 0.2);
}
button:focus,
button:hover {
.drafts-count-component {
background: $black-transparent;
}
}
.referenced-commands.draft-note-commands {
background: $orange-100;
font-size: $label-font-size;
......@@ -39,8 +27,9 @@ button[disabled] {
&,
&:focus,
&:hover {
.drafts-count-component {
.gl-badge {
background: $gl-gray-100;
color: $gl-gray-500;
}
}
}
......
$drafts-count-size: 1.6;
.drafts-count-component {
font-size: $label-font-size;
display: inline-block;
min-width: $drafts-count-size * 1em;
height: $drafts-count-size * 1em;
line-height: $drafts-count-size;
background: $black-transparent;
border-radius: 50%;
margin-left: $gl-padding-4;
padding: 0 $gl-padding-4;
}
......@@ -24,7 +24,7 @@ describe('Batch comments drafts count component', () => {
});
it('renders count', () => {
expect(vm.$el.querySelector('.drafts-count-number').textContent).toBe('1');
expect(vm.$el.textContent).toContain('1');
});
it('renders screen reader text', done => {
......
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