Merge pull request #34 from hiro0218/feature/redesign-toolbar

Feature/redesign toolbar
hiro0218 · Jun 10, 2018 · a51525c · a51525c
2 parents 9872cdb + fbe8d8c
commit a51525c
Show file tree

Hide file tree

Showing 12 changed files with 149 additions and 225 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -34,6 +34,7 @@
     "lodash": "^4.17.10",
     "vue": "^2.5.16",
     "vue-electron": "^1.0.6",
+    "vue-material": "^1.0.0-beta-10.2",
     "vue-router": "^3.0.1",
     "vuex": "^3.0.1"
   },

diff --git a/screenshot.png b/screenshot.png
diff --git a/src/index.ejs b/src/index.ejs
@@ -9,6 +9,7 @@
         require('module').globalPaths.push('<%= htmlWebpackPlugin.options.nodeModules.replace(/\\/g, '\\\\') %>')
       </script>
     <% } %>
+    <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:400,700,400italic|Material+Icons">
   </head>
   <body>
     <div id="app"></div>

diff --git a/src/renderer/assets/style/common/_variables.scss b/src/renderer/assets/style/common/_variables.scss
@@ -2,7 +2,7 @@
 // Font
 // -------------------------
 $font-family-sansSerif:        -apple-system, BlinkMacSystemFont, "Noto Sans JP", YuGothic, "Yu Gothic", "游ゴシック体", "游ゴシック", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, Emoji, sans-serif !default;
-$font-family-monospace:        "Source Code Pro", #{$font-family-sansSerif}, Emoji, monospace !default;
+$font-family-monospace:        Roboto, #{$font-family-sansSerif}, Emoji, monospace !default;
 $font-weight-base:             normal;
 
 $font-size-base:               16px;

diff --git a/src/renderer/assets/style/plugin/_github-markdown.scss b/src/renderer/assets/style/plugin/_github-markdown.scss
@@ -147,7 +147,7 @@
 .markdown-body code,
 .markdown-body kbd,
 .markdown-body pre {
-  font-family: monospace, monospace;
+  font-family: $font-family-monospace, monospace;
   font-size: 1em;
 }
 
@@ -312,7 +312,6 @@
 .markdown-body pre {
   margin-top: 0;
   margin-bottom: 0;
-  font: 12px Consolas, "Liberation Mono", Menlo, Courier, monospace;
 }
 
 .markdown-body .octicon {
@@ -653,7 +652,6 @@
 .markdown-body kbd {
   display: inline-block;
   padding: 3px 5px;
-  font: 11px Consolas, "Liberation Mono", Menlo, Courier, monospace;
   line-height: 10px;
   color: #555;
   vertical-align: middle;

diff --git a/src/renderer/components/Editor.vue b/src/renderer/components/Editor.vue
@@ -4,7 +4,8 @@
       <codemirror ref="editor"
                   :code="code"
                   :options="editorOptions"
-                  @input="onEditorCodeChange"/>
+                  @input="onEditorCodeChange"
+                  @changes="checkEditorHistory"/>
     </div>
     <div v-if="isPreview == true" class="preview">
       <div class="markdown-body" v-html="input"/>
@@ -55,6 +56,7 @@ export default {
   },
   mounted() {
     Menu.togglePreview = this.togglePreview;
+    Menu.toggleToolbar = this.toggleToolbar;
     Menu.newFile = this.newFile;
     Menu.openFile = this.openFile;
     Menu.saveFile = this.saveFile;
@@ -64,15 +66,35 @@ export default {
     this.openLinkExternal();
   },
   methods: {
+    checkEditorHistory() {
+      let { undo, redo } = this.editor.historySize();
+      this.$store.dispatch('setCanUndo', undo > 0);
+      this.$store.dispatch('setCanRedo', redo > 0);
+    },
     togglePreview() {
       this.$store.dispatch('updateIsPreview', !this.isPreview);
     },
+    toggleToolbar() {
+      this.$store.dispatch('toggleToolbar');
+    },
     onEditorCodeChange: debounce(function(newCode) {
       this.code = newCode;
       if (this.isPreview) {
         this.input = this.markdown.render(newCode);
       }
     }, 200),
+    undo() {
+      this.editor.undo();
+    },
+    redo() {
+      this.editor.redo();
+    },
+    canUndo() {
+      return this.editor.historySize().undo > 0;
+    },
+    canRedo() {
+      return this.editor.historySize().redo > 0;
+    },
     openDialog(type, msg) {
       const remote = this.$electron.remote;
       const dialog = remote.dialog;

diff --git a/src/renderer/components/Main.vue b/src/renderer/components/Main.vue
@@ -1,21 +1,25 @@
 <template>
-  <div>
-    <editor ref="mii-editor"/>
+  <div class="container">
+    <toolbar/>
+    <editor ref="miiEditor"/>
   </div>
 </template>
 
 <script>
+import Toolbar from '@/components/Toolbar';
 import Editor from '@/components/Editor';
 
 export default {
   name: 'MiiMain',
   components: {
+    Toolbar,
     Editor,
   },
-  mounted: function() {},
-  methods: {},
 };
 </script>
 
 <style scoped>
+.container {
+  display: flex;
+}
 </style>