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: Moved note-related toolbar button next to tag bar

Browse Source
This commit is contained in:
Laurent Cozic 2020-05-17 14:01:42 +01:00
parent d9601f3136
commit e85d4fca5d
6 changed files with 76 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
ElectronClient/gui/Header.jsx
View File

@ -134,6 +134,20 @@ class HeaderComponent extends React.Component {
}
makeButton(key, style, options) {
// TODO: "tab" type is not finished
if (options.type === 'tab') {
const buttons = [];
for (let i = 0; i < options.items.length; i++) {
const item = options.items[i];
buttons.push(this.makeButton(key + item.title, style, Object.assign({}, options, {
title: item.title,
type: 'button',
})));
}
return <span style={{ display: 'flex', flexDirection: 'row' }}>{buttons}</span>;
}
const theme = themeStyle(this.props.theme);
let icon = null;

4
ElectronClient/gui/NoteEditor/NoteBody/AceEditor/Toolbar.tsx
View File

@ -2,7 +2,7 @@ import * as React from 'react';
const ToolbarBase = require('../../../Toolbar.min.js');
const { _ } = require('lib/locale');
const { buildStyle } = require('../../../../theme.js');
const { buildStyle, themeStyle } = require('../../../../theme.js');
interface ToolbarProps {
theme: number,
@ -11,10 +11,12 @@ interface ToolbarProps {
function styles_(props:ToolbarProps) {
return buildStyle('AceEditorToolbar', props.theme, (/* theme:any*/) => {
const theme = themeStyle(props.theme);
return {
root: {
flex: 1,
marginBottom: 0,
borderTop: `1px solid ${theme.dividerColor}`,
},
};
});

1
ElectronClient/gui/NoteEditor/NoteBody/TinyMCE/TinyMCE.tsx
View File

@ -381,6 +381,7 @@ const TinyMCE = (props:NoteBodyEditorProps, ref:any) => {
}
.tox .tox-editor-header {
border-top: 1px solid ${theme.dividerColor};
border-bottom: 1px solid ${theme.dividerColor};
}

48
ElectronClient/gui/NoteEditor/NoteEditor.tsx
View File

@ -33,8 +33,6 @@ const NoteRevisionViewer = require('../NoteRevisionViewer.min');
const TagList = require('../TagList.min.js');
function NoteEditor(props: NoteEditorProps) {
const theme = themeStyle(props.theme);
const [showRevisions, setShowRevisions] = useState(false);
const [titleHasBeenManuallyChanged, setTitleHasBeenManuallyChanged] = useState(false);
const [scrollWhenReady, setScrollWhenReady] = useState<ScrollOptions>(null);
@ -391,6 +389,28 @@ function NoteEditor(props: NoteEditorProps) {
/>;
}
function renderTagBar() {
return props.selectedNoteTags.length ? <TagList items={props.selectedNoteTags} /> : null;
}
function renderTitleBar() {
const titleBarDate = <span style={styles.titleDate}>{time.formatMsToLocal(formNote.user_updated_time)}</span>;
return (
<div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
<input
type="text"
ref={titleInputRef}
placeholder={props.isProvisional ? _('Creating new %s...', formNote.is_todo ? _('to-do') : _('note')) : ''}
style={styles.titleInput}
onChange={onTitleChange}
onKeyDown={onTitleKeydown}
value={formNote.title}
/>
{titleBarDate}
</div>
);
}
const searchMarkers = useSearchMarkers(showLocalSearch, localSearchMarkerOptions, props.searches, props.selectedSearchId);
const editorProps:NoteBodyEditorProps = {
@ -439,12 +459,6 @@ function NoteEditor(props: NoteEditorProps) {
setShowRevisions(false);
}, []);
const tagStyle = {
marginBottom: 10,
};
const tagList = props.selectedNoteTags.length ? <TagList style={tagStyle} items={props.selectedNoteTags} /> : null;
if (showRevisions) {
const theme = themeStyle(props.theme);
@ -475,8 +489,6 @@ function NoteEditor(props: NoteEditorProps) {
/>;
}
const titleBarDate = <span style={styles.titleDate}>{time.formatMsToLocal(formNote.user_updated_time)}</span>;
function renderSearchBar() {
if (!showLocalSearch) return false;
@ -509,19 +521,9 @@ function NoteEditor(props: NoteEditorProps) {
return (
<div style={styles.root} onDrop={onDrop}>
<div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
{tagList}
<div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', paddingBottom: 5, borderBottomWidth: 1, borderBottomColor: theme.dividerColor, borderBottomStyle: 'solid' }}>
{renderNoteToolbar()}
<input
type="text"
ref={titleInputRef}
placeholder={props.isProvisional ? _('Creating new %s...', formNote.is_todo ? _('to-do') : _('note')) : ''}
style={styles.titleInput}
onChange={onTitleChange}
onKeyDown={onTitleKeydown}
value={formNote.title}
/>
{titleBarDate}
{renderTitleBar()}
<div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
{renderNoteToolbar()}{renderTagBar()}
</div>
<div style={{ display: 'flex', flex: 1 }}>
{editor}

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

@ -84,33 +84,40 @@ function useToolbarItems(props:NoteToolbarProps) {
});
}
if (watchedNoteFiles.indexOf(note.id) >= 0) {
toolbarItems.push({
tooltip: _('Click to stop external editing'),
title: _('Watching...'),
iconName: 'fa-external-link',
onClick: () => {
onButtonClick({ name: 'stopExternalEditing' });
},
});
} else {
toolbarItems.push({
tooltip: _('Edit in external editor'),
iconName: 'fa-external-link',
onClick: () => {
onButtonClick({ name: 'startExternalEditing' });
},
});
}
toolbarItems.push({
tooltip: _('Tags'),
iconName: 'fa-tags',
tooltip: _('Note properties'),
iconName: 'fa-info-circle',
onClick: () => {
onButtonClick({ name: 'setTags' });
dispatch({
type: 'WINDOW_COMMAND',
name: 'commandNoteProperties',
noteId: note.id,
onRevisionLinkClick: () => {
onButtonClick({ name: 'showRevisions' });
},
});
},
});
if (watchedNoteFiles.indexOf(note.id) >= 0) {
// toolbarItems.push({
// tooltip: _('Click to stop external editing'),
// title: _('Watching...'),
// iconName: 'fa-external-link',
// onClick: () => {
// onButtonClick({ name: 'stopExternalEditing' });
// },
// });
} else {
// toolbarItems.push({
// tooltip: _('Edit in external editor'),
// iconName: 'fa-external-link',
// onClick: () => {
// onButtonClick({ name: 'startExternalEditing' });
// },
// });
}
if (note.is_todo) {
const item:any = {
iconName: 'fa-clock-o',
@ -128,17 +135,10 @@ function useToolbarItems(props:NoteToolbarProps) {
}
toolbarItems.push({
tooltip: _('Note properties'),
iconName: 'fa-info-circle',
tooltip: _('Tags'),
iconName: 'fa-tags',
onClick: () => {
dispatch({
type: 'WINDOW_COMMAND',
name: 'commandNoteProperties',
noteId: note.id,
onRevisionLinkClick: () => {
onButtonClick({ name: 'showRevisions' });
},
});
onButtonClick({ name: 'setTags' });
},
});

2
ElectronClient/gui/Toolbar.jsx
View File

@ -9,7 +9,7 @@ class ToolbarComponent extends React.Component {
const theme = themeStyle(this.props.theme);
const style = Object.assign({
height: theme.toolbarHeight,
// height: theme.toolbarHeight,
display: 'flex',
flexDirection: 'row',
borderBottom: `1px solid ${theme.dividerColor}`,