From 1a5720bd8c6d308af15e75406d3835fe2767e44b Mon Sep 17 00:00:00 2001 From: Laurent Cozic Date: Sun, 30 Jul 2017 23:04:26 +0200 Subject: [PATCH] Styling --- ReactNativeClient/lib/components/action-button.js | 6 +++++- ReactNativeClient/lib/components/global-style.js | 7 +++++-- ReactNativeClient/lib/components/note-body-viewer.js | 3 ++- ReactNativeClient/lib/components/note-item.js | 5 ++++- ReactNativeClient/lib/components/note-list.js | 3 ++- ReactNativeClient/lib/components/screen-header.js | 5 ++++- ReactNativeClient/lib/components/screens/config.js | 10 +++++++++- ReactNativeClient/lib/components/screens/note.js | 4 +++- ReactNativeClient/lib/components/screens/status.js | 1 + ReactNativeClient/lib/components/screens/welcome.js | 1 + ReactNativeClient/lib/components/side-menu-content.js | 11 ++--------- 11 files changed, 38 insertions(+), 18 deletions(-) diff --git a/ReactNativeClient/lib/components/action-button.js b/ReactNativeClient/lib/components/action-button.js index 354b633e2..b34631629 100644 --- a/ReactNativeClient/lib/components/action-button.js +++ b/ReactNativeClient/lib/components/action-button.js @@ -3,6 +3,7 @@ import { StyleSheet, Text } from 'react-native'; import Icon from 'react-native-vector-icons/Ionicons'; import ReactNativeActionButton from 'react-native-action-button'; import { connect } from 'react-redux' +import { globalStyle } from 'lib/components/global-style.js' import { Log } from 'lib/log.js' import { _ } from 'lib/locale.js' @@ -12,6 +13,9 @@ const styles = StyleSheet.create({ height: 22, color: 'white', }, + itemText: { + // fontSize: 14, // Cannot currently set fontsize since the bow surrounding the label has a fixed size + } }); class ActionButtonComponent extends React.Component { @@ -118,7 +122,7 @@ class ActionButtonComponent extends React.Component { ); } else { return ( - + { buttonComps } ); diff --git a/ReactNativeClient/lib/components/global-style.js b/ReactNativeClient/lib/components/global-style.js index 39664ae0f..bd6072d10 100644 --- a/ReactNativeClient/lib/components/global-style.js +++ b/ReactNativeClient/lib/components/global-style.js @@ -1,9 +1,12 @@ const globalStyle = { + fontSize: 16, margin: 15, // No text and no interactive component should be within this margin + itemMarginTop: 10, + itemMarginBottom: 10, backgroundColor: "#ffffff", color: "#555555", // For regular text colorFaded: "#777777", // For less important text - fontSize: 10, + fontSizeSmaller: 14, dividerColor: "#dddddd", selectedColor: '#e5e5e5', disabledOpacity: 0.3, @@ -13,7 +16,7 @@ const globalStyle = { raisedHighlightedColor: "#ffffff", // For WebView - must correspond to the properties above - htmlFontSize: '14px', + htmlFontSize: '20x', htmlColor: 'black', // Note: CSS in WebView component only seem to work if the colour is written in full letters (so no hexadecimal) htmlDividerColor: 'Gainsboro', }; diff --git a/ReactNativeClient/lib/components/note-body-viewer.js b/ReactNativeClient/lib/components/note-body-viewer.js index c8ad4046a..2c095095c 100644 --- a/ReactNativeClient/lib/components/note-body-viewer.js +++ b/ReactNativeClient/lib/components/note-body-viewer.js @@ -58,6 +58,7 @@ class NoteBodyViewer extends Component { body { font-size: ` + style.htmlFontSize + `; color: ` + style.htmlColor + `; + line-height: 1.5em; } h1 { font-size: 1.2em; @@ -74,7 +75,7 @@ class NoteBodyViewer extends Component { padding-left: 1em; } a.checkbox { - font-size: 1.4em; + font-size: 1.6em; position: relative; top: 0.1em; text-decoration: none; diff --git a/ReactNativeClient/lib/components/note-item.js b/ReactNativeClient/lib/components/note-item.js index 11457f1ed..ba3778a5b 100644 --- a/ReactNativeClient/lib/components/note-item.js +++ b/ReactNativeClient/lib/components/note-item.js @@ -12,17 +12,20 @@ import { globalStyle } from 'lib/components/global-style.js'; let styles = { listItem: { flexDirection: 'row', - height: 40, + //height: 40, borderBottomWidth: 1, borderBottomColor: globalStyle.dividerColor, alignItems: 'center', paddingLeft: globalStyle.marginLeft, paddingRight: globalStyle.marginRight, + paddingTop: globalStyle.itemMarginTop, + paddingBottom: globalStyle.itemMarginBottom, backgroundColor: globalStyle.backgroundColor, }, listItemText: { flex: 1, color: globalStyle.color, + fontSize: globalStyle.fontSize, }, }; diff --git a/ReactNativeClient/lib/components/note-list.js b/ReactNativeClient/lib/components/note-list.js index f768c3c28..7a0d0476a 100644 --- a/ReactNativeClient/lib/components/note-list.js +++ b/ReactNativeClient/lib/components/note-list.js @@ -16,7 +16,8 @@ const styles = StyleSheet.create({ paddingLeft: globalStyle.marginLeft, paddingRight: globalStyle.marginRight, paddingTop: globalStyle.marginTop, - paddingBottom: globalStyle.marginBottom + paddingBottom: globalStyle.marginBottom, + fontSize: globalStyle.fontSize, }, }); diff --git a/ReactNativeClient/lib/components/screen-header.js b/ReactNativeClient/lib/components/screen-header.js index 21fab83e9..b056f55e6 100644 --- a/ReactNativeClient/lib/components/screen-header.js +++ b/ReactNativeClient/lib/components/screen-header.js @@ -81,18 +81,21 @@ let styleObject = { }, contextMenuItemText: { flex: 1, - height: 40, textAlignVertical: 'center', paddingLeft: globalStyle.marginLeft, paddingRight: globalStyle.marginRight, + paddingTop: globalStyle.itemMarginTop, + paddingBottom: globalStyle.itemMarginBottom, color: globalStyle.color, backgroundColor: globalStyle.backgroundColor, + fontSize: globalStyle.fontSize, }, titleText: { flex: 1, marginLeft: 0, color: globalStyle.raisedHighlightedColor, fontWeight: 'bold', + fontSize: globalStyle.fontSize, } }; diff --git a/ReactNativeClient/lib/components/screens/config.js b/ReactNativeClient/lib/components/screens/config.js index 4a0a1bce5..43bb997fa 100644 --- a/ReactNativeClient/lib/components/screens/config.js +++ b/ReactNativeClient/lib/components/screens/config.js @@ -19,18 +19,26 @@ let styles = { settingText: { fontWeight: 'bold', color: globalStyle.color, + fontSize: globalStyle.fontSize, }, settingControl: { color: globalStyle.color, }, + pickerItem: { + fontSize: globalStyle.fontSize, + } } +styles.switchSettingText = Object.assign({}, styles.settingText); +styles.switchSettingText.width = '80%'; + styles.switchSettingContainer = Object.assign({}, styles.settingContainer); styles.switchSettingContainer.flexDirection = 'row'; styles.switchSettingContainer.justifyContent = 'space-between'; styles.switchSettingControl = Object.assign({}, styles.settingControl); delete styles.switchSettingControl.color; +styles.switchSettingControl.width = '20%'; styles = StyleSheet.create(styles); @@ -90,7 +98,7 @@ class ConfigScreenComponent extends BaseScreenComponent { } else if (setting.type == Setting.TYPE_BOOL) { return ( - {setting.label()} + {setting.label()} updateSettingValue(key, value)} /> ); diff --git a/ReactNativeClient/lib/components/screens/note.js b/ReactNativeClient/lib/components/screens/note.js index e0cb41cba..ef64d08d3 100644 --- a/ReactNativeClient/lib/components/screens/note.js +++ b/ReactNativeClient/lib/components/screens/note.js @@ -26,6 +26,8 @@ const styleObject = { paddingLeft: 0, color: globalStyle.color, backgroundColor: globalStyle.backgroundColor, + fontWeight: 'bold', + fontSize: globalStyle.fontSize, }, bodyTextInput: { flex: 1, @@ -34,6 +36,7 @@ const styleObject = { textAlignVertical: 'top', color: globalStyle.color, backgroundColor: globalStyle.backgroundColor, + fontSize: globalStyle.fontSize, }, noteBodyViewer: { flex: 1, @@ -48,7 +51,6 @@ styleObject.titleContainer = { flexDirection: 'row', paddingLeft: globalStyle.marginLeft, paddingRight: globalStyle.marginRight, - height: 40, borderBottomColor: globalStyle.dividerColor, borderBottomWidth: 1, }; diff --git a/ReactNativeClient/lib/components/screens/status.js b/ReactNativeClient/lib/components/screens/status.js index 45942ac7e..798c759e2 100644 --- a/ReactNativeClient/lib/components/screens/status.js +++ b/ReactNativeClient/lib/components/screens/status.js @@ -54,6 +54,7 @@ class StatusScreenComponent extends BaseScreenComponent { paddingTop: 0, paddingBottom: 0, flex: 0, + fontSize: globalStyle.fontSize, }; for (let i = 0; i < report.length; i++) { let section = report[i]; diff --git a/ReactNativeClient/lib/components/screens/welcome.js b/ReactNativeClient/lib/components/screens/welcome.js index c7436d8ca..07b7bf80a 100644 --- a/ReactNativeClient/lib/components/screens/welcome.js +++ b/ReactNativeClient/lib/components/screens/welcome.js @@ -11,6 +11,7 @@ import { globalStyle } from 'lib/components/global-style.js'; const styles = StyleSheet.create({ message: { margin: globalStyle.margin, + fontSize: globalStyle.fontSize, }, }); diff --git a/ReactNativeClient/lib/components/side-menu-content.js b/ReactNativeClient/lib/components/side-menu-content.js index 3d63628fd..c63cb2671 100644 --- a/ReactNativeClient/lib/components/side-menu-content.js +++ b/ReactNativeClient/lib/components/side-menu-content.js @@ -19,15 +19,6 @@ let styles = { borderTopWidth: 1, borderTopColor: globalStyle.dividerColor, }, - name: { - position: 'absolute', - left: 70, - top: 20, - }, - item: { - fontSize: 14, - fontWeight: '300', - }, button: { flex: 1, flexDirection: 'row', @@ -40,11 +31,13 @@ let styles = { flex: 1, color: globalStyle.color, paddingLeft: 10, + fontSize: globalStyle.fontSize, }, syncStatus: { paddingLeft: globalStyle.marginLeft, paddingRight: globalStyle.marginRight, color: globalStyle.colorFaded, + fontSize: globalStyle.fontSizeSmaller, }, tagItemList: { flex: 1,