Joplin
/
joplin
mirror of https://github.com/laurent22/joplin.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Bigger click target on checkboxes

pull/41/head
Laurent Cozic 2017-08-19 23:59:08 +02:00
parent a5daccce09
commit d708c8b48d
5 changed files with 35 additions and 13 deletions
Show Stats 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": "git://github.com/laurent22/joplin.git",
"version": "0.9.5",
"version": "0.9.6",
"bin": {
"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"
minSdkVersion 16
targetSdkVersion 22
versionCode 43
versionName "0.9.30"
versionCode 44
versionName "0.9.31"
ndk {
abiFilters "armeabi-v7a", "x86"
}

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

@ -6,7 +6,7 @@ const styles = {
checkboxIcon: {
fontSize: 20,
height: 22,
marginRight: 10,
//marginRight: 10,
},
};
@ -42,9 +42,14 @@ class Checkbox extends Component {
style.justifyContent = '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.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 = {
justifyContent: 'center',
alignItems: 'center',

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

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