Skip to content
Permalink
Browse files

Merge pull request #260 from Kadauchi/update-deps

Added theme.
  • Loading branch information
Kadauchi committed Dec 9, 2019
2 parents 8fbe046 + 8a50f3c commit 4d45f0e9ba4595bf88fa3f343fd57efe8875ec86
@@ -0,0 +1,3 @@
{
"typescript.tsdk": "node_modules\\typescript\\lib"
}

Large diffs are not rendered by default.

@@ -8,27 +8,27 @@
"build": "webextension-scripts build"
},
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.22",
"@fortawesome/free-solid-svg-icons": "^5.10.2",
"@fortawesome/react-fontawesome": "^0.1.4",
"@types/react": "^16.9.2",
"@types/react-dom": "^16.9.0",
"@types/react-redux": "^7.1.2",
"@fortawesome/fontawesome-svg-core": "^1.2.25",
"@fortawesome/free-solid-svg-icons": "^5.11.2",
"@fortawesome/react-fontawesome": "^0.1.8",
"@types/redux-logger": "^3.0.7",
"bootstrap": "^4.3.1",
"immer": "^3.2.0",
"react": "^16.9.0",
"react-bootstrap": "^1.0.0-beta.12",
"react-dom": "^16.9.0",
"react-redux": "^7.1.1",
"bootstrap": "^4.4.1",
"bootswatch": "^4.4.1",
"immer": "^5.0.0",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-redux": "^7.1.3",
"redux": "^4.0.4",
"redux-logger": "^3.0.6",
"typescript": "^3.6.4",
"webext-redux": "^2.1.4",
"webextension-scripts": "^0.5.4"
"webext-redux": "^2.1.6",
"webextension-scripts": "^0.6.0"
},
"devDependencies": {
"prettier": "^1.18.2"
"@types/react": "^16.9.15",
"@types/react-dom": "^16.9.4",
"@types/react-redux": "^7.1.5",
"prettier": "^1.19.1",
"typescript": "^3.7.3"
},
"eslintConfig": {
"extends": "eslint-config-webextension"
@@ -0,0 +1,19 @@
import React from 'react';

export interface SelectProps {
children: any;
label: string;
onChange: (event: React.ChangeEvent<HTMLSelectElement>) => void;
value: string;
}

export default function Select({ children, label, onChange, value }: SelectProps) {
return (
<div>
<label>{label}</label>
<select onChange={onChange} value={value}>
{children}
</select>
</div>
);
}
@@ -0,0 +1,44 @@
import React, { useEffect } from 'react';
import { useSelector } from 'react-redux';
import { selectOptions } from '../store/options/selectors';

export interface ThemeProps {
children: any;
}

export default function Theme({ children }: ThemeProps) {
const options = useSelector(selectOptions);

useEffect(() => {
switch (options.themes.mts) {
case 'cerulean':
case 'cosmo':
case 'cyborg':
case 'darkly':
case 'flatly':
case 'journal':
case 'litera':
case 'lumen':
case 'lux':
case 'materia':
case 'minty':
case 'pulse':
case 'sandstone':
case 'simplex':
case 'sketchy':
case 'slate':
case 'solar':
case 'spacelab':
case 'superhero':
case 'united':
case 'yeti':
require(`bootswatch/dist/${options.themes.mts}/bootstrap.min.css`);
break;
default:
require('bootstrap/dist/css/bootstrap.css');
break;
}
}, [options.themes.mts]);

return <>{children}</>;
}
@@ -1,32 +1,14 @@
import React, { useState } from 'react';
import Nav from 'react-bootstrap/Nav';
import Tab from 'react-bootstrap/Tab';
import React from 'react';

import { OptionsPane } from './OptionsPane';
import { ChangeLogPane } from './ChangeLogPane';
import { OptionsPane } from '../containers/OptionsPane';
import Theme from '../../../components/Theme';

export function App() {
const [key, setKey] = useState('options');

function onSelect(k: string) {
setKey(k);
}

return (
<Tab.Container activeKey={key} onSelect={onSelect}>
<Nav variant="pills">
<Nav.Item >
<Nav.Link eventKey="options">Options</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="change-log">Change Log</Nav.Link>
</Nav.Item>
</Nav>

<Tab.Content>
<OptionsPane />
<ChangeLogPane />
</Tab.Content>
</Tab.Container>
<Theme>
<OptionsPane />
<ChangeLogPane />
</Theme>
);
}
@@ -1,5 +1,4 @@
import React from 'react';
import Tab from 'react-bootstrap/Tab';

const versions = {
'3.0.0': {
@@ -10,7 +9,7 @@ const versions = {

export function ChangeLogPane() {
return (
<Tab.Pane className="p-1" eventKey="change-log">
<div>
{Object.entries(versions).map(([key, value]) => (
<div key={key}>
<h5>
@@ -23,6 +22,6 @@ export function ChangeLogPane() {
</ul>
</div>
))}
</Tab.Pane>
</div>
);
}
@@ -1,84 +1,95 @@
import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import Tab from 'react-bootstrap/Tab';

import { selectOptions } from '../../../store/options/selectors';
import { optionsUpdateScripts } from '../../../store/options/actions';
import { Checkbox } from '../../../components/Checkbox';
import Select from '../../../components/Select';

import { selectOptions } from '../../../store/options/selectors';
import { optionsScriptsToggle, optionsThemesSet } from '../../../store/options/actions';

export function OptionsPane() {
const dispatch = useDispatch();
const options = useSelector(selectOptions);

return (
<Tab.Pane className="p-1" eventKey="options">
<div>
<h5>Scripts</h5>

<Checkbox
label="Auto Accept Unchecker"
checked={options.scripts.autoAcceptUnchecker}
onChange={() => dispatch(optionsUpdateScripts('autoAcceptUnchecker'))}
onChange={() => dispatch(optionsScriptsToggle('autoAcceptUnchecker'))}
/>

<Checkbox
label="Block List"
checked={options.scripts.blockList}
onChange={() => dispatch(optionsUpdateScripts('blockList'))}
onChange={() => dispatch(optionsScriptsToggle('blockList'))}
/>

<Checkbox
label="Confirm Return Hit"
checked={options.scripts.confirmReturnHit}
onChange={() => dispatch(optionsUpdateScripts('confirmReturnHit'))}
onChange={() => dispatch(optionsScriptsToggle('confirmReturnHit'))}
/>

<Checkbox
label="Hit Exporter"
checked={options.scripts.hitExporter}
onChange={() => dispatch(optionsUpdateScripts('hitExporter'))}
onChange={() => dispatch(optionsScriptsToggle('hitExporter'))}
/>

<Checkbox
label="MTS HIT Tracker"
checked={options.scripts.mtsHitTracker}
onChange={() => dispatch(optionsUpdateScripts('mtsHitTracker'))}
onChange={() => dispatch(optionsScriptsToggle('mtsHitTracker'))}
/>

<Checkbox
label="Pagination Last Page"
checked={options.scripts.paginationLastPage}
onChange={() => dispatch(optionsUpdateScripts('paginationLastPage'))}
onChange={() => dispatch(optionsScriptsToggle('paginationLastPage'))}
/>

<Checkbox
label="Queue Info Enhancer"
checked={options.scripts.queueInfoEnhancer}
onChange={() => dispatch(optionsUpdateScripts('queueInfoEnhancer'))}
onChange={() => dispatch(optionsScriptsToggle('queueInfoEnhancer'))}
/>

<Checkbox
label="Rate Limit Reloader"
checked={options.scripts.rateLimitReloader}
onChange={() => dispatch(optionsUpdateScripts('rateLimitReloader'))}
onChange={() => dispatch(optionsScriptsToggle('rateLimitReloader'))}
/>

<Checkbox
label="Turkerview"
checked={options.scripts.turkerview}
onChange={() => dispatch(optionsUpdateScripts('turkerview'))}
onChange={() => dispatch(optionsScriptsToggle('turkerview'))}
/>

<Checkbox
label="Turkopticon"
checked={options.scripts.turkopticon}
onChange={() => dispatch(optionsUpdateScripts('turkopticon'))}
onChange={() => dispatch(optionsScriptsToggle('turkopticon'))}
/>

<Checkbox
label="Workspace Expander"
checked={options.scripts.workspaceExpander}
onChange={() => dispatch(optionsUpdateScripts('workspaceExpander'))}
onChange={() => dispatch(optionsScriptsToggle('workspaceExpander'))}
/>
</Tab.Pane>

<Select
label="MTurk Suite Theme"
onChange={(event) => dispatch(optionsThemesSet({ mts: event.currentTarget.value as any }))}
value={options.themes.mts}
>
<option value="default">default</option>
<option value="darkly">darkly</option>
<option value="flatly">flatly</option>
</Select>
</div>
);
}
@@ -1,5 +1,3 @@
import 'bootstrap/dist/css/bootstrap.css';

import React from 'react';
import ReactDom from 'react-dom';
import { Provider } from 'react-redux';
@@ -1,8 +1,15 @@
import { OptionsScriptsToggleAction } from './types';
import { OptionsScriptsToggleAction, OptionsThemesSetAction } from './types';

export function optionsUpdateScripts(payload: OptionsScriptsToggleAction['payload']): OptionsScriptsToggleAction {
export function optionsScriptsToggle(payload: OptionsScriptsToggleAction['payload']): OptionsScriptsToggleAction {
return {
type: 'OPTIONS_SCRIPTS_TOGGLE',
payload,
};
}

export function optionsThemesSet(payload: OptionsThemesSetAction['payload']) {
return {
type: 'OPTIONS_THEMES_SET',
payload,
};
}
@@ -8,6 +8,9 @@ export function optionsReducer(state = OptionsInitialState, action: OptionsActio
case 'OPTIONS_SCRIPTS_TOGGLE':
draftState.scripts[action.payload] = !draftState.scripts[action.payload];
break;
case 'OPTIONS_THEMES_SET':
draftState.themes = { ...draftState.themes, ...action.payload };
break;
}
});
}
@@ -12,13 +12,62 @@ export const OptionsInitialState = {
turkopticon: true,
workspaceExpander: true,
},
themes: {
mts: 'default',
mturk: 'default',
},
};

export type OptionsState = typeof OptionsInitialState;
export interface OptionsState {
scripts: {
autoAcceptUnchecker: boolean;
blockList: boolean;
confirmReturnHit: boolean;
hitExporter: boolean;
mtsHitTracker: boolean;
paginationLastPage: boolean;
queueInfoEnhancer: boolean;
rateLimitReloader: boolean;
turkerview: boolean;
turkopticon: boolean;
workspaceExpander: boolean;
};
themes: {
mts:
| 'default'
| 'cerulean'
| 'cosmo'
| 'cyborg'
| 'darkly'
| 'flatly'
| 'journal'
| 'litera'
| 'lumen'
| 'lux'
| 'materia'
| 'minty'
| 'pulse'
| 'sandstone'
| 'simplex'
| 'sketchy'
| 'slate'
| 'solar'
| 'spacelab'
| 'superhero'
| 'united'
| 'yeti';
mturk: 'default';
};
}

export interface OptionsScriptsToggleAction {
type: 'OPTIONS_SCRIPTS_TOGGLE';
payload: keyof OptionsState['scripts'];
}

export type OptionsActionTypes = OptionsScriptsToggleAction;
export interface OptionsThemesSetAction {
type: 'OPTIONS_THEMES_SET';
payload: Partial<OptionsState['themes']>;
}

export type OptionsActionTypes = OptionsScriptsToggleAction | OptionsThemesSetAction;

0 comments on commit 4d45f0e

Please sign in to comment.
You can’t perform that action at this time.