diff --git a/src/renderer/components/editor/Editor.html b/src/renderer/components/editor/Editor.html index 7ec8377..70bea5e 100644 --- a/src/renderer/components/editor/Editor.html +++ b/src/renderer/components/editor/Editor.html @@ -1 +1,14 @@ -
+
+
+ + + +
diff --git a/src/renderer/components/editor/Editor.scss b/src/renderer/components/editor/Editor.scss index e69de29..4b3ad5d 100644 --- a/src/renderer/components/editor/Editor.scss +++ b/src/renderer/components/editor/Editor.scss @@ -0,0 +1,25 @@ +.editor { + position: relative; + + &--fullscreen { + position: fixed; + top: 0; + right: 0; + left: 0; + bottom: 0; + width: 100vw; + height: 100vh; + z-index: 10; + } + + &__fullscreen-toggle { + position: absolute; + top: 4px; + right: 4px; + z-index: 1; + color: whitesmoke; + } + &__fullscreen-toggle:hover { + color: #bbb; + } +} diff --git a/src/renderer/components/editor/Editor.vue b/src/renderer/components/editor/Editor.vue index 6cf4093..b028025 100644 --- a/src/renderer/components/editor/Editor.vue +++ b/src/renderer/components/editor/Editor.vue @@ -16,13 +16,28 @@ export default { height: true, width: true, readOnly: Boolean, + autoGrow: Boolean, }, data() { return { editor: null, contentBackup: '', + fullScreen: false, }; }, + computed: { + editorHeight() { + if (this.autoGrow && !this.fullScreen) return undefined; + if (this.height && !this.fullScreen) return this.px(this.height); + return '100%' + }, + editorStyle() { + return { + width: this.width && !this.fullScreen ? this.px(this.width) : '100%', + height: this.editorHeight, + } + }, + }, methods: { px(n) { if (/^\d*$/.test(n)) { @@ -30,6 +45,10 @@ export default { } return n; }, + toggleFullscreen() { + this.fullScreen = !this.fullScreen; + this.editor.resize(); + } }, watch: { value(val) { @@ -49,24 +68,26 @@ export default { require('brace/ext/emmet'); - const editor = (vm.editor = ace.edit(this.$el)); + const editor = (vm.editor = ace.edit(this.$refs.editor)); this.$emit('init', editor); editor.$blockScrolling = Infinity; editor.setOption('enableEmmet', true); - editor.setOption('maxLines', 15); + editor.setOption('fontSize', '1rem'); editor.getSession().setMode(`ace/mode/${lang}`); editor.setTheme(`ace/theme/${theme}`); editor.setShowPrintMargin(false); if (!this.readOnly) { - editor.setOption('minLines', 15); editor.setValue(this.value, 1); } else { editor.setValue(this.code, 1); } editor.setReadOnly(this.readOnly); + if(this.autoGrow) { + editor.setOption('maxLines', Infinity); + } editor.on('change', () => { const content = editor.getValue(); diff --git a/src/renderer/components/modals/create-note-modal/CreateNoteModal.html b/src/renderer/components/modals/create-note-modal/CreateNoteModal.html index 4a6d9d7..f7d8756 100644 --- a/src/renderer/components/modals/create-note-modal/CreateNoteModal.html +++ b/src/renderer/components/modals/create-note-modal/CreateNoteModal.html @@ -69,7 +69,7 @@

Oh sorry, you can't have duplicated :lang="file.language" theme="monokai" width="100%" - height="260" + height="220" > diff --git a/src/renderer/components/notes-list/note-card/NoteCard.html b/src/renderer/components/notes-list/note-card/NoteCard.html index e05b2fb..e02a0a5 100644 --- a/src/renderer/components/notes-list/note-card/NoteCard.html +++ b/src/renderer/components/notes-list/note-card/NoteCard.html @@ -46,7 +46,7 @@

{{value.name}} :lang="value.language" theme="monokai" width="100%" - height="260" + :auto-grow="true" :readOnly="true" >