diff options
Diffstat (limited to 'app/assets/javascripts/design_management/components')
14 files changed, 204 insertions, 190 deletions
diff --git a/app/assets/javascripts/design_management/components/delete_button.vue b/app/assets/javascripts/design_management/components/delete_button.vue index 1fd902c9ed7..37686dd5a46 100644 --- a/app/assets/javascripts/design_management/components/delete_button.vue +++ b/app/assets/javascripts/design_management/components/delete_button.vue @@ -1,11 +1,12 @@ <script> -import { GlDeprecatedButton, GlModal, GlModalDirective } from '@gitlab/ui'; +import { GlButton, GlModal, GlModalDirective } from '@gitlab/ui'; import { uniqueId } from 'lodash'; +import { s__, __ } from '~/locale'; export default { name: 'DeleteButton', components: { - GlDeprecatedButton, + GlButton, GlModal, }, directives: { @@ -25,40 +26,78 @@ export default { buttonVariant: { type: String, required: false, - default: '', + default: 'info', + }, + buttonCategory: { + type: String, + required: false, + default: 'primary', + }, + buttonIcon: { + type: String, + required: false, + default: undefined, + }, + buttonSize: { + type: String, + required: false, + default: 'medium', }, hasSelectedDesigns: { type: Boolean, required: false, default: true, }, + loading: { + type: Boolean, + required: false, + default: false, + }, }, data() { return { modalId: uniqueId('design-deletion-confirmation-'), }; }, + modal: { + title: s__('DesignManagement|Are you sure you want to archive the selected designs?'), + actionPrimary: { + text: s__('DesignManagement|Archive designs'), + attributes: { variant: 'warning' }, + }, + actionCancel: { + text: __('Cancel'), + }, + }, }; </script> <template> - <div> + <div class="gl-display-flex gl-align-items-center gl-h-full"> <gl-modal :modal-id="modalId" - :title="s__('DesignManagement|Delete designs confirmation')" - :ok-title="s__('DesignManagement|Delete')" - ok-variant="danger" + :title="$options.modal.title" + :action-primary="$options.modal.actionPrimary" + :action-cancel="$options.modal.actionCancel" @ok="$emit('deleteSelectedDesigns')" > - <p>{{ s__('DesignManagement|Are you sure you want to delete the selected designs?') }}</p> + <p> + {{ + s__( + 'DesignManagement|Archived designs will still be available in previous versions of the design collection.', + ) + }} + </p> </gl-modal> - <gl-deprecated-button + <gl-button v-gl-modal-directive="modalId" :variant="buttonVariant" - :disabled="isDeleting || !hasSelectedDesigns" + :category="buttonCategory" + :size="buttonSize" :class="buttonClass" - > - <slot></slot> - </gl-deprecated-button> + :loading="loading" + :icon="buttonIcon" + :disabled="isDeleting || !hasSelectedDesigns" + /> </div> </template> diff --git a/app/assets/javascripts/design_management/components/design_destroyer.vue b/app/assets/javascripts/design_management/components/design_destroyer.vue index 62460ca551c..7ae569216f0 100644 --- a/app/assets/javascripts/design_management/components/design_destroyer.vue +++ b/app/assets/javascripts/design_management/components/design_destroyer.vue @@ -13,13 +13,14 @@ export default { type: Array, required: true, }, + }, + inject: { projectPath: { - type: String, - required: true, + default: '', }, iid: { - type: String, - required: true, + from: 'issueIid', + defaut: '', }, }, computed: { diff --git a/app/assets/javascripts/design_management/components/design_note_pin.vue b/app/assets/javascripts/design_management/components/design_note_pin.vue index 0811397fbad..2b5e62c2870 100644 --- a/app/assets/javascripts/design_management/components/design_note_pin.vue +++ b/app/assets/javascripts/design_management/components/design_note_pin.vue @@ -1,11 +1,11 @@ <script> +import { GlIcon } from '@gitlab/ui'; import { __, sprintf } from '~/locale'; -import Icon from '~/vue_shared/components/icon.vue'; export default { name: 'DesignNotePin', components: { - Icon, + GlIcon, }, props: { position: { @@ -47,13 +47,13 @@ export default { 'btn-transparent comment-indicator': isNewNote, 'js-image-badge badge badge-pill': !isNewNote, }" - class="design-pin gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center" + class="design-pin gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center gl-p-0" type="button" @mousedown="$emit('mousedown', $event)" @mouseup="$emit('mouseup', $event)" @click="$emit('click', $event)" > - <icon v-if="isNewNote" name="image-comment-dark" /> + <gl-icon v-if="isNewNote" name="image-comment-dark" :size="24" /> <template v-else> {{ label }} </template> 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 4aaf43e3a5b..6a20517eed7 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 @@ -230,10 +230,10 @@ export default { </button> </template> <template v-if="discussion.resolved" #resolvedStatus> - <p class="gl-text-gray-700 gl-font-sm gl-m-0 gl-mt-5" data-testid="resolved-message"> + <p class="gl-text-gray-500 gl-font-sm gl-m-0 gl-mt-5" data-testid="resolved-message"> {{ __('Resolved by') }} <gl-link - class="gl-text-gray-700 gl-text-decoration-none gl-font-sm link-inherit-color" + class="gl-text-gray-500 gl-text-decoration-none gl-font-sm link-inherit-color" :href="discussion.resolvedBy.webUrl" target="_blank" >{{ discussion.resolvedBy.name }}</gl-link 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 b1f3a43a66d..172e61920ef 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 @@ -60,7 +60,7 @@ export default { }, mounted() { if (this.isNoteLinked) { - this.$refs.anchor.$el.scrollIntoView({ behavior: 'smooth', inline: 'start' }); + this.$el.scrollIntoView({ behavior: 'smooth', inline: 'start' }); } }, methods: { @@ -80,7 +80,7 @@ export default { </script> <template> - <timeline-entry-item :id="`note_${noteAnchorId}`" ref="anchor" class="design-note note-form"> + <timeline-entry-item :id="`note_${noteAnchorId}`" class="design-note note-form"> <user-avatar-link :link-href="author.webUrl" :img-src="author.avatarUrl" diff --git a/app/assets/javascripts/design_management/components/design_notes/toggle_replies_widget.vue b/app/assets/javascripts/design_management/components/design_notes/toggle_replies_widget.vue index 46c73e3eea8..2e366282de3 100644 --- a/app/assets/javascripts/design_management/components/design_notes/toggle_replies_widget.vue +++ b/app/assets/javascripts/design_management/components/design_notes/toggle_replies_widget.vue @@ -52,18 +52,18 @@ export default { {{ toggleText }} </gl-button> <template v-if="collapsed"> - <span class="gl-text-gray-700">{{ __('Last reply by') }}</span> + <span class="gl-text-gray-500">{{ __('Last reply by') }}</span> <gl-link :href="lastReply.author.webUrl" target="_blank" - class="link-inherit-color gl-text-black-normal gl-text-decoration-none gl-font-weight-bold gl-ml-2 gl-mr-2" + class="link-inherit-color gl-text-body gl-text-decoration-none gl-font-weight-bold gl-ml-2 gl-mr-2" > {{ lastReply.author.name }} </gl-link> <time-ago-tooltip :time="lastReply.createdAt" tooltip-placement="bottom" - class="gl-text-gray-700" + class="gl-text-gray-500" /> </template> </li> diff --git a/app/assets/javascripts/design_management/components/design_sidebar.vue b/app/assets/javascripts/design_management/components/design_sidebar.vue index 333ad2557e8..e5a3590877e 100644 --- a/app/assets/javascripts/design_management/components/design_sidebar.vue +++ b/app/assets/javascripts/design_management/components/design_sidebar.vue @@ -1,8 +1,8 @@ <script> -import { s__ } from '~/locale'; import Cookies from 'js-cookie'; -import { parseBoolean } from '~/lib/utils/common_utils'; import { GlCollapse, GlButton, GlPopover } from '@gitlab/ui'; +import { s__ } from '~/locale'; +import { parseBoolean } from '~/lib/utils/common_utils'; import updateActiveDiscussionMutation from '../graphql/mutations/update_active_discussion.mutation.graphql'; import { extractDiscussions, extractParticipants } from '../utils/design_management_utils'; import { ACTIVE_DISCUSSION_SOURCE_TYPES } from '../constants'; @@ -48,7 +48,7 @@ export default { }; }, discussionParticipants() { - return extractParticipants(this.issue.participants); + return extractParticipants(this.issue.participants.nodes); }, resolvedDiscussions() { return this.discussions.filter(discussion => discussion.resolved); @@ -94,7 +94,7 @@ export default { {{ issue.title }} </h2> <a - class="gl-text-gray-600 gl-text-decoration-none gl-mb-6 gl-display-block" + class="gl-text-gray-400 gl-text-decoration-none gl-mb-6 gl-display-block" :href="issue.webUrl" >{{ issue.webPath }}</a > @@ -132,7 +132,7 @@ export default { data-testid="resolved-comments" :icon="resolvedCommentsToggleIcon" variant="link" - class="link-inherit-color gl-text-black-normal gl-text-decoration-none gl-font-weight-bold gl-mb-4" + class="link-inherit-color gl-text-body gl-text-decoration-none gl-font-weight-bold gl-mb-4" @click="$emit('toggleResolvedComments')" >{{ $options.resolveCommentsToggleText }} ({{ resolvedDiscussions.length }}) </gl-button> diff --git a/app/assets/javascripts/design_management/components/list/item.vue b/app/assets/javascripts/design_management/components/list/item.vue index eaa641d85d6..292b6e09055 100644 --- a/app/assets/javascripts/design_management/components/list/item.vue +++ b/app/assets/javascripts/design_management/components/list/item.vue @@ -74,7 +74,7 @@ export default { deletion: { name: 'file-deletion-solid', classes: 'text-danger-500', - tooltip: __('Deleted in this version'), + tooltip: __('Archived in this version'), }, }; @@ -127,10 +127,10 @@ export default { params: { id: filename }, query: $route.query, }" - class="card cursor-pointer text-plain js-design-list-item design-list-item" + class="card cursor-pointer text-plain js-design-list-item design-list-item design-list-item-new" > <div class="card-body p-0 d-flex-center overflow-hidden position-relative"> - <div v-if="icon.name" class="design-event position-absolute"> + <div v-if="icon.name" data-testid="designEvent" class="design-event position-absolute"> <span :title="icon.tooltip" :aria-label="icon.tooltip"> <icon :name="icon.name" :size="18" :class="icon.classes" /> </span> diff --git a/app/assets/javascripts/design_management/components/toolbar/pagination.vue b/app/assets/javascripts/design_management/components/toolbar/design_navigation.vue index bf62a8f66a6..afca8ed2c6f 100644 --- a/app/assets/javascripts/design_management/components/toolbar/pagination.vue +++ b/app/assets/javascripts/design_management/components/toolbar/design_navigation.vue @@ -1,14 +1,15 @@ <script> /* global Mousetrap */ import 'mousetrap'; +import { GlButton, GlButtonGroup } from '@gitlab/ui'; import { s__, sprintf } from '~/locale'; -import PaginationButton from './pagination_button.vue'; import allDesignsMixin from '../../mixins/all_designs'; import { DESIGN_ROUTE_NAME } from '../../router/constants'; export default { components: { - PaginationButton, + GlButton, + GlButtonGroup, }, mixins: [allDesignsMixin], props: { @@ -31,12 +32,12 @@ export default { }); }, previousDesign() { - if (!this.designsCount) return null; + if (this.currentIndex === 0) return null; return this.designs[this.currentIndex - 1]; }, nextDesign() { - if (!this.designsCount) return null; + if (this.currentIndex + 1 === this.designsCount) return null; return this.designs[this.currentIndex + 1]; }, @@ -65,19 +66,21 @@ export default { <template> <div v-if="designsCount" class="d-flex align-items-center"> {{ paginationText }} - <div class="btn-group ml-3 mr-3"> - <pagination-button - :design="previousDesign" + <gl-button-group class="ml-3 mr-3"> + <gl-button + :disabled="!previousDesign" :title="s__('DesignManagement|Go to previous design')" - icon-name="angle-left" + icon="angle-left" class="js-previous-design" + @click="navigateToDesign(previousDesign)" /> - <pagination-button - :design="nextDesign" + <gl-button + :disabled="!nextDesign" :title="s__('DesignManagement|Go to next design')" - icon-name="angle-right" + icon="angle-right" class="js-next-design" + @click="navigateToDesign(nextDesign)" /> - </div> + </gl-button-group> </div> </template> diff --git a/app/assets/javascripts/design_management/components/toolbar/index.vue b/app/assets/javascripts/design_management/components/toolbar/index.vue index b998dfc47b8..a1cb57123ab 100644 --- a/app/assets/javascripts/design_management/components/toolbar/index.vue +++ b/app/assets/javascripts/design_management/components/toolbar/index.vue @@ -1,20 +1,18 @@ <script> -import { GlDeprecatedButton } from '@gitlab/ui'; +import { GlButton, GlIcon } from '@gitlab/ui'; import { __, sprintf } from '~/locale'; -import Icon from '~/vue_shared/components/icon.vue'; import timeagoMixin from '~/vue_shared/mixins/timeago'; -import Pagination from './pagination.vue'; +import DesignNavigation from './design_navigation.vue'; import DeleteButton from '../delete_button.vue'; import permissionsQuery from '../../graphql/queries/design_permissions.query.graphql'; -import appDataQuery from '../../graphql/queries/app_data.query.graphql'; import { DESIGNS_ROUTE_NAME } from '../../router/constants'; export default { components: { - Icon, - Pagination, + GlButton, + GlIcon, + DesignNavigation, DeleteButton, - GlDeprecatedButton, }, mixins: [timeagoMixin], props: { @@ -55,19 +53,17 @@ export default { permissions: { createDesign: false, }, - projectPath: '', - issueIid: null, }; }, - apollo: { - appData: { - query: appDataQuery, - manual: true, - result({ data: { projectPath, issueIid } }) { - this.projectPath = projectPath; - this.issueIid = issueIid; - }, + inject: { + projectPath: { + default: '', }, + issueIid: { + default: '', + }, + }, + apollo: { permissions: { query: permissionsQuery, variables() { @@ -95,32 +91,36 @@ export default { </script> <template> - <header class="d-flex p-2 bg-white align-items-center js-design-header"> - <router-link - :to="{ - name: $options.DESIGNS_ROUTE_NAME, - query: $route.query, - }" - :aria-label="s__('DesignManagement|Go back to designs')" - class="mr-3 text-plain d-flex justify-content-center align-items-center" - > - <icon :size="18" name="close" /> - </router-link> - <div class="overflow-hidden d-flex align-items-center"> - <h2 class="m-0 str-truncated-100 gl-font-base">{{ filename }}</h2> - <small v-if="updatedAt" class="text-secondary">{{ updatedText }}</small> + <header + class="gl-display-flex gl-align-items-center gl-justify-content-space-between gl-bg-white gl-py-4 gl-pl-4 js-design-header" + > + <div class="gl-display-flex gl-align-items-center"> + <router-link + :to="{ + name: $options.DESIGNS_ROUTE_NAME, + query: $route.query, + }" + :aria-label="s__('DesignManagement|Go back to designs')" + data-testid="close-design" + class="gl-mr-5 gl-display-flex gl-align-items-center gl-justify-content-center text-plain" + > + <gl-icon name="close" /> + </router-link> + <div class="overflow-hidden d-flex align-items-center"> + <h2 class="m-0 str-truncated-100 gl-font-base">{{ filename }}</h2> + <small v-if="updatedAt" class="text-secondary">{{ updatedText }}</small> + </div> </div> - <pagination :id="id" class="ml-auto flex-shrink-0" /> - <gl-deprecated-button :href="image" class="mr-2"> - <icon :size="18" name="download" /> - </gl-deprecated-button> + <design-navigation :id="id" class="ml-auto flex-shrink-0" /> + <gl-button :href="image" icon="download" /> <delete-button v-if="isLatestVersion && canDeleteDesign" + class="gl-ml-3" :is-deleting="isDeleting" - button-variant="danger" + button-variant="warning" + button-icon="archive" + button-category="secondary" @deleteSelectedDesigns="$emit('delete')" - > - <icon :size="18" name="remove" /> - </delete-button> + /> </header> </template> diff --git a/app/assets/javascripts/design_management/components/toolbar/pagination_button.vue b/app/assets/javascripts/design_management/components/toolbar/pagination_button.vue deleted file mode 100644 index f00ecefca01..00000000000 --- a/app/assets/javascripts/design_management/components/toolbar/pagination_button.vue +++ /dev/null @@ -1,48 +0,0 @@ -<script> -import Icon from '~/vue_shared/components/icon.vue'; -import { DESIGN_ROUTE_NAME } from '../../router/constants'; - -export default { - components: { - Icon, - }, - props: { - design: { - type: Object, - required: false, - default: null, - }, - title: { - type: String, - required: true, - }, - iconName: { - type: String, - required: true, - }, - }, - computed: { - designLink() { - if (!this.design) return {}; - - return { - name: DESIGN_ROUTE_NAME, - params: { id: this.design.filename }, - query: this.$route.query, - }; - }, - }, -}; -</script> - -<template> - <router-link - :to="designLink" - :disabled="!design" - :class="{ disabled: !design }" - :aria-label="title" - class="btn btn-default" - > - <icon :name="iconName" /> - </router-link> -</template> diff --git a/app/assets/javascripts/design_management/components/upload/button.vue b/app/assets/javascripts/design_management/components/upload/button.vue index 68555104a3c..c76041c74a8 100644 --- a/app/assets/javascripts/design_management/components/upload/button.vue +++ b/app/assets/javascripts/design_management/components/upload/button.vue @@ -1,10 +1,10 @@ <script> -import { GlDeprecatedButton, GlLoadingIcon, GlTooltipDirective } from '@gitlab/ui'; +import { GlButton, GlLoadingIcon, GlTooltipDirective } from '@gitlab/ui'; import { VALID_DESIGN_FILE_MIMETYPE } from '../../constants'; export default { components: { - GlDeprecatedButton, + GlButton, GlLoadingIcon, }, directives: { @@ -30,7 +30,7 @@ export default { <template> <div> - <gl-deprecated-button + <gl-button v-gl-tooltip.hover :title=" s__( @@ -38,12 +38,13 @@ export default { ) " :disabled="isSaving" - variant="success" + variant="default" + size="small" @click="openFileUpload" > {{ s__('DesignManagement|Upload designs') }} <gl-loading-icon v-if="isSaving" inline class="ml-1" /> - </gl-deprecated-button> + </gl-button> <input ref="fileUpload" diff --git a/app/assets/javascripts/design_management/components/upload/design_dropzone.vue b/app/assets/javascripts/design_management/components/upload/design_dropzone.vue index 33261134c15..7254b7cd16a 100644 --- a/app/assets/javascripts/design_management/components/upload/design_dropzone.vue +++ b/app/assets/javascripts/design_management/components/upload/design_dropzone.vue @@ -1,6 +1,6 @@ <script> import { GlIcon, GlLink, GlSprintf } from '@gitlab/ui'; -import createFlash from '~/flash'; +import { deprecatedCreateFlash as createFlash } from '~/flash'; import uploadDesignMutation from '../../graphql/mutations/upload_design.mutation.graphql'; import { UPLOAD_DESIGN_INVALID_FILETYPE_ERROR } from '../../utils/error_messages'; import { isValidDesignFile } from '../../utils/design_management_utils'; @@ -12,6 +12,17 @@ export default { GlLink, GlSprintf, }, + props: { + hasDesigns: { + type: Boolean, + required: true, + }, + isDraggingDesign: { + type: Boolean, + required: false, + default: false, + }, + }, data() { return { dragCounter: 0, @@ -22,6 +33,12 @@ export default { dragging() { return this.dragCounter !== 0; }, + iconStyles() { + return { + size: this.hasDesigns ? 24 : 16, + class: this.hasDesigns ? 'gl-mb-2' : 'gl-mr-3 gl-text-gray-500', + }; + }, }, methods: { isValidUpload(files) { @@ -76,25 +93,21 @@ export default { > <slot> <button - class="card design-dropzone-card design-dropzone-border w-100 h-100 d-flex-center p-3" + class="card design-dropzone-card design-dropzone-border w-100 h-100 gl-align-items-center gl-justify-content-center gl-p-3" @click="openFileUpload" > - <div class="d-flex-center flex-column text-center"> - <gl-icon name="doc-new" :size="48" class="mb-4" /> - <p> - <gl-sprintf - :message=" - __( - '%{lineOneStart}Drag and drop to upload your designs%{lineOneEnd} or %{linkStart}click to upload%{linkEnd}.', - ) - " - > - <template #lineOne="{ content }" - ><span class="d-block">{{ content }}</span> - </template> - + <div + :class="{ 'gl-flex-direction-column': hasDesigns }" + class="gl-display-flex gl-align-items-center gl-justify-content-center gl-text-center" + data-testid="dropzone-area" + > + <gl-icon name="upload" :size="iconStyles.size" :class="iconStyles.class" /> + <p class="gl-mb-0"> + <gl-sprintf :message="__('Drop or %{linkStart}upload%{linkEnd} designs to attach')"> <template #link="{ content }"> - <gl-link class="h-100 w-100" @click.stop="openFileUpload">{{ content }}</gl-link> + <gl-link @click.stop="openFileUpload"> + {{ content }} + </gl-link> </template> </gl-sprintf> </p> @@ -113,11 +126,11 @@ export default { </slot> <transition name="design-dropzone-fade"> <div - v-show="dragging" + v-show="dragging && !isDraggingDesign" class="card design-dropzone-border design-dropzone-overlay w-100 h-100 position-absolute d-flex-center p-3 bg-white" > <div v-show="!isDragDataValid" class="mw-50 text-center"> - <h3>{{ __('Oh no!') }}</h3> + <h3 :class="{ 'gl-font-base gl-display-inline': !hasDesigns }">{{ __('Oh no!') }}</h3> <span>{{ __( 'You are trying to upload something other than an image. Please upload a .png, .jpg, .jpeg, .gif, .bmp, .tiff or .ico.', @@ -125,7 +138,7 @@ export default { }}</span> </div> <div v-show="isDragDataValid" class="mw-50 text-center"> - <h3>{{ __('Incoming!') }}</h3> + <h3 :class="{ 'gl-font-base gl-display-inline': !hasDesigns }">{{ __('Incoming!') }}</h3> <span>{{ __('Drop your designs to start your upload.') }}</span> </div> </div> diff --git a/app/assets/javascripts/design_management/components/upload/design_version_dropdown.vue b/app/assets/javascripts/design_management/components/upload/design_version_dropdown.vue index 993eac6f37f..a03982cb91b 100644 --- a/app/assets/javascripts/design_management/components/upload/design_version_dropdown.vue +++ b/app/assets/javascripts/design_management/components/upload/design_version_dropdown.vue @@ -1,13 +1,14 @@ <script> -import { GlDropdown, GlDropdownItem } from '@gitlab/ui'; +import { GlNewDropdown, GlNewDropdownItem, GlSprintf } from '@gitlab/ui'; import { __, sprintf } from '~/locale'; import allVersionsMixin from '../../mixins/all_versions'; import { findVersionId } from '../../utils/design_management_utils'; export default { components: { - GlDropdown, - GlDropdownItem, + GlNewDropdown, + GlNewDropdownItem, + GlSprintf, }, mixins: [allVersionsMixin], computed: { @@ -18,7 +19,7 @@ export default { if (!this.queryVersion) return 0; const idx = this.allVersions.findIndex( - version => this.findVersionId(version.node.id) === this.queryVersion, + version => this.findVersionId(version.id) === this.queryVersion, ); // if the currentVersionId isn't a valid version (i.e. not in allVersions) @@ -29,48 +30,52 @@ export default { if (this.queryVersion) return this.queryVersion; const currentVersion = this.allVersions[this.currentVersionIdx]; - return this.findVersionId(currentVersion.node.id); + return this.findVersionId(currentVersion.id); }, dropdownText() { if (this.isLatestVersion) { - return __('Showing Latest Version'); + return __('Showing latest version'); } // allVersions is sorted in reverse chronological order (latest first) const currentVersionNumber = this.allVersions.length - this.currentVersionIdx; - return sprintf(__('Showing Version #%{versionNumber}'), { + return sprintf(__('Showing version #%{versionNumber}'), { versionNumber: currentVersionNumber, }); }, }, methods: { findVersionId, + routeToVersion(versionId) { + this.$router.push({ + path: this.$route.path, + query: { version: this.findVersionId(versionId) }, + }); + }, + versionText(versionId) { + if (this.findVersionId(versionId) === this.latestVersionId) { + return __('Version %{versionNumber} (latest)'); + } + return __('Version %{versionNumber}'); + }, }, }; </script> <template> - <gl-dropdown :text="dropdownText" variant="link" class="design-version-dropdown"> - <gl-dropdown-item v-for="(version, index) in allVersions" :key="version.node.id"> - <router-link - class="d-flex js-version-link" - :to="{ path: $route.path, query: { version: findVersionId(version.node.id) } }" - > - <div class="flex-grow-1 ml-2"> - <div> - <strong - >{{ __('Version') }} {{ allVersions.length - index }} - <span v-if="findVersionId(version.node.id) === latestVersionId" - >({{ __('latest') }})</span - > - </strong> - </div> - </div> - <i - v-if="findVersionId(version.node.id) === currentVersionId" - class="fa fa-check pull-right" - ></i> - </router-link> - </gl-dropdown-item> - </gl-dropdown> + <gl-new-dropdown :text="dropdownText" size="small"> + <gl-new-dropdown-item + v-for="(version, index) in allVersions" + :key="version.id" + :is-check-item="true" + :is-checked="findVersionId(version.id) === currentVersionId" + @click="routeToVersion(version.id)" + > + <gl-sprintf :message="versionText(version.id)"> + <template #versionNumber> + {{ allVersions.length - index }} + </template> + </gl-sprintf> + </gl-new-dropdown-item> + </gl-new-dropdown> </template> |