Skip to content

Commit e8cb82e

Browse files
CoreParadoxCoreParadox
committed
Added a settings panel to edit the config easier, fixed some bugs where the config wasn't saved/loaded/referenced properly. restrucured NavBar to allow for swappable items (using slots) moved all file events to Home from NavBar.
1 parent c5787c6 commit e8cb82e

File tree

7 files changed

+210
-102
lines changed

7 files changed

+210
-102
lines changed

‎public/style.css‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ body {
1111
border-radius: 5px;
1212
}
1313

14-
#app #home .editor .CodeMirror {
14+
#app #home #settings .editor .CodeMirror {
1515
font-family: 'Avenir', Helvetica, Arial, sans-serif;
1616
-webkit-font-smoothing: antialiased;
1717
-moz-osx-font-smoothing: grayscale;
@@ -82,4 +82,17 @@ body {
8282
#NavBar select:focus,
8383
#NavBar option:focus{
8484
outline: none;
85+
}
86+
87+
.btn {
88+
background-color: #2c3e50; /* Green */
89+
border-radius: 5px;
90+
color: white;
91+
padding: 5px;
92+
text-align: center;
93+
text-decoration: none;
94+
}
95+
96+
#settings #container{
97+
padding:10px;
8598
}

‎src/components/Editor.vue‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ export default class Editor extends VueEmitter {
4545
}
4646
4747
emitFileLoaded() {
48-
this.rootEmit("fileLoaded", path.parse(this.filePath()).name);
48+
this.$emit("fileLoaded", path.parse(this.filePath()).name);
4949
}
5050
5151
registerEvents() {
@@ -63,8 +63,6 @@ export default class Editor extends VueEmitter {
6363
this.registerRootEvent("closing", _ => this.Save(_ => this.$emit("finished")));
6464
}
6565
66-
67-
6866
registerRootEvent(eventName, callback) {
6967
this.$root.$on(eventName, callback);
7068
}
@@ -81,7 +79,7 @@ export default class Editor extends VueEmitter {
8179
private StartSaveWatch() {
8280
if (this.saveWatcher) clearInterval(this.saveWatcher);
8381
this.saveWatcher = setInterval(_ => {
84-
if (!this.internalEditor.isClean())
82+
if (this.internalEditor !== null && !this.internalEditor.isClean())
8583
this.Save(_ => this.internalEditor.markClean());
8684
}, 5000);
8785
}

‎src/components/NavBar.vue‎

Lines changed: 3 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -11,75 +11,20 @@
1111
<a v-on:click="pin()">
1212
<i class="fas fa-thumbtack"></i>
1313
</a>
14+
<slot name="controls"></slot>
1415
</div>
15-
<input v-on:change="updateFileName" v-model="fileName" type="text" name="fileName">
16-
<select
17-
v-on:change="changeFile()"
18-
v-model="SelectedFile"
19-
id="filePicker"
20-
style="margin-left:20px;"
21-
name="selectedFile"
22-
>
23-
<option
24-
v-for="file in Files()"
25-
:value="file.value"
26-
:key="file.id"
27-
:id="file.id"
28-
>{{ file.value }}</option>
29-
</select>
30-
<a v-on:click="newNote()">
31-
<i class="fas fa-file-medical"></i>
32-
</a>
33-
<a v-on:click="deleteNote()">
34-
<i class="fas fa-trash"></i>
35-
</a>
16+
<slot></slot>
3617
</div>
3718
</template>
3819

3920
<script lang="ts">
4021
import { Component, Prop, Vue } from "vue-property-decorator";
41-
import {unlink, writeFile, readdirSync} from "fs";
42-
import * as path from "path";
43-
import Configuration from "@/utility/Configuration";
4422
import VueEmitter from "@/utility/VueEmitter";
4523
const remote = require("electron").remote;
46-
const defaultNoteText =
47-
"# Welcome to your new note!\nLet's write something awesome.";
4824
4925
@Component
5026
export default class NavBar extends VueEmitter {
51-
private fileName: string = "";
52-
private SelectedFile = "";
53-
private isMaximized = false;
54-
private configuration;
55-
56-
private Files() {
57-
return readdirSync("notes").map((v, i) => {
58-
return { id: i, value: v };
59-
});
60-
}
61-
62-
public mounted() {
63-
Configuration.getConfig().then(c => {
64-
this.configuration = c;
65-
this.registerEvents();
66-
});
67-
}
68-
69-
private updateFileName() {
70-
this.rootEmit("fileNameUpdated", this.fileName);
71-
}
72-
private changeFile() {
73-
this.rootEmit("fileChange", this.SelectedFile);
74-
}
75-
76-
private registerEvents() {
77-
this.$root.$on("fileLoaded", f => {
78-
console.log("Test");
79-
this.fileName = f;
80-
this.SelectedFile = this.fileName + ".md";
81-
});
82-
}
27+
private isMaximized = false;
8328
8429
private restore() {
8530
this.isMaximized
@@ -102,29 +47,6 @@ export default class NavBar extends VueEmitter {
10247
this.rootEmit("closing");
10348
}
10449
105-
private newNote() {
106-
let FileName = `${Date.now()}.md`;
107-
writeFile(
108-
path.join(new Configuration().notePath, FileName),
109-
defaultNoteText,
110-
"",
111-
_ => {
112-
this.setFileName(FileName);
113-
}
114-
);
115-
}
116-
117-
private deleteNote() {
118-
confirm(`This will permantly delete "${this.SelectedFile}". Continue?`);
119-
unlink(path.join(this.configuration.notePath, this.SelectedFile), _ =>
120-
this.setFileName(this.Files()[0].value)
121-
);
122-
}
12350
124-
private setFileName(fileName) {
125-
this.SelectedFile = fileName;
126-
this.fileName = fileName.replace(/.md$/, "");
127-
this.changeFile();
128-
}
12951
}
13052
</script>

‎src/router.ts‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import Vue from 'vue'
22
import Router from 'vue-router'
33
import Home from './views/Home.vue'
4-
4+
import Settings from '@/views/Settings.vue'
55
Vue.use(Router)
66

77
export default new Router({
@@ -11,5 +11,10 @@ export default new Router({
1111
name: 'home',
1212
component: Home
1313
},
14+
{
15+
path:'/settings',
16+
name: 'settings',
17+
component : Settings
18+
}
1419
]
1520
})

‎src/utility/Configuration.ts‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { access, writeFile, constants as fsConstants, readFile, write } from 'fs';
1+
import { access, writeFile, constants as fsConstants, readFile } from 'fs';
22

33

44
export default class Configuration {
@@ -15,7 +15,7 @@ export default class Configuration {
1515
}
1616

1717
static getConfig(){
18-
var stashed = new Configuration
18+
var stashed = new Configuration()
1919
return new Promise<Configuration>((r,e) =>{
2020
access("./config.json", fsConstants.F_OK, (err) => {
2121
if(err) writeFile("./config.json",JSON.stringify(stashed,null,"\t"),ex =>{
@@ -30,13 +30,20 @@ export default class Configuration {
3030

3131
private static readFile(stashed:Configuration, resolve){
3232
readFile("./config.json",(e,b)=>{
33-
var obj = Object.assign(stashed,(b.toJSON()));
33+
var obj = Object.assign(stashed,JSON.parse(b.toString()));
3434
resolve(obj);
3535
})
3636
}
3737

38-
saveConfig(callback){
39-
writeFile("./config.json",JSON.stringify(this, null, "\t"),callback)
38+
saveConfig(callback?){
39+
//TODO: This is a hack, but vue adds some junk data when binding
40+
delete (<any>this).data
41+
delete (<any>this).type
42+
console.log(JSON.stringify(this,null,"\t"))
43+
writeFile("./config.json",JSON.stringify(this, null, "\t"),(e) => {
44+
if(callback) callback(e);
45+
else console.log(e);
46+
})
4047
}
4148
}
4249

‎src/views/Home.vue‎

Lines changed: 89 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,42 @@
11
<template>
2-
<div id="home">
3-
<NavBar></NavBar>
4-
<Editor v-on:finished="handleClose()"></Editor>
5-
</div>
2+
<div id="home">
3+
<NavBar>
4+
<router-link slot="controls" :to="'settings'"><a><i class="fas fa-cog"></i></a></router-link>
5+
<input v-on:change="updateFileName" v-model="fileName" type="text" name="fileName"/>
6+
<select
7+
v-on:change="changeFile"
8+
v-model="SelectedFile"
9+
id="filePicker"
10+
style="margin-left:20px;"
11+
name="selectedFile"
12+
>
13+
<option
14+
v-for="file in Files()"
15+
:value="file.value"
16+
:key="file.id"
17+
:id="file.id"
18+
>{{ file.value }}</option>
19+
</select>
20+
<a v-on:click="newNote()">
21+
<i class="fas fa-file-medical"></i>
22+
</a>
23+
<a v-on:click="deleteNote()">
24+
<i class="fas fa-trash"></i>
25+
</a>
26+
</NavBar>
27+
<Editor v-on:finished="handleClose()" v-on:fileLoaded="setFileName"></Editor>
28+
</div>
629
</template>
730

831
<script lang="ts">
9-
import { Component, Vue } from 'vue-property-decorator';
10-
import Editor from '@/components/Editor.vue'; // @ is an alias to /src
11-
import NavBar from '@/components/NavBar.vue'
32+
import { Component, Vue } from "vue-property-decorator";
33+
import Editor from "@/components/Editor.vue"; // @ is an alias to /src
34+
import NavBar from "@/components/NavBar.vue";
35+
import {unlink, writeFile, readdirSync} from "fs";
36+
import * as path from "path";
37+
import Configuration from "@/utility/Configuration";
38+
const defaultNoteText =
39+
"# Welcome to your new note!\nLet's write something awesome.";
1240
1341
@Component({
1442
components: {
@@ -17,9 +45,60 @@ import NavBar from '@/components/NavBar.vue'
1745
}
1846
})
1947
export default class Home extends Vue {
20-
handleClose(){
21-
console.log("Closing");
22-
const remote = require('electron').remote;
48+
private fileName: string = "";
49+
private SelectedFile = "";
50+
51+
private configuration = new Configuration();
52+
53+
Files() {
54+
return readdirSync(this.configuration.notePath).map((v, i) => {
55+
return { id: i, value: v };
56+
});
57+
}
58+
59+
public mounted() {
60+
Configuration.getConfig().then(c => {
61+
this.configuration = c;
62+
});
63+
}
64+
65+
updateFileName() {
66+
this.$root.$emit("fileNameUpdated", this.fileName);
67+
}
68+
69+
changeFile() {
70+
this.$root.$emit("fileChange", this.SelectedFile);
71+
}
72+
73+
newNote() {
74+
let FileName = `${Date.now()}.md`;
75+
writeFile(
76+
path.join(this.configuration.notePath, FileName),
77+
defaultNoteText,
78+
"",
79+
_ => {
80+
this.setFileName(FileName);
81+
this.changeFile();
82+
}
83+
);
84+
}
85+
86+
deleteNote() {
87+
confirm(`This will permantly delete "${this.SelectedFile}". Continue?`);
88+
unlink(path.join(this.configuration.notePath, this.SelectedFile), _ =>{
89+
this.setFileName(this.Files()[0].value)
90+
this.changeFile();
91+
});
92+
}
93+
94+
setFileName(fileName) {
95+
var rawFileName=fileName.replace(/.md$/, "");
96+
this.SelectedFile = rawFileName+".md";
97+
this.fileName = rawFileName
98+
}
99+
100+
handleClose() {
101+
const remote = require("electron").remote;
23102
let w = remote.getCurrentWindow();
24103
w.close();
25104
}

0 commit comments

Comments
 (0)