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

Support dark and light theme

Browse Source
This commit is contained in:
Borys_Levytskyi
2016-11-27 16:13:19 +02:00
parent 1a3ff0c9b5
commit dbe3401ad5
5 changed files with 36 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/appState.js
View File

@@ -3,6 +3,7 @@ class AppState {
this.emphasizeBytes = true; this.emphasizeBytes = true;
this.commandResults = []; this.commandResults = [];
this.handlers = []; this.handlers = [];
this.uiTheme = 'dark'
} }
addCommandResult(result) { addCommandResult(result) {
@@ -29,6 +30,11 @@ class AppState {
h(); h();
} }
} }
setUiTheme(theme) {
this.uiTheme = theme;
this.triggerChanged();
}
}; };
var appState = new AppState(); var appState = new AppState();

4
src/app/commands.js
View File

@@ -34,10 +34,10 @@ export default {
cmdConfig.emphasizeBytes = !cmdConfig.emphasizeBytes; cmdConfig.emphasizeBytes = !cmdConfig.emphasizeBytes;
}, },
'dark': function() { 'dark': function() {
cmdConfig.theme = 'dark'; appState.setUiTheme('dark');
}, },
'light': function () { 'light': function () {
cmdConfig.theme = 'light'; appState.setUiTheme('light');
}, },
'about': function() { 'about': function() {
var aboutResult = document.querySelector('.result .aboutTpl'); var aboutResult = document.querySelector('.result .aboutTpl');

50
src/app/components/AppRoot.jsx
View File

@@ -12,33 +12,33 @@ export default class AppRoot extends React.Component {
} }
render() { render() {
var results = this.state.commandResults.map((r, i) => <DisplayResultView key={i} content={r} input={r.input} inputHash={r.inputHash} />); var results = this.state.commandResults.map((r, i) => <DisplayResultView key={i} content={r} input={r.input} inputHash={r.inputHash} />);
return <div> return <div className={`app-root ${this.state.uiTheme}`}>
<div className="header"> <div className="header">
<h1>Bitwise<span style={{color: "#c5c5c5"}}>Cmd</span></h1> <h1>Bitwise<span style={{color: "#c5c5c5"}}>Cmd</span></h1>
<ul className="top-links"> <ul className="top-links">
<li> <li>
<a href="https://github.com/BorisLevitskiy/BitwiseCmd"><i className="icon github">&nbsp;</i><span className="link-text">Project on GitHub</span></a> <a href="https://github.com/BorisLevitskiy/BitwiseCmd"><i className="icon github">&nbsp;</i><span className="link-text">Project on GitHub</span></a>
</li> </li>
<li> <li>
<a href="https://twitter.com/BitwiseCmd"><i className="icon twitter">&nbsp;</i><span className="link-text">Twitter</span></a> <a href="https://twitter.com/BitwiseCmd"><i className="icon twitter">&nbsp;</i><span className="link-text">Twitter</span></a>
</li> </li>
<li> <li>
<a href="mailto:&#098;&#105;&#116;&#119;&#105;&#115;&#101;&#099;&#109;&#100;&#064;&#103;&#109;&#097;&#105;&#108;&#046;&#099;&#111;&#109;?subject=Feedback"><i className="icon feedback">&nbsp;</i><span className="link-text">Send Feedback</span></a> <a href="mailto:&#098;&#105;&#116;&#119;&#105;&#115;&#101;&#099;&#109;&#100;&#064;&#103;&#109;&#097;&#105;&#108;&#046;&#099;&#111;&#109;?subject=Feedback"><i className="icon feedback">&nbsp;</i><span className="link-text">Send Feedback</span></a>
</li> </li>
</ul> </ul>
</div> </div>
<div className="expressionInput-container"> <div className="expressionInput-container">
<InputBox /> <InputBox />
<span className="configPnl"> <span className="configPnl">
<span id="emphasizeBytes" data-cmd="em" className="indicator on" title="Emphasize Bytes">[em]</span> <span id="emphasizeBytes" data-cmd="em" className="indicator on" title="Emphasize Bytes">[em]</span>
</span> </span>
</div> </div>
<div id="output"> <div id="output">
{results} {results}
</div> </div>
</div>; </div>;
} }
} }

3
src/css/styles.css
View File

@@ -1,6 +1,7 @@
body { padding:0; margin:0; height: 100%; overflow: hidden; } body { padding:0; margin:0; height: 100%; overflow: hidden; }
html { height: 100% } html { height: 100% }
#root { font-family: Verdana; font-size: 0.8em; margin: 0; padding: 20px 100px 0 100px; height: 100%; overflow: auto; }
.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; } code { font-size: 1.2em; font-weight: bold; }
.top-links { position: absolute; right: 10px; top: 10px; list-style-type: none; margin: 0 } .top-links { position: absolute; right: 10px; top: 10px; list-style-type: none; margin: 0 }

2
src/index.html
View File

@@ -9,7 +9,7 @@
<link rel="stylesheet" type="text/css" href="css/styles.css" /> <link rel="stylesheet" type="text/css" href="css/styles.css" />
</head> </head>
<body> <body>
<div id="root" class="dark">Doesn't work</div> <div id="root">Ooops... Something went wrong ¯\_(ツ)_/¯</div>
<script src="/bundle.js"></script> <script src="/bundle.js"></script>
</body> </body>
</html> </html>