Adjust font size

.babelrc

@@ -5,7 +5,8 @@
         "node": 8,
         "modules": false
       }
-    }]
+    }],
+    "flow"
   ],
   "env": {
     "main": {
@@ -15,7 +16,8 @@
             "node": 8,
             "modules": false
           }
-        }]
+        }],
+        "flow"
       ]
     },
     "renderer": {
@@ -29,7 +31,8 @@
         }],
         "react",
         "react-optimize",
-        "stage-0"
+        "stage-0",
+        "flow"
       ],
       "plugins": [
         "transform-decorators-legacy",
@@ -38,7 +41,7 @@
       ]
     },
     "test": {
-      "presets": [["env"], "react"]
+      "presets": [["env"], "react", "flow"]
     }
   },
   "plugins": ["transform-runtime"]

.eslintrc.yml

@@ -17,6 +17,7 @@ plugins:
   - jsx-a11y
   - import
   - jest
+  - flowtype
 rules:
   no-console:
     - error

.flowconfig

@@ -0,0 +1,12 @@
+[ignore]
+.*/node_modules/.*
+
+[include]
+
+[libs]
+
+[lints]
+
+[options]
+
+[strict]

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "flow.useNPMPackagedFlow": true,
+  "javascript.validate.enable": false
+}

app/views/actions/app.js

@@ -71,3 +71,5 @@ export const CLOSE_UPDATE_NOTIFICATION = 'CLOSE_UPDATE_NOTIFICATION';
 export const CHANGE_IMAGE_HOSTING = 'CHANGE_IMAGE_HOSTING';
 
 export const CHANGE_MEDIUM_CONFIG = 'CHANGE_MEDIUM_CONFIG';
+
+export const CHANGE_FONT_SIZE = 'CHANGE_FONT_SIZE';

app/views/assets/scss/note.scss

@@ -587,7 +587,6 @@
 			font-family: monospace, "BlinkMacSystemFont", "Helvetica Neue", Helvetica, "Microsoft YaHei", "微软雅黑", "Arial", "Lucida Grande", "Segoe UI", Ubuntu, Cantarell, sans-serif;
 			background-color: #fcfdfe;
 			height: 100%;
-			font-size: 1.1rem;
 
 			.CodeMirror-gutters {
 				background-color: #fcfdfe;

app/views/assets/scss/settings.scss

@@ -5,19 +5,65 @@
 	flex: 1 1 auto;
 	@include display-flex;
 	flex-direction: column;
+	position: relative;
+
+	.settings-toc {
+		position: absolute;
+		left: 5%;
+		top: 6rem;
+
+		.ant-anchor-wrapper {
+			background-color: transparent;
+			padding-left: 0;
+			margin-left: 0;
+			padding-right: 4px;
+			margin-right: -4px;
+		}
+
+		.ant-anchor-link {
+			padding: 8px 16px;
+			line-height: 1.2;
+		}
+
+		.ant-anchor-ink {
+			right: 0;
+			left: unset;
+		}
+
+		.ant-anchor-link-title {
+			&:focus {
+				text-decoration: none;
+			}
+		}
+	}
+
 
 	.modules {
 		flex: 1 1 auto;
+		height: 0;
 		overflow-y: auto;
 
+		.setting-tabs {
+			height: 100%;
+			width: 90%;
+			margin: 0 auto;
+			padding: 3rem 0;
+		}
+
 		.settings-module {
-			width: 80%;
-			margin: 1rem auto 2rem auto;
+			width: 75%;
+			margin: 0 5% 0 20%;
+			padding: 2rem 3rem;
+
+			&:first-child {
+				padding-top: 3rem;
+			}
 
 			.module-title {
 				position: relative;
 				border-bottom: 2px solid $lightHeaderBorder;
 				padding-bottom: 0.5rem;
+				margin-bottom: 1.2rem;
 				height: 2em;
 				span {
 					position: absolute;
@@ -27,5 +73,27 @@
 				}
 			}
 		}
+
+		.anticon-question-circle-o {
+			font-size: 18px;
+		}
+	}
+
+	.font-size-row {
+		color: rgba(0, 0, 0, 0.85);
+		height: 3rem;
+		line-height: 3rem;
+		margin-top: 0.6rem;
+
+		.row-label {
+			padding-right: 0.5em;
+			text-align: right;
+		}
+		.number-col {
+			padding-left: 1em;
+		}
+		.ant-slider-rail {
+			background-color: #e5e5e5;
+		}
 	}
 }

app/views/component/cloud/Drive.jsx

@@ -2,7 +2,7 @@ import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { Breadcrumb, message, Icon, Modal } from 'antd';
 import autobind from 'autobind-decorator';
-import { withDispatch } from 'Components/HOC/withDispatch';
+import { withDispatch } from 'Components/HOC/context';
 import Notebooks from './Notebooks';
 import Notes from './Notes';
 import Loading from '../share/Loading';

app/views/component/editor/Editor.jsx

@@ -8,7 +8,7 @@ import 'codemirror/addon/fold/markdown-fold';
 import 'codemirror/mode/markdown/markdown';
 import ReactResizeDetector from 'react-resize-detector';
 import { UPLOAD_IMAGE } from 'Actions/imageHosting';
-import { withDispatch } from 'Components/HOC/withDispatch';
+import { withDispatch } from 'Components/HOC/context';
 import Notification from '../share/Notification';
 import { updateMarkdownHtml } from '../../actions/markdown';
 import { throttle, debounce } from '../../utils/utils';
@@ -45,6 +45,7 @@ export default class Editor extends Component {
     editorWidth: PropTypes.string.isRequired,
     setDrag: PropTypes.func.isRequired,
     editorMode: PropTypes.string.isRequired,
+    fontSize: PropTypes.number.isRequired,
     editorWidthValue: PropTypes.number.isRequired,
     drag: PropTypes.bool.isRequired,
     setPreiewScrollRatio: PropTypes.func.isRequired,
@@ -317,7 +318,7 @@ export default class Editor extends Component {
 
   render() {
     // const { textWidth } = this.state;
-    const { editorWidth, editorMode, editorWidthValue, drag } = this.props;
+    const { editorWidth, editorMode, editorWidthValue, drag, fontSize } = this.props;
     let width = editorWidth;
     let rootClass = '';
     let split = true;
@@ -337,7 +338,7 @@ export default class Editor extends Component {
     return (
       <div
         className={`editor-root ${rootClass} ${noBorder} ${drag ? 'drag' : ''}`}
-        style={{ flexBasis: width }}
+        style={{ flexBasis: width, fontSize: `${fontSize}px` }}
         ref={node => (this.editorRoot = node)}
       >
         <ReactResizeDetector handleWidth onResize={this.handleCodeMirrorResize} />

app/views/component/editor/Markdown.jsx

@@ -42,6 +42,10 @@ export default class Markdown extends Component {
         domain: PropTypes.string.isRequired,
       }).isRequired,
     }).isRequired,
+    editor: PropTypes.shape({
+      fontSize: PropTypes.number.isRequired,
+      previewFontSize: PropTypes.number.isRequired,
+    }).isRequired,
     editorMode: PropTypes.string.isRequired,
   };
 
@@ -136,7 +140,7 @@ export default class Markdown extends Component {
   }
 
   render() {
-    const { markdown: { content, status, html, start, uuid }, editorMode, note, imageHostingConfig } = this.props;
+    const { markdown: { content, status, html, start, uuid }, editorMode, note, imageHostingConfig, editor: { fontSize, previewFontSize } } = this.props;
     const { editorWidth, drag, editorWidthValue } = this.state;
     if (status === 0) {
       return null;
@@ -152,6 +156,7 @@ export default class Markdown extends Component {
           ref={node => (this.root = node)}
         >
           <Editor
+            fontSize={fontSize}
             uuid={uuid}
             note={note}
             imageHostingConfig={imageHostingConfig}
@@ -170,6 +175,7 @@ export default class Markdown extends Component {
             editorMode={editorMode}
             editorWidth={editorWidth}
             editorWidthValue={editorWidthValue}
+            fontSize={previewFontSize}
             ref={node => (this.preview = node)}
           />
         </div>

app/views/component/editor/Preview.jsx

@@ -20,10 +20,15 @@ export default class Preview extends PureComponent {
     html: PropTypes.string.isRequired,
     editorMode: PropTypes.string.isRequired,
     // editorWidth: PropTypes.string.isRequired,
+    fontSize: PropTypes.number.isRequired,
     drag: PropTypes.bool.isRequired,
     editorWidthValue: PropTypes.number.isRequired,
   };
 
+  static defalutProps = {
+    fontSize: 16,
+  };
+
   constructor(props) {
     super(props);
     const bodyWidth = this.getBodyWidth(props);
@@ -46,6 +51,10 @@ export default class Preview extends PureComponent {
         bodyWidth,
       });
     }
+    if (this.props.fontSize !== nextProps.fontSize) {
+      const { fontSize } = nextProps.fontSize;
+      this.webview.send('wv-change-fontsize', fontSize);
+    }
   }
 
   componentDidUpdate() {
@@ -74,12 +83,13 @@ export default class Preview extends PureComponent {
   @autobind
   onWVMessage(event) {
     const channel = event.channel;
-    const { html, editorMode } = this.props;
+    const { html, editorMode, fontSize } = this.props;
     switch (channel) {
       case 'wv-first-loaded': {
         this.webview.send('wv-render-html', {
           html,
           editorMode,
+          fontSize,
         });
         this.setState({
           loading: false,

app/views/component/note/Explorer.jsx

@@ -1,6 +1,6 @@
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { withDispatch } from 'Components/HOC/withDispatch';
+import { withDispatch } from 'Components/HOC/context';
 import Project from './Project';
 import Files from './Files';
 import { pushStateToStorage, mergeStateFromStorage } from '../../utils/utils';

app/views/component/note/Files.jsx

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Input, message, Icon } from 'antd';
 import { ipcRenderer } from 'electron';
-import { withDispatch } from 'Components/HOC/withDispatch';
+import { withDispatch } from 'Components/HOC/context';
 
 import { createFile, renameNote, deletNote, updateNoteDesc, trashBack, updateNoteUploadStatus, UPLOAD_NOTE_ONEDRIVE } from 'Actions/projects';
 import { formatDate, pushStateToStorage, mergeStateFromStorage, checkSpecial } from 'Utils/utils';

app/views/component/note/Note.jsx

@@ -9,7 +9,7 @@ import Loading from '../share/Loading';
 import '../../assets/scss/note.scss';
 
 const NoteWorkspace = (props) => {
-  const { projects, markdown, note, markdownSettings, editorMode, searchStatus, searchResult, exportQueue: { status: exportStatus }, imageHostingConfig } = props;
+  const { projects, markdown, note, markdownSettings, editorMode, searchStatus, searchResult, exportQueue: { status: exportStatus }, imageHostingConfig, editor } = props;
   let projectData;
   if (searchStatus === 0) {
     projectData = projects;
@@ -45,6 +45,7 @@ const NoteWorkspace = (props) => {
           markdown={markdown}
           markdownSettings={markdownSettings}
           editorMode={editorMode}
+          editor={editor}
           note={note}
         />
       </div>
@@ -100,6 +101,10 @@ NoteWorkspace.propTypes = {
     fileUuid: PropTypes.string.isRequired,
     exportStatus: PropTypes.number.isRequired,
   }).isRequired,
+  editor: PropTypes.shape({
+    fontSize: PropTypes.number.isRequired,
+    previewFontSize: PropTypes.number.isRequired,
+  }).isRequired,
   markdownSettings: PropTypes.shape({
     editorWidth: PropTypes.number.isRequired,
   }).isRequired,

app/views/component/note/Project.jsx

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Icon, Input, message } from 'antd';
 import { ipcRenderer } from 'electron';
-import { withDispatch } from 'Components/HOC/withDispatch';
+import { withDispatch } from 'Components/HOC/context';
 import { createProject, deleteProject, renameProject, trashBack, updateNoteUploadStatus } from 'Actions/projects';
 import { beforeSwitchSave, clearMarkdown } from 'Actions/markdown';
 import { switchProject, switchFile, clearWorkspace, updateNoteProjectName } from 'Actions/note';

app/views/component/note/ToolBar.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { ipcRenderer } from 'electron';
 import classnames from 'classnames';
 import { Icon, Tooltip, Menu, Dropdown } from 'antd';
-import { withDispatch } from 'Components/HOC/withDispatch';
+import { withDispatch } from 'Components/HOC/context';
 import Search from '../share/search/Search';
 import SVGIcon from '../share/SVGIcon';