mirrors/BitwiseCmd
1
0
Fork 0
mirror of https://github.com/BorysLevytskyi/BitwiseCmd.git synced 2025-12-10 06:52:05 +01:00
Code Issues Projects Releases Wiki Activity

Update help section

Browse Source
This commit is contained in:
BorysLevytskyi
2023-05-06 09:33:01 +02:00
parent 0295a18583
commit 4806025618
5 changed files with 79 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
package.json
View File

@@ -26,8 +26,8 @@
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build & npx http-server ./build -p 3030",
"release": "react-scripts build & gh-pages -d build --message Release",
"build": "react-scripts build && npx http-server ./build -p 3030",
"release": "react-scripts build && gh-pages -d build --message Release",
"deploy": "gh-pages -d build --message Release",
"test": "react-scripts test",
"eject": "react-scripts eject",

3
src/index.css
View File

@@ -13,6 +13,7 @@ html { height: 100% }
code { font-size: 1.2em; font-weight: bold; }
.icon { margin-right: 5px; vertical-align: middle; }
.header-cmd { color: #c5c5c5 }
.mono { font-family: monospace; font-size: 1.3em }
@@ -46,7 +47,7 @@ code { font-size: 1.2em; font-weight: bold; }
.help { padding: 10px; }
.help ul { list-style-type: none; margin: 0; padding: 0; }
.help p { margin-top: 0 }
.help p { margin-top: 0.5em }
.indicator { padding: 0px 5px; background: transparent; border: none; cursor: pointer; vertical-align: middle; }
.error { color: maroon; }

140
src/shell/components/HelpResultView.tsx
View File

@@ -1,75 +1,81 @@
import React from 'react';
import CommandLink from '../../core/components/CommandLink';
import './HelpResultView.css';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
function HelpResultView() {
return <div className="help helpResultTpl">
<div className="panel-container">
<div className="left-panel">
<div className="section">
<strong className="section-title soft">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 soft">IP Address & Networking 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>
<li><code><CommandLink text="subnet 192.168.24.1/14" /></code> — display information about subnet (network address, broadcast address, etc.)</li>
<li><code><CommandLink text="vpc 192.168.24.1/24" /></code> — see how VPC network address bits are divided between VPC address, Subnets and Hosts</li>
</ul>
</div>
<div className="section">
<strong className="section-title soft">Color Theme Commands</strong>
<ul>
<li><code><CommandLink text="light" /></code> — set Light color theme</li>
<li><code><CommandLink text="dark" /></code> — set Dark color theme</li>
<li><code><CommandLink text="midnight" /></code> — set Midnight color theme</li>
</ul>
</div>
<div className="section">
<strong className="section-title soft">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>
<li><code><CommandLink text="em" /></code> — turn On/Off Emphasize Bytes</li>
<li><code><CommandLink text="about" /></code> — about the app</li>
<li><code><CommandLink text="guid" /></code> — generate <a href="https://en.wikipedia.org/wiki/Universally_unique_identifier#Version_4_.28random.29">v4</a> GUID</li>
</ul>
</div>
</div>
<div className="right-panel">
<div className="section">
<strong className="section-title soft">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 of your browser
</a>
</small>
<ul>
<li><code>&amp;</code> — bitwise AND</li>
<li><code>|</code> — bitwise inclusive OR</li>
<li><code>^</code> — bitwise exclusive XOR</li>
<li><code>~</code> — bitwise NOT</li>
<li><code>&lt;&lt;</code> — left shift</li>
<li><code>&gt;&gt;</code> — sign propagating right shift</li>
<li><code>&gt;&gt;&gt;</code> — zero-fill right shift</li>
</ul>
</div>
<div className="section">
<strong className="section-title soft">Tip</strong>
<p>
You can click on bits to flip them in number inputs (e.g. <CommandLink text="2 4" />) or IP addresses (e.g. <CommandLink text="192.168.0.0/8"/>)
</p>
</div>
</div>
</div>
</div>;
return <div className="help helpResultTpl">
<div className="panel-container">
<div className="left-panel">
<div className="section">
<strong className="section-title soft">Bitwise Calculation Commands</strong>
<ul>
<li><code><CommandLink text="23 | 34" /></code> — type bitwise expression to see the result in binary</li>
<li><code><CommandLink text="23 34" /></code> — type one or more numbers to see their binary representations</li>
</ul>
<p>
<FontAwesomeIcon icon={faInfoCircle} className='icon' />
<u>Negative</u> 64-bit numbers (lower than int32 min value of <code>-2,147,483,647</code>) are not supported.
</p>
</div>
<div className="section">
<strong className="section-title soft">IP Address & Networking Commands</strong>
<ul>
<li><code><CommandLink text="127.0.0.1" /></code> — enter a single or multiple IP addresses (separated by space) to see their binary representation</li>
<li><code><CommandLink text="192.168.0.1/8" /></code> — subnet mask notations are supported as well</li>
<li><code><CommandLink text="subnet 192.168.24.1/14" /></code> — display information about a subnet (network address, broadcast address, etc.)</li>
<li><code><CommandLink text="vpc 192.168.24.1/24" /></code> — see how VPC network address bits are divided between VPC address, Subnets, and Hosts</li>
</ul>
</div>
<div className="section">
<strong className="section-title soft">Color Theme Commands</strong>
<ul>
<li><code><CommandLink text="light" /></code> — set the Light color theme</li>
<li><code><CommandLink text="dark" /></code> — set the Dark color theme</li>
<li><code><CommandLink text="midnight" /></code> — set the Midnight color theme</li>
</ul>
</div>
<div className="section">
<strong className="section-title soft">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>
<li><code><CommandLink text="em" /></code> — turn On/Off Emphasize Bytes</li>
<li><code><CommandLink text="about" /></code> — about the app</li>
<li><code><CommandLink text="guid" /></code> — generate <a href="https://en.wikipedia.org/wiki/Universally_unique_identifier#Version_4_.28random.29">v4</a> GUID</li>
</ul>
</div>
</div>
<div className="right-panel">
<div className="section">
<strong className="section-title soft">Supported Bitwise Operations</strong><br />
<small>
<a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">
as implemented in the JavaScript engine of your browser. If it cannot do it, BitwiseCmd cannot do it.
</a>
</small>
<ul>
<li><code>&amp;</code> — bitwise AND</li>
<li><code>|</code> — bitwise inclusive OR</li>
<li><code>^</code> — bitwise exclusive XOR</li>
<li><code>~</code> — bitwise NOT</li>
<li><code>&lt;&lt;</code> — left shift</li>
<li><code>&gt;&gt;</code> — sign propagating right shift</li>
<li><code>&gt;&gt;&gt;</code> — zero-fill right shift</li>
</ul>
</div>
<div className="section">
<strong className="section-title soft">Tip</strong>
<p>
You can click on bits to flip them in number inputs (e.g. <CommandLink text="2 4" />) or IP addresses (e.g. <CommandLink text="192.168.0.0/8" />)
</p>
</div>
</div>
</div>
</div>;
}
export default HelpResultView;

2
src/shell/components/InputBox.tsx
View File

@@ -29,7 +29,7 @@ export default class InputBox extends React.Component<IInputBoxProps> {
onKeyUp={e => this.onKeyUp(e)}
onKeyDown={e => this.onKeyDown(e)}
className="expressionInput mono"
placeholder="type expression like '1>>2' or 'help' "
placeholder="type an expression like '1>>2' or 'help' "
autoComplete="off"/>;
}

3
src/shell/components/TopLinks.css
View File

@@ -1,5 +1,4 @@
.top-links { position: absolute; right: 2em; top: 1em; list-style-type: none; margin: 0 }
.top-links li { float: left; }
.top-links a { display: inline-block; padding: 5px 10px}
.top-links .icon { margin-right: 5px; vertical-align: middle; }
.top-links a { display: inline-block; padding: 5px 10px}