Add icons to dropdown menu items

tnc-ca-geo · Jan 4, 2025 · 076e3a0 · 076e3a0
1 parent d837583
commit 076e3a0
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 7 deletions.
diff --git a/src/components/Dropdown.jsx b/src/components/Dropdown.jsx
@@ -49,19 +49,19 @@ const itemStyles = {
   fontSize: '$3',
   fontWeight: '$2',
   lineHeight: 1,
-  color: '$hiContrast',
+  color: '$textDark',
   borderRadius: 3,
   display: 'flex',
   alignItems: 'center',
   height: 27,
   padding: '0 5px',
   position: 'relative',
-  paddingLeft: '$2',
+  paddingLeft: 28,
   userSelect: 'none',
 
   '&[data-disabled]': {
     color: mauve.mauve8,
-    // pointerEvents: 'none',
+    pointerEvents: 'none',
   },
 
   '&[data-state="checked"]': {

diff --git a/src/features/cameras/CameraList.jsx b/src/features/cameras/CameraList.jsx
@@ -7,6 +7,7 @@ import {
   DropdownMenuTrigger,
   DropdownMenuContent,
   DropdownMenuItem,
+  DropdownMenuItemIconLeft,
   DropdownMenuArrow,
 } from '../../components/Dropdown.jsx';
 import {
@@ -35,7 +36,7 @@ import {
   ChevronDownIcon,
 } from '@radix-ui/react-icons';
 import { StandAloneInput as Input } from '../../components/Form';
-import { Camera, MapPin } from 'lucide-react';
+import { Camera, MapPin, IdCard, Trash2, Unlink, Link } from 'lucide-react';
 import { indigo } from '@radix-ui/colors';
 
 import {
@@ -241,6 +242,9 @@ const CameraList = ({ cameras, handleSaveDepClick, handleDeleteDepClick }) => {
                           <DropdownMenuItem
                             onSelect={() => handleSaveDepClick({ cameraId: cam._id })}
                           >
+                            <DropdownMenuItemIconLeft>
+                              <MapPin size={15} />
+                            </DropdownMenuItemIconLeft>
                             Add Deployment
                           </DropdownMenuItem>
                         )}
@@ -253,6 +257,9 @@ const CameraList = ({ cameras, handleSaveDepClick, handleDeleteDepClick }) => {
                                 onMouseLeave={() => setEditSnTooltipOpen(false)}
                                 disabled={cam.isWireless}
                               >
+                                <DropdownMenuItemIconLeft>
+                                  <IdCard size={15} />
+                                </DropdownMenuItemIconLeft>
                                 Edit camera serial number
                               </DropdownMenuItem>
                             </TooltipTrigger>
@@ -280,6 +287,9 @@ const CameraList = ({ cameras, handleSaveDepClick, handleDeleteDepClick }) => {
                                   });
                                 }}
                               >
+                                <DropdownMenuItemIconLeft>
+                                  <Unlink size={15} />
+                                </DropdownMenuItemIconLeft>
                                 Release camera
                               </DropdownMenuItem>
                             </TooltipTrigger>
@@ -301,6 +311,9 @@ const CameraList = ({ cameras, handleSaveDepClick, handleDeleteDepClick }) => {
                                 });
                               }}
                             >
+                              <DropdownMenuItemIconLeft>
+                                <Link size={15} />
+                              </DropdownMenuItemIconLeft>
                               Re-register camera
                             </DropdownMenuItem>
                           )}
@@ -322,6 +335,9 @@ const CameraList = ({ cameras, handleSaveDepClick, handleDeleteDepClick }) => {
                                   });
                                 }}
                               >
+                                <DropdownMenuItemIconLeft>
+                                  <Trash2 size={15} />
+                                </DropdownMenuItemIconLeft>
                                 Delete camera
                               </DropdownMenuItem>
                             </TooltipTrigger>

diff --git a/src/features/cameras/DeleteCameraAlert.jsx b/src/features/cameras/DeleteCameraAlert.jsx
@@ -93,7 +93,7 @@ const DeleteCameraAlert = () => {
               <p>
                 Are you sure you&apos;d like to delete Camera <BoldText>{selectedCamera}</BoldText>?{' '}
                 {imageCount === 0 && 'This will remove the Camera and the Deployments '}
-                {imageCount > 0 && (
+                {!imageCountLoading && imageCount > 0 && (
                   <>
                     This will remove the Camera, its Deployments, and{' '}
                     {imageCount > 1 ? 'all' : 'the'}{' '}

diff --git a/src/features/filters/FiltersPanelFooterDropdown.jsx b/src/features/filters/FiltersPanelFooterDropdown.jsx
@@ -7,10 +7,12 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuArrow,
+  DropdownMenuItemIconLeft,
 } from '../../components/Dropdown.jsx';
 import { selectUserCurrentRoles } from '../auth/authSlice.js';
 import { hasRole, DELETE_IMAGES_ROLES, EXPORT_DATA_ROLES } from '../auth/roles.js';
 import { DotsHorizontalIcon } from '@radix-ui/react-icons';
+import { Download, Trash2 } from 'lucide-react';
 import { setDeleteImagesAlertStatus } from '../images/imagesSlice';
 
 const StyledDropdownMenuTrigger = styled(DropdownMenuTrigger, {
@@ -40,11 +42,17 @@ const FiltersPanelFooterDropdown = (props) => {
       <DropdownMenuContent sideOffset={5}>
         {hasRole(userRoles, EXPORT_DATA_ROLES) && (
           <DropdownMenuItem onSelect={() => props.handleModalToggle('export-modal')}>
+            <DropdownMenuItemIconLeft>
+              <Download size={15} />
+            </DropdownMenuItemIconLeft>
             Export currently filtered data
           </DropdownMenuItem>
         )}
         {hasRole(userRoles, DELETE_IMAGES_ROLES) && (
           <DropdownMenuItem onSelect={handleDeleteImageItemClick}>
+            <DropdownMenuItemIconLeft>
+              <Trash2 size={15} />
+            </DropdownMenuItemIconLeft>
             Delete all currently filtered images
           </DropdownMenuItem>
         )}

diff --git a/src/features/loupe/Comment.jsx b/src/features/loupe/Comment.jsx
@@ -7,6 +7,7 @@ import {
   DropdownMenuTrigger,
   DropdownMenuContent,
   DropdownMenuItem,
+  DropdownMenuItemIconLeft,
   DropdownMenuArrow,
 } from '../../components/Dropdown.jsx';
 import Button from '../../components/Button.jsx';
@@ -17,6 +18,7 @@ import { selectUserUsername } from '../auth/authSlice.js';
 import { DateTime } from 'luxon';
 import { editComment } from '../review/reviewSlice.js';
 import { indigo } from '@radix-ui/colors';
+import { Trash2, Pencil } from 'lucide-react';
 
 const StyledFieldRow = styled(FieldRow, {
   display: 'block',
@@ -197,9 +199,17 @@ export const Comment = ({ comment, imageId, onChangeOpen, scrollRef }) => {
               </StyledDropdownMenuTrigger>
               <StyledDropdownMenuContent sideOffset={5}>
                 <DropdownMenuItem onSelect={() => setIsDeleteConfirm(true)}>
+                  <DropdownMenuItemIconLeft>
+                    <Trash2 size={15} />
+                  </DropdownMenuItemIconLeft>
                   Delete
                 </DropdownMenuItem>
-                <DropdownMenuItem onSelect={() => setIsEdit(true)}>Edit</DropdownMenuItem>
+                <DropdownMenuItem onSelect={() => setIsEdit(true)}>
+                  <DropdownMenuItemIconLeft>
+                    <Pencil size={15} />
+                  </DropdownMenuItemIconLeft>
+                  Edit
+                </DropdownMenuItem>
                 <DropdownMenuArrow offset={12} />
               </StyledDropdownMenuContent>
             </DropdownMenu>

diff --git a/src/features/loupe/LoupeDropdown.jsx b/src/features/loupe/LoupeDropdown.jsx
@@ -6,13 +6,15 @@ import {
   DropdownMenuTrigger,
   DropdownMenuContent,
   DropdownMenuItem,
+  DropdownMenuItemIconLeft,
   DropdownMenuArrow,
 } from '../../components/Dropdown.jsx';
 import IconButton from '../../components/IconButton.jsx';
 import { DotsHorizontalIcon } from '@radix-ui/react-icons';
 import DeleteImagesAlert from '../images/DeleteImagesAlert.jsx';
 import { setDeleteImagesAlertStatus } from '../images/imagesSlice';
 import { selectFocusIndex, setSelectedImageIndices } from '../review/reviewSlice.js';
+import { Trash2 } from 'lucide-react';
 
 const StyledDropdownMenuTrigger = styled(DropdownMenuTrigger, {
   position: 'absolute',
@@ -37,7 +39,12 @@ const LoupeDropdown = ({ image }) => {
         </IconButton>
       </StyledDropdownMenuTrigger>
       <DropdownMenuContent sideOffset={5}>
-        <DropdownMenuItem onSelect={handleDeleteImageItemClick}>Delete Image</DropdownMenuItem>
+        <DropdownMenuItem onSelect={handleDeleteImageItemClick}>
+          <DropdownMenuItemIconLeft>
+            <Trash2 size={15} />
+          </DropdownMenuItemIconLeft>
+          Delete Image
+        </DropdownMenuItem>
         <DropdownMenuArrow offset={12} />
       </DropdownMenuContent>