kylefang/devhub
1
0
Fork 0
mirror of https://github.com/zhigang1992/devhub.git synced 2026-06-17 19:25:38 +08:00
Code Issues Packages Projects Releases Wiki Activity

Show only avatar without icon on colum headers

Browse Source
This commit is contained in:
Bruno Lemos
2018-11-09 04:21:13 -02:00
parent 82ac86da8e
commit d0c46b7a38
4 changed files with 34 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
packages/shared/src/components/columns/ColumnHeaderItem.tsx
View File

@@ -15,7 +15,7 @@ import { connect } from 'react-redux'
import { Octicons as Icon } from '../../libs/vector-icons'
import * as selectors from '../../redux/selectors'
import { contentPadding, mutedOpacity } from '../../styles/variables'
import { ExtractPropsFromConnector, GitHubIcon } from '../../types'
import { Column, ExtractPropsFromConnector, GitHubIcon } from '../../types'
import { Avatar, AvatarProps } from '../common/Avatar'
import {
ConditionalWrap,
@@ -101,11 +101,9 @@ class ColumnHeaderItemComponent extends PureComponent<
const username =
_username &&
avatarProps.username &&
!(_username.toLowerCase() === avatarProps.username.toLowerCase())
? avatarProps.username
: undefined
const smallAvatarSpacing = 5
_username.toLowerCase() === avatarProps.username.toLowerCase()
? undefined
: avatarProps.username
return (
<ThemeConsumer>
@@ -119,65 +117,30 @@ class ColumnHeaderItemComponent extends PureComponent<
alignContent: 'center',
alignItems: 'center',
justifyContent: 'center',
marginRight:
title || subtitle
? 8 + (username ? smallAvatarSpacing : 0)
: 0,
marginRight: title || subtitle ? 8 : 0,
}}
>
{iconName ? (
<>
{!!username ? (
<Avatar
isBot={false}
linkURL=""
{...avatarProps}
style={[
{
width: columnHeaderItemContentSize,
height: columnHeaderItemContentSize,
},
avatarProps.style,
]}
username={username}
/>
) : (
!!iconName && (
<Icon
color={theme.foregroundColor}
name={iconName}
style={[styles.icon, iconStyle]}
/>
{!!username && (
<Avatar
hitSlop={{
top:
columnHeaderItemContentSize + smallAvatarSpacing,
bottom: smallAvatarSpacing,
left:
columnHeaderItemContentSize / 2 +
smallAvatarSpacing,
right:
columnHeaderItemContentSize / 2 +
smallAvatarSpacing,
}}
isBot={false}
linkURL=""
{...avatarProps}
style={[
{
position: 'absolute',
bottom: 0,
marginLeft: smallAvatarSpacing,
width: 10,
height: 10,
},
avatarProps.style,
]}
username={username}
/>
)}
</>
) : (
!!username && (
<Avatar
isBot={false}
linkURL=""
{...avatarProps}
style={[
{
width: columnHeaderItemContentSize,
height: columnHeaderItemContentSize,
},
avatarProps.style,
]}
username={username}
/>
)
)}
</View>

2
packages/shared/src/components/columns/EventColumn.tsx
View File

@@ -60,9 +60,9 @@ export class EventColumnComponent extends PureComponent<
<ColumnHeaderItem
avatarProps={requestTypeIconAndData.avatarProps}
iconName={requestTypeIconAndData.icon}
style={{ flex: 1 }}
subtitle={requestTypeIconAndData.subtitle}
title={requestTypeIconAndData.title}
style={{ flex: 1 }}
/>
<ColumnHeaderItem

2
packages/shared/src/components/columns/NotificationColumn.tsx
View File

@@ -57,9 +57,9 @@ class NotificationColumnComponent extends PureComponent<
<ColumnHeader>
<ColumnHeaderItem
iconName={requestTypeIconAndData.icon}
style={{ flex: 1 }}
subtitle={requestTypeIconAndData.subtitle}
title={requestTypeIconAndData.title}
style={{ flex: 1 }}
/>
<ColumnHeaderItem

18
packages/shared/src/components/common/Avatar.tsx
View File

@@ -1,5 +1,5 @@
import React, { SFC } from 'react'
import { StyleProp, TouchableOpacityProps } from 'react-native'
import { StyleProp, TouchableOpacityProps, View } from 'react-native'
import { avatarSize, radius, smallAvatarSize } from '../../styles/variables'
import {
@@ -75,12 +75,16 @@ export const Avatar: SFC<AvatarProps> = ({
<ThemeConsumer>
{({ theme }) => (
<ConditionalWrap
condition={!!linkUri}
wrap={children => (
<Link hitSlop={hitSlop} href={linkUri}>
{children}
</Link>
)}
condition
wrap={children =>
linkUri ? (
<Link hitSlop={hitSlop} href={linkUri}>
{children}
</Link>
) : (
<View>{children}</View>
)
}
>
<ImageWithLoading
{...props}