Desktop: Moved note-related toolbar button next to tag bar

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 <span style={{ display: 'flex', flexDirection: 'row' }}>{buttons}</span>;
+		}
+
 		const theme = themeStyle(this.props.theme);
 
 		let icon = null;

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}`,
 			},
 		};
 	});

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};
 			}
 

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<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}
+				{renderTitleBar()}
-				<div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', paddingBottom: 5, borderBottomWidth: 1, borderBottomColor: theme.dividerColor, borderBottomStyle: 'solid' }}>
+				<div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
-					{renderNoteToolbar()}
+					{renderNoteToolbar()}{renderTagBar()}
-					<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>
 				<div style={{ display: 'flex', flex: 1 }}>
 					{editor}

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'),
+		tooltip: _('Note properties'),
-		iconName: 'fa-tags',
+		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'),
+		tooltip: _('Tags'),
-		iconName: 'fa-info-circle',
+		iconName: 'fa-tags',
 		onClick: () => {
-			dispatch({
+			onButtonClick({ name: 'setTags' });
-				type: 'WINDOW_COMMAND',
-				name: 'commandNoteProperties',
-				noteId: note.id,
-				onRevisionLinkClick: () => {
-					onButtonClick({ name: 'showRevisions' });
-				},
-			});
 		},
 	});
 

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}`,