Styling

2025-08-13 22:12:50 +02:00 · 2017-07-22 17:36:55 +01:00
parent cbe0859496
commit 7aee903ca2
4 changed files with 62 additions and 42 deletions
--- a/ReactNativeClient/lib/components/global-style.js
+++ b/ReactNativeClient/lib/components/global-style.js
@@ -6,6 +6,7 @@ const globalStyle = {
 	fontSize: 10,
 	dividerColor: "#dddddd",
 	selectedColor: '#eeeeee',
+	disabledOpacity: 0.3,

 	// For WebView - must correspond to the properties above
 	htmlFontSize: '14px',
@@ -18,4 +19,9 @@ globalStyle.marginTop = globalStyle.margin;
 globalStyle.marginBottom = globalStyle.margin;
 globalStyle.htmlMarginLeft = ((globalStyle.marginLeft / 10) * 0.6).toFixed(2) + 'em';

+globalStyle.icon = {
+	color: globalStyle.color,
+	fontSize: 30,
+};
+
 export { globalStyle }
--- a/ReactNativeClient/lib/components/screen-header.js
+++ b/ReactNativeClient/lib/components/screen-header.js
@@ -34,17 +34,12 @@ let styleObject = {
 	},
 	sideMenuButton: {
 		flex: 1,
+		alignItems: 'center',
 		backgroundColor: globalStyle.backgroundColor,
 		paddingLeft: globalStyle.marginLeft,
 		paddingRight: 5,
 		marginRight: 2,
 	},
-	sideMenuButtonText: {
-		textAlignVertical: 'center',
-		color: globalStyle.color,
-		fontWeight: 'bold',
-		flex: 1,
-	},
 	backButton: {
 		flex: 1,
 		backgroundColor: globalStyle.backgroundColor,
@@ -52,29 +47,32 @@ let styleObject = {
 		paddingRight: 15,
 		marginRight: 1,
 	},
-	backButtonIcon: {
-		flex: 1,
-		fontSize: 20,
-		color: globalStyle.color,
-		textAlignVertical: 'center',
-	},
 	saveButton: {
 		flex: 1,
-		backgroundColor: "#0482E3",
+		flexDirection: 'row',
+		alignItems: 'center',
 		paddingLeft: 15,
 		paddingRight: 15,
 		marginRight: 10,
+		borderWidth: 1,
+		borderColor: globalStyle.color,
+		borderRadius: 10,
 	},
 	saveButtonText: {
 		textAlignVertical: 'center',
-		color: "#ffffff",
+		color: globalStyle.color,
 		fontWeight: 'bold',
-		flex: 1,
+	},
+	saveButtonIcon: {
+		fontSize: 20,
+		color: globalStyle.color,
+		marginRight: 5,
 	},
 	contextMenuTrigger: {
 		fontSize: 25,
 		paddingRight: globalStyle.marginRight,
 		color: globalStyle.color,
+		fontWeight: 'bold',
 	},
 	contextMenu: {
 		backgroundColor: globalStyle.backgroundColor,
@@ -98,8 +96,12 @@ let styleObject = {
 	}
 };

-styleObject.backButtonDisabled = Object.assign({}, styleObject.backButton, { opacity: 0.2 });
-styleObject.saveButtonDisabled = Object.assign({}, styleObject.saveButton, { opacity: 0.2 });
+styleObject.topIcon = Object.assign({}, globalStyle.icon);
+styleObject.topIcon.flex = 1;
+styleObject.topIcon.textAlignVertical = 'center';
+
+styleObject.backButtonDisabled = Object.assign({}, styleObject.backButton, { opacity: globalStyle.disabledOpacity });
+styleObject.saveButtonDisabled = Object.assign({}, styleObject.saveButton, { opacity: globalStyle.disabledOpacity });

 const styles = StyleSheet.create(styleObject);

@@ -139,18 +141,17 @@ class ScreenHeaderComponent extends Component {
 			return (
 				<TouchableOpacity onPress={onPress}>
 					<View style={styles.sideMenuButton}>
-						<Text style={styles.sideMenuButtonText}>☰</Text>
+						<Icon name='md-menu' style={styleObject.topIcon} />
 					</View>
 				</TouchableOpacity>
 			);
 		}

 		function backButton(styles, onPress, disabled) {
-			// <Text style={styles.backButtonText}>&lt;</Text>
 			return (
 				<TouchableOpacity onPress={onPress} disabled={disabled}>
 					<View style={disabled ? styles.backButtonDisabled : styles.backButton}>
-						<Icon name='md-arrow-back' style={styles.backButtonIcon} />
+						<Icon name='md-arrow-back' style={styles.topIcon} />
 					</View>
 				</TouchableOpacity>
 			);
@@ -162,6 +163,7 @@ class ScreenHeaderComponent extends Component {
 			return (
 				<TouchableOpacity onPress={onPress} disabled={disabled}>
 					<View style={disabled ? styles.saveButtonDisabled : styles.saveButton}>
+						{ disabled && <Icon name='md-checkmark' style={styles.saveButtonIcon} /> }
 						<Text style={styles.saveButtonText}>Save</Text>
 					</View>
 				</TouchableOpacity>
--- a/ReactNativeClient/lib/components/screens/note.js
+++ b/ReactNativeClient/lib/components/screens/note.js
@@ -19,21 +19,42 @@ import { NotesScreenUtils } from 'lib/components/screens/notes-utils.js'
 import { globalStyle } from 'lib/components/global-style.js';
 import DialogBox from 'react-native-dialogbox';

-const styles = StyleSheet.create({
+const styleObject = {
 	titleTextInput: {
 		flex: 1,
+		paddingLeft: 0,
 		color: globalStyle.color,
 		backgroundColor: globalStyle.backgroundColor,
 	},
 	bodyTextInput: {
 		flex: 1,
-		marginLeft: globalStyle.marginLeft,
-		marginRight: globalStyle.marginRight,
+		paddingLeft: globalStyle.marginLeft,
+		paddingRight: globalStyle.marginRight,
 		textAlignVertical: 'top',
 		color: globalStyle.color,
 		backgroundColor: globalStyle.backgroundColor,
 	},
-});
+	bodyViewContainer: {
+		flex: 1,
+		paddingLeft: globalStyle.marginLeft,
+		paddingRight: globalStyle.marginRight,
+		paddingTop: globalStyle.marginTop,
+		paddingBottom: globalStyle.marginBottom,
+	},
+};
+
+styleObject.titleContainer = {
+	flexDirection: 'row',
+	paddingLeft: globalStyle.marginLeft,
+	paddingRight: globalStyle.marginRight,
+	height: 40,
+	borderBottomColor: globalStyle.dividerColor,
+	borderBottomWidth: 1,
+};
+
+styleObject.titleContainerTodo = Object.assign({}, styleObject.titleContainer);
+
+const styles = StyleSheet.create(styleObject);

 class NoteScreenComponent extends BaseScreenComponent {
 	
@@ -211,7 +232,7 @@ class NoteScreenComponent extends BaseScreenComponent {
 			{ title: _('Attach file'), onPress: () => { this.attachFile_onPress(); } },
 			{ title: _('Delete note'), onPress: () => { this.deleteNote_onPress(); } },
 			{ title: note && !!note.is_todo ? _('Convert to regular note') : _('Convert to todo'), onPress: () => { this.toggleIsTodo_onPress(); } },
-			{ title: _('Toggle metadata'), onPress: () => { this.showMetadata_onPress(); } },
+			{ title: this.state.showNoteMetadata ? _('Hide metadata') : _('Show metadata'), onPress: () => { this.showMetadata_onPress(); } },
 		];
 	}

@@ -282,7 +303,7 @@ class NoteScreenComponent extends BaseScreenComponent {
 				const css = `
 					body {
 						font-size: ` + style.htmlFontSize + `;
-						margin: ` + style.htmlMarginLeft + `;
+						/* margin: ` + style.htmlMarginLeft + `; */
 						color: ` + style.htmlColor + `;
 					}
 					h1 {
@@ -338,7 +359,7 @@ class NoteScreenComponent extends BaseScreenComponent {
 			}

 			bodyComponent = (
-				<View style={{flex:1}}>
+				<View style={styles.bodyViewContainer}>
 					<WebView
 						source={{ html: markdownToHtml(note.body, globalStyle) }}
 						onMessage={(event) => {
@@ -399,14 +420,7 @@ class NoteScreenComponent extends BaseScreenComponent {

 		if (showSaveButton) this.saveButtonHasBeenShown_ = true;

-		let titleContainerStyle = {
-			flexDirection: 'row',
-			paddingLeft: globalStyle.marginLeft,
-			height: 40,
-			borderBottomColor: globalStyle.dividerColor,
-			borderBottomWidth: 1,
-		};
-		if (!isTodo) titleContainerStyle.paddingLeft -= 3; // Because the TextInput already includes a padding
+		const titleContainerStyle = isTodo ? styles.titleContainerTodo : styles.titleContainer;

 		return (
 			<View style={this.styles().screen}>
@@ -449,7 +463,7 @@ class NoteScreenComponent extends BaseScreenComponent {
 				</View>
 				{ bodyComponent }
 				{ actionButtonComp }
-				{ this.state.showNoteMetadata && <Text>{this.state.noteMetadata}</Text> }
+				{ this.state.showNoteMetadata && <Text style={{ paddingLeft: globalStyle.marginLeft, paddingRight: globalStyle.marginRight, }}>{this.state.noteMetadata}</Text> }
 				<DialogBox ref={dialogbox => { this.dialogbox = dialogbox }}/>
 			</View>
 		);
--- a/ReactNativeClient/lib/components/side-menu-content.js
+++ b/ReactNativeClient/lib/components/side-menu-content.js
@@ -16,10 +16,6 @@ const styleObject = {
 		flex: 1,
 		backgroundColor: globalStyle.backgroundColor,
 	},
-	icon: {
-		fontSize: 20,
-		color: globalStyle.color,
-	},
 	name: {
 		position: 'absolute',
 		left: 70,
@@ -51,6 +47,8 @@ const styleObject = {

 styleObject.folderButton = Object.assign({}, styleObject.button);
 styleObject.folderButtonText = Object.assign({}, styleObject.buttonText);
+styleObject.folderIcon = Object.assign({}, globalStyle.icon);
+styleObject.folderIcon.color = '#026CB6';
 styleObject.syncButton = Object.assign({}, styleObject.button);
 styleObject.syncButtonText = Object.assign({}, styleObject.buttonText);
 styleObject.folderButtonSelected = Object.assign({}, styleObject.folderButton);
@@ -91,7 +89,7 @@ class SideMenuContentComponent extends Component {
 	}

 	folderItem(folder, selected) {
-		const iconComp = selected ? <Icon name='md-folder-open' style={styles.icon} /> : <Icon name='md-folder' style={styles.icon} />;
+		const iconComp = selected ? <Icon name='md-folder-open' style={styles.folderIcon} /> : <Icon name='md-folder' style={styles.folderIcon} />;
 		const folderButtonStyle = selected ? styles.folderButtonSelected : styles.folderButton;

 		return (
@@ -106,7 +104,7 @@ class SideMenuContentComponent extends Component {

 	synchronizeButton(state) {
 		const title = state == 'sync' ? _('Synchronize') : _('Cancel synchronization');
-		const iconComp = state == 'sync' ? <Icon name='md-sync' style={styles.icon} /> : <Icon name='md-close' style={styles.icon} />;
+		const iconComp = state == 'sync' ? <Icon name='md-sync' style={globalStyle.icon} /> : <Icon name='md-close' style={globalStyle.icon} />;

 		return (
 			<TouchableOpacity key={'synchronize_button'} onPress={() => { this.synchronize_press() }}>