ecency/ecency-mobile
1
1
Fork 0
mirror of https://github.com/ecency/ecency-mobile.git synced 2024-12-19 11:21:41 +03:00
Code Issues Actions Packages Projects Releases Wiki Activity

updated snippets modal styling

Browse Source
This commit is contained in:
Nouman Tahir 2021-03-14 21:38:55 +05:00
parent dc9cbbc4b2
commit 4ed29a9d84
8 changed files with 141 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/markdownEditor/view/markdownEditorStyles.js
View File

@ -82,4 +82,11 @@ export default EStyleSheet.create({
name: {
color: '$primaryDarkGray',
},
modalStyle: {
flex: 1,
backgroundColor: '$primaryBackgroundColor',
margin:0,
paddingTop:32,
paddingBottom:16
},
});

2
src/components/markdownEditor/view/markdownEditorView.js
View File

@ -351,7 +351,7 @@ const MarkdownEditorView = ({
//handleOnModalClose={() => setBeneficiaryModal(false)}
title={intl.formatMessage({ id: 'editor.snippets' })}
animationType="slide"
style={styles.beneficiaryModal}
style={styles.modalStyle}
>
<SnippetsModal username={currentAccount.username} handleOnSelect={_setTextAndSelection} />
</Modal>

90
src/components/snippetEditorModal/snippetEditorModal.tsx
View File

@ -4,6 +4,7 @@ import { TextInput } from '..';
import { ThemeContainer } from '../../containers';
import { Snippet } from '../../models';
import { addSnippet, updateSnippet } from '../../providers/ecency/ecency';
import { TextButton } from '../buttons';
import Modal from '../modal';
import styles from './snippetEditorModalStyles';
@ -77,46 +78,59 @@ const SnippetEditorModal = ({username, onSnippetsUpdated}: SnippetEditorModalPro
const _renderContent = (
<ThemeContainer>
{(isDarkTheme)=>(
<View style={styles.container}>
<View style={{height:Math.max(35, titleHeight)}}>
{({isDarkTheme})=>(
<View style={styles.container}>
<View style={{height:Math.max(35, titleHeight)}}>
<TextInput
autoFocus={true}
innerRef={titleInputRef}
style={styles.titleInput}
height={Math.max(35, titleHeight)}
placeholderTextColor={isDarkTheme ? '#526d91' : '#c1c5c7'}
maxLength={250}
placeholder={"Snippet Title"}
multiline
numberOfLines={2}
onContentSizeChange={(event) => {
setTitleHeight(event.nativeEvent.contentSize.height);
}}
onChangeText={setTitle}
value={title}
/>
</View>
<TextInput
innerRef={titleInputRef}
style={styles.titleInput}
height={Math.max(35, titleHeight)}
placeholderTextColor={isDarkTheme ? '#526d91' : '#c1c5c7'}
maxLength={250}
placeholder={"Snippet Title"}
multiline
numberOfLines={2}
onContentSizeChange={(event) => {
setTitleHeight(event.nativeEvent.contentSize.height);
}}
onChangeText={setTitle}
value={title}
autoCorrect={true}
value={body}
onChangeText={setBody}
placeholder={"Add snippet body here...."}
placeholderTextColor={isDarkTheme ? '#526d91' : '#c1c5c7'}
selectionColor="#357ce6"
style={styles.bodyWrapper}
underlineColorAndroid="transparent"
innerRef={bodyInputRef}
autoGrow={false}
scrollEnabled={false}
height={100}
/>
<View style={{flexDirection:'row', justifyContent:'flex-end', alignItems:'center'}}>
<TextButton
text={"CLOSE"}
onPress={()=>setShowModal(false)}
style={styles.closeButton}
/>
<TextButton
text={"SAVE"}
onPress={_saveSnippet}
textStyle={styles.btnText}
style={styles.saveButton}
/>
</View>
</View>
<TextInput
multiline
autoCorrect={true}
value={body}
onChangeText={setBody}
placeholder={"Add snippet body here...."}
placeholderTextColor={isDarkTheme ? '#526d91' : '#c1c5c7'}
selectionColor="#357ce6"
style={styles.bodyWrapper}
underlineColorAndroid="transparent"
innerRef={bodyInputRef}
autoGrow={false}
scrollEnabled={false}
height={100}
/>
<Button
title={"SAVE"}
onPress={_saveSnippet}
/>
</View>
)}
</ThemeContainer>
)
@ -125,12 +139,10 @@ const SnippetEditorModal = ({username, onSnippetsUpdated}: SnippetEditorModalPro
<Modal
isOpen={showModal}
handleOnModalClose={()=>{setShowModal(false)}}
isFullScreen
isCloseButton
presentationStyle="formSheet"
title={isNewSnippet?"Add Snippet":"Edit Snippet"}
animationType="slide"
style={styles.beneficiaryModal}
style={styles.modalStyle}
>
{_renderContent}
</Modal>

35
src/components/snippetEditorModal/snippetEditorModalStyles.ts
View File

@ -1,8 +1,18 @@
import { TextStyle, StyleSheet, ViewStyle } from 'react-native';
import EStyleSheet from 'react-native-extended-stylesheet';
export default EStyleSheet.create({
modalStyle: {
flex: 1,
backgroundColor: '$primaryBackgroundColor',
margin:0,
paddingTop:32,
paddingBottom:24
},
container:{
flex:1
flex:1,
marginTop:24,
paddingHorizontal:24,
},
titleInput:{
color: '$primaryBlack',
@ -11,7 +21,9 @@ export default EStyleSheet.create({
textAlignVertical: 'top',
paddingVertical: 0,
backgroundColor:'$primaryBackgroundColor',
},
borderBottomWidth:StyleSheet.hairlineWidth,
borderBottomColor:'$primaryDarkGray'
} as TextStyle,
bodyWrapper: {
fontSize: 16,
paddingTop: 16,
@ -20,4 +32,23 @@ export default EStyleSheet.create({
textAlignVertical: 'top',
backgroundColor: '$primaryBackgroundColor',
},
btnText:{
color:'$pureWhite'
} as TextStyle,
saveButton:{
backgroundColor:'$primaryBlue',
width:150,
paddingVertical:16,
borderRadius:32,
justifyContent:'center',
alignItems:'center'
} as ViewStyle,
closeButton:{
marginRight:16,
paddingVertical:8,
borderRadius:16,
justifyContent:'center',
alignItems:'center'
} as ViewStyle
})

31
src/components/snippetsModal/snippetItem.tsx
View File

@ -1,5 +1,6 @@
import * as React from 'react';
import { Text, View, Button } from 'react-native';
import IconButton from '../iconButton';
import styles from './snippetsModalStyles';
interface SnippetItemProps {
@ -13,16 +14,28 @@ interface SnippetItemProps {
const SnippetItem = ({title, body, index, onEditPress, onRemovePress}: SnippetItemProps) => {
return (
<View style={[styles.itemWrapper, index % 2 !== 0 && styles.itemWrapperGray]}>
<Text style={styles.title}>{`${title}`}</Text>
<View style={styles.itemHeader}>
<Text style={styles.title} numberOfLines={1} >{`${title}`}</Text>
<IconButton
iconStyle={styles.itemIcon}
style={styles.itemIconWrapper}
iconType="MaterialCommunityIcons"
name="pencil"
onPress={onEditPress}
size={20}
/>
<IconButton
iconStyle={styles.itemIcon}
style={styles.itemIconWrapper}
iconType="MaterialCommunityIcons"
name="delete"
onPress={onRemovePress}
size={20}
/>
</View>
<Text style={styles.body} numberOfLines={2} ellipsizeMode="tail">{`${body}`}</Text>
<Button
title='Edit'
onPress={onEditPress}
/>
<Button
title={'Remote'}
onPress={onRemovePress}
/>
</View>
)
};

4
src/components/snippetsModal/snippetsModal.tsx
View File

@ -92,7 +92,7 @@ const SnippetsModal = ({ username, handleOnSelect }) => {
const _renderEmptyContent = () => {
return (
<>
<Text style={styles.title}>Nothing here</Text>
<Text style={styles.title}>No snippets found</Text>
</>
);
};
@ -110,7 +110,7 @@ const SnippetsModal = ({ username, handleOnSelect }) => {
return (
<>
<MainButton
style={{ width: 150 }}
style={{ width: 150, marginTop:16, }}
onPress={_onPress}
iconName="plus"
iconType="MaterialCommunityIcons"

31
src/components/snippetsModal/snippetsModalStyles.ts
View File

@ -4,23 +4,40 @@ export default EStyleSheet.create({
container: {
flex: 1,
justifyContent: 'space-between',
padding: 16,
paddingVertical: 8,
},
bodyWrapper: {
flex: 3,
paddingTop: 20,
paddingHorizontal:16
},
itemWrapper: {
padding: 16,
paddingHorizontal: 16,
paddingVertical:8,
borderRadius: 8,
backgroundColor: '$primaryBackgroundColor',
},
itemHeader:{
flexDirection:'row',
alignItems:'center',
height:35
},
itemWrapperGray: {
backgroundColor: '$primaryLightBackground',
},
title: {
fontWeight: '600',
paddingBottom: 10,
itemIcon:{
color:'$primaryDarkGray',
},
itemIconWrapper:{
marginLeft:8,
},
title: {
fontWeight: '700',
flex:1,
fontSize:16,
color:'$primaryBlack'
},
body: {
paddingBottom:8,
color:'$primaryBlack'
},
body: {},
});

2
src/providers/ecency/ecency.js
View File

@ -180,7 +180,7 @@ export const getSnippets = (username) =>
*/
export const addSnippet = (currentUsername, title, body) =>
api
.post(`/fragment`, {
.post('/fragment', {
username: currentUsername,
title,
body,