This repository was archived by the owner on Sep 13, 2023. It is now read-only.

Commit 0e110d9

committed

feat(editor): implement full-screen mode for code editor

1 parent c349f7f commit 0e110d9Copy full SHA for 0e110d9

File tree

5 files changed

+64

-5

lines changed

src/renderer/components
- editor
- modals/create-note-modal
  - CreateNoteModal.html
- notes-list/note-card
  - NoteCard.html

5 files changed

+64

-5

lines changed

`‎src/renderer/components/editor/Editor.html‎`

Lines changed: 14 additions & 1 deletion

Original file line number	Diff line number	Diff line change
`@@ -1 +1,14 @@`
`1`		`-<div id="editor" :style="{width: width ? px(width) : '100%'}"></div>`
	`1`	`+<div class="editor" :class="{'editor--fullscreen': fullScreen}">`
	`2`	`+ <div id="editor" ref="editor" :style="editorStyle"></div>`
	`3`	`+ <a`
	`4`	`+ href="#"`
	`5`	`+ class="editor__fullscreen-toggle"`
	`6`	`+ @click="toggleFullscreen"`
	`7`	`+ v-if="!readOnly"`
	`8`	`+ title="Toggle fullscreen mode"`
	`9`	`+ >`
	`10`	`+ <b-icon`
	`11`	`+ :icon="fullScreen ? 'compress': 'expand'"`
	`12`	`+ ></b-icon>`
	`13`	`+ </a>`
	`14`	`+</div>`

`‎src/renderer/components/editor/Editor.scss‎`

Lines changed: 25 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,25 @@`
	`1`	`+.editor {`
	`2`	`+ position: relative;`
	`3`	`+`
	`4`	`+ &--fullscreen {`
	`5`	`+ position: fixed;`
	`6`	`+ top: 0;`
	`7`	`+ right: 0;`
	`8`	`+ left: 0;`
	`9`	`+ bottom: 0;`
	`10`	`+ width: 100vw;`
	`11`	`+ height: 100vh;`
	`12`	`+ z-index: 10;`
	`13`	`+ }`
	`14`	`+`
	`15`	`+ &__fullscreen-toggle {`
	`16`	`+ position: absolute;`
	`17`	`+ top: 4px;`
	`18`	`+ right: 4px;`
	`19`	`+ z-index: 1;`
	`20`	`+ color: whitesmoke;`
	`21`	`+ }`
	`22`	`+ &__fullscreen-toggle:hover {`
	`23`	`+ color: #bbb;`
	`24`	`+ }`
	`25`	`+}`

`‎src/renderer/components/editor/Editor.vue‎`

Lines changed: 23 additions & 2 deletions

Original file line number	Diff line number	Diff line change
`@@ -15,20 +15,39 @@ export default {`
`15`	`15`	`height: true,`
`16`	`16`	`width: true,`
`17`	`17`	`readOnly: Boolean,`
	`18`	`+ autoGrow: Boolean,`
`18`	`19`	`},`
`19`	`20`	`data() {`
`20`	`21`	`return {`
`21`	`22`	`editor: null,`
`22`	`23`	`contentBackup: '',`
	`24`	`+ fullScreen: false,`
`23`	`25`	`};`
`24`	`26`	`},`
	`27`	`+ computed: {`
	`28`	`+ editorHeight() {`
	`29`	`+ if (this.autoGrow && !this.fullScreen) return undefined;`
	`30`	`+ if (this.height && !this.fullScreen) return this.px(this.height);`
	`31`	`+ return '100%'`
	`32`	`+ },`
	`33`	`+ editorStyle() {`
	`34`	`+ return {`
	`35`	`+ width: this.width && !this.fullScreen ? this.px(this.width) : '100%',`
	`36`	`+ height: this.editorHeight,`
	`37`	`+ }`
	`38`	`+ },`
	`39`	`+ },`
`25`	`40`	`methods: {`
`26`	`41`	`px(n) {`
`27`	`42`	`if (/^\d*$/.test(n)) {`
`28`	`43`	return `${n}px`;
`29`	`44`	`}`
`30`	`45`	`return n;`
`31`	`46`	`},`
	`47`	`+ toggleFullscreen() {`
	`48`	`+ this.fullScreen = !this.fullScreen;`
	`49`	`+ this.editor.resize();`
	`50`	`+ }`
`32`	`51`	`},`
`33`	`52`	`watch: {`
`34`	`53`	`value(val) {`
`@@ -48,7 +67,7 @@ export default {`
`48`	`67`
`49`	`68`	`require('brace/ext/emmet');`
`50`	`69`
`51`		`- const editor = (vm.editor = ace.edit(this.$el));`
	`70`	`+ const editor = (vm.editor = ace.edit(this.$refs.editor));`
`52`	`71`
`53`	`72`	`this.$emit('init', editor);`
`54`	`73`
`@@ -60,12 +79,14 @@ export default {`
`60`	`79`	`editor.setShowPrintMargin(false);`
`61`	`80`
`62`	`81`	`if (!this.readOnly) {`
`63`		`- editor.setOption('minLines', 15);`
`64`	`82`	`editor.setValue(this.value, 1);`
`65`	`83`	`} else {`
`66`	`84`	`editor.setValue(this.code, 1);`
`67`	`85`	`}`
`68`	`86`	`editor.setReadOnly(this.readOnly);`
	`87`	`+ if(this.autoGrow) {`
	`88`	`+ editor.setOption('maxLines', Infinity);`
	`89`	`+ }`
`69`	`90`
`70`	`91`	`editor.on('change', () => {`
`71`	`92`	`const content = editor.getValue();`

`‎src/renderer/components/modals/create-note-modal/CreateNoteModal.html‎`

Lines changed: 1 addition & 1 deletion

Original file line number	Diff line number	Diff line change
`@@ -68,7 +68,7 @@ <h2 class="text-red" v-if="displayDupError">Oh sorry, you can't have duplicated`
`68`	`68`	`:lang="file.language"`
`69`	`69`	`theme="monokai"`
`70`	`70`	`width="100%"`
`71`		`- height="260"`
	`71`	`+ height="220"`
`72`	`72`	`></editor>`
`73`	`73`	`</b-field>`
`74`	`74`	`</div>`

`‎src/renderer/components/notes-list/note-card/NoteCard.html‎`

Lines changed: 1 addition & 1 deletion

Original file line number	Diff line number	Diff line change
`@@ -46,7 +46,7 @@ <h4>{{value.name}}`
`46`	`46`	`:lang="value.language"`
`47`	`47`	`theme="monokai"`
`48`	`48`	`width="100%"`
`49`		`- height="260"`
	`49`	`+ :auto-grow="true"`
`50`	`50`	`:readOnly="true"`
`51`	`51`	`></editor>`
`52`	`52`	`</div>`

0 commit comments

Comments

(0)

Navigation Menu

Search code, repositories, users, issues, pull requests...

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Commit 0e110d9

File tree

5 files changed

5 files changed

`‎src/renderer/components/editor/Editor.html‎`

`‎src/renderer/components/editor/Editor.scss‎`

`‎src/renderer/components/editor/Editor.vue‎`

`‎src/renderer/components/modals/create-note-modal/CreateNoteModal.html‎`

`‎src/renderer/components/notes-list/note-card/NoteCard.html‎`

0 commit comments