diff options
Diffstat (limited to 'app/assets/javascripts/design_management/pages')
-rw-r--r-- | app/assets/javascripts/design_management/pages/design/index.vue | 24 | ||||
-rw-r--r-- | app/assets/javascripts/design_management/pages/index.vue | 47 |
2 files changed, 38 insertions, 33 deletions
diff --git a/app/assets/javascripts/design_management/pages/design/index.vue b/app/assets/javascripts/design_management/pages/design/index.vue index 492ed2e8719..8a11c25a795 100644 --- a/app/assets/javascripts/design_management/pages/design/index.vue +++ b/app/assets/javascripts/design_management/pages/design/index.vue @@ -1,21 +1,27 @@ <script> -import Mousetrap from 'mousetrap'; import { GlLoadingIcon, GlAlert } from '@gitlab/ui'; +import Mousetrap from 'mousetrap'; import { ApolloMutation } from 'vue-apollo'; import createFlash from '~/flash'; import { fetchPolicies } from '~/lib/graphql'; import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; -import allVersionsMixin from '../../mixins/all_versions'; -import Toolbar from '../../components/toolbar/index.vue'; import DesignDestroyer from '../../components/design_destroyer.vue'; -import DesignScaler from '../../components/design_scaler.vue'; -import DesignPresentation from '../../components/design_presentation.vue'; import DesignReplyForm from '../../components/design_notes/design_reply_form.vue'; +import DesignPresentation from '../../components/design_presentation.vue'; +import DesignScaler from '../../components/design_scaler.vue'; import DesignSidebar from '../../components/design_sidebar.vue'; -import getDesignQuery from '../../graphql/queries/get_design.query.graphql'; +import Toolbar from '../../components/toolbar/index.vue'; +import { ACTIVE_DISCUSSION_SOURCE_TYPES, DESIGN_DETAIL_LAYOUT_CLASSLIST } from '../../constants'; import createImageDiffNoteMutation from '../../graphql/mutations/create_image_diff_note.mutation.graphql'; import repositionImageDiffNoteMutation from '../../graphql/mutations/reposition_image_diff_note.mutation.graphql'; import updateActiveDiscussionMutation from '../../graphql/mutations/update_active_discussion.mutation.graphql'; +import getDesignQuery from '../../graphql/queries/get_design.query.graphql'; +import allVersionsMixin from '../../mixins/all_versions'; +import { DESIGNS_ROUTE_NAME } from '../../router/constants'; +import { + updateStoreAfterAddImageDiffNote, + updateStoreAfterRepositionImageDiffNote, +} from '../../utils/cache_update'; import { extractDiscussions, extractDesign, @@ -25,10 +31,6 @@ import { getPageLayoutElement, } from '../../utils/design_management_utils'; import { - updateStoreAfterAddImageDiffNote, - updateStoreAfterRepositionImageDiffNote, -} from '../../utils/cache_update'; -import { ADD_DISCUSSION_COMMENT_ERROR, ADD_IMAGE_DIFF_NOTE_ERROR, UPDATE_IMAGE_DIFF_NOTE_ERROR, @@ -39,8 +41,6 @@ import { designDeletionError, } from '../../utils/error_messages'; import { trackDesignDetailView, usagePingDesignDetailView } from '../../utils/tracking'; -import { DESIGNS_ROUTE_NAME } from '../../router/constants'; -import { ACTIVE_DISCUSSION_SOURCE_TYPES, DESIGN_DETAIL_LAYOUT_CLASSLIST } from '../../constants'; const DEFAULT_SCALE = 1; diff --git a/app/assets/javascripts/design_management/pages/index.vue b/app/assets/javascripts/design_management/pages/index.vue index 5c82a7331b6..c73c8fb6ca4 100644 --- a/app/assets/javascripts/design_management/pages/index.vue +++ b/app/assets/javascripts/design_management/pages/index.vue @@ -1,29 +1,22 @@ <script> import { GlLoadingIcon, GlButton, GlAlert, GlLink, GlSprintf } from '@gitlab/ui'; import VueDraggable from 'vuedraggable'; -import getDesignListQuery from 'shared_queries/design_management/get_design_list.query.graphql'; import permissionsQuery from 'shared_queries/design_management/design_permissions.query.graphql'; +import getDesignListQuery from 'shared_queries/design_management/get_design_list.query.graphql'; import createFlash, { FLASH_TYPES } from '~/flash'; -import { __, s__, sprintf } from '~/locale'; import { getFilename } from '~/lib/utils/file_upload'; -import UploadButton from '../components/upload/button.vue'; +import { __, s__, sprintf } from '~/locale'; +import DesignDropzone from '~/vue_shared/components/upload_dropzone/upload_dropzone.vue'; import DeleteButton from '../components/delete_button.vue'; -import Design from '../components/list/item.vue'; import DesignDestroyer from '../components/design_destroyer.vue'; +import Design from '../components/list/item.vue'; +import UploadButton from '../components/upload/button.vue'; import DesignVersionDropdown from '../components/upload/design_version_dropdown.vue'; -import DesignDropzone from '~/vue_shared/components/upload_dropzone/upload_dropzone.vue'; -import uploadDesignMutation from '../graphql/mutations/upload_design.mutation.graphql'; +import { VALID_DESIGN_FILE_MIMETYPE } from '../constants'; import moveDesignMutation from '../graphql/mutations/move_design.mutation.graphql'; +import uploadDesignMutation from '../graphql/mutations/upload_design.mutation.graphql'; import allDesignsMixin from '../mixins/all_designs'; -import { - UPLOAD_DESIGN_ERROR, - EXISTING_DESIGN_DROP_MANY_FILES_MESSAGE, - EXISTING_DESIGN_DROP_INVALID_FILENAME_MESSAGE, - MOVE_DESIGN_ERROR, - UPLOAD_DESIGN_INVALID_FILETYPE_ERROR, - designUploadSkippedWarning, - designDeletionError, -} from '../utils/error_messages'; +import { DESIGNS_ROUTE_NAME } from '../router/constants'; import { updateStoreAfterUploadDesign, updateDesignsOnStoreAfterReorder, @@ -33,9 +26,16 @@ import { isValidDesignFile, moveDesignOptimisticResponse, } from '../utils/design_management_utils'; +import { + UPLOAD_DESIGN_ERROR, + EXISTING_DESIGN_DROP_MANY_FILES_MESSAGE, + EXISTING_DESIGN_DROP_INVALID_FILENAME_MESSAGE, + MOVE_DESIGN_ERROR, + UPLOAD_DESIGN_INVALID_FILETYPE_ERROR, + designUploadSkippedWarning, + designDeletionError, +} from '../utils/error_messages'; import { trackDesignCreate, trackDesignUpdate } from '../utils/tracking'; -import { DESIGNS_ROUTE_NAME } from '../router/constants'; -import { VALID_DESIGN_FILE_MIMETYPE } from '../constants'; const MAXIMUM_FILE_UPLOAD_LIMIT = 10; @@ -347,15 +347,20 @@ export default { > <header v-if="showToolbar" - class="row-content-block gl-border-t-0 gl-p-3 gl-display-flex" + class="row-content-block gl-border-t-0 gl-py-3 gl-display-flex" data-testid="design-toolbar-wrapper" > - <div class="gl-display-flex gl-justify-content-space-between gl-align-items-center gl-w-full"> - <div> + <div + class="gl-display-flex gl-justify-content-space-between gl-align-items-center gl-w-full gl-flex-wrap" + > + <div class="gl-display-flex gl-align-items-center gl-my-2"> <span class="gl-font-weight-bold gl-mr-3">{{ s__('DesignManagement|Designs') }}</span> <design-version-dropdown /> </div> - <div v-show="hasDesigns" class="qa-selector-toolbar gl-display-flex gl-align-items-center"> + <div + v-show="hasDesigns" + class="qa-selector-toolbar gl-display-flex gl-align-items-center gl-my-2" + > <gl-button v-if="isLatestVersion" variant="link" |