<script> import { mapState, mapActions } from 'vuex'; import projectTree from './ide_project_tree.vue'; import icon from '../../vue_shared/components/icon.vue'; import panelResizer from '../../vue_shared/components/panel_resizer.vue'; import skeletonLoadingContainer from '../../vue_shared/components/skeleton_loading_container.vue'; export default { components: { projectTree, icon, panelResizer, skeletonLoadingContainer, }, data() { return { width: 290, }; }, computed: { ...mapState([ 'loading', 'projects', 'leftPanelCollapsed', ]), currentIcon() { return this.leftPanelCollapsed ? 'angle-double-right' : 'angle-double-left'; }, maxSize() { return window.innerWidth / 2; }, panelStyle() { if (!this.leftPanelCollapsed) { return { width: `${this.width}px` }; } return {}; }, showLoading() { return this.loading; }, }, methods: { ...mapActions([ 'setPanelCollapsedStatus', 'setResizingStatus', ]), toggleCollapsed() { this.setPanelCollapsedStatus({ side: 'left', collapsed: !this.leftPanelCollapsed, }); }, resizingStarted() { this.setResizingStatus(true); }, resizingEnded() { this.setResizingStatus(false); }, }, }; </script> <template> <div class="multi-file-commit-panel" :class="{ 'is-collapsed': leftPanelCollapsed, }" :style="panelStyle" > <div class="multi-file-commit-panel-inner"> <div class="multi-file-loading-container" v-if="showLoading" v-for="n in 3" :key="n"> <skeleton-loading-container/> </div> <project-tree v-for="project in projects" :key="project.id" :project="project" /> </div> <button type="button" class="btn btn-transparent left-collapse-btn" @click="toggleCollapsed" > <icon :name="currentIcon" :size="18" /> <span v-if="!leftPanelCollapsed" class="collapse-text" > Collapse sidebar </span> </button> <panel-resizer :size.sync="width" :enabled="!leftPanelCollapsed" :start-size="290" :min-size="200" :max-size="maxSize" @resize-start="resizingStarted" @resize-end="resizingEnded" side="right" /> </div> </template>