diff options
Diffstat (limited to 'app/assets/javascripts/design_management')
10 files changed, 56 insertions, 23 deletions
diff --git a/app/assets/javascripts/design_management/components/delete_button.vue b/app/assets/javascripts/design_management/components/delete_button.vue index fbcce22ec1e..ae2ce7c3e5e 100644 --- a/app/assets/javascripts/design_management/components/delete_button.vue +++ b/app/assets/javascripts/design_management/components/delete_button.vue @@ -63,7 +63,7 @@ export default { title: s__('DesignManagement|Are you sure you want to archive the selected designs?'), actionPrimary: { text: s__('DesignManagement|Archive designs'), - attributes: { variant: 'warning', 'data-qa-selector': 'confirm_archiving_button' }, + attributes: { variant: 'confirm', 'data-qa-selector': 'confirm_archiving_button' }, }, actionCancel: { text: __('Cancel'), 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 2b867217327..833d7081a2c 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,6 +1,7 @@ <script> import { GlTooltipDirective, GlIcon, GlLink, GlSafeHtmlDirective } from '@gitlab/ui'; import { ApolloMutation } from 'vue-apollo'; +import { __ } from '~/locale'; import TimelineEntryItem from '~/vue_shared/components/notes/timeline_entry_item.vue'; import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue'; import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue'; @@ -10,6 +11,9 @@ import { findNoteId, extractDesignNoteId } from '../../utils/design_management_u import DesignReplyForm from './design_reply_form.vue'; export default { + i18n: { + editCommentLabel: __('Edit comment'), + }, components: { UserAvatarLink, TimelineEntryItem, @@ -113,7 +117,8 @@ export default { v-if="isEditButtonVisible" v-gl-tooltip type="button" - :title="__('Edit comment')" + :title="$options.i18n.editCommentLabel" + :aria-label="$options.i18n.editCommentLabel" class="note-action-button js-note-edit btn btn-transparent qa-note-edit-button" @click="isEditing = true" > diff --git a/app/assets/javascripts/design_management/components/design_scaler.vue b/app/assets/javascripts/design_management/components/design_scaler.vue index 85c6bd4d79e..c9273f97bed 100644 --- a/app/assets/javascripts/design_management/components/design_scaler.vue +++ b/app/assets/javascripts/design_management/components/design_scaler.vue @@ -51,8 +51,18 @@ export default { <template> <gl-button-group class="gl-z-index-1"> - <gl-button icon="dash" :disabled="disableDecrease" @click="decrementScale" /> - <gl-button icon="redo" :disabled="disableReset" @click="resetScale" /> - <gl-button icon="plus" :disabled="disableIncrease" @click="incrementScale" /> + <gl-button + icon="dash" + :disabled="disableDecrease" + :aria-label="__('Decrease')" + @click="decrementScale" + /> + <gl-button icon="redo" :disabled="disableReset" :aria-label="__('Reset')" @click="resetScale" /> + <gl-button + icon="plus" + :disabled="disableIncrease" + :aria-label="__('Increase')" + @click="incrementScale" + /> </gl-button-group> </template> diff --git a/app/assets/javascripts/design_management/components/list/item.vue b/app/assets/javascripts/design_management/components/list/item.vue index 2169c9111d2..b6163491abc 100644 --- a/app/assets/javascripts/design_management/components/list/item.vue +++ b/app/assets/javascripts/design_management/components/list/item.vue @@ -137,8 +137,7 @@ export default { <span :title="icon.tooltip" :aria-label="icon.tooltip"> <gl-icon :name="icon.name" - :size="18" - use-deprecated-sizes + :size="16" :class="icon.classes" data-qa-selector="design_status_icon" :data-qa-status="icon.name" diff --git a/app/assets/javascripts/design_management/components/toolbar/design_navigation.vue b/app/assets/javascripts/design_management/components/toolbar/design_navigation.vue index 6091a3183ac..3ebcde817f9 100644 --- a/app/assets/javascripts/design_management/components/toolbar/design_navigation.vue +++ b/app/assets/javascripts/design_management/components/toolbar/design_navigation.vue @@ -2,11 +2,20 @@ /* global Mousetrap */ import 'mousetrap'; import { GlButton, GlButtonGroup, GlTooltipDirective } from '@gitlab/ui'; +import { + keysFor, + ISSUE_PREVIOUS_DESIGN, + ISSUE_NEXT_DESIGN, +} from '~/behaviors/shortcuts/keybindings'; import { s__, sprintf } from '~/locale'; import allDesignsMixin from '../../mixins/all_designs'; import { DESIGN_ROUTE_NAME } from '../../router/constants'; export default { + i18n: { + nextButton: s__('DesignManagement|Go to next design'), + previousButton: s__('DesignManagement|Go to previous design'), + }, components: { GlButton, GlButtonGroup, @@ -46,11 +55,14 @@ export default { }, }, mounted() { - Mousetrap.bind('left', () => this.navigateToDesign(this.previousDesign)); - Mousetrap.bind('right', () => this.navigateToDesign(this.nextDesign)); + Mousetrap.bind(keysFor(ISSUE_PREVIOUS_DESIGN), () => + this.navigateToDesign(this.previousDesign), + ); + Mousetrap.bind(keysFor(ISSUE_NEXT_DESIGN), () => this.navigateToDesign(this.nextDesign)); }, beforeDestroy() { - Mousetrap.unbind(['left', 'right'], this.navigateToDesign); + Mousetrap.unbind(keysFor(ISSUE_PREVIOUS_DESIGN)); + Mousetrap.unbind(keysFor(ISSUE_NEXT_DESIGN)); }, methods: { navigateToDesign(design) { @@ -73,7 +85,8 @@ export default { <gl-button v-gl-tooltip.bottom :disabled="!previousDesign" - :title="s__('DesignManagement|Go to previous design')" + :title="$options.i18n.previousButton" + :aria-label="$options.i18n.previousButton" icon="angle-left" class="js-previous-design" @click="navigateToDesign(previousDesign)" @@ -81,7 +94,8 @@ export default { <gl-button v-gl-tooltip.bottom :disabled="!nextDesign" - :title="s__('DesignManagement|Go to next design')" + :title="$options.i18n.nextButton" + :aria-label="$options.i18n.nextButton" icon="angle-right" class="js-next-design" @click="navigateToDesign(nextDesign)" diff --git a/app/assets/javascripts/design_management/components/toolbar/index.vue b/app/assets/javascripts/design_management/components/toolbar/index.vue index 8abf1529f3c..b84fe45b77e 100644 --- a/app/assets/javascripts/design_management/components/toolbar/index.vue +++ b/app/assets/javascripts/design_management/components/toolbar/index.vue @@ -1,13 +1,16 @@ <script> import { GlButton, GlIcon, GlTooltipDirective } from '@gitlab/ui'; import permissionsQuery from 'shared_queries/design_management/design_permissions.query.graphql'; -import { __, sprintf } from '~/locale'; +import { __, s__, sprintf } from '~/locale'; import timeagoMixin from '~/vue_shared/mixins/timeago'; import { DESIGNS_ROUTE_NAME } from '../../router/constants'; import DeleteButton from '../delete_button.vue'; import DesignNavigation from './design_navigation.vue'; export default { + i18n: { + downloadButtonLabel: s__('DesignManagement|Download design'), + }, components: { GlButton, GlIcon, @@ -119,7 +122,8 @@ export default { v-gl-tooltip.bottom :href="image" icon="download" - :title="s__('DesignManagement|Download design')" + :title="$options.i18n.downloadButtonLabel" + :aria-label="$options.i18n.downloadButtonLabel" /> <delete-button v-if="isLatestVersion && canDeleteDesign" diff --git a/app/assets/javascripts/design_management/components/upload/button.vue b/app/assets/javascripts/design_management/components/upload/button.vue index 394ccb3c483..98b7ab5c094 100644 --- a/app/assets/javascripts/design_management/components/upload/button.vue +++ b/app/assets/javascripts/design_management/components/upload/button.vue @@ -38,7 +38,8 @@ export default { " :disabled="isSaving" :loading="isSaving" - variant="default" + category="secondary" + variant="confirm" size="small" @click="openFileUpload" > diff --git a/app/assets/javascripts/design_management/index.js b/app/assets/javascripts/design_management/index.js index f0930ade1b5..aa9f377ef16 100644 --- a/app/assets/javascripts/design_management/index.js +++ b/app/assets/javascripts/design_management/index.js @@ -1,6 +1,7 @@ import Vue from 'vue'; import App from './components/app.vue'; import apolloProvider from './graphql'; +import activeDiscussionQuery from './graphql/queries/active_discussion.query.graphql'; import createRouter from './router'; export default () => { @@ -8,7 +9,8 @@ export default () => { const { issueIid, projectPath, issuePath } = el.dataset; const router = createRouter(issuePath); - apolloProvider.clients.defaultClient.cache.writeData({ + apolloProvider.clients.defaultClient.cache.writeQuery({ + query: activeDiscussionQuery, data: { activeDiscussion: { __typename: 'ActiveDiscussion', diff --git a/app/assets/javascripts/design_management/pages/design/index.vue b/app/assets/javascripts/design_management/pages/design/index.vue index 8a11c25a795..ad78433c7ce 100644 --- a/app/assets/javascripts/design_management/pages/design/index.vue +++ b/app/assets/javascripts/design_management/pages/design/index.vue @@ -2,6 +2,7 @@ import { GlLoadingIcon, GlAlert } from '@gitlab/ui'; import Mousetrap from 'mousetrap'; import { ApolloMutation } from 'vue-apollo'; +import { keysFor, ISSUE_CLOSE_DESIGN } from '~/behaviors/shortcuts/keybindings'; import createFlash from '~/flash'; import { fetchPolicies } from '~/lib/graphql'; import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; @@ -171,7 +172,7 @@ export default { }, }, mounted() { - Mousetrap.bind('esc', this.closeDesign); + Mousetrap.bind(keysFor(ISSUE_CLOSE_DESIGN), this.closeDesign); this.trackPageViewEvent(); // Set active discussion immediately. @@ -180,7 +181,7 @@ export default { this.updateActiveDiscussionFromUrl(); }, beforeDestroy() { - Mousetrap.unbind('esc', this.closeDesign); + Mousetrap.unbind(keysFor(ISSUE_CLOSE_DESIGN)); }, methods: { addImageDiffNoteToStore(store, { data: { createImageDiffNote } }) { diff --git a/app/assets/javascripts/design_management/pages/index.vue b/app/assets/javascripts/design_management/pages/index.vue index 99ac38fc554..04d80dc0069 100644 --- a/app/assets/javascripts/design_management/pages/index.vue +++ b/app/assets/javascripts/design_management/pages/index.vue @@ -379,8 +379,7 @@ export default { <delete-button v-if="isLatestVersion" :is-deleting="loading" - button-variant="warning" - button-category="secondary" + button-variant="default" button-class="gl-mr-3" button-size="small" data-qa-selector="archive_button" @@ -485,9 +484,7 @@ export default { <template #upload-text="{ openFileUpload }"> <gl-sprintf :message="$options.i18n.dropzoneDescriptionText"> <template #link="{ content }"> - <gl-link @click.stop="openFileUpload"> - {{ content }} - </gl-link> + <gl-link @click.stop="openFileUpload">{{ content }}</gl-link> </template> </gl-sprintf> </template> |