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

Midnight theme added

Browse Source
This commit is contained in:
boryslevytskyi
2017-05-20 14:18:23 +03:00
parent 65f73e4734
commit fb4c5c9a06
7 changed files with 62 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/appState.js
View File

@@ -6,8 +6,8 @@ export default class AppState {
this.uiTheme = persistData.uiTheme || 'dark';
this.debugMode = false;
this.version = 1;
this.persistedVersion = persistData.version || 0.9;
this.version = 2;
this.persistedVersion = persistData.version || 0.1;
this.wasOldVersion = persistData.version && this.version > this.persistedVersion;
}

3
src/app/commands.js
View File

@@ -35,6 +35,9 @@ export default {
'light': function () {
appState.setUiTheme('light');
},
'midnight': function() {
appState.setUiTheme('midnight');
},
'about': function(c) {
appState.addCommandResult(new AboutResult(c.input));
},

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

@@ -28,7 +28,7 @@ export default class AppRoot extends React.Component {
render() {
return <div className={`app-root ${this.state.uiTheme}`}>
<div className="header">
<h1>Bitwise<span style={{color: "#c5c5c5"}}>Cmd</span></h1>
<h1>Bitwise<span className="header-cmd">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>

8
src/app/components/misc/CommandLink.jsx Normal file
View File

@@ -0,0 +1,8 @@
import React from 'react';
import cmd from '../../cmd';
export default class CommandLink extends React.Component {
render() {
return <a href="javascript:void(0)" onClick={e => cmd.execute(this.props.command || this.props.text)}>{this.props.text}</a>
}
}

23
src/app/components/results/HelpResultView.jsx
View File

@@ -1,4 +1,6 @@
import React from 'react'
import React from 'react';
import cmd from '../../cmd';
import CommandLink from '../misc/CommandLink';
export default class HelpResultView extends React.Component {
render() {
@@ -8,15 +10,16 @@ export default class HelpResultView extends React.Component {
<div className="section">
<strong>Supported Commands</strong>
<ul>
<li><code>23 ^ 34</code> — type bitwise expression to see result in binary (only positive integers are supported now)</li>
<li><code>23 34</code> — type one or more numbers to see their binary representations</li>
<li><code>clear</code> — clear output pane</li>
<li><code>help</code> — display this help</li>
<li><code>whatsnew</code> — display changelog</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>
<li><code>about</code> — about the app</li>
<li><code><CommandLink text="23 | 34" /></code> — type bitwise expression to see result in binary (only positive integers are supported now)</li>
<li><code><CommandLink text="23 34" /></code> — type one or more numbers to see their binary representations</li>
<li><code><CommandLink text="clear" /></code> — clear output pane</li>
<li><code><CommandLink text="help" /></code> — display this help</li>
<li><code><CommandLink text="whatsnew" /></code> — display changelog</li>
<li><code><CommandLink text="em" /></code> — turn On/Off Emphasize Bytes</li>
<li><code><CommandLink text="light" /></code> — set Dark theme</li>
<li><code><CommandLink text="dark" /></code> — set Light theme</li>
<li><code><CommandLink text="midnight" /></code> — set Midnight theme</li>
<li><code><CommandLink text="about" /></code> — about the app</li>
</ul>
</div>
</div>

6
src/app/components/results/WhatsnewResultView.jsx
View File

@@ -1,11 +1,15 @@
import React from 'react'
import CommandLink from '../misc/CommandLink'
export default class WhatsnewResultView extends React.Component {
render() {
return <div className="changelog">
<h3>BitwiseCmd Changelog</h3>
<div className="item">
<p><strong>May 16th, 2017</strong> Complete rewrite using React. Old implementation is available at <a href="http://bitwisecmd.com/old">http://bitwisecmd.com/old</a>.</p>
<p><span className="soft">May 20th, 2017</span> New <CommandLink text="Midnight" /> theme added. </p>
</div>
<div className="item">
<p><span className="soft">May 16th, 2017</span> Complete rewrite using React. Old implementation is available at <a href="http://bitwisecmd.com/old">http://bitwisecmd.com/old</a>.</p>
<p>Please let me know if you have problems with this release by <a href="https://github.com/BorysLevytskyi/BitwiseCmd/issues">creating issue</a> in Github Repo.</p>
</div>
</div>;

32
src/css/styles.css
View File

@@ -4,6 +4,8 @@ html { height: 100% }
.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; }
.header-cmd { color: #c5c5c5 }
.top-links { position: absolute; right: 10px; top: 10px; list-style-type: none; margin: 0 }
.top-links li { float: left; }
.top-links a { display: inline-block; padding: 10px 15px}
@@ -43,6 +45,10 @@ code { font-size: 1.2em; font-weight: bold; }
.indicator { padding: 2px 5px; font-family: monospace; font-size: 1.3em; background: transparent; border: none; cursor: pointer }
.error { color: maroon; }
.soft { opacity: 0.7 }
.changelog .item { margin-top: 2em; }
#view { padding: 10px}
.cur { color: lightgray; }
@@ -50,12 +56,15 @@ code { font-size: 1.2em; font-weight: bold; }
.icon { width: 16px; height: 16px; display: inline-block; }
.light .twitter { background: url('../img/twitter-light.png') }
.dark .twitter { background: url('../img/twitter-dark.png') }
.midnight .twitter { background: url('../img/twitter-dark.png') }
.light .feedback { background: url('../img/feedback-light.png') }
.dark .feedback { background: url('../img/feedback-dark.png') }
.midnight .feedback { background: url('../img/feedback-dark.png') }
.dark .github { background: url('../img/github-dark.png') }
.light .github { background: url('../img/github-light.png') }
.dark .github { background: url('../img/github-dark.png') }
.midnight .github { background: url('../img/github-dark.png') }
/* Light */
.light { background: #fafafa; }
@@ -69,6 +78,7 @@ code { font-size: 1.2em; font-weight: bold; }
.light .hashLink, .light .hashLink:visited { color: #ddd }
.light .hashLink:hover { color: #888 }
.light ul.top-links li:hover { background: #ddd }
.light .error { color: #da586d }
/* Dark */
.dark { background: #121212; color: white;}
@@ -83,7 +93,25 @@ code { font-size: 1.2em; font-weight: bold; }
.dark .hashLink, .dark .hashLink:visited { color: #333 }
.dark .hashLink:hover { color: #999 }
.dark ul.top-links li:hover { background: #333 }
.dark .error { color: mediumvioletred}
.dark .error { color: #da586d}
/*
Midnight Theme
*/
.midnight .header-cmd { color: #85a0ad }
.midnight { background: #2c3e50; color: white }
.midnight .expression { color: white;}
.midnight .expressionInput { background: #2c3e50; color: white; border-color: #85a0ad }
.midnight a, .dark a:visited { color: white; }
.midnight .indicator { color: #85a0ad; }
.midnight .on { color: white; }
.midnight .zero { color: #85a0ad;}
.midnight .prefix { color: #85a0ad}
.midnight .other { color: #9FBAC7;}
.midnight .hashLink, .dark .hashLink:visited { color: #333 }
.midnight .hashLink:hover { color: #85a0ad }
.midnight ul.top-links li:hover { background: #132537 }
.midnight .error { color:#da586d}
/* Top Links Shrink */
@media (max-width: 800px) {