diff options
Diffstat (limited to 'app/assets/javascripts/repository')
7 files changed, 58 insertions, 23 deletions
diff --git a/app/assets/javascripts/repository/components/blob_content_viewer.vue b/app/assets/javascripts/repository/components/blob_content_viewer.vue index 3729bd4c601..280455c3fed 100644 --- a/app/assets/javascripts/repository/components/blob_content_viewer.vue +++ b/app/assets/javascripts/repository/components/blob_content_viewer.vue @@ -6,9 +6,9 @@ import BlobHeader from '~/blob/components/blob_header.vue'; import { SIMPLE_BLOB_VIEWER, RICH_BLOB_VIEWER } from '~/blob/components/constants'; import createFlash from '~/flash'; import axios from '~/lib/utils/axios_utils'; -import { isLoggedIn } from '~/lib/utils/common_utils'; +import { isLoggedIn, handleLocationHash } from '~/lib/utils/common_utils'; import { __ } from '~/locale'; -import { redirectTo, getLocationHash } from '~/lib/utils/url_utility'; +import { redirectTo } from '~/lib/utils/url_utility'; import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import WebIdeLink from '~/vue_shared/components/web_ide_link.vue'; import CodeIntelligence from '~/code_navigation/components/app.vue'; @@ -183,7 +183,7 @@ export default { this.isLoadingLegacyViewer = true; axios .get(`${this.blobInfo.webPath}?format=json&viewer=${type}`) - .then(({ data: { html, binary } }) => { + .then(async ({ data: { html, binary } }) => { if (type === SIMPLE_BLOB_VIEWER) { this.isRenderingLegacyTextViewer = true; @@ -197,20 +197,14 @@ export default { this.legacyRichViewer = html; } - this.scrollToHash(); this.isBinary = binary; this.isLoadingLegacyViewer = false; + + await this.$nextTick(); + handleLocationHash(); // Ensures that we scroll to the hash when async content is loaded }) .catch(() => this.displayError()); }, - scrollToHash() { - const hash = getLocationHash(); - if (hash) { - // Ensures the browser's native scroll to hash is triggered for async content - window.location.hash = ''; - window.location.hash = hash; - } - }, displayError() { createFlash({ message: __('An error occurred while loading the file. Please try again.') }); }, @@ -233,6 +227,9 @@ export default { setForkTarget(target) { this.forkTarget = target; }, + onCopy() { + navigator.clipboard.writeText(this.blobInfo.rawTextBlob); + }, }, }; </script> @@ -248,7 +245,9 @@ export default { :active-viewer-type="viewer.type" :has-render-error="hasRenderError" :show-path="false" + :override-copy="glFeatures.highlightJs" @viewer-changed="switchViewer" + @copy="onCopy" > <template #actions> <web-ide-link diff --git a/app/assets/javascripts/repository/components/blob_viewers/index.js b/app/assets/javascripts/repository/components/blob_viewers/index.js index 81d2168e2ce..3e6d2e675ed 100644 --- a/app/assets/javascripts/repository/components/blob_viewers/index.js +++ b/app/assets/javascripts/repository/components/blob_viewers/index.js @@ -9,6 +9,7 @@ const viewers = { lfs: () => import('./lfs_viewer.vue'), audio: () => import('./audio_viewer.vue'), svg: () => import('./image_viewer.vue'), + sketch: () => import('./sketch_viewer.vue'), }; export const loadViewer = (type, isUsingLfs) => { diff --git a/app/assets/javascripts/repository/components/blob_viewers/sketch_viewer.vue b/app/assets/javascripts/repository/components/blob_viewers/sketch_viewer.vue new file mode 100644 index 00000000000..b48af02e541 --- /dev/null +++ b/app/assets/javascripts/repository/components/blob_viewers/sketch_viewer.vue @@ -0,0 +1,31 @@ +<script> +import { GlLoadingIcon } from '@gitlab/ui'; +import SketchLoader from '~/blob/sketch'; + +export default { + components: { + GlLoadingIcon, + }, + props: { + blob: { + type: Object, + required: true, + }, + }, + data() { + return { + url: this.blob.rawPath, + }; + }, + mounted() { + // eslint-disable-next-line no-new + new SketchLoader(this.$refs.viewer); + }, +}; +</script> + +<template> + <div ref="viewer" class="file-content" :data-endpoint="url" data-testid="sketch"> + <gl-loading-icon class="my-4 js-loading-icon" size="lg" /> + </div> +</template> diff --git a/app/assets/javascripts/repository/components/last_commit.vue b/app/assets/javascripts/repository/components/last_commit.vue index 03dd7c6fada..d24d7648f1b 100644 --- a/app/assets/javascripts/repository/components/last_commit.vue +++ b/app/assets/javascripts/repository/components/last_commit.vue @@ -114,7 +114,7 @@ export default { <template> <div class="well-segment commit gl-p-5 gl-w-full gl-display-flex"> - <gl-loading-icon v-if="isLoading" size="md" color="dark" class="m-auto" /> + <gl-loading-icon v-if="isLoading" size="lg" color="dark" class="m-auto" /> <template v-else-if="commit"> <user-avatar-link v-if="commit.author" diff --git a/app/assets/javascripts/repository/components/preview/index.vue b/app/assets/javascripts/repository/components/preview/index.vue index dc5a031c9f3..4935b8029f9 100644 --- a/app/assets/javascripts/repository/components/preview/index.vue +++ b/app/assets/javascripts/repository/components/preview/index.vue @@ -64,7 +64,7 @@ export default { </div> </div> <div class="blob-viewer" data-qa-selector="blob_viewer_content" itemprop="about"> - <gl-loading-icon v-if="loading > 0" size="md" color="dark" class="my-4 mx-auto" /> + <gl-loading-icon v-if="loading > 0" size="lg" color="dark" class="my-4 mx-auto" /> <div v-else-if="readme" ref="readme" diff --git a/app/assets/javascripts/repository/components/table/index.vue b/app/assets/javascripts/repository/components/table/index.vue index c2323d6b286..41f7a4b147f 100644 --- a/app/assets/javascripts/repository/components/table/index.vue +++ b/app/assets/javascripts/repository/components/table/index.vue @@ -1,5 +1,5 @@ <script> -import { GlDeprecatedSkeletonLoading as GlSkeletonLoading, GlButton } from '@gitlab/ui'; +import { GlSkeletonLoader, GlButton } from '@gitlab/ui'; import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import { sprintf, __ } from '~/locale'; import getRefMixin from '../../mixins/get_ref'; @@ -10,7 +10,7 @@ import TableRow from './row.vue'; export default { components: { - GlSkeletonLoading, + GlSkeletonLoader, TableHeader, TableRow, ParentRow, @@ -158,11 +158,15 @@ export default { </template> <template v-if="isLoading"> <tr v-for="i in 5" :key="i" aria-hidden="true"> - <td><gl-skeleton-loading :lines="1" class="h-auto" /></td> + <td><gl-skeleton-loader :lines="1" /></td> <td class="gl-display-none gl-sm-display-block"> - <gl-skeleton-loading :lines="1" class="h-auto" /> + <gl-skeleton-loader :lines="1" /> + </td> + <td> + <div class="gl-display-flex gl-lg-justify-content-end"> + <gl-skeleton-loader :equal-width-lines="true" :lines="1" /> + </div> </td> - <td><gl-skeleton-loading :lines="1" class="ml-auto h-auto w-50" /></td> </tr> </template> <template v-if="hasMore"> diff --git a/app/assets/javascripts/repository/components/table/row.vue b/app/assets/javascripts/repository/components/table/row.vue index 7aac35e7613..2b910109f7d 100644 --- a/app/assets/javascripts/repository/components/table/row.vue +++ b/app/assets/javascripts/repository/components/table/row.vue @@ -2,7 +2,7 @@ import { GlBadge, GlLink, - GlDeprecatedSkeletonLoading as GlSkeletonLoading, + GlSkeletonLoader, GlTooltipDirective, GlLoadingIcon, GlIcon, @@ -25,7 +25,7 @@ export default { components: { GlBadge, GlLink, - GlSkeletonLoading, + GlSkeletonLoader, GlLoadingIcon, GlIcon, TimeagoTooltip, @@ -277,12 +277,12 @@ export default { class="str-truncated-100 tree-commit-link" /> <gl-intersection-observer @appear="rowAppeared" @disappear="rowDisappeared"> - <gl-skeleton-loading v-if="showSkeletonLoader" :lines="1" class="h-auto" /> + <gl-skeleton-loader v-if="showSkeletonLoader" :lines="1" /> </gl-intersection-observer> </td> <td class="tree-time-ago text-right cursor-default"> <timeago-tooltip v-if="commitData" :time="commitData.committedDate" /> - <gl-skeleton-loading v-if="showSkeletonLoader" :lines="1" class="ml-auto h-auto w-50" /> + <gl-skeleton-loader v-if="showSkeletonLoader" :lines="1" /> </td> </tr> </template> |