diff options
Diffstat (limited to 'app/assets/javascripts/ide/components')
40 files changed, 295 insertions, 186 deletions
diff --git a/app/assets/javascripts/ide/components/activity_bar.vue b/app/assets/javascripts/ide/components/activity_bar.vue index 6efcad6adea..62697e0ecc3 100644 --- a/app/assets/javascripts/ide/components/activity_bar.vue +++ b/app/assets/javascripts/ide/components/activity_bar.vue @@ -39,12 +39,12 @@ export default { <li v-once> <a v-tooltip - data-container="body" - data-placement="right" :href="goBackUrl" - class="ide-sidebar-link" :title="s__('IDE|Go back')" :aria-label="s__('IDE|Go back')" + data-container="body" + data-placement="right" + class="ide-sidebar-link" > <icon :size="16" @@ -55,16 +55,16 @@ export default { <li> <button v-tooltip - data-container="body" - data-placement="right" - type="button" - class="ide-sidebar-link js-ide-edit-mode" :class="{ active: currentActivityView === $options.activityBarViews.edit }" - @click.prevent="changedActivityView($event, $options.activityBarViews.edit)" :title="s__('IDE|Edit')" :aria-label="s__('IDE|Edit')" + data-container="body" + data-placement="right" + type="button" + class="ide-sidebar-link js-ide-edit-mode" + @click.prevent="changedActivityView($event, $options.activityBarViews.edit)" > <icon name="code" @@ -74,16 +74,16 @@ export default { <li> <button v-tooltip - data-container="body" - data-placement="right" - type="button" - class="ide-sidebar-link js-ide-review-mode" :class="{ active: currentActivityView === $options.activityBarViews.review }" - @click.prevent="changedActivityView($event, $options.activityBarViews.review)" :title="s__('IDE|Review')" :aria-label="s__('IDE|Review')" + data-container="body" + data-placement="right" + type="button" + class="ide-sidebar-link js-ide-review-mode" + @click.prevent="changedActivityView($event, $options.activityBarViews.review)" > <icon name="file-modified" @@ -93,16 +93,16 @@ export default { <li v-show="hasChanges"> <button v-tooltip - data-container="body" - data-placement="right" - type="button" - class="ide-sidebar-link js-ide-commit-mode" :class="{ active: currentActivityView === $options.activityBarViews.commit }" - @click.prevent="changedActivityView($event, $options.activityBarViews.commit)" :title="s__('IDE|Commit')" :aria-label="s__('IDE|Commit')" + data-container="body" + data-placement="right" + type="button" + class="ide-sidebar-link js-ide-commit-mode" + @click.prevent="changedActivityView($event, $options.activityBarViews.commit)" > <icon name="commit" diff --git a/app/assets/javascripts/ide/components/commit_sidebar/form.vue b/app/assets/javascripts/ide/components/commit_sidebar/form.vue index e2b42ab2642..14c74687ab4 100644 --- a/app/assets/javascripts/ide/components/commit_sidebar/form.vue +++ b/app/assets/javascripts/ide/components/commit_sidebar/form.vue @@ -91,7 +91,6 @@ export default { <template> <div - class="multi-file-commit-form" :class="{ 'is-compact': isCompact, 'is-full': !isCompact @@ -99,6 +98,7 @@ export default { :style="{ height: componentHeight ? `${componentHeight}px` : null, }" + class="multi-file-commit-form" > <transition name="commit-form-slide-up" @@ -108,16 +108,16 @@ export default { > <div v-if="isCompact" - class="commit-form-compact" ref="compactEl" + class="commit-form-compact" > <button - type="button" :disabled="!hasChanges" + type="button" class="btn btn-primary btn-sm btn-block" @click="toggleIsSmall" > - {{ __('Commit') }} + {{ __('Commit…') }} </button> <p class="text-center" @@ -126,8 +126,8 @@ export default { </div> <form v-if="!isCompact" - @submit.prevent.stop="commitChanges" ref="formEl" + @submit.prevent.stop="commitChanges" > <transition name="fade"> <success-message @@ -143,8 +143,8 @@ export default { <loading-button :loading="submitCommitLoading" :disabled="commitButtonDisabled" - container-class="btn btn-success btn-sm float-left" :label="__('Commit')" + container-class="btn btn-success btn-sm float-left" @click="commitChanges" /> <button diff --git a/app/assets/javascripts/ide/components/commit_sidebar/list.vue b/app/assets/javascripts/ide/components/commit_sidebar/list.vue index 1325fc993b2..d0fb0e3d99e 100644 --- a/app/assets/javascripts/ide/components/commit_sidebar/list.vue +++ b/app/assets/javascripts/ide/components/commit_sidebar/list.vue @@ -34,6 +34,10 @@ export default { type: String, required: true, }, + actionBtnIcon: { + type: String, + required: true, + }, itemActionComponent: { type: String, required: true, @@ -43,11 +47,15 @@ export default { required: false, default: false, }, - }, - data() { - return { - showActionButton: false, - }; + activeFileKey: { + type: String, + required: false, + default: null, + }, + keyPrefix: { + type: String, + required: true, + }, }, computed: { titleText() { @@ -55,15 +63,15 @@ export default { title: this.title, }); }, + filesLength() { + return this.fileList.length; + }, }, methods: { ...mapActions(['stageAllChanges', 'unstageAllChanges']), actionBtnClicked() { this[this.action](); }, - setShowActionButton(show) { - this.showActionButton = show; - }, }, }; </script> @@ -74,8 +82,6 @@ export default { > <header class="multi-file-commit-panel-header" - @mouseenter="setShowActionButton(true)" - @mouseleave="setShowActionButton(false)" > <div class="multi-file-commit-panel-header-title" @@ -86,24 +92,40 @@ export default { :size="18" /> {{ titleText }} - <span - v-show="!showActionButton" - class="ide-commit-file-count" - > - {{ fileList.length }} - </span> - <button - v-show="showActionButton" - type="button" - class="btn btn-blank btn-link ide-staged-action-btn" - @click="actionBtnClicked" - > - {{ actionBtnText }} - </button> + <div class="d-flex ml-auto"> + <button + v-tooltip + v-show="filesLength" + :class="{ + 'd-flex': filesLength + }" + :title="actionBtnText" + type="button" + class="btn btn-default ide-staged-action-btn p-0 order-1 align-items-center" + data-placement="bottom" + data-container="body" + data-boundary="viewport" + @click="actionBtnClicked" + > + <icon + :name="actionBtnIcon" + :size="12" + class="ml-auto mr-auto" + /> + </button> + <span + :class="{ + 'rounded-right': !filesLength + }" + class="ide-commit-file-count order-0 rounded-left text-center" + > + {{ filesLength }} + </span> + </div> </div> </header> <ul - v-if="fileList.length" + v-if="filesLength" class="multi-file-commit-list list-unstyled append-bottom-0" > <li @@ -113,8 +135,9 @@ export default { <list-item :file="file" :action-component="itemActionComponent" - :key-prefix="title" + :key-prefix="keyPrefix" :staged-list="stagedList" + :active-file-key="activeFileKey" /> </li> </ul> 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 2254271c679..d376a004e84 100644 --- a/app/assets/javascripts/ide/components/commit_sidebar/list_collapsed.vue +++ b/app/assets/javascripts/ide/components/commit_sidebar/list_collapsed.vue @@ -38,14 +38,17 @@ export default { return this.modifiedFilesLength ? 'multi-file-modified' : ''; }, additionsTooltip() { - return sprintf(n__('1 %{type} addition', '%d %{type} additions', this.addedFilesLength), { + return sprintf(n__('1 %{type} addition', '%{count} %{type} additions', this.addedFilesLength), { type: this.title.toLowerCase(), + count: this.addedFilesLength, }); }, modifiedTooltip() { return sprintf( - n__('1 %{type} modification', '%d %{type} modifications', this.modifiedFilesLength), - { type: this.title.toLowerCase() }, + n__('1 %{type} modification', '%{count} %{type} modifications', this.modifiedFilesLength), { + type: this.title.toLowerCase(), + count: this.modifiedFilesLength, + }, ); }, titleTooltip() { diff --git a/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue b/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue index 03f3e4de83c..ee21eeda3cd 100644 --- a/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue +++ b/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue @@ -1,5 +1,6 @@ <script> import { mapActions } from 'vuex'; +import tooltip from '~/vue_shared/directives/tooltip'; import Icon from '~/vue_shared/components/icon.vue'; import StageButton from './stage_button.vue'; import UnstageButton from './unstage_button.vue'; @@ -11,6 +12,9 @@ export default { StageButton, UnstageButton, }, + directives: { + tooltip, + }, props: { file: { type: Object, @@ -30,6 +34,11 @@ export default { required: false, default: false, }, + activeFileKey: { + type: String, + required: false, + default: null, + }, }, computed: { iconName() { @@ -39,6 +48,15 @@ export default { iconClass() { return `multi-file-${this.file.tempFile ? 'addition' : 'modified'} append-right-8`; }, + fullKey() { + return `${this.keyPrefix}-${this.file.key}`; + }, + isActive() { + return this.activeFileKey === this.fullKey; + }, + tooltipTitle() { + return this.file.path === this.file.name ? '' : this.file.path; + }, }, methods: { ...mapActions([ @@ -51,7 +69,7 @@ export default { openFileInEditor() { return this.openPendingTab({ file: this.file, - keyPrefix: this.keyPrefix.toLowerCase(), + keyPrefix: this.keyPrefix, }).then(changeViewer => { if (changeViewer) { this.updateViewer(viewerTypes.diff); @@ -70,24 +88,30 @@ export default { </script> <template> - <div class="multi-file-commit-list-item"> - <button - type="button" - class="multi-file-commit-list-path" + <div class="multi-file-commit-list-item position-relative"> + <div + v-tooltip + :title="tooltipTitle" + :class="{ + 'is-active': isActive + }" + class="multi-file-commit-list-path w-100 border-0 ml-0 mr-0" + role="button" @dblclick="fileAction" @click="openFileInEditor" > - <span class="multi-file-commit-list-file-path"> + <span class="multi-file-commit-list-file-path d-flex align-items-center"> <icon :name="iconName" :size="16" :css-classes="iconClass" - />{{ file.path }} + />{{ file.name }} </span> - </button> + </div> <component :is="actionComponent" :path="file.path" + class="d-flex position-absolute" /> </div> </template> 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 0ac0af2feaa..40496c80a46 100644 --- a/app/assets/javascripts/ide/components/commit_sidebar/message_field.vue +++ b/app/assets/javascripts/ide/components/commit_sidebar/message_field.vue @@ -66,10 +66,10 @@ export default { <template> <fieldset class="common-note-form ide-commit-message-field"> <div - class="md-area" :class="{ 'is-focused': isFocused }" + class="md-area" > <div v-once @@ -92,10 +92,10 @@ export default { <div class="ide-commit-message-textarea-container"> <div class="ide-commit-message-highlights-container"> <div - class="note-textarea highlights monospace" :style="{ transform: `translate3d(0, ${-scrollTop}px, 0)` }" + class="note-textarea highlights monospace" > <div v-for="(line, index) in allLines" @@ -113,15 +113,15 @@ export default { </div> </div> <textarea - class="note-textarea ide-commit-message-textarea" - name="commit-message" + ref="textarea" :placeholder="__('Write a commit message...')" :value="text" + class="note-textarea ide-commit-message-textarea" + name="commit-message" @scroll="handleScroll" @input="onInput" @focus="updateIsFocused(true)" @blur="updateIsFocused(false)" - ref="textarea" > </textarea> </div> 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 00f2312ae51..35ab3fd11df 100644 --- a/app/assets/javascripts/ide/components/commit_sidebar/radio_group.vue +++ b/app/assets/javascripts/ide/components/commit_sidebar/radio_group.vue @@ -58,12 +58,12 @@ export default { }" > <input - type="radio" - name="commit-action" :value="value" - @change="updateCommitAction($event.target.value)" :checked="commitAction === value" :disabled="disabled" + type="radio" + name="commit-action" + @change="updateCommitAction($event.target.value)" /> <span class="prepend-left-10"> <span @@ -80,9 +80,9 @@ export default { class="ide-commit-new-branch" > <input + :placeholder="newBranchName" type="text" class="form-control monospace" - :placeholder="newBranchName" @input="updateBranchName($event.target.value)" /> </div> diff --git a/app/assets/javascripts/ide/components/commit_sidebar/stage_button.vue b/app/assets/javascripts/ide/components/commit_sidebar/stage_button.vue index 52dce8412ab..7014b9f605e 100644 --- a/app/assets/javascripts/ide/components/commit_sidebar/stage_button.vue +++ b/app/assets/javascripts/ide/components/commit_sidebar/stage_button.vue @@ -25,35 +25,51 @@ export default { <template> <div v-once - class="multi-file-discard-btn" + class="multi-file-discard-btn dropdown" > <button v-tooltip - type="button" - class="btn btn-blank append-right-5" :aria-label="__('Stage changes')" :title="__('Stage changes')" + type="button" + class="btn btn-blank append-right-5 d-flex align-items-center" data-container="body" + data-boundary="viewport" + data-placement="bottom" @click.stop="stageChange(path)" > <icon - name="mobile-issue-close" :size="12" + name="mobile-issue-close" /> </button> <button v-tooltip + :title="__('More actions')" type="button" - class="btn btn-blank" - :aria-label="__('Discard changes')" - :title="__('Discard changes')" + class="btn btn-blank d-flex align-items-center" data-container="body" - @click.stop="discardFileChanges(path)" + data-boundary="viewport" + data-placement="bottom" + data-toggle="dropdown" + data-display="static" > <icon - name="remove" :size="12" + name="more" /> </button> + <div class="dropdown-menu dropdown-menu-right"> + <ul> + <li> + <button + type="button" + @click.stop="discardFileChanges(path)" + > + {{ __('Discard changes') }} + </button> + </li> + </ul> + </div> </div> </template> diff --git a/app/assets/javascripts/ide/components/commit_sidebar/unstage_button.vue b/app/assets/javascripts/ide/components/commit_sidebar/unstage_button.vue index 123d60da47e..9cec73ec00e 100644 --- a/app/assets/javascripts/ide/components/commit_sidebar/unstage_button.vue +++ b/app/assets/javascripts/ide/components/commit_sidebar/unstage_button.vue @@ -29,16 +29,18 @@ export default { > <button v-tooltip - type="button" - class="btn btn-blank" :aria-label="__('Unstage changes')" :title="__('Unstage changes')" + type="button" + class="btn btn-blank d-flex align-items-center" data-container="body" + data-boundary="viewport" + data-placement="bottom" @click="unstageChange(path)" > <icon - name="history" :size="12" + name="history" /> </button> </div> diff --git a/app/assets/javascripts/ide/components/editor_mode_dropdown.vue b/app/assets/javascripts/ide/components/editor_mode_dropdown.vue index b9af4d27145..95598c9aca6 100644 --- a/app/assets/javascripts/ide/components/editor_mode_dropdown.vue +++ b/app/assets/javascripts/ide/components/editor_mode_dropdown.vue @@ -44,11 +44,11 @@ export default { <ul> <li> <a - href="#" - @click.prevent="changeMode($options.viewerTypes.mr)" :class="{ 'is-active': viewer === $options.viewerTypes.mr, }" + href="#" + @click.prevent="changeMode($options.viewerTypes.mr)" > <strong class="dropdown-menu-inner-title"> {{ mergeReviewLine }} @@ -60,11 +60,11 @@ export default { </li> <li> <a - href="#" - @click.prevent="changeMode($options.viewerTypes.diff)" :class="{ 'is-active': viewer === $options.viewerTypes.diff, }" + href="#" + @click.prevent="changeMode($options.viewerTypes.diff)" > <strong class="dropdown-menu-inner-title">{{ __('Reviewing') }}</strong> <span class="dropdown-menu-inner-content"> diff --git a/app/assets/javascripts/ide/components/external_link.vue b/app/assets/javascripts/ide/components/external_link.vue index cf3316a8179..e24fe5bbccb 100644 --- a/app/assets/javascripts/ide/components/external_link.vue +++ b/app/assets/javascripts/ide/components/external_link.vue @@ -26,15 +26,15 @@ export default { > <a :href="file.permalink" - target="_blank" :title="s__('IDE|Open in file view')" + target="_blank" rel="noopener noreferrer" > <span class="vertical-align-middle">Open in file view</span> <icon + :size="16" name="external-link" css-classes="vertical-align-middle space-right" - :size="16" /> </a> </div> diff --git a/app/assets/javascripts/ide/components/file_finder/index.vue b/app/assets/javascripts/ide/components/file_finder/index.vue index cabb3f59b17..0ba33053717 100644 --- a/app/assets/javascripts/ide/components/file_finder/index.vue +++ b/app/assets/javascripts/ide/components/file_finder/index.vue @@ -173,38 +173,38 @@ export default { > <div class="dropdown-input"> <input + ref="searchInput" + :placeholder="__('Search files')" + v-model="searchText" type="search" class="dropdown-input-field" - :placeholder="__('Search files')" autocomplete="off" - v-model="searchText" - ref="searchInput" @keydown="onKeydown($event)" @keyup="onKeyup($event)" /> <i - aria-hidden="true" - class="fa fa-search dropdown-input-search" :class="{ hidden: showClearInputButton }" + aria-hidden="true" + class="fa fa-search dropdown-input-search" ></i> <i - role="button" :aria-label="__('Clear search input')" - class="fa fa-times dropdown-input-clear" :class="{ show: showClearInputButton }" + role="button" + class="fa fa-times dropdown-input-clear" @click="clearSearchInput" ></i> </div> <div> <virtual-list + ref="virtualScrollList" :size="listHeight" :remain="listShowCount" wtag="ul" - ref="virtualScrollList" > <template v-if="filteredBlobsLength"> <li @@ -212,11 +212,11 @@ export default { :key="file.key" > <item - class="disable-hover" :file="file" :search-text="searchText" :focused="index === focusedIndex" :index="index" + class="disable-hover" @click="openFile" @mouseover="onMouseOver" @mousemove="onMouseMove" diff --git a/app/assets/javascripts/ide/components/file_finder/item.vue b/app/assets/javascripts/ide/components/file_finder/item.vue index d4427420207..a4cf3edb981 100644 --- a/app/assets/javascripts/ide/components/file_finder/item.vue +++ b/app/assets/javascripts/ide/components/file_finder/item.vue @@ -59,11 +59,11 @@ export default { <template> <button - type="button" - class="diff-changed-file" :class="{ 'is-focused': focused, }" + type="button" + class="diff-changed-file" @click.prevent="clickRow" @mouseover="mouseOverRow" @mousemove="mouseMove" diff --git a/app/assets/javascripts/ide/components/ide.vue b/app/assets/javascripts/ide/components/ide.vue index f5f832521c5..f5f7f967a92 100644 --- a/app/assets/javascripts/ide/components/ide.vue +++ b/app/assets/javascripts/ide/components/ide.vue @@ -93,8 +93,8 @@ export default { :merge-request-id="currentMergeRequestId" /> <repo-editor - class="multi-file-edit-pane-content" :file="activeFile" + class="multi-file-edit-pane-content" /> </template> <template diff --git a/app/assets/javascripts/ide/components/ide_review.vue b/app/assets/javascripts/ide/components/ide_review.vue index 99fa2465a84..f9978762c45 100644 --- a/app/assets/javascripts/ide/components/ide_review.vue +++ b/app/assets/javascripts/ide/components/ide_review.vue @@ -36,8 +36,8 @@ export default { <template> <ide-tree-list :viewer-type="viewer" - header-class="ide-review-header" :disable-action-dropdown="true" + header-class="ide-review-header" > <template slot="header" diff --git a/app/assets/javascripts/ide/components/ide_side_bar.vue b/app/assets/javascripts/ide/components/ide_side_bar.vue index 1dc2170edde..21906674c4b 100644 --- a/app/assets/javascripts/ide/components/ide_side_bar.vue +++ b/app/assets/javascripts/ide/components/ide_side_bar.vue @@ -115,17 +115,17 @@ export default { <div class="multi-file-commit-panel-inner"> <template v-if="loading"> <div - class="multi-file-loading-container" v-for="n in 3" :key="n" + class="multi-file-loading-container" > <skeleton-loading-container /> </div> </template> <template v-else> <div - class="context-header ide-context-header dropdown" ref="mergeRequestDropdown" + class="context-header ide-context-header dropdown" > <button type="button" @@ -136,18 +136,18 @@ export default { class="avatar-container s40 project-avatar" > <project-avatar-image - class="avatar-container project-avatar" :link-href="currentProject.path" :img-src="currentProject.avatar_url" :img-alt="currentProject.name" :img-size="40" + class="avatar-container project-avatar" /> </div> <identicon v-else - size-class="s40" :entity-id="currentProject.id" :entity-name="currentProject.name" + size-class="s40" /> <div class="ide-sidebar-project-title"> <div class="sidebar-context-title"> @@ -155,11 +155,11 @@ export default { </div> <div class="d-flex"> <div + v-tooltip v-if="currentBranchId" - class="sidebar-context-title ide-sidebar-branch-title" ref="branchId" - v-tooltip :title="branchTooltipTitle" + class="sidebar-context-title ide-sidebar-branch-title" > <icon name="branch" @@ -168,10 +168,10 @@ export default { </div> <div v-if="currentMergeRequestId" - class="sidebar-context-title ide-sidebar-branch-title" :class="{ 'prepend-left-8': currentBranchId }" + class="sidebar-context-title ide-sidebar-branch-title" > <icon name="git-merge" diff --git a/app/assets/javascripts/ide/components/ide_status_bar.vue b/app/assets/javascripts/ide/components/ide_status_bar.vue index e40f137d998..0582ad32e92 100644 --- a/app/assets/javascripts/ide/components/ide_status_bar.vue +++ b/app/assets/javascripts/ide/components/ide_status_bar.vue @@ -75,22 +75,22 @@ export default { <template> <footer class="ide-status-bar"> <div - class="ide-status-branch" v-if="lastCommit && lastCommitFormatedAge" + class="ide-status-branch" > <span - class="ide-status-pipeline" v-if="latestPipeline && latestPipeline.details" + class="ide-status-pipeline" > <ci-icon - :status="latestPipeline.details.status" v-tooltip + :status="latestPipeline.details.status" :title="latestPipeline.details.status.text" /> Pipeline <a - class="monospace" - :href="latestPipeline.details.status.details_path">#{{ latestPipeline.id }}</a> + :href="latestPipeline.details.status.details_path" + class="monospace">#{{ latestPipeline.id }}</a> {{ latestPipeline.details.status.text }} for </span> @@ -100,18 +100,18 @@ export default { /> <a v-tooltip - class="commit-sha" :title="lastCommit.message" :href="getCommitPath(lastCommit.short_id)" + class="commit-sha" >{{ lastCommit.short_id }}</a> by {{ lastCommit.author_name }} <time v-tooltip - data-placement="top" - data-container="body" :datetime="lastCommit.committed_date" :title="tooltipTitle(lastCommit.committed_date)" + data-placement="top" + data-container="body" > {{ lastCommitFormatedAge }} </time> @@ -129,8 +129,8 @@ export default { {{ file.eol }} </div> <div - class="ide-status-file" - v-if="file && !file.binary"> + v-if="file && !file.binary" + class="ide-status-file"> {{ file.editorRow }}:{{ file.editorColumn }} </div> <div diff --git a/app/assets/javascripts/ide/components/ide_tree_list.vue b/app/assets/javascripts/ide/components/ide_tree_list.vue index e64a09fcc90..0df99798d21 100644 --- a/app/assets/javascripts/ide/components/ide_tree_list.vue +++ b/app/assets/javascripts/ide/components/ide_tree_list.vue @@ -50,17 +50,17 @@ export default { > <template v-if="showLoading"> <div - class="multi-file-loading-container" v-for="n in 3" :key="n" + class="multi-file-loading-container" > <skeleton-loading-container /> </div> </template> <template v-else> <header - class="ide-tree-header" :class="headerClass" + class="ide-tree-header" > <slot name="header"></slot> </header> diff --git a/app/assets/javascripts/ide/components/jobs/detail.vue b/app/assets/javascripts/ide/components/jobs/detail.vue index 6713b54efae..f39ce545656 100644 --- a/app/assets/javascripts/ide/components/jobs/detail.vue +++ b/app/assets/javascripts/ide/components/jobs/detail.vue @@ -93,10 +93,10 @@ export default { <a v-tooltip :title="__('Show complete raw log')" + :href="detailJob.rawPath" data-placement="top" data-container="body" class="controllers-buttons" - :href="detailJob.rawPath" target="_blank" > <i @@ -105,20 +105,20 @@ export default { ></i> </a> <scroll-button - direction="up" :disabled="isScrolledToTop" + direction="up" @click="scrollUp" /> <scroll-button - direction="down" :disabled="isScrolledToBottom" + direction="down" @click="scrollDown" /> </div> </div> <pre - class="build-trace mb-0 h-100" ref="buildTrace" + class="build-trace mb-0 h-100" @scroll="scrollBuildLog" > <code diff --git a/app/assets/javascripts/ide/components/jobs/detail/description.vue b/app/assets/javascripts/ide/components/jobs/detail/description.vue index def6bac3157..7e24974f7e5 100644 --- a/app/assets/javascripts/ide/components/jobs/detail/description.vue +++ b/app/assets/javascripts/ide/components/jobs/detail/description.vue @@ -24,10 +24,10 @@ export default { <template> <div class="d-flex align-items-center"> <ci-icon - class="d-flex" :status="job.status" :borderless="true" :size="24" + class="d-flex" /> <span class="prepend-left-8"> {{ job.name }} @@ -38,8 +38,8 @@ export default { > {{ jobId }} <icon - name="external-link" :size="12" + name="external-link" /> </a> </span> diff --git a/app/assets/javascripts/ide/components/jobs/detail/scroll_button.vue b/app/assets/javascripts/ide/components/jobs/detail/scroll_button.vue index 4e19e6e9c84..103a407987f 100644 --- a/app/assets/javascripts/ide/components/jobs/detail/scroll_button.vue +++ b/app/assets/javascripts/ide/components/jobs/detail/scroll_button.vue @@ -47,15 +47,15 @@ export default { <template> <div v-tooltip + :title="tooltipTitle" class="controllers-buttons" data-container="body" data-placement="top" - :title="tooltipTitle" > <button + :disabled="disabled" class="btn-scroll btn-transparent btn-blank" type="button" - :disabled="disabled" @click="clickedScroll" > <icon diff --git a/app/assets/javascripts/ide/components/jobs/item.vue b/app/assets/javascripts/ide/components/jobs/item.vue index c8e621504f0..7f4695a0451 100644 --- a/app/assets/javascripts/ide/components/jobs/item.vue +++ b/app/assets/javascripts/ide/components/jobs/item.vue @@ -27,8 +27,8 @@ export default { <template> <div class="ide-job-item"> <job-description - class="append-right-default" :job="job" + class="append-right-default" /> <div class="ml-auto align-self-center"> <button diff --git a/app/assets/javascripts/ide/components/jobs/stage.vue b/app/assets/javascripts/ide/components/jobs/stage.vue index b1428f885fb..15e881b7bc8 100644 --- a/app/assets/javascripts/ide/components/jobs/stage.vue +++ b/app/assets/javascripts/ide/components/jobs/stage.vue @@ -60,10 +60,10 @@ export default { class="ide-stage card prepend-top-default" > <div - class="card-header" :class="{ 'border-bottom-0': stage.isCollapsed }" + class="card-header" @click="toggleCollapsed" > <ci-icon @@ -72,10 +72,10 @@ export default { /> <strong v-tooltip="showTooltip" + ref="stageTitle" :title="showTooltip ? stage.name : null" data-container="body" class="prepend-left-8 ide-stage-title" - ref="stageTitle" > {{ stage.name }} </strong> @@ -93,8 +93,8 @@ export default { /> </div> <div - class="card-body" v-show="!stage.isCollapsed" + class="card-body" > <loading-icon v-if="showLoadingIcon" diff --git a/app/assets/javascripts/ide/components/merge_requests/dropdown.vue b/app/assets/javascripts/ide/components/merge_requests/dropdown.vue index 8cc8345db2e..4b9824bf04b 100644 --- a/app/assets/javascripts/ide/components/merge_requests/dropdown.vue +++ b/app/assets/javascripts/ide/components/merge_requests/dropdown.vue @@ -42,8 +42,8 @@ export default { </span> </template> <list - type="created" :empty-text="__('You have not created any merge requests')" + type="created" /> </tab> <tab> @@ -54,8 +54,8 @@ export default { </span> </template> <list - type="assigned" :empty-text="__('You do not have any assigned merge requests')" + type="assigned" /> </tab> </tabs> diff --git a/app/assets/javascripts/ide/components/merge_requests/item.vue b/app/assets/javascripts/ide/components/merge_requests/item.vue index b50fc8a3dbb..4e18376bd48 100644 --- a/app/assets/javascripts/ide/components/merge_requests/item.vue +++ b/app/assets/javascripts/ide/components/merge_requests/item.vue @@ -47,8 +47,8 @@ export default { <span class="d-flex append-right-default ide-merge-request-current-icon"> <icon v-if="isActive" - name="mobile-issue-close" :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 5896e3a147d..19d3e48ee10 100644 --- a/app/assets/javascripts/ide/components/merge_requests/list.vue +++ b/app/assets/javascripts/ide/components/merge_requests/list.vue @@ -80,12 +80,12 @@ export default { <div> <div class="dropdown-input mt-3 pb-3 mb-0 border-bottom"> <input - type="search" - class="dropdown-input-field" + ref="searchInput" :placeholder="__('Search merge requests')" v-model="search" + type="search" + class="dropdown-input-field" @input="searchMergeRequests" - ref="searchInput" /> <i aria-hidden="true" @@ -94,8 +94,8 @@ export default { </div> <div class="dropdown-content ide-merge-requests-dropdown-content d-flex"> <loading-icon - class="mt-3 mb-3 align-self-center ml-auto mr-auto" v-if="isLoading" + class="mt-3 mb-3 align-self-center ml-auto mr-auto" size="2" /> <ul diff --git a/app/assets/javascripts/ide/components/mr_file_icon.vue b/app/assets/javascripts/ide/components/mr_file_icon.vue index 179a589d1ac..821be319cce 100644 --- a/app/assets/javascripts/ide/components/mr_file_icon.vue +++ b/app/assets/javascripts/ide/components/mr_file_icon.vue @@ -14,10 +14,10 @@ export default { <template> <icon - name="git-merge" v-tooltip :title="__('Part of merge request changes')" - css-classes="append-right-8" :size="12" + name="git-merge" + css-classes="append-right-8" /> </template> diff --git a/app/assets/javascripts/ide/components/new_dropdown/index.vue b/app/assets/javascripts/ide/components/new_dropdown/index.vue index f0b29702497..1e398d7e1aa 100644 --- a/app/assets/javascripts/ide/components/new_dropdown/index.vue +++ b/app/assets/javascripts/ide/components/new_dropdown/index.vue @@ -55,10 +55,10 @@ export default { <template> <div class="ide-new-btn"> <div - class="dropdown" :class="{ show: dropdownOpen, }" + class="dropdown" > <button type="button" @@ -67,19 +67,19 @@ export default { @click.stop="openDropdown()" > <icon - name="plus" :size="12" + name="plus" css-classes="float-left" /> <icon - name="arrow-down" :size="12" + name="arrow-down" css-classes="float-left" /> </button> <ul - class="dropdown-menu dropdown-menu-right" ref="dropdownMenu" + class="dropdown-menu dropdown-menu-right" > <li> <a diff --git a/app/assets/javascripts/ide/components/new_dropdown/modal.vue b/app/assets/javascripts/ide/components/new_dropdown/modal.vue index dd2800179ff..1e9668d5154 100644 --- a/app/assets/javascripts/ide/components/new_dropdown/modal.vue +++ b/app/assets/javascripts/ide/components/new_dropdown/modal.vue @@ -71,18 +71,18 @@ export default { > <form slot="body" - @submit.prevent="createEntryInStore" class="form-group row" + @submit.prevent="createEntryInStore" > <label class="label-light col-form-label col-sm-3"> {{ __('Name') }} </label> <div class="col-sm-9"> <input + ref="fieldName" + v-model="entryName" type="text" class="form-control" - v-model="entryName" - ref="fieldName" /> </div> </form> diff --git a/app/assets/javascripts/ide/components/new_dropdown/upload.vue b/app/assets/javascripts/ide/components/new_dropdown/upload.vue index c165af5ce52..1814924be39 100644 --- a/app/assets/javascripts/ide/components/new_dropdown/upload.vue +++ b/app/assets/javascripts/ide/components/new_dropdown/upload.vue @@ -67,9 +67,9 @@ </a> <input id="file-upload" + ref="fileUpload" type="file" class="hidden" - ref="fileUpload" /> </div> </template> diff --git a/app/assets/javascripts/ide/components/panes/right.vue b/app/assets/javascripts/ide/components/panes/right.vue index dd7fc8f1e01..dedc2988618 100644 --- a/app/assets/javascripts/ide/components/panes/right.vue +++ b/app/assets/javascripts/ide/components/panes/right.vue @@ -44,10 +44,10 @@ export default { > <resizable-panel v-if="rightPane" - class="multi-file-commit-panel-inner" :collapsible="false" :initial-width="350" :min-size="350" + class="multi-file-commit-panel-inner" side="right" > <component :is="rightPane" /> @@ -57,13 +57,13 @@ export default { <li> <button v-tooltip - data-container="body" - data-placement="left" :title="__('Pipelines')" - class="ide-sidebar-link is-right" :class="{ active: pipelinesActive }" + data-container="body" + data-placement="left" + class="ide-sidebar-link is-right" type="button" @click="clickTab($event, $options.rightSidebarViews.pipelines)" > diff --git a/app/assets/javascripts/ide/components/pipelines/list.vue b/app/assets/javascripts/ide/components/pipelines/list.vue index 06455fac439..5757dfdc925 100644 --- a/app/assets/javascripts/ide/components/pipelines/list.vue +++ b/app/assets/javascripts/ide/components/pipelines/list.vue @@ -75,8 +75,8 @@ export default { > #{{ latestPipeline.id }} <icon - name="external-link" :size="12" + name="external-link" /> </a> </span> @@ -94,7 +94,7 @@ export default { <p class="append-bottom-0"> {{ __('Found errors in your .gitlab-ci.yml:') }} </p> - <p class="append-bottom-0"> + <p class="append-bottom-0 break-word"> {{ latestPipeline.yamlError }} </p> <p diff --git a/app/assets/javascripts/ide/components/repo_commit_section.vue b/app/assets/javascripts/ide/components/repo_commit_section.vue index c5092d8e04d..c2c678ff0be 100644 --- a/app/assets/javascripts/ide/components/repo_commit_section.vue +++ b/app/assets/javascripts/ide/components/repo_commit_section.vue @@ -6,7 +6,7 @@ import DeprecatedModal from '~/vue_shared/components/deprecated_modal.vue'; import CommitFilesList from './commit_sidebar/list.vue'; import EmptyState from './commit_sidebar/empty_state.vue'; import * as consts from '../stores/modules/commit/constants'; -import { activityBarViews } from '../constants'; +import { activityBarViews, stageKeys } from '../constants'; export default { components: { @@ -27,11 +27,14 @@ export default { 'unusedSeal', ]), ...mapState('commit', ['commitMessage', 'submitCommitLoading']), - ...mapGetters(['lastOpenedFile', 'hasChanges', 'someUncommitedChanges']), + ...mapGetters(['lastOpenedFile', 'hasChanges', 'someUncommitedChanges', 'activeFile']), ...mapGetters('commit', ['commitButtonDisabled', 'discardDraftButtonDisabled']), showStageUnstageArea() { return !!(this.someUncommitedChanges || this.lastCommitMsg || !this.unusedSeal); }, + activeFileKey() { + return this.activeFile ? this.activeFile.key : null; + }, }, watch: { hasChanges() { @@ -44,6 +47,7 @@ export default { if (this.lastOpenedFile) { this.openPendingTab({ file: this.lastOpenedFile, + keyPrefix: this.lastOpenedFile.changed ? stageKeys.unstaged : stageKeys.staged, }) .then(changeViewer => { if (changeViewer) { @@ -62,6 +66,7 @@ export default { return this.updateCommitAction(consts.COMMIT_TO_NEW_BRANCH).then(() => this.commitChanges()); }, }, + stageKeys, }; </script> @@ -72,8 +77,8 @@ export default { <deprecated-modal id="ide-create-branch-modal" :primary-button-label="__('Create new branch')" - kind="success" :title="__('Branch has changed')" + kind="success" @submit="forceCreateNewBranch" > <template slot="body"> @@ -85,22 +90,28 @@ export default { v-if="showStageUnstageArea" > <commit-files-list - class="is-first" - icon-name="unstaged" :title="__('Unstaged')" + :key-prefix="$options.stageKeys.unstaged" :file-list="changedFiles" + :action-btn-text="__('Stage all changes')" + :active-file-key="activeFileKey" action="stageAllChanges" - :action-btn-text="__('Stage all')" + action-btn-icon="mobile-issue-close" item-action-component="stage-button" + class="is-first" + icon-name="unstaged" /> <commit-files-list - icon-name="staged" :title="__('Staged')" + :key-prefix="$options.stageKeys.staged" :file-list="stagedFiles" + :action-btn-text="__('Unstage all changes')" + :staged-list="true" + :active-file-key="activeFileKey" action="unstageAllChanges" - :action-btn-text="__('Unstage all')" + action-btn-icon="history" item-action-component="unstage-button" - :staged-list="true" + icon-name="staged" /> </template> <empty-state diff --git a/app/assets/javascripts/ide/components/repo_editor.vue b/app/assets/javascripts/ide/components/repo_editor.vue index d365745d78b..08ee12fd98f 100644 --- a/app/assets/javascripts/ide/components/repo_editor.vue +++ b/app/assets/javascripts/ide/components/repo_editor.vue @@ -2,6 +2,7 @@ import { mapState, mapGetters, mapActions } from 'vuex'; import flash from '~/flash'; import ContentViewer from '~/vue_shared/components/content_viewer/content_viewer.vue'; +import DiffViewer from '~/vue_shared/components/diff_viewer/diff_viewer.vue'; import { activityBarViews, viewerTypes } from '../constants'; import Editor from '../lib/editor'; import ExternalLink from './external_link.vue'; @@ -9,6 +10,7 @@ import ExternalLink from './external_link.vue'; export default { components: { ContentViewer, + DiffViewer, ExternalLink, }, props: { @@ -18,7 +20,13 @@ export default { }, }, computed: { - ...mapState(['rightPanelCollapsed', 'viewer', 'panelResizing', 'currentActivityView']), + ...mapState([ + 'rightPanelCollapsed', + 'viewer', + 'panelResizing', + 'currentActivityView', + 'rightPane', + ]), ...mapGetters([ 'currentMergeRequest', 'getStagedFile', @@ -29,9 +37,18 @@ export default { shouldHideEditor() { return this.file && this.file.binary && !this.file.content; }, + showContentViewer() { + return ( + (this.shouldHideEditor || this.file.viewMode === 'preview') && + (this.viewer !== viewerTypes.mr || !this.file.mrChange) + ); + }, + showDiffViewer() { + return this.shouldHideEditor && this.file.mrChange && this.viewer === viewerTypes.mr; + }, editTabCSS() { return { - active: this.file.viewMode === 'edit', + active: this.file.viewMode === 'editor', }; }, previewTabCSS() { @@ -53,7 +70,7 @@ export default { if (this.currentActivityView !== activityBarViews.edit) { this.setFileViewMode({ file: this.file, - viewMode: 'edit', + viewMode: 'editor', }); } } @@ -62,7 +79,7 @@ export default { if (this.currentActivityView !== activityBarViews.edit) { this.setFileViewMode({ file: this.file, - viewMode: 'edit', + viewMode: 'editor', }); } }, @@ -77,6 +94,9 @@ export default { this.editor.updateDimensions(); } }, + rightPane() { + this.editor.updateDimensions(); + }, }, beforeDestroy() { this.editor.dispose(); @@ -190,14 +210,14 @@ export default { > <div class="ide-mode-tabs clearfix" > <ul - class="nav-links float-left" v-if="!shouldHideEditor && isEditModeActive" + class="nav-links float-left" > <li :class="editTabCSS"> <a href="javascript:void(0);" role="button" - @click.prevent="setFileViewMode({ file, viewMode: 'edit' })"> + @click.prevent="setFileViewMode({ file, viewMode: 'editor' })"> <template v-if="viewer === $options.viewerTypes.edit"> {{ __('Edit') }} </template> @@ -222,19 +242,27 @@ export default { /> </div> <div - v-show="!shouldHideEditor && file.viewMode === 'edit'" + v-show="!shouldHideEditor && file.viewMode ==='editor'" ref="editor" - class="multi-file-editor-holder" :class="{ 'is-readonly': isCommitModeActive, }" + class="multi-file-editor-holder" > </div> <content-viewer - v-if="shouldHideEditor || file.viewMode === 'preview'" + v-if="showContentViewer" :content="file.content || file.raw" :path="file.rawPath || file.path" :file-size="file.size" :project-path="file.projectId"/> + <diff-viewer + v-if="showDiffViewer" + :diff-mode="file.mrChange.diffMode" + :new-path="file.mrChange.new_path" + :new-sha="currentMergeRequest.sha" + :old-path="file.mrChange.old_path" + :old-sha="currentMergeRequest.baseCommitSha" + :project-path="file.projectId"/> </div> </template> diff --git a/app/assets/javascripts/ide/components/repo_file.vue b/app/assets/javascripts/ide/components/repo_file.vue index f56aeced806..c34547fcc60 100644 --- a/app/assets/javascripts/ide/components/repo_file.vue +++ b/app/assets/javascripts/ide/components/repo_file.vue @@ -120,17 +120,17 @@ export default { <template> <div> <div - class="file" :class="fileClass" - @click="clickFile" + class="file" role="button" + @click="clickFile" > <div class="file-name" > <span - class="ide-file-name str-truncated" :style="levelIndentation" + class="ide-file-name str-truncated" > <file-icon :file-name="file.name" @@ -156,10 +156,10 @@ export default { <icon v-tooltip :title="folderChangesTooltip" + :size="12" data-container="body" data-placement="right" name="file-modified" - :size="12" css-classes="prepend-left-5 multi-file-modified" /> </span> diff --git a/app/assets/javascripts/ide/components/repo_file_status_icon.vue b/app/assets/javascripts/ide/components/repo_file_status_icon.vue index 97589e116c5..76a3333be50 100644 --- a/app/assets/javascripts/ide/components/repo_file_status_icon.vue +++ b/app/assets/javascripts/ide/components/repo_file_status_icon.vue @@ -26,8 +26,8 @@ export default { <template> <span - v-if="file.file_lock" v-tooltip + v-if="file.file_lock" :title="lockTooltip" data-container="body" > diff --git a/app/assets/javascripts/ide/components/repo_loading_file.vue b/app/assets/javascripts/ide/components/repo_loading_file.vue index 3e47da88050..7a5ede82253 100644 --- a/app/assets/javascripts/ide/components/repo_loading_file.vue +++ b/app/assets/javascripts/ide/components/repo_loading_file.vue @@ -33,8 +33,8 @@ <td class="d-none d-sm-block"> <skeleton-loading-container - class="animation-container-right" :small="true" + class="animation-container-right" /> </td> </template> diff --git a/app/assets/javascripts/ide/components/repo_tab.vue b/app/assets/javascripts/ide/components/repo_tab.vue index fb26b973236..03772ae4a4c 100644 --- a/app/assets/javascripts/ide/components/repo_tab.vue +++ b/app/assets/javascripts/ide/components/repo_tab.vue @@ -44,6 +44,8 @@ export default { methods: { ...mapActions(['closeFile', 'updateDelayViewerUpdated', 'openPendingTab']), clickFile(tab) { + if (tab.active) return; + this.updateDelayViewerUpdated(true); if (tab.pending) { @@ -76,8 +78,8 @@ export default { @mouseout="mouseOutTab" > <div - class="multi-file-tab" :title="tab.url" + class="multi-file-tab" > <file-icon :file-name="tab.name" @@ -89,16 +91,16 @@ export default { /> </div> <button + :aria-label="closeLabel" + :disabled="tab.pending" type="button" class="multi-file-tab-close" @click.stop.prevent="closeFile(tab)" - :aria-label="closeLabel" - :disabled="tab.pending" > <icon v-if="!showChangedIcon" - name="close" :size="12" + name="close" /> <changed-file-icon v-else diff --git a/app/assets/javascripts/ide/components/repo_tabs.vue b/app/assets/javascripts/ide/components/repo_tabs.vue index 99e51097e12..c12a63e26be 100644 --- a/app/assets/javascripts/ide/components/repo_tabs.vue +++ b/app/assets/javascripts/ide/components/repo_tabs.vue @@ -52,8 +52,8 @@ export default { <template> <div class="multi-file-tabs"> <ul - class="list-unstyled append-bottom-0" ref="tabsScroller" + class="list-unstyled append-bottom-0" > <repo-tab v-for="tab in files" diff --git a/app/assets/javascripts/ide/components/resizable_panel.vue b/app/assets/javascripts/ide/components/resizable_panel.vue index 5ea2a2f6825..7277fcb7617 100644 --- a/app/assets/javascripts/ide/components/resizable_panel.vue +++ b/app/assets/javascripts/ide/components/resizable_panel.vue @@ -63,11 +63,11 @@ export default { <template> <div - class="multi-file-commit-panel" :class="{ 'is-collapsed': collapsed && collapsible, }" :style="panelStyle" + class="multi-file-commit-panel" @click="toggleFullbarCollapsed" > <slot></slot> @@ -77,9 +77,9 @@ export default { :start-size="initialWidth" :min-size="minSize" :max-size="$options.maxSize" + :side="side === 'right' ? 'left' : 'right'" @resize-start="setResizingStatus(true)" @resize-end="setResizingStatus(false)" - :side="side === 'right' ? 'left' : 'right'" /> </div> </template> |