ZF/jitsi-meet
1
0
Fork 0
mirror of https://gitcode.com/GitHub_Trending/ji/jitsi-meet.git synced 2025-12-30 11:22:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(base/ui): Native buttons UI fixes (#13788)

Browse Source 
* feat(base/ui): native buttons UI fixes and improvements
This commit is contained in:
Calinteodor
2023-09-05 16:36:09 +03:00
committed by GitHub
parent 5a3947bb23
commit a95eaa6c2e
9 changed files with 60 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
react/features/base/ui/components/native/Button.tsx
View File

@@ -1,10 +1,7 @@
import React from 'react';
import { useTranslation } from 'react-i18next';
import {
Button as NativePaperButton,
Text,
TouchableRipple
} from 'react-native-paper';
import { TouchableHighlight } from 'react-native';
import { Button as NativePaperButton, Text } from 'react-native-paper';
import { BUTTON_MODES, BUTTON_TYPES } from '../../constants.native';
import BaseTheme from '../BaseTheme.native';
@@ -12,13 +9,13 @@ import { IButtonProps } from '../types';
import styles from './buttonStyles';
export interface IProps extends IButtonProps {
color?: string | undefined;
contentStyle?: Object | undefined;
labelStyle?: Object | undefined;
mode?: any;
style?: Object | undefined;
useRippleColor?: boolean;
}
const Button: React.FC<IProps> = ({
@@ -32,16 +29,12 @@ const Button: React.FC<IProps> = ({
mode = BUTTON_MODES.CONTAINED,
onClick: onPress,
style,
type,
useRippleColor = true
type
}: IProps) => {
const { t } = useTranslation();
const { DESTRUCTIVE, PRIMARY, SECONDARY, TERTIARY } = BUTTON_TYPES;
const { CONTAINED, TEXT } = BUTTON_MODES;
const rippleColor
= useRippleColor ? BaseTheme.palette.action03Active : 'transparent';
let buttonLabelStyles;
let buttonStyles;
let color;
@@ -72,17 +65,16 @@ const Button: React.FC<IProps> = ({
}
if (type === TERTIARY) {
if (useRippleColor && disabled) {
if (disabled) {
buttonLabelStyles = styles.buttonLabelTertiaryDisabled;
}
buttonLabelStyles = styles.buttonLabelTertiary;
return (
<TouchableRipple
<TouchableHighlight
accessibilityLabel = { accessibilityLabel }
disabled = { disabled }
onPress = { onPress }
rippleColor = { rippleColor }
style = { [
buttonStyles,
style
@@ -92,7 +84,7 @@ const Button: React.FC<IProps> = ({
buttonLabelStyles,
labelStyle
] }>{ t(labelKey ?? '') }</Text>
</TouchableRipple>
</TouchableHighlight>
);
}

22
react/features/base/ui/components/native/IconButton.tsx
View File

@@ -1,5 +1,5 @@
import React from 'react';
import { TouchableRipple } from 'react-native-paper';
import { TouchableHighlight } from 'react-native';
import Icon from '../../../icons/components/Icon';
import styles from '../../../react/components/native/styles';
@@ -22,47 +22,47 @@ const IconButton: React.FC<IIconButtonProps> = ({
const { PRIMARY, SECONDARY, TERTIARY } = BUTTON_TYPES;
let color;
let rippleColor;
let underlayColor;
let iconButtonContainerStyles;
if (type === PRIMARY) {
color = BaseTheme.palette.icon01;
iconButtonContainerStyles = styles.iconButtonContainerPrimary;
rippleColor = BaseTheme.palette.action01;
underlayColor = BaseTheme.palette.action01;
} else if (type === SECONDARY) {
color = BaseTheme.palette.icon04;
iconButtonContainerStyles = styles.iconButtonContainerSecondary;
rippleColor = BaseTheme.palette.action02;
underlayColor = BaseTheme.palette.action02;
} else if (type === TERTIARY) {
color = iconColor;
iconButtonContainerStyles = styles.iconButtonContainer;
rippleColor = BaseTheme.palette.action03;
underlayColor = BaseTheme.palette.action03;
} else {
color = iconColor;
rippleColor = tapColor;
underlayColor = tapColor;
}
if (disabled) {
color = BaseTheme.palette.icon03;
iconButtonContainerStyles = styles.iconButtonContainerDisabled;
rippleColor = 'transparent';
underlayColor = 'transparent';
}
return (
<TouchableRipple
<TouchableHighlight
accessibilityLabel = { accessibilityLabel }
disabled = { disabled }
onPress = { onPress }
rippleColor = { rippleColor }
style = { [
iconButtonContainerStyles,
style
] }>
] }
underlayColor = { underlayColor }>
<Icon
color = { color }
size = { 20 || size }
src = { src } />
</TouchableRipple>
</TouchableHighlight>
);
};