diff options
Diffstat (limited to 'app/assets/javascripts/ide/components/panes')
| -rw-r--r-- | app/assets/javascripts/ide/components/panes/collapsible_sidebar.vue | 92 | ||||
| -rw-r--r-- | app/assets/javascripts/ide/components/panes/right.vue | 35 |
2 files changed, 44 insertions, 83 deletions
diff --git a/app/assets/javascripts/ide/components/panes/collapsible_sidebar.vue b/app/assets/javascripts/ide/components/panes/collapsible_sidebar.vue index 91e80be7d18..4e8e1e3a470 100644 --- a/app/assets/javascripts/ide/components/panes/collapsible_sidebar.vue +++ b/app/assets/javascripts/ide/components/panes/collapsible_sidebar.vue @@ -2,8 +2,7 @@ import { mapActions, mapState } from 'vuex'; import tooltip from '~/vue_shared/directives/tooltip'; import Icon from '~/vue_shared/components/icon.vue'; -import ResizablePanel from '../resizable_panel.vue'; -import { GlSkeletonLoading } from '@gitlab/ui'; +import IdeSidebarNav from '../ide_sidebar_nav.vue'; export default { name: 'CollapsibleSidebar', @@ -12,8 +11,7 @@ export default { }, components: { Icon, - ResizablePanel, - GlSkeletonLoading, + IdeSidebarNav, }, props: { extensionTabs: { @@ -25,13 +23,8 @@ export default { type: String, required: true, }, - width: { - type: Number, - required: true, - }, }, computed: { - ...mapState(['loading']), ...mapState({ isOpen(state) { return state[this.namespace].isOpen; @@ -39,9 +32,6 @@ export default { currentView(state) { return state[this.namespace].currentView; }, - isActiveView(state, getters) { - return getters[`${this.namespace}/isActiveView`]; - }, isAliveView(_state, getters) { return getters[`${this.namespace}/isAliveView`]; }, @@ -59,9 +49,6 @@ export default { aliveTabViews() { return this.tabViews.filter(view => this.isAliveView(view.name)); }, - otherSide() { - return this.side === 'right' ? 'left' : 'right'; - }, }, methods: { ...mapActions({ @@ -72,25 +59,6 @@ export default { return dispatch(`${this.namespace}/open`, view); }, }), - clickTab(e, tab) { - e.target.blur(); - - if (this.isActiveTab(tab)) { - this.toggleOpen(); - } else { - this.open(tab.views[0]); - } - }, - isActiveTab(tab) { - return tab.views.some(view => this.isActiveView(view.name)); - }, - buttonClasses(tab) { - return [ - this.side === 'right' ? 'is-right' : '', - this.isActiveTab(tab) && this.isOpen ? 'active' : '', - ...(tab.buttonClasses || []), - ]; - }, }, }; </script> @@ -101,49 +69,27 @@ export default { :data-qa-selector="`ide_${side}_sidebar`" class="multi-file-commit-panel ide-sidebar" > - <resizable-panel + <div v-show="isOpen" - :initial-width="width" - :min-size="width" :class="`ide-${side}-sidebar-${currentView}`" - :side="side" class="multi-file-commit-panel-inner" > - <div class="h-100 d-flex flex-column align-items-stretch"> - <slot v-if="isOpen" name="header"></slot> - <div - v-for="tabView in aliveTabViews" - v-show="isActiveView(tabView.name)" - :key="tabView.name" - class="flex-fill gl-overflow-hidden js-tab-view" - > - <component :is="tabView.component" /> - </div> - <slot name="footer"></slot> + <div + v-for="tabView in aliveTabViews" + v-show="tabView.name === currentView" + :key="tabView.name" + class="flex-fill gl-overflow-hidden js-tab-view gl-h-full" + > + <component :is="tabView.component" /> </div> - </resizable-panel> - <nav class="ide-activity-bar"> - <ul class="list-unstyled"> - <li> - <slot name="header-icon"></slot> - </li> - <li v-for="tab of tabs" :key="tab.title"> - <button - v-tooltip - :title="tab.title" - :aria-label="tab.title" - :class="buttonClasses(tab)" - data-container="body" - :data-placement="otherSide" - :data-qa-selector="`${tab.title.toLowerCase()}_tab_button`" - class="ide-sidebar-link" - type="button" - @click="clickTab($event, tab)" - > - <icon :size="16" :name="tab.icon" /> - </button> - </li> - </ul> - </nav> + </div> + <ide-sidebar-nav + :tabs="tabs" + :side="side" + :current-view="currentView" + :is-open="isOpen" + @open="open" + @close="toggleOpen" + /> </div> </template> diff --git a/app/assets/javascripts/ide/components/panes/right.vue b/app/assets/javascripts/ide/components/panes/right.vue index 4a9de9e0c03..46ef08a45a9 100644 --- a/app/assets/javascripts/ide/components/panes/right.vue +++ b/app/assets/javascripts/ide/components/panes/right.vue @@ -2,26 +2,27 @@ import { mapGetters, mapState } from 'vuex'; import { __ } from '~/locale'; import CollapsibleSidebar from './collapsible_sidebar.vue'; -import { rightSidebarViews } from '../../constants'; +import ResizablePanel from '../resizable_panel.vue'; +import { rightSidebarViews, SIDEBAR_INIT_WIDTH, SIDEBAR_NAV_WIDTH } from '../../constants'; import PipelinesList from '../pipelines/list.vue'; import JobsDetail from '../jobs/detail.vue'; import Clientside from '../preview/clientside.vue'; +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; export default { name: 'RightPane', components: { CollapsibleSidebar, - }, - props: { - extensionTabs: { - type: Array, - required: false, - default: () => [], - }, + ResizablePanel, }, computed: { + ...mapState('terminal', { isTerminalVisible: 'isVisible' }), ...mapState(['currentMergeRequestId', 'clientsidePreviewEnabled']), ...mapGetters(['packageJson']), + ...mapState('rightPane', ['isOpen']), showLivePreview() { return this.packageJson && this.clientsidePreviewEnabled; }, @@ -42,13 +43,27 @@ export default { views: [{ component: Clientside, ...rightSidebarViews.clientSidePreview }], icon: 'live-preview', }, - ...this.extensionTabs, + { + show: this.isTerminalVisible, + title: __('Terminal'), + views: [{ component: TerminalView, ...rightSidebarViews.terminal }], + icon: 'terminal', + }, ]; }, }, + WIDTH, }; </script> <template> - <collapsible-sidebar :extension-tabs="rightExtensionTabs" side="right" :width="350" /> + <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> </template> |