sam_oneal/fx_cast
1
0
Fork 0
mirror of https://github.com/hensm/fx_cast.git synced 2026-06-12 18:39:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

Split bridge info into separate component

Browse Source
This commit is contained in:
hensm
2018-12-13 11:35:31 +00:00
parent 307441444a
commit aed6f12e1b
3 changed files with 107 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
ext/src/options/Bridge.jsx Normal file
View File

@@ -0,0 +1,102 @@
import React, { Component } from "react";
const _ = browser.i18n.getMessage;
const BridgeStats = (props) => (
<table className="bridge__stats">
<tr>
<th>{ _("optionsBridgeStatsName") }</th>
<td>{ props.info.name }</td>
</tr>
<tr>
<th>{ _("optionsBridgeStatsVersion") }</th>
<td>{ props.info.version }</td>
</tr>
<tr>
<th>{ _("optionsBridgeStatsExpectedVersion") }</th>
<td>{ props.info.expectedVersion }</td>
</tr>
<tr>
<th>{ _("optionsBridgeStatsCompatibility") }</th>
<td>
{ do {
if (props.info.isVersionCompatible) {
if (props.info.isVersionExact) {
_("optionsBridgeCompatible")
} else {
_("optionsBridgeLikelyCompatible")
}
} else {
_("optionsBridgeIncompatible")
}
}}
</td>
</tr>
<tr>
<th>{ _("optionsBridgeStatsRecommendedAction") }</th>
<td>
{ do {
if (props.info.isVersionOlder) {
_("optionsBridgeOlderAction")
} else if (props.info.isVersionNewer) {
_("optionsBridgeNewerAction")
} else {
_("optionsBridgeNoAction")
}
}}
</td>
</tr>
</table>
);
export default (props) => (
<div className="bridge">
{ do {
if (props.loading) {
<div className="bridge__loading">
{ _("optionsBridgeLoading") }
<progress></progress>
</div>
} else {
const infoClasses = `bridge__info ${props.info
? "bridge__info--found"
: "bridge__info--not-found"}`;
const [ statusIcon, statusText ] = do {
if (!props.info) {
[ "assets/icons8-cancel-120.png"
, _("optionsBridgeNotFoundStatusText") ]
} else {
if (props.info.isVersionCompatible) {
[ "assets/icons8-ok-120.png"
, _("optionsBridgeFoundStatusText") ]
} else {
[ "assets/icons8-warn-120.png"
, _("optionsBridgeIssueStatusText") ]
}
}
};
<div className={infoClasses}>
<div className="bridge__status">
<img className="bridge__status-icon"
width="60" height="60"
src={ statusIcon } />
<h2 className="bridge__status-text">
{ statusText }
</h2>
</div>
{ do {
if (props.info) {
<BridgeStats info={ props.info }/>
} else {
// TODO: Download links
}
}}
</div>
}
}}
</div>
);

97
ext/src/options/index.jsx
View File

@@ -4,7 +4,9 @@ import React, { Component } from "react";
import ReactDOM from "react-dom"; import ReactDOM from "react-dom";
import defaultOptions from "./defaultOptions"; import defaultOptions from "./defaultOptions";
import EditableList from "./EditableList"; import EditableList from "./EditableList";
import Bridge from "./Bridge";
import getBridgeInfo from "../lib/getBridgeInfo"; import getBridgeInfo from "../lib/getBridgeInfo";
@@ -165,99 +167,8 @@ class App extends Component {
render () { render () {
return ( return (
<div> <div>
<Bridge info={ this.state.bridgeInfo }
<div className="bridge"> loading={ this.state.bridgeLoading } />
{ do {
if (this.state.bridgeLoading) {
<div className="bridge__loading">
{ _("optionsBridgeLoading") }
<progress></progress>
</div>
} else {
const { bridgeInfo } = this.state;
const bridgeInfoClasses = `bridge__info ${bridgeInfo
? "bridge__info--found"
: "bridge__info--not-found"}`;
const [ statusIcon, statusText ] = do {
if (!bridgeInfo) {
[ "assets/icons8-cancel-120.png"
, _("optionsBridgeNotFoundStatusText") ]
} else {
if (bridgeInfo.isVersionCompatible) {
[ "assets/icons8-ok-120.png"
, _("optionsBridgeFoundStatusText") ]
} else {
[ "assets/icons8-warn-120.png"
, _("optionsBridgeIssueStatusText") ]
}
}
};
<div className={bridgeInfoClasses}>
<div className="bridge__status">
<img className="bridge__status-icon"
width="60" height="60"
src={ statusIcon } />
<h2 className="bridge__status-text">
{ statusText }
</h2>
</div>
{ do { if (bridgeInfo) {
<table className="bridge__stats">
<tr>
<th>{ _("optionsBridgeStatsName") }</th>
<td>{ bridgeInfo.name }</td>
</tr>
<tr>
<th>{ _("optionsBridgeStatsVersion") }</th>
<td>{ bridgeInfo.version }</td>
</tr>
<tr>
<th>{ _("optionsBridgeStatsExpectedVersion") }</th>
<td>{ bridgeInfo.expectedVersion }</td>
</tr>
<tr>
<th>{ _("optionsBridgeStatsCompatibility") }</th>
<td>
{ do {
if (bridgeInfo.isVersionCompatible) {
if (bridgeInfo.isVersionExact) {
_("optionsBridgeCompatible")
} else {
_("optionsBridgeLikelyCompatible")
}
} else {
_("optionsBridgeIncompatible")
}
}}
</td>
</tr>
<tr>
<th>{ _("optionsBridgeStatsRecommendedAction") }</th>
<td>
{ do {
if (bridgeInfo.isVersionOlder) {
_("optionsBridgeOlderAction")
} else if (bridgeInfo.isVersionNewer) {
_("optionsBridgeNewerAction")
} else {
_("optionsBridgeNoAction")
}
}}
</td>
</tr>
</table>
} else {
// TODO: Download links
}}}
</div>
}
}}
</div>
<form id="form" ref={ form => { this.form = form; }} <form id="form" ref={ form => { this.form = form; }}
onSubmit={ this.handleFormSubmit } onSubmit={ this.handleFormSubmit }