Prepare release of 5th version of the app

src/AppRoot.tsx

@@ -6,6 +6,7 @@ import cmd from './core/cmd';
 import CommandResult from './models/CommandResult';
 import log from 'loglevel';
 import Indicators from './components/Indicators';
+import CommandLink from './components/CommandLink';
 
 type AppRootProps = {
     appState: AppState,    

src/components/results/HelpResultView.css

@@ -0,0 +1,5 @@
+.help .section {margin-bottom:10px;}
+.help .panel-container {overflow: hidden;}
+.help .left-panel {float:left; margin-right: 20px;}
+.help .right-panel {float:left;}
+.help .section-title {opacity: 0.8;}

src/components/results/HelpResultView.tsx

@@ -1,16 +1,29 @@
 import React from 'react';
 import CommandLink from '../CommandLink';
+import './HelpResultView.css';
 
 function HelpResultView() {
     
         return <div className="help helpResultTpl">
-                        <div style={{overflow: "hidden"}}>
+                        <div className="panel-container">
-                            <div style={{float: "left", "marginRight": "20px"}}>
+                            <div className="left-panel">
                                 <div className="section">
-                                    <strong>Supported Commands</strong>
+                                    <strong className="section-title">Bitiwse Calculation Commands</strong>
                                 <ul>
                                     <li><code><CommandLink text="23 | 34" /></code> — type bitwise expression to see result in binary (only positive integers are supported now)</li>
                                     <li><code><CommandLink text="23 34" /></code> — type one or more numbers to see their binary representations</li>
+                                </ul>
+                                </div>
+                                <div className="section">
+                                    <strong className="section-title">Ip Address Commands</strong>
+                                <ul>
+                                    <li><code><CommandLink text="127.0.0.1" /></code> — enter single or multiple ip addresses (separated by space) to see their binary represenation</li>
+                                    <li><code><CommandLink text="192.168.0.1/8" /></code> — subnet mask notiations are support as well</li>
+                                </ul>
+                                </div>
+                                <div className="section">
+                                    <strong className="section-title">Other Commands</strong>
+                                <ul>
                                     <li><code><CommandLink text="clear" /></code> — clear output pane</li>
                                     <li><code><CommandLink text="help" /></code> — display this help</li>
                                     <li><code><CommandLink text="whatsnew" /></code> — display changelog</li>
@@ -23,9 +36,9 @@ function HelpResultView() {
                                 </ul>
                                 </div>
                             </div>
-                            <div style={{"float":"left"}}>
+                            <div className="right-panel">
                                 <div className="section">
-                                    <strong>Supported Bitwise Operations</strong><br/>
+                                    <strong className="section-title">Supported Bitwise Operations</strong><br/>
                                     <small>
                                         <a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">
                                             as implemented in JavaScript engine

src/components/results/IpAddressView.css

@@ -1 +1 @@
-.ip-address-info { padding-top: 1em; font-size: 0.85em; vertical-align: middle;}
+.ip-address-info { padding-top: 1em; font-size: 0.85em; vertical-align: middle; display: none;}

src/components/results/IpAddressView.tsx

@@ -21,7 +21,7 @@ export class IpAddressView extends React.Component<IpAddressViewProps>
         return <table className="expression">
             <tbody>
                 {this.props.ipAddresses.map((ip, i) => <tr key={i}>
-                        <td>{ip.toString()}</td>
+                        <td><strong>{ip.toString()}</strong></td>
                         <td>
                             {this.bin(ip.firstByte, 1, ip)}.{this.bin(ip.secondByte, 2, ip)}.{this.bin(ip.thirdByte, 3, ip)}.{this.bin(ip.fourthByte, 4, ip)}
                         </td>

src/components/results/WhatsNewResultView.css

@@ -0,0 +1,2 @@
+.changelog .item { margin-top: 2em; }
+.changelog .item-new .date { font-weight: bold; text-decoration: underline;}

src/components/results/WhatsNewResultView.tsx

@@ -1,11 +1,22 @@
-import React from 'react'
+import React from 'react';
-import CommandLink from '../CommandLink'
+import CommandLink from '../CommandLink';
+import './WhatsNewResultView.css';
 
 function WhatsnewResultView() {
     
         return <div className="changelog">
                     <h3>Changelog</h3>
                     <div className="item item-new">
+                        <p><span className="soft date">Jun 14th, 2021</span> <br/>
+                        Added support of ip addresses and subnet masks notatioans. Try them out: 
+                        </p>
+                        <ul>
+                            <li>Single IP address <CommandLink text="127.0.0.1" /></li>
+                            <li>Multiple IP addresses and subnet mask notations <CommandLink text="127.0.0.1 192.168.0.0/24" /></li>
+                        </ul>
+                        
+                    </div>
+                    <div className="item">
                         <p><span className="soft date">Jun 6th, 2017</span> <br/>
                         Added <code><CommandLink text="guid" /></code> command. Use it for generating v4 GUIDs </p>
                     </div>

src/core/AppState.ts

@@ -1,5 +1,7 @@
 import log from 'loglevel';
 
+const APP_VERSION = 5;
+
 export type PersistedAppData = {
     emphasizeBytes: boolean;
     uiTheme: string;
@@ -11,7 +13,7 @@ export type AppStateChangeHandler = (state: AppState) => void;
 
 export default class AppState {
 
-    version: number = 4;
+    version: number = APP_VERSION;
     emphasizeBytes: boolean;
     debugMode: boolean = false;
     uiTheme: string;

src/index.css

@@ -47,8 +47,6 @@ code { font-size: 1.2em; font-weight: bold; }
 
 .soft { opacity: 0.7 }
 
-.changelog .item { margin-top: 2em; }
-
 #view { padding: 10px}
 
 .cur { color: lightgray; }

src/index.tsx

@@ -43,7 +43,7 @@ function setupLogger(env: Env) {
 function executeStartupCommands() {
     var hashArgs = hash.getArgs(window.location.hash);
 
-    var startupCommands = ['help', '1|2&6','1 2 4 8 16 32 0b1000000 0x80'];
+    var startupCommands = ['help', '127.0.0.1 192.168.0.0/8', '1|2&6','4 0b1000000 0x80'];
 
     if(appState.wasOldVersion) {
         startupCommands = ["whatsnew"];