Merge pull request #38 from syncpoint/issue-9

open KBar programmatically from feature properties pane

src/renderer/components/KBar.js

@@ -73,6 +73,21 @@ const DryRunner = () => {
   }, [results, activeIndex, visualState])
 }
 
+const ToggleListener = () => {
+  const { options, query } = useKBar()
+  const { emitter } = useServices()
+
+  React.useEffect(() => {
+    const toggle = () => {
+      query.toggle()
+      // it's weird that kbar does not call onOpen on its own
+      options.callbacks?.onOpen()
+    }
+    emitter.on('KBAR/TOGGLE', toggle)
+    return () => emitter.off('KBAR/TOGGLE', toggle)
+  }, [emitter, options, query])
+}
+
 
 /**
  *
@@ -128,6 +143,7 @@ export const KBar = () => {
 
   return (
     <Provider actions={[...kbarActions.global()]} options={options}>
+      <ToggleListener />
       <Portal>
         <ActionProvider actions={contextActions}/>
         <Positioner style={positionerStyle}>

src/renderer/components/properties/ActivityProperties.js

@@ -11,6 +11,7 @@ import AdditionalInformation from './AdditionalInformation'
 import EvaluationRating from './EvaluationRating'
 import Status from './Status'
 import GridCols2 from './GridCols2'
+import KProperty from './KProperty'
 
 const ActivityProperties = props =>
   <GridCols2>
@@ -26,6 +27,7 @@ const ActivityProperties = props =>
     <AdditionalInformation {...props}/>
     <EvaluationRating {...props}/>
     <Status {...props}/>
+    <KProperty {...props}/>
   </GridCols2>
 
 export default ActivityProperties

src/renderer/components/properties/BoundariesProperties.js

@@ -11,6 +11,7 @@ import AdditionalInformation from './AdditionalInformation'
 import Status from './Status'
 import GridCols2 from './GridCols2'
 import Echelon from './Echelon'
+import KProperty from './KProperty'
 
 export default props => {
   return (
@@ -24,6 +25,7 @@ export default props => {
       <StaffComments {...props}/>
       <AdditionalInformation {...props}/>
       <Status {...props}/>
+      <KProperty {...props}/>
     </GridCols2>
   )
 }

src/renderer/components/properties/Coordinates.js

@@ -13,7 +13,7 @@ const Button = props => {
 
   return (
     <button
-      className='properties__button'
+      className='properties__icon__button'
       onClick={handleClick(props.path)}
     >
       <Icon path={mdi[props.path]} size='20px'/>

src/renderer/components/properties/EquipmentProperties.js

@@ -12,6 +12,7 @@ import EvaluationRating from './EvaluationRating'
 import Status from './Status'
 import Condition from './Condition'
 import GridCols2 from './GridCols2'
+import KProperty from './KProperty'
 
 const EquipmentProperties = props =>
   <GridCols2>
@@ -27,6 +28,7 @@ const EquipmentProperties = props =>
     <EvaluationRating {...props}/>
     <Status {...props}/>
     <Condition {...props}/>
+    <KProperty {...props}/>
   </GridCols2>
 
 export default EquipmentProperties

src/renderer/components/properties/GraphicsProperties.js

@@ -20,6 +20,7 @@ import CorridorWidth from './CorridorWidth'
 import * as MILSTD from '../../symbology/2525c'
 import * as GEOM from '../../model/geometry'
 import { readGeometry } from '../../store/FeatureStore'
+import KProperty from './KProperty'
 
 export default props => {
   const specializations = Object.values(props.features).reduce((acc, value) => {
@@ -67,6 +68,7 @@ export default props => {
       <StaffComments {...props}/>
       <AdditionalInformation {...props}/>
       <Status {...props}/>
+      <KProperty {...props}/>
     </GridCols2>
   )
 }

src/renderer/components/properties/InstallationProperties.js

@@ -9,6 +9,7 @@ import AdditionalInformation from './AdditionalInformation'
 import EvaluationRating from './EvaluationRating'
 import Status from './Status'
 import GridCols2 from './GridCols2'
+import KProperty from './KProperty'
 
 const InstallationProperties = props =>
   <GridCols2>
@@ -21,6 +22,7 @@ const InstallationProperties = props =>
     <AdditionalInformation {...props}/>
     <EvaluationRating {...props}/>
     <Status {...props}/>
+    <KProperty {...props}/>
   </GridCols2>
 
 export default InstallationProperties

src/renderer/components/properties/KProperty.js

@@ -0,0 +1,20 @@
+/* eslint-disable react/prop-types */
+import React from 'react'
+import ColSpan2 from './ColSpan2'
+import { useServices } from '../hooks'
+
+const KProperty = (props) => {
+  const { emitter } = useServices()
+
+  const toggleKBar = () => {
+    emitter.emit('KBAR/TOGGLE')
+  }
+
+  return (
+    <ColSpan2>
+      <button className='properties__button' style={{ width: '100%' }} onClick={toggleKBar} disabled={props.disabled} >Show more actions ...</button>
+    </ColSpan2>
+  )
+}
+
+export default KProperty

src/renderer/components/properties/PointProperties.js

@@ -9,6 +9,7 @@ import StaffComments from './StaffComments'
 import AdditionalInformation from './AdditionalInformation'
 import Status from './Status'
 import GridCols2 from './GridCols2'
+import KProperty from './KProperty'
 
 const PointProperties = props =>
   <GridCols2>
@@ -22,6 +23,7 @@ const PointProperties = props =>
     <StaffComments {...props}/>
     <AdditionalInformation {...props}/>
     <Status {...props}/>
+    <KProperty {...props}/>
   </GridCols2>
 
 export default PointProperties

src/renderer/components/properties/Properties.css

@@ -13,7 +13,6 @@
   box-shadow:
     rgba(50, 50, 93, 0.25) 0px 13px 27px -5px,
     rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
-  opacity: 0.78;
 }
 
 .feature-properties:hover {
@@ -44,11 +43,7 @@
   opacity: 1;
 }
 
-.feature-properties:focus-within {
-  opacity: 1;
-}
-
-.properties__button {
+.properties__icon__button {
   width: 28px;
   height: 28px;
   padding: 2px;
@@ -58,10 +53,27 @@
   background-color: white;
 }
 
-.properties__button:hover {
+.properties__icon__button:hover {
   background-color: #e0e0e0;
 }
 
-.properties__button:active {
+.properties__icon__button:active {
   background-color: #d0d0d0;
+}
+
+.properties__button {
+  font-weight: 400;
+  color: white;
+  background-color: rgb(1, 119, 169);
+  padding: 4px;
+  border-radius: 2px;
+}
+
+.properties__button:hover {
+  background-color: rgb(11, 65, 100)
+}
+
+.properties__button:disabled {
+  opacity: 0.5;
+  background-color: rgb(1, 119, 169)
 }

src/renderer/components/properties/UnitProperties.js

@@ -14,6 +14,7 @@ import Condition from './Condition'
 import Reinforcement from './Reinforcement'
 import UnitModifiers from './UnitModifiers'
 import GridCols2 from './GridCols2'
+import KProperty from './KProperty'
 
 const UnitProperties = props => {
   return (
@@ -32,6 +33,7 @@ const UnitProperties = props => {
       <Condition {...props}/>
       <Reinforcement {...props}/>
       <UnitModifiers {...props}/>
+      <KProperty {...props}/>
     </GridCols2>
   )
 }