From e85d4fca5dfb8b4381129f2db4eecf0b10b30ceb Mon Sep 17 00:00:00 2001 From: Laurent Cozic Date: Sun, 17 May 2020 14:01:42 +0100 Subject: [PATCH] Desktop: Moved note-related toolbar button next to tag bar --- ElectronClient/gui/Header.jsx | 14 ++++ .../NoteEditor/NoteBody/AceEditor/Toolbar.tsx | 4 +- .../NoteEditor/NoteBody/TinyMCE/TinyMCE.tsx | 1 + ElectronClient/gui/NoteEditor/NoteEditor.tsx | 48 +++++++------- .../gui/NoteToolbar/NoteToolbar.tsx | 64 +++++++++---------- ElectronClient/gui/Toolbar.jsx | 2 +- 6 files changed, 76 insertions(+), 57 deletions(-) diff --git a/ElectronClient/gui/Header.jsx b/ElectronClient/gui/Header.jsx index bb129fb6c..429a35c44 100644 --- a/ElectronClient/gui/Header.jsx +++ b/ElectronClient/gui/Header.jsx @@ -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 {buttons}; + } + const theme = themeStyle(this.props.theme); let icon = null; diff --git a/ElectronClient/gui/NoteEditor/NoteBody/AceEditor/Toolbar.tsx b/ElectronClient/gui/NoteEditor/NoteBody/AceEditor/Toolbar.tsx index 2761f19a0..7efef36d8 100644 --- a/ElectronClient/gui/NoteEditor/NoteBody/AceEditor/Toolbar.tsx +++ b/ElectronClient/gui/NoteEditor/NoteBody/AceEditor/Toolbar.tsx @@ -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}`, }, }; }); diff --git a/ElectronClient/gui/NoteEditor/NoteBody/TinyMCE/TinyMCE.tsx b/ElectronClient/gui/NoteEditor/NoteBody/TinyMCE/TinyMCE.tsx index a475a580f..638a01e04 100644 --- a/ElectronClient/gui/NoteEditor/NoteBody/TinyMCE/TinyMCE.tsx +++ b/ElectronClient/gui/NoteEditor/NoteBody/TinyMCE/TinyMCE.tsx @@ -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}; } diff --git a/ElectronClient/gui/NoteEditor/NoteEditor.tsx b/ElectronClient/gui/NoteEditor/NoteEditor.tsx index 045ecd644..5458372da 100644 --- a/ElectronClient/gui/NoteEditor/NoteEditor.tsx +++ b/ElectronClient/gui/NoteEditor/NoteEditor.tsx @@ -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(null); @@ -391,6 +389,28 @@ function NoteEditor(props: NoteEditorProps) { />; } + function renderTagBar() { + return props.selectedNoteTags.length ? : null; + } + + function renderTitleBar() { + const titleBarDate = {time.formatMsToLocal(formNote.user_updated_time)}; + return ( +
+ + {titleBarDate} +
+ ); + } + 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 ? : null; - if (showRevisions) { const theme = themeStyle(props.theme); @@ -475,8 +489,6 @@ function NoteEditor(props: NoteEditorProps) { />; } - const titleBarDate = {time.formatMsToLocal(formNote.user_updated_time)}; - function renderSearchBar() { if (!showLocalSearch) return false; @@ -509,19 +521,9 @@ function NoteEditor(props: NoteEditorProps) { return (
- {tagList} -
- {renderNoteToolbar()} - - {titleBarDate} + {renderTitleBar()} +
+ {renderNoteToolbar()}{renderTagBar()}
{editor} diff --git a/ElectronClient/gui/NoteToolbar/NoteToolbar.tsx b/ElectronClient/gui/NoteToolbar/NoteToolbar.tsx index 0e5a20d52..aa6b8aaa5 100644 --- a/ElectronClient/gui/NoteToolbar/NoteToolbar.tsx +++ b/ElectronClient/gui/NoteToolbar/NoteToolbar.tsx @@ -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' }); }, }); diff --git a/ElectronClient/gui/Toolbar.jsx b/ElectronClient/gui/Toolbar.jsx index 25e82526d..f70ed9336 100644 --- a/ElectronClient/gui/Toolbar.jsx +++ b/ElectronClient/gui/Toolbar.jsx @@ -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}`,