OpenConceptLab/ocl_issues#1403 | Minor changes in actions menu

OpenConceptLab · Dec 10, 2022 · 3d00a65 · 3d00a65
1 parent fcdc631
commit 3d00a65
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 46 deletions.
diff --git a/src/common/constants.js b/src/common/constants.js
@@ -11,6 +11,7 @@ export const COLOR_ROW_SELECTED = 'rgba(119, 119, 119, 0.16)';
 export const GREEN = '#5cb85c';
 export const RED = '#c33';
 export const ERROR_RED = '#f44336';
+export const ACTION_RED = '#d32f2f';
 export const ORANGE = 'rgb(253, 164, 41)';
 export const EMPTY_VALUE = '-';
 export const DIFF_BG_RED = '#ffeef0';

diff --git a/src/components/common/CollectionButton.jsx b/src/components/common/CollectionButton.jsx
@@ -9,7 +9,7 @@ import {
   ArrowDropDown as DownIcon,
   GetApp as DownloadIcon,
 } from '@mui/icons-material';
-import { GREEN, WHITE } from '../../common/constants';
+import { GREEN, WHITE, ACTION_RED } from '../../common/constants';
 import { toParentURI, currentUserHasAccess, copyURL, toFullAPIURL } from '../../common/utils';
 import DownloadButton from './DownloadButton';
 
@@ -80,20 +80,10 @@ const CollectionButton = ({label, onClick, href, childURI, onEditClick, onDelete
                 </ListItemText>
               </MenuItem>
             }
-            {
-              hasAccess && onDeleteClick &&
-              <MenuItem onClick={event => onActionClick(event, onDeleteClick)}>
-                <ListItemIcon style={{minWidth: '28px'}}>
-                  <DeleteIcon fontSize='inherit' />
-                </ListItemIcon>
-                <ListItemText>
-                  Delete Collection
-                </ListItemText>
-              </MenuItem>
-            }
             <DownloadButton
               resource={collection}
               filename={downloadFileName}
+              tooltipPlacement="right"
               buttonFunc={params => (
                 <MenuItem {...params}>
                   <ListItemIcon style={{minWidth: '28px'}}>
@@ -105,7 +95,17 @@ const CollectionButton = ({label, onClick, href, childURI, onEditClick, onDelete
                 </MenuItem>
               )}
             />
-
+            {
+              hasAccess && onDeleteClick &&
+                <MenuItem onClick={event => onActionClick(event, onDeleteClick)}>
+                  <ListItemIcon style={{minWidth: '28px', color: ACTION_RED}}>
+                    <DeleteIcon fontSize='inherit' />
+                  </ListItemIcon>
+                  <ListItemText style={{color: ACTION_RED}}>
+                    Delete Collection
+                  </ListItemText>
+                </MenuItem>
+            }
           </MenuList>
         </Menu>
       }

diff --git a/src/components/common/ManageSourceChildButton.jsx b/src/components/common/ManageSourceChildButton.jsx
@@ -12,6 +12,7 @@ import {
 } from '@mui/icons-material';
 import { startCase } from 'lodash';
 import { currentUserHasAccess, copyURL, toFullAPIURL, isAdminUser } from '../../common/utils';
+import { ACTION_RED } from '../../common/constants';
 import DownloadButton from './DownloadButton';
 import { OperationsContext } from '../app/LayoutContext';
 
@@ -82,25 +83,6 @@ const ManageSourceChildButton = ({
               </ListItemText>
             </MenuItem>
           }
-          {
-            hasAccess && isVersionedObject &&
-            <MenuItem onClick={event => onClick(event, instance.retired ? onUnretire : onRetire)}>
-              <ListItemIcon style={{minWidth: '28px'}}>
-                {
-                  instance.retired ?
-                  <RestoreIcon fontSize='inherit' /> :
-                  <DeleteIcon fontSize='inherit' />
-                }
-              </ListItemIcon>
-              <ListItemText>
-                {
-                  instance.retired ?
-                  `Un-Retire ${resourceLabel}` :
-                  `Retire ${resourceLabel}`
-                }
-              </ListItemText>
-            </MenuItem>
-          }
           {
             conceptCompareURL &&
             <MenuItem onClick={onCompareConceptsClick}>
@@ -139,6 +121,25 @@ const ManageSourceChildButton = ({
                 </ListItemText>
               </MenuItem>
           }
+          {
+            hasAccess && isVersionedObject &&
+              <MenuItem onClick={event => onClick(event, instance.retired ? onUnretire : onRetire)}>
+                <ListItemIcon style={{minWidth: '28px', color: ACTION_RED}}>
+                  {
+                    instance.retired ?
+                      <RestoreIcon fontSize='inherit' /> :
+                      <DeleteIcon fontSize='inherit' />
+                  }
+                </ListItemIcon>
+                <ListItemText style={{color: ACTION_RED}}>
+                  {
+                    instance.retired ?
+                      `Un-Retire ${resourceLabel}` :
+                      `Retire ${resourceLabel}`
+                  }
+                </ListItemText>
+              </MenuItem>
+          }
         </MenuList>
       </Menu>
 

diff --git a/src/components/common/SourceButton.jsx b/src/components/common/SourceButton.jsx
@@ -9,7 +9,7 @@ import {
   ArrowDropDown as DownIcon,
   GetApp as DownloadIcon,
 } from '@mui/icons-material';
-import { GREEN, WHITE } from '../../common/constants';
+import { GREEN, WHITE, ACTION_RED } from '../../common/constants';
 import { toParentURI, currentUserHasAccess, copyURL, toFullAPIURL } from '../../common/utils';
 import DownloadButton from './DownloadButton';
 
@@ -80,20 +80,10 @@ const SourceButton = ({label, onClick, href, childURI, onEditClick, onDeleteClic
                 </ListItemText>
               </MenuItem>
             }
-            {
-              hasAccess && onDeleteClick &&
-              <MenuItem onClick={event => onActionClick(event, onDeleteClick)}>
-                <ListItemIcon style={{minWidth: '28px'}}>
-                  <DeleteIcon fontSize='inherit' />
-                </ListItemIcon>
-                <ListItemText>
-                  Delete Source
-                </ListItemText>
-              </MenuItem>
-            }
             <DownloadButton
               resource={source}
               filename={downloadFileName}
+              tooltipPlacement="right"
               buttonFunc={params => (
                 <MenuItem {...params}>
                   <ListItemIcon style={{minWidth: '28px'}}>
@@ -105,7 +95,17 @@ const SourceButton = ({label, onClick, href, childURI, onEditClick, onDeleteClic
                 </MenuItem>
               )}
             />
-
+            {
+              hasAccess && onDeleteClick &&
+                <MenuItem onClick={event => onActionClick(event, onDeleteClick)}>
+                  <ListItemIcon style={{minWidth: '28px', color: ACTION_RED}}>
+                    <DeleteIcon fontSize='inherit' />
+                  </ListItemIcon>
+                  <ListItemText style={{color: ACTION_RED}}>
+                    Delete Source
+                  </ListItemText>
+                </MenuItem>
+            }
           </MenuList>
         </Menu>
       }

diff --git a/src/components/mappings/MappingOptions.jsx b/src/components/mappings/MappingOptions.jsx
@@ -3,6 +3,7 @@ import { Menu, MenuItem, MenuList, IconButton } from '@mui/material';
 import { MoreVert as MenuIcon } from '@mui/icons-material';
 import { map } from 'lodash';
 import { currentUserHasAccess } from '../../common/utils';
+import { ACTION_RED } from '../../common/constants';
 
 const hasAccess = currentUserHasAccess()
 
@@ -99,7 +100,7 @@ const MappingOptions = ({ mapping, concept, onAddNewClick, onRemove, onReactivat
                 __props.component = 'a'
               }
               if(option.type === 'delete')
-                __props['style'] = {color: '#d32f2f'}
+                __props['style'] = {color: ACTION_RED}
               return (
                 <MenuItem key={index} onClick={event => option.onClick ? option.onClick(event, option, mapping) : onOptionClick(event, option)} {...__props}>
                   {option.label}