From ae39fef6bdfa97cf64d6481ca7c4bc81a58d433a Mon Sep 17 00:00:00 2001
From: Borys Levytskyi <blevtisky@yandex.ru>
Date: Sat, 11 Apr 2015 20:08:32 +0300
Subject: [PATCH] Implemented support of modes in views

---
 src/css/styles.css       |  4 ++++
 src/index.html           | 10 +++++-----
 src/js/app/modelViews.js | 11 ++++++-----
 3 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/src/css/styles.css b/src/css/styles.css
index 0b1a231..9225028 100644
--- a/src/css/styles.css
+++ b/src/css/styles.css
@@ -15,6 +15,8 @@ code { font-size: 1.2em; font-weight: bold; }
 .expression .byte { margin: 0 3px; }
 .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 }
+.hex .prefix { display: inline; }
 
 .help { padding: 10px; }
 .help ul { list-style-type: none; margin: 0; padding: 0;  }
@@ -31,6 +33,7 @@ code { font-size: 1.2em; font-weight: bold; }
 .light .zero { color: #888; }
 .light .indicator { color: #ddd; }
 .light .on { color: #121212; }
+.light .prefix { color: #888}
 
 /* Dark */
 .dark { background: #121212; color: white;}
@@ -39,5 +42,6 @@ code { font-size: 1.2em; font-weight: bold; }
 .dark .indicator { color: #555; }
 .dark .on { color: white; }
 .dark .zero { color: #999;}
+.dark .prefix { color: #999}
 
 
diff --git a/src/index.html b/src/index.html
index 62eb7be..4fdb30a 100644
--- a/src/index.html
+++ b/src/index.html
@@ -118,11 +118,11 @@
 <script data-template="shiftExpressionView" type="text/template">
     <table class="expression">
         <tr>
-            <td class="label">{operand1}</td>
+            <td class="label {mode}"><span class="prefix">0x</span>{operand1Str}</td>
             <td class="bin">{operand1Binary}</td>
         </tr>
         <tr class="result">
-            <td class="label">{operand1}{sign}{operand2}={result}</td>
+            <td class="label {mode}"><span class="prefix">0x</span>{operand1Str}{sign}<span class="prefix">0x</span>{operand2}=<span class="prefix">0x</span>{resultStr}</td>
             <td class="bin">{resultBinary}</td>
         </tr>
     </table>
@@ -132,17 +132,17 @@
     <table class="expression">
         <tr>
             <td></td>
-            <td class="label">{operand1Str}</td>
+            <td class="label {mode}"><span class="prefix">0x</span>{operand1Str}</td>
             <td class="bin">{operand1Binary}</td>
         </tr>
         <tr>
             <td>{sign}</td>
-            <td class="label">{operand2Str}</td>
+            <td class="label {mode}"><span class="prefix">0x</span>{operand2Str}</td>
             <td class="bin">{operand2Binary}</td>
         </tr>
         <tr class="result">
             <td>=</td>
-            <td class="label">{resultStr}</td>
+            <td class="label {mode}"><span class="prefix">0x</span>{resultStr}</td>
             <td class="bin">{resultBinary}</td>
         </tr>
     </table>
diff --git a/src/js/app/modelViews.js b/src/js/app/modelViews.js
index 81fd7fb..4872166 100644
--- a/src/js/app/modelViews.js
+++ b/src/js/app/modelViews.js
@@ -13,7 +13,7 @@ app.compose(function () {
             var maxLen = getBinaryLength([expr.operand1, expr.operand2, result]);
 
             var model = Object.create(expr);
-
+            model.mode = cmdConfig.mode;
             model.resultStr = formatter.formatString(result, cmdConfig.mode);
             model.operand1Str = formatter.formatString(expr.operand1, cmdConfig.mode);
             model.operand2Str = formatter.formatString(expr.operand2, cmdConfig.mode);
@@ -24,7 +24,7 @@ app.compose(function () {
             console.log(model);
 
             var templateId = /<<|>>/.test(model.sign) ? 'shiftExpressionView' : 'binaryExpressionView';
-            var template = app.template(templateId)
+            var template = app.template(templateId);
 
             var el = template.render(model);
             colorizeBits(el);
@@ -35,19 +35,20 @@ app.compose(function () {
     app.modelView(app.models.BitwiseNumbers, {
         renderView: function(model) {
             var maxLen = getBinaryLength(model.numbers);
-            var table = html.element('<table class="expression"></table>');
+            var table = html.element('<table class="expression {mode}"></table>');
 
             model.numbers.forEach(function(n){
 
                 var row = table.insertRow();
                 var decCell = row.insertCell();
 
-                decCell.className = 'label';
+                decCell.classList.add('label');
+                decCell.classList.add(cmdConfig.mode);
 
                 var binCell = row.insertCell();
                 binCell.className = 'bin';
 
-                decCell.textContent = formatter.formatString(n, cmdConfig.mode);
+                decCell.innerHTML = html.template('<span class="prefix">0x</span>{n}', { n: formatter.formatString(n, cmdConfig.mode) });
                 binCell.textContent = formatter.padLeft(formatter.formatString(n), maxLen);
             });