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

[add]: LinkBase && PopupCC, starting theme management (light and dark) and translation

Browse Source
This commit is contained in:
mathysPaul
2023-10-27 20:50:05 +02:00
parent 6a8ca7d0fa
commit 77f0c2f06f
32 changed files with 739 additions and 1151 deletions
Download Patch File Download Diff File Expand all files Collapse all files
front/views/settings/NotificationsSettings.tsx
+7 -4
View File
@@ -5,9 +5,12 @@ import ElementList from '../../components/GtkUI/ElementList';
import useUserSettings from '../../hooks/userSettings';
import { LoadingView } from '../../components/Loading';
import { Calendar1, MonitorMobbile, Send2, Warning2 } from 'iconsax-react-native';
import useColorScheme from '../../hooks/colorScheme';
const NotificationsSettings = () => {
const { settings, updateSettings } = useUserSettings();
const colorScheme = useColorScheme();
const color = colorScheme === 'light' ? '#000' : '#fff';
if (!settings.data) {
return <LoadingView />;
@@ -18,7 +21,7 @@ const NotificationsSettings = () => {
elements={[
{
type: 'toggle',
icon: <MonitorMobbile size="24" color="#FFF" style={{ minWidth: 24 }} />,
icon: <MonitorMobbile size="24" color={color} style={{ minWidth: 24 }} />,
title: translate('SettingsNotificationsPushNotifications'),
description: 'Cette notification apparaitra sur votre apparail en pop-up',
data: {
@@ -34,7 +37,7 @@ const NotificationsSettings = () => {
},
{
type: 'toggle',
icon: <Send2 size="24" color="#FFF" style={{ minWidth: 24 }} />,
icon: <Send2 size="24" color={color} style={{ minWidth: 24 }} />,
title: translate('SettingsNotificationsEmailNotifications'),
description: 'Recevez des mails pour atteindre vos objectifs',
data: {
@@ -50,7 +53,7 @@ const NotificationsSettings = () => {
},
{
type: 'toggle',
icon: <Calendar1 size="24" color="#FFF" style={{ minWidth: 24 }} />,
icon: <Calendar1 size="24" color={color} style={{ minWidth: 24 }} />,
title: translate('SettingsNotificationsTrainingReminder'),
description: 'Un apprentissage régulier est la clé',
data: {
@@ -66,7 +69,7 @@ const NotificationsSettings = () => {
},
{
type: 'toggle',
icon: <Warning2 size="24" color="#FFF" style={{ minWidth: 24 }} />,
icon: <Warning2 size="24" color={color} style={{ minWidth: 24 }} />,
title: translate('SettingsNotificationsReleaseAlert'),
description: 'Restez informé de nos mises à jour',
data: {
front/views/settings/PreferencesSettings.tsx
+8 -5
View File
@@ -8,17 +8,20 @@ import { updateSettings } from '../../state/SettingsSlice';
import ElementList from '../../components/GtkUI/ElementList';
import LocalSettings from '../../models/LocalSettings';
import { Brush2, Colorfilter, LanguageSquare, Rank, Sound } from 'iconsax-react-native';
import useColorScheme from '../../hooks/colorScheme';
const PreferencesSettings = () => {
const dispatch = useDispatch();
const language = useSelector((state) => state.language.value);
const settings = useSelector((state) => state.settings.local);
const colorScheme = useColorScheme();
const color = colorScheme === 'light' ? '#000' : '#fff';
return (
<Column space={4} style={{width: '100%'}}>
<ElementList
elements={[
{
icon: <Brush2 size="24" color="#FFF" style={{ minWidth: 24 }} />,
icon: <Brush2 size="24" color={color} style={{ minWidth: 24 }} />,
type: 'dropdown',
title: translate('SettingsPreferencesTheme'),
description: 'Définissez le theme (Dark ou Light) de votre application',
@@ -40,7 +43,7 @@ const PreferencesSettings = () => {
},
},
{
icon: <LanguageSquare size="24" color="#FFF" style={{ minWidth: 24 }} />,
icon: <LanguageSquare size="24" color={color} style={{ minWidth: 24 }} />,
type: 'dropdown',
title: translate('SettingsPreferencesLanguage'),
description: 'Définissez la langue de votre application',
@@ -58,7 +61,7 @@ const PreferencesSettings = () => {
},
},
{
icon: <Rank size="24" color="#FFF" style={{ minWidth: 24 }} />,
icon: <Rank size="24" color={color} style={{ minWidth: 24 }} />,
type: 'dropdown',
title: translate('SettingsPreferencesDifficulty'),
description: 'La précision du tempo est de plus en plus élevée',
@@ -84,7 +87,7 @@ const PreferencesSettings = () => {
<ElementList
elements={[
{
icon: <Colorfilter size="24" color="#FFF" style={{ minWidth: 24 }} />,
icon: <Colorfilter size="24" color={color} style={{ minWidth: 24 }} />,
type: 'toggle',
title: translate('SettingsPreferencesColorblindMode'),
description: 'Augmente le contraste',
@@ -100,7 +103,7 @@ const PreferencesSettings = () => {
<ElementList
elements={[
{
icon: <Sound size="24" color="#FFF" style={{ minWidth: 24 }} />,
icon: <Sound size="24" color={color} style={{ minWidth: 24 }} />,
type: 'range',
title: translate('SettingsPreferencesMicVolume'),
description: 'Régler le volume de votre micro selon vos preference',
front/views/settings/PrivacySettings.tsx
+6 -3
View File
@@ -8,11 +8,14 @@ import { updateSettings } from '../../state/SettingsSlice';
import useUserSettings from '../../hooks/userSettings';
import { LoadingView } from '../../components/Loading';
import { Driver, Like1, Shop } from 'iconsax-react-native';
import useColorScheme from '../../hooks/colorScheme';
const PrivacySettings = () => {
const dispatch = useDispatch();
const settings = useSelector((state: RootState) => state.settings.local);
const { settings: userSettings, updateSettings: updateUserSettings } = useUserSettings();
const colorScheme = useColorScheme();
const color = colorScheme === 'light' ? '#000' : '#fff';
if (!userSettings.data) {
return <LoadingView />;
@@ -23,7 +26,7 @@ const PrivacySettings = () => {
elements={[
{
type: 'toggle',
icon: <Driver size="24" color="#FFF" style={{ minWidth: 24 }} />,
icon: <Driver size="24" color={color} style={{ minWidth: 24 }} />,
title: translate('dataCollection'),
description:
"Acceptez-vous la récupération de vos données pour l'amélioration de Chromacase ?",
@@ -37,7 +40,7 @@ const PrivacySettings = () => {
},
{
type: 'toggle',
icon: <Shop size="24" color="#FFF" style={{ minWidth: 24 }} />,
icon: <Shop size="24" color={color} style={{ minWidth: 24 }} />,
title: translate('customAds'),
description: 'Afficher les suggestions dans la section des recommandations',
data: {
@@ -48,7 +51,7 @@ const PrivacySettings = () => {
},
{
type: 'toggle',
icon: <Like1 size="24" color="#FFF" style={{ minWidth: 24 }} />,
icon: <Like1 size="24" color={color} style={{ minWidth: 24 }} />,
title: translate('recommendations'),
description: 'Souhaitez-vous recevoir nos conseils et recommandations ?',
data: {
front/views/settings/SettingsPremium.tsx
+6 -3
View File
@@ -6,6 +6,7 @@ import ElementList from '../../components/GtkUI/ElementList';
import { translate } from '../../i18n/i18n';
import { useQuery } from '../../Queries';
import { Designtools, Magicpen, Star1 } from 'iconsax-react-native';
import useColorScheme from '../../hooks/colorScheme';
// Too painful to infer the settings-only, typed navigator. Gave up
// eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -16,12 +17,14 @@ const PremiumSettings = () => {
return <LoadingView />;
}
const user = userQuery.data;
const colorScheme = useColorScheme();
const color = colorScheme === 'light' ? '#000' : '#fff';
return (
<ElementList
style={{width: '100%'}}
elements={[
{
icon: <Star1 size="24" color="#FFF" style={{ minWidth: 24 }} />,
icon: <Star1 size="24" color={color} style={{ minWidth: 24 }} />,
type: 'text',
title: translate('premiumAccount'),
description:
@@ -31,7 +34,7 @@ const PremiumSettings = () => {
},
},
{
icon: <Magicpen size="24" color="#FFF" style={{ minWidth: 24 }} />,
icon: <Magicpen size="24" color={color} style={{ minWidth: 24 }} />,
type: 'toggle',
title: 'Piano Magique',
description:
@@ -45,7 +48,7 @@ const PremiumSettings = () => {
},
},
{
icon: <Designtools size="24" color="#FFF" style={{ minWidth: 24 }} />,
icon: <Designtools size="24" color={color} style={{ minWidth: 24 }} />,
type: 'dropdown',
title: 'Thème de piano',
description: 'Définissez le theme de votre piano',
front/views/settings/SettingsProfile.tsx
+9 -5
View File
@@ -11,6 +11,8 @@ import ChangeEmailForm from '../../components/forms/changeEmailForm';
import ChangePasswordForm from '../../components/forms/changePasswordForm';
import LogoutButtonCC from '../../components/UI/LogoutButtonCC';
import Spacer from '../../components/UI/Spacer';
import { ColorSchemeProvider } from '../../Theme';
import useColorScheme from '../../hooks/colorScheme';
const handleChangeEmail = async (newEmail: string): Promise<string> => {
await API.updateUserEmail(newEmail);
@@ -31,12 +33,14 @@ const ProfileSettings = () => {
return <LoadingView />;
}
const user = userQuery.data;
const colorScheme = useColorScheme();
const color = colorScheme === 'light' ? '#000' : '#fff';
return (
<Column space={4} style={{width: '100%'}}>
<ElementList
elements={[
{
icon: <Google size="24" color="#FFF" style={{ minWidth: 24 }} />,
icon: <Google size="24" color={color} style={{ minWidth: 24 }} />,
type: 'text',
title: 'Google account', // TODO translate
description: 'Liez votre compte Google à ChromaCase', // TODO translate
@@ -45,7 +49,7 @@ const ProfileSettings = () => {
},
},
{
icon: <Verify size="24" color="#FFF" style={{ minWidth: 24 }} />,
icon: <Verify size="24" color={color} style={{ minWidth: 24 }} />,
type: 'text',
description: 'Vérifiez votre adresse e-mail', // TODO translate
title: translate('verified'),
@@ -69,7 +73,7 @@ const ProfileSettings = () => {
},
},
{
icon: <UserSquare size="24" color="#FFF" style={{ minWidth: 24 }} />,
icon: <UserSquare size="24" color={color} style={{ minWidth: 24 }} />,
type: 'text',
title: translate('avatar'),
description: 'Changer votre photo de profile', // TODO translate
@@ -103,7 +107,7 @@ const ProfileSettings = () => {
},
},
{
icon: <SmsEdit size="24" color="#FFF" style={{ minWidth: 24 }} />,
icon: <SmsEdit size="24" color={color} style={{ minWidth: 24 }} />,
type: 'sectionDropdown',
title: 'Change email', // TODO translate
description:
@@ -119,7 +123,7 @@ const ProfileSettings = () => {
},
},
{
icon: <PasswordCheck size="24" color="#FFF" style={{ minWidth: 24 }} />,
icon: <PasswordCheck size="24" color={color} style={{ minWidth: 24 }} />,
type: 'sectionDropdown',
title: 'Change password', // TODO translate
description:
front/views/settings/SettingsView.tsx
+14 -10
View File
@@ -1,5 +1,5 @@
import React from 'react';
import { Center, Flex, Text } from 'native-base';
import { Center, Flex, Text, useTheme } from 'native-base';
import ProfileSettings from './SettingsProfile';
import NotificationsSettings from './NotificationsSettings';
import PrivacySettings from './PrivacySettings';
@@ -26,6 +26,8 @@ import { Scene } from 'react-native-tab-view/lib/typescript/src/types';
import PremiumSettings from './SettingsPremium';
import { RouteProps } from '../../Navigation';
import ScaffoldCC from '../../components/UI/ScaffoldCC';
import { ColorSchemeProvider } from '../../Theme';
import useColorScheme from '../../hooks/colorScheme';
export const PianoSettings = () => {
return (
@@ -66,6 +68,8 @@ const getTabData = (key: string) => {
const SetttingsNavigator = (props: RouteProps<{}>) => {
const layout = useWindowDimensions();
const [index, setIndex] = React.useState(0);
const colorScheme = useColorScheme();
const { colors } = useTheme();
const [routes] = React.useState<Route[]>([
{ key: 'profile', title: 'Profile' },
{ key: 'premium', title: 'Premium' },
@@ -80,11 +84,13 @@ const SetttingsNavigator = (props: RouteProps<{}>) => {
<TabBar
{...props}
style={{
backgroundColor: 'rgba(0, 0, 0, 0)',
borderBottomWidth: 2,
borderColor: 'rgba(255,255,255,0.5)',
backgroundColor: 'transparent',
borderBottomWidth: 1,
borderColor: colors.primary[500],
}}
indicatorStyle={{ backgroundColor: 'white' }}
activeColor={ colorScheme === 'light' ? '#000' : '#fff'}
inactiveColor={ colorScheme === 'light' ? 'rgba(0,0,0,0.7)' : 'rgba(255,255,255,0.7)'}
indicatorStyle={{ backgroundColor: colors.primary[500] }}
renderIcon={(
scene: Scene<Route> & {
focused: boolean;
@@ -92,15 +98,13 @@ const SetttingsNavigator = (props: RouteProps<{}>) => {
}
) => {
const tabHeader = getTabData(scene.route!.key);
return tabHeader.index == index ? (
<tabHeader.icon size="18" color="#6075F9" variant="Bold" />
) : (
<tabHeader.icon size="18" color="#6075F9" />
return (
<tabHeader.icon size="18" color="#6075F9" variant={scene.focused ? "Bold" : "Outline"} />
);
}}
renderLabel={({ route, color }) =>
layout.width > 1100 ? (
<Text style={{ color, paddingLeft: 10, overflow: 'hidden' }}>
<Text style={{ color: color, paddingLeft: 10, overflow: 'hidden' }}>
{route.title}
</Text>
) : null