Added night mode toggle

Author: Jovert Lota Palonpon

resources/js/Backoffice.js

@@ -12,6 +12,7 @@ class Backoffice extends Component {
         loading: true,
         navigating: true,
         authenticated: false,
+        nightMode: false,
         auth: {},
         user: {},
         username: '',
@@ -80,6 +81,26 @@ class Backoffice extends Component {
         } catch (error) {}
     };
 
+    /**
+     * Handle nightmode toggle.
+     * Store boolean value in persistent storage.
+     *
+     * @return {undefined}
+     */
+    handleNightmodeToggled = () => {
+        this.setState(prevState => {
+            return {
+                nightMode: !prevState.nightMode,
+            };
+        });
+
+        if (!this.state.nightMode) {
+            window.localStorage.setItem('nightMode', true);
+        } else {
+            window.localStorage.removeItem('nightMode');
+        }
+    };
+
     /**
      * Sign out the user, but retain the username.
      *
@@ -104,6 +125,19 @@ class Backoffice extends Component {
         await this.signout();
     };
 
+    /**
+     * Set nightmode based on stored value in persistent storage.
+     *
+     * @return {undefined}
+     */
+    setNightMode = () => {
+        const nightMode = window.localStorage.getItem('nightMode');
+
+        this.setState({
+            nightMode: nightMode ? true : false,
+        });
+    };
+
     /**
      * Get the Authentication Data from the persistent storage.
      *
@@ -159,6 +193,8 @@ class Backoffice extends Component {
             await this.authenticate(JSON.stringify(auth));
         }
 
+        this.setNightMode();
+
         this.setState({ loading: false, navigating: false });
     }
 
@@ -180,6 +216,8 @@ class Backoffice extends Component {
                                 width,
                                 environment: 'backoffice',
                                 routes: ROUTES,
+                                handleNightmodeToggled: this
+                                    .handleNightmodeToggled,
                                 refresh: this.refresh,
                                 authenticate: this.authenticate,
                                 handleLock: this.handleLock,

resources/js/icons/1x1/LightbulbOff.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { SvgIcon } from '@material-ui/core';
+
+const LightbulbOn = props => (
+    <SvgIcon
+        {...props}
+        viewBox="0 0 24 24"
+    >
+        <path d="M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2.85 11.1l-.85.6V16h-4v-2.3l-.85-.6C7.8 12.16 7 10.63 7 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.16-2.15 4.1z"></path>
+    </SvgIcon>
+);
+
+export default LightbulbOn;

resources/js/icons/1x1/LightbulbOn.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { SvgIcon } from '@material-ui/core';
+
+const LightbulbOn = props => (
+    <SvgIcon
+        {...props}
+        viewBox="0 0 24 24"
+    >
+        <path d="m9,21c0,0.55 0.45,1 1,1l4,0c0.55,0 1,-0.45 1,-1l0,-1l-6,0l0,1zm3,-19c-3.86,0 -7,3.14 -7,7c0,2.38 1.19,4.47 3,5.74l0,2.26c0,0.55 0.45,1 1,1l6,0c0.55,0 1,-0.45 1,-1l0,-2.26c1.81,-1.27 3,-3.36 3,-5.74c0,-3.86 -3.14,-7 -7,-7z" />
+    </SvgIcon>
+);
+
+export default LightbulbOn;

resources/js/icons/1x1/index.js

@@ -0,0 +1,2 @@
+export { default as LightbulbOff } from './LightbulbOff';
+export { default as LightbulbOn } from './LightbulbOn';

resources/js/views/__backoffice/partials/Header.js

@@ -37,6 +37,10 @@ import {
     Settings as SettingsIcon,
 } from '@material-ui/icons';
 
+import {
+    LightbulbOff as LightbulbOffIcon,
+    LightbulbOn as LightbulbOnIcon,
+} from '../../../icons/1x1';
 import { Ph as PhIcon, Us as UsIcon } from '../../../icons/flags/4x3';
 import { Skeleton } from '../../../ui';
 
@@ -232,7 +236,7 @@ const Header = props => {
         accountMenuOpen,
     } = parentProps;
 
-    const { user, navigating } = pageProps;
+    const { user, navigating, nightMode, handleNightmodeToggled } = pageProps;
 
     const skeletonProps = {
         color: colors.grey[400],
@@ -308,6 +312,17 @@ const Header = props => {
                                 />
                             </IconButton>
                         </Grid>
+
+                        <Grid item>
+                            <IconButton color="inherit">
+                                <Skeleton
+                                    {...skeletonProps}
+                                    circle
+                                    height={30}
+                                    width={30}
+                                />
+                            </IconButton>
+                        </Grid>
                     </Grid>
                 </Toolbar>
             </AppBar>
@@ -462,6 +477,27 @@ const Header = props => {
                             </Tooltip>
                         </Grid>
 
+                        <Grid item>
+                            <Tooltip
+                                title={
+                                    nightMode
+                                        ? Lang.get('navigation.nightmode_off')
+                                        : Lang.get('navigation.nightmode_on')
+                                }
+                            >
+                                <IconButton
+                                    color="inherit"
+                                    onClick={handleNightmodeToggled}
+                                >
+                                    {nightMode ? (
+                                        <LightbulbOnIcon />
+                                    ) : (
+                                        <LightbulbOffIcon />
+                                    )}
+                                </IconButton>
+                            </Tooltip>
+                        </Grid>
+
                         <Grid item>
                             <Tooltip title={Lang.get('navigation.account')}>
                                 <div className={classes.navLinkMenuWrapper}>

resources/lang/en/navigation.php

@@ -23,17 +23,20 @@
     'signin' => 'Sign in instead',
     'send_link' => 'Send Link',
 
-    'account' => 'Account',
-    'profile' => 'Profile',
-    'settings' => 'Settings',
-    'lock' => 'Lock',
-    'signout' => 'Sign out',
+    'notifications' => 'Notifications',
 
     'locale' => 'Locale',
     'english' => 'English',
     'filipino' => 'Filipino',
 
-    'notifications' => 'Notifications',
+    'nightmode_on' => 'Toggle Night Mode On',
+    'nightmode_off' => 'Toggle Night Mode Off',
+
+    'account' => 'Account',
+    'profile' => 'Profile',
+    'settings' => 'Settings',
+    'lock' => 'Lock',
+    'signout' => 'Sign out',
 
     'help' => 'Help',
 

resources/lang/fil/navigation.php

@@ -23,17 +23,20 @@
     'signin' => 'Mag-sign in nalang',
     'send_link' => 'I-send ang Link',
 
-    'account' => 'Account',
-    'profile' => 'Profile',
-    'settings' => 'Mga Setting',
-    'lock' => 'I-lock',
-    'signout' => 'Mag-sign out',
+    'notifications' => 'Mga Abiso',
 
     'locale' => 'Lokal',
     'english' => 'Ingles',
     'filipino' => 'Filipino',
 
-    'notifications' => 'Mga Abiso',
+    'nightmode_on' => 'I-On ang Night Mode',
+    'nightmode_off' => 'I-Off ang Night Mode',
+
+    'account' => 'Account',
+    'profile' => 'Profile',
+    'settings' => 'Mga Setting',
+    'lock' => 'I-lock',
+    'signout' => 'Mag-sign out',
 
     'help' => 'Tulong',