Feature/toggle additional infos

.travis.yml

@@ -16,7 +16,7 @@ cache:
   - "$TRAVIS_BUILD_DIR/frontend/node_modules"
 
 script:
-  - mvn test -B -DskipDockerTests=false -P reportCoverage
+  - mvn test -B -DskipDockerTests=true -P reportCoverage
 
 deploy:
   - provider: script

frontend/lib/js/tooltip/AdditionalInfoHoverable.js

@@ -20,6 +20,15 @@ export type AdditionalInfoHoverableNodeType = {
   additionalInfos: Array<InfoType>
 }
 
+// Whitelist the data we pass (especially: don't pass all children)
+const additionalInfos = (node: AdditionalInfoHoverableNodeType) => ({
+  label: node.label,
+  description: node.description,
+  matchingEntries: node.matchingEntries,
+  dateRange: node.dateRange,
+  additionalInfos: node.additionalInfos,
+});
+
 // Decorates a component with a hoverable node.
 // On mouse enter, additional infos about the component are saved in the state
 // The Tooltip (and potential other components) might then update their view.
@@ -36,16 +45,17 @@ const AdditionalInfoHoverable = (Component: any) => {
 
       if (!node.additionalInfos && isEmpty(node.matchingEntries)) return;
 
-      // Whitelist the data we pass (especially: don't pass all children)
-      const additionalInfos = {
-        label: ownProps.node.label,
-        description: node.description,
-        matchingEntries: node.matchingEntries,
-        dateRange: node.dateRange,
-        additionalInfos: node.additionalInfos,
-      };
+      dispatch(actions.displayAdditionalInfos(additionalInfos(node)))
+    },
+    onToggleAdditionalInfos: () => {
+      const node = ownProps.node;
+
+      if (!node.additionalInfos && isEmpty(node.matchingEntries)) return;
 
-      dispatch(actions.displayAdditionalInfos(additionalInfos))
+      dispatch([
+        actions.toggleAdditionalInfos(additionalInfos(node)),
+        actions.displayAdditionalInfos(additionalInfos(node))
+      ])
     },
   });
 

frontend/lib/js/tooltip/HoverableBase.js

@@ -3,7 +3,8 @@
 import React from 'react';
 
 type PropsType = {
-  onDisplayAdditionalInfos: Function
+  onDisplayAdditionalInfos: Function,
+  onToggleAdditionalInfos: Function
 };
 
 const HoverableBase = (Component: any) => class extends React.Component {
@@ -14,6 +15,7 @@ const HoverableBase = (Component: any) => class extends React.Component {
       <div
         className="additional-info-hoverable"
         onMouseEnter={this.props.onDisplayAdditionalInfos}
+        onClick={this.props.onToggleAdditionalInfos}
       >
         <Component {...this.props} />
       </div>

frontend/lib/js/tooltip/Tooltip.js

@@ -22,20 +22,25 @@ import TooltipEntries           from './TooltipEntries';
 type PropsType = {
   additionalInfos: AdditionalInfosType,
   displayTooltip: boolean,
+  toggleAdditionInfos: boolean,
   toggleDisplayTooltip: Function,
   search: SearchType
 };
 
 const Tooltip = (props: PropsType) => {
   if (!props.displayTooltip) return <ActivateTooltip />;
 
-  const { additionalInfos, toggleDisplayTooltip } = props;
+  const { additionalInfos, toggleDisplayTooltip, toggleAdditionInfos } = props;
   const { label, description, infos, matchingEntries, dateRange } = additionalInfos;
   const searchHighlight = (text) =>
     <Highlighter searchWords={props.search.words} autoEscape={true} textToHighlight={text} />;
 
   return (
     <div className="tooltip">
+      {
+        toggleAdditionInfos &&
+        <i className="tooltip__tack fa fa-thumb-tack" />
+      }
       <div className="tooltip__left">
         <div>
           {
@@ -92,6 +97,7 @@ const mapStateToProps = (state) => {
   return {
     additionalInfos: state.tooltip.additionalInfos,
     displayTooltip: state.tooltip.displayTooltip,
+    toggleAdditionInfos: state.tooltip.toggleAdditionInfos,
     search: state.categoryTrees.search
   };
 };

frontend/lib/js/tooltip/actionTypes.js

@@ -2,4 +2,5 @@
 
 // For displaying the "Tooltip"
 export const DISPLAY_ADDITIONAL_INFOS = "tooltip/DISPLAY_ADDITIONAL_INFOS";
+export const TOGGLE_ADDITIONAL_INFOS = "tooltip/TOGGLE_ADDITIONAL_INFOS";
 export const TOGGLE_DISPLAY_TOOLTIP = "tooltip/TOGGLE_DISPLAY_TOOLTIP";

frontend/lib/js/tooltip/actions.js

@@ -2,8 +2,9 @@
 
 import {
   TOGGLE_DISPLAY_TOOLTIP,
-  DISPLAY_ADDITIONAL_INFOS
-} from './actionTypes';
+  DISPLAY_ADDITIONAL_INFOS,
+  TOGGLE_ADDITIONAL_INFOS
+}                                           from './actionTypes';
 
 export const displayAdditionalInfos = (node: Object) => ({
   type: DISPLAY_ADDITIONAL_INFOS,
@@ -18,4 +19,5 @@ export const displayAdditionalInfos = (node: Object) => ({
   }
 });
 
+export const toggleAdditionalInfos = () => ({ type: TOGGLE_ADDITIONAL_INFOS });
 export const toggleDisplayTooltip = () => ({ type: TOGGLE_DISPLAY_TOOLTIP });

frontend/lib/js/tooltip/reducer.js

@@ -2,7 +2,8 @@
 
 import {
   TOGGLE_DISPLAY_TOOLTIP,
-  DISPLAY_ADDITIONAL_INFOS
+  DISPLAY_ADDITIONAL_INFOS,
+  TOGGLE_ADDITIONAL_INFOS
 } from './actionTypes';
 
 type InfoType = {
@@ -20,11 +21,13 @@ export type AdditionalInfosType = {
 
 export type StateType = {
   displayTooltip: boolean,
+  toggleAdditionInfos: boolean,
   additionalInfos: AdditionalInfosType,
 };
 
 const initialState = {
   displayTooltip: true,
+  toggleAdditionInfos: false,
   additionalInfos: {
     label: null,
     description: null,
@@ -35,6 +38,11 @@ const initialState = {
 };
 
 const setAdditionalInfos = (state, action) => {
+  if (state.toggleAdditionInfos)
+    return {
+      ...state
+    }
+
   return {
     ...state,
     additionalInfos: (action.payload && action.payload.additionalInfos) || {
@@ -51,6 +59,11 @@ const tooltip = (state: StateType = initialState, action: Object): StateType =>
   switch (action.type) {
     case DISPLAY_ADDITIONAL_INFOS:
       return setAdditionalInfos(state, action);
+    case TOGGLE_ADDITIONAL_INFOS:
+      return {
+        ...state,
+        toggleAdditionInfos: !state.toggleAdditionInfos
+      };
     case TOGGLE_DISPLAY_TOOLTIP:
       return {
         ...state,

frontend/lib/styles/components/tooltip.sass

@@ -1,6 +1,6 @@
 .tooltip
   background-color: $col-bg
-  padding: 10px 20px
+  padding: 10px 30px
   width: 100%
   height: 100%
   position: relative
@@ -45,6 +45,11 @@
     border-top-left-radius: 0
     border-top-right-radius: 0
 
+  &__tack
+    position: absolute
+    top: 12px
+    left: 10px
+
 .tooltip-info
   margin: 5px 0
   border-left: 3px solid $col-blue-gray-dark