Allow collapse/expand of damage sections

src/app/components/DamageDealt.jsx

@@ -3,7 +3,7 @@ import TranslatedComponent from './TranslatedComponent';
 import { Ships } from 'coriolis-data/dist';
 import ShipSelector from './ShipSelector';
 import { nameComparator } from '../utils/SlotFunctions';
-import { MountFixed, MountGimballed, MountTurret } from './SvgIcons';
+import { CollapseSection, ExpandSection, MountFixed, MountGimballed, MountTurret } from './SvgIcons';
 
 /**
  * Generates an internationalization friendly weapon comparator that will
@@ -60,11 +60,13 @@ export default class DamageDealt extends TranslatedComponent {
 
     this._sort = this._sort.bind(this);
     this._onShipChange = this._onShipChange.bind(this);
+    this._onCollapseExpand = this._onCollapseExpand.bind(this);
 
     this.state = {
       predicate: 'n',
       desc: true,
-      against: DamageDealt.DEFAULT_AGAINST
+      against: DamageDealt.DEFAULT_AGAINST,
+      expanded: false
     };
   }
 
@@ -120,6 +122,13 @@ export default class DamageDealt extends TranslatedComponent {
     return weapons;
   }
 
+  /**
+   * Triggered when the collapse or expand icons are clicked
+   */
+  _onCollapseExpand() {
+    this.setState({ expanded: !this.state.expanded });
+  }
+
   /**
    * Triggered when the ship we compare against changes
    * @param {string} s the new ship ID
@@ -206,12 +215,15 @@ export default class DamageDealt extends TranslatedComponent {
   render() {
     const { language, tooltip, termtip } = this.context;
     const { formats, translate } = language;
+    const { expanded } = this.state;
 
     const sortOrder = this._sortOrder;
+    const onCollapseExpand = this._onCollapseExpand;
 
     return (
       <span>
-        <h1>{translate('damage dealt against')}</h1>
+        <h1>{translate('damage dealt against')} {expanded ? <span onClick={onCollapseExpand}><CollapseSection className='summary'/></span> : <span onClick={onCollapseExpand}><ExpandSection className='summary'/></span>}</h1>
+        {expanded ?  <span>
         <ShipSelector initial={this.state.against} currentMenu={this.props.currentMenu} onChange={this._onShipChange} />
         <table className='summary' style={{ width: '100%' }}>
           <thead>
@@ -225,7 +237,7 @@ export default class DamageDealt extends TranslatedComponent {
           <tbody>
             {this._renderRows(translate, formats)}
           </tbody>
-        </table>
+        </table></span> : null }
       </span>
     );
   }

src/app/components/DamageReceived.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import TranslatedComponent from './TranslatedComponent';
 import { Modules } from 'coriolis-data/dist';
 import { nameComparator } from '../utils/SlotFunctions';
-import { MountFixed, MountGimballed, MountTurret } from './SvgIcons';
+import { CollapseSection, ExpandSection, MountFixed, MountGimballed, MountTurret } from './SvgIcons';
 import Module from '../shipyard/Module';
 
 /**
@@ -57,10 +57,12 @@ export default class DamageReceived extends TranslatedComponent {
     super(props);
 
     this._sort = this._sort.bind(this);
+    this._onCollapseExpand = this._onCollapseExpand.bind(this);
 
     this.state = {
       predicate: 'n',
-      desc: true
+      desc: true,
+      expanded: false
     };
   }
 
@@ -152,6 +154,13 @@ export default class DamageReceived extends TranslatedComponent {
     return weapons;
   }
 
+  /**
+   * Triggered when the collapse or expand icons are clicked
+   */
+  _onCollapseExpand() {
+    this.setState({ expanded: !this.state.expanded });
+  }
+
   /**
    * Set the sort order and sort
    * @param  {string} predicate Sort predicate
@@ -230,12 +239,15 @@ export default class DamageReceived extends TranslatedComponent {
   render() {
     const { language, tooltip, termtip } = this.context;
     const { formats, translate } = language;
+    const { expanded } = this.state;
 
     const sortOrder = this._sortOrder;
+    const onCollapseExpand = this._onCollapseExpand;
 
     return (
       <span>
-        <h1>{translate('damage received by')}</h1>
+        <h1>{translate('damage received by')} {expanded ? <span onClick={onCollapseExpand}><CollapseSection className='summary'/></span> : <span onClick={onCollapseExpand}><ExpandSection className='summary'/></span>}</h1>
+	{expanded ? <span>
         <table className='summary' style={{ width: '100%' }}>
           <thead>
           <tr className='main'>
@@ -255,7 +267,7 @@ export default class DamageReceived extends TranslatedComponent {
           <tbody>
             {this._renderRows(translate, formats)}
           </tbody>
-        </table>
+        </table></span> : null }
       </span>
     );
   }

src/app/components/SvgIcons.jsx

@@ -475,6 +475,52 @@ export class MountTurret extends SvgIcon {
   }
 }
 
+/**
+ * Collapse section
+ */
+export class CollapseSection extends SvgIcon {
+  /**
+   * Overriden view box
+   * @return {String} view box
+   */
+  viewBox() { return '0 0 200 200'; }
+  /**
+   * Generate the SVG
+   * @return {React.Component} SVG Contents
+   */
+  svg() {
+    return <g>
+	     <path d='m 100,180 0,-140' />
+	     <path d='m 100,40 25,45' />
+	     <path d='m 100,40 -25,45' />
+	     <path d='m 20,20 160,0' />
+	   </g>;
+  }
+}
+
+/**
+ * Expand section
+ */
+export class ExpandSection extends SvgIcon {
+  /**
+   * Overriden view box
+   * @return {String} view box
+   */
+  viewBox() { return '0 0 200 200'; }
+  /**
+   * Generate the SVG
+   * @return {React.Component} SVG Contents
+   */
+  svg() {
+    return <g>
+	     <path d='m 100,20 0,140' />
+	     <path d='m 100,160 25,-45' />
+	     <path d='m 100,160 -25,-45' />
+	     <path d='m 20,180 160,0' />
+	   </g>;
+  }
+}
+
 /**
  * Rocket ship
  */