Commit f815b48f authored by Clement Ho's avatar Clement Ho Committed by Mike Greiling

Use gitlab-ui loading icon

parent 85aeaf05
<script>
import Icon from '~/vue_shared/components/icon.vue';
import LoadingIcon from '~/vue_shared/components/loading_icon.vue';
import Tooltip from '~/vue_shared/directives/tooltip';
export default {
name: 'Badge',
components: {
Icon,
LoadingIcon,
Tooltip,
},
directives: {
......@@ -80,7 +78,7 @@ export default {
/>
</a>
<loading-icon
<gl-loading-icon
v-show="isLoading"
:inline="true"
/>
......
......@@ -4,7 +4,6 @@ import { mapActions, mapState } from 'vuex';
import createFlash from '~/flash';
import { s__, sprintf } from '~/locale';
import LoadingButton from '~/vue_shared/components/loading_button.vue';
import LoadingIcon from '~/vue_shared/components/loading_icon.vue';
import createEmptyBadge from '../empty_badge';
import Badge from './badge.vue';
......@@ -15,7 +14,6 @@ export default {
components: {
Badge,
LoadingButton,
LoadingIcon,
},
props: {
isEditing: {
......@@ -207,7 +205,7 @@ export default {
:link-url="renderedLinkUrl"
/>
<p v-show="isRendering">
<loading-icon
<gl-loading-icon
:inline="true"
/>
</p>
......
<script>
import { mapState } from 'vuex';
import LoadingIcon from '~/vue_shared/components/loading_icon.vue';
import BadgeListRow from './badge_list_row.vue';
import { GROUP_BADGE } from '../constants';
......@@ -8,7 +7,6 @@ export default {
name: 'BadgeList',
components: {
BadgeListRow,
LoadingIcon,
},
computed: {
...mapState(['badges', 'isLoading', 'kind']),
......@@ -31,10 +29,10 @@ export default {
class="badge badge-pill"
>{{ badges.length }}</span>
</div>
<loading-icon
<gl-loading-icon
v-show="isLoading"
:size="2"
class="card-body"
size="2"
/>
<div
v-if="hasNoBadges"
......
......@@ -2,7 +2,6 @@
import { mapActions, mapState } from 'vuex';
import { s__ } from '~/locale';
import Icon from '~/vue_shared/components/icon.vue';
import LoadingIcon from '~/vue_shared/components/loading_icon.vue';
import { PROJECT_BADGE } from '../constants';
import Badge from './badge.vue';
......@@ -11,7 +10,6 @@ export default {
components: {
Badge,
Icon,
LoadingIcon,
},
props: {
badge: {
......@@ -79,7 +77,7 @@ export default {
name="remove"
/>
</button>
<loading-icon
<gl-loading-icon
v-show="badge.isDeleting"
:inline="true"
/>
......
......@@ -3,7 +3,6 @@ import Sortable from 'sortablejs';
import boardNewIssue from './board_new_issue.vue';
import boardCard from './board_card.vue';
import eventHub from '../eventhub';
import loadingIcon from '../../vue_shared/components/loading_icon.vue';
const Store = gl.issueBoards.BoardsStore;
......@@ -12,7 +11,6 @@ export default {
components: {
boardCard,
boardNewIssue,
loadingIcon,
},
props: {
groupId: {
......@@ -217,7 +215,7 @@ export default {
v-if="loading"
class="board-list-loading text-center"
aria-label="Loading issues">
<loading-icon />
<gl-loading-icon />
</div>
<board-new-issue
v-if="list.type !== 'closed' && showIssueForm"
......@@ -245,7 +243,7 @@ export default {
v-if="showCount"
class="board-list-count text-center"
data-issue-id="-1">
<loading-icon
<gl-loading-icon
v-show="list.loadingMore"
label="Loading more issues"
/>
......
<script>
/* global ListIssue */
import { urlParamsToObject } from '~/lib/utils/common_utils';
import loadingIcon from '~/vue_shared/components/loading_icon.vue';
import ModalHeader from './header.vue';
import ModalList from './list.vue';
import ModalFooter from './footer.vue';
......@@ -14,7 +13,6 @@
ModalHeader,
ModalList,
ModalFooter,
loadingIcon,
},
props: {
newIssuePath: {
......@@ -167,7 +165,7 @@
class="add-issues-list text-center"
>
<div class="add-issues-list-loading">
<loading-icon />
<gl-loading-icon />
</div>
</section>
<modal-footer/>
......
......@@ -2,14 +2,10 @@
import $ from 'jquery';
import _ from 'underscore';
import eventHub from '../eventhub';
import loadingIcon from '../../vue_shared/components/loading_icon.vue';
import Api from '../../api';
export default {
name: 'BoardProjectSelect',
components: {
loadingIcon,
},
props: {
groupId: {
type: Number,
......@@ -119,7 +115,7 @@ export default {
</div>
<div class="dropdown-content"></div>
<div class="dropdown-loading">
<loading-icon />
<gl-loading-icon />
</div>
</div>
</div>
......
......@@ -76,10 +76,10 @@
<template>
<div class="content-list pipelines">
<loading-icon
<gl-loading-icon
v-if="isLoading"
:label="s__('Pipelines|Loading Pipelines')"
size="3"
:size="3"
class="prepend-top-20"
/>
......
import Vue from 'vue';
import progressBar from '@gitlab-org/gitlab-ui/dist/components/base/progress_bar';
import modal from '@gitlab-org/gitlab-ui/dist/components/base/modal';
import loadingIcon from '@gitlab-org/gitlab-ui/dist/components/base/loading_icon';
import dModal from '@gitlab-org/gitlab-ui/dist/directives/modal';
import dTooltip from '@gitlab-org/gitlab-ui/dist/directives/tooltip';
Vue.component('gl-progress-bar', progressBar);
Vue.component('gl-ui-modal', modal);
Vue.component('gl-loading-icon', loadingIcon);
Vue.directive('gl-modal', dModal);
Vue.directive('gl-tooltip', dTooltip);
<script>
import loadingIcon from '~/vue_shared/components/loading_icon.vue';
import eventHub from '../eventhub';
export default {
components: {
loadingIcon,
},
props: {
deployKey: {
type: Object,
......@@ -45,7 +41,7 @@ export default {
class="btn"
@click="doAction">
<slot></slot>
<loading-icon
<gl-loading-icon
v-if="isLoading"
:inline="true"
/>
......
<script>
import { s__ } from '~/locale';
import Flash from '~/flash';
import LoadingIcon from '~/vue_shared/components/loading_icon.vue';
import NavigationTabs from '~/vue_shared/components/navigation_tabs.vue';
import eventHub from '../eventhub';
import DeployKeysService from '../service';
......@@ -11,7 +10,6 @@ import KeysPanel from './keys_panel.vue';
export default {
components: {
KeysPanel,
LoadingIcon,
NavigationTabs,
},
props: {
......@@ -114,10 +112,10 @@ export default {
<template>
<div class="append-bottom-default deploy-keys">
<loading-icon
<gl-loading-icon
v-if="isLoading && !hasKeys"
:label="s__('DeployKeys|Loading deploy keys')"
size="2"
:size="2"
/>
<template v-else-if="hasKeys">
<div class="top-area scrolling-tabs-container inner-page-scroll-tabs">
......
......@@ -4,7 +4,6 @@ import Icon from '~/vue_shared/components/icon.vue';
import { __ } from '~/locale';
import createFlash from '~/flash';
import eventHub from '../../notes/event_hub';
import LoadingIcon from '../../vue_shared/components/loading_icon.vue';
import CompareVersions from './compare_versions.vue';
import ChangedFiles from './changed_files.vue';
import DiffFile from './diff_file.vue';
......@@ -15,7 +14,6 @@ export default {
name: 'DiffsApp',
components: {
Icon,
LoadingIcon,
CompareVersions,
ChangedFiles,
DiffFile,
......@@ -168,7 +166,7 @@ export default {
v-if="isLoading"
class="loading"
>
<loading-icon />
<gl-loading-icon />
</div>
<div
v-else
......
......@@ -3,7 +3,6 @@ import { mapActions, mapGetters } from 'vuex';
import _ from 'underscore';
import { __, sprintf } from '~/locale';
import createFlash from '~/flash';
import LoadingIcon from '~/vue_shared/components/loading_icon.vue';
import DiffFileHeader from './diff_file_header.vue';
import DiffContent from './diff_content.vue';
......@@ -11,7 +10,6 @@ export default {
components: {
DiffFileHeader,
DiffContent,
LoadingIcon,
},
props: {
file: {
......@@ -144,7 +142,7 @@ export default {
:class="{ hidden: isCollapsed || file.tooLarge }"
:diff-file="file"
/>
<loading-icon
<gl-loading-icon
v-if="showLoadingIcon"
class="diff-content loading"
/>
......
<script>
import loadingIcon from '../../vue_shared/components/loading_icon.vue';
import tablePagination from '../../vue_shared/components/table_pagination.vue';
import environmentTable from '../components/environments_table.vue';
export default {
components: {
environmentTable,
loadingIcon,
tablePagination,
},
props: {
......@@ -42,11 +40,11 @@
<template>
<div class="environments-container">
<loading-icon
<gl-loading-icon
v-if="isLoading"
:size="3"
class="prepend-top-default"
label="Loading environments"
size="3"
/>
<slot name="emptyState"></slot>
......
<script>
import Icon from '~/vue_shared/components/icon.vue';
import eventHub from '../event_hub';
import loadingIcon from '../../vue_shared/components/loading_icon.vue';
import tooltip from '../../vue_shared/directives/tooltip';
export default {
......@@ -9,7 +8,6 @@ export default {
tooltip,
},
components: {
loadingIcon,
Icon,
},
props: {
......@@ -67,7 +65,7 @@ export default {
aria-hidden="true"
>
</i>
<loading-icon v-if="isLoading" />
<gl-loading-icon v-if="isLoading" />
</span>
</button>
......
......@@ -9,12 +9,10 @@ import { s__ } from '~/locale';
import Icon from '~/vue_shared/components/icon.vue';
import tooltip from '~/vue_shared/directives/tooltip';
import eventHub from '../event_hub';
import LoadingIcon from '../../vue_shared/components/loading_icon.vue';
export default {
components: {
Icon,
LoadingIcon,
},
directives: {
......@@ -70,6 +68,6 @@ export default {
v-else
name="redo"/>
<loading-icon v-if="isLoading" />
<gl-loading-icon v-if="isLoading" />
</button>
</template>
......@@ -2,13 +2,11 @@
/**
* Render environments table.
*/
import loadingIcon from '~/vue_shared/components/loading_icon.vue';
import environmentItem from './environment_item.vue';
export default {
components: {
environmentItem,
loadingIcon,
},
props: {
......@@ -97,7 +95,7 @@ export default {
<div
v-if="model.isLoadingFolderContent"
:key="`loading-item-${i}`">
<loading-icon size="2" />
<gl-loading-icon :size="2" />
</div>
<template v-else>
......
......@@ -13,7 +13,6 @@ import eventHub from '../event_hub';
import EnvironmentsStore from '../stores/environments_store';
import EnvironmentsService from '../services/environments_service';
import loadingIcon from '../../vue_shared/components/loading_icon.vue';
import tablePagination from '../../vue_shared/components/table_pagination.vue';
import environmentTable from '../components/environments_table.vue';
import tabs from '../../vue_shared/components/navigation_tabs.vue';
......@@ -24,7 +23,6 @@ export default {
components: {
environmentTable,
container,
loadingIcon,
tabs,
tablePagination,
},
......
<script>
import { mapState, mapActions, mapGetters } from 'vuex';
import LoadingIcon from '~/vue_shared/components/loading_icon.vue';
import AccessorUtilities from '~/lib/utils/accessor';
import eventHub from '../event_hub';
import store from '../store/';
......@@ -13,7 +12,6 @@ import frequentItemsMixin from './frequent_items_mixin';
export default {
store,
components: {
LoadingIcon,
FrequentItemsSearchInput,
FrequentItemsList,
},
......@@ -98,11 +96,11 @@ export default {
<frequent-items-search-input
:namespace="namespace"
/>
<loading-icon
<gl-loading-icon
v-if="isLoadingItems"
:label="translations.loadingMessage"
:size="2"
class="loading-animation prepend-top-20"
size="2"
/>
<div
v-if="!isLoadingItems && !hasSearchQuery"
......
......@@ -3,7 +3,6 @@
import $ from 'jquery';
import { s__, sprintf } from '~/locale';
import loadingIcon from '~/vue_shared/components/loading_icon.vue';
import DeprecatedModal from '~/vue_shared/components/deprecated_modal.vue';
import { HIDDEN_CLASS } from '~/lib/utils/constants';
import { getParameterByName } from '~/lib/utils/common_utils';
......@@ -15,7 +14,6 @@ import groupsComponent from './groups.vue';
export default {
components: {
loadingIcon,
DeprecatedModal,
groupsComponent,
},
......@@ -241,11 +239,11 @@ export default {
<template>
<div>
<loading-icon
<gl-loading-icon
v-if="isLoading"
:label="s__('GroupsTree|Loading groups')"
:size="2"
class="loading-animation prepend-top-20"
size="2"
/>
<groups-component
v-if="!isLoading"
......
<script>
import { mapActions, mapState } from 'vuex';
import _ from 'underscore';
import LoadingIcon from '~/vue_shared/components/loading_icon.vue';
import Icon from '~/vue_shared/components/icon.vue';
import Item from './item.vue';
export default {
components: {
LoadingIcon,
Item,
Icon,
},
......@@ -76,10 +74,10 @@ export default {
</div>
</div>
<div class="dropdown-content ide-merge-requests-dropdown-content d-flex">
<loading-icon
<gl-loading-icon
v-if="isLoading"
:size="2"
class="mt-3 mb-3 align-self-center ml-auto mr-auto"
size="2"
/>
<ul
v-else
......
<script>
import { mapActions } from 'vuex';
import LoadingIcon from '../../vue_shared/components/loading_icon.vue';
export default {
components: {
LoadingIcon,
},
props: {
message: {
type: Object,
......@@ -59,7 +55,7 @@ export default {
@click.stop.prevent="clickAction"
>
{{ message.actionText }}
<loading-icon
<gl-loading-icon
v-show="isLoading"
inline
/>
......
<script>
import $ from 'jquery';
import { mapActions, mapState } from 'vuex';
import LoadingIcon from '~/vue_shared/components/loading_icon.vue';
import DropdownButton from '~/vue_shared/components/dropdown/dropdown_button.vue';
export default {
components: {
DropdownButton,
LoadingIcon,
},
props: {
data: {
......@@ -102,9 +100,9 @@ export default {
></i>
</div>
<div class="dropdown-content">
<loading-icon
<gl-loading-icon
v-if="showLoading"
size="2"
:size="2"
/>
<ul v-else>
<li
......
<script>
import { mapActions } from 'vuex';
import LoadingIcon from '../../../vue_shared/components/loading_icon.vue';
import Stage from './stage.vue';
export default {
components: {
LoadingIcon,
Stage,
},
props: {
......@@ -26,10 +24,10 @@ export default {
<template>
<div>
<loading-icon
<gl-loading-icon
v-if="loading && !stages.length"
:size="2"
class="prepend-top-default"
size="2"
/>
<template v-else>
<stage
......
......@@ -2,7 +2,6 @@
import tooltip from '../../../vue_shared/directives/tooltip';
import Icon from '../../../vue_shared/components/icon.vue';
import CiIcon from '../../../vue_shared/components/ci_icon.vue';
import LoadingIcon from '../../../vue_shared/components/loading_icon.vue';
import Item from './item.vue';
export default {
......@@ -12,7 +11,6 @@ export default {
components: {
Icon,
CiIcon,
LoadingIcon,
Item,
},
props: {
......@@ -96,7 +94,7 @@ export default {
v-show="!stage.isCollapsed"
class="card-body"
>
<loading-icon
<gl-loading-icon
v-if="showLoadingIcon"
/>
<template v-else>
......
......@@ -3,7 +3,6 @@ import { mapActions, mapState } from 'vuex';
import _ from 'underscore';
import { __ } from '~/locale';
import Icon from '~/vue_shared/components/icon.vue';
import LoadingIcon from '~/vue_shared/components/loading_icon.vue';
import Item from './item.vue';
import TokenedInput from '../shared/tokened_input.vue';
......@@ -14,7 +13,6 @@ const SEARCH_TYPES = [
export default {
components: {
LoadingIcon,
TokenedInput,
Item,
Icon,
......@@ -98,10 +96,10 @@ export default {
</div>
</div>
<div class="dropdown-content ide-merge-requests-dropdown-content d-flex">
<loading-icon
<gl-loading-icon
v-if="isLoading"
:size="2"
class="mt-3 mb-3 align-self-center ml-auto mr-auto"
size="2"
/>
<template v-else>
<ul
......
......@@ -2,7 +2,6 @@
import { mapActions, mapGetters, mapState } from 'vuex';
import _ from 'underscore';
import { sprintf, __ } from '../../../locale';
import LoadingIcon from '../../../vue_shared/components/loading_icon.vue';
import Icon from '../../../vue_shared/components/icon.vue';
import CiIcon from '../../../vue_shared/components/ci_icon.vue';
import Tabs from '../../../vue_shared/components/tabs/tabs';
......@@ -12,7 +11,6 @@ import JobsList from '../jobs/list.vue';
export default {
components: {
LoadingIcon,
Icon,
CiIcon,
Tabs,
......@@ -50,10 +48,10 @@ export default {
<template>
<div class="ide-pipeline">
<loading-icon
<gl-loading-icon
v-if="showLoadingIcon"
:size="2"
class="prepend-top-default"
size="2"
/>
<template v-else-if="latestPipeline !== null">
<header
......
......@@ -3,14 +3,12 @@ import { mapActions, mapGetters, mapState } from 'vuex';
import _ from 'underscore';
import { Manager } from 'smooshpack';
import { listen } from 'codesandbox-api';
import LoadingIcon from '~/vue_shared/components/loading_icon.vue';
import Navigator from './navigator.vue';
import { packageJsonPath } from '../../constants';
import { createPathWithExt } from '../../utils';
export default {
components: {
LoadingIcon,
Navigator,
},
data() {
......@@ -177,9 +175,9 @@ export default {
{{ s__('IDE|Get started with Live Preview') }}
</a>
</div>
<loading-icon
<gl-loading-icon
v-else
size="2"
:size="2"
class="align-self-center mt-auto mb-auto"
/>
</div>
......
<script>
import { listen } from 'codesandbox-api';
import Icon from '~/vue_shared/components/icon.vue';
import LoadingIcon from '~/vue_shared/components/loading_icon.vue';
export default {
components: {
Icon,
LoadingIcon,
},
props: {
manager: {
......@@ -138,7 +136,7 @@ export default {
class="ide-navigator-location form-control bg-white"
readonly
/>
<loading-icon
<gl-loading-icon
v-if="loading"
class="position-absolute ide-preview-loading-icon"
/>
......
<script>
import ciHeader from '../../vue_shared/components/header_ci_component.vue';
import loadingIcon from '../../vue_shared/components/loading_icon.vue';
import callout from '../../vue_shared/components/callout.vue';
export default {
name: 'JobHeaderSection',
components: {
ciHeader,
loadingIcon,
callout,
},
props: {
......@@ -82,9 +80,9 @@ export default {
:should-render-triggered-label="jobStarted"
item-name="Job"
/>
<loading-icon
<gl-loading-icon
v-if="isLoading"
size="2"
:size="2"
class="prepend-top-default append-bottom-default"
/>
</div>
......
<script>
import LoadingIcon from '~/vue_shared/components/loading_icon.vue';
import timeagoMixin from '~/vue_shared/mixins/timeago';
import { timeIntervalInWords } from '~/lib/utils/datetime_utility';
import Icon from '~/vue_shared/components/icon.vue';
......@@ -9,7 +8,6 @@ export default {
name: 'SidebarDetailsBlock',
components: {
DetailRow,
LoadingIcon,
Icon,
},
mixins: [timeagoMixin],
......@@ -232,10 +230,10 @@ export default {
</div>
</div>
</template>
<loading-icon
<gl-loading-icon
v-if="isLoading"
:size="2"
class="prepend-top-10"
size="2"
/>
</div>
</template>
......@@ -7,7 +7,6 @@ import editSvg from 'icons/_icon_pencil.svg';
import resolveDiscussionSvg from 'icons/_icon_resolve_discussion.svg';
import resolvedDiscussionSvg from 'icons/_icon_status_success_solid.svg';
import ellipsisSvg from 'icons/_ellipsis_v.svg';
import loadingIcon from '~/vue_shared/components/loading_icon.vue';
import tooltip from '~/vue_shared/directives/tooltip';
export default {
......@@ -15,9 +14,6 @@ export default {
directives: {
tooltip,
},
components: {
loadingIcon,
},
props: {
authorId: {
type: Number,
......@@ -153,9 +149,9 @@ export default {
v-else
v-html="resolveDiscussionSvg"></div>
</template>
<loading-icon
<gl-loading-icon
v-else
:inline="true"
inline
/>
</button>
</div>
......@@ -172,7 +168,7 @@ export default {
href="#"
title="Add reaction"
>
<loading-icon :inline="true" />
<gl-loading-icon inline/>
<span
class="link-highlight award-control-icon-neutral"
v-html="emojiSmiling">
......
......@@ -10,7 +10,6 @@ import systemNote from '../../vue_shared/components/notes/system_note.vue';
import commentForm from './comment_form.vue';
import placeholderNote from '../../vue_shared/components/notes/placeholder_note.vue';
import placeholderSystemNote from '../../vue_shared/components/notes/placeholder_system_note.vue';
import loadingIcon from '../../vue_shared/components/loading_icon.vue';
import skeletonLoadingContainer from '../../vue_shared/components/notes/skeleton_note.vue';
export default {
......@@ -20,7 +19,6 @@ export default {
noteableDiscussion,
systemNote,
commentForm,
loadingIcon,
placeholderNote,
placeholderSystemNote,
},
......
<script>
import _ from 'underscore';
import LoadingIcon from '~/vue_shared/components/loading_icon.vue';
import StageColumnComponent from './stage_column_component.vue';
export default {
components: {
StageColumnComponent,
LoadingIcon,
},
props: {
isLoading: {
......@@ -59,9 +57,9 @@ export default {
<div class="build-content middle-block js-pipeline-graph">
<div class="pipeline-visualization pipeline-graph pipeline-tab-content">
<div class="text-center">
<loading-icon
<gl-loading-icon
v-if="isLoading"
size="3"
:size="3"
/>
</div>
......
<script>
import ciHeader from '../../vue_shared/components/header_ci_component.vue';
import eventHub from '../event_hub';
import loadingIcon from '../../vue_shared/components/loading_icon.vue';
export default {
name: 'PipelineHeaderSection',
components: {
ciHeader,
loadingIcon,
},
props: {
pipeline: {
......@@ -89,9 +87,9 @@ export default {
item-name="Pipeline"
@actionClicked="postAction"
/>
<loading-icon
<gl-loading-icon
v-if="isLoading"
size="2"
:size="2"
class="prepend-top-default append-bottom-default"
/>
</div>
......
......@@ -319,10 +319,10 @@ export default {
<div class="content-list pipelines">
<loading-icon
<gl-loading-icon
v-if="stateToRender === $options.stateMap.loading"
:label="s__('Pipelines|Loading Pipelines')"
size="3"
:size="3"
class="prepend-top-20"
/>
......
<script>
import eventHub from '../event_hub';
import loadingIcon from '../../vue_shared/components/loading_icon.vue';
import icon from '../../vue_shared/components/icon.vue';
import tooltip from '../../vue_shared/directives/tooltip';
......@@ -9,7 +8,6 @@ export default {
tooltip,
},
components: {
loadingIcon,
icon,
},
props: {
......@@ -60,7 +58,7 @@ export default {
class="fa fa-caret-down"
aria-hidden="true">
</i>
<loading-icon v-if="isLoading" />
<gl-loading-icon v-if="isLoading" />
</button>
<ul class="dropdown-menu dropdown-menu-right">
......
......@@ -18,14 +18,12 @@ import Flash from '../../flash';
import axios from '../../lib/utils/axios_utils';
import eventHub from '../event_hub';
import Icon from '../../vue_shared/components/icon.vue';
import LoadingIcon from '../../vue_shared/components/loading_icon.vue';
import JobComponent from './graph/job_component.vue';
import tooltip from '../../vue_shared/directives/tooltip';
import { PIPELINES_TABLE } from '../constants';
export default {
components: {
LoadingIcon,
Icon,
JobComponent,
},
......@@ -191,7 +189,7 @@ export default {
class="dropdown-menu mini-pipeline-graph-dropdown-menu js-builds-dropdown-container"
aria-labelledby="stageDropdown"
>
<loading-icon v-if="isLoading"/>
<gl-loading-icon v-if="isLoading"/>
<ul
v-else
class="js-builds-dropdown-list scrollable-menu"
......
......@@ -4,7 +4,6 @@ import Flash from '../../flash';
import Poll from '../../lib/utils/poll';
import EmptyState from '../components/empty_state.vue';
import SvgBlankState from '../components/blank_state.vue';
import LoadingIcon from '../../vue_shared/components/loading_icon.vue';
import PipelinesTableComponent from '../components/pipelines_table.vue';
import eventHub from '../event_hub';
import { CANCEL_REQUEST } from '../constants';
......@@ -14,7 +13,6 @@ export default {
PipelinesTableComponent,
SvgBlankState,
EmptyState,
LoadingIcon,
},
data() {
return {
......
import _ from 'underscore';
import LoadingIcon from '~/vue_shared/components/loading_icon.vue';
import DropdownSearchInput from '~/vue_shared/components/dropdown/dropdown_search_input.vue';
import DropdownHiddenInput from '~/vue_shared/components/dropdown/dropdown_hidden_input.vue';
import DropdownButton from '~/vue_shared/components/dropdown/dropdown_button.vue';
......@@ -9,7 +8,6 @@ import store from '../store';
export default {
store,
components: {
LoadingIcon,
DropdownButton,
DropdownSearchInput,
DropdownHiddenInput,
......
......@@ -126,7 +126,7 @@ export default {
</ul>
</div>
<div class="dropdown-loading">
<loading-icon />
<gl-loading-icon />
</div>
</div>
</div>
......
......@@ -187,7 +187,7 @@ export default {
</ul>
</div>
<div class="dropdown-loading">
<loading-icon />
<gl-loading-icon />
</div>
</div>
</div>
......
......@@ -100,7 +100,7 @@ export default {
</ul>
</div>
<div class="dropdown-loading">
<loading-icon />
<gl-loading-icon />
</div>
</div>
</div>
......
<script>
import Visibility from 'visibilityjs';
import ciIcon from '~/vue_shared/components/ci_icon.vue';
import loadingIcon from '~/vue_shared/components/loading_icon.vue';
import Poll from '~/lib/utils/poll';
import Flash from '~/flash';
import { s__, sprintf } from '~/locale';
......@@ -14,7 +13,6 @@ export default {
},
components: {
ciIcon,
loadingIcon,
},
props: {
endpoint: {
......@@ -100,10 +98,10 @@ export default {
</script>
<template>
<div class="ci-status-link">
<loading-icon
<gl-loading-icon
v-if="isLoading"
:size="3"
label="Loading pipeline status"
size="3"
/>
<a
v-else
......
<script>
import { mapGetters, mapActions } from 'vuex';
import Flash from '../../flash';
import loadingIcon from '../../vue_shared/components/loading_icon.vue';
import store from '../stores';
import collapsibleContainer from './collapsible_container.vue';
import { errorMessages, errorMessagesTypes } from '../constants';
......@@ -10,7 +9,6 @@
name: 'RegistryListApp',
components: {
collapsibleContainer,
loadingIcon,
},
props: {
endpoint: {
......@@ -42,9 +40,9 @@
</script>
<template>
<div>
<loading-icon
<gl-loading-icon
v-if="isLoading"
size="3"
:size="3"
/>
<collapsible-container
......
......@@ -2,7 +2,6 @@
import { mapActions } from 'vuex';
import Flash from '../../flash';
import clipboardButton from '../../vue_shared/components/clipboard_button.vue';
import loadingIcon from '../../vue_shared/components/loading_icon.vue';
import tooltip from '../../vue_shared/directives/tooltip';
import tableRegistry from './table_registry.vue';
import { errorMessages, errorMessagesTypes } from '../constants';
......@@ -12,7 +11,6 @@
name: 'CollapsibeContainerRegisty',
components: {
clipboardButton,
loadingIcon,
tableRegistry,
},
directives: {
......@@ -107,10 +105,10 @@
</div>
</div>
<loading-icon
<gl-loading-icon
v-if="repo.isLoading"
:size="2"
class="append-bottom-20"
size="2"
/>
<div
......
<script>
import CiIcon from '~/vue_shared/components/ci_icon.vue';
import LoadingIcon from '~/vue_shared/components/loading_icon.vue';
import Popover from '~/vue_shared/components/help_popover.vue';
/**
......@@ -15,7 +14,6 @@ export default {
name: 'ReportSummaryRow',
components: {
CiIcon,
LoadingIcon,
Popover,
},
props: {
......@@ -46,7 +44,7 @@ export default {
<template>
<div class="report-block-list-issue report-block-list-issue-parent">
<div class="report-block-list-icon append-right-10 prepend-left-5">
<loading-icon
<gl-loading-icon
v-if="statusIcon === 'loading'"
css-class="report-block-list-loading-icon"
/>
......
<script>
import { __, n__, sprintf } from '~/locale';
import tooltip from '~/vue_shared/directives/tooltip';
import loadingIcon from '~/vue_shared/components/loading_icon.vue';
import userAvatarImage from '~/vue_shared/components/user_avatar/user_avatar_image.vue';
export default {
......@@ -9,7 +8,6 @@
tooltip,
},
components: {
loadingIcon,
userAvatarImage,
},
props: {
......@@ -93,7 +91,7 @@
aria-hidden="true"
>
</i>
<loading-icon
<gl-loading-icon
v-if="loading"
class="js-participants-collapsed-loading-icon"
/>
......@@ -105,7 +103,7 @@
</span>
</div>
<div class="title hide-collapsed">
<loading-icon
<gl-loading-icon
v-if="loading"
:inline="true"
class="js-participants-expanded-loading-icon"
......
......@@ -3,7 +3,6 @@ import { __ } from '~/locale';
import tooltip from '~/vue_shared/directives/tooltip';
import Icon from '~/vue_shared/components/icon.vue';
import LoadingIcon from '~/vue_shared/components/loading_icon.vue';
const MARK_TEXT = __('Mark todo as done');
const TODO_TEXT = __('Add todo');
......@@ -14,7 +13,6 @@ export default {
},
components: {
Icon,
LoadingIcon,
},
props: {
issuableId: {
......@@ -90,7 +88,7 @@ export default {
>
{{ buttonLabel }}
</span>
<loading-icon
<gl-loading-icon
v-show="isActionActive"
:inline="true"
/>
......
<script>
import ciIcon from '../../vue_shared/components/ci_icon.vue';
import loadingIcon from '../../vue_shared/components/loading_icon.vue';
export default {
components: {
ciIcon,
loadingIcon,
},
props: {
status: {
......@@ -37,7 +35,7 @@
v-if="isLoading"
class="mr-widget-icon"
>
<loading-icon />
<gl-loading-icon />
</div>
<ci-icon
......
<script>
import loadingIcon from '~/vue_shared/components/loading_icon.vue';
import eventHub from '../../event_hub';
import statusIcon from '../mr_widget_status_icon.vue';
......@@ -7,7 +6,6 @@
name: 'MRWidgetAutoMergeFailed',
components: {
statusIcon,
loadingIcon,
},
props: {
mr: {
......@@ -44,7 +42,7 @@
class="btn btn-sm btn-default"
@click="refreshWidget"
>
<loading-icon
<gl-loading-icon
v-if="isRefreshing"
:inline="true"
/>
......
<script>
import Flash from '~/flash';
import tooltip from '~/vue_shared/directives/tooltip';
import loadingIcon from '~/vue_shared/components/loading_icon.vue';
import { s__, __ } from '~/locale';
import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
import MrWidgetAuthorTime from '../../components/mr_widget_author_time.vue';
......@@ -15,7 +14,6 @@
},
components: {
MrWidgetAuthorTime,
loadingIcon,
statusIcon,
ClipboardButton,
},
......@@ -195,7 +193,7 @@
</button>
</p>
<p v-if="shouldShowSourceBranchRemoving">
<loading-icon :inline="true" />
<gl-loading-icon :inline="true" />
<span>
{{ s__("mrWidget|The source branch is being removed") }}
</span>
......
......@@ -2,14 +2,12 @@
import simplePoll from '../../../lib/utils/simple_poll';
import eventHub from '../../event_hub';
import statusIcon from '../mr_widget_status_icon.vue';
import loadingIcon from '../../../vue_shared/components/loading_icon.vue';
import Flash from '../../../flash';
export default {
name: 'MRWidgetRebase',
components: {
statusIcon,
loadingIcon,
},
props: {
mr: {
......@@ -115,7 +113,7 @@ js-toggle-container accept-action media space-children"
class="btn btn-sm btn-reopen btn-success qa-mr-rebase-button"
@click="rebase"
>
<loading-icon v-if="isMakingRequest" />
<gl-loading-icon v-if="isMakingRequest" />
Rebase
</button>
<span
......
<script>
import { __ } from '~/locale';
import LoadingIcon from '~/vue_shared/components/loading_icon.vue';
export default {
components: {
LoadingIcon,
},
props: {
isDisabled: {
type: Boolean,
......@@ -34,7 +30,7 @@ export default {
data-toggle="dropdown"
aria-expanded="false"
>
<loading-icon
<gl-loading-icon
v-show="isLoading"
:inline="true"
/>
......
<script>
import getIconForFile from './file_icon/file_icon_map';
import loadingIcon from '../../vue_shared/components/loading_icon.vue';
import icon from '../../vue_shared/components/icon.vue';
/* This is a re-usable vue component for rendering a svg sprite
......@@ -17,7 +16,6 @@ import icon from '../../vue_shared/components/icon.vue';
*/
export default {
components: {
loadingIcon,
icon,
},
props: {
......@@ -84,7 +82,7 @@ export default {
:size="size"
css-classes="folder-icon"
/>
<loading-icon
<gl-loading-icon
v-if="loading"
:inline="true"
/>
......
<script>
import CiIconBadge from './ci_badge_link.vue';
import LoadingIcon from './loading_icon.vue';
import TimeagoTooltip from './time_ago_tooltip.vue';
import tooltip from '../directives/tooltip';
import UserAvatarImage from './user_avatar/user_avatar_image.vue';
......@@ -15,7 +14,6 @@ import UserAvatarImage from './user_avatar/user_avatar_image.vue';
export default {
components: {
CiIconBadge,
LoadingIcon,
TimeagoTooltip,
UserAvatarImage,
},
......
......@@ -17,12 +17,7 @@
*/
import loadingIcon from './loading_icon.vue';
export default {
components: {
loadingIcon,
},
props: {
loading: {
type: Boolean,
......@@ -60,7 +55,7 @@
@click="onClick"
>
<transition name="fade">
<loading-icon
<gl-loading-icon
v-if="loading"
:inline="true"
:class="{
......
<script>
export default {
props: {
label: {
type: String,
required: false,
default: 'Loading',
},
size: {
type: String,
required: false,
default: '1',
},
inline: {
type: Boolean,
required: false,
default: false,
},
},
computed: {
rootElementType() {
return this.inline ? 'span' : 'div';
},
cssClass() {
return `fa-${this.size}x`;
},
},
};
</script>
<template>
<component
:is="rootElementType"
class="loading-container text-center">
<i
:class="cssClass"
:aria-label="label"
class="fa fa-spin fa-spinner"
aria-hidden="true"
>
</i>
</component>
</template>
<script>
import datePicker from '../pikaday.vue';
import loadingIcon from '../loading_icon.vue';
import toggleSidebar from './toggle_sidebar.vue';
import collapsedCalendarIcon from './collapsed_calendar_icon.vue';
import { dateInWords } from '../../../lib/utils/datetime_utility';
......@@ -10,7 +9,6 @@
components: {
datePicker,
toggleSidebar,
loadingIcon,
collapsedCalendarIcon,
},
props: {
......@@ -112,7 +110,7 @@
/>
<div class="title">
{{ label }}
<loading-icon
<gl-loading-icon
v-if="isLoading"
:inline="true"
/>
......
......@@ -3,7 +3,6 @@ import $ from 'jquery';
import { __ } from '~/locale';
import LabelsSelect from '~/labels_select';
import DropdownHiddenInput from '~/vue_shared/components/dropdown/dropdown_hidden_input.vue';
import LoadingIcon from '../../loading_icon.vue';
import DropdownTitle from './dropdown_title.vue';
import DropdownValue from './dropdown_value.vue';
......@@ -16,7 +15,6 @@ import DropdownCreateLabel from './dropdown_create_label.vue';
export default {
components: {
LoadingIcon,
DropdownTitle,
DropdownValue,
DropdownValueCollapsed,
......@@ -164,7 +162,7 @@ dropdown-menu-labels dropdown-menu-selectable"
<dropdown-search-input/>
<div class="dropdown-content"></div>
<div class="dropdown-loading">
<loading-icon />
<gl-loading-icon />
</div>
<dropdown-footer
v-if="showCreate"
......
<script>
import { s__ } from '../../locale';
import icon from './icon.vue';
import loadingIcon from './loading_icon.vue';
const ICON_ON = 'status_success_borderless';
const ICON_OFF = 'status_failed_borderless';
......@@ -11,7 +10,6 @@
export default {
components: {
icon,
loadingIcon,
},
model: {
......@@ -78,7 +76,7 @@
class="project-feature-toggle"
@click="toggleFeature"
>
<loadingIcon class="loading-icon" />
<gl-loading-icon class="loading-icon" />
<span class="toggle-icon">
<icon
:name="toggleIcon"
......
......@@ -62,9 +62,11 @@ describe('File Icon component', () => {
loading: true,
});
expect(
vm.$el.querySelector('i').getAttribute('class'),
).toEqual('fa fa-spin fa-spinner fa-1x');
const { classList } = vm.$el.querySelector('i');
expect(classList.contains('fa')).toEqual(true);
expect(classList.contains('fa-spin')).toEqual(true);
expect(classList.contains('fa-spinner')).toEqual(true);
expect(classList.contains('fa-1x')).toEqual(true);
});
it('should add a special class and a size class', () => {
......
import Vue from 'vue';
import loadingIcon from '~/vue_shared/components/loading_icon.vue';
describe('Loading Icon Component', () => {
let LoadingIconComponent;
beforeEach(() => {
LoadingIconComponent = Vue.extend(loadingIcon);
});
it('should render a spinner font awesome icon', () => {
const component = new LoadingIconComponent().$mount();
expect(
component.$el.querySelector('i').getAttribute('class'),
).toEqual('fa fa-spin fa-spinner fa-1x');
expect(component.$el.tagName).toEqual('DIV');
expect(component.$el.classList).toContain('text-center');
expect(component.$el.classList).toContain('loading-container');
});
it('should render accessibility attributes', () => {
const component = new LoadingIconComponent().$mount();
const icon = component.$el.querySelector('i');
expect(icon.getAttribute('aria-hidden')).toEqual('true');
expect(icon.getAttribute('aria-label')).toEqual('Loading');
});
it('should render the provided label', () => {
const component = new LoadingIconComponent({
propsData: {
label: 'This is a loading icon',
},
}).$mount();
expect(
component.$el.querySelector('i').getAttribute('aria-label'),
).toEqual('This is a loading icon');
});
it('should render the provided size', () => {
const component = new LoadingIconComponent({
propsData: {
size: '2',
},
}).$mount();
expect(
component.$el.querySelector('i').classList.contains('fa-2x'),
).toEqual(true);
});
});
......@@ -82,9 +82,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.2.0":
version "1.2.0"
resolved "https://registry.yarnpkg.com/@gitlab-org/gitlab-ui/-/gitlab-ui-1.2.0.tgz#1d9bf067c2ccf70bcc8e8150644dac475106f3c8"
"@gitlab-org/gitlab-ui@^1.5.0":
version "1.5.0"
resolved "https://registry.yarnpkg.com/@gitlab-org/gitlab-ui/-/gitlab-ui-1.5.0.tgz#320ba164ba8812ff64f94b1cae79a7b749f5bc03"
dependencies:
"@gitlab-org/gitlab-svgs" "^1.23.0"
bootstrap-vue "^2.0.0-rc.11"
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment