diff options
Diffstat (limited to 'diplomacy/web/src/gui/components')
| -rw-r--r-- | diplomacy/web/src/gui/components/fancyBox.js (renamed from diplomacy/web/src/gui/components/fancybox.jsx) | 32 | ||||
| -rw-r--r-- | diplomacy/web/src/gui/components/help.jsx | 30 | ||||
| -rw-r--r-- | diplomacy/web/src/gui/components/navigation.jsx | 2 |
3 files changed, 31 insertions, 33 deletions
diff --git a/diplomacy/web/src/gui/components/fancybox.jsx b/diplomacy/web/src/gui/components/fancyBox.js index 66a1efe..1e8c07c 100644 --- a/diplomacy/web/src/gui/components/fancybox.jsx +++ b/diplomacy/web/src/gui/components/fancyBox.js @@ -21,31 +21,19 @@ import {Button} from "./button"; const TIMES = '\u00D7'; export class FancyBox extends React.Component { - // open-tag (<FancyBox></FancyBox>) - // PROPERTIES - // title - // onClose render() { return ( - <div className={'fancy-wrapper'} onClick={this.props.onClose}> - <div className={'fancy-box container'} onClick={(event) => { - if (!event) - event = window.event; - if (event.hasOwnProperty('cancelBubble')) - event.cancelBubble = true; - if (event.stopPropagation) - event.stopPropagation(); - }}> - <div className={'row fancy-bar'}> - <div className={'col-11 align-self-center fancy-title'}>{this.props.title}</div> - <div className={'col-1 fancy-button'}> - <Button title={TIMES} color={'danger'} onClick={this.props.onClose}/> - </div> - </div> - <div className={'row'}> - <div className={'col fancy-content'}>{this.props.children}</div> + <div className="fancy-box"> + <div className="fancy-bar p-1 d-flex flex-row"> + <div + className="flex-grow-1 fancy-title d-flex flex-column justify-content-center pr-0 pr-sm-1">{this.props.title}</div> + <div className="fancy-button"> + <Button title={TIMES} color={'danger'} onClick={this.props.onClose}/> </div> </div> + <div> + <div className="col fancy-content">{this.props.children}</div> + </div> </div> ); } @@ -55,5 +43,5 @@ export class FancyBox extends React.Component { FancyBox.propTypes = { title: PropTypes.string.isRequired, onClose: PropTypes.func.isRequired, - children: PropTypes.oneOfType([PropTypes.array, PropTypes.object]) + children: PropTypes.any.isRequired }; diff --git a/diplomacy/web/src/gui/components/help.jsx b/diplomacy/web/src/gui/components/help.jsx index 1ec1a54..f3f469f 100644 --- a/diplomacy/web/src/gui/components/help.jsx +++ b/diplomacy/web/src/gui/components/help.jsx @@ -1,13 +1,23 @@ import React from "react"; +import PropTypes from 'prop-types'; +import {FancyBox} from "./fancyBox"; -export function Help() { - return ( - <div> - <p>When building an order, press <strong>ESC</strong> to reset build.</p> - <p>Press letter associated to an order type to start building an order of this type. - <br/> Order type letter is indicated in order type name after order type radio button. - </p> - <p>In Phase History tab, use keyboard left and right arrows to navigate in past phases.</p> - </div> - ); +export class Help extends React.Component { + render() { + return ( + <FancyBox title={'Help'} onClose={this.props.onClose}> + <div> + <p>When building an order, press <strong>ESC</strong> to reset build.</p> + <p>Press letter associated to an order type to start building an order of this type. + <br/> Order type letter is indicated in order type name after order type radio button. + </p> + <p>In Phase History tab, use keyboard left and right arrows to navigate in past phases.</p> + </div> + </FancyBox> + ); + } } + +Help.propTypes = { + onClose: PropTypes.func.isRequired +}; diff --git a/diplomacy/web/src/gui/components/navigation.jsx b/diplomacy/web/src/gui/components/navigation.jsx index 5d961bc..051f8ea 100644 --- a/diplomacy/web/src/gui/components/navigation.jsx +++ b/diplomacy/web/src/gui/components/navigation.jsx @@ -1,5 +1,5 @@ import React from "react"; -import Octicon, {Person} from "@githubprimer/octicons-react"; +import Octicon, {Person} from "@primer/octicons-react"; import PropTypes from "prop-types"; export class Navigation extends React.Component { |