[ci skip] WIP dynamically switch between preview and repo-editor, disable edit button and editor for binary files
This commit is contained in:
parent
03716dd38c
commit
b6770b3d9a
|
@ -7,6 +7,7 @@ import RepoBinaryViewer from './repo_binary_viewer.vue';
|
|||
import RepoMixin from '../mixins/repo_mixin';
|
||||
import PopupDialog from '../../vue_shared/components/popup_dialog.vue';
|
||||
import Store from '../stores/repo_store';
|
||||
import RepoHelper from '../helpers/repo_helper';
|
||||
import MonacoLoaderHelper from '../helpers/monaco_loader_helper';
|
||||
|
||||
export default {
|
||||
|
@ -20,6 +21,16 @@ export default {
|
|||
'repo-editor': MonacoLoaderHelper.repoEditorLoader,
|
||||
'repo-commit-section': RepoCommitSection,
|
||||
'popup-dialog': PopupDialog,
|
||||
preview: { // POC
|
||||
data: () => Store,
|
||||
template: '<div v-html="activeFile.html"></div>',
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
RepoHelper.getContent().then(() => {
|
||||
|
||||
}).catch(RepoHelper.loadingError);
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
@ -31,6 +42,8 @@ export default {
|
|||
this.dialog.open = false;
|
||||
this.dialog.status = status;
|
||||
},
|
||||
|
||||
toggleBlobView: Store.toggleBlobView,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
@ -40,8 +53,8 @@ export default {
|
|||
<repo-sidebar/><div class="panel-right" :class="{'edit-mode': editMode}">
|
||||
<repo-tabs/>
|
||||
<repo-file-buttons/>
|
||||
<repo-editor/>
|
||||
<repo-binary-viewer/>
|
||||
<component :is="currentBlobView"></component>
|
||||
<!-- <repo-binary-viewer/> soon™ -->
|
||||
</div>
|
||||
<repo-commit-section/>
|
||||
<popup-dialog
|
||||
|
|
|
@ -21,14 +21,15 @@ export default {
|
|||
return;
|
||||
}
|
||||
this.editMode = !this.editMode;
|
||||
Store.toggleBlobView();
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a href="#" @click.prevent="editClicked" v-cloak v-if="isCommitable">
|
||||
<button class="btn btn-default" @click.prevent="editClicked" v-cloak v-if="isCommitable" :disabled="binary">
|
||||
<i :class="buttonIcon"></i>
|
||||
<span>{{buttonLabel}}</span>
|
||||
</a>
|
||||
</button>
|
||||
</template>
|
||||
|
|
|
@ -17,14 +17,12 @@ const RepoEditor = {
|
|||
|
||||
this.addMonacoEvents();
|
||||
|
||||
Helper.getContent().then(() => {
|
||||
const languages = this.monaco.languages.getLanguages();
|
||||
const languageID = Helper.getLanguageIDForFile(this.activeFile, languages);
|
||||
this.showHide();
|
||||
const newModel = this.monaco.editor.createModel(this.blobRaw, languageID);
|
||||
const languages = this.monaco.languages.getLanguages();
|
||||
const languageID = Helper.getLanguageIDForFile(this.activeFile, languages);
|
||||
this.showHide();
|
||||
const newModel = this.monaco.editor.createModel(this.blobRaw, languageID);
|
||||
|
||||
this.monacoInstance.setModel(newModel);
|
||||
}).catch(Helper.loadingError);
|
||||
this.monacoInstance.setModel(newModel);
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
|
|
@ -166,6 +166,7 @@ const RepoHelper = {
|
|||
const rawUrl = RepoHelper.getRawURLFromBlobURL(file.url || Service.url);
|
||||
RepoHelper.setBinaryDataAsBase64(rawUrl, data);
|
||||
data.binary = true;
|
||||
Store.currentBlobView = 'preview';
|
||||
} else {
|
||||
Service.getRaw(data.raw_path)
|
||||
.then(response => {
|
||||
|
|
|
@ -20,6 +20,7 @@ const RepoStore = {
|
|||
submodules: [],
|
||||
blobRaw: '',
|
||||
blobRendered: '',
|
||||
currentBlobView: 'preview',
|
||||
openedFiles: [],
|
||||
tabSize: 100,
|
||||
defaultTabSize: 100,
|
||||
|
@ -211,6 +212,11 @@ const RepoStore = {
|
|||
currentFile.newContent = contents;
|
||||
},
|
||||
|
||||
toggleBlobView() {
|
||||
console.log('toggleBlobView');
|
||||
RepoStore.currentBlobView = RepoStore.currentBlobView === 'preview' ? 'repo-editor' : 'preview';
|
||||
},
|
||||
|
||||
// getters
|
||||
|
||||
isActiveFile(file) {
|
||||
|
|
|
@ -38,6 +38,10 @@
|
|||
@include truncate(250px);
|
||||
}
|
||||
|
||||
#editable-mode {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.tree-content-holder {
|
||||
border: 1px solid $border-color;
|
||||
border-radius: $border-radius-default;
|
||||
|
|
|
@ -1,2 +1,2 @@
|
|||
%a.btn.btn-default#editable-mode
|
||||
#editable-mode
|
||||
%repo-edit-button
|
||||
|
|
Loading…
Reference in New Issue