Skip to content

Commit

Permalink
Tweaks on audio attachments + message box icons (#20804)
Browse files Browse the repository at this point in the history
  • Loading branch information
@cecileboucheron @mmaxim
cecileboucheron authored and mmaxim committed Nov 7, 2019
1 parent 0c7c4c3 commit 61ef7b3
Show file tree
Hide file tree
Showing 16 changed files with 53 additions and 75 deletions.
11 changes: 3 additions & 8 deletions shared/chat/audio/audio-player.tsx
View file
Expand Up @@ -114,15 +114,13 @@ const AudioPlayer = (props: Props) => {
<Kb.ClickableBox onClick={props.url ? onClick : undefined} style={{justifyContent: 'center'}}>
<Kb.Icon
type={!paused ? 'iconfont-pause' : 'iconfont-play'}
fontSize={24}
fontSize={32}
style={Kb.iconCastPlatformStyles(styles.play)}
/>
</Kb.ClickableBox>
<Kb.Box2 direction="vertical" style={styles.visContainer} gap="xxtiny">
<AudioVis height={32} amps={props.visAmps} maxWidth={props.maxWidth} ampsRemain={ampsRemain} />
<Kb.Text type="BodyTiny" style={styles.duration}>
{formatAudioRecordDuration(timeLeft)}
</Kb.Text>
<Kb.Text type="BodyTiny">{formatAudioRecordDuration(timeLeft)}</Kb.Text>
</Kb.Box2>
{props.url.length > 0 && <AudioVideo ref={vidRef} url={props.url} paused={paused} />}
</Kb.Box2>
Expand All @@ -137,17 +135,14 @@ const styles = Styles.styleSheetCreate(() => ({
width: 30,
},
container: {
...Styles.padding(Styles.globalMargins.xtiny, Styles.globalMargins.tiny),
...Styles.padding(Styles.globalMargins.xxtiny, Styles.globalMargins.tiny),
backgroundColor: Styles.globalColors.white,
borderColor: Styles.globalColors.grey,
borderRadius: Styles.borderRadius,
borderStyle: 'solid',
borderWidth: 1,
marginTop: Styles.globalMargins.xtiny,
},
duration: {
color: Styles.globalColors.black_50,
},
play: {
color: Styles.globalColors.blue,
},
Expand Down
55 changes: 21 additions & 34 deletions shared/chat/audio/audio-recorder.native.tsx
View file
Expand Up @@ -144,9 +144,9 @@ const AudioButton = (props: ButtonProps) => {
const innerScale = React.useRef(new Kb.NativeAnimated.Value(0)).current
const outerScale = React.useRef(new Kb.NativeAnimated.Value(0)).current
const sendTranslate = React.useRef(new Kb.NativeAnimated.Value(0)).current
const innerOffsetY = React.useRef(new Kb.NativeAnimated.Value(-37)).current
const ampOffsetY = React.useRef(new Kb.NativeAnimated.Value(-35)).current
const micOffsetY = React.useRef(new Kb.NativeAnimated.Value(-35)).current
const innerOffsetY = React.useRef(new Kb.NativeAnimated.Value(-34)).current
const ampOffsetY = React.useRef(new Kb.NativeAnimated.Value(-31)).current
const micOffsetY = React.useRef(new Kb.NativeAnimated.Value(-34)).current
// lifecycle
React.useEffect(() => {
Kb.NativeAnimated.parallel(
Expand All @@ -157,6 +157,8 @@ const AudioButton = (props: ButtonProps) => {
useNativeDriver: true,
}),
Kb.NativeAnimated.timing(outerScale, {
duration: 200,
easing: Kb.NativeEasing.inOut(Kb.NativeEasing.ease),
toValue: 15,
useNativeDriver: true,
}),
Expand Down Expand Up @@ -259,10 +261,10 @@ const AudioButton = (props: ButtonProps) => {
<>
<Kb.NativeAnimated.View
style={{
bottom: 155,
bottom: 160,
opacity: props.slideTranslate,
position: 'absolute',
right: 45,
right: 50,
transform: [
{
translateY: props.slideTranslate.interpolate({
Expand All @@ -274,7 +276,7 @@ const AudioButton = (props: ButtonProps) => {
}}
>
<Kb.NativeView>
<Kb.Icon type="iconfont-arrow-up" fontSize={22} />
<Kb.Icon type="iconfont-arrow-up" sizeType="Tiny" />
</Kb.NativeView>
</Kb.NativeAnimated.View>
<Kb.NativeAnimated.View
Expand All @@ -299,7 +301,7 @@ const AudioButton = (props: ButtonProps) => {
],
}}
>
<Kb.Icon type="iconfont-lock" fontSize={22} />
<Kb.Icon type="iconfont-lock" />
</Kb.NativeAnimated.View>
</>
) : (
Expand All @@ -325,9 +327,9 @@ const AudioButton = (props: ButtonProps) => {
<Kb.ClickableBox onClick={props.sendRecording}>
<Kb.Box2 direction="vertical" centerChildren={true}>
<Kb.Icon
type="iconfont-arrow-full-up"
color={Styles.globalColors.whiteOrWhite}
fontSize={22}
sizeType="Small"
type="iconfont-arrow-full-up"
/>
</Kb.Box2>
</Kb.ClickableBox>
Expand All @@ -339,32 +341,25 @@ const AudioButton = (props: ButtonProps) => {
<Kb.NativeAnimated.View
style={{
position: 'absolute',
right: 46,
right: 48,
transform: [{translateY: Kb.NativeAnimated.add(micOffsetY, props.dragY)}],
}}
>
<Kb.Icon type="iconfont-mic" fontSize={22} color={Styles.globalColors.whiteOrWhite} />
<Kb.Icon type="iconfont-mic" color={Styles.globalColors.whiteOrWhite} />
</Kb.NativeAnimated.View>
) : (
<Kb.TapGestureHandler onHandlerStateChange={props.stageRecording}>
<Kb.NativeView
style={{
bottom: 27,
bottom: 22,
height: 48,
justifyContent: 'center',
position: 'absolute',
right: 18,
right: 19,
width: 48,
}}
>
<Kb.Box
style={{
backgroundColor: Styles.globalColors.whiteOrWhite,
borderRadius: 2,
height: 18,
width: 18,
}}
/>
<Kb.Icon type="iconfont-stop" color={Styles.globalColors.whiteOrWhite} />
</Kb.NativeView>
</Kb.TapGestureHandler>
)}
Expand Down Expand Up @@ -393,8 +388,8 @@ const AudioSlideToCancel = (props: CancelProps) => {
<Kb.NativeAnimated.View
style={{
bottom: 35,
left: 100,
position: 'absolute',
right: 150,
transform: [
{
translateY: cancelTranslate.interpolate({
Expand All @@ -405,7 +400,7 @@ const AudioSlideToCancel = (props: CancelProps) => {
],
}}
>
<Kb.Text type="BodyPrimaryLink" onClick={props.onCancel} style={{marginLeft: 30}}>
<Kb.Text type="BodyBigLink" onClick={props.onCancel}>
Cancel
</Kb.Text>
</Kb.NativeAnimated.View>
Expand All @@ -426,9 +421,9 @@ const AudioSlideToCancel = (props: CancelProps) => {
],
}}
>
<Kb.Box2 direction="horizontal" gap="tiny">
<Kb.Icon type="iconfont-arrow-left" fontSize={16} />
<Kb.Text type="BodySecondaryLink">Slide to cancel</Kb.Text>
<Kb.Box2 direction="horizontal" gap="tiny" centerChildren={true}>
<Kb.Icon sizeType="Tiny" type="iconfont-arrow-left" />
<Kb.Text type="BodySmall">Slide to cancel</Kb.Text>
</Kb.Box2>
</Kb.NativeAnimated.View>
)
Expand All @@ -455,14 +450,6 @@ const AudioCounter = (props: CounterProps) => {
left: 10,
opacity: props.slideTranslate,
position: 'absolute',
transform: [
{
translateX: props.slideTranslate.interpolate({
inputRange: [0, 1],
outputRange: [props.closeDown ? -50 : -20, 0],
}),
},
],
}}
>
<Kb.Text type="BodyBold">{formatAudioRecordDuration(seconds * 1000)}</Kb.Text>
Expand Down
13 changes: 11 additions & 2 deletions shared/chat/audio/audio-send.tsx
View file
Expand Up @@ -45,8 +45,10 @@ const AudioSend = (props: Props) => {
}
return (
<Kb.Box2 direction="horizontal" style={styles.container} fullWidth={true}>
<Kb.Box2 direction="horizontal" gap="medium" alignItems="center">
<Kb.Icon type="iconfont-remove" fontSize={22} onClick={onCancel} />
<Kb.Box2 direction="horizontal" alignItems="center">
<Kb.Box style={styles.icon}>
<Kb.Icon type="iconfont-remove" onClick={onCancel} />
</Kb.Box>
{player}
</Kb.Box2>
<Kb.Button type="Default" small={true} style={styles.send} onClick={onSend} label="Send" />
Expand All @@ -63,6 +65,13 @@ const styles = Styles.styleSheetCreate(() => ({
justifyContent: 'space-between',
padding: Styles.globalMargins.tiny,
},
icon: {
alignItems: 'center',
height: 32,
justifyContent: 'center',
marginRight: Styles.globalMargins.tiny,
width: 32,
},
send: {
alignSelf: 'flex-end',
marginBottom: Styles.globalMargins.tiny,
Expand Down
6 changes: 4 additions & 2 deletions shared/chat/audio/audio-starter.native.tsx
View file
Expand Up @@ -30,11 +30,13 @@ const Tooltip = (props: TooltipProps) => {
if (props.shouldBeVisible) {
setVisible(true)
Kb.NativeAnimated.timing(opacity, {
duration: 200,
toValue: 1,
useNativeDriver: true,
}).start()
} else {
Kb.NativeAnimated.timing(opacity, {
duration: 200,
toValue: 0,
useNativeDriver: true,
}).start(() => setVisible(false))
Expand All @@ -44,7 +46,7 @@ const Tooltip = (props: TooltipProps) => {
<Kb.NativeAnimated.View style={{opacity}}>
<Kb.Box2 direction="horizontal" style={styles.tooltipContainer}>
<Kb.Text type="BodySmall" style={{color: Styles.globalColors.white}}>
Hold the button to record audio.
Hold to record audio.
</Kb.Text>
</Kb.Box2>
</Kb.NativeAnimated.View>
Expand Down Expand Up @@ -167,7 +169,7 @@ const AudioStarter = (props: AudioStarterProps) => {
}}
>
<Kb.NativeView>
<Kb.Icon type="iconfont-mic" style={Kb.iconCastPlatformStyles(props.iconStyle)} fontSize={22} />
<Kb.Icon type="iconfont-mic" style={Kb.iconCastPlatformStyles(props.iconStyle)} />
</Kb.NativeView>
</Kb.PanGestureHandler>
</Kb.TapGestureHandler>
Expand Down
5 changes: 1 addition & 4 deletions shared/chat/conversation/input-area/normal/platform-input.native.tsx
View file
Expand Up @@ -279,14 +279,12 @@ const Action = React.memo((props: ActionProps) => {
onClick={insertMentionMarker}
type="iconfont-mention"
style={Kb.iconCastPlatformStyles(styles.actionButton)}
fontSize={22}
/>
{smallGap}
<Kb.Icon
onClick={openFilePicker}
type="iconfont-camera"
style={Kb.iconCastPlatformStyles(styles.actionButton)}
fontSize={22}
/>
{smallGap}
<AudioRecorder conversationIDKey={conversationIDKey} iconStyle={styles.actionButton} />
Expand All @@ -295,7 +293,6 @@ const Action = React.memo((props: ActionProps) => {
onClick={openMoreMenu}
type="iconfont-add"
style={Kb.iconCastPlatformStyles(styles.actionButton)}
fontSize={22}
/>
</Kb.Box2>
</Kb.NativeAnimated.View>
Expand Down Expand Up @@ -326,7 +323,7 @@ const ExplodingIcon = ({explodingModeSeconds, isExploding, openExplodingPicker})
</Kb.Box2>
)

const containerPadding = 8
const containerPadding = Styles.globalMargins.xsmall
const styles = Styles.styleSheetCreate(
() =>
({
Expand Down
5 changes: 2 additions & 3 deletions shared/chat/inbox/row/big-team-header/index.tsx
View file
Expand Up @@ -47,9 +47,9 @@ class _BigTeamHeader extends React.PureComponent<Props> {
>
<Kb.Icon
className="Kb.icon"
color={Styles.globalColors.black_35}
type="iconfont-gear"
fontSize={iconFontSize}
color={Styles.globalColors.black_50}
sizeType="Small"
/>
<Kb.Box
style={Styles.collapseStyles([styles.badge, props.badgeSubscribe && styles.badgeVisible])}
Expand All @@ -61,7 +61,6 @@ class _BigTeamHeader extends React.PureComponent<Props> {
}

const BigTeamHeader = Kb.OverlayParentHOC(_BigTeamHeader)
const iconFontSize = Styles.isMobile ? 20 : 14

const styles = Styles.styleSheetCreate(
() =>
Expand Down
5 changes: 1 addition & 4 deletions shared/common-adapters/back-button.native.tsx
View file
Expand Up @@ -21,7 +21,6 @@ export default class BackButton extends Component<Props> {
<Box style={Styles.collapseStyles([styles.container, this.props.style])}>
<Icon
type="iconfont-arrow-left"
fontSize={iconFontSize}
color={this.props.iconColor}
style={iconCastPlatformStyles(styles.arrow)}
/>
Expand All @@ -39,9 +38,7 @@ const styles = Styles.styleSheetCreate(() => ({
alignItems: 'center',
marginRight: 8,
padding: Styles.globalMargins.tiny,
paddingLeft: Styles.globalMargins.small - 4,
paddingLeft: Styles.globalMargins.xsmall,
paddingRight: Styles.globalMargins.small,
},
}))

const iconFontSize = 24
2 changes: 1 addition & 1 deletion shared/common-adapters/copy-text.tsx
View file
Expand Up @@ -108,7 +108,7 @@ const CopyText = (props: Props) => {
style={Styles.collapseStyles([styles.container, props.containerStyle])}
>
<Toast position="top center" attachTo={() => attachmentRef.current} visible={showingToast}>
{Styles.isMobile && <Icon type="iconfont-clipboard" color="white" fontSize={22} />}
{Styles.isMobile && <Icon type="iconfont-clipboard" color="white" />}
<Text type={Styles.isMobile ? 'BodySmallSemibold' : 'BodySmall'} style={styles.toastText}>
Copied to clipboard
</Text>
Expand Down
3 changes: 1 addition & 2 deletions shared/common-adapters/header-hoc/index.native.tsx
View file
Expand Up @@ -182,7 +182,7 @@ const RightActions = ({
const RightActionsOverflow = ({floatingMenuVisible, hideFloatingMenu, rightActions, showFloatingMenu}) =>
rightActions && rightActions.length > MAX_RIGHT_ACTIONS ? (
<>
<Icon fontSize={22} onClick={showFloatingMenu} style={styles.action} type="iconfont-ellipsis" />
<Icon onClick={showFloatingMenu} style={styles.action} type="iconfont-ellipsis" />
<FloatingMenu
visible={floatingMenuVisible}
items={rightActions.slice(MAX_RIGHT_ACTIONS - 1).map(action => ({
Expand All @@ -205,7 +205,6 @@ const renderAction = (action: Action, index: number): React.ReactNode =>
<Icon
color={action.iconColor || undefined}
key={action.label || index}
fontSize={22}
onClick={action.onPress}
style={styles.action}
type={action.icon}
Expand Down
1 change: 0 additions & 1 deletion shared/common-adapters/icon.constants-gen.tsx
View file
Expand Up @@ -1576,7 +1576,6 @@ const iconMeta_ = {
return require('../images/icons/icon-dark-fancy-encrypted-computer-mobile-226-96.png')
},
},

'icon-dark-fancy-encrypted-phone-mobile-226-96': {
extension: 'png',
isFont: false,
Expand Down
2 changes: 1 addition & 1 deletion shared/common-adapters/simple-toast.tsx
View file
Expand Up @@ -21,7 +21,7 @@ type Props = {
const SimpleToast = (props: Props) => (
<Kb.Toast visible={props.visible}>
<Kb.Box2 direction="horizontal" gap="tiny" centerChildren={true}>
<Kb.Icon type={props.iconType} color={Styles.globalColors.white} fontSize={22} />
<Kb.Icon type={props.iconType} color={Styles.globalColors.white} />
<Kb.Text type="BodySemibold" style={styles.toastText}>
{props.text}
</Kb.Text>
Expand Down
Binary file modified shared/fonts/kb.ttf
View file
Binary file not shown.

0 comments on commit 61ef7b3

Please sign in to comment.