From 86e7daaec461ebe35326d5650ecaa5b1117c7a26 Mon Sep 17 00:00:00 2001 From: Laurent Cozic Date: Thu, 11 Jul 2019 18:23:29 +0100 Subject: [PATCH] Mobile: Cleaned context menu and moved options and metadata to side menu bar --- ElectronClient/app/gui/NoteText.jsx | 10 --- .../lib/components/screens/note.js | 61 ++++++++++--------- .../components/shared/note-screen-shared.js | 15 ----- .../lib/components/side-menu-content-note.js | 26 +++++--- 4 files changed, 50 insertions(+), 62 deletions(-) diff --git a/ElectronClient/app/gui/NoteText.jsx b/ElectronClient/app/gui/NoteText.jsx index b0cbcd2dbe..493e02a6fe 100644 --- a/ElectronClient/app/gui/NoteText.jsx +++ b/ElectronClient/app/gui/NoteText.jsx @@ -62,8 +62,6 @@ class NoteTextComponent extends React.Component { this.state = { note: null, - noteMetadata: '', - showNoteMetadata: false, folder: null, lastSavedNote: null, isLoading: true, @@ -644,10 +642,6 @@ class NoteTextComponent extends React.Component { return false; } - refreshNoteMetadata(force = null) { - return shared.refreshNoteMetadata(this, force); - } - async noteRevisionViewer_onBack() { this.setState({ showRevisions: false }); @@ -666,10 +660,6 @@ class NoteTextComponent extends React.Component { this.scheduleSave(); } - showMetadata_onPress() { - shared.showMetadata_onPress(this); - } - async webview_ipcMessage(event) { const msg = event.channel ? event.channel : ''; const args = event.args; diff --git a/ReactNativeClient/lib/components/screens/note.js b/ReactNativeClient/lib/components/screens/note.js index 744f408192..861f067a1b 100644 --- a/ReactNativeClient/lib/components/screens/note.js +++ b/ReactNativeClient/lib/components/screens/note.js @@ -52,8 +52,6 @@ class NoteScreenComponent extends BaseScreenComponent { this.state = { note: Note.new(), mode: 'view', - noteMetadata: '', - showNoteMetadata: false, folder: null, lastSavedNote: null, isLoading: true, @@ -185,8 +183,9 @@ class NoteScreenComponent extends BaseScreenComponent { this.takePhoto_onPress = this.takePhoto_onPress.bind(this); this.cameraView_onPhoto = this.cameraView_onPhoto.bind(this); this.cameraView_onCancel = this.cameraView_onCancel.bind(this); + this.properties_onPress = this.properties_onPress.bind(this); this.onMarkForDownload = this.onMarkForDownload.bind(this); - this.menuOptions = this.menuOptions.bind(this); + this.sideMenuOptions = this.sideMenuOptions.bind(this); } styles() { @@ -213,11 +212,6 @@ class NoteScreenComponent extends BaseScreenComponent { paddingTop: theme.marginTop, paddingBottom: theme.marginBottom, }, - metadata: { - paddingLeft: globalStyle.marginLeft, - paddingRight: globalStyle.marginRight, - color: theme.color, - }, }; styles.titleContainer = { @@ -254,8 +248,6 @@ class NoteScreenComponent extends BaseScreenComponent { await ResourceFetcher.instance().markForDownload(resourceIds); } - this.refreshNoteMetadata(); - this.focusUpdate(); } @@ -263,10 +255,6 @@ class NoteScreenComponent extends BaseScreenComponent { ResourceFetcher.instance().markForDownload(event.resourceId); } - refreshNoteMetadata(force = null) { - return shared.refreshNoteMetadata(this, force); - } - componentDidUpdate() { if (this.doFocusUpdate_) { this.doFocusUpdate_ = false; @@ -274,13 +262,6 @@ class NoteScreenComponent extends BaseScreenComponent { } } - componentDidMount() { - this.props.dispatch({ - type: 'NOTE_SIDE_MENU_OPTIONS_SET', - options: this.menuOptions, - }); - } - componentWillUnmount() { BackButtonService.removeHandler(this.backHandler); NavService.removeHandler(this.navHandler); @@ -537,6 +518,15 @@ class NoteScreenComponent extends BaseScreenComponent { }); } + properties_onPress() { + this.props.dispatch({ + type: 'NOTE_SIDE_MENU_OPTIONS_SET', + options: this.sideMenuOptions(), + }); + + this.props.dispatch({ type: 'SIDE_MENU_OPEN' }); + } + setAlarm_onPress() { this.setState({ alarmDialogShown: true }); } @@ -554,10 +544,6 @@ class NoteScreenComponent extends BaseScreenComponent { this.setState({ alarmDialogShown: false }); } - showMetadata_onPress() { - shared.showMetadata_onPress(this); - } - async showOnMap_onPress() { if (!this.state.note.id) return; @@ -586,11 +572,29 @@ class NoteScreenComponent extends BaseScreenComponent { Clipboard.setString(Note.markdownTag(note)); } + sideMenuOptions() { + const note = this.state.note; + if (!note) return []; + + const output = []; + + const createdDateString = time.unixMsToLocalDateTime(note.user_created_time); + const updatedDateString = time.unixMsToLocalDateTime(note.user_updated_time); + + output.push({ title: _('Created: %s', createdDateString) }); + output.push({ title: _('Updated: %s', updatedDateString) }); + output.push({ isDivider: true }); + + output.push({ title: _('View on map'), onPress: () => { this.showOnMap_onPress(); } }); + if (!!note.source_url) output.push({ title: _('Go to source URL'), onPress: () => { this.showSource_onPress(); } }); + + return output; + } + menuOptions() { const note = this.state.note; const isTodo = note && !!note.is_todo; const isSaved = note && note.id; - const hasSource = note && note.source_url; let output = []; @@ -620,9 +624,7 @@ class NoteScreenComponent extends BaseScreenComponent { if (isSaved) output.push({ title: _('Tags'), onPress: () => { this.tags_onPress(); } }); output.push({ title: isTodo ? _('Convert to note') : _('Convert to todo'), onPress: () => { this.toggleIsTodo_onPress(); } }); if (isSaved) output.push({ title: _('Copy Markdown link'), onPress: () => { this.copyMarkdownLink_onPress(); } }); - output.push({ title: this.state.showNoteMetadata ? _('Hide metadata') : _('Show metadata'), onPress: () => { this.showMetadata_onPress(); } }); - output.push({ title: _('View on map'), onPress: () => { this.showOnMap_onPress(); } }); - if (hasSource) output.push({ title: _('Go to source URL'), onPress: () => { this.showSource_onPress(); } }); + output.push({ title: _('Properties'), onPress: () => { this.properties_onPress(); } }); output.push({ title: _('Delete'), onPress: () => { this.deleteNote_onPress(); } }); return output; @@ -832,7 +834,6 @@ class NoteScreenComponent extends BaseScreenComponent { { titleComp } { bodyComponent } { actionButtonComp } - { this.state.showNoteMetadata && {this.state.noteMetadata} } } renderSideBarButton(key, title, iconName, onPressHandler) { const theme = themeStyle(this.props.theme); + const content = ( + + { !iconName ? null : } + {title} + + ); + + if (!onPressHandler) return content; + return ( - - { !iconName ? null : } - {title} - + {content} ); } @@ -77,10 +84,15 @@ class SideMenuContentNoteComponent extends Component { let items = []; - const options = this.props.options ? this.props.options() : []; + const options = this.props.options ? this.props.options : []; + let dividerIndex = 0; for (const option of options) { - items.push(this.renderSideBarButton(option.title, option.title, null, option.onPress)); + if (option.isDivider) { + items.push(this.renderDivider('divider_' + dividerIndex++)); + } else { + items.push(this.renderSideBarButton(option.title, option.title, null, option.onPress)); + } } let style = {