Mobile: Cleaned context menu and moved options and metadata to side menu bar

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;		

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 && <Text style={this.styles().metadata}>{this.state.noteMetadata}</Text> }
 
 				<SelectDateTimeDialog
 					shown={this.state.alarmDialogShown}

ReactNativeClient/lib/components/shared/note-screen-shared.js

@@ -109,12 +109,9 @@ shared.saveNoteButton_press = async function(comp, folderId = null, options = nu
 			const modLastSavedNote = Object.assign({}, comp.state.lastSavedNote, geoInfo);
 
 			comp.setState({ note: modNote, lastSavedNote: modLastSavedNote });
-			comp.refreshNoteMetadata();
 		});
 	}
 
-	comp.refreshNoteMetadata();
-
 	if (isNew) {
 		// Clear the newNote item now that the note has been saved, and
 		// make sure that the note we're editing is selected.
@@ -195,13 +192,6 @@ shared.attachedResources = async function(noteBody) {
 	return output;
 }
 
-shared.refreshNoteMetadata = async function(comp, force = null) {
-	if (force !== true && !comp.state.showNoteMetadata) return;
-
-	let noteMetadata = await Note.serializeAllProps(comp.state.note);
-	comp.setState({ noteMetadata: noteMetadata });
-}
-
 shared.isModified = function(comp) {
 	if (!comp.state.note || !comp.state.lastSavedNote) return false;
 	let diff = BaseModel.diffObjects(comp.state.lastSavedNote, comp.state.note);
@@ -238,11 +228,6 @@ shared.initState = async function(comp) {
 	comp.lastLoadedNoteId_ = note ? note.id : null;
 }
 
-shared.showMetadata_onPress = function(comp) {
-	comp.setState({ showNoteMetadata: !comp.state.showNoteMetadata });
-	comp.refreshNoteMetadata(true);
-}
-
 shared.toggleIsTodo_onPress = function(comp) {
 	let newNote = Note.toggleIsTodo(comp.state.note);
 	let newState = { note: newNote };

ReactNativeClient/lib/components/side-menu-content-note.js

@@ -49,25 +49,32 @@ class SideMenuContentNoteComponent extends Component {
 		};
 
 		styles.sideButton = Object.assign({}, styles.button, { flex: 0 });
+		styles.sideButtonDisabled = Object.assign({}, styles.sideButton, { opacity: 0.6 });
 		styles.sideButtonText = Object.assign({}, styles.buttonText);
 
 		this.styles_[this.props.theme] = StyleSheet.create(styles);
 		return this.styles_[this.props.theme];
 	}
 
-	makeDivider(key) {
+	renderDivider(key) {
 		return <View style={{ marginTop: 15, marginBottom: 15, flex: -1, borderBottomWidth: 1, borderBottomColor: globalStyle.dividerColor }} key={key}></View>
 	}
 
 	renderSideBarButton(key, title, iconName, onPressHandler) {
 		const theme = themeStyle(this.props.theme);
 
+		const content = (
+			<View key={key} style={onPressHandler ? this.styles().sideButton : this.styles().sideButtonDisabled}>
+				{ !iconName ? null : <Icon name={iconName} style={this.styles().sidebarIcon} /> }
+				<Text style={this.styles().sideButtonText}>{title}</Text>
+			</View>
+		);
+
+		if (!onPressHandler) return content;
+
 		return (
 			<TouchableOpacity key={key} onPress={onPressHandler}>
-				<View style={this.styles().sideButton}>
-					{ !iconName ? null : <Icon name={iconName} style={this.styles().sidebarIcon} /> }
-					<Text style={this.styles().sideButtonText}>{title}</Text>
-				</View>
+				{content}
 			</TouchableOpacity>
 		);
 	}
@@ -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 = {