diff options
Diffstat (limited to 'app/assets/javascripts/design_management/components')
11 files changed, 31 insertions, 43 deletions
diff --git a/app/assets/javascripts/design_management/components/delete_button.vue b/app/assets/javascripts/design_management/components/delete_button.vue index 970197ef41b..273fa3f6be2 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' }, + attributes: { variant: 'warning', 'data-qa-selector': 'confirm_archiving_button' }, }, actionCancel: { text: __('Cancel'), 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 2b5e62c2870..320e0654aab 100644 --- a/app/assets/javascripts/design_management/components/design_note_pin.vue +++ b/app/assets/javascripts/design_management/components/design_note_pin.vue @@ -17,19 +17,11 @@ export default { required: false, default: null, }, - repositioning: { - type: Boolean, - required: false, - default: false, - }, }, computed: { isNewNote() { return this.label === null; }, - pinStyle() { - return this.repositioning ? { ...this.position, cursor: 'move' } : this.position; - }, pinLabel() { return this.isNewNote ? __('Comment form position') @@ -41,13 +33,13 @@ export default { <template> <button - :style="pinStyle" + :style="position" :aria-label="pinLabel" :class="{ - 'btn-transparent comment-indicator': isNewNote, + 'btn-transparent comment-indicator gl-p-0': isNewNote, 'js-image-badge badge badge-pill': !isNewNote, }" - class="design-pin gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center gl-p-0" + class="gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center gl-font-lg gl-outline-0!" type="button" @mousedown="$emit('mousedown', $event)" @mouseup="$emit('mouseup', $event)" diff --git a/app/assets/javascripts/design_management/components/design_overlay.vue b/app/assets/javascripts/design_management/components/design_overlay.vue index 5c4a3ab5f94..88f3ce0b8ea 100644 --- a/app/assets/javascripts/design_management/components/design_overlay.vue +++ b/app/assets/javascripts/design_management/components/design_overlay.vue @@ -266,7 +266,7 @@ export default { type="button" role="button" :aria-label="$options.i18n.newCommentButtonLabel" - class="gl-absolute gl-w-full gl-h-full gl-p-0 gl-top-0 gl-left-0 gl-outline-0! btn-transparent design-detail-overlay-add-comment" + class="gl-absolute gl-w-full gl-h-full gl-p-0 gl-top-0 gl-left-0 gl-outline-0! btn-transparent gl-hover-cursor-crosshair" data-qa-selector="design_image_button" @mouseup="onAddCommentMouseup" ></button> @@ -276,7 +276,6 @@ export default { v-if="resolvedDiscussionsExpanded || !note.resolved" :key="note.id" :label="note.index" - :repositioning="isMovingNote(note.id)" :position=" isMovingNote(note.id) && movingNoteNewPosition ? getNotePositionStyle(movingNoteNewPosition) @@ -290,7 +289,6 @@ export default { <design-note-pin v-if="currentCommentForm" :position="currentCommentPositionStyle" - :repositioning="isMovingCurrentComment" @mousedown.stop="onNoteMousedown" @mouseup.stop="onNoteMouseup" /> diff --git a/app/assets/javascripts/design_management/components/design_presentation.vue b/app/assets/javascripts/design_management/components/design_presentation.vue index 84dbb2809d9..c4d904e0d91 100644 --- a/app/assets/javascripts/design_management/components/design_presentation.vue +++ b/app/assets/javascripts/design_management/components/design_presentation.vue @@ -286,7 +286,7 @@ export default { <template> <div ref="presentationViewport" - class="h-100 w-100 p-3 overflow-auto position-relative" + class="gl-h-full gl-w-full gl-p-5 overflow-auto gl-relative" :style="presentationStyle" @mousedown="onPresentationMousedown" @mousemove="onPresentationMousemove" @@ -297,7 +297,7 @@ export default { @touchend="onPresentationMouseup" @touchcancel="onPresentationMouseup" > - <div class="h-100 w-100 d-flex align-items-center position-relative"> + <div class="gl-h-full gl-w-full gl-display-flex gl-align-items-center gl-relative"> <design-image v-if="image" :image="image" diff --git a/app/assets/javascripts/design_management/components/design_scaler.vue b/app/assets/javascripts/design_management/components/design_scaler.vue index 55dee74bef5..8d26f84641e 100644 --- a/app/assets/javascripts/design_management/components/design_scaler.vue +++ b/app/assets/javascripts/design_management/components/design_scaler.vue @@ -51,7 +51,7 @@ export default { <template> <div class="design-scaler btn-group" role="group"> <button class="btn" :disabled="disableDecrease" @click="decrementScale"> - <span class="d-flex-center gl-icon s16"> + <span class="gl-display-flex gl-justify-content-center gl-align-items-center gl-icon s16"> – </span> </button> diff --git a/app/assets/javascripts/design_management/components/design_sidebar.vue b/app/assets/javascripts/design_management/components/design_sidebar.vue index df425e3b96d..fb8e74c8c4c 100644 --- a/app/assets/javascripts/design_management/components/design_sidebar.vue +++ b/app/assets/javascripts/design_management/components/design_sidebar.vue @@ -71,14 +71,6 @@ export default { resolvedCommentsToggleIcon() { return this.resolvedDiscussionsExpanded ? 'chevron-down' : 'chevron-right'; }, - showTodoButton() { - return this.glFeatures.designManagementTodoButton; - }, - sidebarWrapperClass() { - return { - 'gl-pt-0': this.showTodoButton, - }; - }, }, watch: { isResolvedCommentsPopoverHidden(newVal) { @@ -121,12 +113,11 @@ export default { </script> <template> - <div class="image-notes" :class="sidebarWrapperClass" @click="handleSidebarClick"> + <div class="image-notes gl-pt-0" @click="handleSidebarClick"> <div - v-if="showTodoButton" class="gl-py-4 gl-mb-4 gl-display-flex gl-justify-content-space-between gl-align-items-center gl-border-b-1 gl-border-b-solid gl-border-b-gray-100" > - <span>{{ __('To-Do') }}</span> + <span>{{ __('To Do') }}</span> <design-todo-button :design="design" @error="$emit('todoError', $event)" /> </div> <h2 class="gl-font-weight-bold gl-mt-0"> diff --git a/app/assets/javascripts/design_management/components/image.vue b/app/assets/javascripts/design_management/components/image.vue index 91b7b576e0c..53062e6ebb0 100644 --- a/app/assets/javascripts/design_management/components/image.vue +++ b/app/assets/javascripts/design_management/components/image.vue @@ -93,8 +93,8 @@ export default { </script> <template> - <div class="m-auto js-design-image"> - <gl-icon v-if="imageError" class="text-secondary-100" name="media-broken" :size="48" /> + <div class="gl-mx-auto gl-my-auto js-design-image"> + <gl-icon v-if="imageError" class="gl-text-gray-200" name="media-broken" :size="48" /> <img v-show="!imageError" ref="contentImg" diff --git a/app/assets/javascripts/design_management/components/list/item.vue b/app/assets/javascripts/design_management/components/list/item.vue index 36ea812d92e..fa09c7c15cc 100644 --- a/app/assets/javascripts/design_management/components/list/item.vue +++ b/app/assets/javascripts/design_management/components/list/item.vue @@ -132,7 +132,13 @@ export default { > <div v-if="icon.name" data-testid="designEvent" class="design-event gl-absolute"> <span :title="icon.tooltip" :aria-label="icon.tooltip"> - <gl-icon :name="icon.name" :size="18" :class="icon.classes" /> + <gl-icon + :name="icon.name" + :size="18" + :class="icon.classes" + data-qa-selector="design_status_icon" + :data-qa-status="icon.name" + /> </span> </div> <gl-intersection-observer @appear="onAppear"> @@ -149,6 +155,7 @@ export default { :alt="filename" class="gl-display-block gl-mx-auto gl-max-w-full mh-100 design-img" data-qa-selector="design_image" + :data-qa-filename="filename" @load="onImageLoad" @error="onImageError" /> 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 afca8ed2c6f..2719d701c12 100644 --- a/app/assets/javascripts/design_management/components/toolbar/design_navigation.vue +++ b/app/assets/javascripts/design_management/components/toolbar/design_navigation.vue @@ -64,9 +64,9 @@ export default { </script> <template> - <div v-if="designsCount" class="d-flex align-items-center"> + <div v-if="designsCount" class="gl-display-flex gl-align-items-center"> {{ paginationText }} - <gl-button-group class="ml-3 mr-3"> + <gl-button-group class="gl-mx-5"> <gl-button :disabled="!previousDesign" :title="s__('DesignManagement|Go to previous design')" diff --git a/app/assets/javascripts/design_management/components/toolbar/index.vue b/app/assets/javascripts/design_management/components/toolbar/index.vue index a1cb57123ab..8d25d467d59 100644 --- a/app/assets/javascripts/design_management/components/toolbar/index.vue +++ b/app/assets/javascripts/design_management/components/toolbar/index.vue @@ -106,12 +106,12 @@ export default { > <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 class="gl-overflow-hidden gl-display-flex gl-align-items-center"> + <h2 class="gl-m-0 str-truncated-100 gl-font-base">{{ filename }}</h2> + <small v-if="updatedAt" class="gl-text-gray-500">{{ updatedText }}</small> </div> </div> - <design-navigation :id="id" class="ml-auto flex-shrink-0" /> + <design-navigation :id="id" class="gl-ml-auto gl-flex-shrink-0" /> <gl-button :href="image" icon="download" /> <delete-button v-if="isLatestVersion && canDeleteDesign" 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 7254b7cd16a..6694b0dab8d 100644 --- a/app/assets/javascripts/design_management/components/upload/design_dropzone.vue +++ b/app/assets/javascripts/design_management/components/upload/design_dropzone.vue @@ -83,7 +83,7 @@ export default { <template> <div - class="w-100 position-relative" + class="gl-w-full gl-relative" @dragstart.prevent.stop @dragend.prevent.stop @dragover.prevent.stop @@ -93,7 +93,7 @@ export default { > <slot> <button - class="card design-dropzone-card design-dropzone-border w-100 h-100 gl-align-items-center gl-justify-content-center gl-p-3" + 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 @@ -127,9 +127,9 @@ export default { <transition name="design-dropzone-fade"> <div 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" + 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 text-center"> + <div v-show="!isDragDataValid" class="mw-50 gl-text-center"> <h3 :class="{ 'gl-font-base gl-display-inline': !hasDesigns }">{{ __('Oh no!') }}</h3> <span>{{ __( @@ -137,7 +137,7 @@ export default { ) }}</span> </div> - <div v-show="isDragDataValid" class="mw-50 text-center"> + <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> |