diff options
6 files changed, 45 insertions, 20 deletions
diff --git a/app/assets/javascripts/repo/components/repo_edit_button.vue b/app/assets/javascripts/repo/components/repo_edit_button.vue index 2616ef6c7e8..91ad7835b28 100644 --- a/app/assets/javascripts/repo/components/repo_edit_button.vue +++ b/app/assets/javascripts/repo/components/repo_edit_button.vue @@ -24,6 +24,20 @@ export default { Store.toggleBlobView(); }, }, + + watch: { + editMode() { + if (this.editMode) { + $('.project-refs-form').addClass('disabled'); + $('.fa-long-arrow-right').show(); + $('.project-refs-target-form').show(); + } else { + $('.project-refs-form').removeClass('disabled'); + $('.fa-long-arrow-right').hide(); + $('.project-refs-target-form').hide(); + } + }, + } } </script> diff --git a/app/assets/javascripts/repo/components/repo_editor.vue b/app/assets/javascripts/repo/components/repo_editor.vue index d6350cdf152..1bd25a5b655 100644 --- a/app/assets/javascripts/repo/components/repo_editor.vue +++ b/app/assets/javascripts/repo/components/repo_editor.vue @@ -7,6 +7,13 @@ import Helper from '../helpers/repo_helper'; const RepoEditor = { data: () => Store, + destroyed() { + // this.monacoInstance.getModels().forEach((m) => { + // m.dispose(); + // }); + this.monacoInstance.destroy(); + }, + mounted() { Service.getRaw(this.activeFile.raw_path) .then((rawResponse) => { @@ -67,26 +74,15 @@ const RepoEditor = { }); }, - editMode() { - if (this.editMode) { - $('.project-refs-form').addClass('disabled'); - $('.fa-long-arrow-right').show(); - $('.project-refs-target-form').show(); - } else { - $('.project-refs-form').removeClass('disabled'); - $('.fa-long-arrow-right').hide(); - $('.project-refs-target-form').hide(); - } - }, - activeFileLabel() { this.showHide(); }, dialog: { handler(obj) { - if (obj.status) { - obj.status = false; // eslint-disable-line no-param-reassign + let newObj = obj; + if (newObj.status) { + newObj.status = false; this.openedFiles.map((file) => { const f = file; if (f.active) { diff --git a/app/assets/javascripts/repo/components/repo_preview.vue b/app/assets/javascripts/repo/components/repo_preview.vue index fb2724379d6..edeeb9ec3a8 100644 --- a/app/assets/javascripts/repo/components/repo_preview.vue +++ b/app/assets/javascripts/repo/components/repo_preview.vue @@ -1,9 +1,11 @@ <script> -import RepoStore from '../stores/repo_store'; +import Store from '../stores/repo_store'; export default { - data: () => RepoStore, - + data: () => Store, + mounted() { + $(this.$el).find('.file-content').syntaxHighlight(); + }, computed: { html() { return this.activeFile.html; @@ -11,13 +13,11 @@ export default { }, watch: { - html() { this.$nextTick(() => { $(this.$el).find('.file-content').syntaxHighlight(); }); } - } } </script> diff --git a/app/assets/javascripts/repo/helpers/monaco_loader_helper.js b/app/assets/javascripts/repo/helpers/monaco_loader_helper.js index 3e67e770d9f..72aa43c38d2 100644 --- a/app/assets/javascripts/repo/helpers/monaco_loader_helper.js +++ b/app/assets/javascripts/repo/helpers/monaco_loader_helper.js @@ -4,10 +4,11 @@ import RepoStore from '../stores/repo_store'; import monacoLoader from '../monaco_loader'; function repoEditorLoader() { + RepoStore.monacoLoading = true; return new Promise((resolve) => { monacoLoader(['vs/editor/editor.main'], () => { RepoStore.monaco = monaco; - + RepoStore.monacoLoading = false; resolve(RepoEditor); }); }); diff --git a/app/assets/javascripts/repo/stores/repo_store.js b/app/assets/javascripts/repo/stores/repo_store.js index 6e02d5cfa01..5a18707f3b7 100644 --- a/app/assets/javascripts/repo/stores/repo_store.js +++ b/app/assets/javascripts/repo/stores/repo_store.js @@ -5,6 +5,7 @@ import RepoService from '../services/repo_service'; const RepoStore = { ideEl: {}, monaco: {}, + monacoLoading: false, monacoInstance: {}, service: '', editor: '', diff --git a/app/assets/stylesheets/pages/repo.scss b/app/assets/stylesheets/pages/repo.scss index 24413e82ffc..09fe11b53af 100644 --- a/app/assets/stylesheets/pages/repo.scss +++ b/app/assets/stylesheets/pages/repo.scss @@ -7,6 +7,19 @@ transition: opacity .5s; } +.blob-viewer { + padding: 20px; +} + +.monaco-loader { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0,0,0,0.2); +} + .modal.popup-dialog { display: block; |