migrate oprions to react [in progress] nsand#16 nsand#38

shapkarin · Jan 28, 2020 · 69e07bc · 69e07bc
1 parent c1bedd9
commit 69e07bc
Show file tree

Hide file tree

Showing 6 changed files with 124 additions and 53 deletions.
diff --git a/pages/options.html b/pages/options.html
@@ -50,36 +50,15 @@
 			margin-left: 33px;
 			color: #9e9e9e;
 		}
+		.theme-json {
+			width: 320px;
+			height: 100px;
+		}
 	</style>
 	<title>Tab Glutton Settings</title>
 </head>
 <body>
-	<nav class="navigation">
-		<img src="../img/tab_glutton_48.png" class="brand"><h1>Tab Glutton</h1>
-	</nav>
-	<main class="main">
-		<section>
-			<header class="heading">
-				<h2 class="headingText">Display</h2>
-			</header>
-			<ul class="options">
-				<li>
-					<div><input type="checkbox" id="showURL"><label class="label" for="showURL">Show tab URL</label></div>
-					<div class="optionTip">Shows the URL of the tab in addition to its title</div>
-				</li>
-				<li>
-					<div><input type="checkbox" id="collapse"><label class="label" for="collapse">Dense tab list</label></div>
-					<div class="optionTip">List tabs without a lot of space in between them</div>
-					<ul class="options">
-						<li>
-							<div><input type="checkbox" id="separate"><label class="label" for="separate">Show separators</label></div>
-							<div class="optionTip">Shows separators between each tab in the list</div>
-						</li>
-					</ul>
-				</li>
-			</ul>
-		</section>
-	</main>
-	<script src="../lib/options.js"></script>
+	<div id="options"></div>
+	<script src="../bundles/options.js"></script>
 </body>
 </html>
diff --git a/src/components/popup/popup.jsx b/src/components/popup/popup.jsx
@@ -11,37 +11,16 @@ import {
   Title,
   TabList
 } from './style.js';
+import themes from '../../themes';
 
 export default class Popup extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
       windows: [],
       filter: '',
-      mru: {},
-      theme: 'dark'
+      mru: {}
     };
-    // todo: move to preferences, user can select or create and input
-    this.themes = {
-      light: {
-        navigation: '#009688',
-        placeholder: 'rgba(255, 255, 255, 0.8)',
-        main: '#ffffff',
-        tab: {
-          title: '#212121',
-          link: '#9e9e9e'
-        }
-      },
-      dark: {
-        navigation: '#1e1e1e',
-        placeholder: 'rgba(255, 255, 255, 0.4)',
-        main: '#1c1c1c',
-        tab: {
-          title: '#e1e1e1',
-          link: '#a5a5a5'
-        }
-      }
-    }
   }
   componentDidMount() {
     chrome.runtime.sendMessage({action: 'mru'}, (mru) => {
@@ -76,7 +55,7 @@ export default class Popup extends React.Component {
   }
   render() {
     const {filter, windows, mru } = this.state;
-    const theme = this.themes[this.state.theme] || this.themes.light;
+    const theme = themes[window.localStorage.getItem('theme')] || themes.light;
     return (
       <ThemeProvider theme={theme}>
         <Navigation>
@@ -86,7 +65,6 @@ export default class Popup extends React.Component {
             placeholder="Search"
             onChange={this.filter.bind(this)}
           />
-          <button onClick={() => this.setState({theme: this.state.theme === 'light' ? 'dark' : 'light' })}>Change Theme</button>
         </Navigation>
         <Main>
           {

diff --git a/src/options/components/options.jsx b/src/options/components/options.jsx
@@ -0,0 +1,83 @@
+import React from 'react';
+
+import themes from '../../themes';
+
+export default class Options extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      showUrl: window.localStorage.showURL,
+      isSeparated: window.localStorage.getItem('isSeparated'),
+      isCollapsed: window.localStorage.getItem('isCollapsed') || 'true',
+      theme: window.localStorage.getItem('theme') || 'light'
+    };
+  }
+  changeTheme(event) {
+    this.setState({theme: event.target.value});
+    window.localStorage.setItem('theme', event.target.value);
+  }
+  componentDidMount() {}
+  render() {
+    return (
+      <div>
+        <nav className="navigation">
+          <img src="../img/tab_glutton_48.png" className="brand" />
+          <h1>Tab Glutton</h1>
+        </nav>
+        <main className="main">
+          <section>
+            <header className="heading">
+              <h2 className="headingText">Display</h2>
+            </header>
+            <ul className="options">
+              <li>
+                <div>
+                  <input type="checkbox" id="showURL" />
+                  <label className="label" for="showURL">
+                    Show tab URL
+                  </label>
+                </div>
+                <div className="optionTip">
+                  Shows the URL of the tab in addition to its title
+                </div>
+              </li>
+              <li>
+                <div>
+                  <input type="checkbox" id="collapse" />
+                  <label className="label" for="collapse">
+                    Dense tab list
+                  </label>
+                </div>
+                <div className="optionTip">
+                  List tabs without a lot of space in between them
+                </div>
+                <ul className="options">
+                  <li>
+                    <div>
+                      <input type="checkbox" id="separate" />
+                      <label className="label" for="separate">
+                        Show separators
+                      </label>
+                    </div>
+                    <div className="optionTip">
+                      Shows separators between each tab in the list
+                    </div>
+                  </li>
+                </ul>
+              </li>
+              <li>
+                <select value={this.state.theme} name="select" onChange={this.changeTheme}>
+                  {Object.keys(themes).map(theme => (
+                    <option value={theme} selected={this.state.theme === theme}>
+                      {theme}
+                    </option>
+                  ))}
+                </select>
+              </li>
+            </ul>
+          </section>
+        </main>
+      </div>
+    );
+  }
+}
diff --git a/src/options/index.jsx b/src/options/index.jsx
@@ -0,0 +1,6 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import Options from './components/options.jsx';
+
+ReactDOM.render(<Options/>, document.getElementById('options'));
diff --git a/src/themes.js b/src/themes.js
@@ -0,0 +1,24 @@
+export default {
+  light: {
+    navigation: '#009688',
+    placeholder: 'rgba(255, 255, 255, 0.8)',
+    main: '#ffffff',
+    tab: {
+      title: '#212121',
+      link: '#9e9e9e'
+    }
+  },
+  dark: {
+    navigation: '#1e1e1e',
+    placeholder: 'rgba(255, 255, 255, 0.4)',
+    main: '#1c1c1c',
+    tab: {
+      title: '#e1e1e1',
+      link: '#a5a5a5'
+    },
+    options: {
+      header: '',
+      main: ''
+    }
+  }
+};
diff --git a/webpack.config.js b/webpack.config.js
@@ -5,7 +5,8 @@ const plugins = [];
 
 module.exports = {
   entry: {
-    index: './src/index.jsx'
+    index: './src/index.jsx',
+    options: './src/options/index.jsx'
   },
   output: {
     path: path.join(__dirname, 'bundles'),