Add theming support and theme switch in Settings #576

cryptonomex · Feb 19, 2016 · a54ada5 · a54ada5
1 parent 1ff0b8f
commit a54ada5
Show file tree

Hide file tree

Showing 18 changed files with 990 additions and 1,771 deletions.
diff --git a/dl/src/stores/SettingsStore.js b/dl/src/stores/SettingsStore.js
@@ -19,7 +19,8 @@ class SettingsStore {
             faucet_address: "https://bitshares.openledger.info",
             unit: CORE_ASSET,
             showSettles: false,
-            walletLockTimeout: 60 * 10
+            walletLockTimeout: 60 * 10,
+            themes: "darkTheme"
         });
 
         this.viewSettings =  Immutable.Map({
@@ -82,6 +83,11 @@ class SettingsStore {
             showSettles: [
                 {translate: "yes"},
                 {translate: "no"}
+            ],
+            themes: [
+                "darkTheme",
+                "lightTheme",
+                "olDarkTheme"
             ]
             // confirmMarketOrder: [
             //     {translate: "confirm_yes"},

diff --git a/web/app/App.jsx b/web/app/App.jsx
@@ -34,6 +34,7 @@ import AssetContainer from "./components/Blockchain/AssetContainer";
 import Transaction from "./components/Blockchain/Transaction";
 import CreateAccount from "./components/Account/CreateAccount";
 import AccountStore from "stores/AccountStore";
+import SettingsStore from "stores/SettingsStore";
 import IntlActions from "actions/IntlActions";
 import MobileMenu from "components/Layout/MobileMenu";
 import LoadingIndicator from "./components/LoadingIndicator";
@@ -77,16 +78,21 @@ class App extends React.Component {
 
     constructor() {
         super();
-        this.state = {loading: true, synced: false};
+        this.state = {
+            loading: true,
+            synced: false,
+            theme: SettingsStore.getState().settings.get("themes")};
     }
 
     componentWillUnmount() {
         NotificationStore.unlisten(this._onNotificationChange);
+        SettingsStore.unlisten(this._onSettingsChange);
     }
 
     componentDidMount() { 
         try {
             NotificationStore.listen(this._onNotificationChange.bind(this));
+            SettingsStore.listen(this._onSettingsChange.bind(this));
 
             Promise.all([
                 AccountStore.loadDbData()            
@@ -122,13 +128,23 @@ class App extends React.Component {
         if (this.refs.notificationSystem) this.refs.notificationSystem.addNotification(notification);
     }
 
+    _onSettingsChange() {
+        let {settings} = SettingsStore.getState();
+        if (settings.get("themes") !== this.state.theme) {
+            this.setState({
+                theme: settings.get("themes")
+            });
+        }
+    }
+
     // /** Non-static, used by passing notificationSystem via react Component refs */
     // _addNotification(params) {
     //     console.log("add notification:", this.refs, params);
     //     this.refs.notificationSystem.addNotification(params);
     // }
 
     render() {
+        console.log("app state:", this.state);
         if (this.props.location.pathname === "/init-error") { // temporary, until we implement right offline mode
             return (
                 <div className="grid-frame vertical">
@@ -155,12 +171,14 @@ class App extends React.Component {
             );
         }
         return (
-            <div>
-                {content}
-                <NotificationSystem ref="notificationSystem" allowHTML={true}/>
-                <TransactionConfirm/>
-                <WalletUnlockModal/>
-                <BrowserSupportModal ref="browser_modal"/>
+            <div className={this.state.theme}>
+                <div id="content-wrapper">
+                    {content}
+                    <NotificationSystem ref="notificationSystem" allowHTML={true}/>
+                    <TransactionConfirm/>
+                    <WalletUnlockModal/>
+                    <BrowserSupportModal ref="browser_modal"/>
+                </div>
             </div>
         );
 

diff --git a/web/app/assets/colors.js b/web/app/assets/colors.js
@@ -0,0 +1,29 @@
+module.exports = {
+    olDarkTheme: {
+        bidColor: "#50D2C2",
+        askColor: "#E3745B",
+        callColor: "#BBBF2B",
+        positiveColor: "#6EC105",
+        negativeColor: "#E1424A",
+        primaryText: "#e0e0e0",
+        lightTextColor: "#fff"
+    },
+    darkTheme: {
+        bidColor: "#50D2C2",
+        askColor: "#E3745B",
+        callColor: "#BBBF2B",
+        positiveColor: "#6EC105",
+        negativeColor: "#E1424A",
+        primaryText: "#e0e0e0",
+        lightTextColor: "#fff"
+    },
+    lightTheme: {
+        bidColor: "#258A14",
+        askColor: "#EA340B",
+        callColor: "#BBBF2B",
+        positiveColor: "#6EC105",
+        negativeColor: "#E1424A",
+        primaryText: "#3F2E55",
+        lightTextColor: "#3F2E55"
+    }
+}
diff --git a/web/app/assets/index-dev.html b/web/app/assets/index-dev.html
@@ -22,9 +22,9 @@
     </style>
 </head>
 <body>
-<main id="content">
-    <h1 class="centerDiv" style="">Loading...</h1>
-</main>
+    <main id="content">
+        <h1 class="centerDiv" style="">Loading...</h1>
+    </main>
 <script src="/app.js" charset="utf-8"></script>
 </body>
 </html>
diff --git a/web/app/assets/index.html b/web/app/assets/index.html
@@ -36,9 +36,9 @@
     </script>
 </head>
 <body>
-<main id="content">
-    <h1 class="centerDiv" style="">Loading...</h1>
-</main>
+    <main id="content">
+        <h1 class="centerDiv" style="">Loading...</h1>
+    </main>
 <script src="vendors.js" charset="utf-8"></script>
 <script src="app.js" charset="utf-8"></script>
 <script src="1.app.js" charset="utf-8"></script>

diff --git a/web/app/assets/locales/locale-en.js b/web/app/assets/locales/locale-en.js
@@ -629,7 +629,11 @@
         showSettles: "Show settle orders in depth chart",
         yes: "Yes",
         no: "No",
-        walletLockTimeout: "Wallet auto-lock time (seconds)"
+        walletLockTimeout: "Wallet auto-lock time (seconds)",
+        themes: "Theme",
+        "darkTheme": "Dark theme",
+        "lightTheme": "Light theme",
+        "olDarkTheme": "Openledger dark"
     },
     footer: {
         title: "Graphene",

diff --git a/web/app/assets/stylesheets/app.scss b/web/app/assets/stylesheets/app.scss
@@ -8,6 +8,6 @@
 
 @import "layout/all";
 
-@import "themes/dark-theme";
+@import "themes/all";
 
 @import "shame";
diff --git a/web/app/assets/stylesheets/themes/_all.scss b/web/app/assets/stylesheets/themes/_all.scss
@@ -0,0 +1,3 @@
+@import "dark-theme";
+@import "light-theme";
+@import "ol-dark-theme";