self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2024-12-24 10:27:10 +02:00
Code Issues Releases Activity

Styling

Browse Source
This commit is contained in:
Laurent Cozic 2017-07-30 23:04:26 +02:00
parent 242b6dbff8
commit 1a5720bd8c
11 changed files with 38 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
ReactNativeClient/lib/components/action-button.js
View File

@ -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 (
<ReactNativeActionButton icon={mainIcon} buttonColor="rgba(231,76,60,1)" onPress={ function() { } }>
<ReactNativeActionButton textStyle={styles.itemText} icon={mainIcon} buttonColor="rgba(231,76,60,1)" onPress={ function() { } }>
{ buttonComps }
</ReactNativeActionButton>
);

7
ReactNativeClient/lib/components/global-style.js
View File

@ -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',
};

3
ReactNativeClient/lib/components/note-body-viewer.js
View File

@ -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;

5
ReactNativeClient/lib/components/note-item.js
View File

@ -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,
},
};

3
ReactNativeClient/lib/components/note-list.js
View File

@ -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,
},
});

5
ReactNativeClient/lib/components/screen-header.js
View File

@ -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,
}
};

10
ReactNativeClient/lib/components/screens/config.js
View File

@ -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 (
<View key={key} style={styles.switchSettingContainer}>
<Text key="label" style={styles.settingText}>{setting.label()}</Text>
<Text key="label" style={styles.switchSettingText}>{setting.label()}</Text>
<Switch key="control" style={styles.switchSettingControl} value={value} onValueChange={(value) => updateSettingValue(key, value)} />
</View>
);

4
ReactNativeClient/lib/components/screens/note.js
View File

@ -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,
};

1
ReactNativeClient/lib/components/screens/status.js
View File

@ -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];

1
ReactNativeClient/lib/components/screens/welcome.js
View File

@ -11,6 +11,7 @@ import { globalStyle } from 'lib/components/global-style.js';
const styles = StyleSheet.create({
message: {
margin: globalStyle.margin,
fontSize: globalStyle.fontSize,
},
});

11
ReactNativeClient/lib/components/side-menu-content.js
View File

@ -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,