From 1dbbb88afcc4d702cb82c46562c193b7394cf75a Mon Sep 17 00:00:00 2001 From: "Andrew W. Hill" Date: Fri, 5 Apr 2019 17:02:11 -0700 Subject: [PATCH] moves variable margins etc outside of avatar component (#1018) * moves variable margins etc outside of avatar component * show usernameless contacts last in contact list * cleans up contact display when long name or key * ensure (?) is visible * tightening up * remove avatar color --- App/Components/Avatar.tsx | 40 ++++++++------------- App/Components/GroupCard/index.tsx | 6 +++- App/Components/GroupCard/statics/styles.tsx | 3 ++ App/Components/Styles/ContactModal.tsx | 4 ++- App/Components/join.tsx | 4 ++- App/Components/message.tsx | 4 ++- App/Containers/Contact.tsx | 13 +++++-- App/Containers/Contacts.tsx | 19 +++++++--- App/SB/components/FeedItem/index.js | 2 +- 9 files changed, 58 insertions(+), 37 deletions(-) diff --git a/App/Components/Avatar.tsx b/App/Components/Avatar.tsx index 8aad3b569..2baa1a497 100644 --- a/App/Components/Avatar.tsx +++ b/App/Components/Avatar.tsx @@ -19,7 +19,6 @@ interface StateProps { local: boolean started: boolean online: boolean - color: string } type Props = OwnProps & StateProps & Partial @@ -66,39 +65,35 @@ class Avatar extends React.Component { } render () { - const { style, icon, target, local, started, online, color } = this.props - let width: string | number = this.state.defaultSize - let height: string | number = this.state.defaultSize - if (style) { - if (style.width) { - width = height = style.width - } else if (style.height) { - width = height = style.height - } - } + const { style, icon, target, local, started, online } = this.props + const width = style && style.width ? style.width : this.state.defaultSize + const height = style && style.height ? style.height : width + const { borderRadius: radius } = this.state - const borderRadius = radius || Number(width) / 2 + const borderRadius = style && style.borderRadius ? style.borderRadius : typeof width === 'number' ? width / 2 : radius // If requested or if no target is known, show the ( ? ) icon if (icon || !target) { - const heightNumber = typeof height === 'number' ? height as number : this.state.defaultSize - const borderWidth = this.props.style && this.props.style.borderWidth ? this.props.style.borderWidth as number : 0 + const fontSize = Math.ceil(this.state.borderRadius * 2) return ( @@ -112,7 +107,7 @@ class Avatar extends React.Component { return ( { target = localTarget } - let color = 'hsla(200, 60%, 100%, 0.3)' - if (target) { - const h = Math.floor(360 * target.charCodeAt(target.length - 1) / 125) - const hue = h < 360 ? h > 0 ? h : 0 : 360 - color = `hsla(${hue},90%,60%,0.3)` - } - const started = state.textile.nodeState.state === 'started' const online = state.textile.online - return { target, local, started, color, online } + return { target, local, started, online } } export default connect(mapStateToProps)(Avatar) diff --git a/App/Components/GroupCard/index.tsx b/App/Components/GroupCard/index.tsx index 733c576bb..45b0098b5 100644 --- a/App/Components/GroupCard/index.tsx +++ b/App/Components/GroupCard/index.tsx @@ -65,7 +65,11 @@ const GroupCard = (props: ScreenProps) => { { members.slice(0, 8).map((mem: pb.IContact, i: number) => { const imageStyle = cardImageStyle(members.length, i) - return () + return ( + + + + ) })} diff --git a/App/Components/GroupCard/statics/styles.tsx b/App/Components/GroupCard/statics/styles.tsx index dccdcece5..70ba58546 100644 --- a/App/Components/GroupCard/statics/styles.tsx +++ b/App/Components/GroupCard/statics/styles.tsx @@ -26,6 +26,9 @@ export function cardImageStyle (count: number, index: number): ImageStyle { return { ...baseStyle, width: ROW_COLUMN * 0.66, + height: ROW_COLUMN * 0.66, + borderRadius: (ROW_COLUMN * 0.66) / 2, + overflow: 'hidden', backgroundColor: 'white', // avoids any transparencies blending marginBottom, marginLeft, diff --git a/App/Components/Styles/ContactModal.tsx b/App/Components/Styles/ContactModal.tsx index 234a9cdc9..2c234e7ae 100644 --- a/App/Components/Styles/ContactModal.tsx +++ b/App/Components/Styles/ContactModal.tsx @@ -18,8 +18,8 @@ export default StyleSheet.create({ backgroundColor: 'white' } as ViewStyle, profile: { - width: '100%', flexDirection: 'row', + flex: 1, alignItems: 'center', paddingVertical: 50, paddingHorizontal: 19, @@ -29,6 +29,8 @@ export default StyleSheet.create({ } as ViewStyle, username: { marginLeft: 18, + marginRight: 6, + flex: 1, fontFamily: 'Biotif-Bold', color: Colors.cover, fontSize: 32 diff --git a/App/Components/join.tsx b/App/Components/join.tsx index 8b03d64f9..59efcf1c6 100644 --- a/App/Components/join.tsx +++ b/App/Components/join.tsx @@ -15,7 +15,9 @@ const CONTAINER: ViewStyle = { const AVATAR: ImageStyle = { height: size._024, - width: size._024 + width: size._024, + backgroundColor: color.grey_5, + borderRadius: size._024 / 2 } const CONTENT: ViewStyle = { diff --git a/App/Components/message.tsx b/App/Components/message.tsx index 55c04d137..80b4f7cdc 100644 --- a/App/Components/message.tsx +++ b/App/Components/message.tsx @@ -17,7 +17,9 @@ const CONTAINER = (alignItems: 'center' | 'flex-start'): ViewStyle => { const AVATAR: ImageStyle = { height: size._024, - width: size._024 + width: size._024, + backgroundColor: color.grey_5, + borderRadius: size._024 / 2 } const CONTENT: ViewStyle = { diff --git a/App/Containers/Contact.tsx b/App/Containers/Contact.tsx index 2009a3b68..af22ae18a 100644 --- a/App/Containers/Contact.tsx +++ b/App/Containers/Contact.tsx @@ -25,6 +25,7 @@ interface NavProps { } interface StateProps { + displayName: string threadThumbs: ReadonlyArray } @@ -53,12 +54,18 @@ class ContactModal extends React.Component { render () { const avatar = this.props.navigation.getParam('avatar') - const username = this.props.navigation.getParam('username') + // const username = this.props.navigation.getParam('username') return ( - {username} + + {this.props.displayName} + @@ -76,8 +83,10 @@ class ContactModal extends React.Component { } const mapStateToProps = (state: RootState, ownProps: NavigationScreenProps): StateProps => { + const username = ownProps.navigation.getParam('username') const address = ownProps.navigation.getParam('address') return { + displayName: username ? username : address.substring(0, 12), threadThumbs: getThreadThumbs(state, address, 'name') } } diff --git a/App/Containers/Contacts.tsx b/App/Containers/Contacts.tsx index 5bf3925c1..329f10952 100644 --- a/App/Containers/Contacts.tsx +++ b/App/Containers/Contacts.tsx @@ -116,11 +116,11 @@ class Contacts extends React.Component { renderRow = (row: ListRenderItemInfo) => { const { item } = row - const leftItem = + const leftItem = const rightItems = [] return ( { const mapStateToProps = (state: RootState): StateProps => { const contacts = state.contacts.contacts.slice().sort((a, b) => { - const aSortKey = a.name || a.address - const bSortKey = b.name || b.address + let aSortKey = a.name + let bSortKey = b.name + if (a.name && !b.name) { + // move b later if no name + return -1 + } else if (!a.name && b.name) { + // move a later if no name + return 1 + } else if (!a.name && !b.name) { + // if neither have name, use address and continue + aSortKey = a.address + bSortKey = b.address + } if (aSortKey < bSortKey) { return -1 } else if (aSortKey > bSortKey) { diff --git a/App/SB/components/FeedItem/index.js b/App/SB/components/FeedItem/index.js index ea0313b67..cbb6632fc 100644 --- a/App/SB/components/FeedItem/index.js +++ b/App/SB/components/FeedItem/index.js @@ -35,7 +35,7 @@ const FeedItem = props => { style={{...readStyle, justifyContent: 'center', alignItems: 'center', alignContent: 'center'}} >