self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2024-12-24 10:27:10 +02:00
Code Issues Releases Activity

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

Browse Source
This commit is contained in:
Laurent Cozic 2020-09-23 10:21:24 +01:00
parent 59599d318c
commit b6779a8074
6 changed files with 30 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.eslintignore
View File

@ -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

1
.gitignore vendored
View File

@ -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

19
ElectronClient/gui/NoteEditor/NoteBody/CodeMirror/CodeMirror.tsx
View File

@ -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>

8
ElectronClient/gui/NoteEditor/NoteBody/CodeMirror/Toolbar.tsx
View File

@ -1,13 +1,11 @@
import * as React from 'react';
import CommandService from '../../../../lib/services/CommandService';
const ToolbarBase = require('../../../Toolbar.min.js');
import CommandService from 'lib/services/CommandService';
import ToolbarBase from '../../../ToolbarBase';
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} />;
}

13
ElectronClient/gui/NoteToolbar/NoteToolbar.tsx
View File

@ -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) => {

27
ElectronClient/gui/Toolbar.jsx → ElectronClient/gui/ToolbarBase.tsx
View File

@ -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 centerItemComps = [];
const rightItemComps = [];
const leftItemComps:any[] = [];
const centerItemComps:any[] = [];
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);
module.exports = Toolbar;
export default connect(mapStateToProps)(ToolbarBaseComponent);