diff options
Diffstat (limited to 'app/assets/javascripts/ide/components')
5 files changed, 69 insertions, 169 deletions
diff --git a/app/assets/javascripts/ide/components/activity_bar.vue b/app/assets/javascripts/ide/components/activity_bar.vue index 62697e0ecc3..2cebacc1c4c 100644 --- a/app/assets/javascripts/ide/components/activity_bar.vue +++ b/app/assets/javascripts/ide/components/activity_bar.vue @@ -13,11 +13,8 @@ export default { tooltip, }, computed: { - ...mapGetters(['currentProject', 'hasChanges']), + ...mapGetters(['hasChanges']), ...mapState(['currentActivityView']), - goBackUrl() { - return document.referrer || this.currentProject.web_url; - }, }, methods: { ...mapActions(['updateActivityBarView']), @@ -36,22 +33,6 @@ export default { <template> <nav class="ide-activity-bar"> <ul class="list-unstyled"> - <li v-once> - <a - v-tooltip - :href="goBackUrl" - :title="s__('IDE|Go back')" - :aria-label="s__('IDE|Go back')" - data-container="body" - data-placement="right" - class="ide-sidebar-link" - > - <icon - :size="16" - name="go-back" - /> - </a> - </li> <li> <button v-tooltip diff --git a/app/assets/javascripts/ide/components/ide_project_header.vue b/app/assets/javascripts/ide/components/ide_project_header.vue new file mode 100644 index 00000000000..6cf190288e8 --- /dev/null +++ b/app/assets/javascripts/ide/components/ide_project_header.vue @@ -0,0 +1,37 @@ +<script> +import ProjectAvatarDefault from '~/vue_shared/components/project_avatar/default.vue'; + +export default { + components: { + ProjectAvatarDefault, + }, + props: { + project: { + type: Object, + required: true, + }, + }, +}; +</script> + +<template> + <div class="context-header ide-context-header"> + <a + :href="project.web_url" + :title="s__('IDE|Go to project')" + > + <project-avatar-default + :project="project" + :size="48" + /> + <span class="ide-sidebar-project-title"> + <span class="sidebar-context-title"> + {{ project.name }} + </span> + <span class="sidebar-context-title text-secondary"> + {{ project.path_with_namespace }} + </span> + </span> + </a> + </div> +</template> diff --git a/app/assets/javascripts/ide/components/ide_side_bar.vue b/app/assets/javascripts/ide/components/ide_side_bar.vue index 21906674c4b..4771c58a11d 100644 --- a/app/assets/javascripts/ide/components/ide_side_bar.vue +++ b/app/assets/javascripts/ide/components/ide_side_bar.vue @@ -1,12 +1,6 @@ <script> -import $ from 'jquery'; import { mapState, mapGetters } from 'vuex'; -import ProjectAvatarImage from '~/vue_shared/components/project_avatar/image.vue'; -import Icon from '~/vue_shared/components/icon.vue'; -import tooltip from '~/vue_shared/directives/tooltip'; -import PanelResizer from '~/vue_shared/components/panel_resizer.vue'; import SkeletonLoadingContainer from '~/vue_shared/components/skeleton_loading_container.vue'; -import Identicon from '../../vue_shared/components/identicon.vue'; import IdeTree from './ide_tree.vue'; import ResizablePanel from './resizable_panel.vue'; import ActivityBar from './activity_bar.vue'; @@ -14,43 +8,28 @@ import CommitSection from './repo_commit_section.vue'; import CommitForm from './commit_sidebar/form.vue'; import IdeReview from './ide_review.vue'; import SuccessMessage from './commit_sidebar/success_message.vue'; -import MergeRequestDropdown from './merge_requests/dropdown.vue'; +import IdeProjectHeader from './ide_project_header.vue'; import { activityBarViews } from '../constants'; export default { - directives: { - tooltip, - }, components: { - Icon, - PanelResizer, SkeletonLoadingContainer, ResizablePanel, ActivityBar, - ProjectAvatarImage, - Identicon, CommitSection, IdeTree, CommitForm, IdeReview, SuccessMessage, - MergeRequestDropdown, - }, - data() { - return { - showTooltip: false, - showMergeRequestsDropdown: false, - }; + IdeProjectHeader, }, computed: { ...mapState([ 'loading', - 'currentBranchId', 'currentActivityView', 'changedFiles', 'stagedFiles', 'lastCommitMsg', - 'currentMergeRequestId', ]), ...mapGetters(['currentProject', 'someUncommitedChanges']), showSuccessMessage() { @@ -59,46 +38,6 @@ export default { (this.lastCommitMsg && !this.someUncommitedChanges) ); }, - branchTooltipTitle() { - return this.showTooltip ? this.currentBranchId : undefined; - }, - }, - watch: { - currentBranchId() { - this.$nextTick(() => { - if (!this.$refs.branchId) return; - - this.showTooltip = this.$refs.branchId.scrollWidth > this.$refs.branchId.offsetWidth; - }); - }, - loading() { - this.$nextTick(() => { - this.addDropdownListeners(); - }); - }, - }, - mounted() { - this.addDropdownListeners(); - }, - beforeDestroy() { - $(this.$refs.mergeRequestDropdown) - .off('show.bs.dropdown') - .off('hide.bs.dropdown'); - }, - methods: { - addDropdownListeners() { - if (!this.$refs.mergeRequestDropdown) return; - - $(this.$refs.mergeRequestDropdown) - .on('show.bs.dropdown', () => { - this.toggleMergeRequestDropdown(); - }).on('hide.bs.dropdown', () => { - this.toggleMergeRequestDropdown(); - }); - }, - toggleMergeRequestDropdown() { - this.showMergeRequestsDropdown = !this.showMergeRequestsDropdown; - }, }, }; </script> @@ -108,12 +47,10 @@ export default { :collapsible="false" :initial-width="340" side="left" + class="flex-column" > - <activity-bar - v-if="!loading" - /> - <div class="multi-file-commit-panel-inner"> - <template v-if="loading"> + <template v-if="loading"> + <div class="multi-file-commit-panel-inner"> <div v-for="n in 3" :key="n" @@ -121,81 +58,23 @@ export default { > <skeleton-loading-container /> </div> - </template> - <template v-else> - <div - ref="mergeRequestDropdown" - class="context-header ide-context-header dropdown" - > - <button - type="button" - data-toggle="dropdown" - > - <div - v-if="currentProject.avatar_url" - class="avatar-container s40 project-avatar" - > - <project-avatar-image - :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 - :entity-id="currentProject.id" - :entity-name="currentProject.name" - size-class="s40" + </div> + </template> + <template v-else> + <ide-project-header + :project="currentProject" + /> + <div class="ide-context-body d-flex flex-fill"> + <activity-bar /> + <div class="multi-file-commit-panel-inner"> + <div class="multi-file-commit-panel-inner-content"> + <component + :is="currentActivityView" /> - <div class="ide-sidebar-project-title"> - <div class="sidebar-context-title"> - {{ currentProject.name }} - </div> - <div class="d-flex"> - <div - v-tooltip - v-if="currentBranchId" - ref="branchId" - :title="branchTooltipTitle" - class="sidebar-context-title ide-sidebar-branch-title" - > - <icon - name="branch" - css-classes="append-right-5" - />{{ currentBranchId }} - </div> - <div - v-if="currentMergeRequestId" - :class="{ - 'prepend-left-8': currentBranchId - }" - class="sidebar-context-title ide-sidebar-branch-title" - > - <icon - name="git-merge" - css-classes="append-right-5" - />!{{ currentMergeRequestId }} - </div> - </div> - </div> - <icon - class="ml-auto" - name="chevron-down" - /> - </button> - <merge-request-dropdown - :show="showMergeRequestsDropdown" - /> - </div> - <div class="multi-file-commit-panel-inner-scroll"> - <component - :is="currentActivityView" - /> + </div> + <commit-form /> </div> - <commit-form /> - </template> - </div> + </div> + </template> </resizable-panel> </template> diff --git a/app/assets/javascripts/ide/components/ide_tree.vue b/app/assets/javascripts/ide/components/ide_tree.vue index e996dd9059e..33f1179a234 100644 --- a/app/assets/javascripts/ide/components/ide_tree.vue +++ b/app/assets/javascripts/ide/components/ide_tree.vue @@ -35,7 +35,6 @@ export default { <template> <ide-tree-list - header-class="d-flex w-100" viewer-type="editor" > <template diff --git a/app/assets/javascripts/ide/components/ide_tree_list.vue b/app/assets/javascripts/ide/components/ide_tree_list.vue index 2e7226b727c..e303ff6ea8f 100644 --- a/app/assets/javascripts/ide/components/ide_tree_list.vue +++ b/app/assets/javascripts/ide/components/ide_tree_list.vue @@ -59,12 +59,16 @@ export default { > <slot name="header"></slot> </header> - <repo-file - v-for="file in currentTree.tree" - :key="file.key" - :file="file" - :level="0" - /> + <div + class="ide-tree-body" + > + <repo-file + v-for="file in currentTree.tree" + :key="file.key" + :file="file" + :level="0" + /> + </div> </template> </div> </template> |