New indicator style. It's also clickable

This commit is contained in:
Borys Levytskyi
2015-04-10 14:21:31 +03:00
parent 9920348d1a
commit 867cfc7fce
4 changed files with 19 additions and 5 deletions

View File

@@ -20,9 +20,7 @@ code { font-size: 1.2em; font-weight: bold; }
.help ul { list-style-type: none; margin: 0; padding: 0; }
.help p { margin-top: 0 }
.configPnl .indicator { font-size: 0.7em; background: gray; color: white; padding: 2px 5px; }
.configPnl .on { background: darkblue; }
.indicator { font-size: 0.7em; padding: 2px 5px; font-family: monospace; font-size: 1.3em; background: transparent; border: none; cursor: pointer }
.error { color: maroon; }
#view { padding: 10px}
@@ -31,9 +29,14 @@ code { font-size: 1.2em; font-weight: bold; }
.light { background: rgb(250, 250, 250); }
.light .one { color: black; }
.light .zero { color: rgb(105, 106, 107); }
.light .indicator { color: #ddd; }
.light .on { color: #121212; }
/* Dark */
.dark { background: #121212; color: white;}
.dark .expressionInput { background: black; color: white; }
.dark a, .dark a:visited { color: white; }
.dark .indicator { color: #555; }
.dark .on { color: white; }

View File

@@ -55,7 +55,7 @@
<input id="in" type="text" class="expressionInput mono" data-controller="expressionInputCtrl" placeholder="type expression like '1>>2' or 'help' "/>
<span data-controller="configPanelCtrl" class="configPnl">
<span id="emphasizeBytes" class="indicator on"><strong>em:</strong> Emphasize Bytes</span>
<span id="emphasizeBytes" data-cmd="em" class="indicator on" title="Emphasize Bytes">[em]</span>
</span>
</div>
</header>

View File

@@ -53,6 +53,7 @@ app.compose(function() {
app.controller('cmdController', function() {
var html = app.get('html');
var rootView = app.get('rootView');
return {
clear: function () {

View File

@@ -41,3 +41,13 @@ app.run(function() {
}
}
});
// Cmd controls
app.run(function () {
var controls = app.get('rootView').querySelectorAll('[data-cmd]');
Array.prototype.forEach.call(controls, function(el) {
el.addEventListener('click', function(e) {
app.get('cmd').execute(e.target.getAttribute('data-cmd'));
});
});
});