diff options
Diffstat (limited to 'app/assets/javascripts/ide/components')
23 files changed, 40 insertions, 34 deletions
diff --git a/app/assets/javascripts/ide/components/branches/item.vue b/app/assets/javascripts/ide/components/branches/item.vue index e7f4cd796b5..49744d573da 100644 --- a/app/assets/javascripts/ide/components/branches/item.vue +++ b/app/assets/javascripts/ide/components/branches/item.vue @@ -33,7 +33,7 @@ export default { <template> <a :href="branchHref" class="btn-link d-flex align-items-center"> - <span class="d-flex append-right-default ide-search-list-current-icon"> + <span class="d-flex gl-mr-3 ide-search-list-current-icon"> <icon v-if="isActive" :size="18" name="mobile-issue-close" /> </span> <span> diff --git a/app/assets/javascripts/ide/components/commit_sidebar/actions.vue b/app/assets/javascripts/ide/components/commit_sidebar/actions.vue index 6c563776533..407e4c57cd8 100644 --- a/app/assets/javascripts/ide/components/commit_sidebar/actions.vue +++ b/app/assets/javascripts/ide/components/commit_sidebar/actions.vue @@ -70,7 +70,7 @@ export default { </script> <template> - <div class="append-bottom-15 ide-commit-options"> + <div class="gl-mb-5 ide-commit-options"> <radio-group :value="$options.commitToCurrentBranch" :disabled="!canPushToBranch" diff --git a/app/assets/javascripts/ide/components/commit_sidebar/empty_state.vue b/app/assets/javascripts/ide/components/commit_sidebar/empty_state.vue index a13ca0cd138..3ffbcbf99e8 100644 --- a/app/assets/javascripts/ide/components/commit_sidebar/empty_state.vue +++ b/app/assets/javascripts/ide/components/commit_sidebar/empty_state.vue @@ -12,7 +12,7 @@ export default { <div v-if="!lastCommitMsg" class="multi-file-commit-panel-section ide-commit-empty-state"> <div class="ide-commit-empty-state-container"> <div class="svg-content svg-80"><img :src="noChangesStateSvgPath" /></div> - <div class="append-right-default prepend-left-default"> + <div class="gl-mr-3 gl-ml-3"> <div class="text-content text-center"> <h4>{{ __('No changes') }}</h4> <p>{{ __('Edit files in the editor and commit changes here') }}</p> diff --git a/app/assets/javascripts/ide/components/commit_sidebar/list_collapsed.vue b/app/assets/javascripts/ide/components/commit_sidebar/list_collapsed.vue index b6fc567f8cc..03304337839 100644 --- a/app/assets/javascripts/ide/components/commit_sidebar/list_collapsed.vue +++ b/app/assets/javascripts/ide/components/commit_sidebar/list_collapsed.vue @@ -75,7 +75,7 @@ export default { :title="titleTooltip" data-container="body" data-placement="left" - class="append-bottom-15" + class="gl-mb-5" > <icon v-once :name="iconName" :size="18" /> </div> diff --git a/app/assets/javascripts/ide/components/commit_sidebar/message_field.vue b/app/assets/javascripts/ide/components/commit_sidebar/message_field.vue index 6b0aa5b2b2b..b37c7280a30 100644 --- a/app/assets/javascripts/ide/components/commit_sidebar/message_field.vue +++ b/app/assets/javascripts/ide/components/commit_sidebar/message_field.vue @@ -83,7 +83,7 @@ export default { <ul class="nav-links"> <li> {{ __('Commit Message') }} - <span v-popover="$options.popoverOptions" class="form-text text-muted prepend-left-10"> + <span v-popover="$options.popoverOptions" class="form-text text-muted gl-ml-3"> <icon name="question" /> </span> </li> diff --git a/app/assets/javascripts/ide/components/commit_sidebar/new_merge_request_option.vue b/app/assets/javascripts/ide/components/commit_sidebar/new_merge_request_option.vue index 0812599c25c..cdf49866982 100644 --- a/app/assets/javascripts/ide/components/commit_sidebar/new_merge_request_option.vue +++ b/app/assets/javascripts/ide/components/commit_sidebar/new_merge_request_option.vue @@ -44,7 +44,7 @@ export default { data-qa-selector="start_new_mr_checkbox" @change="toggleShouldCreateMR" /> - <span class="prepend-left-10 ide-option-label"> + <span class="gl-ml-3 ide-option-label"> {{ __('Start a new merge request') }} </span> </label> diff --git a/app/assets/javascripts/ide/components/commit_sidebar/radio_group.vue b/app/assets/javascripts/ide/components/commit_sidebar/radio_group.vue index a9591805261..aed7b792902 100644 --- a/app/assets/javascripts/ide/components/commit_sidebar/radio_group.vue +++ b/app/assets/javascripts/ide/components/commit_sidebar/radio_group.vue @@ -66,7 +66,7 @@ export default { name="commit-action" @change="updateCommitAction($event.target.value)" /> - <span class="prepend-left-10"> + <span class="gl-ml-3"> <span v-if="label" class="ide-option-label"> {{ label }} </span> <slot v-else></slot> </span> </label> diff --git a/app/assets/javascripts/ide/components/commit_sidebar/success_message.vue b/app/assets/javascripts/ide/components/commit_sidebar/success_message.vue index 137f8bb18c7..327b0b8172f 100644 --- a/app/assets/javascripts/ide/components/commit_sidebar/success_message.vue +++ b/app/assets/javascripts/ide/components/commit_sidebar/success_message.vue @@ -13,7 +13,7 @@ export default { <div class="svg-content svg-80"> <img :src="committedStateSvgPath" :alt="s__('IDE|Successful commit')" /> </div> - <div class="append-right-default prepend-left-default"> + <div class="gl-mr-3 gl-ml-3"> <div class="text-content text-center"> <h4>{{ __('All changes are committed') }}</h4> <p v-html="lastCommitMsg"></p> diff --git a/app/assets/javascripts/ide/components/file_row_extra.vue b/app/assets/javascripts/ide/components/file_row_extra.vue index 51509cd5fe6..f7cf7a5b251 100644 --- a/app/assets/javascripts/ide/components/file_row_extra.vue +++ b/app/assets/javascripts/ide/components/file_row_extra.vue @@ -76,7 +76,7 @@ export default { data-container="body" data-placement="right" name="file-modified" - class="prepend-left-5 ide-file-modified" + class="gl-ml-2 ide-file-modified" /> </span> <changed-file-icon diff --git a/app/assets/javascripts/ide/components/file_templates/bar.vue b/app/assets/javascripts/ide/components/file_templates/bar.vue index d459e3b43d3..b6a57d1b6e6 100644 --- a/app/assets/javascripts/ide/components/file_templates/bar.vue +++ b/app/assets/javascripts/ide/components/file_templates/bar.vue @@ -48,7 +48,7 @@ export default { <template> <div class="d-flex align-items-center ide-file-templates qa-file-templates-bar"> - <strong class="append-right-default"> {{ __('File templates') }} </strong> + <strong class="gl-mr-3"> {{ __('File templates') }} </strong> <dropdown :data="templateTypes" :label="selectedTemplateType.name || __('Choose a type...')" diff --git a/app/assets/javascripts/ide/components/ide.vue b/app/assets/javascripts/ide/components/ide.vue index e9f84eb8648..55b3eaf9737 100644 --- a/app/assets/javascripts/ide/components/ide.vue +++ b/app/assets/javascripts/ide/components/ide.vue @@ -1,6 +1,6 @@ <script> import { mapActions, mapGetters, mapState } from 'vuex'; -import { GlDeprecatedButton, GlLoadingIcon } from '@gitlab/ui'; +import { GlButton, GlLoadingIcon } from '@gitlab/ui'; import { __ } from '~/locale'; import { modalTypes } from '../constants'; import FindFile from '~/vue_shared/components/file_finder/index.vue'; @@ -24,7 +24,7 @@ export default { FindFile, ErrorMessage, CommitEditorHeader, - GlDeprecatedButton, + GlButton, GlLoadingIcon, RightPane, }, @@ -121,15 +121,16 @@ export default { ) }} </p> - <gl-deprecated-button + <gl-button variant="success" + category="primary" :title="__('New file')" :aria-label="__('New file')" data-qa-selector="first_file_button" @click="createNewFile()" > {{ __('New file') }} - </gl-deprecated-button> + </gl-button> </template> <gl-loading-icon v-else-if="!currentTree || currentTree.loading" size="md" /> <p v-else> diff --git a/app/assets/javascripts/ide/components/ide_review.vue b/app/assets/javascripts/ide/components/ide_review.vue index 62dbfea2088..95348711e1d 100644 --- a/app/assets/javascripts/ide/components/ide_review.vue +++ b/app/assets/javascripts/ide/components/ide_review.vue @@ -53,7 +53,7 @@ export default { @click="updateViewer" /> </div> - <div class="prepend-top-5 ide-review-sub-header"> + <div class="gl-mt-2 ide-review-sub-header"> <template v-if="showLatestChangesText"> {{ __('Latest changes') }} </template> diff --git a/app/assets/javascripts/ide/components/ide_status_list.vue b/app/assets/javascripts/ide/components/ide_status_list.vue index 92d25709bd5..1354fdc3d98 100644 --- a/app/assets/javascripts/ide/components/ide_status_list.vue +++ b/app/assets/javascripts/ide/components/ide_status_list.vue @@ -1,12 +1,17 @@ <script> import { mapGetters } from 'vuex'; +import { GlLink, GlTooltipDirective } from '@gitlab/ui'; import TerminalSyncStatusSafe from './terminal_sync/terminal_sync_status_safe.vue'; import { getFileEOL } from '../utils'; export default { components: { + GlLink, TerminalSyncStatusSafe, }, + directives: { + GlTooltip: GlTooltipDirective, + }, computed: { ...mapGetters(['activeFile']), activeFileEOL() { @@ -19,12 +24,14 @@ export default { <template> <div class="ide-status-list d-flex"> <template v-if="activeFile"> - <div class="ide-status-file">{{ activeFile.name }}</div> - <div class="ide-status-file">{{ activeFileEOL }}</div> - <div v-if="!activeFile.binary" class="ide-status-file"> - {{ activeFile.editorRow }}:{{ activeFile.editorColumn }} + <div> + <gl-link v-gl-tooltip.hover :href="activeFile.permalink" :title="__('Open in file view')"> + {{ activeFile.name }} + </gl-link> </div> - <div class="ide-status-file">{{ activeFile.fileLanguage }}</div> + <div>{{ activeFileEOL }}</div> + <div v-if="!activeFile.binary">{{ activeFile.editorRow }}:{{ activeFile.editorColumn }}</div> + <div>{{ activeFile.fileLanguage }}</div> </template> <terminal-sync-status-safe /> </div> diff --git a/app/assets/javascripts/ide/components/jobs/item.vue b/app/assets/javascripts/ide/components/jobs/item.vue index be8bf77bba0..db3630bc1d1 100644 --- a/app/assets/javascripts/ide/components/jobs/item.vue +++ b/app/assets/javascripts/ide/components/jobs/item.vue @@ -26,7 +26,7 @@ export default { <template> <div class="ide-job-item"> - <job-description :job="job" class="append-right-default" /> + <job-description :job="job" class="gl-mr-3" /> <div class="ml-auto align-self-center"> <button v-if="job.started" type="button" class="btn btn-default btn-sm" @click="clickViewLog"> {{ __('View log') }} diff --git a/app/assets/javascripts/ide/components/jobs/list.vue b/app/assets/javascripts/ide/components/jobs/list.vue index b97b7289886..4e0912f3f44 100644 --- a/app/assets/javascripts/ide/components/jobs/list.vue +++ b/app/assets/javascripts/ide/components/jobs/list.vue @@ -26,7 +26,7 @@ export default { <template> <div> - <gl-loading-icon v-if="loading && !stages.length" size="lg" class="prepend-top-default" /> + <gl-loading-icon v-if="loading && !stages.length" size="lg" class="gl-mt-3" /> <template v-else> <stage v-for="stage in stages" diff --git a/app/assets/javascripts/ide/components/jobs/stage.vue b/app/assets/javascripts/ide/components/jobs/stage.vue index 169a948c2da..75441e8c1c8 100644 --- a/app/assets/javascripts/ide/components/jobs/stage.vue +++ b/app/assets/javascripts/ide/components/jobs/stage.vue @@ -56,7 +56,7 @@ export default { </script> <template> - <div class="ide-stage card prepend-top-default"> + <div class="ide-stage card gl-mt-3"> <div ref="cardHeader" :class="{ diff --git a/app/assets/javascripts/ide/components/merge_requests/item.vue b/app/assets/javascripts/ide/components/merge_requests/item.vue index 3f060392686..8b7b8d5a91c 100644 --- a/app/assets/javascripts/ide/components/merge_requests/item.vue +++ b/app/assets/javascripts/ide/components/merge_requests/item.vue @@ -40,7 +40,7 @@ export default { <template> <a :href="mergeRequestHref" class="btn-link d-flex align-items-center"> - <span class="d-flex append-right-default ide-search-list-current-icon"> + <span class="d-flex gl-mr-3 ide-search-list-current-icon"> <icon v-if="isActive" :size="18" name="mobile-issue-close" /> </span> <span> diff --git a/app/assets/javascripts/ide/components/merge_requests/list.vue b/app/assets/javascripts/ide/components/merge_requests/list.vue index bf2a33be653..af45d88b84a 100644 --- a/app/assets/javascripts/ide/components/merge_requests/list.vue +++ b/app/assets/javascripts/ide/components/merge_requests/list.vue @@ -102,7 +102,7 @@ export default { class="btn-link d-flex align-items-center" @click.stop="setSearchType(searchType)" > - <span class="d-flex append-right-default ide-search-list-current-icon"> + <span class="d-flex gl-mr-3 ide-search-list-current-icon"> <icon :size="18" name="search" /> </span> <span>{{ searchType.label }}</span> diff --git a/app/assets/javascripts/ide/components/new_dropdown/index.vue b/app/assets/javascripts/ide/components/new_dropdown/index.vue index 2798ede5341..b656e35f150 100644 --- a/app/assets/javascripts/ide/components/new_dropdown/index.vue +++ b/app/assets/javascripts/ide/components/new_dropdown/index.vue @@ -64,6 +64,7 @@ export default { :aria-label="__('Create new file or directory')" type="button" class="rounded border-0 d-flex ide-entry-dropdown-toggle" + data-qa-selector="dropdown_button" @click.stop="openDropdown()" > <icon name="ellipsis_v" /> <icon name="chevron-down" /> @@ -97,6 +98,7 @@ export default { class="d-flex" icon="pencil" icon-classes="mr-2" + data-qa-selector="rename_move_button" @click="createNewItem($options.modalTypes.rename)" /> </li> diff --git a/app/assets/javascripts/ide/components/new_dropdown/modal.vue b/app/assets/javascripts/ide/components/new_dropdown/modal.vue index 586d6867ab4..fe0167942b8 100644 --- a/app/assets/javascripts/ide/components/new_dropdown/modal.vue +++ b/app/assets/javascripts/ide/components/new_dropdown/modal.vue @@ -154,10 +154,7 @@ export default { data-qa-selector="file_name_field" :placeholder="placeholder" /> - <ul - v-if="isCreatingNewFile" - class="file-templates prepend-top-default list-inline qa-template-list" - > + <ul v-if="isCreatingNewFile" class="file-templates gl-mt-3 list-inline qa-template-list"> <li v-for="(template, index) in templateTypes" :key="index" class="list-inline-item"> <button type="button" diff --git a/app/assets/javascripts/ide/components/pipelines/list.vue b/app/assets/javascripts/ide/components/pipelines/list.vue index 6958a5d2526..6038e92f254 100644 --- a/app/assets/javascripts/ide/components/pipelines/list.vue +++ b/app/assets/javascripts/ide/components/pipelines/list.vue @@ -7,7 +7,7 @@ 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'; import Tab from '../../../vue_shared/components/tabs/tab.vue'; -import EmptyState from '../../../pipelines/components/empty_state.vue'; +import EmptyState from '../../../pipelines/components/pipelines_list/empty_state.vue'; import JobsList from '../jobs/list.vue'; import IDEServices from '~/ide/services'; @@ -59,7 +59,7 @@ export default { <template> <div class="ide-pipeline"> - <gl-loading-icon v-if="showLoadingIcon" size="lg" class="prepend-top-default" /> + <gl-loading-icon v-if="showLoadingIcon" size="lg" class="gl-mt-3" /> <template v-else-if="hasLoadedPipeline"> <header v-if="latestPipeline" class="ide-tree-header ide-pipeline-header"> <ci-icon :status="latestPipeline.details.status" :size="24" class="d-flex" /> diff --git a/app/assets/javascripts/ide/components/repo_editor.vue b/app/assets/javascripts/ide/components/repo_editor.vue index a7646083428..ac445a1d9f1 100644 --- a/app/assets/javascripts/ide/components/repo_editor.vue +++ b/app/assets/javascripts/ide/components/repo_editor.vue @@ -185,7 +185,6 @@ export default { 'setFileLanguage', 'setEditorPosition', 'setFileViewMode', - 'updateViewer', 'removePendingTab', 'triggerFilesChange', 'addTempImage', @@ -241,7 +240,7 @@ export default { }); }, setupEditor() { - if (!this.file || !this.editor.instance) return; + if (!this.file || !this.editor.instance || this.file.loading) return; const head = this.getStagedFile(this.file.path); diff --git a/app/assets/javascripts/ide/components/terminal/empty_state.vue b/app/assets/javascripts/ide/components/terminal/empty_state.vue index 9841f1ece48..5dd12e62820 100644 --- a/app/assets/javascripts/ide/components/terminal/empty_state.vue +++ b/app/assets/javascripts/ide/components/terminal/empty_state.vue @@ -43,7 +43,7 @@ export default { <div class="text-center p-3"> <div v-if="illustrationPath" class="svg-content svg-130"><img :src="illustrationPath" /></div> <h4>{{ __('Web Terminal') }}</h4> - <gl-loading-icon v-if="isLoading" size="lg" class="prepend-top-default" /> + <gl-loading-icon v-if="isLoading" size="lg" class="gl-mt-3" /> <template v-else> <p>{{ __('Run tests against your code live using the Web Terminal') }}</p> <p> |