diff --git a/ChangeLog.md b/ChangeLog.md index 74664027..ea37576a 100644 --- a/ChangeLog.md +++ b/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 diff --git a/src/app/components/HardpointSlot.jsx b/src/app/components/HardpointSlot.jsx index b10d22df..cc73e03d 100644 --- a/src/app/components/HardpointSlot.jsx +++ b/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
+ const className = cn('details', enabled ? '' : 'disabled') + return
{m.mount && m.mount == 'F' ? : ''} diff --git a/src/app/components/HardpointSlotSection.jsx b/src/app/components/HardpointSlotSection.jsx index 5d697476..dfcb9acb 100644 --- a/src/app/components/HardpointSlotSection.jsx +++ b/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} />); } } diff --git a/src/app/components/InternalSlot.jsx b/src/app/components/InternalSlot.jsx index 32916038..bf471e2f 100644 --- a/src/app/components/InternalSlot.jsx +++ b/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
+ + const className = cn('details', enabled ? '' : 'disabled') + return
{classRating} {translate(m.name || m.grp)}{m.mods && Object.keys(m.mods).length > 0 ? : ''}
{formats.round(mass)}{u.T}
diff --git a/src/app/components/InternalSlotSection.jsx b/src/app/components/InternalSlotSection.jsx index 38d65415..a41dced6 100644 --- a/src/app/components/InternalSlotSection.jsx +++ b/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} />); } diff --git a/src/app/components/Slot.jsx b/src/app/components/Slot.jsx index 4e015225..d5e8931c 100644 --- a/src/app/components/Slot.jsx +++ b/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 =
{translate(eligible ? 'emptyrestricted' : 'empty')}
; diff --git a/src/app/components/StandardSlot.jsx b/src/app/components/StandardSlot.jsx index 74612b94..f02d8146 100644 --- a/src/app/components/StandardSlot.jsx +++ b/src/app/components/StandardSlot.jsx @@ -95,7 +95,7 @@ export default class StandardSlot extends TranslatedComponent { return (
-
+
{slot.maxClass}
{classRating} {translate(m.name || m.grp)}{m.mods && Object.keys(m.mods).length > 0 ? : null }
diff --git a/src/app/components/UtilitySlotSection.jsx b/src/app/components/UtilitySlotSection.jsx index 95324219..cdfe3755 100644 --- a/src/app/components/UtilitySlotSection.jsx +++ b/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} />); } } diff --git a/src/less/colors.less b/src/less/colors.less index f2d33c1b..4814e724 100755 --- a/src/less/colors.less +++ b/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; } diff --git a/src/less/icons.less b/src/less/icons.less index 999352a9..17798985 100755 --- a/src/less/icons.less +++ b/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;