feat: Style the dashboard topbar actions and user dropdown.

2026-02-18 05:40:31 +00:00 · 2020-06-02 19:47:38 +02:00
parent b8eb84d896
commit 79e1752331
12 changed files with 137 additions and 65 deletions
--- a/client/src/components/Authentication.js
+++ b/client/src/components/Authentication.js
@@ -6,7 +6,6 @@ import { FormattedMessage as T } from 'react-intl';
 import withAuthentication from 'containers/Authentication/withAuthentication';
 import { compose } from 'utils';

-
 function AuthenticationWrapper({ isAuthorized = false, ...rest }) {
  const to = { pathname: '/homepage' };

@@ -43,4 +42,6 @@ function AuthenticationWrapper({ isAuthorized = false, ...rest }) {
  );
 }

-export default compose(withAuthentication)(AuthenticationWrapper);
+export default compose(
+  withAuthentication(({ isAuthorized }) => ({ isAuthorized })),
+)(AuthenticationWrapper);
--- a/client/src/components/Dashboard/DashboardTopbar.js
+++ b/client/src/components/Dashboard/DashboardTopbar.js
@@ -4,6 +4,7 @@ import { useHistory } from 'react-router';
 import {
  Navbar,
  NavbarGroup,
+  NavbarDivider,
  Button,
  Classes,
 } from '@blueprintjs/core';
@@ -93,21 +94,24 @@ function DashboardTopbar({
            <Button
              onClick={() => openGlobalSearch(true)}
              className={Classes.MINIMAL}
-              icon='home'
-              text={<T id={'search'}/>}
+              icon={<Icon icon={'search-24'} iconSize={20} />}
+              text={<T id={'quick_find'}/>}
            />
+            <Button
+              className={Classes.MINIMAL}
+              icon={<Icon icon={'plus-24'} iconSize={20} />}
+              text={<T id={'quick_new'}/>}
+            />
+            <Button
+              className={Classes.MINIMAL}
+              icon={<Icon icon={'notification-24'} iconSize={20} />}
+            />
+            <Button
+              className={Classes.MINIMAL}
+              icon={<Icon icon={'help-24'} iconSize={20} />}
+              text={<T id={'help'} />} />

-            <Button
-              className={Classes.MINIMAL}
-              icon='document'
-              text={<T id={'filters'}/>}
-            />
-            <Button
-              className={Classes.MINIMAL}
-              icon='document'
-              text={<T id={'add_order'}/>}
-            />
-            <Button className={Classes.MINIMAL} icon='document' text='More' />
+            <NavbarDivider />
          </NavbarGroup>
        </Navbar>

--- a/client/src/components/Dashboard/TopbarUser.js
+++ b/client/src/components/Dashboard/TopbarUser.js
@@ -1,5 +1,4 @@
 import React, { useMemo, useCallback } from 'react';
-import { connect } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 import {
  Menu,
@@ -9,36 +8,42 @@ import {
  Popover,
 } from '@blueprintjs/core';
 import { FormattedMessage as T } from 'react-intl';
-import t from 'store/types';

-function DashboardTopbarUser({ logout }) {
+import withAuthentication from 'containers/Authentication/withAuthentication';
+import withAuthenticationActions from 'containers/Authentication/withAuthenticationActions';
+
+import { compose, firstLettersArgs } from 'utils';
+
+function DashboardTopbarUser({ requestLogout, user }) {
  const history = useHistory();

  const onClickLogout = useCallback(() => {
-    logout();
-  }, [logout, history]);
+    requestLogout();
+  }, []);

  const userAvatarDropMenu = useMemo(
    () => (
-      <Menu>
-        <MenuItem icon="graph" text={<T id={'menu'} />} />
-        <MenuItem icon="map" text={<T id={'graph'} />} />
+      <Menu className={'menu--logged-user-dropdown'}>
        <MenuItem
-          icon="th"
-          text={<T id={'table'} />}
-          shouldDismissPopover={false}
-        />
-        <MenuItem
-          icon="zoom-to-fit"
-          text={<T id={'nucleus'} />}
-          disabled={true}
+          multiline={true}
+          className={'menu-item--profile'}
+          text={
+            <div>
+              <div class="person">
+                {user.first_name} {user.last_name}
+              </div>
+              <div class="org">
+                <T id="organization_id" />: {user.tenant_id}
+              </div>
+            </div>
+          }
        />
        <MenuDivider />
        <MenuItem
-          icon="cog"
-          text={<T id={'logout'} />}
-          onClick={onClickLogout}
+          text={<T id={'preferences'} />}
+          onClick={() => history.push('/preferences')}
        />
+        <MenuItem text={<T id={'logout'} />} onClick={onClickLogout} />
      </Menu>
    ),
    [onClickLogout],
@@ -47,14 +52,15 @@ function DashboardTopbarUser({ logout }) {
  return (
    <Popover content={userAvatarDropMenu}>
      <Button>
-        <div className="user-avatar"></div>
+        <div className="user-text">
+          {firstLettersArgs(user.first_name, user.last_name)}
+        </div>
      </Button>
    </Popover>
  );
 }

-const mapDispatchToProps = (dispatch) => ({
-  logout: () => dispatch({ type: t.LOGOUT }),
-});
-
-export default connect(null, mapDispatchToProps)(DashboardTopbarUser);
+export default compose(
+  withAuthentication(({ user }) => ({ user })),
+  withAuthenticationActions,
+)(DashboardTopbarUser);
--- a/client/src/components/PrivateRoute.js
+++ b/client/src/components/PrivateRoute.js
@@ -5,15 +5,10 @@ import { Redirect } from 'react-router-dom';
 import withAuthentication from 'containers/Authentication/withAuthentication';
 import { compose } from 'utils';

-
-function PrivateRoute({
-  component: Component,
-  isAuthorized = false,
-  ...rest
-}) {
+function PrivateRoute({ component: Component, isAuthorized = false, ...rest }) {
  return (
    <BodyClassName className={''}>
-      {(isAuthorized) ? (
+      {isAuthorized ? (
        <Component />
      ) : (
        <Redirect
@@ -26,4 +21,6 @@ function PrivateRoute({
  );
 }

-export default compose(withAuthentication)(PrivateRoute);
+export default compose(
+  withAuthentication(({ isAuthorized }) => ({ isAuthorized })),
+)(PrivateRoute);
--- a/client/src/containers/Authentication/withAuthentication.js
+++ b/client/src/containers/Authentication/withAuthentication.js
@@ -1,11 +1,13 @@
 import { isAuthenticated } from 'store/authentication/authentication.reducer'
 import { connect } from 'react-redux';

-
-const mapStateToProps = (state) => {
-  return {
-    isAuthorized: isAuthenticated(state),
+export default (mapState) => {
+  const mapStateToProps = (state, props) => {
+    const mapped = {
+      isAuthorized: isAuthenticated(state),
+      user: state.authentication.user,
+    };
+    return mapState ? mapState(mapped, state, props) : mapped;
  };
-};
-
-export default connect(mapStateToProps);
+  return connect(mapStateToProps);
+};
--- a/client/src/containers/Authentication/withAuthenticationActions.js
+++ b/client/src/containers/Authentication/withAuthenticationActions.js
@@ -7,10 +7,11 @@ import {
  inviteMetaByToken, 
 } from 'store/authentication/authentication.actions';
 import { connect } from 'react-redux';
-
+import t from 'store/types';

 const mapDispatchToProps = (dispatch) => ({
  requestLogin: (form) => dispatch(login({ form })),
+  requestLogout: () => dispatch({ type: t.LOGOUT }),
  requestRegister: (form) => dispatch(register({ form })),
  requestSendResetPassword: (email) => dispatch(sendResetPassword({ email })),
  requestResetPassword: (form, token) => dispatch(resetPassword({ form, token })),
--- a/client/src/lang/en/index.js
+++ b/client/src/lang/en/index.js
@@ -12,7 +12,7 @@ export default {
    'The email and password you entered did not match our records.',
  field_name_must_be_number: 'field_name_must_be_number',
  name: 'Name',
-  search: 'Search',
+  quick_find: 'Quick find',
  reference: 'Reference',
  date: 'Date',
  description: 'Description',
@@ -401,4 +401,7 @@ export default {
  hide_filter: 'Hide filter',
  show_filter: 'Show filter',
  new_role: 'New Role',
+  quick_new: 'Quick new',
+  help: 'Help',
+  organization_id: 'Orgnization ID',
 };
--- a/client/src/static/json/icons.js
+++ b/client/src/static/json/icons.js
@@ -187,6 +187,29 @@ export default {
    ],
    viewBox: '0 0 384 512',
  },
+  'search-24': {
+    path: ['M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'],
+    viewBox: '0 0 24 24',
+  },
+  'plus-24': {
+    path: [
+      'M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z'
+    ],
+    viewBox: '0 0 24 24',
+  },
+  'notification-24': {
+    path: [
+      'M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6v-5c0-3.07-1.63-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.64 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2zm-2 1H8v-6c0-2.48 1.51-4.5 4-4.5s4 2.02 4 4.5v6z',
+    ],
+    viewBox: '0 0 24 24'
+  },
+  'help-24': {
+    path: [
+      'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-4h2v2h-2zm1.61-9.96c-2.06-.3-3.88.97-4.43 2.79-.18.58.26 1.17.87 1.17h.2c.41 0 .74-.29.88-.67.32-.89 1.27-1.5 2.3-1.28.95.2 1.65 1.13 1.57 2.1-.1 1.34-1.62 1.63-2.45 2.88 0 .01-.01.01-.01.02-.01.02-.02.03-.03.05-.09.15-.18.32-.25.5-.01.03-.03.05-.04.08-.01.02-.01.04-.02.07-.12.34-.2.75-.2 1.25h2c0-.42.11-.77.28-1.07.02-.03.03-.06.05-.09.08-.14.18-.27.28-.39.01-.01.02-.03.03-.04.1-.12.21-.23.33-.34.96-.91 2.26-1.65 1.99-3.56-.24-1.74-1.61-3.21-3.35-3.47z',
+    ],
+    viewBox: '0 0 24 24',
+  },
+

  // 16
  'file-import-16': {
--- a/client/src/style/App.scss
+++ b/client/src/style/App.scss
@@ -56,6 +56,11 @@ $pt-font-family: Noto Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
@import 'views/filter-dropdown';
@import 'views/sidebar';

+
+.App{
+  min-width: 960px;
+}
+
 .#{$ns}-tooltip {
  box-shadow: none;
 }
--- a/client/src/style/pages/dashboard.scss
+++ b/client/src/style/pages/dashboard.scss
@@ -40,7 +40,7 @@
    &-navbar{
      display: flex;
      align-items: center;
-      margin-right: 18px;
+      margin-right: 4px;

      .#{$ns}-button{
        color: #1552C8;
@@ -53,6 +53,7 @@
        }
        .#{$ns}-icon{
          color: #1552C8;
+          margin-right: 5px;
        }
      }
    }
@@ -60,20 +61,26 @@
    &-user{
      display: flex;
      align-items: center;
+      margin-right: 14px;

-      .#{$ns}-button{
+      .bp3-button:not([class*="bp3-intent-"]):not(.bp3-minimal){
+        padding: 0;
        background-size: contain;
+        background-color: #F6DCFA;
        border-radius: 50%;
-        height: 32px;
-        width: 32px;
-        
+        height: 30px;
+        width: 30px;
+
+        .user-text {
+          font-size: 12px;
+          color: #804f87;
+        }
        &,
        &:hover,
        &:focus{
-          background-color: transparent;
+          background-color: #F6DCFA;
          border: 0;
          box-shadow: none;
-          background-image: url(http://1.gravatar.com/avatar/767fc9c115a1b989744c755db47feb60?size=400);
        }
      }
    }
@@ -318,4 +325,16 @@
    0 18px 46px 6px rgba(16, 22, 26, 0.2);
  background-color: #fff;
  width: 500px;
+}
+
+
+.menu--logged-user-dropdown{
+
+  .menu-item--profile{
+
+    .org{
+      font-size: 12px;
+      color: #777;
+    }    
+  }
 }
--- a/client/src/style/views/Sidebar.scss
+++ b/client/src/style/views/Sidebar.scss
@@ -40,7 +40,7 @@ $sidebar-popover-submenu-bg: rgb(1, 20, 62);
      margin-top: 4px;

      svg{
-        opacity: 0.45;
+        opacity: 0.5;
      }
    }
  }
--- a/client/src/utils.js
+++ b/client/src/utils.js
@@ -171,3 +171,14 @@ export const saveFilesInAsync = (files, actionCb, extraTasks) => {
  });
  return PProgress.all(opers);
 }
+
+export const firstLettersArgs = (...args) => {
+  let letters = [];
+
+  args.forEach((word) => {
+    if (typeof word === 'string') {
+      letters.push(word.charAt(0));
+    }
+  });
+  return letters.join('').toUpperCase();
+}