Visual tweaks on search results (#9615)

* Search results - visual tweaks * Fixed spinner not centered on profile search * Smaller spinner on profile
keybase · Nov 21, 2017 · 6499009 · 6499009
1 parent d17095d
commit 6499009
Show file tree

Hide file tree

Showing 10 changed files with 59 additions and 54 deletions.
diff --git a/shared/actions/search/index.js b/shared/actions/search/index.js
@@ -68,7 +68,7 @@ function _parseKeybaseRawResult(result: RawResult): Constants.SearchResult {
       leftUsername: keybase.username,
       leftService: 'Keybase',
 
-      rightFullname: keybase.full_name,
+      leftFullname: keybase.full_name,
       rightIcon: serviceIdToIcon(service.service_name),
       rightService: Constants.serviceIdToService(service.service_name),
       rightUsername: service.username,
@@ -83,7 +83,7 @@ function _parseKeybaseRawResult(result: RawResult): Constants.SearchResult {
       leftUsername: keybase.username,
       leftService: 'Keybase',
 
-      rightFullname: keybase.full_name,
+      leftFullname: keybase.full_name,
       rightIcon: null,
       rightService: null,
       rightUsername: null,
@@ -102,7 +102,7 @@ function _parseThirdPartyRawResult(result: RawResult): Constants.SearchResult {
       leftUsername: service.username,
       leftService: Constants.serviceIdToService(service.service_name),
 
-      rightFullname: keybase.full_name,
+      leftFullname: keybase.full_name,
       rightIcon: null,
       rightService: 'Keybase',
       rightUsername: keybase.username,
@@ -117,7 +117,7 @@ function _parseThirdPartyRawResult(result: RawResult): Constants.SearchResult {
       leftUsername: service.username,
       leftService: Constants.serviceIdToService(service.service_name),
 
-      rightFullname: service.full_name,
+      leftFullname: service.full_name,
       rightIcon: null,
       rightService: null,
       rightUsername: null,
@@ -140,11 +140,11 @@ function _parseRawResultToRow(result: RawResult, service: Constants.Service) {
 function _parseSuggestion(username: string) {
   return {
     id: _rawResultToId('keybase', username),
+    // TODO get this from the service
+    leftFullname: '',
     leftIcon: serviceIdToLogo24('keybase'),
-    leftUsername: username,
     leftService: Constants.serviceIdToService('keybase'),
-    // TODO get this from the service
-    rightFullname: '',
+    leftUsername: username,
     rightIcon: null,
     rightService: null,
     rightUsername: null,

diff --git a/shared/chat/conversation/index.desktop.js b/shared/chat/conversation/index.desktop.js
@@ -194,7 +194,7 @@ const dropOverlayStyle = {
 const styleSpinner = {
   alignSelf: 'center',
   marginTop: globalMargins.small,
-  width: globalMargins.large,
+  width: 24,
 }
 
 export default Conversation
diff --git a/shared/constants/search.js b/shared/constants/search.js
@@ -29,12 +29,12 @@ export type RowProps = {
   id: SearchResultId,
 
   leftFollowingState: FollowingState,
+  leftFullname: ?string,
   leftIcon: ?IconType, // If service is keybase this can be null
   leftService: Service,
   leftUsername: string,
 
   rightFollowingState: FollowingState,
-  rightFullname: ?string,
   rightIcon: ?IconType,
   rightService: ?Service,
   rightUsername: ?string,
@@ -52,24 +52,23 @@ export type RowProps = {
 export type SearchResult = {
   id: SearchResultId,
 
+  leftFullname: ?string,
   leftIcon: ?IconType, // If service is keybase this can be null
   leftService: Service,
   leftUsername: string,
 
-  rightFullname: ?string,
   rightIcon: ?IconType,
   rightService: ?Service,
   rightUsername: ?string,
 }
 
 export const makeSearchResult: I.RecordFactory<SearchResult> = I.Record({
   id: '',
-
+  leftFullname: null,
   leftIcon: null,
   leftService: 'Keybase',
   leftUsername: '',
 
-  rightFullname: null,
   rightIcon: null,
   rightService: null,
   rightUsername: null,

diff --git a/shared/profile/friendships.desktop.js b/shared/profile/friendships.desktop.js
@@ -85,7 +85,7 @@ class FriendshipsRender extends Component<Props> {
     if (!this.props.followersLoaded) {
       return (
         <Box style={{...globalStyles.flexBoxColumn, alignItems: 'center', paddingTop: 40}}>
-          <ProgressIndicator style={{width: 48}} />
+          <ProgressIndicator style={{width: 24}} />
         </Box>
       )
     }

diff --git a/shared/profile/search.desktop.js b/shared/profile/search.desktop.js
@@ -50,6 +50,7 @@ const styleCatcher = {
 }
 
 const styleSearchRow = {
+  ...globalStyles.flexBoxColumn,
   flexGrow: 1,
 }
 

diff --git a/shared/search/dumb.js b/shared/search/dumb.js
@@ -60,11 +60,11 @@ const commonServicesResultMapProps = {
 const commonServicesResultMapPropsKB = {
   ...commonServicesResultMapProps,
   leftFollowingState: 'NoState',
+  leftFullname: 'John Zila',
   leftIcon: 'jzila',
   leftService: 'Keybase',
   leftUsername: 'jzila',
   rightFollowingState: 'NoState',
-  rightFullname: 'John Zila',
   rightIcon: null,
   rightService: null,
   rightUsername: null,
@@ -73,9 +73,9 @@ const commonServicesResultMapPropsKB = {
 const commonServicesResultMapPropsService = {
   ...commonServicesResultMapProps,
   leftFollowingState: 'NoState',
+  leftFullname: 'John Zila',
   leftUsername: 'jzila',
   rightFollowingState: 'NoState',
-  rightFullname: 'John Zila',
   rightIcon: null,
   rightService: null,
   rightUsername: null,
@@ -110,7 +110,7 @@ const servicesResultMap: DumbComponentMap<ResultRow> = {
     },
     KeybaseGitHub: {
       ...commonServicesResultMapPropsKB,
-      rightFullname: 'John Zila on GitHub',
+      leftFullname: 'John Zila on GitHub',
       rightIcon: 'iconfont-identity-github',
       rightService: 'GitHub',
       rightUsername: 'jzilagithub',
@@ -185,7 +185,7 @@ const servicesResultsListMapCommonRows = {
     ...commonServicesResultMapPropsKB,
     leftFollowingState: 'Following',
     leftUsername: 'chris',
-    rightFullname: 'chris on GitHub',
+    leftFullname: 'chris on GitHub',
     rightIcon: 'iconfont-identity-github',
     rightService: 'GitHub',
     rightUsername: 'chrisname',
@@ -194,16 +194,16 @@ const servicesResultsListMapCommonRows = {
     ...commonServicesResultMapPropsKB,
     leftFollowingState: 'NotFollowing',
     leftUsername: 'cjb',
-    rightFullname: 'cjb on facebook',
+    leftFullname: 'cjb on facebook',
     rightIcon: 'iconfont-identity-facebook',
     rightService: 'Facebook',
     rightUsername: 'cjbname',
   },
   jzila: {
     ...commonServicesResultMapPropsKB,
     leftFollowingState: 'NoState',
+    leftFullname: 'jzila on twitter',
     leftUsername: 'jzila',
-    rightFullname: 'jzila on twitter',
     rightIcon: 'iconfont-identity-twitter',
     rightService: 'Twitter',
     rightUsername: 'jzilatwit',

diff --git a/shared/search/result-row/index.js b/shared/search/result-row/index.js
@@ -7,15 +7,15 @@ import IconOrAvatar from '../icon-or-avatar'
 import {followingStateToStyle} from '../shared'
 import {isMobile} from '../../constants/platform'
 
-const Left = ({leftService, leftIcon, leftUsername, leftFollowingState}) => {
+const Left = ({leftService, leftIcon, leftUsername, leftFollowingState, leftFullname}) => {
   return (
     <Box
       style={{
         ...globalStyles.flexBoxRow,
         alignItems: 'center',
+        flex: 1,
         height: '100%',
         paddingLeft: globalMargins.tiny,
-        width: isMobile ? 170 : 215,
       }}
     >
       <Box style={{...globalStyles.flexBoxCenter, width: isMobile ? 40 : 32}}>
@@ -26,51 +26,55 @@ const Left = ({leftService, leftIcon, leftUsername, leftFollowingState}) => {
           avatarSize={isMobile ? 40 : 32}
         />
       </Box>
-      <Text
-        type="BodySemibold"
-        style={{
-          ...followingStateToStyle(leftFollowingState),
-          marginLeft: globalMargins.small,
-        }}
-      >
-        {leftUsername}
-      </Text>
+      <Box style={{...globalStyles.flexBoxColumn, marginLeft: globalMargins.tiny}}>
+        <Text type="BodySemibold" style={followingStateToStyle(leftFollowingState)}>
+          {leftUsername}
+        </Text>
+        {!!leftFullname && <Text type="BodySmall">{leftFullname}</Text>}
+      </Box>
     </Box>
   )
 }
 
-const Middle = ({rightService, rightIcon, rightUsername, rightFullname, rightFollowingState}) => {
+const Middle = ({rightService, rightIcon, rightUsername, rightFollowingState}) => {
   return (
     <Box
       style={{
         ...globalStyles.flexBoxColumn,
-        flex: 1,
         height: '100%',
         justifyContent: 'center',
+        width: isMobile ? 100 : 120,
       }}
     >
-      <Box style={{...globalStyles.flexBoxRow, alignItems: 'center'}}>
+      <Box style={{...globalStyles.flexBoxRow, alignItems: 'flex-start'}}>
         <IconOrAvatar
           service={rightService}
           username={rightUsername}
           icon={rightIcon}
-          avatarSize={12}
+          avatarSize={isMobile ? 16 : 12}
           style={{
-            fontSize: 12,
-            height: 12,
+            ...globalStyles.flexBoxColumn,
+            fontSize: isMobile ? 16 : 12,
+            height: isMobile ? 16 : 12,
             marginRight: globalMargins.xtiny,
-            width: 12,
+            marginTop: isMobile ? 1 : 3,
+            width: isMobile ? 16 : 12,
           }}
         />
         {!!rightUsername &&
-          <Text type="BodySmallSemibold" style={followingStateToStyle(rightFollowingState)}>
+          <Text
+            type="BodySmallSemibold"
+            style={{
+              ...followingStateToStyle(rightFollowingState),
+              overflow: 'hidden',
+              whiteSpace: 'pre-wrap',
+              wordWrap: 'break-word',
+              flex: 1,
+            }}
+          >
             {rightUsername}
           </Text>}
       </Box>
-      {!!rightFullname &&
-        <Box style={globalStyles.flexBoxRow}>
-          <Text type="BodySmall">{rightFullname}</Text>
-        </Box>}
     </Box>
   )
 }
@@ -106,7 +110,7 @@ const Line = () => (
     style={{
       ...globalStyles.fillAbsolute,
       backgroundColor: globalColors.black_05,
-      left: 54,
+      left: 48,
       top: undefined,
       maxHeight: hairlineWidth,
       minHeight: hairlineWidth,
@@ -127,10 +131,10 @@ const SearchResultRow = (props: Constants.RowProps) => (
         leftIcon={props.leftIcon}
         leftService={props.leftService}
         leftUsername={props.leftUsername}
+        leftFullname={props.leftFullname}
       />
       <Middle
         rightFollowingState={props.rightFollowingState}
-        rightFullname={props.rightFullname}
         rightIcon={props.rightIcon}
         rightService={props.rightService}
         rightUsername={props.rightUsername}
@@ -152,8 +156,8 @@ const _clickableBoxStyleCommon = {
         maxHeight: 56,
       }
     : {
-        maxHeight: globalMargins.large,
-        minHeight: globalMargins.large,
+        maxHeight: 48,
+        minHeight: 48,
       }),
 }
 

diff --git a/shared/search/results-list/container.js b/shared/search/results-list/container.js
@@ -47,6 +47,7 @@ export default compose(
 
 const styleSpinner = {
   alignSelf: 'center',
-  marginTop: globalMargins.small,
+  marginTop: globalMargins.medium,
+  marginBottom: globalMargins.medium,
   width: 24,
 }
diff --git a/shared/search/search.stories.js b/shared/search/search.stories.js
@@ -112,11 +112,11 @@ const commonRow = {
 const kbRow = {
   ...commonRow,
   leftFollowingState: 'NoState',
+  leftFullname: 'John Zila',
   leftIcon: null,
   leftService: 'Keybase',
   leftUsername: 'jzila',
   rightFollowingState: 'NoState',
-  rightFullname: 'John Zila',
   rightIcon: null,
   rightService: null,
   rightUsername: null,
@@ -125,9 +125,9 @@ const kbRow = {
 const serviceRow = {
   ...commonRow,
   leftFollowingState: 'NoState',
+  leftFullname: 'John Zila',
   leftUsername: 'jzila',
   rightFollowingState: 'NoState',
-  rightFullname: 'John Zila',
   rightIcon: null,
   rightService: null,
   rightUsername: null,
@@ -217,7 +217,7 @@ const load = () => {
           <ResultRow {...kbRow} showTrackerButton={true} />
           <ResultRow
             {...kbRow}
-            rightFullname="John Zila on GitHub"
+            leftFullname="John Zila on GitHub"
             rightIcon="iconfont-identity-github"
             rightService="GitHub"
             rightUsername="jzilagithub"
@@ -281,26 +281,26 @@ const load = () => {
         chris: {
           ...kbRow,
           leftFollowingState: 'Following',
+          leftFullname: 'chris on GitHub',
           leftUsername: 'chris',
-          rightFullname: 'chris on GitHub',
           rightIcon: 'iconfont-identity-github',
           rightService: 'GitHub',
           rightUsername: 'chrisname',
         },
         cjb: {
           ...kbRow,
           leftFollowingState: 'NotFollowing',
+          leftFullname: 'cjb on facebook',
           leftUsername: 'cjb',
-          rightFullname: 'cjb on facebook',
           rightIcon: 'iconfont-identity-facebook',
           rightService: 'Facebook',
           rightUsername: 'cjbname',
         },
         jzila: {
           ...kbRow,
           leftFollowingState: 'NoState',
+          leftFullname: 'jzila on twitter',
           leftUsername: 'jzila',
-          rightFullname: 'jzila on twitter',
           rightIcon: 'iconfont-identity-twitter',
           rightService: 'Twitter',
           rightUsername: 'jzilatwit',

diff --git a/shared/teams/add-people/index.js b/shared/teams/add-people/index.js
@@ -111,7 +111,7 @@ const AddPeople = (props: Props) => (
       </Box>
       <Box style={{...globalStyles.scrollable, flex: 1, height: 500}}>
         {props.showSearchPending
-          ? <ProgressIndicator style={{width: globalMargins.large}} />
+          ? <ProgressIndicator style={{width: 24}} />
           : <SearchResultsList
               searchKey={'addToTeamSearch'}
               disableIfInTeamName={props.name}
-Original file line number
+Diff line change
@@ Expand Up / @@ -50,6 +50,7 @@ const styleCatcher = { @@
     }
     const styleSearchRow = {
+      ...globalStyles.flexBoxColumn,
       flexGrow: 1,
     }
@@ Expand Down @@