120 lines
2.3 KiB
Vue
120 lines
2.3 KiB
Vue
<script>
|
|
import { mapActions } from 'vuex';
|
|
import icon from '~/vue_shared/components/icon.vue';
|
|
import newModal from './modal.vue';
|
|
import upload from './upload.vue';
|
|
|
|
export default {
|
|
components: {
|
|
icon,
|
|
newModal,
|
|
upload,
|
|
},
|
|
props: {
|
|
branch: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
path: {
|
|
type: String,
|
|
required: false,
|
|
default: '',
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
openModal: false,
|
|
modalType: '',
|
|
dropdownOpen: false,
|
|
};
|
|
},
|
|
watch: {
|
|
dropdownOpen() {
|
|
this.$nextTick(() => {
|
|
this.$refs.dropdownMenu.scrollIntoView();
|
|
});
|
|
},
|
|
},
|
|
methods: {
|
|
...mapActions(['createTempEntry']),
|
|
createNewItem(type) {
|
|
this.modalType = type;
|
|
this.openModal = true;
|
|
this.dropdownOpen = false;
|
|
},
|
|
hideModal() {
|
|
this.openModal = false;
|
|
},
|
|
openDropdown() {
|
|
this.dropdownOpen = !this.dropdownOpen;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div class="ide-new-btn">
|
|
<div
|
|
class="dropdown"
|
|
:class="{
|
|
open: dropdownOpen,
|
|
}"
|
|
>
|
|
<button
|
|
type="button"
|
|
class="btn btn-sm btn-default dropdown-toggle add-to-tree"
|
|
aria-label="Create new file or directory"
|
|
@click.stop="openDropdown()"
|
|
>
|
|
<icon
|
|
name="plus"
|
|
:size="12"
|
|
css-classes="pull-left"
|
|
/>
|
|
<icon
|
|
name="arrow-down"
|
|
:size="12"
|
|
css-classes="pull-left"
|
|
/>
|
|
</button>
|
|
<ul
|
|
class="dropdown-menu dropdown-menu-right"
|
|
ref="dropdownMenu"
|
|
>
|
|
<li>
|
|
<a
|
|
href="#"
|
|
role="button"
|
|
@click.stop.prevent="createNewItem('blob')"
|
|
>
|
|
{{ __('New file') }}
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<upload
|
|
:branch-id="branch"
|
|
:path="path"
|
|
@create="createTempEntry"
|
|
/>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="#"
|
|
role="button"
|
|
@click.stop.prevent="createNewItem('tree')"
|
|
>
|
|
{{ __('New directory') }}
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<new-modal
|
|
v-if="openModal"
|
|
:type="modalType"
|
|
:branch-id="branch"
|
|
:path="path"
|
|
@hide="hideModal"
|
|
@create="createTempEntry"
|
|
/>
|
|
</div>
|
|
</template>
|