diff options
author | Phil Hughes <me@iamphill.com> | 2018-04-20 10:34:57 +0100 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2018-04-23 08:55:59 +0100 |
commit | 93f8ad8dd856b98b2bfe6afb9b4d6641e1b764ea (patch) | |
tree | 6c0b2fb782c98101813e435994cacd182062927d | |
parent | fc11520e51ba6a7fb3cb07b4300bf303b725881c (diff) | |
download | gitlab-ce-93f8ad8dd856b98b2bfe6afb9b4d6641e1b764ea.tar.gz |
created HOC for the tree list to cover both edit & review mode
-rw-r--r-- | app/assets/javascripts/ide/components/ide_review.vue | 64 | ||||
-rw-r--r-- | app/assets/javascripts/ide/components/ide_tree.vue | 55 | ||||
-rw-r--r-- | app/assets/javascripts/ide/components/ide_tree_list.vue | 73 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/repo.scss | 9 |
4 files changed, 110 insertions, 91 deletions
diff --git a/app/assets/javascripts/ide/components/ide_review.vue b/app/assets/javascripts/ide/components/ide_review.vue index 4eb59cc3ca1..1b1a5b91dd6 100644 --- a/app/assets/javascripts/ide/components/ide_review.vue +++ b/app/assets/javascripts/ide/components/ide_review.vue @@ -1,64 +1,26 @@ <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'; +import IdeTreeList from './ide_tree_list.vue'; export default { components: { - Icon, - RepoFile, - SkeletonLoadingContainer, - NewDropdown, - }, - computed: { - ...mapState(['currentBranchId']), - ...mapGetters(['currentProject', 'currentTree']), - }, - mounted() { - this.updateViewer('diff'); - }, - methods: { - ...mapActions(['updateViewer']), + IdeTreeList, }, }; </script> <template> - <div - class="ide-file-list" + <ide-tree-list + viewer-type="diff" + header-class="ide-review-header" + :disable-action-dropdown="true" > - <template v-if="!currentTree || currentTree.loading"> - <div - class="multi-file-loading-container" - v-for="n in 3" - :key="n" - > - <skeleton-loading-container /> + <template + slot="header" + > + {{ __('Review') }} + <div class="prepend-top-5 ide-review-sub-header"> + {{ __('Lastest changed') }} </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> + </ide-tree-list> </template> - -<style> -.ide-review-header { - flex-direction: column; - align-items: flex-start; -} -</style> diff --git a/app/assets/javascripts/ide/components/ide_tree.vue b/app/assets/javascripts/ide/components/ide_tree.vue index 4f33bc81838..7dbedaf2cb2 100644 --- a/app/assets/javascripts/ide/components/ide_tree.vue +++ b/app/assets/javascripts/ide/components/ide_tree.vue @@ -1,58 +1,33 @@ <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 { mapState, mapGetters } from 'vuex'; import NewDropdown from './new_dropdown/index.vue'; +import IdeTreeList from './ide_tree_list.vue'; export default { components: { - Icon, - RepoFile, - SkeletonLoadingContainer, NewDropdown, + IdeTreeList, }, computed: { ...mapState(['currentBranchId']), - ...mapGetters(['currentProject', 'currentTree']), - }, - mounted() { - this.updateViewer('editor'); - }, - methods: { - ...mapActions(['updateViewer']), + ...mapGetters(['currentProject']), }, }; </script> <template> - <div - class="ide-file-list" + <ide-tree-list + viewer-type="editor" > - <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"> - {{ __('Edit') }} - <new-dropdown - :project-id="currentProject.name_with_namespace" - :branch="currentBranchId" - path="" - /> - </header> - <repo-file - v-for="file in currentTree.tree" - :key="file.key" - :file="file" - :level="0" + <template + slot="header" + > + {{ __('Edit') }} + <new-dropdown + :project-id="currentProject.name_with_namespace" + :branch="currentBranchId" + path="" /> </template> - </div> + </ide-tree-list> </template> diff --git a/app/assets/javascripts/ide/components/ide_tree_list.vue b/app/assets/javascripts/ide/components/ide_tree_list.vue new file mode 100644 index 00000000000..56baba05b74 --- /dev/null +++ b/app/assets/javascripts/ide/components/ide_tree_list.vue @@ -0,0 +1,73 @@ +<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, + }, + props: { + viewerType: { + type: String, + required: true, + }, + headerClass: { + type: String, + required: false, + default: null, + }, + disableActionDropdown: { + type: Boolean, + required: false, + default: false, + }, + }, + computed: { + ...mapState(['currentBranchId']), + ...mapGetters(['currentProject', 'currentTree']), + }, + mounted() { + this.updateViewer(this.viewerType); + }, + 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" + :class="headerClass" + > + <slot name="header"></slot> + </header> + <repo-file + v-for="file in currentTree.tree" + :key="file.key" + :file="file" + :level="0" + :disable-action-dropdown="disableActionDropdown" + /> + </template> + </div> +</template> diff --git a/app/assets/stylesheets/pages/repo.scss b/app/assets/stylesheets/pages/repo.scss index 80c6a9dd3f2..d303b6660c6 100644 --- a/app/assets/stylesheets/pages/repo.scss +++ b/app/assets/stylesheets/pages/repo.scss @@ -902,3 +902,12 @@ margin-top: -1px; } } + +.ide-review-header { + flex-direction: column; + align-items: flex-start; +} + +.ide-review-sub-header { + color: $gl-text-color-secondary; +} |