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

implemented support of dark and light theme

Browse Source
This commit is contained in:
Borys Levytskyi
2015-04-05 17:46:12 +03:00
parent 7f5134dd59
commit 1fca0dace6
8 changed files with 38 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
app/app.js
View File

@@ -13,6 +13,7 @@
app.bootstrap = function(rootViewElement) { app.bootstrap = function(rootViewElement) {
this.rootViewElement = rootViewElement; this.rootViewElement = rootViewElement;
this.set('rootView', rootViewElement)
this.initialize(); this.initialize();
}; };

8
app/cmd/commands.js
View File

@@ -3,6 +3,8 @@ app.run(function() {
var cmd = app.get('cmd'); var cmd = app.get('cmd');
var cmdConfig = app.get('cmdConfig'); var cmdConfig = app.get('cmdConfig');
var rootView = app.get('rootView');
var shell = app.get('shell');
cmd.commands({ cmd.commands({
'help': function() { 'help': function() {
@@ -18,6 +20,12 @@ app.run(function() {
}, },
'em': function() { 'em': function() {
cmdConfig.emphasizeBytes = !cmdConfig.emphasizeBytes; cmdConfig.emphasizeBytes = !cmdConfig.emphasizeBytes;
},
'dark': function() {
shell.setDarkTheme();
},
light: function () {
shell.setLightTheme();
} }
}); });

1
app/controllers.js
View File

@@ -93,7 +93,6 @@ app.compose(function() {
} }
} }
}); });
}); });

14
app/services.js
View File

@@ -32,6 +32,20 @@
} }
}); });
app.set('shell', function(){
var rootView = app.get('rootView');
return {
setDarkTheme: function() {
rootView.classList.remove('light');
rootView.classList.add('dark');
},
setLightTheme: function() {
rootView.classList.remove('dark');
rootView.classList.add('light');
}
}
});
/* /*
var template = { var template = {
compile: function (template) { compile: function (template) {

2
components/controllersFeature.js
View File

@@ -19,7 +19,7 @@
}; };
app.run(function(){ app.run(function(){
attachControllers(app.rootViewElement, app.di); attachControllers(app.get('rootView'), app.di);
}); });
function addControllerMixin(ctrl) { function addControllerMixin(ctrl) {

2
components/templatesFeature.js
View File

@@ -19,7 +19,7 @@
} }
app.run(function() { app.run(function() {
readTemplates(app.rootViewElement); readTemplates(app.get('rootView'));
}) })
function readTemplates(containerEl) { function readTemplates(containerEl) {

11
css/styles.css
View File

@@ -13,12 +13,11 @@ code { font-size: 1.2em; font-weight: bold; }
.expression .label { font-weight: bold; padding-right: 5px; text-align: right; } .expression .label { font-weight: bold; padding-right: 5px; text-align: right; }
.expression .bin { letter-spacing: 3px; } .expression .bin { letter-spacing: 3px; }
.expression .byte { margin: 0 3px; } .expression .byte { margin: 0 3px; }
.expression .one { color: black }
.expression .zero { color: #848586 } .expression .zero { color: #848586 }
.expression .result td { border-top: dotted 1px gray; } .expression .result td { border-top: dotted 1px gray; }
.expression { font-size: 1.5em; font-family: monospace } .expression { font-size: 1.5em; font-family: monospace }
.help { padding: 10px; background: #f8f8f8; } .help { padding: 10px; }
.help ul { list-style-type: none; margin: 0; padding: 0; } .help ul { list-style-type: none; margin: 0; padding: 0; }
.help p { margin-top: 0 } .help p { margin-top: 0 }
@@ -28,3 +27,11 @@ code { font-size: 1.2em; font-weight: bold; }
.error { color: maroon; } .error { color: maroon; }
#view { padding: 10px} #view { padding: 10px}
/* Light */
.light .one { color: black; }
.light .help { background: #f8f8f8 }
/* Dark */
.dark { background: black; color: white;}
.dark .help { background: #222 }
.dark .expressionInput { background: black; color: white; }

4
index.html
View File

@@ -34,7 +34,7 @@
<link rel="stylesheet" type="text/css" href="css/styles.css" /> <link rel="stylesheet" type="text/css" href="css/styles.css" />
</head> </head>
<body id="rootView"> <body id="rootView" class="dark">
<header> <header>
<h1>Bitwise<span style="color: #c5c5c5;">Cmd</span></h1> <h1>Bitwise<span style="color: #c5c5c5;">Cmd</span></h1>
@@ -67,6 +67,8 @@
<li><code>clear</code> — clear output pane</li> <li><code>clear</code> — clear output pane</li>
<li><code>help</code> — display this help</li> <li><code>help</code> — display this help</li>
<li><code>em</code> — Turn On/Off Emphasize Bytes</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>
</ul> </ul>
</p> </p>
</div> </div>