debian-mirror-gitlab/app/assets/javascripts/ide/components/panes/right.vue

70 lines
2.1 KiB
Vue
Raw Normal View History

2018-11-08 19:23:39 +05:30
<script>
2020-03-13 15:44:24 +05:30
import { mapGetters, mapState } from 'vuex';
2018-12-05 23:21:45 +05:30
import { __ } from '~/locale';
2020-03-13 15:44:24 +05:30
import CollapsibleSidebar from './collapsible_sidebar.vue';
2020-06-23 00:09:42 +05:30
import ResizablePanel from '../resizable_panel.vue';
import { rightSidebarViews, SIDEBAR_INIT_WIDTH, SIDEBAR_NAV_WIDTH } from '../../constants';
2018-11-08 19:23:39 +05:30
import PipelinesList from '../pipelines/list.vue';
import JobsDetail from '../jobs/detail.vue';
2018-11-18 11:00:15 +05:30
import Clientside from '../preview/clientside.vue';
2020-06-23 00:09:42 +05:30
import TerminalView from '../terminal/view.vue';
// Need to add the width of the nav buttons since the resizable container contains those as well
const WIDTH = SIDEBAR_INIT_WIDTH + SIDEBAR_NAV_WIDTH;
2018-11-08 19:23:39 +05:30
export default {
2020-03-13 15:44:24 +05:30
name: 'RightPane',
2018-11-08 19:23:39 +05:30
components: {
2020-03-13 15:44:24 +05:30
CollapsibleSidebar,
2020-06-23 00:09:42 +05:30
ResizablePanel,
2018-12-05 23:21:45 +05:30
},
2018-11-08 19:23:39 +05:30
computed: {
2020-06-23 00:09:42 +05:30
...mapState('terminal', { isTerminalVisible: 'isVisible' }),
2018-12-05 23:21:45 +05:30
...mapState(['currentMergeRequestId', 'clientsidePreviewEnabled']),
2018-11-18 11:00:15 +05:30
...mapGetters(['packageJson']),
2020-06-23 00:09:42 +05:30
...mapState('rightPane', ['isOpen']),
2018-11-18 11:00:15 +05:30
showLivePreview() {
return this.packageJson && this.clientsidePreviewEnabled;
},
2020-03-13 15:44:24 +05:30
rightExtensionTabs() {
2018-12-05 23:21:45 +05:30
return [
{
show: true,
title: __('Pipelines'),
2020-03-13 15:44:24 +05:30
views: [
{ component: PipelinesList, ...rightSidebarViews.pipelines },
{ component: JobsDetail, ...rightSidebarViews.jobsDetail },
],
2018-12-05 23:21:45 +05:30
icon: 'rocket',
},
{
show: this.showLivePreview,
title: __('Live preview'),
2020-03-13 15:44:24 +05:30
views: [{ component: Clientside, ...rightSidebarViews.clientSidePreview }],
2018-12-05 23:21:45 +05:30
icon: 'live-preview',
},
2020-06-23 00:09:42 +05:30
{
show: this.isTerminalVisible,
title: __('Terminal'),
views: [{ component: TerminalView, ...rightSidebarViews.terminal }],
icon: 'terminal',
},
2018-12-05 23:21:45 +05:30
];
},
2018-11-08 19:23:39 +05:30
},
2020-06-23 00:09:42 +05:30
WIDTH,
2018-11-08 19:23:39 +05:30
};
</script>
<template>
2020-06-23 00:09:42 +05:30
<resizable-panel
class="gl-display-flex gl-overflow-hidden"
side="right"
:initial-width="$options.WIDTH"
:min-size="$options.WIDTH"
:resizable="isOpen"
>
<collapsible-sidebar class="gl-w-full" :extension-tabs="rightExtensionTabs" side="right" />
</resizable-panel>
2018-11-08 19:23:39 +05:30
</template>