Skip to content
This repository was archived by the owner on Feb 21, 2020. It is now read-only.

Commit c8720fc

Browse files
kazup01kazup01
authored
Merge pull request #16 from BoostIO/fix-text-input-layout
Fix iOS layout
2 parents fd9d38a + 9a09908 commit c8720fc

File tree

1 file changed

+100
-42
lines changed

1 file changed

+100
-42
lines changed

‎app/views/NoteModal.js‎

Lines changed: 100 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,29 @@ const styles = {
5252
justifyContent: 'center',
5353
alignItems: 'center',
5454
backgroundColor: '#F5FCFF',
55+
},
56+
inputElementsStyle: {
57+
paddingLeft: 10,
58+
paddingRight: 10,
59+
paddingTop: 1,
60+
paddingBottom: 1,
61+
marginLeft: 2,
62+
marginRight: 2,
63+
marginTop: 4,
64+
marginBottom: 4,
65+
borderRadius: 3,
66+
borderWidth: 0,
67+
backgroundColor: 'rgba(255, 255, 255, 1)',
68+
},
69+
supportMain: {
70+
fontSize: 12,
71+
textAlign: 'center',
72+
color: '#333333'
73+
},
74+
supportSub: {
75+
fontSize: 10,
76+
textAlign: 'center',
77+
color: '#828282'
5578
}
5679
}
5780

@@ -119,40 +142,40 @@ export default class NoteModal extends React.Component {
119142

120143
getNoteComponent() {
121144
const markdownStyles = {
122-
container: {
123-
paddingLeft: 10
124-
},
125-
heading1: {
126-
fontSize: 24,
127-
fontWeight: '600',
128-
color: '#222222',
129-
},
130-
link: {
131-
color: 'red',
132-
},
133-
mail_to: {
134-
color: 'orange',
135-
},
136-
text: {
137-
color: '#555555',
138-
},
139-
code: {
140-
backgroundColor: '#f0f0f0',
141-
marginTop: 5,
142-
marginBottom: 5
143-
},
144-
blockquote: {
145-
backgroundColor: '#f8f8f8',
146-
padding: 5
147-
}
145+
container: {
146+
paddingLeft: 10
147+
},
148+
heading1: {
149+
fontSize: 24,
150+
fontWeight: '600',
151+
color: '#222222',
152+
},
153+
link: {
154+
color: 'red',
155+
},
156+
mail_to: {
157+
color: 'orange',
158+
},
159+
text: {
160+
color: '#555555',
161+
},
162+
code: {
163+
backgroundColor: '#f0f0f0',
164+
marginTop: 5,
165+
marginBottom: 5
166+
},
167+
blockquote: {
168+
backgroundColor: '#f8f8f8',
169+
padding: 5
170+
}
148171
}
149172

150173
if (this.state.isLeftSegmentActive) {
151174
return <View style={{flex: 1}}>
152175
<ScrollView keyboardShouldPersistTaps='always'>
153176
<MultilineTextInput
154177
ref="TextInput"
155-
style={Platform.OS === 'android' ? { margin: 8, height: this.state.visibleHeight - 100}:{ margin: 8, height: this.state.visibleHeight}}
178+
style={Platform.OS === 'android' ? { margin: 8, height: this.state.visibleHeight - 30} : { margin: 8, height: this.state.visibleHeight}}
156179
onChangeText={(e) => this.onChangeText(e)}
157180
value={this.state.text}
158181
selectionChange={(e) => {
@@ -161,46 +184,81 @@ export default class NoteModal extends React.Component {
161184
autoFocus={true}
162185
textAlignVertical={'top'}>
163186
</MultilineTextInput>
164-
<View style={{flexDirection: 'row', height: 100}}>
187+
<View style={{flexDirection: 'row', backgroundColor: 'rgba(0, 0, 0, 0.05)', paddingLeft: 5, paddingRight: 5}}>
165188
<TouchableHighlight
166189
onPress={()=> {
167190
this.insertMarkdownBetween('# ')
168191
}}
169-
style={{paddingLeft: 15, paddingBottom: 10}} >
170-
<Text>#</Text>
192+
style={styles.inputElementsStyle} >
193+
<View>
194+
<Text style={styles.supportMain}>#</Text>
195+
<Text style={styles.supportSub}>Head</Text>
196+
</View>
171197
</TouchableHighlight>
172198
<TouchableHighlight
173199
onPress={()=> {
174-
this.insertMarkdownBetween('*')
200+
this.insertMarkdownBetween('- ')
175201
}}
176-
style={{paddingLeft: 15, paddingBottom: 10}} >
177-
<Text>*</Text>
202+
style={styles.inputElementsStyle} >
203+
<View>
204+
<Text style={styles.supportMain}>-</Text>
205+
<Text style={styles.supportSub}>List</Text>
206+
</View>
178207
</TouchableHighlight>
179208
<TouchableHighlight
180209
onPress={()=> {
181210
this.insertMarkdownBetween('```\n')
182211
}}
183-
style={{paddingLeft: 15, paddingBottom: 10}} >
184-
<Text>code block</Text>
212+
style={styles.inputElementsStyle} >
213+
<View>
214+
<Text style={styles.supportMain}>```</Text>
215+
<Text style={styles.supportSub}>Code</Text>
216+
</View>
185217
</TouchableHighlight>
186218
<TouchableHighlight
187219
onPress={()=> {
188-
this.insertMarkdownBetween('- ')
220+
this.insertMarkdownBetween('**')
189221
}}
190-
style={{paddingLeft: 15, paddingBottom: 10}} >
191-
<Text>-</Text>
222+
style={styles.inputElementsStyle} >
223+
<View>
224+
<Text style={styles.supportMain}>**</Text>
225+
<Text style={styles.supportSub}>Bold</Text>
226+
</View>
227+
</TouchableHighlight>
228+
<TouchableHighlight
229+
onPress={()=> {
230+
this.insertMarkdownBetween('_')
231+
}}
232+
style={styles.inputElementsStyle} >
233+
<View>
234+
<Text style={styles.supportMain}>_</Text>
235+
<Text style={styles.supportSub}>itali</Text>
236+
</View>
192237
</TouchableHighlight>
193238
<TouchableHighlight
194239
onPress={()=> {
195240
this.insertMarkdownBetween('> ')
196241
}}
197-
style={{paddingLeft: 15, paddingBottom: 10}} >
198-
<Text>&gt;</Text>
242+
style={styles.inputElementsStyle} >
243+
<View>
244+
<Text style={styles.supportMain}>&gt;</Text>
245+
<Text style={styles.supportSub}>Quote</Text>
246+
</View>
199247
</TouchableHighlight>
248+
{/* <TouchableHighlight
249+
onPress={()=> {
250+
this.insertMarkdownBetween('~~')
251+
}}
252+
style={styles.inputElementsStyle} >
253+
<View>
254+
<Text style={styles.supportMain}>~~</Text>
255+
<Text style={styles.supportSub}>Stri</Text>
256+
</View>
257+
</TouchableHighlight> */}
200258
<TouchableHighlight
201259
onPress={this.pasteContent.bind(this)}
202-
style={{paddingLeft: 15, paddingBottom: 10}} >
203-
<Text>paste</Text>
260+
style={styles.inputElementsStyle} >
261+
<Text style={{paddingTop: 6, marginLeft: 3, marginRight: 3, fontSize: 12, color: '#828282'}}>Paste</Text>
204262
</TouchableHighlight>
205263
</View>
206264
</ScrollView>

0 commit comments

Comments
 (0)