Commit

src/index.css

@@ -75,6 +75,10 @@ a.hashLink { font-size: 1.1em;}
 
 button { border: none; text-decoration: underline;}
 
+.settings-button {
+    margin-left: -20px;
+}
+
 .undo button { 
     opacity: 0.4;
     padding: 0;

src/shell/AppState.ts

@@ -34,6 +34,8 @@ export default class AppState {
     env: string;
     pageVisitsCount: number;
     donationClicked: boolean;
+    showSettings: boolean = false;
+    annotateTypes: boolean = false;
 
     constructor(persistData : PersistedAppData, env: string) {
         this.commandResults = [];
@@ -92,6 +94,16 @@ export default class AppState {
         this.triggerChanged();
     }
 
+    toggleShowSettins() {
+        this.showSettings = !this.showSettings;
+        this.triggerChanged();
+    }
+
+    toggleAnnotateTypes() {
+        this.annotateTypes = !this.annotateTypes;
+        this.triggerChanged();
+    }
+
     registerVisit() {
         this.pageVisitsCount++;
         this.triggerChanged();

src/shell/components/AppRoot.tsx

@@ -8,6 +8,9 @@ import DebugIndicators from './DebugIndicators';
 import hash from '../../core/hash';
 import TopLinks from './TopLinks';
 import Toggle from './Toggle';
+import SettingsPane from './SettingsPane';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faGear } from '@fortawesome/free-solid-svg-icons';
 
 
 type AppRootProps = {
@@ -64,11 +67,11 @@ export default class AppRoot extends React.Component<AppRootProps, AppRootState>
                     <div className="expressionInput-container">
                         <InputBox onCommandEntered={(input) => cmd.execute(input)} />
 
-                        <span className="configPnl">
-                            <Toggle elementId="emphasizeBytes" text="[em]" isOn={this.state.emphasizeBytes} onClick={() => this.toggleEmphasizeBytes()} title="Toggle Emphasize Bytes"  />                            
+                        <span className="settings-button">
+                           <button><FontAwesomeIcon icon={faGear} onClick={() => this.props.appState.toggleShowSettins()} /></button>                            
                         </span>
                     </div>
-
+                    {this.props.appState.showSettings ? <SettingsPane appState={this.props.appState} /> : null}
                     <div id="output">
                     {this.getResultViews()}
                     </div>

src/shell/components/SettingsPane.css

@@ -0,0 +1,28 @@
+.settings-container {
+    padding: 20px;
+    display: inline-block;
+}
+
+.settings-container h3 {
+    
+}
+
+.settings-container button {
+    text-decoration:  none;
+}
+
+.settings-container button svg {
+    margin-right: 3px;
+}
+
+.settings-container .description {
+    font-size: 0.85em;
+    padding: 0;
+    margin: 0;
+    padding-left: 30px;
+    opacity: 0.8;
+}
+
+.settings-container .setting {
+    margin-bottom: 10px;
+}

src/shell/components/SettingsPane.tsx

@@ -0,0 +1,39 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import './SettingsPane.css';
+import { faToggleOff, faToggleOn } from '@fortawesome/free-solid-svg-icons';
+import { useState } from 'react';
+import { type } from 'os';
+import AppState from '../AppState';
+
+type SettingsPaneProps = {
+    appState : AppState
+}
+
+function SettingsPane(props : SettingsPaneProps) {
+
+    const {appState} = props;    
+
+    return <div id="settings" className='settings-container'>
+        <div className="inner">
+            <h3>Settings</h3>
+            <div className='setting'>
+                <button onClick={() => appState.toggleEmphasizeBytes()}>
+                    <FontAwesomeIcon icon={appState.emphasizeBytes ? faToggleOn : faToggleOff} /> Emphasize Bytes
+                </button>
+                <p className='description'>
+                    {appState.emphasizeBytes ? "This setting is on" : "This settings is of"} 
+                </p>
+            </div>
+            <div className='setting'>
+                <button onClick={() => appState.toggleAnnotateTypes()}>
+                    <FontAwesomeIcon icon={appState.annotateTypes ? faToggleOn : faToggleOff} /> Annotate Data Types
+                </button>
+                <p className='description'>
+                    {appState.annotateTypes ? "Bit size is shown next to each number" : "Do not show what data types BitwiseCmd uses to represent every nubmer in the results section"} 
+                </p>
+            </div>
+        </div>
+    </div>
+}
+
+export default SettingsPane;