added settings to navbar; added support item to navbar

jcw780 · May 30, 2020 · dbd28d9 · dbd28d9
1 parent 46a70a1
commit dbd28d9
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 22 deletions.
diff --git a/README.md b/README.md
@@ -19,8 +19,9 @@
 - Shell detonation distance after penetration 
 - Checking whether the armor is thick enough to arm the shell
 ## Development Status
-### Current Status
 - [Issues](/~https://github.com/jcw780/wows_ballistics/issues)
+- Feels free to open an issue for questions, bugs, feature requests etc. 
+### Current Status
 - Calculations may be refined if contradicting data is provided
 ### Future Features
 - More tooltips

diff --git a/src/App.tsx b/src/App.tsx
@@ -12,6 +12,7 @@ import ShellWasm from './shellWasm.wasm';
 class App extends React.Component<{},{}> {
 	SFCref = React.createRef<ShellFormsContainer>();
 	TFCref = React.createRef<TargetFormsContainer>();
+	Settingsref = React.createRef<SettingsBar>();
 	graphsRef : React.RefObject<ChartGroup> = React.createRef<ChartGroup>();
 	navRef : React.RefObject<NavbarCustom> = React.createRef<NavbarCustom>();
 	instance : any;
@@ -195,7 +196,7 @@ class App extends React.Component<{},{}> {
 				<hr/>
 				<TargetFormsContainer ref={this.TFCref}/>
 				<hr/>
-				<SettingsBar settings={this.settings}/>
+				<SettingsBar settings={this.settings} ref={this.Settingsref}/>
 				<hr/>
 				<Row>
 					<Col/>
@@ -211,7 +212,7 @@ class App extends React.Component<{},{}> {
 		);
 	}
 	componentDidMount(){
-		this.links.parameters.push(['Shell Parameters', this.SFCref], ['Target Parameters', this.TFCref]);
+		this.links.parameters.push(['Shell Parameters', this.SFCref], ['Target Parameters', this.TFCref], ['Settings', this.Settingsref]);
 	}
 }
 

diff --git a/src/Navbar.tsx b/src/Navbar.tsx
@@ -36,6 +36,12 @@ class NavbarCustom extends React.Component<{links: T.linkT}>{
                         {makeDropdowns('post')}
                     </NavDropdown>
                 </Nav>
+                <Nav className="navbar-right">
+                    <NavDropdown title="Support" id="basic-nav-dropdown" alignRight>
+                        <NavDropdown.Item href="/~https://github.com/jcw780/wows_ballistics">Github</NavDropdown.Item>
+                        <NavDropdown.Item href="/~https://github.com/jcw780/wows_ballistics/issues">Issues</NavDropdown.Item>
+                    </NavDropdown>
+                </Nav>
             </Navbar>
         );
     }

diff --git a/src/SettingsBar.tsx b/src/SettingsBar.tsx
@@ -41,7 +41,7 @@ interface settingsBarProps{
     settings: T.settingsT,
 }
 export class SettingsBar extends React.Component<settingsBarProps, settingsBarState>{
-    state = {open : false}; 
+    state = {open : false}; scrollRef = React.createRef<Button & HTMLButtonElement>();
     private valueIndex : number = 1; values : Readonly<Array<string>> = ["Hide: ", "Show: "]; // 0: Hide 1: Show
     private toggleCollapse = () => {
         if(this.state.open){
@@ -125,7 +125,7 @@ export class SettingsBar extends React.Component<settingsBarProps, settingsBarSt
 
         return(<>
             <Button style={{width: "100%", paddingTop: "0.6rem", paddingBottom: "0.6rem", height: "3rem"}}
-                    onClick={this.toggleCollapse}
+                    onClick={this.toggleCollapse} ref={this.scrollRef}
                     aria-controls="collapseSettings"
                     aria-expanded={this.state.open} variant="dark"
                     className={this.state.open === true ? 'active' : ''}
@@ -135,23 +135,23 @@ export class SettingsBar extends React.Component<settingsBarProps, settingsBarSt
                     <Col sm="6" style={{padding: 0}}>
                         <h3>Graphs</h3>
                         <Row>
-                        <Col style={{paddingRight: 0}}>
-                        <h4>Range Axis</h4>
-                        {generateGraphForm()}
-                        </Col>
+                            <Col style={{paddingRight: 0}}>
+                            <h4>Range Axis</h4>
+                            {generateGraphForm()}
+                            </Col>
                         <Col style={{padding: 0}}>
-                        <h4>Labeling</h4>
-                        <ToggleButtonGroup type="checkbox" vertical defaultValue={shortNamesDefault}>
-                            <ToggleButton value="0" onChange={handleShortNameChange} variant="secondary">Short Names</ToggleButton>
-                        </ToggleButtonGroup>
-                        <ParameterForm newValue={String(this.props.settings.format.rounding)} controlId="rounding" label="Tooltip Rounding"
-                        type="number" handleValueChange={handleRoundingChange} labelWidth={3} append="dp"/>
-                        <h4>Color Generation</h4>
-                        <ParameterForm newValue={String(this.props.settings.format.colors.saturation * 100)} controlId="saturation" label="Saturation"
-                        type="number" handleValueChange={handleColorChange} labelWidth={3} append="%"/>
-                        <ParameterForm newValue={String(this.props.settings.format.colors.light * 100)} controlId="light" label="Light"
-                        type="number" handleValueChange={handleColorChange} labelWidth={3} append="%"/>
-                        </Col>
+                            <h4>Labeling</h4>
+                            <ToggleButtonGroup type="checkbox" vertical defaultValue={shortNamesDefault}>
+                                <ToggleButton value="0" onChange={handleShortNameChange} variant="secondary">Short Names</ToggleButton>
+                            </ToggleButtonGroup>
+                            <ParameterForm newValue={String(this.props.settings.format.rounding)} controlId="rounding" label="Tooltip Rounding"
+                            type="number" handleValueChange={handleRoundingChange} labelWidth={3} append="dp"/>
+                            <h4>Color Generation</h4>
+                            <ParameterForm newValue={String(this.props.settings.format.colors.saturation * 100)} controlId="saturation" label="Saturation"
+                            type="number" handleValueChange={handleColorChange} labelWidth={3} append="%"/>
+                            <ParameterForm newValue={String(this.props.settings.format.colors.light * 100)} controlId="light" label="Light"
+                            type="number" handleValueChange={handleColorChange} labelWidth={3} append="%"/>
+                            </Col>
                         </Row>
                     </Col>
                     <Col style={{padding: 0}}>

diff --git a/src/commonTypes.tsx b/src/commonTypes.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 import {ChartGroup, SingleChart} from 'Charts';
 import ShellFormsContainer from 'ShellForms';
 import TargetFormsContainer from 'TargetForms';
+import SettingsBar from 'SettingsBar';
 
 export interface styleT{
 	formGroup?: React.CSSProperties, formLabel?: React.CSSProperties, inputGroup?: React.CSSProperties, 
@@ -60,7 +61,7 @@ export type chartRefT = React.RefObject<SingleChart>;
 
 export type singleLinkT = [string, chartRefT | parameterRefT];
 export type parameterRefT = React.RefObject<ShellFormsContainer 
-| TargetFormsContainer>;
+| TargetFormsContainer | SettingsBar>;
 export type linkKeyT = chartT | 'parameters';
 export interface linkT {
     impact: singleLinkT[], angle: singleLinkT[],