Switched to FontAwesome for the icons, and implemented editor/viewer toggle

ElectronClient/app/gui/Header.jsx

@@ -13,9 +13,15 @@ class HeaderComponent extends React.Component {
 	makeButton(key, style, options) {
 		let icon = null;
 		if (options.iconName) {
-			icon = <i style={{fontSize: style.fontSize * 1.4, marginRight: 5}} className={"icon " + options.iconName}></i>
+			const iconStyle = {
+				fontSize: Math.round(style.fontSize * 1.4),
+				color: style.color
+			};
+			if (options.title) iconStyle.marginRight = 5;
+			icon = <i style={iconStyle} className={"fa " + options.iconName}></i>
 		}
-		return <a className="button" style={style} key={key} href="#" onClick={() => {options.onClick()}}>{icon}{options.title}</a>
+
+		return <a className="button" style={style} key={key} href="#" onClick={() => {options.onClick()}}>{icon}{options.title ? options.title : ''}</a>
 	}
 
 	render() {

ElectronClient/app/gui/MainScreen.jsx

@@ -16,8 +16,24 @@ const { bridge } = require('electron').remote.require('./bridge');
 class MainScreenComponent extends React.Component {
 
 	componentWillMount() {
-		this.setState({ newNotePromptVisible: false });
-		this.setState({ newFolderPromptVisible: false });
+		this.setState({
+			newNotePromptVisible: false,
+			newFolderPromptVisible: false,
+			noteVisiblePanes: ['editor', 'viewer'],
+		});
+	}
+
+	toggleVisiblePanes() {
+		let panes = this.state.noteVisiblePanes.slice();
+		if (panes.length === 2) {
+			panes = ['editor'];
+		} else if (panes.indexOf('editor') >= 0) {
+			panes = ['viewer'];
+		} else if (panes.indexOf('viewer') >= 0) {
+			panes = ['editor', 'viewer'];
+		}
+
+		this.setState({ noteVisiblePanes: panes });
 	}
 
 	render() {
@@ -62,16 +78,23 @@ class MainScreenComponent extends React.Component {
 				onClick: () => {
 					this.setState({ newNotePromptVisible: true });
 				},
-				iconName: 'ion-document',
+				iconName: 'fa-file-o',
 			}, {
 				title: _('New notebook'),
 				onClick: () => {
 					this.setState({ newFolderPromptVisible: true });
 				},
-				iconName: 'ion-android-folder-open',
+				iconName: 'fa-folder-o',
+			}, {
+				title: _('Layout'),
+				onClick: () => {
+					this.toggleVisiblePanes();
+				},
+				iconName: 'fa-columns',
 			},
 		];
 
+
 		const newNotePromptOnClose = async (answer) => {
 			if (answer) {
 				const folderId = Setting.value('activeFolderId');
@@ -118,7 +141,7 @@ class MainScreenComponent extends React.Component {
 				<Header style={headerStyle} showBackButton={false} buttons={headerButtons} />
 				<SideBar style={sideBarStyle} />
 				<NoteList itemHeight={40} style={noteListStyle} />
-				<NoteText style={noteTextStyle} />
+				<NoteText style={noteTextStyle} visiblePanes={this.state.noteVisiblePanes} />
 			</div>
 		);
 	}

ElectronClient/app/gui/NoteText.jsx

@@ -287,6 +287,7 @@ class NoteTextComponent extends React.Component {
 		const note = this.state.note;
 		const body = note ? note.body : '';
 		const theme = themeStyle(this.props.theme);
+		const visiblePanes = this.props.visiblePanes || ['editor', 'viewer'];
 
 		if (!note) {
 			const emptyDivStyle = Object.assign({
@@ -317,6 +318,19 @@ class NoteTextComponent extends React.Component {
 			fontSize: theme.fontSize + 'px',
 		};
 
+		if (visiblePanes.indexOf('viewer') < 0) {
+			// Note: setting webview.display to "none" is currently not supported due
+			// to this bug: https://github.com/electron/electron/issues/8277
+			// So instead setting the width 0.
+			viewerStyle.width = 0;
+			editorStyle.width = style.width;
+		}
+
+		if (visiblePanes.indexOf('editor') < 0) {
+			editorStyle.display = 'none';
+			viewerStyle.width = style.width;
+		}
+
 		if (this.state.webviewReady) {
 			const mdOptions = {
 				onResourceLoaded: () => {
@@ -328,7 +342,12 @@ class NoteTextComponent extends React.Component {
 			this.webview_.send('setHtml', html);
 		}
 
-		const viewer = <webview style={viewerStyle} nodeintegration="1" src="note-content.html" ref={(elem) => { this.webview_ref(elem); } } />
+		const viewer = <webview
+			style={viewerStyle}
+			nodeintegration="1"
+			src="note-content.html"
+			ref={(elem) => { this.webview_ref(elem); } }
+		/>
 
 		const editorRootStyle = Object.assign({}, editorStyle);
 		delete editorRootStyle.width;

ElectronClient/app/gui/SideBar.jsx

@@ -64,6 +64,18 @@ class SideBarComponent extends React.Component {
 				marginRight: 5,
 				cursor: 'default',
 			},
+			syncReport: {
+				fontFamily: theme.fontFamily,
+				fontSize: Math.round(theme.fontSize * .9),
+				color: theme.color2,
+				opacity: .8,
+				display: 'flex',
+				alignItems: 'left',
+				justifyContent: 'top',
+				marginTop: 10,
+				marginLeft: 5,
+				marginRight: 5,
+			},
 		};
 
 		return style;
@@ -170,7 +182,7 @@ class SideBarComponent extends React.Component {
 
 		items.push(this.synchronizeButton(this.props.syncStarted ? _('Cancel') : _('Synchronise')));
 
-		items.push(<div key='sync_report'>{syncReportText}</div>);
+		items.push(<div style={this.style().syncReport} key='sync_report'>{syncReportText}</div>);
 
 		return (
 			<div className="side-bar" style={style}>

ElectronClient/app/index.html

@@ -4,7 +4,7 @@
 		<meta charset="UTF-8">
 		<title>Joplin</title>
 		<link rel="stylesheet" href="style.css">
-		<link rel="stylesheet" href="css/ionicons.min.css">
+		<link rel="stylesheet" href="css/font-awesome.min.css">
 	</head>
 	<body>
 		<div id="react-root"></div>