Merge pull request #1593 from msupply-foundation/1586-header-tweak

#1586 Other header tweaks
msupply-foundation · Nov 6, 2023 · 2c86aea · 2c86aea
2 parents b4107d7 + 577e1b7
commit 2c86aea
Show file tree

Hide file tree

Showing 5 changed files with 155 additions and 122 deletions.
diff --git a/semantic/src/site/globals/site.overrides b/semantic/src/site/globals/site.overrides
@@ -1836,6 +1836,10 @@ a:hover {
 #data-view-config-panel {
   padding-top: 20px;
   width: 50%;
+  @media only screen and (max-width: @largestMobileScreen) {
+    width: unset;
+    max-width: 100%;
+  }
 
   h2.ui.header {
     padding: 0;
@@ -2659,6 +2663,13 @@ h6:first-child {
   #user-area {
     height: @mobileHeaderHeight;
     padding-left: 10px;
+    .visible.menu .item {
+      // font-size: 1rem;
+      // padding: 0.8em !important;
+      .dropdown {
+        padding: 0 !important;
+      }
+    }
   }
 
   #user-area-left {
@@ -2682,23 +2693,27 @@ h6:first-child {
 
   #menu-bar {
     font-size: inherit;
+    position: absolute;
+    top: @mobileHeaderHeight;
+    left: 0px;
+    width: 100%;
     background-color: inherit;
     .list {
-      z-index: 2000;
-      position: absolute;
-      top: @mobileHeaderHeight;
-      left: 0px;
       background-color: inherit;
-      width: 95%;
-      padding: 5px 30px 20px 25px;
+      z-index: 2000;
+      padding: 5px 30px 10px 25px;
+    }
+    .list .item {
+      padding-top: 0.4em;
+      padding-bottom: 0.4em;
     }
     .ui .dropdown {
       display: flex;
     }
   }
 
   .menu-divider {
-    margin: 0px 0px 5px 0px !important;
+    margin: 0 !important;
   }
 
   /***********************
@@ -2718,6 +2733,7 @@ h6:first-child {
     height: 3px;
     background: @userAreaText;
     margin: 0 0 3px;
+    transition-duration: 0.1s;
   }
   .hamburger:hover {
     -moz-opacity: 1;
@@ -2757,11 +2773,4 @@ h6:first-child {
   .hamburger.active .hamburger-patty {
     display: none;
   }
-  #menu-bar:not(.open) {
-    display: none;
-
-    //.open {
-    //  display:block;
-    //}
-  }
 }
diff --git a/semantic/src/site/modules/dropdown.overrides b/semantic/src/site/modules/dropdown.overrides
@@ -5,8 +5,8 @@
 @media only screen and (max-width: @largestMobileScreen) {
   // So that the sub menus show properly in mobile for Header menu
   .ui.dropdown .menu .menu {
-    top: 350% !important;
-    left: 0%;
+    // top: 350% !important;
+    left: 50%;
   }
 
   // To give drop-downs a bit more vertical height in mobile

diff --git a/src/components/Admin/AdminPreferences.tsx b/src/components/Admin/AdminPreferences.tsx
@@ -8,10 +8,12 @@ import useConfirmationModal from '../../utils/hooks/useConfirmationModal'
 import getServerUrl from '../../utils/helpers/endpoints/endpointUrlBuilder'
 import { JsonEditor } from './JsonEditor'
 import Loading from '../Loading'
+import { useViewport } from '../../contexts/ViewportState'
 
 export const AdminPreferences: React.FC = () => {
   const { t, tFormat } = useLanguageProvider()
   usePageTitle(t('PAGE_TITLE_PREFS'))
+  const { isMobile } = useViewport()
 
   const showToast = useToast({ position: topLeft })
   const { ConfirmModal: WarningModal, showModal: showWarningModal } = useConfirmationModal({
@@ -66,6 +68,7 @@ export const AdminPreferences: React.FC = () => {
           maxWidth={650}
           restrictDelete={({ level }) => level === 1}
           restrictAdd={({ level }) => level === 0}
+          indent={isMobile ? 2 : 4}
         />
       ) : (
         <Loading />

diff --git a/src/containers/User/UserArea.tsx b/src/containers/User/UserArea.tsx
@@ -1,5 +1,15 @@
 import React, { SyntheticEvent, useEffect, useState } from 'react'
-import { Button, Container, Image, List, Dropdown, Modal, Header, Form } from 'semantic-ui-react'
+import {
+  Button,
+  Container,
+  Image,
+  List,
+  Dropdown,
+  Modal,
+  Header,
+  Form,
+  Transition,
+} from 'semantic-ui-react'
 import { useUserState } from '../../contexts/UserState'
 import { useLanguageProvider } from '../../contexts/Localisation'
 import { attemptLoginOrg } from '../../utils/helpers/attemptLogin'
@@ -244,110 +254,115 @@ const MainMenuBar: React.FC<MainMenuBarProps> = ({
   }
 
   return (
-    <div id="menu-bar" className={hamburgerActive ? 'open' : ''}>
-      <List>
-        {isMobile && (
-          <>
-            <List.Item>
-              {`${selectedLanguage?.flag} ${currentUser?.firstName || ''} ${
-                currentUser?.lastName || ''
-              }`}
+    <Transition visible={!!hamburgerActive || !isMobile} animation="slide down" duration={200}>
+      <div id="menu-bar">
+        <List>
+          {isMobile && (
+            <>
+              <List.Item style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
+                <span>{`${currentUser?.firstName || ''} ${currentUser?.lastName || ''}`}</span>
+                <span style={{ fontSize: '130%' }}>{selectedLanguage?.flag} </span>
+              </List.Item>
+              <List.Item>
+                <div className="ui divider menu-divider"></div>
+              </List.Item>
+            </>
+          )}
+          <List.Item className={dropdownsState.dashboard.active ? 'selected-link' : ''}>
+            <Link to="/">{t('MENU_ITEM_DASHBOARD')}</Link>
+          </List.Item>
+          {applicationListOptions.length > 0 && (
+            <List.Item className={dropdownsState.applicationList.active ? 'selected-link' : ''}>
+              <Dropdown
+                text={t('MENU_ITEM_APPLICATION_LIST')}
+                options={applicationListOptions}
+                onChange={(_, { value }) => handleMenuSelect(value as string, 'List')}
+                value={dropdownsState.applicationList.selection}
+                selectOnBlur={false}
+              />
             </List.Item>
-            <List.Item>
-              <div className="ui divider menu-divider"></div>
+          )}
+          {dataViewOptions.length > 1 && (
+            <List.Item className={dropdownsState.dataViews.active ? 'selected-link' : ''}>
+              <Dropdown
+                text={t('MENU_ITEM_DATA')}
+                options={dataViewOptions}
+                onChange={(_, { value }) => handleMenuSelect(value as string, 'DataView')}
+                value={dropdownsState.dataViews.selection}
+                selectOnBlur={false}
+              />
             </List.Item>
-          </>
-        )}
-        <List.Item className={dropdownsState.dashboard.active ? 'selected-link' : ''}>
-          <Link to="/">{t('MENU_ITEM_DASHBOARD')}</Link>
-        </List.Item>
-        {applicationListOptions.length > 0 && (
-          <List.Item className={dropdownsState.applicationList.active ? 'selected-link' : ''}>
-            <Dropdown
-              text={t('MENU_ITEM_APPLICATION_LIST')}
-              options={applicationListOptions}
-              onChange={(_, { value }) => handleMenuSelect(value as string, 'List')}
-              value={dropdownsState.applicationList.selection}
-              selectOnBlur={false}
-            />
-          </List.Item>
-        )}
-        {dataViewOptions.length > 1 && (
-          <List.Item className={dropdownsState.dataViews.active ? 'selected-link' : ''}>
-            <Dropdown
-              text={t('MENU_ITEM_DATA')}
-              options={dataViewOptions}
-              onChange={(_, { value }) => handleMenuSelect(value as string, 'DataView')}
-              value={dropdownsState.dataViews.selection}
-              selectOnBlur={false}
-            />
-          </List.Item>
-        )}
-        {managementOptions.length > 0 && (
-          <List.Item className={dropdownsState.manage.active ? 'selected-link' : ''}>
-            <Dropdown
-              text={t('MENU_ITEM_MANAGE')}
-              options={managementOptions}
-              onChange={(_, { value }) => handleMenuSelect(value as string, 'Manage')}
-              value={dropdownsState.manage.selection}
-              selectOnBlur={false}
-            />
-          </List.Item>
-        )}
-        {currentUser?.isAdmin && (
-          <List.Item className={dropdownsState.config.active ? 'selected-link' : ''}>
-            <Dropdown
-              text={t('MENU_ITEM_CONFIG')}
-              options={configOptions}
-              onChange={(_, { value }) => handleMenuSelect(value as string, 'Config')}
-              value={dropdownsState.config.selection}
-              selectOnBlur={false}
-            />
-          </List.Item>
-        )}
-        {extReferenceDocs.length > 0 && (
-          <List.Item className={dropdownsState.extRefDocs.active ? 'selected-link' : ''}>
-            <Dropdown text={t('MENU_ITEM_HELP')}>
-              <Dropdown.Menu>
-                {extReferenceDocs.map((doc) => (
-                  <Dropdown.Item
-                    key={doc.uniqueId}
-                    onClick={() => window.open(getServerUrl('file', { fileId: doc.uniqueId }))}
-                    text={doc.description}
-                  />
-                ))}
-              </Dropdown.Menu>
-            </Dropdown>
-          </List.Item>
-        )}
-        {intReferenceDocs.length > 0 && (
-          <List.Item className={dropdownsState.intRefDocs.active ? 'selected-link' : ''}>
-            <Dropdown text={t('MENU_ITEM_REF_DOCS')}>
-              <Dropdown.Menu>
-                {intReferenceDocs.map((doc) => (
-                  <Dropdown.Item
-                    key={doc.uniqueId}
-                    onClick={() => window.open(getServerUrl('file', { fileId: doc.uniqueId }))}
-                    text={doc.description}
-                  />
-                ))}
-              </Dropdown.Menu>
-            </Dropdown>
-          </List.Item>
-        )}
-        {isMobile && (
-          <List.Item onClick={() => logout()}>
-            <div className="ui divider menu-divider"></div>
-            <UserMenu
-              user={currentUser as User}
-              templates={templates.filter(({ templateCategory: { uiLocation } }) =>
-                uiLocation.includes(UiLocation.User)
-              )}
-            />
-          </List.Item>
-        )}
-      </List>
-    </div>
+          )}
+          {managementOptions.length > 0 && !isMobile && (
+            <List.Item className={dropdownsState.manage.active ? 'selected-link' : ''}>
+              <Dropdown
+                text={t('MENU_ITEM_MANAGE')}
+                options={managementOptions}
+                onChange={(_, { value }) => handleMenuSelect(value as string, 'Manage')}
+                value={dropdownsState.manage.selection}
+                selectOnBlur={false}
+              />
+            </List.Item>
+          )}
+          {currentUser?.isAdmin && !isMobile && (
+            <List.Item className={dropdownsState.config.active ? 'selected-link' : ''}>
+              <Dropdown
+                text={t('MENU_ITEM_CONFIG')}
+                options={configOptions}
+                onChange={(_, { value }) => handleMenuSelect(value as string, 'Config')}
+                value={dropdownsState.config.selection}
+                selectOnBlur={false}
+              />
+            </List.Item>
+          )}
+          {extReferenceDocs.length > 0 && (
+            <List.Item className={dropdownsState.extRefDocs.active ? 'selected-link' : ''}>
+              <Dropdown text={t('MENU_ITEM_HELP')}>
+                <Dropdown.Menu>
+                  {extReferenceDocs.map((doc) => (
+                    <Dropdown.Item
+                      key={doc.uniqueId}
+                      onClick={() => window.open(getServerUrl('file', { fileId: doc.uniqueId }))}
+                      text={doc.description}
+                    />
+                  ))}
+                </Dropdown.Menu>
+              </Dropdown>
+            </List.Item>
+          )}
+          {intReferenceDocs.length > 0 && (
+            <List.Item className={dropdownsState.intRefDocs.active ? 'selected-link' : ''}>
+              <Dropdown text={t('MENU_ITEM_REF_DOCS')}>
+                <Dropdown.Menu>
+                  {intReferenceDocs.map((doc) => (
+                    <Dropdown.Item
+                      key={doc.uniqueId}
+                      onClick={() => window.open(getServerUrl('file', { fileId: doc.uniqueId }))}
+                      text={doc.description}
+                    />
+                  ))}
+                </Dropdown.Menu>
+              </Dropdown>
+            </List.Item>
+          )}
+          {isMobile && (
+            <>
+              <List.Item>
+                <div className="ui divider menu-divider"></div>
+              </List.Item>
+              <List.Item>
+                <UserMenu
+                  user={currentUser as User}
+                  templates={templates.filter(({ templateCategory: { uiLocation } }) =>
+                    uiLocation.includes(UiLocation.User)
+                  )}
+                />
+              </List.Item>
+            </>
+          )}
+        </List>
+      </div>
+    </Transition>
   )
 }
 
@@ -404,7 +419,13 @@ const OrgSelector: React.FC<{ user: User; orgs: OrganisationSimple[]; onLogin: F
   if (!orgs.some(({ isSystemOrg }) => isSystemOrg))
     dropdownOptions.push({
       key: LOGIN_AS_NO_ORG,
-      text: `> ${t('LABEL_NO_ORG_SELECT')}`,
+      text: (
+        <span>
+          <em>{t('LABEL_NO_ORG')}</em>
+          <br />
+          <em>{t('LABEL_USER_ONLY')}</em>
+        </span>
+      ) as any,
       value: LOGIN_AS_NO_ORG,
     })
   return (
@@ -653,7 +674,7 @@ function constructNestedMenuOptions<T>(
       text: submenu,
       content: (
         <Dropdown item text={submenu}>
-          <Dropdown.Menu style={{ transform: 'translateY(-25px)' }}>
+          <Dropdown.Menu style={{ transform: 'translateY(10px)' }}>
             {items.map((item) => {
               const { key, text, value } = item
               return (

diff --git a/src/utils/defaultLanguageStrings.ts b/src/utils/defaultLanguageStrings.ts
@@ -236,7 +236,7 @@ export default {
   LABEL_FILE_UPLOAD_PLACEHOLDER: 'Use the above bar to browse your file system',
   LABEL_FILE_DOWNLOAD_ERROR: 'Error trying to download',
   LABEL_NO_ORG: 'No organisation',
-  LABEL_NO_ORG_SELECT: 'No organisation (act as user only)',
+  LABEL_USER_ONLY: '(Act as user only)',
   LABEL_NO_ORG_OPTION: 'Log in without organisation',
   LABEL_PROCESSING: 'Processing...',
   LABEL_PREVIOUS_REVIEW: 'Previous review',