diff options
author | Clement Ho <clemmakesapps@gmail.com> | 2018-09-25 20:03:40 +0000 |
---|---|---|
committer | Mike Greiling <mike@pixelcog.com> | 2018-09-25 20:03:40 +0000 |
commit | 2a6cd526acef109153be3f12571882a8e4d1cc89 (patch) | |
tree | 72120c5c42eb70a1a1bb5e25ed77da89c4ac841c /app/assets | |
parent | 53e012a9c5a66d18c1bc5ba82cb205e3bc5eb3b4 (diff) | |
download | gitlab-ce-2a6cd526acef109153be3f12571882a8e4d1cc89.tar.gz |
Add gitlab-ui skeleton loading
Diffstat (limited to 'app/assets')
8 files changed, 27 insertions, 106 deletions
diff --git a/app/assets/javascripts/ide/components/ide_side_bar.vue b/app/assets/javascripts/ide/components/ide_side_bar.vue index 4771c58a11d..5620d6a6244 100644 --- a/app/assets/javascripts/ide/components/ide_side_bar.vue +++ b/app/assets/javascripts/ide/components/ide_side_bar.vue @@ -1,6 +1,6 @@ <script> import { mapState, mapGetters } from 'vuex'; -import SkeletonLoadingContainer from '~/vue_shared/components/skeleton_loading_container.vue'; +import SkeletonLoading from '@gitlab-org/gitlab-ui/dist/components/base/skeleton_loading'; import IdeTree from './ide_tree.vue'; import ResizablePanel from './resizable_panel.vue'; import ActivityBar from './activity_bar.vue'; @@ -13,7 +13,7 @@ import { activityBarViews } from '../constants'; export default { components: { - SkeletonLoadingContainer, + SkeletonLoading, ResizablePanel, ActivityBar, CommitSection, @@ -56,7 +56,7 @@ export default { :key="n" class="multi-file-loading-container" > - <skeleton-loading-container /> + <skeleton-loading /> </div> </div> </template> diff --git a/app/assets/javascripts/ide/components/ide_tree_list.vue b/app/assets/javascripts/ide/components/ide_tree_list.vue index e658d1bf956..ff53314d275 100644 --- a/app/assets/javascripts/ide/components/ide_tree_list.vue +++ b/app/assets/javascripts/ide/components/ide_tree_list.vue @@ -1,7 +1,7 @@ <script> import { mapActions, mapGetters, mapState } from 'vuex'; import Icon from '~/vue_shared/components/icon.vue'; -import SkeletonLoadingContainer from '~/vue_shared/components/skeleton_loading_container.vue'; +import SkeletonLoading from '@gitlab-org/gitlab-ui/dist/components/base/skeleton_loading'; import FileRow from '~/vue_shared/components/file_row.vue'; import NavDropdown from './nav_dropdown.vue'; import FileRowExtra from './file_row_extra.vue'; @@ -9,7 +9,7 @@ import FileRowExtra from './file_row_extra.vue'; export default { components: { Icon, - SkeletonLoadingContainer, + SkeletonLoading, NavDropdown, FileRow, }, @@ -51,7 +51,7 @@ export default { :key="n" class="multi-file-loading-container" > - <skeleton-loading-container /> + <skeleton-loading /> </div> </template> <template v-else> diff --git a/app/assets/javascripts/ide/components/repo_loading_file.vue b/app/assets/javascripts/ide/components/repo_loading_file.vue deleted file mode 100644 index 7a5ede82253..00000000000 --- a/app/assets/javascripts/ide/components/repo_loading_file.vue +++ /dev/null @@ -1,42 +0,0 @@ -<script> - import { mapState } from 'vuex'; - import skeletonLoadingContainer from '~/vue_shared/components/skeleton_loading_container.vue'; - - export default { - components: { - skeletonLoadingContainer, - }, - computed: { - ...mapState([ - 'leftPanelCollapsed', - ]), - }, - }; -</script> - -<template> - <tr - class="loading-file" - aria-label="Loading files" - > - <td class="multi-file-table-col-name"> - <skeleton-loading-container - :small="true" - /> - </td> - <template v-if="!leftPanelCollapsed"> - <td class="d-none d-sm-none d-md-block"> - <skeleton-loading-container - :small="true" - /> - </td> - - <td class="d-none d-sm-block"> - <skeleton-loading-container - :small="true" - class="animation-container-right" - /> - </td> - </template> - </tr> -</template> diff --git a/app/assets/javascripts/notes.js b/app/assets/javascripts/notes.js index 0c966e0808a..e2f485e37eb 100644 --- a/app/assets/javascripts/notes.js +++ b/app/assets/javascripts/notes.js @@ -16,7 +16,7 @@ import 'vendor/jquery.atwho'; import AjaxCache from '~/lib/utils/ajax_cache'; import Vue from 'vue'; import syntaxHighlight from '~/syntax_highlight'; -import SkeletonLoadingContainer from '~/vue_shared/components/skeleton_loading_container.vue'; +import SkeletonLoading from '@gitlab-org/gitlab-ui/dist/components/base/skeleton_loading'; import axios from './lib/utils/axios_utils'; import { getLocationHash } from './lib/utils/url_utility'; import Flash from './flash'; @@ -1293,10 +1293,10 @@ export default class Notes { new Vue({ el, components: { - SkeletonLoadingContainer, + SkeletonLoading, }, render(createElement) { - return createElement('skeleton-loading-container'); + return createElement('skeleton-loading'); }, }); } diff --git a/app/assets/javascripts/notes/components/diff_with_note.vue b/app/assets/javascripts/notes/components/diff_with_note.vue index 802be022ba6..d9161210fe6 100644 --- a/app/assets/javascripts/notes/components/diff_with_note.vue +++ b/app/assets/javascripts/notes/components/diff_with_note.vue @@ -3,13 +3,13 @@ import { mapState, mapActions } from 'vuex'; import imageDiffHelper from '~/image_diff/helpers/index'; import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils'; import DiffFileHeader from '~/diffs/components/diff_file_header.vue'; -import SkeletonLoadingContainer from '~/vue_shared/components/skeleton_loading_container.vue'; +import SkeletonLoading from '@gitlab-org/gitlab-ui/dist/components/base/skeleton_loading'; import { trimFirstCharOfLineContent } from '~/diffs/store/utils'; export default { components: { DiffFileHeader, - SkeletonLoadingContainer, + SkeletonLoading, }, props: { discussion: { @@ -142,7 +142,7 @@ export default { class="line_content js-success-lazy-load" > <span></span> - <skeleton-loading-container /> + <skeleton-loading /> <span></span> </td> </tr> diff --git a/app/assets/javascripts/vue_shared/components/content_viewer/viewers/markdown_viewer.vue b/app/assets/javascripts/vue_shared/components/content_viewer/viewers/markdown_viewer.vue index a10deb93f0f..27689a55b67 100644 --- a/app/assets/javascripts/vue_shared/components/content_viewer/viewers/markdown_viewer.vue +++ b/app/assets/javascripts/vue_shared/components/content_viewer/viewers/markdown_viewer.vue @@ -2,14 +2,14 @@ import axios from '~/lib/utils/axios_utils'; import { __ } from '~/locale'; import $ from 'jquery'; -import SkeletonLoadingContainer from '~/vue_shared/components/skeleton_loading_container.vue'; +import SkeletonLoading from '@gitlab-org/gitlab-ui/dist/components/base/skeleton_loading'; const { CancelToken } = axios; let axiosSource; export default { components: { - SkeletonLoadingContainer, + SkeletonLoading, }, props: { content: { @@ -81,7 +81,7 @@ export default { <div ref="markdown-preview" class="md md-previewer"> - <skeleton-loading-container v-if="isLoading" /> + <skeleton-loading v-if="isLoading" /> <div v-else v-html="previewContent"> diff --git a/app/assets/javascripts/vue_shared/components/notes/skeleton_note.vue b/app/assets/javascripts/vue_shared/components/notes/skeleton_note.vue index 2eb6c20b2c0..f11a7699f27 100644 --- a/app/assets/javascripts/vue_shared/components/notes/skeleton_note.vue +++ b/app/assets/javascripts/vue_shared/components/notes/skeleton_note.vue @@ -1,3 +1,14 @@ +<script> +import SkeletonLoading from '@gitlab-org/gitlab-ui/dist/components/base/skeleton_loading'; + +export default { + name: 'SkeletonNote', + components: { + SkeletonLoading, + }, +}; +</script> + <template> <li class="timeline-entry note"> <div class="timeline-entry-inner"> @@ -6,20 +17,9 @@ <div class="timeline-content"> <div class="note-header"></div> <div class="note-body"> - <skeleton-loading-container /> + <skeleton-loading /> </div> </div> </div> </li> </template> - -<script> -import skeletonLoadingContainer from '~/vue_shared/components/skeleton_loading_container.vue'; - -export default { - name: 'SkeletonNote', - components: { - skeletonLoadingContainer, - }, -}; -</script> diff --git a/app/assets/javascripts/vue_shared/components/skeleton_loading_container.vue b/app/assets/javascripts/vue_shared/components/skeleton_loading_container.vue deleted file mode 100644 index 4a5ffbe5d5a..00000000000 --- a/app/assets/javascripts/vue_shared/components/skeleton_loading_container.vue +++ /dev/null @@ -1,37 +0,0 @@ -<script> - export default { - props: { - small: { - type: Boolean, - required: false, - default: false, - }, - lines: { - type: Number, - required: false, - default: 3, - }, - }, - computed: { - lineClasses() { - return new Array(this.lines).fill().map((_, i) => `skeleton-line-${i + 1}`); - }, - }, - }; -</script> - -<template> - <div - :class="{ - 'animation-container-small': small, - }" - class="animation-container" - > - <div - v-for="(css, index) in lineClasses" - :key="index" - :class="css" - > - </div> - </div> -</template> |