Merge pull request #30 from s10akir/release/0.1.0

Release/0.1.0
s10akir · Nov 21, 2019 · 7d34f1b · 7d34f1b
2 parents bf396e3 + cdc08b5
commit 7d34f1b
Show file tree

Hide file tree

Showing 7 changed files with 71 additions and 43 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -1,16 +1,5 @@
 <template>
-  <v-app>
-    <v-app-bar app>
-      <v-toolbar-title class="headline text-uppercase">
-        <span>Vuetify</span>
-        <span class="font-weight-light">MATERIAL DESIGN</span>
-      </v-toolbar-title>
-      <v-spacer></v-spacer>
-      <v-btn text to="/note/1/edit">
-        <span class="mr-2">Latest Release</span>
-      </v-btn>
-    </v-app-bar>
-
+  <v-app id="main">
     <v-content>
       <router-view />
     </v-content>
@@ -27,4 +16,7 @@ export default {
 // これを書いておかないと常にスクロールバーが出てしまう(Vuetify起因？）
 html
   overflow-y: visible !important
+
+#main, main
+  height: 100vh
 </style>
diff --git a/src/components/MainMenu.vue b/src/components/MainMenu.vue
@@ -1,11 +1,14 @@
 <template>
   <div>
-    <v-btn to="/note/new">New Note</v-btn>
-    <v-list-item-group>
+    <v-btn block depressed tile color="secondary" to="/note/new">
+      New Note
+    </v-btn>
+    <v-list-item-group style="max-height: calc(100vh - 36px); overflow:auto">
       <v-list-item
         v-for="note in this.notes"
         :key="note.id"
         @click="selectNote(note.id)"
+        style="border-bottom: ridge"
       >
         <NoteListItem :note="note" />
       </v-list-item>

diff --git a/src/components/MarkdownPreview.vue b/src/components/MarkdownPreview.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="preview">
-    <h1>{{ title }}</h1>
+    <h1 id="title">{{ title }}</h1>
     <p v-html="render(content)" />
   </div>
 </template>
@@ -30,3 +30,8 @@ export default {
   }
 };
 </script>
+
+<style lang="sass" scoped>
+#title
+  border-bottom: solid 1px
+</style>
diff --git a/src/components/NoteListItem.vue b/src/components/NoteListItem.vue
@@ -1,9 +1,14 @@
 <template>
-  <p>{{ this.note.title }}</p>
+  <div class="note-list-item-header">{{ this.note.title }}</div>
 </template>
 
 <script>
 export default {
   props: ["note"]
 };
 </script>
+
+<style scoped lang="sass">
+.note-list-item-header
+  font-size: 1.2rem
+</style>
diff --git a/src/views/Edit.vue b/src/views/Edit.vue
@@ -1,13 +1,16 @@
 <template>
-  <v-container id="edit" fluid fill-height pa-0>
+  <v-container id="edit" fluid pa-0>
     <v-row no-gutters>
-      <v-col xs="6">
+      <v-col xs="6" id="editor">
         <codemirror v-model="note.content" :options="cmOption" />
       </v-col>
-      <v-col xs="6" class="ma-3">
+      <v-col xs="6" class="pa-3" id="preview">
         <Preview :title="note.title" :content="note.content" />
       </v-col>
     </v-row>
+    <v-toolbar bottom absolute flat width="100%">
+      <v-btn @click="saveNote(note.content)" to="/">BACK</v-btn>
+    </v-toolbar>
   </v-container>
 </template>
 
@@ -79,16 +82,15 @@ export default {
 };
 </script>
 
-<style lang="scss">
-.row {
-  height: 100%;
+<style lang="sass">
+#edit
+  height: calc(100% - 64px)
 
-  .vue-codemirror {
-    height: 100%;
-  }
+#editor, #preview, .row, .vue-codemirror
+  height: 100%
 
-  .CodeMirror {
-    height: 100%;
-  }
-}
+.row
+  .CodeMirror, #preview
+    height: 100%
+    overflow-y: auto
 </style>
diff --git a/src/views/Main.vue b/src/views/Main.vue
@@ -1,20 +1,32 @@
 <template>
   <v-container fluid fill-height pa-0>
     <v-row no-gutters class="fill-height">
-      <v-col md="2">
+      <v-col id="menu-bar" md="2" style="height: 100%">
         <MainMenu :notes="notes" @selectNote="selectNote" />
       </v-col>
-      <v-col md="10" class="d-flex flex-column" fill-height>
-        <v-col class="ma-0">
-          <MarkdownPreview
-            v-if="notes[searchIndex(activeNote)] != undefined"
-            :title="notes[searchIndex(activeNote)].title"
-            :content="notes[searchIndex(activeNote)].content"
-          />
-        </v-col>
-        <v-row class="ma-0">
+      <v-col
+        xs="10"
+        class="d-flex flex-column"
+        style="height: calc(100% - 64px)"
+      >
+        <MarkdownPreview
+          class="preview px-2"
+          v-if="notes[searchIndex(activeNote)] != undefined"
+          :title="notes[searchIndex(activeNote)].title"
+          :content="notes[searchIndex(activeNote)].content"
+        />
+        <v-toolbar
+          class="ma-0"
+          :absolute="true"
+          :bottom="true"
+          :flat="true"
+          :dark="true"
+          width="100%"
+          height="64px"
+          max-height="64px"
+        >
           <NoteMenu :activeNote="activeNote" @deleteNote="deleteNote" />
-        </v-row>
+        </v-toolbar>
       </v-col>
     </v-row>
   </v-container>
@@ -80,3 +92,11 @@ export default {
   }
 };
 </script>
+
+<style lang="sass" scoped>
+#menu-bar
+  border-right: #ccc 1px solid
+
+.preview
+  overflow-y: auto
+</style>
diff --git a/src/views/New.vue b/src/views/New.vue
@@ -9,11 +9,12 @@ export default {
     const db = this.$db;
     const Note = db.getSchema().table("Note");
 
+    const now = new Date();
     const row = Note.createRow({
-      title: "",
+      title: String(now.toLocaleString("ja-JP", { timeXone: "JSC" })),
       content: "",
-      created_at: new Date(),
-      updated_at: new Date()
+      created_at: now,
+      updated_at: now
     });
 
     db.insert()