Improve the look of Publish

This commit is contained in:
Nat 2021-07-09 20:06:03 -03:00
parent 81b60209c3
commit 54ccb41443
1 changed files with 9 additions and 7 deletions

View File

@ -55,7 +55,6 @@ const PublishJsx = ({ navigation }) => {
}) })
.then(({ uri, type, width, height }) => { .then(({ uri, type, width, height }) => {
const name = uri.split("/").slice(-1)[0]; const name = uri.split("/").slice(-1)[0];
const newWidth = SCREEN_WIDTH * (3/4);
setState({...state, setState({...state,
loaded: true, loaded: true,
@ -68,8 +67,8 @@ const PublishJsx = ({ navigation }) => {
type: mime.getType(uri), type: mime.getType(uri),
name, name,
}, },
width: newWidth, width: SCREEN_WIDTH,
height: getAutoHeight(width, height, newWidth), height: getAutoHeight(width, height, SCREEN_WIDTH),
}, },
}); });
}); });
@ -143,9 +142,10 @@ const PublishJsx = ({ navigation }) => {
</View> </View>
<View style = { styles.form.container }> <View style = { styles.form.container }>
<TextInput <TextInput
placeholder = "Caption this post" placeholder = "Caption this post..."
value = { state.caption } value = { state.caption }
multiline multiline
autoFocus
onChangeText = { onChangeText = {
caption => setState({ ...state, caption }) caption => setState({ ...state, caption })
} }
@ -155,17 +155,17 @@ const PublishJsx = ({ navigation }) => {
<Selector <Selector
visibility = "public" visibility = "public"
active = { state.visibility } active = { state.visibility }
icon = "md-planet" icon = "globe-outline"
message = "Anyone can see this post" /> message = "Anyone can see this post" />
<Selector <Selector
visibility = "unlisted" visibility = "unlisted"
active = { state.visibility } active = { state.visibility }
icon = "md-unlock" icon = "lock-open-outline"
message = "Keep this post off public timelines" /> message = "Keep this post off public timelines" />
<Selector <Selector
visibility = "private" visibility = "private"
active = { state.visibility } active = { state.visibility }
icon = "md-lock" icon = "lock-closed-outline"
message = "Only share this with my followers" /> message = "Only share this with my followers" />
<TouchableOpacity <TouchableOpacity
@ -184,6 +184,7 @@ const PublishJsx = ({ navigation }) => {
}; };
const SCREEN_WIDTH = Dimensions.get("window").width; const SCREEN_WIDTH = Dimensions.get("window").width;
const SCREEN_HEIGHT = Dimensions.get("window").height;
const styles = { const styles = {
preview: { preview: {
container: { container: {
@ -192,6 +193,7 @@ const styles = {
image: { image: {
marginLeft: "auto", marginLeft: "auto",
marginRight: "auto", marginRight: "auto",
height: SCREEN_HEIGHT / 3,
}, },
}, },