diff options
Diffstat (limited to 'app/assets/javascripts/design_management')
10 files changed, 67 insertions, 13 deletions
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 336ce714a05..818299e36bd 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 @@ -123,7 +123,7 @@ export default { category="primary" variant="confirm" type="submit" - data-track-event="click_button" + data-track-action="click_button" data-qa-selector="save_comment_button" @click="$emit('submit-form')" > diff --git a/app/assets/javascripts/design_management/components/design_scaler.vue b/app/assets/javascripts/design_management/components/design_scaler.vue index c9273f97bed..af3d4453a6a 100644 --- a/app/assets/javascripts/design_management/components/design_scaler.vue +++ b/app/assets/javascripts/design_management/components/design_scaler.vue @@ -1,16 +1,21 @@ <script> import { GlButtonGroup, GlButton } from '@gitlab/ui'; -const SCALE_STEP_SIZE = 0.2; const DEFAULT_SCALE = 1; const MIN_SCALE = 1; -const MAX_SCALE = 2; +const ZOOM_LEVELS = 5; export default { components: { GlButtonGroup, GlButton, }, + props: { + maxScale: { + type: Number, + required: true, + }, + }, data() { return { scale: DEFAULT_SCALE, @@ -24,7 +29,10 @@ export default { return this.scale === DEFAULT_SCALE; }, disableIncrease() { - return this.scale >= MAX_SCALE; + return this.scale >= this.maxScale; + }, + stepSize() { + return (this.maxScale - MIN_SCALE) / ZOOM_LEVELS; }, }, methods: { @@ -37,10 +45,10 @@ export default { this.$emit('scale', this.scale); }, incrementScale() { - this.setScale(this.scale + SCALE_STEP_SIZE); + this.setScale(Math.min(this.scale + this.stepSize, this.maxScale)); }, decrementScale() { - this.setScale(this.scale - SCALE_STEP_SIZE); + this.setScale(Math.max(this.scale - this.stepSize, MIN_SCALE)); }, resetScale() { this.setScale(DEFAULT_SCALE); diff --git a/app/assets/javascripts/design_management/components/design_sidebar.vue b/app/assets/javascripts/design_management/components/design_sidebar.vue index efa1ef2107a..ced76eb4843 100644 --- a/app/assets/javascripts/design_management/components/design_sidebar.vue +++ b/app/assets/javascripts/design_management/components/design_sidebar.vue @@ -202,7 +202,7 @@ export default { data-testid="resolved-discussion" @error="$emit('onDesignDiscussionError', $event)" @updateNoteError="$emit('updateNoteError', $event)" - @openForm="updateDiscussionWithOpenForm" + @open-form="updateDiscussionWithOpenForm" @click.native.stop="updateActiveDiscussion(discussion.notes[0].id)" /> </gl-collapse> diff --git a/app/assets/javascripts/design_management/components/image.vue b/app/assets/javascripts/design_management/components/image.vue index 8ab94cd2c4b..5354c7756f5 100644 --- a/app/assets/javascripts/design_management/components/image.vue +++ b/app/assets/javascripts/design_management/components/image.vue @@ -57,6 +57,7 @@ export default { methods: { onImgLoad() { requestIdleCallback(this.setBaseImageSize, { timeout: 1000 }); + requestIdleCallback(this.setImageNaturalScale, { timeout: 1000 }); performanceMarkAndMeasure({ measures: [ { @@ -79,6 +80,27 @@ export default { }; this.onResize({ width: this.baseImageSize.width, height: this.baseImageSize.height }); }, + setImageNaturalScale() { + const { contentImg } = this.$refs; + + if (!contentImg) { + return; + } + + const { naturalHeight, naturalWidth } = contentImg; + + // In case image 404s + if (naturalHeight === 0 || naturalWidth === 0) { + return; + } + + const { height, width } = this.baseImageSize; + + this.$parent.$emit( + 'setMaxScale', + Math.round(((height + width) / (naturalHeight + naturalWidth)) * 100) / 100, + ); + }, onResize({ width, height }) { this.$emit('resize', { width, height }); }, diff --git a/app/assets/javascripts/design_management/graphql/fragments/version.fragment.graphql b/app/assets/javascripts/design_management/graphql/fragments/version.fragment.graphql index 7eb40b12f51..b715633a9f2 100644 --- a/app/assets/javascripts/design_management/graphql/fragments/version.fragment.graphql +++ b/app/assets/javascripts/design_management/graphql/fragments/version.fragment.graphql @@ -1,4 +1,11 @@ fragment VersionListItem on DesignVersion { id sha + createdAt + author { + __typename + id + name + avatarUrl + } } diff --git a/app/assets/javascripts/design_management/graphql/mutations/upload_design.mutation.graphql b/app/assets/javascripts/design_management/graphql/mutations/upload_design.mutation.graphql index 84aeb374351..111f5ac18a7 100644 --- a/app/assets/javascripts/design_management/graphql/mutations/upload_design.mutation.graphql +++ b/app/assets/javascripts/design_management/graphql/mutations/upload_design.mutation.graphql @@ -1,13 +1,15 @@ #import "../fragments/design.fragment.graphql" +#import "../fragments/version.fragment.graphql" mutation uploadDesign($files: [Upload!]!, $projectPath: ID!, $iid: ID!) { designManagementUpload(input: { projectPath: $projectPath, iid: $iid, files: $files }) { designs { ...DesignItem versions { + __typename nodes { - id - sha + __typename + ...VersionListItem } } } diff --git a/app/assets/javascripts/design_management/pages/design/index.vue b/app/assets/javascripts/design_management/pages/design/index.vue index 48ee7068809..38ea5406c02 100644 --- a/app/assets/javascripts/design_management/pages/design/index.vue +++ b/app/assets/javascripts/design_management/pages/design/index.vue @@ -46,6 +46,7 @@ import { import { trackDesignDetailView, servicePingDesignDetailView } from '../../utils/tracking'; const DEFAULT_SCALE = 1; +const DEFAULT_MAX_SCALE = 2; export default { components: { @@ -96,6 +97,7 @@ export default { scale: DEFAULT_SCALE, resolvedDiscussionsExpanded: false, prevCurrentUserTodos: null, + maxScale: DEFAULT_MAX_SCALE, }; }, apollo: { @@ -309,9 +311,7 @@ export default { this.isLatestVersion, ); - if (this.glFeatures.usageDataDesignAction) { - servicePingDesignDetailView(); - } + servicePingDesignDetailView(); }, updateActiveDiscussion(id, source = ACTIVE_DISCUSSION_SOURCE_TYPES.discussion) { this.$apollo.mutate({ @@ -330,6 +330,9 @@ export default { toggleResolvedComments() { this.resolvedDiscussionsExpanded = !this.resolvedDiscussionsExpanded; }, + setMaxScale(event) { + this.maxScale = 1 / event; + }, }, createImageDiffNoteMutation, DESIGNS_ROUTE_NAME, @@ -378,12 +381,13 @@ export default { @openCommentForm="openCommentForm" @closeCommentForm="closeCommentForm" @moveNote="onMoveNote" + @setMaxScale="setMaxScale" /> <div class="design-scaler-wrapper gl-absolute gl-mb-6 gl-display-flex gl-justify-content-center gl-align-items-center" > - <design-scaler @scale="scale = $event" /> + <design-scaler :max-scale="maxScale" @scale="scale = $event" /> </div> </div> <design-sidebar diff --git a/app/assets/javascripts/design_management/pages/index.vue b/app/assets/javascripts/design_management/pages/index.vue index ad557f64ce4..e66ae822a34 100644 --- a/app/assets/javascripts/design_management/pages/index.vue +++ b/app/assets/javascripts/design_management/pages/index.vue @@ -140,6 +140,9 @@ export default { this.$el.scrollIntoView(); } }, + beforeDestroy() { + document.removeEventListener('paste', this.onDesignPaste); + }, methods: { resetFilesToBeSaved() { this.filesToBeSaved = []; diff --git a/app/assets/javascripts/design_management/utils/design_management_utils.js b/app/assets/javascripts/design_management/utils/design_management_utils.js index 05b220801f2..7470f3d259b 100644 --- a/app/assets/javascripts/design_management/utils/design_management_utils.js +++ b/app/assets/javascripts/design_management/utils/design_management_utils.js @@ -85,6 +85,13 @@ export const designUploadOptimisticResponse = (files) => { __typename: 'DesignVersion', id: -uniqueId(), sha: -uniqueId(), + createdAt: '', + author: { + __typename: 'UserCore', + id: -uniqueId(), + name: '', + avatarUrl: '', + }, }, }, })); diff --git a/app/assets/javascripts/design_management/utils/error_messages.js b/app/assets/javascripts/design_management/utils/error_messages.js index e7b2c814bb3..afee7e81791 100644 --- a/app/assets/javascripts/design_management/utils/error_messages.js +++ b/app/assets/javascripts/design_management/utils/error_messages.js @@ -1,3 +1,4 @@ +/* eslint-disable @gitlab/require-string-literal-i18n-helpers */ import { __, s__, n__, sprintf } from '~/locale'; export const ADD_DISCUSSION_COMMENT_ERROR = s__( |