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

Commit 962ecab

probilMax Lyashuk

authored and

Max Lyashuk

committed

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

1 parent 5cfb0e9 commit 962ecabCopy full SHA for 962ecab

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
`@@ -16,20 +16,39 @@ export default {`
`16`	`16`	`height: true,`
`17`	`17`	`width: true,`
`18`	`18`	`readOnly: Boolean,`
	`19`	`+ autoGrow: Boolean,`
`19`	`20`	`},`
`20`	`21`	`data() {`
`21`	`22`	`return {`
`22`	`23`	`editor: null,`
`23`	`24`	`contentBackup: '',`
	`25`	`+ fullScreen: false,`
`24`	`26`	`};`
`25`	`27`	`},`
	`28`	`+ computed: {`
	`29`	`+ editorHeight() {`
	`30`	`+ if (this.autoGrow && !this.fullScreen) return undefined;`
	`31`	`+ if (this.height && !this.fullScreen) return this.px(this.height);`
	`32`	`+ return '100%'`
	`33`	`+ },`
	`34`	`+ editorStyle() {`
	`35`	`+ return {`
	`36`	`+ width: this.width && !this.fullScreen ? this.px(this.width) : '100%',`
	`37`	`+ height: this.editorHeight,`
	`38`	`+ }`
	`39`	`+ },`
	`40`	`+ },`
`26`	`41`	`methods: {`
`27`	`42`	`px(n) {`
`28`	`43`	`if (/^\d*$/.test(n)) {`
`29`	`44`	return `${n}px`;
`30`	`45`	`}`
`31`	`46`	`return n;`
`32`	`47`	`},`
	`48`	`+ toggleFullscreen() {`
	`49`	`+ this.fullScreen = !this.fullScreen;`
	`50`	`+ this.editor.resize();`
	`51`	`+ }`
`33`	`52`	`},`
`34`	`53`	`watch: {`
`35`	`54`	`value(val) {`
`@@ -49,7 +68,7 @@ export default {`
`49`	`68`
`50`	`69`	`require('brace/ext/emmet');`
`51`	`70`
`52`		`- const editor = (vm.editor = ace.edit(this.$el));`
	`71`	`+ const editor = (vm.editor = ace.edit(this.$refs.editor));`
`53`	`72`
`54`	`73`	`this.$emit('init', editor);`
`55`	`74`
`@@ -61,12 +80,14 @@ export default {`
`61`	`80`	`editor.setShowPrintMargin(false);`
`62`	`81`
`63`	`82`	`if (!this.readOnly) {`
`64`		`- editor.setOption('minLines', 15);`
`65`	`83`	`editor.setValue(this.value, 1);`
`66`	`84`	`} else {`
`67`	`85`	`editor.setValue(this.code, 1);`
`68`	`86`	`}`
`69`	`87`	`editor.setReadOnly(this.readOnly);`
	`88`	`+ if(this.autoGrow) {`
	`89`	`+ editor.setOption('maxLines', Infinity);`
	`90`	`+ }`
`70`	`91`
`71`	`92`	`editor.on('change', () => {`
`72`	`93`	`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
`@@ -69,7 +69,7 @@ <h2 class="text-red" v-if="displayDupError">Oh sorry, you can't have duplicated`
`69`	`69`	`:lang="file.language"`
`70`	`70`	`theme="monokai"`
`71`	`71`	`width="100%"`
`72`		`- height="260"`
	`72`	`+ height="220"`
`73`	`73`	`></editor>`
`74`	`74`	`</b-field>`
`75`	`75`	`</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 962ecab

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