ysimard/application-amicale
1
0
Fork 0
forked from vergnet/application-amicale
Code Issues Pull requests Releases Wiki Activity

Follow system night mode when available

Browse source
This commit is contained in:
keplyx 2020-03-08 19:50:17 +01:00
parent 992e2d8286
commit 9ec986574f
8 changed files with 57 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
App.js
View file

@ -42,6 +42,7 @@ export default class App extends React.Component<Props, State> {
super();
LocaleManager.initTranslations();
this.onIntroDone = this.onIntroDone.bind(this);
SplashScreen.preventAutoHide();
}
/**
@ -84,13 +85,9 @@ export default class App extends React.Component<Props, State> {
async loadAssetsAsync() {
// Wait for custom fonts to be loaded before showing the app
// console.log("loading Fonts");
SplashScreen.preventAutoHide();
// console.log("loading preferences");
await AsyncStorageManager.getInstance().loadPreferences();
ThemeManager.getInstance().setUpdateThemeCallback(() => this.updateTheme());
// console.log("loading Expo token");
await NotificationsManager.initExpoToken();
// await NotificationsManager.initExpoToken();
this.onLoadFinished();
}
@ -122,7 +119,6 @@ export default class App extends React.Component<Props, State> {
isAprilFools={this.state.showAprilFools && !this.state.showIntro}
/>;
} else {
return (
<PaperProvider theme={this.state.currentTheme}>
<NavigationContainer theme={this.state.currentTheme}>

1
app.json
View file

@ -13,6 +13,7 @@
"version": "1.5.2",
"orientation": "portrait",
"primaryColor": "#be1522",
"userInterfaceStyle": "automatic",
"icon": "./assets/android.icon.png",
"splash": {
"backgroundColor": "#be1522",

3
package.json
View file

@ -34,7 +34,8 @@
"react-native-render-html": "^4.1.2",
"react-native-safe-area-context": "0.6.0",
"react-native-screens": "2.0.0-alpha.12",
"react-native-webview": "7.4.3"
"react-native-webview": "7.4.3",
"react-native-appearance": "~0.3.1"
},
"devDependencies": {
"babel-preset-expo": "^8.0.0"

41
screens/SettingsScreen.js
View file

@ -7,6 +7,7 @@ import i18n from "i18n-js";
import AsyncStorageManager from "../utils/AsyncStorageManager";
import NotificationsManager from "../utils/NotificationsManager";
import {Card, List, Switch, ToggleButton} from 'react-native-paper';
import {Appearance} from "react-native-appearance";
type Props = {
navigation: Object,
@ -14,6 +15,7 @@ type Props = {
type State = {
nightMode: boolean,
nightModeFollowSystem: boolean,
proxiwashNotifPickerSelected: string,
startScreenPickerSelected: string,
};
@ -24,6 +26,8 @@ type State = {
export default class SettingsScreen extends React.Component<Props, State> {
state = {
nightMode: ThemeManager.getNightMode(),
nightModeFollowSystem: AsyncStorageManager.getInstance().preferences.nightModeFollowSystem.current === '1' &&
Appearance.getColorScheme() !== 'no-preference',
proxiwashNotifPickerSelected: AsyncStorageManager.getInstance().preferences.proxiwashNotifications.current,
startScreenPickerSelected: AsyncStorageManager.getInstance().preferences.defaultStartScreen.current,
};
@ -31,12 +35,14 @@ export default class SettingsScreen extends React.Component<Props, State> {
onProxiwashNotifPickerValueChange: Function;
onStartScreenPickerValueChange: Function;
onToggleNightMode: Function;
onToggleNightModeFollowSystem: Function;
constructor() {
super();
this.onProxiwashNotifPickerValueChange = this.onProxiwashNotifPickerValueChange.bind(this);
this.onStartScreenPickerValueChange = this.onStartScreenPickerValueChange.bind(this);
this.onToggleNightMode = this.onToggleNightMode.bind(this);
this.onToggleNightModeFollowSystem = this.onToggleNightModeFollowSystem.bind(this);
}
/**
@ -119,6 +125,18 @@ export default class SettingsScreen extends React.Component<Props, State> {
this.setState({nightMode: !this.state.nightMode});
}
onToggleNightModeFollowSystem() {
const value = !this.state.nightModeFollowSystem;
this.setState({nightModeFollowSystem: value});
let key = AsyncStorageManager.getInstance().preferences.nightModeFollowSystem.key;
AsyncStorageManager.getInstance().savePref(key, value ? '1' : '0');
if (value) {
const nightMode = Appearance.getColorScheme() === 'dark';
ThemeManager.getInstance().setNightMode(nightMode);
this.setState({nightMode: nightMode});
}
}
/**
* Get a list item using a checkbox control
*
@ -128,7 +146,7 @@ export default class SettingsScreen extends React.Component<Props, State> {
* @param subtitle The text to display as this list item subtitle
* @returns {React.Node}
*/
getToggleItem(onPressCallback: Function, icon: string, title: string, subtitle: string) {
getToggleItem(onPressCallback: Function, icon: string, title: string, subtitle: string, state: boolean) {
return (
<List.Item
title={title}
@ -136,7 +154,7 @@ export default class SettingsScreen extends React.Component<Props, State> {
left={props => <List.Icon {...props} icon={icon}/>}
right={props =>
<Switch
value={this.state.nightMode}
value={state}
onValueChange={onPressCallback}
/>}
/>
@ -149,14 +167,27 @@ export default class SettingsScreen extends React.Component<Props, State> {
<Card style={{margin: 5}}>
<Card.Title title={i18n.t('settingsScreen.generalCard')}/>
<List.Section>
{this.getToggleItem(
{Appearance.getColorScheme() !== 'no-preference' ? this.getToggleItem(
this.onToggleNightModeFollowSystem,
'theme-light-dark',
i18n.t('settingsScreen.nightModeAuto'),
this.state.nightMode ?
i18n.t('settingsScreen.nightModeSubOn') :
i18n.t('settingsScreen.nightModeSubOff'),
this.state.nightModeFollowSystem
) : null}
{
Appearance.getColorScheme() === 'no-preference' || !this.state.nightModeFollowSystem ?
this.getToggleItem(
this.onToggleNightMode,
'theme-light-dark',
i18n.t('settingsScreen.nightMode'),
this.state.nightMode ?
i18n.t('settingsScreen.nightModeSubOn') :
i18n.t('settingsScreen.nightModeSubOff')
)}
i18n.t('settingsScreen.nightModeSubOff'),
this.state.nightMode
) : null
}
<List.Accordion
title={i18n.t('settingsScreen.startScreen')}
description={i18n.t('settingsScreen.startScreenSub')}

1
translations/en.json
View file

@ -67,6 +67,7 @@
"nightMode": "Night Mode",
"nightModeSubOn": "Your eyes are at peace",
"nightModeSubOff": "Your eyes are burning",
"nightModeAuto": "Follow system dark mode",
"startScreen": "Start Screen",
"startScreenSub": "Select which screen to start the app on",
"proxiwashNotifReminder": "Machine running reminder",

5
translations/fr.json
View file

@ -65,8 +65,9 @@
"settingsScreen": {
"generalCard": "Général",
"nightMode": "Mode Nuit",
"nightModeSubOn": "Vos yeux brulent",
"nightModeSubOff": "Vos yeux vous remercient",
"nightModeSubOn": "Vos yeux vous remercient",
"nightModeSubOff": "Vos yeux brulent",
"nightModeAuto": "Mode nuit système",
"startScreen": "Écran de démarrage",
"startScreenSub": "Choisissez l'écran utilisé au démarrage",
"proxiwashNotifReminder": "Rappel de machine en cours",

5
utils/AsyncStorageManager.js
View file

@ -44,6 +44,11 @@ export default class AsyncStorageManager {
default: '[]',
current: '',
},
nightModeFollowSystem: {
key: 'nightModeFollowSystem',
default: '1',
current: '',
},
nightMode: {
key: 'nightMode',
default: '0',

6
utils/ThemeManager.js
View file

@ -3,6 +3,9 @@
import AsyncStorageManager from "./AsyncStorageManager";
import {DarkTheme, DefaultTheme} from 'react-native-paper';
import AprilFoolsManager from "./AprilFoolsManager";
import { Appearance } from 'react-native-appearance';
const colorScheme = Appearance.getColorScheme();
/**
* Singleton class used to manage themes
@ -107,7 +110,8 @@ export default class ThemeManager {
* @returns {boolean} Night mode state
*/
static getNightMode(): boolean {
return AsyncStorageManager.getInstance().preferences.nightMode.current === '1';
return AsyncStorageManager.getInstance().preferences.nightMode.current === '1' ||
AsyncStorageManager.getInstance().preferences.nightModeFollowSystem.current === '1' && colorScheme === 'dark';
}
/**