Merge pull request #26 from syncpoint/tooltip

Tooltips

.gitignore

@@ -6,3 +6,4 @@ binaries/
 coverage/
 dist/
 jsdoc/
+.vscode

package.json

@@ -1,7 +1,7 @@
 {
   "name": "odin",
   "productName": "ODINv2",
-  "version": "2.7.0",
+  "version": "2.7.1",
   "description": "Open Source Command and Control Information System (C2IS)",
   "main": "dist/main.js",
   "scripts": {
@@ -88,6 +88,7 @@
     "react-dom": "^18.2.0",
     "react-easy-sort": "^1.5.1",
     "react-fast-compare": "^3.2.0",
+    "react-tooltip": "^5.21.3",
     "reproject": "^1.2.7",
     "sanitize-filename": "^1.6.3",
     "subleveldown": "^6.0.1",

src/renderer/components/DropdownMenu.js

@@ -1,5 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { Tooltip } from 'react-tooltip'
 import * as mdi from '@mdi/js'
 import Icon from '@mdi/react'
 import uuid from 'uuid-random'
@@ -8,14 +9,19 @@ import './DropdownMenu.css'
 export const DropdownMenu = props => {
 
   const [id] = React.useState(uuid())
+  const [collapsed, setCollapsed] = React.useState(true)
 
   const handleClick = () => {
     document.getElementById(id).classList.toggle('show')
+    setCollapsed(current => !current)
   }
 
   const handleBlur = () => {
     // Let brief background flashing show on option selection (if any).
-    const hide = () => document.getElementById(id).classList.remove('show')
+    const hide = () => {
+      document.getElementById(id).classList.remove('show')
+      setCollapsed(true)
+    }
     setTimeout(hide, 200)
   }
 
@@ -27,7 +33,8 @@ export const DropdownMenu = props => {
   }
 
   return (
-    <div className="dropdown">
+    <>
+    <div className="dropdown" id={`dd-${id}`}>
       <button
         onClick={handleClick}
         onBlur={handleBlur}
@@ -40,10 +47,18 @@ export const DropdownMenu = props => {
         { props.options.map(option) }
       </div>
     </div>
+    { collapsed && <Tooltip
+      anchorSelect={`#dd-${id}`}
+      content={props.toolTip}
+      style={{ zIndex: 200 }}
+      delayShow={750}
+    /> }
+    </>
   )
 }
 
 DropdownMenu.propTypes = {
   path: PropTypes.string.isRequired,
-  options: PropTypes.array.isRequired
+  options: PropTypes.array.isRequired,
+  toolTip: PropTypes.string
 }

src/renderer/components/Toolbar.js

@@ -54,26 +54,28 @@ export const Toolbar = () => {
   return (
     <header className='toolbar'>
       <div className='toolbar__items-container'>
-        <DropdownMenu path='mdiPlusBoxOutline' options={addCommands}/>
+        <DropdownMenu path='mdiPlusBoxOutline' options={addCommands} toolTip='Create new ...'/>
         {
           commands.map(([key, command]) => {
             return command === 'separator'
               ? <span key={key} className='toolbar__divider'></span>
               : <CommandButton key={key} command={command}/>
           })
         }
-        <DropdownMenu path='mdiAndroidStudio' options={measureCommands} />
+        <DropdownMenu path='mdiAndroidStudio' options={measureCommands} toolTip='Measure ...'/>
       </div>
       <div className='toolbar__items-container toolbar__items--right'>
         <SimpleButton
           onClick={toggleProperties('properties')}
           path='mdiFileDocumentOutline'
           checked={properties === 'properties'}
+          toolTip='Show properties of selected items'
         />
         <SimpleButton
           onClick={toggleProperties('styles')}
           path='mdiFormatPaint'
           checked={properties === 'styles'}
+          toolTip='Show styling options for selected layer'
         />
       </div>
     </header>

src/renderer/components/ToolbarButtons.js

@@ -1,28 +1,35 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { Tooltip } from 'react-tooltip'
 import Icon from '@mdi/react'
 import * as mdi from '@mdi/js'
 import './Toolbar.css'
 
+
 export const SimpleButton = props => {
   const className = props.checked
     ? 'toolbar__button toolbar__button--checked'
     : 'toolbar__button'
 
   return (
+    <>
     <button
+    id={`sb-${props.path}`}
       className={className}
       onClick={() => props.onClick()}
     >
       <Icon path={mdi[props.path]} size='20px' />
     </button>
+    <Tooltip anchorSelect={`#sb-${props.path}`} content={props.toolTip} style={{ zIndex: 200 }} delayShow={750}/>
+    </>
   )
 }
 
 SimpleButton.propTypes = {
   onClick: PropTypes.func.isRequired,
   path: PropTypes.string.isRequired,
-  checked: PropTypes.bool.isRequired
+  checked: PropTypes.bool.isRequired,
+  toolTip: PropTypes.string
 }
 
 
@@ -38,13 +45,17 @@ export const CommandButton = props => {
   }, [command])
 
   return (
+    <>
     <button
+      id={`cb-${command.path}`}
       className='toolbar__button'
       onClick={() => command.execute()}
       disabled={!enabled}
     >
       <Icon path={mdi[command.path]} size='20px' version={version}/>
     </button>
+    <Tooltip anchorSelect={`#cb-${command.path}`} content={command.toolTip} style={{ zIndex: 200 }} delayShow={750}/>
+    </>
   )
 }
 

src/renderer/components/properties/Coordinates.js

@@ -5,6 +5,7 @@ import * as mdi from '@mdi/js'
 import ColSpan2 from './ColSpan2'
 import FlexRow from './FlexRow'
 import textProperty from './textProperty'
+import { Tooltip } from 'react-tooltip'
 import { useServices, useMemento } from '../hooks'
 
 const Button = props => {
@@ -36,6 +37,7 @@ const TextProperty = props => {
       feature.geometry.coordinates = coordinates
     } catch (err) {
       /* TODO: handle parse error */
+      console.error(err)
     }
 
     return feature
@@ -50,9 +52,10 @@ const Coordinates = props => {
     <ColSpan2>
       <FlexRow>
         <TextProperty {...props} format={format}/>
-        <div style={{ marginLeft: 'auto' }}>
-          <Button path='mdiCrosshairsGps'/>
+        <div style={{ marginLeft: 'auto' }} className='tt-apply-coordinates'>
+          <Button path='mdiCrosshairsGps' />
         </div>
+        <Tooltip anchorSelect='.tt-apply-coordinates' content='Apply coordinates' delayShow={750}/>
       </FlexRow>
     </ColSpan2>
   )

src/renderer/components/properties/TilePresetProperties.js

@@ -2,9 +2,10 @@
 import React from 'react'
 import SortableList, { SortableItem } from 'react-easy-sort'
 import Icon from '@mdi/react'
-import { mdiDrag, mdiEye, mdiEyeOff } from '@mdi/js'
+import { mdiDrag, mdiEye, mdiEyeOff, mdiOpacity } from '@mdi/js'
 import { useServices, useList } from '../hooks'
 import Range from './Range'
+import { Tooltip } from 'react-tooltip'
 import './TilePresetProperties.scss'
 
 
@@ -46,19 +47,28 @@ const Layer = props => (
     {/* react-easy-sort kills list style => add necessary margins.  */}
     <div
       className='bf12-card'
-      onClick={props.onSelect}
       aria-selected={props.selected}
     >
       <div className='bf12-column'>
         <div className='bf12-row'>
-          <Icon path={mdiDrag} size='24px'/>
+          <Icon path={mdiDrag} size='24px' className='tt-tile-preset-handle'/>
           <span className='bf12-card__description'>{props.name}</span>
           <Icon
-            path={props.visible ? mdiEye : mdiEyeOff}
+            path={mdiOpacity}
             size='24px'
             style={{ marginLeft: 'auto' }}
+            className=' tt-tile-preset-opacity'
+            onClick={props.onSelect}
+          />
+          <Icon
+            path={props.visible ? mdiEye : mdiEyeOff}
+            size='24px'
             onClick={props.onToggleVisible}
+            className='tt-tile-preset-visibility'
           />
+          <Tooltip anchorSelect='.tt-tile-preset-opacity' content='Change the opacity' delayShow={750}/>
+          <Tooltip anchorSelect='.tt-tile-preset-handle' content='Drag to change the order of visibility' delayShow={750}/>
+          <Tooltip anchorSelect='.tt-tile-preset-visibility' content='Hide/Show this map' delayShow={750}/>
         </div>
         <Opacity
           opacity={props.opacity}

src/renderer/components/sidebar/Card.js

@@ -6,6 +6,7 @@ import { TAG } from './tags'
 import { Title } from './Title'
 import { useServices, useEmitter } from '../hooks'
 import * as ID from '../../ids'
+import { Tooltip } from 'react-tooltip'
 import './Card.scss'
 
 /**
@@ -189,9 +190,12 @@ export const Card = React.forwardRef((props, ref) => {
     : mdi.mdiPinOutline
 
   const renameButton = (capabilities || '').includes('RENAME')
-    ? <IconButton onClick={() => emitter.emit('edit/begin', { id })}>
-        <Icon className='e3de-icon' path={mdi.mdiPencil}/>
-      </IconButton>
+    ? <>
+        <IconButton onClick={() => emitter.emit('edit/begin', { id })}>
+          <Icon className='e3de-icon tt-rename-button' path={mdi.mdiPencil}/>
+        </IconButton>
+        <Tooltip anchorSelect='.tt-rename-button' content='Edit item name' delayShow={750} />
+      </>
     : null
 
   return (
@@ -213,8 +217,9 @@ export const Card = React.forwardRef((props, ref) => {
           />
           { renameButton }
           <IconButton onClick={() => emitter.emit(pinned ? 'unpin' : 'pin', { id })}>
-            <Icon className='e3de-icon' path={pinPath}/>
+            <Icon className='e3de-icon tt-pin-button' path={pinPath}/>
           </IconButton>
+          <Tooltip anchorSelect='.tt-pin-button' content='Pin/Unpin this item' delayShow={750} />
         </div>
         { children.body }
         <hr></hr>

src/renderer/components/sidebar/FilterInput.js

@@ -5,6 +5,7 @@ import { defaultSearch } from './state'
 import { matcher, stopPropagation } from '../events'
 import { cmdOrCtrl } from '../../platform'
 import { preventDefault } from 'ol/events/Event'
+import { Tooltip } from 'react-tooltip'
 import './FilterInput.scss'
 
 
@@ -69,7 +70,14 @@ export const FilterInput = props => {
         onChange={handleChange}
         onKeyDown={handleKeyDown}
         onClick={stopPropagation}
+        id='filter-input'
       />
+      <Tooltip anchorSelect='#filter-input' delayShow={750}>
+        <div>
+          You can search for multiple phrases or #tags<br/>
+          and also combine them.
+        </div>
+      </Tooltip>
     </div>
   )
 }