diff options
Diffstat (limited to 'app')
8 files changed, 122 insertions, 10 deletions
diff --git a/app/assets/javascripts/repo/components/new_dropdown/index.vue b/app/assets/javascripts/repo/components/new_dropdown/index.vue index 3ccb50213ab..3a331ed805f 100644 --- a/app/assets/javascripts/repo/components/new_dropdown/index.vue +++ b/app/assets/javascripts/repo/components/new_dropdown/index.vue @@ -3,10 +3,12 @@ import RepoHelper from '../../helpers/repo_helper'; import eventHub from '../../event_hub'; import newModal from './modal.vue'; + import upload from './upload.vue'; export default { components: { newModal, + upload, }, data() { return { @@ -23,10 +25,12 @@ toggleModalOpen() { this.openModal = !this.openModal; }, - createNewEntryInStore(name, type) { - RepoHelper.createNewEntry(name, type); + createNewEntryInStore(options, openEditMode = true) { + RepoHelper.createNewEntry(options, openEditMode); - this.toggleModalOpen(); + if (options.toggleModal) { + this.toggleModalOpen(); + } }, }, created() { @@ -65,6 +69,11 @@ </a> </li> <li> + <upload + :current-path="currentPath" + /> + </li> + <li> <a href="#" role="button" diff --git a/app/assets/javascripts/repo/components/new_dropdown/modal.vue b/app/assets/javascripts/repo/components/new_dropdown/modal.vue index 5ef629e0dde..b49586de6bb 100644 --- a/app/assets/javascripts/repo/components/new_dropdown/modal.vue +++ b/app/assets/javascripts/repo/components/new_dropdown/modal.vue @@ -24,7 +24,11 @@ }, methods: { createEntryInStore() { - eventHub.$emit('createNewEntry', this.entryName, this.type); + eventHub.$emit('createNewEntry', { + name: this.entryName, + type: this.type, + toggleModal: true, + }); }, toggleModalOpen() { this.$emit('toggle'); diff --git a/app/assets/javascripts/repo/components/new_dropdown/upload.vue b/app/assets/javascripts/repo/components/new_dropdown/upload.vue new file mode 100644 index 00000000000..cbea9c08249 --- /dev/null +++ b/app/assets/javascripts/repo/components/new_dropdown/upload.vue @@ -0,0 +1,67 @@ +<script> + import eventHub from '../../event_hub'; + + export default { + props: { + currentPath: { + type: String, + required: true, + }, + }, + methods: { + createFile(target, file, isText) { + const { name } = file; + const nameWithPath = `${this.currentPath !== '' ? `${this.currentPath}/` : ''}${name}`; + let { result } = target; + + if (!isText) { + result = result.split('base64,')[1]; + } + + eventHub.$emit('createNewEntry', { + name: nameWithPath, + type: 'blob', + content: result, + toggleModal: false, + base64: !isText, + }, isText); + }, + readFile(file) { + const reader = new FileReader(); + const isText = file.type.match(/text.*/) !== null; + + reader.addEventListener('load', e => this.createFile(e.target, file, isText), { once: true }); + + if (isText) { + reader.readAsText(file); + } else { + reader.readAsDataURL(file); + } + }, + openFile() { + Array.from(this.$refs.fileUpload.files).forEach(file => this.readFile(file)); + }, + }, + mounted() { + this.$refs.fileUpload.addEventListener('change', this.openFile); + }, + beforeDestroy() { + this.$refs.fileUpload.removeEventListener('change', this.openFile); + }, + }; +</script> + +<template> + <label + role="button" + class="menu-item" + > + {{ __('Upload file') }} + <input + id="file-upload" + type="file" + class="hidden" + ref="fileUpload" + /> + </label> +</template> diff --git a/app/assets/javascripts/repo/components/repo_commit_section.vue b/app/assets/javascripts/repo/components/repo_commit_section.vue index 0d6259a37a8..649c69c43fd 100644 --- a/app/assets/javascripts/repo/components/repo_commit_section.vue +++ b/app/assets/javascripts/repo/components/repo_commit_section.vue @@ -52,6 +52,7 @@ export default { action: f.tempFile ? 'create' : 'update', file_path: f.path, content: f.newContent, + encoding: f.base64 ? 'base64' : 'text', })); const branch = newBranch ? `${this.currentBranch}-${this.currentShortHash}` : this.currentBranch; const payload = { diff --git a/app/assets/javascripts/repo/components/repo_preview.vue b/app/assets/javascripts/repo/components/repo_preview.vue index b5be771d539..264694f01a2 100644 --- a/app/assets/javascripts/repo/components/repo_preview.vue +++ b/app/assets/javascripts/repo/components/repo_preview.vue @@ -50,6 +50,13 @@ export default { v-html="activeFile.html"> </div> <div + v-else-if="activeFile.tempFile" + class="vertical-center render-error"> + <p class="text-center"> + The source could not be displayed for this temporary file. + </p> + </div> + <div v-else-if="activeFile.tooLarge" class="vertical-center render-error"> <p class="text-center"> diff --git a/app/assets/javascripts/repo/helpers/repo_helper.js b/app/assets/javascripts/repo/helpers/repo_helper.js index fb26f3b7380..1c677049b31 100644 --- a/app/assets/javascripts/repo/helpers/repo_helper.js +++ b/app/assets/javascripts/repo/helpers/repo_helper.js @@ -155,7 +155,7 @@ const RepoHelper = { if (newFile.render_error === 'too_large' || newFile.render_error === 'collapsed') { newFile.tooLarge = true; } - newFile.newContent = ''; + newFile.newContent = file.newContent ? file.newContent : ''; Store.addToOpenedFiles(newFile); Store.setActiveFiles(newFile); @@ -276,7 +276,13 @@ const RepoHelper = { removeAllTmpFiles(storeFilesKey) { Store[storeFilesKey] = Store[storeFilesKey].filter(f => !f.tempFile); }, - createNewEntry(name, type) { + createNewEntry(options, openEditMode = true) { + const { + name, + type, + content = '', + base64 = false, + } = options; const originalPath = Store.path; let entryName = name; @@ -304,9 +310,24 @@ const RepoHelper = { if ((type === 'tree' && tree.tempFile) || type === 'blob') { const file = this.findOrCreateEntry('blob', tree, fileName); - if (!file.exists) { - this.setFile(file.entry, file.entry); - this.openEditMode(); + if (file.exists) { + Flash(`The name "${file.entry.name}" is already taken in this directory.`); + } else { + const { entry } = file; + entry.newContent = content; + entry.base64 = base64; + + if (entry.base64) { + entry.render_error = true; + } + + this.setFile(entry, entry); + + if (openEditMode) { + this.openEditMode(); + } else { + file.entry.render_error = 'asdsad'; + } } } diff --git a/app/assets/javascripts/repo/services/repo_service.js b/app/assets/javascripts/repo/services/repo_service.js index c9fa5cc8bf8..d003e2b0a5e 100644 --- a/app/assets/javascripts/repo/services/repo_service.js +++ b/app/assets/javascripts/repo/services/repo_service.js @@ -19,7 +19,7 @@ const RepoService = { getRaw(file) { if (file.tempFile) { return Promise.resolve({ - data: '', + data: file.newContent ? file.newContent : '', }); } diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss index a9d804e735d..1aa53b8f8cf 100644 --- a/app/assets/stylesheets/framework/dropdowns.scss +++ b/app/assets/stylesheets/framework/dropdowns.scss @@ -776,12 +776,15 @@ a, button, .menu-item { + margin-bottom: 0; border-radius: 0; box-shadow: none; padding: 8px 16px; text-align: left; white-space: normal; width: 100%; + font-weight: $gl-font-weight-normal; + line-height: normal; &.dropdown-menu-user-link { white-space: nowrap; |