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

Moved Settings Preference View into its dedicated file and started to implement ElementRange

Browse Source
This commit is contained in:
Clément Le Bihan
2023-04-10 23:33:57 +02:00
parent 8ce1beb518
commit 70b506c6c2
5 changed files with 134 additions and 175 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,30 +1,25 @@
import React from "react";
import { StyleProp, ViewStyle } from "react-native";
import IconButton from "../IconButton";
import { Ionicons } from "@expo/vector-icons";
import { RawElement } from "./RawElement";
import { Element } from "./Element";
import {
ElementTextProps,
ElementToggleProps,
ElementDropdownProps,
ElementRangeProps,
ElementType,
} from "./ElementTypes";
import {
Box,
Center,
Button,
Column,
Row,
Icon,
Text,
Divider,
Switch,
Popover,
Pressable,
useBreakpointValue,
Select,
} from "native-base";
export type ElementProps = {
title: string;
icon?: React.ReactNode;
type?: ElementType | "custom";
type?: ElementType;
helperText?: string;
description?: string;
disabled?: boolean;
@@ -32,6 +27,7 @@ export type ElementProps = {
| ElementTextProps
| ElementToggleProps
| ElementDropdownProps
| ElementRangeProps
| React.ReactNode;
};

37
front/components/GtkUI/ElementTypes.tsx
View File

@@ -1,6 +1,6 @@
import { Select, Switch, Text, Icon, Row } from "native-base";
import { Select, Switch, Text, Icon, Row, Slider } from "native-base";
import { MaterialIcons } from "@expo/vector-icons";
export type ElementType = "custom" | "default" | "text" | "toggle" | "dropdown";
export type ElementType = "custom" | "default" | "text" | "toggle" | "dropdown" | "range";
export type DropdownOption = {
label: string;
@@ -25,6 +25,15 @@ export type ElementDropdownProps = {
defaultValue?: string;
};
export type ElementRangeProps = {
onValueChange: (value: number) => void;
value: number;
defaultValue?: number;
min: number;
max: number;
step?: number;
}
export const getElementTextNode = (
{ text, onPress }: ElementTextProps,
disabled: boolean
@@ -92,3 +101,27 @@ export const getElementDropdownNode = (
</Select>
);
};
export const getElementRangeNode = (
{ onValueChange, value, defaultValue, min, max, step }: ElementRangeProps,
disabled: boolean,
title: string,
) => {
return (
<Slider
value={value}
defaultValue={defaultValue}
minValue={min}
maxValue={max}
step={step}
isDisabled={disabled}
onChangeEnd={onValueChange}
accessibilityLabel={`Slider for ${title}`}
>
<Slider.Track>
<Slider.FilledTrack />
</Slider.Track>
<Slider.Thumb />
</Slider>
)
}

8
front/components/GtkUI/RawElement.tsx
View File

@@ -16,9 +16,11 @@ import {
getElementDropdownNode,
getElementTextNode,
getElementToggleNode,
getElementRangeNode,
ElementDropdownProps,
ElementTextProps,
ElementToggleProps,
ElementRangeProps
} from "./ElementTypes";
type RawElementProps = {
@@ -118,6 +120,12 @@ export const RawElement = ({ element, isHovered }: RawElementProps) => {
data as ElementDropdownProps,
disabled ?? false
);
case "range":
return getElementRangeNode(
data as ElementRangeProps,
disabled ?? false,
title
);
case "custom":
return data as React.ReactNode;
default:

155
front/views/settings/PreferencesView.tsx
View File

@@ -1,89 +1,94 @@
import React from 'react';
import { View } from 'react-native';
import { useDispatch, useSelector } from 'react-redux';
import { useDispatch } from 'react-redux';
import { Center, Button, Text, Switch, Slider, Select, Heading } from "native-base";
import { useLanguage } from "../../state/LanguageSlice";
import i18n, { AvailableLanguages, DefaultLanguage, translate } from "../../i18n/i18n";
import i18n, { AvailableLanguages, DefaultLanguage, translate, Translate } from "../../i18n/i18n";
import { RootState, useSelector } from "../../state/Store";
import { SettingsState, updateSettings } from "../../state/SettingsSlice";
const PreferencesView = ({navigation}) => {
const dispatch = useDispatch();
const language: AvailableLanguages = useSelector((state) => state.language.value);
const dispatch = useDispatch();
const language: AvailableLanguages = useSelector((state: RootState) => state.language.value);
const settings = useSelector((state: RootState) => (state.settings.settings as SettingsState));
return (
<Center style={{ flex: 1}}>
<Heading style={{ textAlign: "center" }}>
<Translate translationKey='prefBtn'/>
</Heading>
<View style={{margin: 20, maxHeight: 100, maxWidth: 500, width: '80%'}}>
<Select selectedValue={settings.colorScheme}
placeholder={'Theme'}
style={{ alignSelf: 'center'}}
onValueChange={(newColorScheme) => {
dispatch(updateSettings({ colorScheme: newColorScheme as any }))
}}
>
<Select.Item label={ translate('dark') } value='dark'/>
<Select.Item label={ translate('light') } value='light'/>
<Select.Item label={ translate('system') } value='system'/>
</Select>
</View>
return (
<Center style={{ flex: 1}}>
<Heading style={{ textAlign: "center" }}>{ translate('prefBtn')}</Heading>
<View style={{margin: 20, maxHeight: 100, maxWidth: 500, width: '80%'}}>
<Select selectedValue={language}
placeholder={translate('langBtn')}
style={{ alignSelf: 'center'}}
onValueChange={(itemValue) => {
dispatch(useLanguage(itemValue as AvailableLanguages));
}}>
<Select.Item label='Français' value='fr'/>
<Select.Item label='English' value='en'/>
<Select.Item label='Italiano' value='it'/>
<Select.Item label='Espanol' value='sp'/>
</Select>
</View>
<Button variant='outline' onPress={() => navigation.navigate('Settings')} style={{ margin: 10}}>{ translate('backBtn') }</Button>
<View style={{margin: 20, maxHeight: 100, maxWidth: 500, width: '80%'}}>
<Select selectedValue={settings.preferedLevel}
placeholder={ translate('diffBtn') }
style={{ height: 50, width: 150, alignSelf: 'center'}}
onValueChange={(itemValue) => {
dispatch(updateSettings({ preferedLevel: itemValue as any }));
}}>
<Select.Item label={ translate('easy') } value='easy'/>
<Select.Item label={ translate('medium') } value='medium'/>
<Select.Item label={ translate('hard') } value='hard'/>
</Select>
</View>
<View style={{margin: 20, maxHeight: 100, maxWidth: 500, width: '80%'}}>
<Select selectedValue={undefined}
placeholder={'Theme'}
style={{ alignSelf: 'center'}}
// onValueChange={(itemValue, itemIndex) => switch themes}
>
<Select.Item label={ translate('dark') } value='dark'/>
<Select.Item label={ translate('light') } value='light'/>
<Select.Item label={ translate('system') } value='system'/>
</Select>
</View>
<View style={{margin: 20}}>
<Text style={{ textAlign: 'center' }}>Color blind mode</Text>
<Switch style={{ alignSelf: 'center'}} value={settings.colorBlind} colorScheme="primary"
onValueChange={(enabled) => { dispatch(updateSettings({ colorBlind: enabled })) }}
/>
</View>
<View style={{margin: 20, maxHeight: 100, maxWidth: 500, width: '80%'}}>
<Select selectedValue={language}
placeholder={translate('langBtn')}
style={{ alignSelf: 'center'}}
onValueChange={(itemValue: AvailableLanguages, itemIndex) => {
let newLanguage = DefaultLanguage;
newLanguage = itemValue;Heading
dispatch(useLanguage(newLanguage));
}}>
<Select.Item label='Français' value='fr'/>
<Select.Item label='English' value='en'/>
<Select.Item label='Italiano' value='it'/>
<Select.Item label='Espanol' value='sp'/>
</Select>
</View>
<View style={{margin: 20, maxHeight: 100, maxWidth: 500, width: '80%'}}>
<Text style={{ textAlign: "center" }}>Mic volume</Text>
<Slider defaultValue={settings.micLevel} minValue={0} maxValue={1000} accessibilityLabel="hello world" step={10}
onChangeEnd={(value) => { dispatch(updateSettings({ micLevel: value })) }}
>
<Slider.Track>
<Slider.FilledTrack/>
</Slider.Track>
<Slider.Thumb/>
</Slider>
</View>
<View style={{margin: 20, maxHeight: 100, maxWidth: 500, width: '80%'}}>
<Select selectedValue={undefined}
placeholder={ translate('diffBtn') }
style={{ height: 50, width: 150, alignSelf: 'center'}}
// onValueChange={(itemValue, itemIndex) => change level}
>
<Select.Item label={ translate('easy') } value='easy'/>
<Select.Item label={ translate('medium') } value='medium'/>
<Select.Item label={ translate('hard') } value='hard'/>
</Select>
</View>
<View style={{margin: 20}}>
<Text style={{ textAlign: "center" }}>Color blind mode</Text>
<Switch style={{ alignSelf: 'center'}} colorScheme="primary"/>
</View>
<View style={{margin: 20, maxHeight: 100, maxWidth: 500, width: '80%'}}>
<Text style={{ textAlign: "center" }}>Mic volume</Text>
<Slider defaultValue={50} minValue={0} maxValue={1000} accessibilityLabel="hello world" step={10}>
<Slider.Track>
<Slider.FilledTrack/>
</Slider.Track>
<Slider.Thumb/>
</Slider>
</View>
<View style={{margin: 20, maxHeight: 100, maxWidth: 500, width: '80%'}}>
<Select selectedValue={undefined}
placeholder={'Device'}
style={{ height: 50, width: 150, alignSelf: 'center'}}
// onValueChange={(itemValue, itemIndex) => change device}
>
<Select.Item label='Mic_0' value='0'/>
<Select.Item label='Mic_1' value='1'/>
<Select.Item label='Mic_2' value='2'/>
</Select>
</View>
</Center>
)
<View style={{margin: 20, maxHeight: 100, maxWidth: 500, width: '80%'}}>
<Select selectedValue={settings.preferedInputName}
placeholder={'Device'}
style={{ height: 50, width: 150, alignSelf: 'center'}}
onValueChange={(itemValue: string) => { dispatch(updateSettings({ preferedInputName: itemValue })) }}
>
<Select.Item label='Mic_0' value='0'/>
<Select.Item label='Mic_1' value='1'/>
<Select.Item label='Mic_2' value='2'/>
</Select>
</View>
</Center>
)
}
export default PreferencesView;

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

@@ -16,6 +16,7 @@ import ChangeEmailForm from '../../components/forms/changeEmailForm';
import ProfileSettings from './SettingsProfileView';
import NotificationsView from './NotificationView';
import PrivacyView from './PrivacyView';
import PreferencesView from './PreferencesView';
import API, { APIError } from '../../API';
@@ -76,90 +77,6 @@ const MainView = ({navigation}) => {
)
}
export const PreferencesView = ({navigation}) => {
const dispatch = useDispatch();
const language: AvailableLanguages = useSelector((state: RootState) => state.language.value);
const settings = useSelector((state: RootState) => (state.settings.settings as SettingsState));
return (
<Center style={{ flex: 1}}>
<Heading style={{ textAlign: "center" }}>
<Translate translationKey='prefBtn'/>
</Heading>
<View style={{margin: 20, maxHeight: 100, maxWidth: 500, width: '80%'}}>
<Select selectedValue={settings.colorScheme}
placeholder={'Theme'}
style={{ alignSelf: 'center'}}
onValueChange={(newColorScheme) => {
dispatch(updateSettings({ colorScheme: newColorScheme as any }))
}}
>
<Select.Item label={ translate('dark') } value='dark'/>
<Select.Item label={ translate('light') } value='light'/>
<Select.Item label={ translate('system') } value='system'/>
</Select>
</View>
<View style={{margin: 20, maxHeight: 100, maxWidth: 500, width: '80%'}}>
<Select selectedValue={language}
placeholder={translate('langBtn')}
style={{ alignSelf: 'center'}}
onValueChange={(itemValue) => {
dispatch(useLanguage(itemValue as AvailableLanguages));
}}>
<Select.Item label='Français' value='fr'/>
<Select.Item label='English' value='en'/>
<Select.Item label='Italiano' value='it'/>
<Select.Item label='Espanol' value='sp'/>
</Select>
</View>
<View style={{margin: 20, maxHeight: 100, maxWidth: 500, width: '80%'}}>
<Select selectedValue={settings.preferedLevel}
placeholder={ translate('diffBtn') }
style={{ height: 50, width: 150, alignSelf: 'center'}}
onValueChange={(itemValue) => {
dispatch(updateSettings({ preferedLevel: itemValue as any }));
}}>
<Select.Item label={ translate('easy') } value='easy'/>
<Select.Item label={ translate('medium') } value='medium'/>
<Select.Item label={ translate('hard') } value='hard'/>
</Select>
</View>
<View style={{margin: 20}}>
<Text style={{ textAlign: 'center' }}>Color blind mode</Text>
<Switch style={{ alignSelf: 'center'}} value={settings.colorBlind} colorScheme="primary"
onValueChange={(enabled) => { dispatch(updateSettings({ colorBlind: enabled })) }}
/>
</View>
<View style={{margin: 20, maxHeight: 100, maxWidth: 500, width: '80%'}}>
<Text style={{ textAlign: "center" }}>Mic volume</Text>
<Slider defaultValue={settings.micLevel} minValue={0} maxValue={1000} accessibilityLabel="hello world" step={10}
onChangeEnd={(value) => { dispatch(updateSettings({ micLevel: value })) }}
>
<Slider.Track>
<Slider.FilledTrack/>
</Slider.Track>
<Slider.Thumb/>
</Slider>
</View>
<View style={{margin: 20, maxHeight: 100, maxWidth: 500, width: '80%'}}>
<Select selectedValue={settings.preferedInputName}
placeholder={'Device'}
style={{ height: 50, width: 150, alignSelf: 'center'}}
onValueChange={(itemValue: string) => { dispatch(updateSettings({ preferedInputName: itemValue })) }}
>
<Select.Item label='Mic_0' value='0'/>
<Select.Item label='Mic_1' value='1'/>
<Select.Item label='Mic_2' value='2'/>
</Select>
</View>
</Center>
)
}
export const ChangePasswordView = ({navigation}) => {
return (
<Center style={{ flex: 1}}>