diff options
author | Phil Hughes <me@iamphill.com> | 2018-04-20 11:09:19 +0300 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2018-04-23 10:55:59 +0300 |
commit | 4924e4edb22ece1b5e246fca9f4ae686e6e0e8d3 (patch) | |
tree | 73817bf2826f9b3e4fa4b1e3d2abd87f1794fc3c /app/assets | |
parent | 34d5d1fa80770db015253a9d39393979fc838376 (diff) |
Added review mode to new IDE sidebar
#44846
Diffstat (limited to 'app/assets')
-rw-r--r-- | app/assets/javascripts/ide/components/activity_bar.vue | 14 | ||||
-rw-r--r-- | app/assets/javascripts/ide/components/ide_review.vue | 64 | ||||
-rw-r--r-- | app/assets/javascripts/ide/components/ide_side_bar.vue | 2 | ||||
-rw-r--r-- | app/assets/javascripts/ide/components/ide_tree.vue | 8 | ||||
-rw-r--r-- | app/assets/javascripts/ide/components/repo_editor.vue | 11 | ||||
-rw-r--r-- | app/assets/javascripts/ide/components/repo_file.vue | 13 | ||||
-rw-r--r-- | app/assets/javascripts/ide/components/repo_tabs.vue | 17 | ||||
-rw-r--r-- | app/assets/javascripts/ide/constants.js | 1 | ||||
-rw-r--r-- | app/assets/javascripts/ide/lib/editor.js | 3 | ||||
-rw-r--r-- | app/assets/javascripts/ide/stores/actions/file.js | 1 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/repo.scss | 20 |
11 files changed, 98 insertions, 56 deletions
diff --git a/app/assets/javascripts/ide/components/activity_bar.vue b/app/assets/javascripts/ide/components/activity_bar.vue index c625976621f..0465de54977 100644 --- a/app/assets/javascripts/ide/components/activity_bar.vue +++ b/app/assets/javascripts/ide/components/activity_bar.vue @@ -53,6 +53,20 @@ export default { <li> <button type="button" + class="ide-sidebar-link js-ide-review-mode" + :class="{ + active: currentActivityView === $options.ActivityBarViews.review + }" + @click.prevent="updateActivityBarView($options.ActivityBarViews.review)" + > + <icon + name="file-modified" + /> + </button> + </li> + <li> + <button + type="button" class="ide-sidebar-link js-ide-commit-mode" :class="{ active: currentActivityView === $options.ActivityBarViews.commit diff --git a/app/assets/javascripts/ide/components/ide_review.vue b/app/assets/javascripts/ide/components/ide_review.vue new file mode 100644 index 00000000000..4eb59cc3ca1 --- /dev/null +++ b/app/assets/javascripts/ide/components/ide_review.vue @@ -0,0 +1,64 @@ +<script> +import { mapActions, mapGetters, mapState } from 'vuex'; +import Icon from '~/vue_shared/components/icon.vue'; +import SkeletonLoadingContainer from '~/vue_shared/components/skeleton_loading_container.vue'; +import RepoFile from './repo_file.vue'; +import NewDropdown from './new_dropdown/index.vue'; + +export default { + components: { + Icon, + RepoFile, + SkeletonLoadingContainer, + NewDropdown, + }, + computed: { + ...mapState(['currentBranchId']), + ...mapGetters(['currentProject', 'currentTree']), + }, + mounted() { + this.updateViewer('diff'); + }, + methods: { + ...mapActions(['updateViewer']), + }, +}; +</script> + +<template> + <div + class="ide-file-list" + > + <template v-if="!currentTree || currentTree.loading"> + <div + class="multi-file-loading-container" + v-for="n in 3" + :key="n" + > + <skeleton-loading-container /> + </div> + </template> + <template v-else> + <header class="ide-tree-header ide-review-header"> + {{ __('Review') }} + <div class="prepend-top-5 clgray"> + {{ __('Lastest changed') }} + </div> + </header> + <repo-file + v-for="file in currentTree.tree" + :key="file.key" + :file="file" + :level="0" + :disable-action-dropdown="true" + /> + </template> + </div> +</template> + +<style> +.ide-review-header { + flex-direction: column; + align-items: flex-start; +} +</style> diff --git a/app/assets/javascripts/ide/components/ide_side_bar.vue b/app/assets/javascripts/ide/components/ide_side_bar.vue index 191210fd828..3fb9b8b241d 100644 --- a/app/assets/javascripts/ide/components/ide_side_bar.vue +++ b/app/assets/javascripts/ide/components/ide_side_bar.vue @@ -9,6 +9,7 @@ import IdeTree from './ide_tree.vue'; import ResizablePanel from './resizable_panel.vue'; import ActivityBar from './activity_bar.vue'; import CommitSection from './repo_commit_section.vue'; +import IdeReview from './ide_review.vue'; export default { components: { @@ -21,6 +22,7 @@ export default { Identicon, CommitSection, IdeTree, + IdeReview, }, computed: { ...mapState(['loading', 'currentBranchId', 'currentActivityView']), diff --git a/app/assets/javascripts/ide/components/ide_tree.vue b/app/assets/javascripts/ide/components/ide_tree.vue index ed83bf4109b..4f33bc81838 100644 --- a/app/assets/javascripts/ide/components/ide_tree.vue +++ b/app/assets/javascripts/ide/components/ide_tree.vue @@ -1,5 +1,5 @@ <script> -import { mapGetters, mapState } from 'vuex'; +import { mapActions, mapGetters, mapState } from 'vuex'; import Icon from '~/vue_shared/components/icon.vue'; import SkeletonLoadingContainer from '~/vue_shared/components/skeleton_loading_container.vue'; import RepoFile from './repo_file.vue'; @@ -16,6 +16,12 @@ export default { ...mapState(['currentBranchId']), ...mapGetters(['currentProject', 'currentTree']), }, + mounted() { + this.updateViewer('editor'); + }, + methods: { + ...mapActions(['updateViewer']), + }, }; </script> diff --git a/app/assets/javascripts/ide/components/repo_editor.vue b/app/assets/javascripts/ide/components/repo_editor.vue index 3a04cdd8e46..6b7e0aa001f 100644 --- a/app/assets/javascripts/ide/components/repo_editor.vue +++ b/app/assets/javascripts/ide/components/repo_editor.vue @@ -19,7 +19,7 @@ export default { }, }, computed: { - ...mapState(['rightPanelCollapsed', 'viewer', 'delayViewerUpdated', 'panelResizing']), + ...mapState(['rightPanelCollapsed', 'viewer', 'panelResizing']), ...mapGetters(['currentMergeRequest', 'getStagedFile']), shouldHideEditor() { return this.file && this.file.binary && !this.file.content; @@ -77,7 +77,6 @@ export default { 'setFileViewMode', 'setFileEOL', 'updateViewer', - 'updateDelayViewerUpdated', ]), initMonaco() { if (this.shouldHideEditor) return; @@ -89,14 +88,6 @@ export default { baseSha: this.currentMergeRequest ? this.currentMergeRequest.baseCommitSha : '', }) .then(() => { - const viewerPromise = this.delayViewerUpdated - ? this.updateViewer(this.file.pending ? 'diff' : 'editor') - : Promise.resolve(); - - return viewerPromise; - }) - .then(() => { - this.updateDelayViewerUpdated(false); this.createEditorInstance(); }) .catch(err => { diff --git a/app/assets/javascripts/ide/components/repo_file.vue b/app/assets/javascripts/ide/components/repo_file.vue index 8b18c7d28b4..1a7ed991bf0 100644 --- a/app/assets/javascripts/ide/components/repo_file.vue +++ b/app/assets/javascripts/ide/components/repo_file.vue @@ -27,6 +27,11 @@ export default { type: Number, required: true, }, + disableActionDropdown: { + type: Boolean, + required: false, + default: false, + }, }, computed: { isTree() { @@ -55,16 +60,14 @@ export default { } }, methods: { - ...mapActions(['toggleTreeOpen', 'updateDelayViewerUpdated']), + ...mapActions(['toggleTreeOpen']), clickFile() { // Manual Action if a tree is selected/opened if (this.isTree && this.$router.currentRoute.path === `/project${this.file.url}`) { this.toggleTreeOpen(this.file.path); } - return this.updateDelayViewerUpdated(true).then(() => { - router.push(`/project${this.file.url}`); - }); + router.push(`/project${this.file.url}`); }, }, }; @@ -110,7 +113,7 @@ export default { /> </span> <new-dropdown - v-if="isTree" + v-if="isTree && !disableActionDropdown" :project-id="file.projectId" :branch="file.branchId" :path="file.path" diff --git a/app/assets/javascripts/ide/components/repo_tabs.vue b/app/assets/javascripts/ide/components/repo_tabs.vue index 7bd646ba9b0..99e51097e12 100644 --- a/app/assets/javascripts/ide/components/repo_tabs.vue +++ b/app/assets/javascripts/ide/components/repo_tabs.vue @@ -32,16 +32,6 @@ export default { default: '', }, }, - data() { - return { - showShadow: false, - }; - }, - updated() { - if (!this.$refs.tabsScroller) return; - - this.showShadow = this.$refs.tabsScroller.scrollWidth > this.$refs.tabsScroller.offsetWidth; - }, methods: { ...mapActions(['updateViewer', 'removePendingTab']), openFileViewer(viewer) { @@ -71,12 +61,5 @@ export default { :tab="tab" /> </ul> - <editor-mode - :viewer="viewer" - :show-shadow="showShadow" - :has-changes="hasChanges" - :merge-request-id="mergeRequestId" - @click="openFileViewer" - /> </div> </template> diff --git a/app/assets/javascripts/ide/constants.js b/app/assets/javascripts/ide/constants.js index 3aa32a49a20..565f026c56c 100644 --- a/app/assets/javascripts/ide/constants.js +++ b/app/assets/javascripts/ide/constants.js @@ -5,4 +5,5 @@ export const MAX_BODY_LENGTH = 72; export const ActivityBarViews = { edit: 'ide-tree', commit: 'commit-section', + review: 'ide-review', }; diff --git a/app/assets/javascripts/ide/lib/editor.js b/app/assets/javascripts/ide/lib/editor.js index 2d3ee7d4f48..af506f1d0ea 100644 --- a/app/assets/javascripts/ide/lib/editor.js +++ b/app/assets/javascripts/ide/lib/editor.js @@ -64,11 +64,8 @@ export default class Editor { this.disposable.add( (this.instance = this.monaco.editor.createDiffEditor(domElement, { ...defaultEditorOptions, - readOnly: true, quickSuggestions: false, occurrencesHighlight: false, - renderLineHighlight: 'none', - hideCursorInOverviewRuler: true, renderSideBySide: Editor.renderSideBySide(domElement), })), ); diff --git a/app/assets/javascripts/ide/stores/actions/file.js b/app/assets/javascripts/ide/stores/actions/file.js index d782e0a84d2..798edebd545 100644 --- a/app/assets/javascripts/ide/stores/actions/file.js +++ b/app/assets/javascripts/ide/stores/actions/file.js @@ -29,7 +29,6 @@ export const closeFile = ({ commit, state, dispatch }, file) => { keyPrefix: nextFileToOpen.staged ? 'staged' : 'unstaged', }); } else { - dispatch('updateDelayViewerUpdated', true); router.push(`/project${nextFileToOpen.url}`); } } else if (!state.openFiles.length) { diff --git a/app/assets/stylesheets/pages/repo.scss b/app/assets/stylesheets/pages/repo.scss index f050b105f99..80c6a9dd3f2 100644 --- a/app/assets/stylesheets/pages/repo.scss +++ b/app/assets/stylesheets/pages/repo.scss @@ -153,24 +153,6 @@ border-bottom-color: $white-light; } } - - .dropdown { - display: flex; - margin-left: auto; - margin-bottom: 1px; - padding: 0 $grid-size; - border-left: 1px solid $white-dark; - background-color: $white-light; - - &.shadow { - box-shadow: 0 0 10px $dropdown-shadow-color; - } - - .btn { - margin-top: auto; - margin-bottom: auto; - } - } } .multi-file-tab { @@ -298,7 +280,7 @@ opacity: 0.4; } - .cursors-layer { + .editor.original .cursors-layer { display: none; } } |