zoriya/Chromacase
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixing error redesign CI

Browse Source
This commit is contained in:
mathysPaul
2023-09-19 17:12:49 +02:00
parent 1e504c8982
commit 073ff033f3
7 changed files with 44 additions and 223 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
front/components/GtkUI/Element.tsx
View File

@@ -70,7 +70,7 @@ export const Element = <T extends ElementProps>(props: T) => {
</InteractiveBase>
{
props.type === 'sectionDropdown' && dropdownValue &&
<View>
<View backgroundColor={'rgba(16,16,20,0.3)'}>
{
props.data.section.map((value, index) => (
<View

2
front/components/GtkUI/ElementList.tsx
View File

@@ -30,7 +30,7 @@ const ElementList = ({ elements, style }: ElementListProps) => {
{elements.map((element, index) => (
<Box key={element.title}>
<Element {...element} />
{index < elements.length - 1 && <Divider />}
{index < elements.length - 1 && <Divider bg="transparent" thickness="2"/>}
</Box>
))}
</Column>

33
front/components/UI/InteractiveBase.tsx
View File

@@ -1,8 +1,6 @@
import React, { useRef, useState } from 'react';
import { Animated, StyleSheet, TouchableOpacity, ActivityIndicator, View, Image, StyleProp, ViewStyle } from 'react-native';
// import Ionicons from '@expo/vector-icons/Ionicons';
// import { Text, useTheme } from 'native-base'
// import { BlurView } from '@react-native-community/blur';
import { Pressable } from 'native-base';
import React, { useRef } from 'react';
import { Animated, StyleSheet, StyleProp, ViewStyle } from 'react-native';
interface InteractiveBaseProps {
children?: React.ReactNode;
@@ -128,7 +126,7 @@ const InteractiveBase: React.FC<InteractiveBaseProps> = ({ children, onPress, st
]).start();
};
// Mouse Up
const handlePressOut = async () => {
const handlePressOut = () => {
Animated.parallel([
Animated.spring(scaleAnimator, {
toValue: 1,
@@ -157,7 +155,7 @@ const InteractiveBase: React.FC<InteractiveBaseProps> = ({ children, onPress, st
]).start();
if (onPress && !isDisabled) {
await onPress();
onPress();
}
}
// Mouse Leave
@@ -205,29 +203,16 @@ const InteractiveBase: React.FC<InteractiveBaseProps> = ({ children, onPress, st
},
]}
>
<TouchableOpacity
activeOpacity={1}
<Pressable
disabled={isDisabled}
onMouseEnter={handleMouseEnter}
onHoverIn={handleMouseEnter}
onPressIn={handlePressIn}
onPressOut={handlePressOut}
onMouseLeave={handleMouseLeave}
onHoverOut={handleMouseLeave}
style={styles.container}
>
{children}
{/* <BlurView
style={{
width: '420px',
height: '50px',
borderRadius: 20,
borderWidth: 1,
}}
blurType="light"
blurAmount={20}
blurRadius={5}
/> */}
</TouchableOpacity>
</Pressable>
</Animated.View>
);
};

183
front/components/UI/TextFormField copy.tsx
View File

@@ -1,183 +0,0 @@
import React, { useState, useEffect } from 'react';
import { View, TextInput, TouchableOpacity, StyleSheet, Text, Animated } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons'; // Supposons que nous utilisons la bibliothèque Ionicons pour les icônes
interface TextFormFieldProps {
value?: string;
icon?: string;
placeholder?: string;
autoComplete?:
| 'birthdate-day'
| 'birthdate-full'
| 'birthdate-month'
| 'birthdate-year'
| 'cc-csc'
| 'cc-exp'
| 'cc-exp-day'
| 'cc-exp-month'
| 'cc-exp-year'
| 'cc-number'
| 'email'
| 'gender'
| 'name'
| 'name-family'
| 'name-given'
| 'name-middle'
| 'name-middle-initial'
| 'name-prefix'
| 'name-suffix'
| 'password'
| 'password-new'
| 'postal-address'
| 'postal-address-country'
| 'postal-address-extended'
| 'postal-address-extended-postal-code'
| 'postal-address-locality'
| 'postal-address-region'
| 'postal-code'
| 'street-address'
| 'sms-otp'
| 'tel'
| 'tel-country-code'
| 'tel-national'
| 'tel-device'
| 'username'
| 'username-new'
| 'off'
| undefined;
isSecret?: boolean;
isRequired?: boolean;
error?: string;
onChangeText?: ((text: string) => void) | undefined;
}
const ERROR_HEIGHT = 20;
const ERROR_PADDING_TOP = 8;
const TextFormField: React.FC<TextFormFieldProps> = ({ value = '', placeholder = '', icon, autoComplete = 'off', isSecret = false, isRequired = false, error, ...props }) => {
const [isPasswordVisible, setPasswordVisible] = useState(!isSecret);
const [isFocused, setFocused] = useState(false);
const [fieldValue, setFieldValue] = useState(value);
const fadeAnim = React.useRef(new Animated.Value(0)).current; // Initial value for opacity: 0
const heightAnim = React.useRef(new Animated.Value(0)).current; // Initial value for height: 0
const paddingTopAnim = React.useRef(new Animated.Value(0)).current; // Initial value for paddingTop: 0
// Update fieldValue whenever value changes
useEffect(() => {
setFieldValue(value);
}, [value]);
// Animate the error message
useEffect(() => {
Animated.parallel([
Animated.timing(
fadeAnim,
{
toValue: error ? 1 : 0,
duration: 500,
useNativeDriver: true
}
),
Animated.timing(
heightAnim,
{
toValue: error ? ERROR_HEIGHT : 0,
duration: 250,
useNativeDriver: false // height cannot be animated using native driver
}
),
Animated.timing(
paddingTopAnim,
{
toValue: error ? ERROR_PADDING_TOP : 0,
duration: 150,
useNativeDriver: false // paddingTop cannot be animated using native driver
}
),
]).start();
}, [error]);
const handleTextChange = (text: string) => {
setFieldValue(text);
if (props.onChangeText) {
props.onChangeText(text);
}
};
return (
<View style={styles.wrapper}>
<View style={[styles.container, error && styles.error, isFocused && styles.containerFocused]}>
<View style={styles.iconContainerLeft}>
{icon && <Icon name={icon} size={24} color={error ? 'red' : (isFocused ? '#6075F9' : '#454562')} />}
</View>
<TextInput
value={fieldValue}
style={styles.input}
autoComplete={autoComplete}
placeholder={placeholder + (isRequired ? '*' : '')}
placeholderTextColor='#454562'
secureTextEntry={isSecret ? !isPasswordVisible : false}
onFocus={() => setFocused(true)}
onBlur={() => setFocused(false)}
onChangeText={handleTextChange}
{...props}
/>
{isSecret && (
<TouchableOpacity style={styles.iconContainerRight} onPress={() => setPasswordVisible(prevState => !prevState)}>
<Icon name={isPasswordVisible ? 'eye-off' : 'eye'} size={24} color='#454562' />
</TouchableOpacity>
)}
</View>
<Animated.View style={{...styles.errorContainer, opacity: fadeAnim, height: heightAnim, paddingTop: paddingTopAnim}}>
<Icon name="warning" size={16} color='red' />
<Text style={styles.errorText}>{error}</Text>
</Animated.View>
</View>
);
};
const styles = StyleSheet.create({
wrapper: {
width: '100%',
},
container: {
flexDirection: 'row',
alignItems: 'center',
backgroundColor: '#22222D',
borderRadius: 16,
},
error: {
},
containerFocused: {
},
input: {
flex: 1,
color: '#ffffff',
paddingHorizontal: 16 + 24 + 16,
paddingVertical: 16,
outlineStyle: 'none',
},
iconContainerLeft: {
position: 'absolute',
left: 16,
zIndex: 1,
},
iconContainerRight: {
position: 'absolute',
outlineStyle: 'none',
right: 16,
zIndex: 1,
},
errorContainer: {
flexDirection: 'row',
alignItems: 'center',
paddingLeft: 40,
},
errorText: {
color: 'red',
fontSize: 12,
marginLeft: 8,
},
});
export default TextFormField;

2
front/components/UI/TextFormField.tsx
View File

@@ -24,7 +24,7 @@ const TextFormField: React.FC<TextFormFieldProps> = ({ error, style, ...textFiel
{
toValue: error ? 1 : 0,
duration: 150,
useNativeDriver: true
useNativeDriver: false
}
),
Animated.timing(

2
front/views/ProfileView.tsx
View File

@@ -42,7 +42,7 @@ const ProfileView = () => {
<ProfilePictureBannerAndLevel />
<Box w="10%" paddingY={10} paddingLeft={5} paddingRight={50} zIndex={1}>
<TextButton
onPress={() => navigation.navigate('Settings', { screen: 'profile' })}
onPress={() => navigation.navigate('Settings')}
translate={{ translationKey: 'settingsBtn' }}
/>
</Box>

43
front/views/settings/SettingsView.tsx
View File

@@ -15,7 +15,7 @@ import API from '../../API';
import { RouteProps } from '../../Navigation';
import { PressableAndroidRippleConfig, StyleProp, TextStyle, View, ViewStyle, useWindowDimensions } from 'react-native';
import { TabView, SceneMap, TabBar, NavigationState, Route, SceneRendererProps, TabBarIndicatorProps, TabBarItemProps } from 'react-native-tab-view';
import { HeartEdit, Star1, UserEdit, Notification, SecurityUser, Music, Icon } from 'iconsax-react-native';
import { HeartEdit, Star1, UserEdit, Notification, SecurityUser, Music, FolderCross } from 'iconsax-react-native';
import { Scene, Event } from 'react-native-tab-view/lib/typescript/src/types';
import { LinearGradient } from 'expo-linear-gradient';
import PremiumSettings from './SettingsPremiumView';
@@ -37,17 +37,36 @@ const renderScene = SceneMap({
piano: PianoSettingsView,
});
const getTabData = (key: string) => {
switch (key){
case 'profile':
return { index: 0, icon: UserEdit };
case 'premium':
return { index: 1, icon: Star1 };
case 'preferences':
return { index: 2, icon: HeartEdit };
case 'notifications':
return { index: 3, icon: Notification };
case 'privacy':
return { index: 4, icon: SecurityUser };
case 'piano':
return { index: 5, icon: Music };
default:
return { index: 6, icon: FolderCross };
}
}
const SetttingsNavigator = () => {
const layout = useWindowDimensions();
const [index, setIndex] = React.useState(0);
const [routes] = React.useState([
{index: 0, key: 'profile', title: 'Profile', icon: UserEdit},
{index: 1, key: 'premium', title: 'Premium', icon: Star1},
{index: 2, key: 'preferences', title: 'Preferences', icon: HeartEdit},
{index: 3, key: 'notifications', title: 'Notifications', icon: Notification},
{index: 4, key: 'privacy', title: 'Privacy', icon: SecurityUser},
{index: 5, key: 'piano', title: 'Piano', icon: Music},
const [routes] = React.useState<Route[]>([
{key: 'profile', title: 'Profile'},
{key: 'premium', title: 'Premium'},
{key: 'preferences', title: 'Preferences'},
{key: 'notifications', title: 'Notifications'},
{key: 'privacy', title: 'Privacy'},
{key: 'piano', title: 'Piano'},
]);
const renderTabBar = (props: JSX.IntrinsicAttributes & SceneRendererProps & { navigationState: NavigationState<Route>; scrollEnabled?: boolean | undefined; bounces?: boolean | undefined; activeColor?: string | undefined; inactiveColor?: string | undefined; pressColor?: string | undefined; pressOpacity?: number | undefined; getLabelText?: ((scene: Scene<Route>) => string | undefined) | undefined; getAccessible?: ((scene: Scene<Route>) => boolean | undefined) | undefined; getAccessibilityLabel?: ((scene: Scene<Route>) => string | undefined) | undefined; getTestID?: ((scene: Scene<Route>) => string | undefined) | undefined; renderLabel?: ((scene: Scene<Route> & { focused: boolean; color: string; }) => React.ReactNode) | undefined; renderIcon?: ((scene: Scene<Route> & { focused: boolean; color: string; }) => React.ReactNode) | undefined; renderBadge?: ((scene: Scene<Route>) => React.ReactNode) | undefined; renderIndicator?: ((props: TabBarIndicatorProps<Route>) => React.ReactNode) | undefined; renderTabBarItem?: ((props: TabBarItemProps<Route> & { key: string; }) => React.ReactElement<any, string | React.JSXElementConstructor<any>>) | undefined; onTabPress?: ((scene: Scene<Route> & Event) => void) | undefined; onTabLongPress?: ((scene: Scene<Route>) => void) | undefined; tabStyle?: StyleProp<ViewStyle>; indicatorStyle?: StyleProp<ViewStyle>; indicatorContainerStyle?: StyleProp<ViewStyle>; labelStyle?: StyleProp<TextStyle>; contentContainerStyle?: StyleProp<ViewStyle>; style?: StyleProp<ViewStyle>; gap?: number | undefined; testID?: string | undefined; android_ripple?: PressableAndroidRippleConfig | undefined; }) => (
@@ -59,10 +78,10 @@ const SetttingsNavigator = () => {
focused: boolean;
color: string;
}) => {
const MyIcon: Icon = scene.route?.icon as unknown as Icon;
return scene.route?.index == index ?
<MyIcon size="18" color="#6075F9" variant='Bold'/>
: <MyIcon size="18" color="#6075F9"/>
const tabHeader = getTabData(scene.route!.key);
return tabHeader.index == index ?
<tabHeader.icon size="18" color="#6075F9" variant='Bold'/>
: <tabHeader.icon size="18" color="#6075F9"/>
}}
renderLabel={({ route, focused, color }) => (
layout.width > 750 ?