From 2b1d5ff726adb2158e34950993760fda550edf2d Mon Sep 17 00:00:00 2001 From: Laurent Cozic Date: Fri, 10 Nov 2017 20:12:38 +0000 Subject: [PATCH] Added title bar and fixed editor scrolling bug --- ElectronClient/app/gui/Header.jsx | 2 + ElectronClient/app/gui/NoteList.jsx | 16 +++---- ElectronClient/app/gui/NoteText.jsx | 68 +++++++++++++++++++++-------- ReactNativeClient/lib/MdToHtml.js | 2 +- 4 files changed, 61 insertions(+), 27 deletions(-) diff --git a/ElectronClient/app/gui/Header.jsx b/ElectronClient/app/gui/Header.jsx index 13b7d1fdc..3568cdfc0 100644 --- a/ElectronClient/app/gui/Header.jsx +++ b/ElectronClient/app/gui/Header.jsx @@ -31,6 +31,8 @@ class HeaderComponent extends React.Component { style.height = theme.headerHeight; style.display = 'flex'; style.flexDirection = 'row'; + style.borderBottom = '1px solid ' + theme.dividerColor; + style.boxSizing = 'border-box'; const buttons = []; if (showBackButton) { diff --git a/ElectronClient/app/gui/NoteList.jsx b/ElectronClient/app/gui/NoteList.jsx index 44ea279e4..f2b5d8baa 100644 --- a/ElectronClient/app/gui/NoteList.jsx +++ b/ElectronClient/app/gui/NoteList.jsx @@ -13,7 +13,7 @@ class NoteListComponent extends React.Component { style() { const theme = themeStyle(this.props.theme); - const itemHeight = 26; + const itemHeight = 34; let style = { root: { @@ -30,9 +30,6 @@ class NoteListComponent extends React.Component { listItemSelected: { backgroundColor: theme.selectedColor, }, - listItemCompleted: { - opacity: 0.5, - }, listItemTitle: { fontFamily: theme.fontFamily, fontSize: theme.fontSize, @@ -45,6 +42,10 @@ class NoteListComponent extends React.Component { alignItems: 'center', overflow: 'hidden', }, + listItemTitleCompleted: { + opacity: 0.5, + textDecoration: 'line-through', + }, }; return style; @@ -93,12 +94,9 @@ class NoteListComponent extends React.Component { : null; - if (item.is_todo && !!item.todo_completed) { - style = Object.assign(style, this.style().listItemCompleted); - } - - const listItemTitleStyle = Object.assign({}, this.style().listItemTitle); + let listItemTitleStyle = Object.assign({}, this.style().listItemTitle); listItemTitleStyle.paddingLeft = checkbox ? padding : 4; + if (item.is_todo && !!item.todo_completed) listItemTitleStyle = Object.assign(listItemTitleStyle, this.style().listItemTitleCompleted); return
{checkbox} diff --git a/ElectronClient/app/gui/NoteText.jsx b/ElectronClient/app/gui/NoteText.jsx index 29c2f5c71..e09c55799 100644 --- a/ElectronClient/app/gui/NoteText.jsx +++ b/ElectronClient/app/gui/NoteText.jsx @@ -115,6 +115,10 @@ class NoteTextComponent extends React.Component { // is going to be removed in render(). const webviewReady = this.webview_ && this.state.webviewReady && noteId; + this.editorMaxScrollTop_ = 0; + + this.editorSetScrollTop(0); + this.setState({ note: note, lastSavedNote: Object.assign({}, note), @@ -131,13 +135,8 @@ class NoteTextComponent extends React.Component { return shared.refreshNoteMetadata(this, force); } - title_changeText(text) { - shared.noteComponent_change(this, 'title', text); - this.scheduleSave(); - } - - editor_change(event) { - shared.noteComponent_change(this, 'body', event.target.value); + title_changeText(event) { + shared.noteComponent_change(this, 'title', event.target.value); this.scheduleSave(); } @@ -156,7 +155,7 @@ class NoteTextComponent extends React.Component { const arg0 = args && args.length >= 1 ? args[0] : null; const arg1 = args && args.length >= 2 ? args[1] : null; - reg.logger().info('Got ipc-message: ' + msg, args); + reg.logger().debug('Got ipc-message: ' + msg, args); if (msg.indexOf('checkboxclick:') === 0) { // Ugly hack because setting the body here will make the scrollbar @@ -189,6 +188,7 @@ class NoteTextComponent extends React.Component { } editorSetScrollTop(v) { + if (!this.editor_) return; this.editor_.editor.getSession().setScrollTop(v); } @@ -237,7 +237,6 @@ class NoteTextComponent extends React.Component { if (this.editor_ === element) return; if (this.editor_) { - this.editorMaxScrollTop_ = 0; this.editor_.editor.renderer.off('afterRender', this.onAfterEditorRender_); } @@ -289,17 +288,44 @@ class NoteTextComponent extends React.Component { const theme = themeStyle(this.props.theme); const visiblePanes = this.props.visiblePanes || ['editor', 'viewer']; + const borderWidth = 1; + + const rootStyle = Object.assign({ + borderLeft: borderWidth + 'px solid ' + theme.dividerColor, + boxSizing: 'border-box', + paddingLeft: 10, + paddingRight: 0, + }, style); + + const innerWidth = rootStyle.width - rootStyle.paddingLeft - rootStyle.paddingRight - borderWidth; + if (!note) { const emptyDivStyle = Object.assign({ backgroundColor: 'black', opacity: 0.1, - }, style); + }, rootStyle); return
} + const titleEditorStyle = { + width: innerWidth - rootStyle.paddingLeft, + height: 24, + display: 'block', + boxSizing: 'border-box', + paddingTop: 5, + paddingBottom: 5, + paddingLeft: 8, + paddingRight: 8, + marginTop: 10, + marginBottom: 10, + marginRight: rootStyle.paddingLeft, + }; + + const bottomRowHeight = rootStyle.height - titleEditorStyle.height - titleEditorStyle.marginBottom - titleEditorStyle.marginTop; + const viewerStyle = { - width: Math.floor(style.width / 2), - height: style.height, + width: Math.floor(innerWidth / 2), + height: bottomRowHeight, overflow: 'hidden', float: 'left', verticalAlign: 'top', @@ -308,8 +334,8 @@ class NoteTextComponent extends React.Component { const paddingTop = 14; const editorStyle = { - width: style.width - viewerStyle.width, - height: style.height - paddingTop, + width: innerWidth - viewerStyle.width, + height: bottomRowHeight - paddingTop, overflowY: 'hidden', float: 'left', verticalAlign: 'top', @@ -323,12 +349,12 @@ class NoteTextComponent extends React.Component { // to this bug: https://github.com/electron/electron/issues/8277 // So instead setting the width 0. viewerStyle.width = 0; - editorStyle.width = style.width; + editorStyle.width = innerWidth; } if (visiblePanes.indexOf('editor') < 0) { editorStyle.display = 'none'; - viewerStyle.width = style.width; + viewerStyle.width = innerWidth; } if (this.state.webviewReady) { @@ -342,6 +368,13 @@ class NoteTextComponent extends React.Component { this.webview_.send('setHtml', html); } + const titleEditor = { this.title_changeText(event); }} + /> + const viewer = return ( -
+
+ { titleEditor } { editor } { viewer }
diff --git a/ReactNativeClient/lib/MdToHtml.js b/ReactNativeClient/lib/MdToHtml.js index fc2345812..ab729e2e4 100644 --- a/ReactNativeClient/lib/MdToHtml.js +++ b/ReactNativeClient/lib/MdToHtml.js @@ -272,7 +272,7 @@ class MdToHtml { background-color: ` + style.htmlBackgroundColor + `; font-family: sans-serif; } - p, h1, h2, h3, h4, ul { + p, h1, h2, h3, h4, ul, table { margin-top: 0; margin-bottom: 14px; }