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) {
this.rootViewElement = rootViewElement;
this.set('rootView', rootViewElement)
this.initialize();
};

8
app/cmd/commands.js
View File

@@ -3,6 +3,8 @@ app.run(function() {
var cmd = app.get('cmd');
var cmdConfig = app.get('cmdConfig');
var rootView = app.get('rootView');
var shell = app.get('shell');
cmd.commands({
'help': function() {
@@ -18,6 +20,12 @@ app.run(function() {
},
'em': function() {
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 = {
compile: function (template) {

2
components/controllersFeature.js
View File

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

2
components/templatesFeature.js
View File

@@ -19,7 +19,7 @@
}
app.run(function() {
readTemplates(app.rootViewElement);
readTemplates(app.get('rootView'));
})
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 .bin { letter-spacing: 3px; }
.expression .byte { margin: 0 3px; }
.expression .one { color: black }
.expression .zero { color: #848586 }
.expression .result td { border-top: dotted 1px gray; }
.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 p { margin-top: 0 }
@@ -28,3 +27,11 @@ code { font-size: 1.2em; font-weight: bold; }
.error { color: maroon; }
#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" />
</head>
<body id="rootView">
<body id="rootView" class="dark">
<header>
<h1>Bitwise<span style="color: #c5c5c5;">Cmd</span></h1>
@@ -67,6 +67,8 @@
<li><code>clear</code> — clear output pane</li>
<li><code>help</code> — display this help</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>
</p>
</div>