Almost done with react adoptation

BiwiseCmdPages/styles.css

@@ -1,110 +0,0 @@
-body { padding:0; margin:0; height: 100%; overflow: hidden; }
-html { height: 100% }
-
-.app-root { font-family: Verdana; font-size: 0.8em; margin: 0; padding: 20px 100px 0 100px; height: 100%; overflow: auto; }
-code { font-size: 1.2em; font-weight: bold; }
-
-.top-links { position: absolute; right: 10px; top: 10px; list-style-type: none; margin: 0 }
-.top-links li { float: left; }
-.top-links a { display: inline-block; padding: 10px 15px}
-.top-links .icon { margin-right: 5px; }
-
-.mono { font-family: monospace; font-size: 1.3em }
-.expressionInput { width: 500px; padding: 3px; border: solid 1px lightgray; }
-
-.result { margin: 10px 10px 30px; }
-.result .input { margin-bottom: 10px; }
-.result .content { padding-left: 10px}
-.result .cur { margin-right: 5px; }
-
-.hashLink { text-decoration: none; margin-left: 5px; visibility: hidden }
-.hashLink:hover { text-decoration: underline; margin-left: 5px; }
-.input:hover .hashLink { visibility: visible }
-
-.expression .label { font-weight:  bold; padding-right: 5px; text-align: right; }
-.expression .bin { letter-spacing: 3px; }
-.expression .flipable { cursor: pointer; opacity: 1 }
-.expression .flipable:hover { opacity: 0.8 }
-.expression .byte { margin: 0 3px; }
-.expression .flipable { cursor: pointer; opacity: 1 }
-.expression .flipable:hover { opacity: 0.8 }
-.expression-result td { border-top: dotted 1px gray; }
-.expression { font-size: 1.5em; font-family: monospace }
-.expression .prefix { font-weight: normal; display: none; font-size: 0.9em }
-.expression .other { font-size: 0.9em}
-.expression .sign { text-align: right}
-
-.hex .prefix { display: inline; }
-
-.help { padding: 10px; }
-.help ul { list-style-type: none; margin: 0; padding: 0;  }
-.help p { margin-top: 0 }
-
-.indicator { padding: 2px 5px;  font-family: monospace; font-size: 1.3em; background: transparent; border: none; cursor: pointer }
-.error { color: maroon; }
-
-#view { padding: 10px}
-
-.cur { color: lightgray; }
-
-.icon { width: 16px; height: 16px; display: inline-block; }
-.light .twitter { background: url('../img/twitter-light.png') }
-.dark .twitter { background: url('../img/twitter-dark.png') }
-
-.light .feedback { background: url('../img/feedback-light.png') }
-.dark .feedback { background: url('../img/feedback-dark.png') }
-
-.dark .github { background: url('../img/github-dark.png') }
-.light .github { background: url('../img/github-light.png') }
-
-/* Light */
-.light { background: #fafafa; }
-.light a, .light a:visited { color: #222; }
-.light .one { color: black; }
-.light .zero { color: #888; }
-.light .indicator { color: #ddd; }
-.light .on { color: #121212; }
-.light .prefix { color: #888}
-.light .other { color: #bbb }
-.light .hashLink, .light .hashLink:visited { color: #ddd }
-.light .hashLink:hover { color: #888 }
-.light ul.top-links li:hover { background: #ddd }
-
-/* Dark */
-.dark { background: #121212; color: white;}
-.dark .expression { color: white;}
-.dark .expressionInput { background: #121212; color: white; }
-.dark a, .dark a:visited { color: white; }
-.dark .indicator { color: #555; }
-.dark .on { color: white; }
-.dark .zero { color: #999;}
-.dark .prefix { color: #999}
-.dark  .other { color: #444;}
-.dark .hashLink, .dark .hashLink:visited { color: #333 }
-.dark .hashLink:hover { color: #999 }
-.dark ul.top-links li:hover { background: #333 }
-.dark .error { color: mediumvioletred}
-
-/* Top Links Shrink */
-@media (max-width: 800px) {
-
-    .top-links .link-text { display: none }
-}
-
-.social-container{ position:fixed; bottom:10px; right:10px }
-
-/* Remove margin space on body. Inline top links with header */
-@media (max-width: 700px) {
-    body { padding: 10px; }
-    .expressionInput { width: 500px; }
-}
-
-/* Further shrink */
-@media (max-width: 500px) {
-    .expressionInput { width: 350px; }
-    .top-links a { display: inline-block; padding: 5px 10px}
-}
-
-@media (max-width: 350px) {
-    .expressionInput { width: 200px; }
-}

package.json

@@ -4,9 +4,9 @@
   "description": "Bitwise Operations Console",
   "main": "index.js",
   "scripts": {
-    "build": "webpack -p && rm -rf ./BitwiseCmdPages/* && cp ./src/index.html ./BitwiseCmdPages && cp ./src/*.js ./BitwiseCmdPages && cp ./src/bundle.js.map ./BitwiseCmdPages && cp -r ./src/css ./BitwiseCmdPages && cp -r ./src/img ./BitwiseCmdPages && cp -r ./src/css ./BiwiseCmdPages",
-    "stage": "cp -r ./BitwiseCmdPages/* ../BitwiseCmdPages",
-    "stage:react": "cp -r ./BitwiseCmdPages/* ../BitwiseCmdPages/react",
+    "build": "webpack -p && rm -rf ./BitwiseCmdPages/* && cp ./src/index.html ./BitwiseCmdPages && cp ./src/*.js ./BitwiseCmdPages && cp ./src/bundle.js.map ./BitwiseCmdPages && cp -r ./src/css ./BitwiseCmdPages && cp -r ./src/img ./BitwiseCmdPages && cp -r ./src/css ./BitwiseCmdPages",
+    "stage": "npm run build && cp -r ./BitwiseCmdPages/* ../BitwiseCmdPages",
+    "stage:react": "npm run build && cp -r ./BitwiseCmdPages/* ../BitwiseCmdPages/react",
     "serv": "webpack-dev-server --content-base ./src",
     "e2e": "protractor ./tests/e2e.chrome.js --params.appUrl='http://localhost:8080/#clear'",
     "e2e:build": "protractor ./tests/e2e.chrome.js --params.appUrl='http://localhost:3000/#clear'",

src/app/appState.js

@@ -5,6 +5,10 @@ export default class AppState {
         this.handlers = [];
         this.uiTheme = persistData.uiTheme || 'dark';
         this.debugMode = false;
+
+        this.version = 1;
+        this.persistedVersion = persistData.version || 0.9;
+        this.wasOldVersion = this.version > this.persistedVersion;
     }
 
     addCommandResult(result) {
@@ -40,7 +44,8 @@ export default class AppState {
     getPersistData() {
         return {
             emphasizeBytes: this.emphasizeBytes,
-            uiTheme: this.uiTheme 
+            uiTheme: this.uiTheme,
+            version: this.version
         }
     }
 };

src/app/components/results/HelpResultView.jsx

@@ -12,6 +12,7 @@ export default class HelpResultView extends React.Component {
                                     <li><code>23 34</code> — type one or more numbers to see their binary representations</li>
                                     <li><code>clear</code> — clear output pane</li>
                                     <li><code>help</code> — display this help</li>
+                                    <li><code>whatsnew</code> — display changelog</li>
                                     <li><code>em</code> — turn On/Off Emphasize Bytes</li>
                                     <li><code>dark</code> — set Dark theme</li>
                                     <li><code>light</code> — set Light theme</li>

src/app/index.jsx

@@ -43,6 +43,10 @@ function executeStartupCommands() {
 
     var startupCommands = ['help', '1|2&6','1<<0x2a','2 4 8 16 32'];
 
+    if(appState.wasOldVersion) {
+        startupCommands = ["whatsnew"];
+    }
+
     if(hashArgs.commands.length > 0) {
         startupCommands = hashArgs.commands;
     }

src/index.html

@@ -15,7 +15,11 @@
         <meta property="og:image"         content="http://bitwisecmd.com/img/social-avatar.png" />
     </head>
     <body>
-        <div id="root">Ooops... Something went wrong ¯\_(ツ)_/¯</div>
+        <div id="root">
+            <p>Ooops... Something went wrong.</p>
+            <p>Either you have an old browser or I screwed something up ¯\_(ツ)_/¯</p>
+            <p>No worries! There is a still old version avaliable at <a href="http://bitwisecmd.com/old">http://bitwisecmd.com/old</a>.</p>
+        </div>
         <script src="bundle.js"></script>
         <script src="analytics.js"></script>