verdnatura-mirror/Rocket.Chat.ReactNative
verdnatura-mirror
/
Rocket.Chat.ReactNative
mirror of https://github.com/RocketChat/Rocket.Chat.ReactNative
2
0
Fork 1
Code Issues Packages Projects Releases Wiki Activity

start the tweaks on layout

This commit is contained in:
Reinaldo Neto 2023-08-09 18:02:36 -03:00
parent 40b416fffd
commit cd916644e8
4 changed files with 19 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/containers/message/Components/Audio/Slider.tsx
View File

@ -162,8 +162,8 @@ const Slider = ({ thumbColor = '', sound, onEndCallback }: ISlider) => {
animatedProps={getCurrentTime} animatedProps={getCurrentTime}
/> />
<View style={styles.slider} onLayout={onLayout}> <View style={styles.slider} onLayout={onLayout}>
<View style={[styles.line, { backgroundColor: colors.auxiliaryText }]} /> <View style={[styles.line, { backgroundColor: colors.audioPlayerSecondary }]} />
<Animated.View style={[styles.line, styleLine, { backgroundColor: colors.tintColor }]} /> <Animated.View style={[styles.line, styleLine, { backgroundColor: colors.audioPlayerPrimary }]} />
<PanGestureHandler enabled={loaded} onGestureEvent={gestureHandler}> <PanGestureHandler enabled={loaded} onGestureEvent={gestureHandler}>
<Animated.View style={[styles.thumbSlider, { backgroundColor: thumbColor }, styleThumb]} /> <Animated.View style={[styles.thumbSlider, { backgroundColor: thumbColor }, styleThumb]} />
</PanGestureHandler> </PanGestureHandler>

19
app/containers/message/Components/Audio/index.tsx
View File

@ -9,7 +9,7 @@ import Markdown from '../../../markdown';
import { CustomIcon } from '../../../CustomIcon'; import { CustomIcon } from '../../../CustomIcon';
import { themes } from '../../../../lib/constants'; import { themes } from '../../../../lib/constants';
import MessageContext from '../../Context'; import MessageContext from '../../Context';
import ActivityIndicator from '../../../ActivityIndicator'; // import ActivityIndicator from '../../../ActivityIndicator';
import { TGetCustomEmoji } from '../../../../definitions/IEmoji'; import { TGetCustomEmoji } from '../../../../definitions/IEmoji';
import { IAttachment, IUserMessage } from '../../../../definitions'; import { IAttachment, IUserMessage } from '../../../../definitions';
import { useTheme } from '../../../../theme'; import { useTheme } from '../../../../theme';
@ -51,23 +51,26 @@ const BUTTON_HIT_SLOP = { top: 12, right: 12, bottom: 12, left: 12 };
const Button = React.memo(({ loading, paused, onPress, disabled, cached }: IButton) => { const Button = React.memo(({ loading, paused, onPress, disabled, cached }: IButton) => {
const { colors } = useTheme(); const { colors } = useTheme();
let customIconName: 'arrow-down-circle' | 'play-filled' | 'pause-filled' = 'arrow-down-circle'; let customIconName: 'arrow-down' | 'play-shape-filled' | 'pause-shape-filled' | 'loading' = 'arrow-down';
if (cached) { if (cached) {
customIconName = paused ? 'play-filled' : 'pause-filled'; customIconName = paused ? 'play-shape-filled' : 'pause-shape-filled';
}
if (loading) {
customIconName = 'loading';
} }
return ( return (
<Touchable <Touchable
style={styles.playPauseButton} style={[styles.playPauseButton, { backgroundColor: colors.audioPlayerPrimary }]}
disabled={disabled} disabled={disabled}
onPress={onPress} onPress={onPress}
hitSlop={BUTTON_HIT_SLOP} hitSlop={BUTTON_HIT_SLOP}
background={Touchable.SelectableBackgroundBorderless()} background={Touchable.SelectableBackgroundBorderless()}
> >
{loading ? ( <CustomIcon name={customIconName} size={24} color={disabled ? colors.tintDisabled : colors.buttonText} />
{/* {loading ? (
<ActivityIndicator style={[styles.playPauseButton, styles.audioLoading]} /> <ActivityIndicator style={[styles.playPauseButton, styles.audioLoading]} />
) : ( ) : (
<CustomIcon name={customIconName} size={36} color={disabled ? colors.tintDisabled : colors.tintColor} /> )} */}
)}
</Touchable> </Touchable>
); );
}); });
@ -223,7 +226,7 @@ const MessageAudio = ({ file, getCustomEmoji, author, isReply, style }: IMessage
if (isReply) { if (isReply) {
thumbColor = themes[theme].tintDisabled; thumbColor = themes[theme].tintDisabled;
} else { } else {
thumbColor = themes[theme].tintColor; thumbColor = themes[theme].audioPlayerPrimary;
} }
return ( return (

1
app/containers/message/Components/Audio/styles.ts
View File

@ -14,7 +14,6 @@ const styles = StyleSheet.create({
}, },
playPauseButton: { playPauseButton: {
alignItems: 'center', alignItems: 'center',
backgroundColor: '#929',
marginLeft: 16, marginLeft: 16,
height: 32, height: 32,
width: 32, width: 32,

6
app/lib/constants/colors.ts
View File

@ -100,6 +100,8 @@ export const colors = {
gray100: '#CBCED1', gray100: '#CBCED1',
n900: '#1F2329', n900: '#1F2329',
overlayColor: '#1F2329B2', overlayColor: '#1F2329B2',
audioPlayerPrimary: '#156FF5',
audioPlayerSecondary: '#CBCED1',
...mentions, ...mentions,
...callButtons ...callButtons
}, },
@ -177,6 +179,8 @@ export const colors = {
gray100: '#CBCED1', gray100: '#CBCED1',
n900: '#FFFFFF', n900: '#FFFFFF',
overlayColor: '#1F2329B2', overlayColor: '#1F2329B2',
audioPlayerPrimary: '#3976D1',
audioPlayerSecondary: '#404754',
...mentions, ...mentions,
...callButtons ...callButtons
}, },
@ -254,6 +258,8 @@ export const colors = {
gray100: '#CBCED1', gray100: '#CBCED1',
n900: '#FFFFFF', n900: '#FFFFFF',
overlayColor: '#1F2329B2', overlayColor: '#1F2329B2',
audioPlayerPrimary: '#3976D1',
audioPlayerSecondary: '#404754',
...mentions, ...mentions,
...callButtons ...callButtons
} }