Grey out modules that are powered off to provide a clearer visual indication

ChangeLog.md

@@ -3,6 +3,7 @@
   * Handle display when summary values show thrusters disabled but current mass keeps them enabled
   * Added updated German translations (thanks to @sweisgerber-dev)
   * Power state (enabled and priority) now follows modules when they are swapped or copied
+  * Grey out modules that are powered off to provide a clearer visual indication
 
 #2.3.4
   * Fix crash when removing the special effect from a module

src/app/components/HardpointSlot.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import cn from 'classnames';
 import Slot from './Slot';
 import Persist from '../stores/Persist';
 import { DamageAbsolute, DamageKinetic, DamageThermal, DamageExplosive, MountFixed, MountGimballed, MountTurret, ListModifications, Modified } from './SvgIcons';
@@ -32,12 +33,13 @@ export default class HardpointSlot extends Slot {
   /**
    * Generate the slot contents
    * @param  {Object} m             Mounted Module
+   * @param  {Boolean} enabled      Slot enabled
    * @param  {Function} translate   Translate function
    * @param  {Object} formats       Localized Formats map
    * @param  {Object} u             Localized Units Map
    * @return {React.Component}      Slot contents
    */
-  _getSlotDetails(m, translate, formats, u) {
+  _getSlotDetails(m, enabled, translate, formats, u) {
     if (m) {
       let classRating = `${m.class}${m.rating}${m.missile ? '/' + m.missile : ''}`;
       let { drag, drop } = this.props;
@@ -60,7 +62,8 @@ export default class HardpointSlot extends Slot {
         );
       }
 
-      return <div className='details' draggable='true' onDragStart={drag} onDragEnd={drop}>
+      const className = cn('details', enabled ? '' : 'disabled')
+      return <div className={className} draggable='true' onDragStart={drag} onDragEnd={drop}>
         <div className={'cb'}>
           <div className={'l'}>
           {m.mount && m.mount == 'F' ? <span onMouseOver={termtip.bind(null, 'fixed')} onMouseOut={tooltip.bind(null, null)}><MountFixed /></span> : ''}

src/app/components/HardpointSlotSection.jsx

@@ -77,6 +77,7 @@ export default class HardpointSlotSection extends SlotSection {
           dropClass={this._dropClass(h, originSlot, targetSlot)}
           ship={ship}
           m={h.m}
+          enabled={h.enabled ? true : false}
         />);
       }
     }

src/app/components/InternalSlot.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import cn from 'classnames';
 import Slot from './Slot';
 import Persist from '../stores/Persist';
 import { ListModifications, Modified } from './SvgIcons';
@@ -14,12 +15,13 @@ export default class InternalSlot extends Slot {
   /**
    * Generate the slot contents
    * @param  {Object} m             Mounted Module
+   * @param  {Boolean} enabled      Slot enabled
    * @param  {Function} translate   Translate function
    * @param  {Object} formats       Localized Formats map
    * @param  {Object} u             Localized Units Map
    * @return {React.Component}      Slot contents
    */
-  _getSlotDetails(m, translate, formats, u) {
+  _getSlotDetails(m, enabled, translate, formats, u) {
     if (m) {
       let classRating = m.class + m.rating;
       let { drag, drop, ship } = this.props;
@@ -40,7 +42,9 @@ export default class InternalSlot extends Slot {
       }
 
       let mass = m.getMass() || m.cargo || m.fuel || 0;
-      return <div className='details' draggable='true' onDragStart={drag} onDragEnd={drop}>
+
+      const className = cn('details', enabled ? '' : 'disabled')
+      return <div className={className} draggable='true' onDragStart={drag} onDragEnd={drop}>
         <div className={'cb'}>
           <div className={'l'}>{classRating} {translate(m.name || m.grp)}{m.mods && Object.keys(m.mods).length > 0 ? <span onMouseOver={termtip.bind(null, modTT)} onMouseOut={tooltip.bind(null, null)}><Modified /></span> : ''}</div>
           <div className={'r'}>{formats.round(mass)}{u.T}</div>

src/app/components/InternalSlotSection.jsx

@@ -225,6 +225,7 @@ export default class InternalSlotSection extends SlotSection {
         dropClass={this._dropClass(s, originSlot, targetSlot)}
         fuel={fuelCapacity}
         ship={ship}
+        enabled={s.enabled ? true : false}
       />);
     }
 

src/app/components/Slot.jsx

@@ -20,6 +20,7 @@ export default class Slot extends TranslatedComponent {
     maxClass: PropTypes.number.isRequired,
     selected: PropTypes.bool,
     m: PropTypes.object,
+    enabled: PropTypes.bool.isRequired,
     ship: PropTypes.object.isRequired,
     eligible: PropTypes.object,
     warning: PropTypes.func,
@@ -79,7 +80,7 @@ export default class Slot extends TranslatedComponent {
   render() {
     let language = this.context.language;
     let translate = language.translate;
-    let { ship, m, dropClass, dragOver, onOpen, onChange, selected, eligible, onSelect, warning, availableModules } = this.props;
+    let { ship, m, enabled, dropClass, dragOver, onOpen, onChange, selected, eligible, onSelect, warning, availableModules } = this.props;
     let slotDetails, modificationsMarker, menu;
 
     if (!selected) {
@@ -88,7 +89,7 @@ export default class Slot extends TranslatedComponent {
     }
 
     if (m) {
-      slotDetails = this._getSlotDetails(m, translate, language.formats, language.units);  // Must be implemented by sub classes
+      slotDetails = this._getSlotDetails(m, enabled, translate, language.formats, language.units);  // Must be implemented by sub classes
       modificationsMarker = JSON.stringify(m);
     } else {
       slotDetails = <div className={'empty'}>{translate(eligible ? 'emptyrestricted' : 'empty')}</div>;

src/app/components/StandardSlot.jsx

@@ -95,7 +95,7 @@ export default class StandardSlot extends TranslatedComponent {
 
     return (
       <div className={cn('slot', { selected: this.props.selected })} onClick={this.props.onOpen} onContextMenu={stopCtxPropagation}>
-        <div className={cn('details-container', { warning: warning && warning(slot.m) })}>
+        <div className={cn('details-container', { warning: warning && warning(slot.m), disabled: m.grp !== 'bh' && !slot.enabled })}>
           <div className={'sz'}>{slot.maxClass}</div>
           <div>
             <div className={'l'}>{classRating} {translate(m.name || m.grp)}{m.mods && Object.keys(m.mods).length > 0 ? <span className='r' onMouseOver={termtip.bind(null, modTT)} onMouseOut={tooltip.bind(null, null)}><Modified /></span> : null }</div>

src/app/components/UtilitySlotSection.jsx

@@ -77,6 +77,7 @@ export default class UtilitySlotSection extends SlotSection {
           enabled={h.enabled}
           ship={ship}
           m={h.m}
+          enabled={h.enabled ? true : false}
         />);
       }
     }

src/less/colors.less

@@ -24,51 +24,61 @@
 
 .fg {
   color: @fg;
+  stroke: @fg;
   fill: @fg;
 }
 
 .muted {
   color: @muted;
+  stroke: @muted;
   fill: @muted;
 }
 
 .disabled {
   color: @disabled;
+  stroke: @disabled;
   fill: @disabled;
 }
 
 .primary {
   color: @primary;
+  stroke: @primary;
   fill: @primary;
 }
 
 .primary-bg {
   color: @primary-bg;
+  stroke: @primary-bg;
   fill: @primary-bg;
 }
 
 .primary-disabled {
   color: @primary-disabled;
+  stroke: @primary-disabled;
   fill: @primary-disabled;
 }
 
 .secondary {
   color: @secondary;
+  stroke: @secondary;
   fill: @secondary;
 }
 
 .secondary-disabled {
   color: @secondary-disabled;
+  stroke: @secondary-disabled;
   fill: @secondary-disabled;
 }
 
 .warning {
   color: @warning;
+  stroke: @warning;
   fill: @warning;
 }
 
 .warning-disabled {
   color: @warning-disabled;
+  stroke: @warning-disabled;
   fill: @warning-disabled;
 }
 

src/less/icons.less

@@ -27,13 +27,12 @@
   }
 }
 
-// Modifiction icons - hard-code stroke/fill
+// Modifiction icons - hard-code fill
 .modicon {
   display: inline-block;
   vertical-align: middle;
   width: 1.1em;
   height: 1em;
-  stoke: @fg;
   stroke-width: 20;
   fill: transparent;