Drawer UX improvement

desktop-app/app/components/Drawer/index.js

@@ -7,7 +7,7 @@ import cx from 'classnames';
 
 import styles from './styles.css';
 import commonStyles from '../common.styles.css';
-import {DEVICE_MANAGER, SETTINGS} from '../../constants/DrawerContents';
+import {DEVICE_MANAGER, USER_PREFERENCES} from '../../constants/DrawerContents';
 import {iconsColor} from '../../constants/colors';
 import DoubleLeftArrowIcon from '../icons/DoubleLeftArrow';
 
@@ -61,7 +61,7 @@ function getDrawerContent(type) {
   switch (type) {
     case DEVICE_MANAGER:
       return <DeviceDrawerContainer />;
-    case SETTINGS:
+    case USER_PREFERENCES:
       return <UserPreferencesContainer />;
   }
 }

desktop-app/app/components/LeftIconsPane/index.js

@@ -14,7 +14,7 @@ import {iconsColor} from '../../constants/colors';
 import {
   DEVICE_MANAGER,
   SCREENSHOT_MANAGER,
-  SETTINGS,
+  USER_PREFERENCES,
 } from '../../constants/DrawerContents';
 
 const LeftIconsPane = props => {
@@ -25,6 +25,13 @@ const LeftIconsPane = props => {
     height: 30,
     width: 30,
   };
+  const toggleState = content => {
+    if (props.drawer.open && props.drawer.content === content) {
+      return props.changeDrawerOpenState(false);
+    }
+
+    props.openDrawerAndSetContent(content);
+  };
   return (
     <div className={styles.iconsContainer}>
       <div className={cx(styles.logo, styles.icon)}>
@@ -37,23 +44,30 @@ const LeftIconsPane = props => {
         alignItems="center"
         className={cx(styles.utilitySection)}
       >
-        <Grid item className={cx(commonStyles.icons, styles.icon, commonStyles.enabled)}>
-          <div onClick={() => props.openDrawerAndSetContent(DEVICE_MANAGER)}>
+        <Grid
+          item
+          className={cx(commonStyles.icons, styles.icon, commonStyles.enabled, {
+            [commonStyles.selected]:
+              props.drawer.open && props.drawer.content === DEVICE_MANAGER,
+          })}
+          onClick={() => toggleState(DEVICE_MANAGER)}
+        >
+          <div>
             <DevicesIcon {...iconProps} className="deviceManagerIcon" />
           </div>
         </Grid>
-        <Grid item className={cx(commonStyles.icons, styles.icon, commonStyles.enabled)}>
-          <div onClick={() => props.openDrawerAndSetContent(SETTINGS)}>
+        <Grid
+          item
+          className={cx(commonStyles.icons, styles.icon, commonStyles.enabled, {
+            [commonStyles.selected]:
+              props.drawer.open && props.drawer.content === USER_PREFERENCES,
+          })}
+          onClick={() => toggleState(USER_PREFERENCES)}
+        >
+          <div>
             <SettingsIcon {...iconProps} className="settingsIcon" />
           </div>
         </Grid>
-        {/*<Grid item className={cx(commonStyles.icons, commonStyles.enabled)}>
-          <div
-            onClick={() => props.openDrawerAndSetContent(SCREENSHOT_MANAGER)}
-          >
-            <PhotoLibraryIcon {...iconProps} />
-          </div>
-        </Grid>*/}
       </Grid>
       <div style={{position: 'relative'}}>
         <div

desktop-app/app/components/LeftIconsPane/styles.css

@@ -5,7 +5,7 @@
 }
 
 .icon {
-  margin-bottom: 10px;
+  margin-bottom: 10px !important;
 }
 
 .utilitySection {

desktop-app/app/components/common.styles.css

@@ -12,11 +12,11 @@
 
 .icons.enabled:hover {
   opacity: 1;
-  background: #7587ec;
+  background: #6075ef;
 }
 
 .icons.selected {
-  background: #7587ecf5;
+  background: #7587ec;
 }
 
 .iconDisabler {

desktop-app/app/constants/DrawerContents.js

@@ -1,3 +1,3 @@
 export const DEVICE_MANAGER = 'DEVICE_MANAGER';
 export const SCREENSHOT_MANAGER = 'SCREENSHOT_MANAGER';
-export const SETTINGS = 'SETTINGS';
+export const USER_PREFERENCES = 'USER_PREFERENCES';

desktop-app/app/reducers/browser.js

@@ -51,6 +51,7 @@ type PreviewerType = {
 
 type UserPreferenceType = {
   disableSSLValidation: boolean,
+  drawerState: boolean,
 };
 
 type FilterFieldType = FILTER_FIELDS.OS | FILTER_FIELDS.DEVICE_TYPE;
@@ -89,6 +90,14 @@ function _getActiveDevices() {
   return activeDevices;
 }
 
+function _getUserPreferences(): UserPreferenceType {
+  return settings.get(USER_PREFERENCES) || {};
+}
+
+function _setUserPreferences(userPreferences) {
+  settings.set(USER_PREFERENCES, userPreferences);
+}
+
 export default function browser(
   state: BrowserStateType = {
     devices: _getActiveDevices(),
@@ -98,10 +107,16 @@ export default function browser(
     previousZoomLevel: null,
     scrollPosition: {x: 0, y: 0},
     navigatorStatus: {backEnabled: false, forwardEnabled: false},
-    drawer: {open: true, content: DEVICE_MANAGER},
+    drawer: {
+      open:
+        _getUserPreferences().drawerState === null
+          ? true
+          : _getUserPreferences().drawerState,
+      content: DEVICE_MANAGER,
+    },
     previewer: {layout: FLEXIGRID_LAYOUT},
     filters: {[FILTER_FIELDS.OS]: [], [FILTER_FIELDS.DEVICE_TYPE]: []},
-    userPreferences: settings.get(USER_PREFERENCES) || {},
+    userPreferences: _getUserPreferences(),
   },
   action: Action
 ) {
@@ -119,6 +134,10 @@ export default function browser(
     case NEW_NAVIGATOR_STATUS:
       return {...state, navigatorStatus: action.navigatorStatus};
     case NEW_DRAWER_CONTENT:
+      _setUserPreferences({
+        ...state.userPreferences,
+        drawerState: action.drawer.open,
+      });
       return {...state, drawer: action.drawer};
     case NEW_PREVIEWER_CONFIG:
       const updateObject = {previewer: action.previewer};