Mirroring/coriolis
1
0
Fork 0
mirror of https://github.com/EDCD/coriolis.git synced 2025-12-10 07:05:35 +00:00
Code Issues Projects Releases Wiki Activity

Rework Modifictaions(Menu)

Browse Source
This commit is contained in:
Felix Linker
2021-01-02 10:59:58 +01:00
parent a970e052c1
commit ab153981c9
2 changed files with 69 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
src/app/components/Modification.jsx
View File

@@ -46,7 +46,7 @@ export default class Modification extends TranslatedComponent {
* @return {React.Component} modification * @return {React.Component} modification
*/ */
render() { render() {
const { translate, formats } = this.context.language; const { formats } = this.context.language;
const { highlight, m, property } = this.props; const { highlight, m, property } = this.props;
const { beneficial, unit, value, inputValue } = this.state; const { beneficial, unit, value, inputValue } = this.state;
@@ -58,44 +58,40 @@ export default class Modification extends TranslatedComponent {
} }
return ( return (
<div onBlur={this._updateFinished.bind(this)} key={property} <tr>
className="cb modification-container" <td>
> <span>
<span className="cb">{translate(property)}</span> <input type="checkbox" checked={true} onClick={() => {}}/>
<span className="header-adjuster"></span> </span>
<table style={{ width: '100%' }}> </td>
<tbody> <td className="input-container">
<tr> <span>
<td className="input-container"> <NumberEditor value={inputValue || value} stepModifier={1}
<span> decimals={2} step={0.01} style={{ textAlign: 'right', width: '100%' }}
<NumberEditor value={inputValue || value} stepModifier={1} className={cn('cb', { 'greyed-out': !highlight })}
decimals={2} step={0.01} style={{ textAlign: 'right' }} onKeyDown={(event) => {
className={cn('cb', { 'greyed-out': !highlight })} if (event.key == 'Enter') {
onKeyDown={(event) => { this._updateFinished();
if (event.key == 'Enter') { event.stopPropagation();
this._updateFinished(); }
event.stopPropagation(); }}
} onValueChange={(inputValue) => {
}} if (inputValue.length <= 15) {
onValueChange={(inputValue) => { this.setState({ inputValue });
if (inputValue.length <= 15) { }
this.setState({ inputValue }); }} />
} </span>
}} /> </td>
<span className="unit-container">{unit}</span> <td style={{ textAlign: 'left' }}>
</span> <span className="unit-container">{unit}</span>
</td> </td>
<td style={{ textAlign: 'center' }} <td style={{ textAlign: 'center' }}
className={cn({ className={cn({
secondary: beneficial, secondary: beneficial,
warning: beneficial === false, warning: beneficial === false,
})} })}
// TODO: support absolute modifiers >{formats.pct(m.getModifier(property))}</td>
>{formats.pct(m.getModifier(property))}</td> </tr>
</tr>
</tbody>
</table>
</div>
); );
} }
} }

44
src/app/components/ModificationsMenu.jsx
View File

@@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import * as _ from 'lodash'; import { chain, keys } from 'lodash';
import TranslatedComponent from './TranslatedComponent'; import TranslatedComponent from './TranslatedComponent';
import { stopCtxPropagation } from '../utils/UtilityFunctions'; import { stopCtxPropagation } from '../utils/UtilityFunctions';
import cn from 'classnames'; import cn from 'classnames';
@@ -161,21 +161,39 @@ export default class ModificationsMenu extends TranslatedComponent {
/** /**
* Render the modifications * Render the modifications
* @param {Object} props React Component properties
* @return {Array} Array of React Components * @return {Array} Array of React Components
*/ */
_renderModifications(props) { _renderModifications() {
const { m } = props; const { m } = this.props;
const { translate } = this.context.language;
const blueprintFeatures = getBlueprintInfo(m.getBlueprint()).features[ const blueprintFeatures = getBlueprintInfo(m.getBlueprint()).features[
m.getBlueprintGrade() m.getBlueprintGrade()
]; ];
const blueprintModifications = Object.keys(blueprintFeatures) const blueprintModifications = chain(keys(blueprintFeatures))
.map((feature) => this._mkModification(feature, true)) .map((feature) => [
.filter(Boolean); <tr>
const moduleModifications = Object.keys(getModuleInfo(m.getItem()).props) <th colSpan="4">
<span className="cb">{translate(feature)}</span>
</th>
</tr>,
this._mkModification(feature, true),
])
.filter(([_, mod]) => Boolean(mod))
.flatMap()
.value();
const moduleModifications = chain(keys(getModuleInfo(m.getItem()).props))
.filter((prop) => !blueprintFeatures[prop]) .filter((prop) => !blueprintFeatures[prop])
.map((prop) => this._mkModification(prop, false)); .map((prop) => [
<tr>
<th colSpan="4">
<span className="cb">{translate(prop)}</span>
</th>
</tr>,
this._mkModification(prop, false),
])
.flatMap()
.value();
return blueprintModifications.concat(moduleModifications); return blueprintModifications.concat(moduleModifications);
} }
@@ -362,7 +380,13 @@ export default class ModificationsMenu extends TranslatedComponent {
<span <span
onMouseOver={termtip.bind(null, 'HELP_MODIFICATIONS_MENU')} onMouseOver={termtip.bind(null, 'HELP_MODIFICATIONS_MENU')}
onMouseOut={tooltip.bind(null, null)} onMouseOut={tooltip.bind(null, null)}
>{this._renderModifications(this.props)}</span> >
<table style={{ width: '100%' }}>
<tbody>
{this._renderModifications()}
</tbody>
</table>
</span>
); );
} }