Make the chrome expand again, when user presses the user icon (Trades…

…hift#237) * Make the chrome expand again, when user presses the user icon
marinalecuts · Oct 12, 2017 · b0d937d · b0d937d
1 parent 35bf748
commit b0d937d
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 32 deletions.
diff --git a/src/components/menu/footer/Footer.js b/src/components/menu/footer/Footer.js
@@ -6,31 +6,39 @@ import { getTranslate as getTranslation } from 'react-localize-redux';
 import Avatar from 'components/menu/footer/avatar/Avatar';
 import { actions as rootActions } from 'lib/root/root';
 import { selectors as appSelectors } from 'lib/apps/appsSelectors';
-import { selectors as layoutSelectors } from 'lib/layout/layout';
+import { selectors as layoutSelectors, actions as layoutActions } from 'lib/layout/layout';
 import { appHref } from 'lib/helpers/helpers';
 import 'components/menu/footer/footer.css';
 import settingsIcon from 'components/menu/footer/__static__/settingsIcon.svg';
 import logoutIcon from 'components/menu/footer/__static__/logoutIcon.svg';
 
-export const Footer = ({ t, user, busy, footerAttrs, settingsAttrs, logoutUser }) => (
+export const Footer = ({
+	t,
+	user,
+	busy,
+	footerAttrs,
+	settingsAttrs,
+	logoutUser,
+	settingsClick
+}) => (
 	<div {...footerAttrs}>
+		<div className="userimage" onClick={settingsClick}>
+			<Avatar
+				busy={busy}
+				userName={user.userName}
+				companyName={user.companyName}
+				avatarURL={user.avatarURL}
+			/>
+		</div>
+		<div className="user">
+			<span className="username tst-user">
+				{busy ? t('[Loading] Loading…') : user.userName || ''}
+			</span>
+			<span className="company tst-company">
+				{busy ? t('[Loading] Loading company…') : user.companyName || ''}
+			</span>
+		</div>
 		<a {...settingsAttrs} title={t('[Alt] Settings')}>
-			<div className="userimage">
-				<Avatar
-					busy={busy}
-					userName={user.userName}
-					companyName={user.companyName}
-					avatarURL={user.avatarURL}
-				/>
-			</div>
-			<div className="user">
-				<span className="username tst-user">
-					{busy ? t('[Loading] Loading…') : user.userName || ''}
-				</span>
-				<span className="company tst-company">
-					{busy ? t('[Loading] Loading company…') : user.companyName || ''}
-				</span>
-			</div>
 			<div className="settings tst-settings" {...settingsAttrs}>
 				<img className="settings-icon" src={settingsIcon} alt={t('[Alt] Settings')} />
 			</div>
@@ -68,7 +76,8 @@ const mapStateToProps = state => ({
 const mapDispatchToProps = dispatch =>
 	bindActionCreators(
 		{
-			logoutUser: () => rootActions.logoutUser()
+			logoutUser: () => rootActions.logoutUser(),
+			settingsClick: () => layoutActions.setMenu(true)
 		},
 		dispatch
 	);

diff --git a/src/components/menu/footer/__tests__/__snapshots__/Footer.test.js.snap b/src/components/menu/footer/__tests__/__snapshots__/Footer.test.js.snap
@@ -2,20 +2,23 @@
 
 exports[`renders without crashing 1`] = `
 <div>
+  <div
+    onClick={undefined}
+    class="userimage"
+  >
+    <cl
+      busy={false}
+      userName="MOTUS"
+      companyName="Acme Corp."
+      avatarURL="/static/images/mock/avatarPlaceholder.svg"
+    >
+    </cl>
+  </div>
+  <div class="user">
+    <span class="username tst-user">MOTUS</span>
+    <span class="company tst-company">Acme Corp.</span>
+  </div>
   <a title={undefined}>
-    <div class="userimage">
-      <cl
-        busy={false}
-        userName="MOTUS"
-        companyName="Acme Corp."
-        avatarURL="/static/images/mock/avatarPlaceholder.svg"
-      >
-      </cl>
-    </div>
-    <div class="user">
-      <span class="username tst-user">MOTUS</span>
-      <span class="company tst-company">Acme Corp.</span>
-    </div>
     <div class="settings tst-settings">
       <img
         src="settingsIcon.svg"

diff --git a/src/components/menu/footer/footer.less b/src/components/menu/footer/footer.less
@@ -24,6 +24,10 @@
 			position: absolute;
 			top: 0;
 			height: @height-menuitem;
+		}
+
+		.settings,
+		.logout {
 			cursor: pointer;
 		}
 
@@ -91,6 +95,9 @@
 			.logout {
 				.mixin-hide();
 			}
+			.userimage {
+				cursor: pointer;
+			}
 		}
 	}
 }