john/deighton-ar
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fix layout issues on Android

Browse Source
This commit is contained in:
John Lyon-Smith
2018-04-08 10:17:15 -07:00
parent dd2adf807f
commit 5634acb967
9 changed files with 119 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
.idea/workspace.xml generated
View File

@@ -2,20 +2,8 @@
<project version="4">
<component name="ChangeListManager">
<list default="true" id="6f884dce-583e-4e88-a1c3-0ae6c4d6d70b" name="Default" comment="">
<change beforePath="$PROJECT_DIR$/mobile/.babelrc" afterPath="$PROJECT_DIR$/mobile/.babelrc" />
<change beforePath="$PROJECT_DIR$/mobile/android/build.gradle" afterPath="$PROJECT_DIR$/mobile/android/build.gradle" />
<change beforePath="$PROJECT_DIR$/mobile/package-lock.json" afterPath="$PROJECT_DIR$/mobile/package-lock.json" />
<change beforePath="$PROJECT_DIR$/mobile/package.json" afterPath="$PROJECT_DIR$/mobile/package.json" />
<change beforePath="$PROJECT_DIR$/mobile/src/screens/Error.js" afterPath="$PROJECT_DIR$/mobile/src/screens/Error.js" />
<change beforePath="$PROJECT_DIR$/mobile/src/screens/Login.js" afterPath="$PROJECT_DIR$/mobile/src/screens/Login.js" />
<change beforePath="$PROJECT_DIR$/mobile/src/ui/BoundButton.js" afterPath="$PROJECT_DIR$/mobile/src/ui/BoundButton.js" />
<change beforePath="$PROJECT_DIR$/mobile/src/ui/BoundInput.js" afterPath="$PROJECT_DIR$/mobile/src/ui/BoundInput.js" />
<change beforePath="$PROJECT_DIR$/mobile/src/ui/BoundSwitch.js" afterPath="$PROJECT_DIR$/mobile/src/ui/BoundSwitch.js" />
<change beforePath="$PROJECT_DIR$/server/package-lock.json" afterPath="$PROJECT_DIR$/server/package-lock.json" />
<change beforePath="$PROJECT_DIR$/server/package.json" afterPath="$PROJECT_DIR$/server/package.json" />
<change beforePath="$PROJECT_DIR$/website/src/Teams/TeamList.js" afterPath="$PROJECT_DIR$/website/src/Teams/TeamList.js" />
<change beforePath="$PROJECT_DIR$/website/src/Teams/Teams.js" afterPath="$PROJECT_DIR$/website/src/Teams/Teams.js" />
<change beforePath="$PROJECT_DIR$/website/src/Users/Users.js" afterPath="$PROJECT_DIR$/website/src/Users/Users.js" />
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" afterPath="$PROJECT_DIR$/.idea/workspace.xml" />
<change beforePath="$PROJECT_DIR$/version.json5" afterPath="$PROJECT_DIR$/version.json5" />
</list>
<option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
<option name="TRACKING_ENABLED" value="true" />
@@ -53,11 +41,11 @@
<foldersAlwaysOnTop value="true" />
</navigator>
<panes>
<pane id="AndroidView" />
<pane id="Scope" />
<pane id="Scratches" />
<pane id="ProjectPane" />
<pane id="Scope" />
<pane id="PackagesPane" />
<pane id="AndroidView" />
</panes>
</component>
<component name="PropertiesComponent">
@@ -162,7 +150,6 @@
</component>
<component name="ToolWindowManager">
<frame x="-4316" y="117" width="1522" height="1014" extended-state="0" />
<editor active="true" />
<layout>
<window_info id="TODO" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="6" side_tool="false" content_ui="tabs" />
<window_info id="Palette&#9;" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="3" side_tool="false" content_ui="tabs" />

1
mobile/src/API.js
View File

@@ -61,7 +61,6 @@ class API extends EventEmitter {
this.emit("login")
})
.catch((err) => {
console.error(err)
AsyncStorage.removeItem(authTokenName)
this.token = null
this.user = {}

49
mobile/src/Auth/Login.js
View File

@@ -7,7 +7,7 @@ import {
Switch,
TextInput,
View,
Button
Button,
} from "react-native"
import { MessageModal } from "../Modal"
import logoImage from "./images/deighton.png"
@@ -15,27 +15,29 @@ import { FormBinder } from "react-form-binder"
import { api } from "../API"
import { BoundSwitch, BoundInput, BoundButton } from "../ui"
import KeyboardSpacer from "react-native-keyboard-spacer"
import { versionInfo } from "../version"
import autobind from "autobind-decorator"
import { isIphoneX } from "react-native-iphone-x-helper"
export class Login extends React.Component {
static bindings = {
email: {
alwaysGet: true,
isValid: (r, v) => v !== ""
isValid: (r, v) => v !== "",
},
password: {
alwaysGet: true,
isValid: (r, v) => v !== ""
isValid: (r, v) => v !== "",
},
rememberMe: {
alwaysGet: true,
initValue: true,
isValid: true
isValid: true,
},
login: {
noValue: true,
isDisabled: r => !(r.anyModified && r.allValid)
}
isDisabled: (r) => !(r.anyModified && r.allValid),
},
}
static styles = StyleSheet.create({
@@ -44,39 +46,39 @@ export class Login extends React.Component {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center"
justifyContent: "center",
},
logo: {
width: "50%"
width: "50%",
},
inputRow: {
paddingTop: 10,
width: "60%",
flexDirection: "column",
justifyContent: "flex-end",
alignItems: "flex-start"
alignItems: "flex-start",
},
switchRow: {
paddingTop: 10,
width: "60%",
flexDirection: "row",
justifyContent: "flex-end",
alignItems: "center"
alignItems: "center",
},
buttonRow: {
paddingTop: 10,
width: "60%",
flexDirection: "row",
justifyContent: "flex-end",
alignItems: "center"
}
alignItems: "center",
},
})
constructor(props) {
super(props)
this.state = {
binder: new FormBinder({ email: "john@lyon-smith.org" }, Login.bindings),
messageModal: null
messageModal: null,
}
}
@@ -88,16 +90,16 @@ export class Login extends React.Component {
if (obj) {
api
.login(obj.email, obj.password, obj.rememberMe)
.then(user => {
.then((user) => {
history.replace("/home")
})
.catch(error => {
.catch((error) => {
this.setState({
messageModal: {
icon: "hand",
message: "Unable to login",
detail: error.message
}
detail: error.message,
},
})
})
}
@@ -152,6 +154,17 @@ export class Login extends React.Component {
binder={this.state.binder}
/>
</View>
<View style={{ width: "60%", alignItems: "center" }}>
<Text
style={{
paddingTop: 15,
alignSelf: "flex-end",
color: "lightgray",
fontSize: 10,
}}>
{versionInfo.version}
</Text>
</View>
<MessageModal
open={!!messageModal}
icon={messageModal ? messageModal.icon : ""}
@@ -159,7 +172,7 @@ export class Login extends React.Component {
detail={messageModal ? messageModal.detail : ""}
onDismiss={messageModal && this.handleMessageDismiss}
/>
<KeyboardSpacer />
{Platform.OS === "ios" && <KeyboardSpacer />}
</View>
)
}

3
mobile/src/Home/Home.js
View File

@@ -186,7 +186,8 @@ export class Home extends React.Component {
style={{ marginLeft: 10, marginRight: 5, tintColor: "gray" }}
/>
<TextInput
style={{ flexGrow: 1, height: "100%" }}
style={{ flexGrow: 1, flexBasis: 0, height: "100%" }}
underlineColorAndroid="#F4F4F4"
placeholder="Search"
/>
<Icon

18
mobile/src/WorkItem/WorkItem.js
View File

@@ -60,7 +60,7 @@ export class WorkItem extends React.Component {
},
location: {
isValid: true,
isDisabled: true,
isReadOnly: true,
},
details: {
isValid: (r, v) => v !== "",
@@ -210,6 +210,7 @@ export class WorkItem extends React.Component {
/>
</View>
<View style={styles.panel}>
<View style={{ flexDirection: "column", justifyContent: "center" }}>
<MapView
style={{
flexDirection: "column",
@@ -218,6 +219,9 @@ export class WorkItem extends React.Component {
height: 400,
marginBottom: 10,
}}
showsBuildings={false}
showsTraffic={false}
showsIndoors={false}
zoomControlEnabled
initialRegion={{
latitude: 43.653908,
@@ -225,14 +229,18 @@ export class WorkItem extends React.Component {
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}
onRegionChange={this.handleRegionChange}>
onRegionChange={this.handleRegionChange}
/>
<Icon
name="target"
size={24}
style={{ alignSelf: "center" }}
pointerEvents={false}
style={{
position: "absolute",
alignSelf: "center",
}}
/>
</MapView>
</View>
<BoundInput
ref={(ref) => (this.latLngInput = ref)}
binder={binder}
@@ -258,7 +266,7 @@ export class WorkItem extends React.Component {
detail={messageModal ? messageModal.detail : ""}
onDismiss={messageModal && this.handleMessageDismiss}
/>
<KeyboardSpacer />
{Platform.OS === "ios" && <KeyboardSpacer />}
</View>
)
}

9
mobile/src/ui/BoundInput.js
View File

@@ -1,6 +1,6 @@
import React from "react"
import PropTypes from "prop-types"
import { TextInput, Text, View } from "react-native"
import { TextInput, Text, View, Platform } from "react-native"
import autobind from "autobind-decorator"
export class BoundInput extends React.Component {
@@ -42,7 +42,7 @@ export class BoundInput extends React.Component {
render() {
const { label, password, name, placeholder, message, lines } = this.props
const { visible, disabled, value, valid } = this.state
const { visible, disabled, readOnly, value, valid } = this.state
if (!visible) {
return null
@@ -62,11 +62,12 @@ export class BoundInput extends React.Component {
borderWidth: 1,
fontSize: 16,
paddingTop: 7,
paddingBottom: 7,
paddingBottom: Platform.OS === "ios" ? 7 : 0,
textAlignVertical: "top",
}}
multiline={lines > 1}
numberOfLines={lines}
editable={!disabled}
editable={!disabled && !readOnly}
autoCapitalize="none"
underlineColorAndroid="white"
value={value}

63
mobile/src/ui/Header.js
View File

@@ -1,10 +1,13 @@
import React, { Component } from 'react'
import { View, TouchableOpacity, Text } from 'react-native'
import { Icon } from './Icon'
import PropTypes from 'prop-types'
import { ifIphoneX } from 'react-native-iphone-x-helper'
import React, { Component } from "react"
import { View, Platform, TouchableOpacity, Text } from "react-native"
import { Icon } from "./Icon"
import PropTypes from "prop-types"
import { ifIphoneX } from "react-native-iphone-x-helper"
const headerButtonShape = { icon: PropTypes.string.isRequired, onPress: PropTypes.func }
const headerButtonShape = {
icon: PropTypes.string.isRequired,
onPress: PropTypes.func,
}
export class Header extends Component {
static propTypes = {
@@ -15,8 +18,8 @@ export class Header extends Component {
}
static defaultProps = {
rightButton: { icon: 'none' },
leftButton: { icon: 'none' },
rightButton: { icon: "none" },
leftButton: { icon: "none" },
visible: true,
}
@@ -25,35 +28,49 @@ export class Header extends Component {
let right = null
if (!rightButton) {
right = (
<Icon name='' size={24} style={{ marginRight: 15 }} />
)
right = <Icon name="" size={24} style={{ marginRight: 15 }} />
} else if (disabled) {
right = (
<Icon name={rightButton.icon} size={24} style={{ marginRight: 15, tintColor: 'lightgrey' }} />
<Icon
name={rightButton.icon}
size={24}
style={{ marginRight: 15, tintColor: "lightgrey" }}
/>
)
} else {
right = (
<TouchableOpacity onPress={rightButton.onPress}>
<Icon name={rightButton.icon} size={24} style={{ marginRight: 15, tintColor: 'grey' }} />
<Icon
name={rightButton.icon}
size={24}
style={{ marginRight: 15, tintColor: "grey" }}
/>
</TouchableOpacity>
)
}
return (
<View style={{
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
width: '100%',
<View
style={[
{
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
width: "100%",
height: 45,
backgroundColor: '#F4F4F4',
...ifIphoneX({ marginTop: 50 }, { marginTop: 20 })
}}>
backgroundColor: "#F4F4F4",
},
Platform.OS === "ios" &&
ifIphoneX({ marginTop: 50 }, { marginTop: 20 }),
]}>
<TouchableOpacity onPress={leftButton.onPress}>
<Icon name={leftButton.icon} size={24} style={{ marginLeft: 15, tintColor: 'gray' }} />
<Icon
name={leftButton.icon}
size={24}
style={{ marginLeft: 15, tintColor: "gray" }}
/>
</TouchableOpacity>
<Text style={{ color: 'gray', fontSize: 18, }}>{title}</Text>
<Text style={{ color: "gray", fontSize: 18 }}>{title}</Text>
{right}
</View>
)

7
mobile/src/version.js Normal file
View File

@@ -0,0 +1,7 @@
export const versionInfo = {
version: '1.0.0',
fullVersion: '1.0.0-20180407.3',
title: 'Deighton AR System',
copyright: '© 2018, Kingston Software Solutions.',
supportEmail: 'support@kss.us.com',
}

1
version.json5
View File

@@ -3,6 +3,7 @@
"package.json",
"website/.env",
"website/src/version.js",
"mobile/src/version.js",
"mobile/ios/DeightonAR/info.plist",
"mobile/android/app/build.gradle",
"mobile/android/app/src/main/AndroidManifest.xml",