Commit

src/expression/components/BitwiseResultView.tsx

@@ -13,6 +13,7 @@ import loglevel from 'loglevel';
 type BitwiseResultViewProps = {
     expression: Expression;
     emphasizeBytes: boolean;
+    annotateTypes: boolean
 }
 
 type BitwiseResultViewState = {
@@ -43,12 +44,7 @@ export default class BitwiseResultView extends React.Component<BitwiseResultView
             return <div className='error'>Error: {text}</div>
         }
 
-        const showInfoColumn : boolean = model.items
-            .map(i => willInfoColumnBeVisible(i.expressionElement, model!.maxNumberOfBits, allowSignChange))
-            .filter(p => p == true)
-            .length > 0;
-
-        var rows = this.getRows(model!, showInfoColumn, allowSignChange);
+        var rows = this.getRows(model!, this.props.annotateTypes, allowSignChange);
 
         return <table className="expression">
             <tbody>
@@ -92,7 +88,7 @@ type ExpressionElementRowProps = {
     allowSignChange: boolean,
     expressionItem: ExpressionElement,
     onValueChanged: any,
-    showInfoColumn: boolean
+    showInfoColumn: boolean,
 }
 
 class ExpressionElementTableRow extends React.Component<ExpressionElementRowProps> {
@@ -221,25 +217,23 @@ getLabel(): string {
         const children = [];
         let title = `BitwiseCmd treats this number as ${op.value.maxBitSize}-bit integer`;
         let text = `${op.value.maxBitSize}-bit `;
+
         const signedStr = op.value.signed ? 'signed' : 'unsigned';
         const signedOther = op.value.signed ? 'usigned' : 'signed'; 
-        const signedTitle = `Click to change to ${signedOther} preserving the same bits`; 
+        const signedButtonTitle = `Click to change to ${signedOther} preserving the same bits`; 
 
         if(op.label.length > 0)
         {
             text += " (converted)";
-            title += ". This number was converted to facilitate bitwise operation with an operand of a different type";
+            title += ". This number was converted to facilitate bitwise operation with an operand of a different type.";
         }
 
         children.push(<span title={title} style={{cursor:"help"}}>{text.trim()}</span>);
                 
-        if(this.props.maxNumberOfBits >= op.value.maxBitSize)
-        {
-            if(allowSignChange)
-                children.push(<button className='accent1' title={signedTitle} onClick={() => this.onChangeSign()}>{signedStr}</button>);
-            else if(!op.value.signed)
-                children.push(<span className='accent1'> {signedStr}</span>)
-        }
+        if(allowSignChange)
+            children.push(<button className='accent1' title={signedButtonTitle} onClick={() => this.onChangeSign()}>{signedStr}</button>);
+        else if(!op.value.signed)
+            children.push(<span className='accent1'>{signedStr}</span>)
         
         return <React.Fragment>{children}</React.Fragment>
     }

src/expression/module.tsx

@@ -12,7 +12,7 @@ const expressionAppModule = {
             canHandle: (input:string) => parser.canParse(input),
             handle: function(c: CommandInput) {
                 var expr = parser.parse(c.input);
-                appState.addCommandResult(c.input, () => <BitwiseResultView expression={expr!} emphasizeBytes={appState.emphasizeBytes} />);
+                appState.addCommandResult(c.input, () => <BitwiseResultView expression={expr!} emphasizeBytes={appState.emphasizeBytes} annotateTypes={appState.annotateTypes} />);
             }
         });
     }

src/shell/AppState.ts

@@ -8,7 +8,8 @@ export type PersistedAppData = {
     version: number | null;
     debugMode: boolean | null;
     pageVisistsCount: number;
-    donationClicked: boolean
+    donationClicked: boolean;
+    annotateTypes: boolean
 }
 
 export type CommandResultView = {
@@ -26,9 +27,9 @@ export default class AppState {
     version: number = APP_VERSION;
     emphasizeBytes: boolean;
     debugMode: boolean = false;
-    uiTheme: string;
-    changeHandlers: AppStateChangeHandler[];
-    commandResults: CommandResultView[];
+    uiTheme: string = 'midnight';
+    changeHandlers: AppStateChangeHandler[] = [];
+    commandResults: CommandResultView[] = [];
     persistedVersion: number;
     wasOldVersion: boolean;
     env: string;
@@ -38,17 +39,16 @@ export default class AppState {
     annotateTypes: boolean = false;
 
     constructor(persistData : PersistedAppData, env: string) {
-        this.commandResults = [];
-        this.changeHandlers = [];
-        this.uiTheme = persistData.uiTheme || 'midnight';
+
         this.env = env;
 
-        this.emphasizeBytes = !!persistData.emphasizeBytes;
+    this.emphasizeBytes = !!persistData.emphasizeBytes;
         this.persistedVersion = persistData.version || 0.1;
         this.wasOldVersion = persistData.version != null && this.version > this.persistedVersion;
         this.debugMode = persistData.debugMode === true;
         this.pageVisitsCount = persistData.pageVisistsCount || 0;
         this.donationClicked = persistData.donationClicked;
+        this.annotateTypes = !!persistData.annotateTypes;
     }
 
     addCommandResult(input : string, view : ViewFactory) {
@@ -94,7 +94,7 @@ export default class AppState {
         this.triggerChanged();
     }
 
-    toggleShowSettins() {
+    toggleShowSettings() {
         this.showSettings = !this.showSettings;
         this.triggerChanged();
     }
@@ -124,7 +124,8 @@ export default class AppState {
             version: this.version,
             debugMode: this.debugMode,
             pageVisistsCount: this.pageVisitsCount,
-            donationClicked: this.donationClicked
+            donationClicked: this.donationClicked,
+            annotateTypes: this.annotateTypes
         }
     }
 };

src/shell/appStateStore.ts

@@ -8,7 +8,8 @@ const DEFAULT_DATA : PersistedAppData = {
     version: APP_VERSION,
     debugMode: false,
     pageVisistsCount: 0,
-    donationClicked: false
+    donationClicked: false,
+    annotateTypes: false
 }
 
 export default {

src/shell/components/AppRoot.tsx

@@ -47,10 +47,6 @@ export default class AppRoot extends React.Component<AppRootProps, AppRootState>
         return results;
     }
 
-    toggleEmphasizeBytes() {
-        this.props.appState.toggleEmphasizeBytes();
-    }
-
     render() {
 
         const enableNewUi = this.props.appState.env != 'prod' || true;
@@ -68,7 +64,7 @@ export default class AppRoot extends React.Component<AppRootProps, AppRootState>
                         <InputBox onCommandEntered={(input) => cmd.execute(input)} />
 
                         <span className="settings-button">
-                           <button><FontAwesomeIcon icon={faGear} onClick={() => this.props.appState.toggleShowSettins()} /></button>                            
+                           <button><FontAwesomeIcon icon={faGear} onClick={() => this.props.appState.toggleShowSettings()} /></button>                            
                         </span>
                     </div>
                     {this.props.appState.showSettings ? <SettingsPane appState={this.props.appState} /> : null}

src/shell/components/SettingsPane.css

@@ -3,10 +3,6 @@
     display: inline-block;
 }
 
-.settings-container h3 {
-    
-}
-
 .settings-container button {
     text-decoration:  none;
 }

src/shell/components/SettingsPane.tsx

@@ -1,6 +1,6 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import './SettingsPane.css';
-import { faToggleOff, faToggleOn } from '@fortawesome/free-solid-svg-icons';
+import { faClose, faToggleOff, faToggleOn } from '@fortawesome/free-solid-svg-icons';
 import { useState } from 'react';
 import { type } from 'os';
 import AppState from '../AppState';
@@ -21,7 +21,9 @@ function SettingsPane(props : SettingsPaneProps) {
                     <FontAwesomeIcon icon={appState.emphasizeBytes ? faToggleOn : faToggleOff} /> Emphasize Bytes
                 </button>
                 <p className='description'>
-                    {appState.emphasizeBytes ? "This setting is on" : "This settings is of"} 
+                    {appState.emphasizeBytes ? 
+                        "Each binary string is extended to contain at least 8 bits. White space is be added between each group of 8 bits which signify a bytes so it is easier to tell them apart." 
+                        : "Binary strings are not modified."} 
                 </p>
             </div>
             <div className='setting'>
@@ -29,9 +31,12 @@ function SettingsPane(props : SettingsPaneProps) {
                     <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"} 
+                    {appState.annotateTypes 
+                        ? "BitwiseCmd shows the integer size as well as indication whether the data type is signed or not. BitwiseCmd also allows to flip between signed/usigned versions of certain values preserving their binary representation." 
+                        : "Infomration about size of integers used in calculation is hidden."} 
                 </p>
             </div>
+           
         </div>
     </div>
 }