Desktop: Fixes #3810: Only disable relevant toolbar buttons when editor is read-only

.eslintignore

@@ -164,6 +164,7 @@ ElectronClient/gui/style/StyledInput.js
 ElectronClient/gui/style/StyledTextInput.js
 ElectronClient/gui/ToggleEditorsButton/styles/index.js
 ElectronClient/gui/ToggleEditorsButton/ToggleEditorsButton.js
+ElectronClient/gui/ToolbarBase.js
 ElectronClient/gui/ToolbarButton/styles/index.js
 ElectronClient/gui/ToolbarButton/ToolbarButton.js
 ReactNativeClient/lib/AsyncActionQueue.js

.gitignore

@@ -157,6 +157,7 @@ ElectronClient/gui/style/StyledInput.js
 ElectronClient/gui/style/StyledTextInput.js
 ElectronClient/gui/ToggleEditorsButton/styles/index.js
 ElectronClient/gui/ToggleEditorsButton/ToggleEditorsButton.js
+ElectronClient/gui/ToolbarBase.js
 ElectronClient/gui/ToolbarButton/styles/index.js
 ElectronClient/gui/ToolbarButton/ToolbarButton.js
 ReactNativeClient/lib/AsyncActionQueue.js

ElectronClient/gui/NoteEditor/NoteBody/CodeMirror/CodeMirror.tsx

@@ -372,37 +372,37 @@ function CodeMirror(props: NoteBodyEditorProps, ref: any) {
 				/* be applied to the viewer. */
 				padding-bottom: 400px !important;
 			}
-			
+
 			.cm-header-1 {
 				font-size: 1.5em;
 			}
-			
+
 			.cm-header-2 {
 				font-size: 1.3em;
 			}
-			
+
 			.cm-header-3 {
 				font-size: 1.1em;
 			}
-			
+
 			.cm-header-4, .cm-header-5, .cm-header-6 {
 				font-size: 1em;
 			}
-			
+
 			.cm-header-1, .cm-header-2, .cm-header-3, .cm-header-4, .cm-header-5, .cm-header-6 {
 				line-height: 1.5em;
 			}
-			
+
 			.cm-search-marker {
 				background: ${theme.searchMarkerBackgroundColor};
 				color: ${theme.searchMarkerColor} !important;
 			}
-			
+
 			.cm-search-marker-selected {
 				background: ${theme.selectedColor2};
 				color: ${theme.color2} !important;
 			}
-			
+
 			.cm-search-marker-scrollbar {
 				background: ${theme.searchMarkerBackgroundColor};
 				-moz-box-sizing: border-box;
@@ -568,8 +568,6 @@ function CodeMirror(props: NoteBodyEditorProps, ref: any) {
 		editorRef.current.refresh();
 	}, [rootSize, styles.editor, props.visiblePanes]);
 
-	const editorReadOnly = props.visiblePanes.indexOf('editor') < 0;
-
 	function renderEditor() {
 
 		return (
@@ -612,7 +610,6 @@ function CodeMirror(props: NoteBodyEditorProps, ref: any) {
 				<Toolbar
 					themeId={props.themeId}
 					dispatch={props.dispatch}
-					disabled={editorReadOnly}
 				/>
 				{props.noteToolbar}
 			</div>

ElectronClient/gui/NoteEditor/NoteBody/CodeMirror/Toolbar.tsx

@@ -1,13 +1,11 @@
 import * as React from 'react';
-import CommandService from '../../../../lib/services/CommandService';
+import CommandService from 'lib/services/CommandService';
-
+import ToolbarBase from '../../../ToolbarBase';
-const ToolbarBase = require('../../../Toolbar.min.js');
 const { buildStyle } = require('lib/theme');
 
 interface ToolbarProps {
 	themeId: number,
 	dispatch: Function,
-	disabled: boolean,
 }
 
 function styles_(props:ToolbarProps) {
@@ -49,5 +47,5 @@ export default function Toolbar(props:ToolbarProps) {
 		cmdService.commandToToolbarButton('toggleEditors'),
 	];
 
-	return <ToolbarBase disabled={props.disabled} style={styles.root} items={toolbarItems} />;
+	return <ToolbarBase style={styles.root} items={toolbarItems} />;
 }

ElectronClient/gui/NoteToolbar/NoteToolbar.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { useEffect, useState } from 'react';
 import CommandService from '../../lib/services/CommandService';
+import ToolbarBase from '../ToolbarBase';
 const { connect } = require('react-redux');
 const { buildStyle } = require('lib/theme');
-const Toolbar = require('../Toolbar.min.js');
 // const Folder = require('lib/models/Folder');
 // const { _ } = require('lib/locale');
 // const { substrWithEllipsis } = require('lib/string-utils');
@@ -40,21 +40,12 @@ function styles_(props:NoteToolbarProps) {
 function NoteToolbar(props:NoteToolbarProps) {
 	const styles = styles_(props);
 	const [toolbarItems, setToolbarItems] = useState([]);
-	// const selectedNoteFolder = Folder.byId(props.folders, props.note.parent_id);
-	// const folderId = selectedNoteFolder ? selectedNoteFolder.id : '';
-	// const folderTitle = selectedNoteFolder && selectedNoteFolder.title ? selectedNoteFolder.title : '';
 
 	const cmdService = CommandService.instance();
 
 	function updateToolbarItems() {
 		const output = [];
 
-		// if (props.watchedNoteFiles.indexOf(props.note.id) >= 0) {
-		// 	output.push(cmdService.commandToToolbarButton('stopExternalEditing'));
-		// } else {
-		// 	output.push(cmdService.commandToToolbarButton('startExternalEditing'));
-		// }
-
 		output.push(cmdService.commandToToolbarButton('editAlarm'));
 		output.push(cmdService.commandToToolbarButton('toggleVisiblePanes'));
 		output.push(cmdService.commandToToolbarButton('showNoteProperties'));
@@ -70,7 +61,7 @@ function NoteToolbar(props:NoteToolbarProps) {
 		};
 	}, []);
 
-	return <Toolbar style={styles.root} items={toolbarItems} />;
+	return <ToolbarBase style={styles.root} items={toolbarItems} />;
 }
 
 const mapStateToProps = (state:any) => {

ElectronClient/gui/ToolbarBase.tsx

@@ -5,11 +5,18 @@ const ToolbarButton = require('./ToolbarButton/ToolbarButton.js').default;
 const ToolbarSpace = require('./ToolbarSpace.min.js');
 const ToggleEditorsButton = require('./ToggleEditorsButton/ToggleEditorsButton.js').default;
 
-class ToolbarComponent extends React.Component {
+interface Props {
+	themeId: number,
+	style: any,
+	items: any[],
+}
+
+class ToolbarBaseComponent extends React.Component<Props, any> {
+
 	render() {
 		const theme = themeStyle(this.props.themeId);
 
-		const style = Object.assign({
+		const style:any = Object.assign({
 			display: 'flex',
 			flexDirection: 'row',
 			boxSizing: 'border-box',
@@ -18,15 +25,15 @@ class ToolbarComponent extends React.Component {
 			paddingRight: theme.mainPadding,
 		}, this.props.style);
 
-		const groupStyle = {
+		const groupStyle:any = {
 			display: 'flex',
 			flexDirection: 'row',
 			boxSizing: 'border-box',
 		};
 
-		const leftItemComps = [];
+		const leftItemComps:any[] = [];
-		const centerItemComps = [];
+		const centerItemComps:any[] = [];
-		const rightItemComps = [];
+		const rightItemComps:any[] = [];
 
 		if (this.props.items) {
 			for (let i = 0; i < this.props.items.length; i++) {
@@ -45,8 +52,6 @@ class ToolbarComponent extends React.Component {
 					o
 				);
 
-				if (this.props.disabled) props.disabled = true;
-
 				if (o.name === 'toggleEditors') {
 					rightItemComps.push(<ToggleEditorsButton
 						key={o.name}
@@ -79,10 +84,8 @@ class ToolbarComponent extends React.Component {
 	}
 }
 
-const mapStateToProps = state => {
+const mapStateToProps = (state:any) => {
 	return { themeId: state.settings.theme };
 };
 
-const Toolbar = connect(mapStateToProps)(ToolbarComponent);
+export default connect(mapStateToProps)(ToolbarBaseComponent);
-
-module.exports = Toolbar;