diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-11-19 11:27:35 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-11-19 11:27:35 +0300 |
commit | 7e9c479f7de77702622631cff2628a9c8dcbc627 (patch) | |
tree | c8f718a08e110ad7e1894510980d2155a6549197 /app/assets/javascripts/design_management/components | |
parent | e852b0ae16db4052c1c567d9efa4facc81146e88 (diff) |
Add latest changes from gitlab-org/gitlab@13-6-stable-eev13.6.0-rc42
Diffstat (limited to 'app/assets/javascripts/design_management/components')
11 files changed, 39 insertions, 179 deletions
diff --git a/app/assets/javascripts/design_management/components/design_destroyer.vue b/app/assets/javascripts/design_management/components/design_destroyer.vue index 7ae569216f0..5d32bfd4a73 100644 --- a/app/assets/javascripts/design_management/components/design_destroyer.vue +++ b/app/assets/javascripts/design_management/components/design_destroyer.vue @@ -1,6 +1,6 @@ <script> import { ApolloMutation } from 'vue-apollo'; -import getDesignListQuery from '../graphql/queries/get_design_list.query.graphql'; +import getDesignListQuery from 'shared_queries/design_management/get_design_list.query.graphql'; import destroyDesignMutation from '../graphql/mutations/destroy_design.mutation.graphql'; import { updateStoreAfterDesignsDelete } from '../utils/cache_update'; 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 845f1aec8cf..6aab4bf423e 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 @@ -210,7 +210,7 @@ export default { :class="{ 'gl-bg-blue-50': isDiscussionActive }" @error="$emit('update-note-error', $event)" > - <template v-if="discussion.resolvable" #resolveDiscussion> + <template v-if="discussion.resolvable" #resolve-discussion> <button v-gl-tooltip :class="{ 'is-active': discussion.resolved }" @@ -224,7 +224,7 @@ export default { <gl-loading-icon v-else inline /> </button> </template> - <template v-if="discussion.resolved" #resolvedStatus> + <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"> {{ __('Resolved by') }} <gl-link @@ -277,7 +277,7 @@ export default { @submit-form="mutate" @cancel-form="hideForm" > - <template v-if="discussion.resolvable" #resolveCheckbox> + <template v-if="discussion.resolvable" #resolve-checkbox> <label data-testid="resolve-checkbox"> <input v-model="shouldChangeResolvedStatus" type="checkbox" /> {{ resolveCheckboxText }} 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 7f4b3b31024..421a4dc274a 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 @@ -108,7 +108,7 @@ export default { </span> </div> <div class="gl-display-flex gl-align-items-baseline"> - <slot name="resolveDiscussion"></slot> + <slot name="resolve-discussion"></slot> <button v-if="isEditButtonVisible" v-gl-tooltip @@ -127,7 +127,7 @@ export default { class="note-text js-note-text md" data-qa-selector="note_content" ></div> - <slot name="resolvedStatus"></slot> + <slot name="resolved-status"></slot> </template> <apollo-mutation v-else diff --git a/app/assets/javascripts/design_management/components/design_notes/design_reply_form.vue b/app/assets/javascripts/design_management/components/design_notes/design_reply_form.vue index 3754e1dbbc1..7aaac58a1ce 100644 --- a/app/assets/javascripts/design_management/components/design_notes/design_reply_form.vue +++ b/app/assets/javascripts/design_management/components/design_notes/design_reply_form.vue @@ -110,7 +110,7 @@ export default { </textarea> </template> </markdown-field> - <slot name="resolveCheckbox"></slot> + <slot name="resolve-checkbox"></slot> <div class="note-form-actions gl-display-flex gl-justify-content-space-between"> <gl-button ref="submitButton" diff --git a/app/assets/javascripts/design_management/components/design_overlay.vue b/app/assets/javascripts/design_management/components/design_overlay.vue index 88f3ce0b8ea..3c2ce693bc0 100644 --- a/app/assets/javascripts/design_management/components/design_overlay.vue +++ b/app/assets/javascripts/design_management/components/design_overlay.vue @@ -112,9 +112,9 @@ export default { }, canMoveNote(note) { const { userPermissions } = note; - const { adminNote } = userPermissions || {}; + const { repositionNote } = userPermissions || {}; - return Boolean(adminNote); + return Boolean(repositionNote); }, isPositionInOverlay(position) { const { top, left } = this.getNoteRelativePosition(position); diff --git a/app/assets/javascripts/design_management/components/design_scaler.vue b/app/assets/javascripts/design_management/components/design_scaler.vue index 8d26f84641e..85c6bd4d79e 100644 --- a/app/assets/javascripts/design_management/components/design_scaler.vue +++ b/app/assets/javascripts/design_management/components/design_scaler.vue @@ -1,5 +1,5 @@ <script> -import { GlIcon } from '@gitlab/ui'; +import { GlButtonGroup, GlButton } from '@gitlab/ui'; const SCALE_STEP_SIZE = 0.2; const DEFAULT_SCALE = 1; @@ -8,7 +8,8 @@ const MAX_SCALE = 2; export default { components: { - GlIcon, + GlButtonGroup, + GlButton, }, data() { return { @@ -49,17 +50,9 @@ export default { </script> <template> - <div class="design-scaler btn-group" role="group"> - <button class="btn" :disabled="disableDecrease" @click="decrementScale"> - <span class="gl-display-flex gl-justify-content-center gl-align-items-center gl-icon s16"> - – - </span> - </button> - <button class="btn" :disabled="disableReset" @click="resetScale"> - <gl-icon name="redo" /> - </button> - <button class="btn" :disabled="disableIncrease" @click="incrementScale"> - <gl-icon name="plus" /> - </button> - </div> + <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-group> </template> diff --git a/app/assets/javascripts/design_management/components/design_sidebar.vue b/app/assets/javascripts/design_management/components/design_sidebar.vue index fb8e74c8c4c..41dcec38abe 100644 --- a/app/assets/javascripts/design_management/components/design_sidebar.vue +++ b/app/assets/javascripts/design_management/components/design_sidebar.vue @@ -207,6 +207,6 @@ export default { /> </gl-collapse> </template> - <slot name="replyForm"></slot> + <slot name="reply-form"></slot> </div> </template> 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 2719d701c12..4edc2e410c7 100644 --- a/app/assets/javascripts/design_management/components/toolbar/design_navigation.vue +++ b/app/assets/javascripts/design_management/components/toolbar/design_navigation.vue @@ -1,7 +1,7 @@ <script> /* global Mousetrap */ import 'mousetrap'; -import { GlButton, GlButtonGroup } from '@gitlab/ui'; +import { GlButton, GlButtonGroup, GlTooltipDirective } from '@gitlab/ui'; import { s__, sprintf } from '~/locale'; import allDesignsMixin from '../../mixins/all_designs'; import { DESIGN_ROUTE_NAME } from '../../router/constants'; @@ -11,6 +11,9 @@ export default { GlButton, GlButtonGroup, }, + directives: { + GlTooltip: GlTooltipDirective, + }, mixins: [allDesignsMixin], props: { id: { @@ -68,6 +71,7 @@ export default { {{ paginationText }} <gl-button-group class="gl-mx-5"> <gl-button + v-gl-tooltip.bottom :disabled="!previousDesign" :title="s__('DesignManagement|Go to previous design')" icon="angle-left" @@ -75,6 +79,7 @@ export default { @click="navigateToDesign(previousDesign)" /> <gl-button + v-gl-tooltip.bottom :disabled="!nextDesign" :title="s__('DesignManagement|Go to next design')" icon="angle-right" diff --git a/app/assets/javascripts/design_management/components/toolbar/index.vue b/app/assets/javascripts/design_management/components/toolbar/index.vue index 8d25d467d59..4caee863df8 100644 --- a/app/assets/javascripts/design_management/components/toolbar/index.vue +++ b/app/assets/javascripts/design_management/components/toolbar/index.vue @@ -1,10 +1,10 @@ <script> -import { GlButton, GlIcon } from '@gitlab/ui'; +import { GlButton, GlIcon, GlTooltipDirective } from '@gitlab/ui'; +import permissionsQuery from 'shared_queries/design_management/design_permissions.query.graphql'; import { __, sprintf } from '~/locale'; import timeagoMixin from '~/vue_shared/mixins/timeago'; import DesignNavigation from './design_navigation.vue'; import DeleteButton from '../delete_button.vue'; -import permissionsQuery from '../../graphql/queries/design_permissions.query.graphql'; import { DESIGNS_ROUTE_NAME } from '../../router/constants'; export default { @@ -14,6 +14,9 @@ export default { DesignNavigation, DeleteButton, }, + directives: { + GlTooltip: GlTooltipDirective, + }, mixins: [timeagoMixin], props: { id: { @@ -112,14 +115,21 @@ export default { </div> </div> <design-navigation :id="id" class="gl-ml-auto gl-flex-shrink-0" /> - <gl-button :href="image" icon="download" /> + <gl-button + v-gl-tooltip.bottom + :href="image" + icon="download" + :title="s__('DesignManagement|Download design')" + /> <delete-button v-if="isLatestVersion && canDeleteDesign" + v-gl-tooltip.bottom class="gl-ml-3" :is-deleting="isDeleting" button-variant="warning" button-icon="archive" button-category="secondary" + :title="s__('DesignManagement|Archive design')" @deleteSelectedDesigns="$emit('delete')" /> </header> diff --git a/app/assets/javascripts/design_management/components/upload/button.vue b/app/assets/javascripts/design_management/components/upload/button.vue index c76041c74a8..d7b287f663b 100644 --- a/app/assets/javascripts/design_management/components/upload/button.vue +++ b/app/assets/javascripts/design_management/components/upload/button.vue @@ -1,11 +1,10 @@ <script> -import { GlButton, GlLoadingIcon, GlTooltipDirective } from '@gitlab/ui'; +import { GlButton, GlTooltipDirective } from '@gitlab/ui'; import { VALID_DESIGN_FILE_MIMETYPE } from '../../constants'; export default { components: { GlButton, - GlLoadingIcon, }, directives: { GlTooltip: GlTooltipDirective, @@ -38,12 +37,12 @@ export default { ) " :disabled="isSaving" + :loading="isSaving" variant="default" size="small" @click="openFileUpload" > {{ s__('DesignManagement|Upload designs') }} - <gl-loading-icon v-if="isSaving" inline class="ml-1" /> </gl-button> <input diff --git a/app/assets/javascripts/design_management/components/upload/design_dropzone.vue b/app/assets/javascripts/design_management/components/upload/design_dropzone.vue deleted file mode 100644 index 6694b0dab8d..00000000000 --- a/app/assets/javascripts/design_management/components/upload/design_dropzone.vue +++ /dev/null @@ -1,147 +0,0 @@ -<script> -import { GlIcon, GlLink, GlSprintf } from '@gitlab/ui'; -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'; -import { VALID_DATA_TRANSFER_TYPE, VALID_DESIGN_FILE_MIMETYPE } from '../../constants'; - -export default { - components: { - GlIcon, - GlLink, - GlSprintf, - }, - props: { - hasDesigns: { - type: Boolean, - required: true, - }, - isDraggingDesign: { - type: Boolean, - required: false, - default: false, - }, - }, - data() { - return { - dragCounter: 0, - isDragDataValid: false, - }; - }, - computed: { - 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) { - return files.every(isValidDesignFile); - }, - isValidDragDataType({ dataTransfer }) { - return Boolean(dataTransfer && dataTransfer.types.some(t => t === VALID_DATA_TRANSFER_TYPE)); - }, - ondrop({ dataTransfer = {} }) { - this.dragCounter = 0; - // User already had feedback when dropzone was active, so bail here - if (!this.isDragDataValid) { - return; - } - - const { files } = dataTransfer; - if (!this.isValidUpload(Array.from(files))) { - createFlash(UPLOAD_DESIGN_INVALID_FILETYPE_ERROR); - return; - } - - this.$emit('change', files); - }, - ondragenter(e) { - this.dragCounter += 1; - this.isDragDataValid = this.isValidDragDataType(e); - }, - ondragleave() { - this.dragCounter -= 1; - }, - openFileUpload() { - this.$refs.fileUpload.click(); - }, - onDesignInputChange(e) { - this.$emit('change', e.target.files); - }, - }, - uploadDesignMutation, - VALID_DESIGN_FILE_MIMETYPE, -}; -</script> - -<template> - <div - class="gl-w-full gl-relative" - @dragstart.prevent.stop - @dragend.prevent.stop - @dragover.prevent.stop - @dragenter.prevent.stop="ondragenter" - @dragleave.prevent.stop="ondragleave" - @drop.prevent.stop="ondrop" - > - <slot> - <button - class="card design-dropzone-card design-dropzone-border gl-w-full gl-h-full gl-align-items-center gl-justify-content-center gl-p-3" - @click="openFileUpload" - > - <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 @click.stop="openFileUpload"> - {{ content }} - </gl-link> - </template> - </gl-sprintf> - </p> - </div> - </button> - - <input - ref="fileUpload" - type="file" - name="design_file" - :accept="$options.VALID_DESIGN_FILE_MIMETYPE.mimetype" - class="hide" - multiple - @change="onDesignInputChange" - /> - </slot> - <transition name="design-dropzone-fade"> - <div - v-show="dragging && !isDraggingDesign" - class="card design-dropzone-border design-dropzone-overlay gl-w-full gl-h-full gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center gl-p-3 gl-bg-white" - > - <div v-show="!isDragDataValid" class="mw-50 gl-text-center"> - <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.', - ) - }}</span> - </div> - <div v-show="isDragDataValid" class="mw-50 gl-text-center"> - <h3 :class="{ 'gl-font-base gl-display-inline': !hasDesigns }">{{ __('Incoming!') }}</h3> - <span>{{ __('Drop your designs to start your upload.') }}</span> - </div> - </div> - </transition> - </div> -</template> |