diff options
author | Clement Ho <clemmakesapps@gmail.com> | 2018-09-25 23:03:40 +0300 |
---|---|---|
committer | Mike Greiling <mike@pixelcog.com> | 2018-09-25 23:03:40 +0300 |
commit | 2a6cd526acef109153be3f12571882a8e4d1cc89 (patch) | |
tree | 72120c5c42eb70a1a1bb5e25ed77da89c4ac841c | |
parent | 53e012a9c5a66d18c1bc5ba82cb205e3bc5eb3b4 (diff) |
Add gitlab-ui skeleton loading
12 files changed, 31 insertions, 222 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> diff --git a/package.json b/package.json index 0059934bdfe..94707fe3587 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,7 @@ }, "dependencies": { "@gitlab-org/gitlab-svgs": "^1.29.0", - "@gitlab-org/gitlab-ui": "^1.5.1", + "@gitlab-org/gitlab-ui": "^1.7.0", "autosize": "^4.0.0", "axios": "^0.17.1", "babel-core": "^6.26.3", diff --git a/spec/javascripts/ide/components/repo_loading_file_spec.js b/spec/javascripts/ide/components/repo_loading_file_spec.js deleted file mode 100644 index 7c20b8302f9..00000000000 --- a/spec/javascripts/ide/components/repo_loading_file_spec.js +++ /dev/null @@ -1,63 +0,0 @@ -import Vue from 'vue'; -import store from '~/ide/stores'; -import repoLoadingFile from '~/ide/components/repo_loading_file.vue'; -import { resetStore } from '../helpers'; - -describe('RepoLoadingFile', () => { - let vm; - - function createComponent() { - const RepoLoadingFile = Vue.extend(repoLoadingFile); - - return new RepoLoadingFile({ - store, - }).$mount(); - } - - function assertLines(lines) { - lines.forEach((line, n) => { - const index = n + 1; - expect(line.classList.contains(`skeleton-line-${index}`)).toBeTruthy(); - }); - } - - function assertColumns(columns) { - columns.forEach(column => { - const container = column.querySelector('.animation-container'); - const lines = [...container.querySelectorAll(':scope > div')]; - - expect(container).toBeTruthy(); - expect(lines.length).toEqual(3); - assertLines(lines); - }); - } - - afterEach(() => { - vm.$destroy(); - - resetStore(vm.$store); - }); - - it('renders 3 columns of animated LoC', () => { - vm = createComponent(); - const columns = [...vm.$el.querySelectorAll('td')]; - - expect(columns.length).toEqual(3); - assertColumns(columns); - }); - - it('renders 1 column of animated LoC if isMini', done => { - vm = createComponent(); - vm.$store.state.leftPanelCollapsed = true; - vm.$store.state.openFiles.push('test'); - - vm.$nextTick(() => { - const columns = [...vm.$el.querySelectorAll('td')]; - - expect(columns.length).toEqual(1); - assertColumns(columns); - - done(); - }); - }); -}); diff --git a/spec/javascripts/vue_shared/components/skeleton_loading_container_spec.js b/spec/javascripts/vue_shared/components/skeleton_loading_container_spec.js deleted file mode 100644 index 34487885cf0..00000000000 --- a/spec/javascripts/vue_shared/components/skeleton_loading_container_spec.js +++ /dev/null @@ -1,49 +0,0 @@ -import Vue from 'vue'; -import skeletonLoadingContainer from '~/vue_shared/components/skeleton_loading_container.vue'; -import mountComponent from 'spec/helpers/vue_mount_component_helper'; - -describe('Skeleton loading container', () => { - let vm; - - beforeEach(() => { - const component = Vue.extend(skeletonLoadingContainer); - vm = mountComponent(component); - }); - - afterEach(() => { - vm.$destroy(); - }); - - it('renders 3 skeleton lines by default', () => { - expect(vm.$el.querySelector('.skeleton-line-3')).not.toBeNull(); - }); - - it('renders in full mode by default', () => { - expect(vm.$el.classList.contains('animation-container-small')).toBeFalsy(); - }); - - describe('small', () => { - beforeEach((done) => { - vm.small = true; - - Vue.nextTick(done); - }); - - it('renders in small mode', () => { - expect(vm.$el.classList.contains('animation-container-small')).toBeTruthy(); - }); - }); - - describe('lines', () => { - beforeEach((done) => { - vm.lines = 5; - - Vue.nextTick(done); - }); - - it('renders 5 lines', () => { - expect(vm.$el.querySelector('.skeleton-line-5')).not.toBeNull(); - expect(vm.$el.querySelector('.skeleton-line-6')).toBeNull(); - }); - }); -}); diff --git a/yarn.lock b/yarn.lock index 533d22c00f0..4fd5a64882a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -164,9 +164,9 @@ version "1.29.0" resolved "https://registry.yarnpkg.com/@gitlab-org/gitlab-svgs/-/gitlab-svgs-1.29.0.tgz#03b65b513f9099bbda6ecf94d673a2952f8c6c70" -"@gitlab-org/gitlab-ui@^1.5.1": - version "1.5.1" - resolved "https://registry.yarnpkg.com/@gitlab-org/gitlab-ui/-/gitlab-ui-1.5.1.tgz#82bc8583e24edfbaab5f1b6e88bf1a8056d7b528" +"@gitlab-org/gitlab-ui@^1.7.0": + version "1.7.0" + resolved "https://registry.yarnpkg.com/@gitlab-org/gitlab-ui/-/gitlab-ui-1.7.0.tgz#cf37b7262f90af42664d4d1600917271a8f8fb28" dependencies: "@gitlab-org/gitlab-svgs" "^1.23.0" bootstrap-vue "^2.0.0-rc.11" |