self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2025-09-16 08:56:40 +02:00
Code Issues Releases Activity

Bigger click target on checkboxes

Browse Source
This commit is contained in:
Laurent Cozic
2017-08-19 23:59:08 +02:00
parent a5daccce09
commit d708c8b48d
5 changed files with 35 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
CliClient/package.json
View File

@@ -7,7 +7,7 @@
"url": "https://github.com/laurent22/joplin" "url": "https://github.com/laurent22/joplin"
}, },
"url": "git://github.com/laurent22/joplin.git", "url": "git://github.com/laurent22/joplin.git",
"version": "0.9.5", "version": "0.9.6",
"bin": { "bin": {
"joplin": "./main.js" "joplin": "./main.js"
}, },

2
CliClient/package.json.md5
View File

@@ -1 +1 @@
26731ba0d38727c6c362b6d042517888 1c9cbfd029fc567f391359ff05b34587

4
ReactNativeClient/android/app/build.gradle
View File

@@ -90,8 +90,8 @@ android {
applicationId "net.cozic.joplin" applicationId "net.cozic.joplin"
minSdkVersion 16 minSdkVersion 16
targetSdkVersion 22 targetSdkVersion 22
versionCode 43 versionCode 44
versionName "0.9.30" versionName "0.9.31"
ndk { ndk {
abiFilters "armeabi-v7a", "x86" abiFilters "armeabi-v7a", "x86"
} }

9
ReactNativeClient/lib/components/checkbox.js
View File

@@ -6,7 +6,7 @@ const styles = {
checkboxIcon: { checkboxIcon: {
fontSize: 20, fontSize: 20,
height: 22, height: 22,
marginRight: 10, //marginRight: 10,
}, },
}; };
@@ -42,9 +42,14 @@ class Checkbox extends Component {
style.justifyContent = 'center'; style.justifyContent = 'center';
style.alignItems = 'center'; style.alignItems = 'center';
const checkboxIconStyle = Object.assign({}, styles.checkboxIcon); let checkboxIconStyle = Object.assign({}, styles.checkboxIcon);
if (style.color) checkboxIconStyle.color = style.color; if (style.color) checkboxIconStyle.color = style.color;
if (style.paddingTop) checkboxIconStyle.marginTop = style.paddingTop;
if (style.paddingBottom) checkboxIconStyle.marginBottom = style.paddingBottom;
if (style.paddingLeft) checkboxIconStyle.marginLeft = style.paddingLeft;
if (style.paddingRight) checkboxIconStyle.marginRight = style.paddingRight;
const thStyle = { const thStyle = {
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',

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

@@ -36,7 +36,7 @@ class NoteItemComponent extends Component {
//height: 40, //height: 40,
borderBottomWidth: 1, borderBottomWidth: 1,
borderBottomColor: theme.dividerColor, borderBottomColor: theme.dividerColor,
alignItems: 'center', alignItems: 'flex-start',
paddingLeft: theme.marginLeft, paddingLeft: theme.marginLeft,
paddingRight: theme.marginRight, paddingRight: theme.marginRight,
paddingTop: theme.itemMarginTop, paddingTop: theme.itemMarginTop,
@@ -50,8 +50,14 @@ class NoteItemComponent extends Component {
}, },
}; };
styles.listItemFadded = Object.assign({}, styles.listItem); styles.listItemWithCheckbox = Object.assign({}, styles.listItem);
styles.listItemFadded.opacity = 0.4; delete styles.listItemWithCheckbox.paddingTop;
delete styles.listItemWithCheckbox.paddingBottom;
delete styles.listItemWithCheckbox.paddingLeft;
styles.listItemTextWithCheckbox = Object.assign({}, styles.listItemText);
styles.listItemTextWithCheckbox.marginTop = styles.listItem.paddingTop - 1;
styles.listItemTextWithCheckbox.marginBottom = styles.listItem.paddingBottom;
this.styles_[this.props.theme] = StyleSheet.create(styles); this.styles_[this.props.theme] = StyleSheet.create(styles);
return this.styles_[this.props.theme]; return this.styles_[this.props.theme];
@@ -79,24 +85,35 @@ class NoteItemComponent extends Component {
render() { render() {
const note = this.props.note ? this.props.note : {}; const note = this.props.note ? this.props.note : {};
const isTodo = !!Number(note.is_todo);
const onPress = this.props.onPress; const onPress = this.props.onPress;
const onCheckboxChange = this.props.onCheckboxChange; const onCheckboxChange = this.props.onCheckboxChange;
const theme = themeStyle(this.props.theme); const theme = themeStyle(this.props.theme);
const checkboxStyle = !Number(note.is_todo) ? { display: 'none' } : { color: theme.color }; let checkboxStyle = !isTodo ? { display: 'none' } : { color: theme.color };
if (isTodo) {
checkboxStyle.paddingRight = 10;
checkboxStyle.paddingTop = theme.itemMarginTop;
checkboxStyle.paddingBottom = theme.itemMarginBottom;
checkboxStyle.paddingLeft = theme.marginLeft;
}
const checkboxChecked = !!Number(note.todo_completed); const checkboxChecked = !!Number(note.todo_completed);
const listItemStyle = !!Number(note.is_todo) && checkboxChecked ? this.styles().listItemFadded : this.styles().listItem; const listItemStyle = isTodo ? this.styles().listItemWithCheckbox : this.styles().listItem;
const listItemTextStyle = isTodo ? this.styles().listItemTextWithCheckbox : this.styles().listItemText;
const rootStyle = isTodo && checkboxChecked ? {opacity: 0.4} : {};
return ( return (
<TouchableHighlight onPress={() => this.onPress()} underlayColor="#0066FF"> <TouchableHighlight onPress={() => this.onPress()} underlayColor="#0066FF" style={rootStyle}>
<View style={ listItemStyle }> <View style={ listItemStyle }>
<Checkbox <Checkbox
style={checkboxStyle} style={checkboxStyle}
checked={checkboxChecked} checked={checkboxChecked}
onChange={(checked) => this.todoCheckbox_change(checked)} onChange={(checked) => this.todoCheckbox_change(checked)}
/> />
<Text style={this.styles().listItemText}>{note.title}</Text> <Text style={listItemTextStyle}>{note.title}</Text>
</View> </View>
</TouchableHighlight> </TouchableHighlight>
); );