diff options
author | Phil Hughes <me@iamphill.com> | 2018-05-22 14:32:37 +0300 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2018-05-24 12:38:01 +0300 |
commit | 32f965b244f38b8f94aff0d0f7bb952de7593127 (patch) | |
tree | 2259d8212abb7dd48bf1a3af4be911a44b002ea2 /app | |
parent | e97a87433b2f55b2f688771cbe47d627f49d4b44 (diff) |
Added right sidebar components
Diffstat (limited to 'app')
3 files changed, 113 insertions, 0 deletions
diff --git a/app/assets/javascripts/ide/components/ide.vue b/app/assets/javascripts/ide/components/ide.vue index 1ec69adce09..d61ed36a757 100644 --- a/app/assets/javascripts/ide/components/ide.vue +++ b/app/assets/javascripts/ide/components/ide.vue @@ -6,6 +6,7 @@ import RepoTabs from './repo_tabs.vue'; import IdeStatusBar from './ide_status_bar.vue'; import RepoEditor from './repo_editor.vue'; import FindFile from './file_finder/index.vue'; +import RightSidebar from './right_sidebar/index.vue'; const originalStopCallback = Mousetrap.stopCallback; @@ -16,6 +17,7 @@ export default { IdeStatusBar, RepoEditor, FindFile, + RightSidebar, }, computed: { ...mapState([ @@ -25,6 +27,7 @@ export default { 'currentMergeRequestId', 'fileFindVisible', 'emptyStateSvgPath', + 'currentProjectId', ]), ...mapGetters(['activeFile', 'hasChanges']), }, @@ -122,6 +125,9 @@ export default { </div> </template> </div> + <right-sidebar + v-if="currentProjectId" + /> </div> <ide-status-bar :file="activeFile" diff --git a/app/assets/javascripts/ide/components/right_sidebar/index.vue b/app/assets/javascripts/ide/components/right_sidebar/index.vue new file mode 100644 index 00000000000..2417e3976aa --- /dev/null +++ b/app/assets/javascripts/ide/components/right_sidebar/index.vue @@ -0,0 +1,61 @@ +<script> +import tooltip from '../../../vue_shared/directives/tooltip'; +import Icon from '../../../vue_shared/components/icon.vue'; +import Pipelines from './pipelines.vue'; + +export default { + directives: { + tooltip, + }, + components: { + Icon, + Pipelines, + }, +}; +</script> + +<template> + <div + class="multi-file-commit-panel ide-right-sidebar" + > + <div class="multi-file-commit-panel-inner"> + <pipelines /> + </div> + <nav class="ide-activity-bar"> + <ul class="list-unstyled"> + <li v-once> + <a + v-tooltip + data-container="body" + data-placement="left" + :title="__('Pipelines')" + class="ide-sidebar-link" + href="a" + > + <icon + :size="16" + name="log" + /> + </a> + </li> + </ul> + </nav> + </div> +</template> + +<style> +.ide-right-sidebar { + width: auto; + min-width: 60px; +} + +.ide-right-sidebar .ide-activity-bar { + border-left: 1px solid #eaeaea; +} + +.ide-right-sidebar .multi-file-commit-panel-inner { + width: 300px; + background-color: #fff; + border-left: 1px solid #eaeaea; +} +</style> diff --git a/app/assets/javascripts/ide/components/right_sidebar/pipelines.vue b/app/assets/javascripts/ide/components/right_sidebar/pipelines.vue new file mode 100644 index 00000000000..0ff78242e6a --- /dev/null +++ b/app/assets/javascripts/ide/components/right_sidebar/pipelines.vue @@ -0,0 +1,46 @@ +<script> +import { mapActions, mapState } from 'vuex'; +import LoadingIcon from '../../../vue_shared/components/loading_icon.vue'; +import CiIcon from '../../../vue_shared/components/ci_icon.vue'; + +export default { + components: { + LoadingIcon, + CiIcon, + }, + computed: { + ...mapState('pipelines', ['isLoadingPipeline', 'latestPipeline']), + statusIcon() { + return { + group: this.latestPipeline.status, + icon: `status_${this.latestPipeline.status}`, + }; + }, + }, + mounted() { + this.fetchLatestPipeline(); + }, + methods: { + ...mapActions('pipelines', ['fetchLatestPipeline']), + }, +}; +</script> + +<template> + <div> + <loading-icon + v-if="isLoadingPipeline" + class="prepend-top-default" + size="2" + /> + <template v-else-if="latestPipeline"> + <ci-icon + :status="statusIcon" + /> + #{{ latestPipeline.id }} + </template> + </div> +</template> + +<style> +</style> |