diff options
Diffstat (limited to 'app/assets/javascripts/repo/components')
12 files changed, 309 insertions, 155 deletions
diff --git a/app/assets/javascripts/repo/components/repo.vue b/app/assets/javascripts/repo/components/repo.vue index 703da749ad3..3d5e01c8ec0 100644 --- a/app/assets/javascripts/repo/components/repo.vue +++ b/app/assets/javascripts/repo/components/repo.vue @@ -14,13 +14,13 @@ export default { data: () => Store, mixins: [RepoMixin], components: { - 'repo-sidebar': RepoSidebar, - 'repo-tabs': RepoTabs, - 'repo-file-buttons': RepoFileButtons, + RepoSidebar, + RepoTabs, + RepoFileButtons, 'repo-editor': MonacoLoaderHelper.repoEditorLoader, - 'repo-commit-section': RepoCommitSection, - 'popup-dialog': PopupDialog, - 'repo-preview': RepoPreview, + RepoCommitSection, + PopupDialog, + RepoPreview, }, mounted() { @@ -28,12 +28,12 @@ export default { }, methods: { - dialogToggled(toggle) { + toggleDialogOpen(toggle) { this.dialog.open = toggle; }, dialogSubmitted(status) { - this.dialog.open = false; + this.toggleDialogOpen(false); this.dialog.status = status; }, @@ -43,21 +43,25 @@ export default { </script> <template> -<div class="repository-view tree-content-holder"> - <repo-sidebar/><div class="panel-right" :class="{'edit-mode': editMode}"> - <repo-tabs/> - <component :is="currentBlobView" class="blob-viewer-container"></component> - <repo-file-buttons/> + <div class="repository-view tree-content-holder"> + <repo-sidebar/><div v-if="isMini" + class="panel-right" + :class="{'edit-mode': editMode}"> + <repo-tabs/> + <component + :is="currentBlobView" + class="blob-viewer-container"/> + <repo-file-buttons/> + </div> + <repo-commit-section/> + <popup-dialog + v-show="dialog.open" + :primary-button-label="__('Discard changes')" + kind="warning" + :title="__('Are you sure?')" + :body="__('Are you sure you want to discard your changes?')" + @toggle="toggleDialogOpen" + @submit="dialogSubmitted" + /> </div> - <repo-commit-section/> - <popup-dialog - :primary-button-label="__('Discard changes')" - :open="dialog.open" - kind="warning" - :title="__('Are you sure?')" - :body="__('Are you sure you want to discard your changes?')" - @toggle="dialogToggled" - @submit="dialogSubmitted" - /> -</div> </template> diff --git a/app/assets/javascripts/repo/components/repo_commit_section.vue b/app/assets/javascripts/repo/components/repo_commit_section.vue index 344d40be131..5ec4a9b6593 100644 --- a/app/assets/javascripts/repo/components/repo_commit_section.vue +++ b/app/assets/javascripts/repo/components/repo_commit_section.vue @@ -2,7 +2,6 @@ /* global Flash */ import Store from '../stores/repo_store'; import RepoMixin from '../mixins/repo_mixin'; -import Helper from '../helpers/repo_helper'; import Service from '../services/repo_service'; export default { @@ -11,9 +10,12 @@ export default { mixins: [RepoMixin], computed: { + showCommitable() { + return this.isCommitable && this.changedFiles.length; + }, + branchPaths() { - const branch = Helper.getBranch(); - return this.changedFiles.map(f => Helper.getFilePathFromFullPath(f.url, branch)); + return this.changedFiles.map(f => f.path); }, cantCommitYet() { @@ -28,11 +30,10 @@ export default { methods: { makeCommit() { // see https://docs.gitlab.com/ce/api/commits.html#create-a-commit-with-multiple-files-and-actions - const branch = Helper.getBranch(); const commitMessage = this.commitMessage; const actions = this.changedFiles.map(f => ({ action: 'update', - file_path: Helper.getFilePathFromFullPath(f.url, branch), + file_path: f.path, content: f.newContent, })); const payload = { @@ -47,49 +48,80 @@ export default { resetCommitState() { this.submitCommitsLoading = false; this.changedFiles = []; - this.openedFiles = []; this.commitMessage = ''; this.editMode = false; - $('html, body').animate({ scrollTop: 0 }, 'fast'); + window.scrollTo(0, 0); }, }, }; </script> <template> -<div id="commit-area" v-if="isCommitable && changedFiles.length" > - <form class="form-horizontal"> +<div + v-if="showCommitable" + id="commit-area"> + <form + class="form-horizontal" + @submit.prevent="makeCommit"> <fieldset> <div class="form-group"> - <label class="col-md-4 control-label staged-files">Staged files ({{changedFiles.length}})</label> - <div class="col-md-4"> + <label class="col-md-4 control-label staged-files"> + Staged files ({{changedFiles.length}}) + </label> + <div class="col-md-6"> <ul class="list-unstyled changed-files"> - <li v-for="file in branchPaths" :key="file.id"> - <span class="help-block">{{file}}</span> + <li + v-for="branchPath in branchPaths" + :key="branchPath"> + <span class="help-block"> + {{branchPath}} + </span> </li> </ul> </div> </div> - <!-- Textarea - --> <div class="form-group"> - <label class="col-md-4 control-label" for="commit-message">Commit message</label> - <div class="col-md-4"> - <textarea class="form-control" id="commit-message" name="commit-message" v-model="commitMessage"></textarea> + <label + class="col-md-4 control-label" + for="commit-message"> + Commit message + </label> + <div class="col-md-6"> + <textarea + id="commit-message" + class="form-control" + name="commit-message" + v-model="commitMessage"> + </textarea> </div> </div> - <!-- Button Drop Down - --> <div class="form-group target-branch"> - <label class="col-md-4 control-label" for="target-branch">Target branch</label> - <div class="col-md-4"> - <span class="help-block">{{targetBranch}}</span> + <label + class="col-md-4 control-label" + for="target-branch"> + Target branch + </label> + <div class="col-md-6"> + <span class="help-block"> + {{targetBranch}} + </span> </div> </div> - <div class="col-md-offset-4 col-md-4"> - <button type="submit" :disabled="cantCommitYet" class="btn btn-success submit-commit" @click.prevent="makeCommit"> - <i class="fa fa-spinner fa-spin" v-if="submitCommitsLoading"></i> - <span class="commit-summary">Commit {{changedFiles.length}} {{filePluralize}}</span> + <div class="col-md-offset-4 col-md-6"> + <button + ref="submitCommit" + type="submit" + :disabled="cantCommitYet" + class="btn btn-success"> + <i + v-if="submitCommitsLoading" + class="fa fa-spinner fa-spin" + aria-hidden="true" + aria-label="loading"> + </i> + <span class="commit-summary"> + Commit {{changedFiles.length}} {{filePluralize}} + </span> </button> </div> </fieldset> diff --git a/app/assets/javascripts/repo/components/repo_edit_button.vue b/app/assets/javascripts/repo/components/repo_edit_button.vue index e3820f7688b..29b76975561 100644 --- a/app/assets/javascripts/repo/components/repo_edit_button.vue +++ b/app/assets/javascripts/repo/components/repo_edit_button.vue @@ -10,12 +10,15 @@ export default { return this.editMode ? this.__('Cancel edit') : this.__('Edit'); }, - buttonIcon() { - return this.editMode ? [] : ['fa', 'fa-pencil']; + showButton() { + return this.isCommitable && + !this.activeFile.render_error && + !this.binary && + this.openedFiles.length; }, }, methods: { - editClicked() { + editCancelClicked() { if (this.changedFiles.length) { this.dialog.open = true; return; @@ -24,15 +27,11 @@ export default { Store.toggleBlobView(); }, toggleProjectRefsForm() { - if (this.editMode) { - $('.project-refs-form').addClass('disabled-content'); - $('.project-refs-target-form').show(); - } else { - $('.project-refs-form').removeClass('disabled-content'); - $('.project-refs-target-form').hide(); - } + $('.project-refs-form').toggleClass('disabled', this.editMode); + $('.js-tree-ref-target-holder').toggle(this.editMode); }, }, + watch: { editMode() { this.toggleProjectRefsForm(); @@ -42,8 +41,18 @@ export default { </script> <template> -<button class="btn btn-default" @click.prevent="editClicked" v-cloak v-if="isCommitable && !activeFile.render_error" :disabled="binary"> - <i :class="buttonIcon"></i> - <span>{{buttonLabel}}</span> +<button + v-if="showButton" + class="btn btn-default" + type="button" + @click.prevent="editCancelClicked"> + <i + v-if="!editMode" + class="fa fa-pencil" + aria-hidden="true"> + </i> + <span> + {{buttonLabel}} + </span> </button> </template> diff --git a/app/assets/javascripts/repo/components/repo_editor.vue b/app/assets/javascripts/repo/components/repo_editor.vue index 55a3af7aabb..96d6a75bb61 100644 --- a/app/assets/javascripts/repo/components/repo_editor.vue +++ b/app/assets/javascripts/repo/components/repo_editor.vue @@ -8,68 +8,78 @@ const RepoEditor = { data: () => Store, destroyed() { - // this.monacoInstance.getModels().forEach((m) => { - // m.dispose(); - // }); - this.monacoInstance.destroy(); + if (Helper.monacoInstance) { + Helper.monacoInstance.destroy(); + } }, mounted() { Service.getRaw(this.activeFile.raw_path) - .then((rawResponse) => { - Store.blobRaw = rawResponse.data; - Helper.findOpenedFileFromActive().plain = rawResponse.data; + .then((rawResponse) => { + Store.blobRaw = rawResponse.data; + Store.activeFile.plain = rawResponse.data; - const monacoInstance = this.monaco.editor.create(this.$el, { - model: null, - readOnly: false, - contextmenu: false, - }); + const monacoInstance = Helper.monaco.editor.create(this.$el, { + model: null, + readOnly: false, + contextmenu: false, + }); - Store.monacoInstance = monacoInstance; + Helper.monacoInstance = monacoInstance; - this.addMonacoEvents(); + this.addMonacoEvents(); - const languages = this.monaco.languages.getLanguages(); - const languageID = Helper.getLanguageIDForFile(this.activeFile, languages); - const newModel = this.monaco.editor.createModel(this.blobRaw, languageID); - - this.monacoInstance.setModel(newModel); - }).catch(Helper.loadingError); + this.setupEditor(); + }) + .catch(Helper.loadingError); }, methods: { + setupEditor() { + this.showHide(); + + Helper.setMonacoModelFromLanguage(); + }, + + showHide() { + if (!this.openedFiles.length || (this.binary && !this.activeFile.raw)) { + this.$el.style.display = 'none'; + } else { + this.$el.style.display = 'inline-block'; + } + }, + addMonacoEvents() { - this.monacoInstance.onMouseUp(this.onMonacoEditorMouseUp); - this.monacoInstance.onKeyUp(this.onMonacoEditorKeysPressed.bind(this)); + Helper.monacoInstance.onMouseUp(this.onMonacoEditorMouseUp); + Helper.monacoInstance.onKeyUp(this.onMonacoEditorKeysPressed.bind(this)); }, onMonacoEditorKeysPressed() { - Store.setActiveFileContents(this.monacoInstance.getValue()); + Store.setActiveFileContents(Helper.monacoInstance.getValue()); }, onMonacoEditorMouseUp(e) { + if (!e.target.position) return; const lineNumber = e.target.position.lineNumber; - if (e.target.element.className === 'line-numbers') { + if (e.target.element.classList.contains('line-numbers')) { location.hash = `L${lineNumber}`; Store.activeLine = lineNumber; + + Helper.monacoInstance.setPosition({ + lineNumber: this.activeLine, + column: 1, + }); } }, }, watch: { - activeLine() { - this.monacoInstance.setPosition({ - lineNumber: this.activeLine, - column: 1, - }); - }, dialog: { handler(obj) { const newObj = obj; if (newObj.status) { newObj.status = false; - this.openedFiles.map((file) => { + this.openedFiles = this.openedFiles.map((file) => { const f = file; if (f.active) { this.blobRaw = f.plain; @@ -80,21 +90,16 @@ const RepoEditor = { return f; }); this.editMode = false; + Store.toggleBlobView(); } }, deep: true, }, blobRaw() { - if (this.isTree) return; - - this.monacoInstance.setModel(null); - - const languages = this.monaco.languages.getLanguages(); - const languageID = Helper.getLanguageIDForFile(this.activeFile, languages); - const newModel = this.monaco.editor.createModel(this.blobRaw, languageID); - - this.monacoInstance.setModel(newModel); + if (Helper.monacoInstance && !this.isTree) { + this.setupEditor(); + } }, }, computed: { diff --git a/app/assets/javascripts/repo/components/repo_file.vue b/app/assets/javascripts/repo/components/repo_file.vue index f604bc22a26..20ebf840774 100644 --- a/app/assets/javascripts/repo/components/repo_file.vue +++ b/app/assets/javascripts/repo/components/repo_file.vue @@ -33,6 +33,26 @@ const RepoFile = { canShowFile() { return !this.loading.tree || this.hasFiles; }, + + fileIcon() { + const classObj = { + 'fa-spinner fa-spin': this.file.loading, + [this.file.icon]: !this.file.loading, + }; + return classObj; + }, + + fileIndentation() { + return { + 'margin-left': `${this.file.level * 10}px`, + }; + }, + + activeFileClass() { + return { + active: this.activeFile.url === this.file.url, + }; + }, }, methods: { @@ -46,21 +66,42 @@ export default RepoFile; </script> <template> -<tr class="file" v-if="canShowFile" :class="{'active': activeFile.url === file.url}"> - <td @click.prevent="linkClicked(file)"> - <i class="fa file-icon" v-if="!file.loading" :class="file.icon" :style="{'margin-left': file.level * 10 + 'px'}"></i> - <i class="fa fa-spinner fa-spin" v-if="file.loading" :style="{'margin-left': file.level * 10 + 'px'}"></i> - <a :href="file.url" class="repo-file-name" :title="file.url">{{file.name}}</a> +<tr + v-if="canShowFile" + class="file" + :class="activeFileClass" + @click.prevent="linkClicked(file)"> + <td> + <i + class="fa fa-fw file-icon" + :class="fileIcon" + :style="fileIndentation" + aria-label="file icon"> + </i> + <a + :href="file.url" + class="repo-file-name" + :title="file.url"> + {{file.name}} + </a> </td> - <td v-if="!isMini" class="hidden-sm hidden-xs"> - <div class="commit-message"> - <a :href="file.lastCommitUrl">{{file.lastCommitMessage}}</a> - </div> - </td> + <template v-if="!isMini"> + <td class="hidden-sm hidden-xs"> + <div class="commit-message"> + <a @click.stop :href="file.lastCommitUrl"> + {{file.lastCommitMessage}} + </a> + </div> + </td> - <td v-if="!isMini" class="hidden-xs"> - <span class="commit-update" :title="tooltipTitle(file.lastCommitUpdate)">{{timeFormated(file.lastCommitUpdate)}}</span> - </td> + <td class="hidden-xs"> + <span + class="commit-update" + :title="tooltipTitle(file.lastCommitUpdate)"> + {{timeFormated(file.lastCommitUpdate)}} + </span> + </td> + </template> </tr> </template> diff --git a/app/assets/javascripts/repo/components/repo_file_buttons.vue b/app/assets/javascripts/repo/components/repo_file_buttons.vue index 628d02ca704..e43ef366f47 100644 --- a/app/assets/javascripts/repo/components/repo_file_buttons.vue +++ b/app/assets/javascripts/repo/components/repo_file_buttons.vue @@ -15,7 +15,7 @@ const RepoFileButtons = { }, canPreview() { - return Helper.isKindaBinary(); + return Helper.isRenderable(); }, }, @@ -28,15 +28,42 @@ export default RepoFileButtons; </script> <template> -<div id="repo-file-buttons" v-if="isMini"> - <a :href="activeFile.raw_path" target="_blank" class="btn btn-default raw" rel="noopener noreferrer">{{rawDownloadButtonLabel}}</a> + <div id="repo-file-buttons"> + <a + :href="activeFile.raw_path" + target="_blank" + class="btn btn-default raw" + rel="noopener noreferrer"> + {{rawDownloadButtonLabel}} + </a> - <div class="btn-group" role="group" aria-label="File actions"> - <a :href="activeFile.blame_path" class="btn btn-default blame">Blame</a> - <a :href="activeFile.commits_path" class="btn btn-default history">History</a> - <a :href="activeFile.permalink" class="btn btn-default permalink">Permalink</a> - </div> + <div + class="btn-group" + role="group" + aria-label="File actions"> + <a + :href="activeFile.blame_path" + class="btn btn-default blame"> + Blame + </a> + <a + :href="activeFile.commits_path" + class="btn btn-default history"> + History + </a> + <a + :href="activeFile.permalink" + class="btn btn-default permalink"> + Permalink + </a> + </div> - <a href="#" v-if="canPreview" @click.prevent="rawPreviewToggle" class="btn btn-default preview">{{activeFileLabel}}</a> -</div> + <a + v-if="canPreview" + href="#" + @click.prevent="rawPreviewToggle" + class="btn btn-default preview"> + {{activeFileLabel}} + </a> + </div> </template> diff --git a/app/assets/javascripts/repo/components/repo_file_options.vue b/app/assets/javascripts/repo/components/repo_file_options.vue index ba53ce0eecc..6a15755f029 100644 --- a/app/assets/javascripts/repo/components/repo_file_options.vue +++ b/app/assets/javascripts/repo/components/repo_file_options.vue @@ -17,7 +17,7 @@ export default RepoFileOptions; </script> <template> -<tr v-if="isMini" class="repo-file-options"> + <tr v-if="isMini" class="repo-file-options"> <td> <span class="title">{{projectName}}</span> </td> diff --git a/app/assets/javascripts/repo/components/repo_loading_file.vue b/app/assets/javascripts/repo/components/repo_loading_file.vue index 38e9f16d041..bc8c64c8362 100644 --- a/app/assets/javascripts/repo/components/repo_loading_file.vue +++ b/app/assets/javascripts/repo/components/repo_loading_file.vue @@ -18,9 +18,15 @@ const RepoLoadingFile = { }, }, + computed: { + showGhostLines() { + return this.loading.tree && !this.hasFiles; + }, + }, + methods: { lineOfCode(n) { - return `line-of-code-${n}`; + return `skeleton-line-${n}`; }, }, }; @@ -29,23 +35,42 @@ export default RepoLoadingFile; </script> <template> -<tr v-if="loading.tree && !hasFiles" class="loading-file"> - <td> - <div class="animation-container animation-container-small"> - <div v-for="n in 6" :class="lineOfCode(n)" :key="n"></div> - </div> - </td> + <tr + v-if="showGhostLines" + class="loading-file"> + <td> + <div + class="animation-container animation-container-small"> + <div + v-for="n in 6" + :key="n" + :class="lineOfCode(n)"> + </div> + </div> + </td> - <td v-if="!isMini" class="hidden-sm hidden-xs"> - <div class="animation-container"> - <div v-for="n in 6" :class="lineOfCode(n)" :key="n"></div> - </div> - </td> + <td + v-if="!isMini" + class="hidden-sm hidden-xs"> + <div class="animation-container"> + <div + v-for="n in 6" + :key="n" + :class="lineOfCode(n)"> + </div> + </div> + </td> - <td v-if="!isMini" class="hidden-xs"> - <div class="animation-container animation-container-small"> - <div v-for="n in 6" :class="lineOfCode(n)" :key="n"></div> - </div> - </td> -</tr> + <td + v-if="!isMini" + class="hidden-xs"> + <div class="animation-container animation-container-small"> + <div + v-for="n in 6" + :key="n" + :class="lineOfCode(n)"> + </div> + </div> + </td> + </tr> </template> diff --git a/app/assets/javascripts/repo/components/repo_prev_directory.vue b/app/assets/javascripts/repo/components/repo_prev_directory.vue index 6a0d684052f..bbdbdc61e38 100644 --- a/app/assets/javascripts/repo/components/repo_prev_directory.vue +++ b/app/assets/javascripts/repo/components/repo_prev_directory.vue @@ -1,4 +1,6 @@ <script> +import RepoMixin from '../mixins/repo_mixin'; + const RepoPreviousDirectory = { props: { prevUrl: { @@ -7,6 +9,14 @@ const RepoPreviousDirectory = { }, }, + mixins: [RepoMixin], + + computed: { + colSpanCondition() { + return this.isMini ? undefined : 3; + }, + }, + methods: { linkClicked(file) { this.$emit('linkclicked', file); @@ -19,8 +29,10 @@ export default RepoPreviousDirectory; <template> <tr class="prev-directory"> - <td colspan="3"> - <a :href="prevUrl" @click.prevent="linkClicked(prevUrl)">..</a> + <td + :colspan="colSpanCondition" + @click.prevent="linkClicked(prevUrl)"> + <a :href="prevUrl">..</a> </td> </tr> </template> diff --git a/app/assets/javascripts/repo/components/repo_sidebar.vue b/app/assets/javascripts/repo/components/repo_sidebar.vue index 8e9499adf88..72b40288566 100644 --- a/app/assets/javascripts/repo/components/repo_sidebar.vue +++ b/app/assets/javascripts/repo/components/repo_sidebar.vue @@ -35,7 +35,7 @@ export default { fileClicked(clickedFile) { let file = clickedFile; - + if (file.loading) return; file.loading = true; if (file.type === 'tree' && file.opened) { file = Store.removeChildFilesOfTree(file); diff --git a/app/assets/javascripts/repo/components/repo_tab.vue b/app/assets/javascripts/repo/components/repo_tab.vue index caabf5d4b1b..0d0c34ec741 100644 --- a/app/assets/javascripts/repo/components/repo_tab.vue +++ b/app/assets/javascripts/repo/components/repo_tab.vue @@ -18,8 +18,8 @@ const RepoTab = { }, changedClass() { const tabChangedObj = { - 'fa-times': !this.tab.changed, - 'fa-circle': this.tab.changed, + 'fa-times close-icon': !this.tab.changed, + 'fa-circle unsaved-icon': this.tab.changed, }; return tabChangedObj; }, @@ -39,11 +39,11 @@ export default RepoTab; </script> <template> -<li> +<li @click="tabClicked(tab)"> <a href="#0" class="close" - @click.prevent="closeTab(tab)" + @click.stop.prevent="closeTab(tab)" :aria-label="closeLabel"> <i class="fa" diff --git a/app/assets/javascripts/repo/components/repo_tabs.vue b/app/assets/javascripts/repo/components/repo_tabs.vue index 841aa689594..9c5bfc5d0cf 100644 --- a/app/assets/javascripts/repo/components/repo_tabs.vue +++ b/app/assets/javascripts/repo/components/repo_tabs.vue @@ -23,8 +23,7 @@ export default RepoTabs; </script> <template> -<ul id="tabs" - v-if="isMini"> +<ul id="tabs"> <repo-tab v-for="tab in openedFiles" :key="tab.id" |