From 69e07bc528d0b6d6da070549918b07a253868331 Mon Sep 17 00:00:00 2001 From: Yury Shapkarin Date: Wed, 29 Jan 2020 00:01:28 +0300 Subject: [PATCH] migrate oprions to react [in progress] #16 #38 --- pages/options.html | 33 +++--------- src/components/popup/popup.jsx | 28 ++-------- src/options/components/options.jsx | 83 ++++++++++++++++++++++++++++++ src/options/index.jsx | 6 +++ src/themes.js | 24 +++++++++ webpack.config.js | 3 +- 6 files changed, 124 insertions(+), 53 deletions(-) create mode 100644 src/options/components/options.jsx create mode 100644 src/options/index.jsx create mode 100644 src/themes.js diff --git a/pages/options.html b/pages/options.html index b80b80c..6022455 100644 --- a/pages/options.html +++ b/pages/options.html @@ -50,36 +50,15 @@ margin-left: 33px; color: #9e9e9e; } + .theme-json { + width: 320px; + height: 100px; + } Tab Glutton Settings - -
-
-
-

Display

-
-
    -
  • -
    -
    Shows the URL of the tab in addition to its title
    -
    • -
  • -
    -
    List tabs without a lot of space in between them
    -
      -
    • -
      -
      Shows separators between each tab in the list
      -
      • -
    -
    • -
-
-
- +
+ diff --git a/src/components/popup/popup.jsx b/src/components/popup/popup.jsx index 5c6b620..9db577d 100644 --- a/src/components/popup/popup.jsx +++ b/src/components/popup/popup.jsx @@ -11,6 +11,7 @@ import { Title, TabList } from './style.js'; +import themes from '../../themes'; export default class Popup extends React.Component { constructor(props) { @@ -18,30 +19,8 @@ export default class Popup extends React.Component { 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 ( @@ -86,7 +65,6 @@ export default class Popup extends React.Component { placeholder="Search" onChange={this.filter.bind(this)} /> -
{ diff --git a/src/options/components/options.jsx b/src/options/components/options.jsx new file mode 100644 index 0000000..9ee2e45 --- /dev/null +++ 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 ( +
+ +
+
+
+

Display

+
+
    +
  • +
    + + +
    +
    + Shows the URL of the tab in addition to its title +
    +
    • +
  • +
    + + +
    +
    + List tabs without a lot of space in between them +
    +
      +
    • +
      + + +
      +
      + Shows separators between each tab in the list +
      +
      • +
    +
    • +
  • + +
    • +
+
+
+
+ ); + } +} diff --git a/src/options/index.jsx b/src/options/index.jsx new file mode 100644 index 0000000..2842a58 --- /dev/null +++ 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(, document.getElementById('options')); \ No newline at end of file diff --git a/src/themes.js b/src/themes.js new file mode 100644 index 0000000..9996b7c --- /dev/null +++ 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 index 13b97d6..27a37fa 100644 --- 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'),