make Notebook dialog fullscreen

This commit is contained in:
ammarahm-ed
2020-05-12 02:21:25 +05:00
parent a9c4a9c1f4
commit 4bcdbe4964

View File

@@ -127,8 +127,9 @@ export class AddNotebookDialog extends React.Component {
description: this.description, description: this.description,
id: id, id: id,
}); });
console.log(t);
await db.notebooks.notebook(id).topics.add(...t); await db.notebooks.notebook(id).topics.add(...t);
} else { } else {
await db.notebooks.add({ await db.notebooks.add({
title: this.title, title: this.title,
@@ -232,10 +233,10 @@ export class AddNotebookDialog extends React.Component {
/> />
<View <View
style={{ style={{
...getElevation(5), width: DDS.isTab ? '50%' : '100%',
width: DDS.isTab ? '50%' : '80%', height: DDS.isTab ? '80%' : '100%',
maxHeight: '80%', maxHeight: DDS.isTab ? '80%' : '100%',
borderRadius: 5, borderRadius: DDS.isTab ? 5 : 0,
backgroundColor: colors.bg, backgroundColor: colors.bg,
paddingHorizontal: ph, paddingHorizontal: ph,
paddingVertical: pv, paddingVertical: pv,
@@ -246,13 +247,13 @@ export class AddNotebookDialog extends React.Component {
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
}}> }}>
<Icon name="book-outline" color={colors.accent} size={SIZE.lg} /> <Icon name="book-outline" color={colors.accent} size={SIZE.xl} />
<Text <Text
style={{ style={{
color: colors.accent, color: colors.accent,
fontFamily: WEIGHT.bold, fontFamily: WEIGHT.bold,
marginLeft: 5, marginLeft: 5,
fontSize: SIZE.md, fontSize: SIZE.xl,
}}> }}>
{toEdit && toEdit.dateCreated {toEdit && toEdit.dateCreated
? 'Edit Notebook' ? 'Edit Notebook'
@@ -263,18 +264,20 @@ export class AddNotebookDialog extends React.Component {
<TextInput <TextInput
ref={ref => (this.titleRef = ref)} ref={ref => (this.titleRef = ref)}
style={{ style={{
padding: pv - 5, padding: pv - 2,
borderWidth: 1.5, borderWidth: 1.5,
borderColor: titleFocused ? colors.accent : colors.nav, borderColor: titleFocused ? colors.accent : colors.nav,
paddingHorizontal: ph, paddingHorizontal: ph,
borderRadius: 5, borderRadius: 5,
minHeight: 45,
fontSize: SIZE.sm, fontSize: SIZE.sm,
height: 35,
fontFamily: WEIGHT.regular, fontFamily: WEIGHT.regular,
color: colors.pri, color: colors.pri,
marginTop: 20, marginTop: 20,
marginBottom: 5, marginBottom: 5,
}} }}
numberOfLines={1}
multiline={false}
onFocus={() => { onFocus={() => {
this.setState({ this.setState({
titleFocused: true, titleFocused: true,
@@ -298,13 +301,12 @@ export class AddNotebookDialog extends React.Component {
<TextInput <TextInput
ref={ref => (this.descriptionRef = ref)} ref={ref => (this.descriptionRef = ref)}
style={{ style={{
padding: pv - 5, padding: pv -2 ,
borderWidth: 1.5, borderWidth: 1.5,
borderColor: descFocused ? colors.accent : colors.nav, borderColor: descFocused ? colors.accent : colors.nav,
paddingHorizontal: ph, paddingHorizontal: ph,
borderRadius: 5, borderRadius: 5,
minHeight: 35, fontSize: SIZE.sm,
fontSize: SIZE.xs + 1,
fontFamily: WEIGHT.regular, fontFamily: WEIGHT.regular,
color: colors.pri, color: colors.pri,
marginTop: 5, marginTop: 5,
@@ -312,6 +314,7 @@ export class AddNotebookDialog extends React.Component {
}} }}
textAlignVertical="top" textAlignVertical="top"
numberOfLines={2} numberOfLines={2}
maxLength={150}
onFocus={() => { onFocus={() => {
this.setState({ this.setState({
descFocused: true, descFocused: true,
@@ -330,7 +333,7 @@ export class AddNotebookDialog extends React.Component {
this.topicInputRef.focus(); this.topicInputRef.focus();
}} }}
multiline multiline
placeholder="Write a short description about notebook (optional)" placeholder="Write a short description about your notebook (optional)"
placeholderTextColor={colors.icon} placeholderTextColor={colors.icon}
/> />
@@ -368,11 +371,11 @@ export class AddNotebookDialog extends React.Component {
}} }}
onSubmitEditing={this.onSubmit} onSubmitEditing={this.onSubmit}
style={{ style={{
padding: pv - 5, padding: pv - 2,
paddingHorizontal: 0, paddingHorizontal: 0,
borderRadius: 5, borderRadius: 5,
borderWidth: 1.5, borderWidth: 1.5,
height: 35, minHeight: 45,
fontSize: SIZE.sm, fontSize: SIZE.sm,
borderColor: topicInputFoused ? colors.accent : colors.nav, borderColor: topicInputFoused ? colors.accent : colors.nav,
fontFamily: WEIGHT.regular, fontFamily: WEIGHT.regular,
@@ -381,7 +384,7 @@ export class AddNotebookDialog extends React.Component {
width: '85%', width: '85%',
maxWidth: '85%', maxWidth: '85%',
}} }}
placeholder="Add a topic" placeholder="Add a new topic"
placeholderTextColor={colors.icon} placeholderTextColor={colors.icon}
/> />
<TouchableOpacity <TouchableOpacity
@@ -393,7 +396,7 @@ export class AddNotebookDialog extends React.Component {
borderColor: topicInputFoused ? colors.accent : colors.nav, borderColor: topicInputFoused ? colors.accent : colors.nav,
borderRadius: 5, borderRadius: 5,
width: '12%', width: '12%',
height: 35, minHeight: 45,
}}> }}>
<Icon <Icon
name="plus" name="plus"
@@ -461,7 +464,7 @@ export class AddNotebookDialog extends React.Component {
color: 'white', color: 'white',
fontSize: SIZE.sm, fontSize: SIZE.sm,
}}> }}>
Add {toEdit && toEdit.dateCreated ? 'Save' : 'Add'}
</Text> </Text>
</TouchableOpacity> </TouchableOpacity>