mirrors/BitwiseCmd
1
0
Fork 0
mirror of https://github.com/BorysLevytskyi/BitwiseCmd.git synced 2025-12-10 06:52:05 +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.commandResults = [];
this.handlers = [];
this.uiTheme = 'dark'
}
addCommandResult(result) {
@@ -29,6 +30,11 @@ class AppState {
h();
}
}
setUiTheme(theme) {
this.uiTheme = theme;
this.triggerChanged();
}
};
var appState = new AppState();

4
src/app/commands.js
View File

@@ -34,10 +34,10 @@ export default {
cmdConfig.emphasizeBytes = !cmdConfig.emphasizeBytes;
},
'dark': function() {
cmdConfig.theme = 'dark';
appState.setUiTheme('dark');
},
'light': function () {
cmdConfig.theme = 'light';
appState.setUiTheme('light');
},
'about': function() {
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() {
var results = this.state.commandResults.map((r, i) => <DisplayResultView key={i} content={r} input={r.input} inputHash={r.inputHash} />);
return <div>
<div className="header">
<h1>Bitwise<span style={{color: "#c5c5c5"}}>Cmd</span></h1>
<ul className="top-links">
<li>
<a href="https://github.com/BorisLevitskiy/BitwiseCmd"><i className="icon github">&nbsp;</i><span className="link-text">Project on GitHub</span></a>
</li>
<li>
<a href="https://twitter.com/BitwiseCmd"><i className="icon twitter">&nbsp;</i><span className="link-text">Twitter</span></a>
</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>
</li>
</ul>
</div>
return <div className={`app-root ${this.state.uiTheme}`}>
<div className="header">
<h1>Bitwise<span style={{color: "#c5c5c5"}}>Cmd</span></h1>
<ul className="top-links">
<li>
<a href="https://github.com/BorisLevitskiy/BitwiseCmd"><i className="icon github">&nbsp;</i><span className="link-text">Project on GitHub</span></a>
</li>
<li>
<a href="https://twitter.com/BitwiseCmd"><i className="icon twitter">&nbsp;</i><span className="link-text">Twitter</span></a>
</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>
</li>
</ul>
</div>
<div className="expressionInput-container">
<InputBox />
<div className="expressionInput-container">
<InputBox />
<span className="configPnl">
<span id="emphasizeBytes" data-cmd="em" className="indicator on" title="Emphasize Bytes">[em]</span>
</span>
</div>
<span className="configPnl">
<span id="emphasizeBytes" data-cmd="em" className="indicator on" title="Emphasize Bytes">[em]</span>
</span>
</div>
<div id="output">
{results}
</div>
</div>;
<div id="output">
{results}
</div>
</div>;
}
}

3
src/css/styles.css
View File

@@ -1,6 +1,7 @@
body { padding:0; margin:0; height: 100%; overflow: hidden; }
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; }
.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" />
</head>
<body>
<div id="root" class="dark">Doesn't work</div>
<div id="root">Ooops... Something went wrong ¯\_(ツ)_/¯</div>
<script src="/bundle.js"></script>
</body>
</html>