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"
>