diff --git a/extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/components/App.js b/extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/components/App.js
index 8adf487..a4da828 100644
--- a/extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/components/App.js
+++ b/extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/components/App.js
@@ -3,27 +3,13 @@ import Component from 'inferno-component';
import createElement from 'inferno-create-element';
import getNotControlledWarning from './NotControlledWarning';
-
-import getTabPanel from './TabPanel';
-import getPacChooser from './PacChooser';
-import getNotifications from './Notifications';
-import getExceptions from './Exceptions';
-import getModList from './ModList';
-import getProxyEditor from './ProxyEditor';
-
+import getMain from './Main';
import getFooter from './Footer';
export default function getApp(theState) {
const NotControlledWarning = getNotControlledWarning(theState);
- const TabPanel = getTabPanel(theState);
-
- const PacChooser = getPacChooser(theState);
- const Notifications = getNotifications(theState);
- const Exceptions = getExceptions(theState);
- const ModList = getModList(theState);
- const ProxyEditor = getProxyEditor(theState);
-
+ const Main = getMain(theState);
const Footer = getFooter(theState);
return class App extends Component {
@@ -140,43 +126,7 @@ export default function getApp(theState) {
return createElement('div', null, [
...( props.flags.ifNotControlled ? [createElement(NotControlledWarning, props)] : [] ),
- // WARNIGN ENDS.
- createElement(TabPanel, {
- tabs: [
- {
- label: 'PAC-скрипт',
- content: createElement(PacChooser, props),
- },
- {
- label: 'Исключения',
- content: createElement(Exceptions, props),
- },
- {
- label: 'Свои прокси',
- content: createElement(
- ModList,
- Object.assign({}, props, {
- category: 'ownProxies',
- modToChildren: {
- customProxyStringRaw: createElement(ProxyEditor),
- },
- })
- ),
- },
- {
- label: 'Модификаторы',
- content: createElement(
- ModList,
- Object.assign({}, props, {category: 'general'})
- ),
- },
- {
- label: 'Уведомления',
- content: createElement(Notifications, props),
- },
- ],
- }),
- // FOOTER.
+ createElement(Main, props),
createElement(Footer, Object.assign({ status: this.state.status }, props)),
]);
diff --git a/extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/components/InfoLi.js b/extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/components/InfoLi.js
index 17bc2db..597fd1e 100644
--- a/extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/components/InfoLi.js
+++ b/extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/components/InfoLi.js
@@ -123,6 +123,8 @@ export default function getInfoLi() {
id={iddy}
onClick={props.onClick}
disabled={props.disabled}
+ data-category={props['data-category']}
+ data-index={props['data-index']}
/>
diff --git a/extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/components/Main.js b/extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/components/Main.js
new file mode 100644
index 0000000..b707ade
--- /dev/null
+++ b/extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/components/Main.js
@@ -0,0 +1,163 @@
+import Inferno, {linkEvent} from 'inferno';
+import Component from 'inferno-component';
+import createElement from 'inferno-create-element';
+
+import getTabPanel from './TabPanel';
+import getPacChooser from './PacChooser';
+import getExceptions from './Exceptions';
+import getModList from './ModList';
+import getProxyEditor from './ProxyEditor';
+import getApplyMods from './ApplyMods';
+import getNotifications from './Notifications';
+
+export default function getMain(theState) {
+
+ const TabPanel = getTabPanel(theState);
+
+ const PacChooser = getPacChooser(theState);
+ const Exceptions = getExceptions(theState);
+ const ModList = getModList(theState);
+ const ProxyEditor = getProxyEditor(theState);
+ const ApplyMods = getApplyMods(theState);
+ const Notifications = getNotifications(theState);
+
+ return class Main extends Component {
+
+ constructor(props) {
+
+ super(props);
+ this.state = {
+ ifModsChangesStashed: false,
+ catToOrderedMods: {
+ 'general': props.apis.pacKitchen.getOrderedConfigs('general'),
+ 'ownProxies': props.apis.pacKitchen.getOrderedConfigs('ownProxies'),
+ },
+ };
+
+ }
+
+ getAllMods() {
+
+ return [].concat(...Object.keys(this.state.catToOrderedMods).map((cat) =>
+ this.state.catToOrderedMods[cat]
+ ))
+
+ }
+
+ handleModApply(that) {
+
+ const modsMutated = that.props.apis.pacKitchen.getPacMods();
+ const newMods = that.getAllMods().reduce((_, conf) => {
+
+ modsMutated[conf.key] = conf.value;
+ return modsMutated;
+
+ });
+ that.props.funs.conduct(
+ 'Применяем настройки...',
+ (cb) => that.props.apis.pacKitchen.keepCookedNowAsync(newMods, cb),
+ 'Настройки применены.',
+ () => that.setState({ifModsChangesStashed: false})
+ );
+
+ }
+
+ handleModCheck(that, event) {
+
+ const checkbox = event.target;
+ const [tCat, tIndex] = [checkbox.dataset.category, parseInt(checkbox.dataset.index)];
+ const oldCats = that.state.catToOrderedMods;
+ const newCats = Object.keys(that.state.catToOrderedMods).reduce((acc, cat) => {
+
+ if (cat !== tCat) {
+ acc[cat] = oldCats[cat];
+ } else {
+ acc[cat] = oldCats[cat].map(
+ (conf, index) => tIndex === index
+ ? Object.assign({}, conf, {value: !conf.value})
+ : conf
+ );
+ }
+ return acc;
+
+ }, {});
+
+ that.setState({ catToOrderedMods: newCats });
+
+ }
+
+ handleModChange(that) {
+
+ that.setState({ifModsChangesStashed: true});
+
+ }
+
+ render(props) {
+
+ const applyModsEl = createElement(ApplyMods, Object.assign({}, props,
+ {
+ disabled: !this.state.ifModsChangesStashed || props.ifInputsDisabled,
+ onClick: linkEvent(this, this.handleModApply),
+ }
+ ));
+
+ const modsHandlers = {
+ onChange: linkEvent(this, this.handleModChange),
+ onClick: linkEvent(this, this.handleModCheck),
+ };
+
+ return createElement(TabPanel, {
+ tabs: [
+ {
+ label: 'PAC-скрипт',
+ content: createElement(PacChooser, props),
+ key: 'pacScript',
+ },
+ {
+ label: 'Исключения',
+ content: createElement(Exceptions, props),
+ key: 'exceptions',
+ },
+ {
+ label: 'Свои прокси',
+ content: createElement(
+ ModList,
+ Object.assign({}, props, {
+ orderedConfigs: this.state.catToOrderedMods['ownProxies'],
+ childrenOfMod: {
+ customProxyStringRaw: createElement(ProxyEditor),
+ },
+ }, modsHandlers)
+ ),
+ key: 'ownProxies',
+ },
+ {
+ label: 'Модификаторы',
+ content: createElement(
+ ModList,
+ Object.assign({}, props, {
+ orderedConfigs: this.state.catToOrderedMods['general'],
+ }, modsHandlers)
+ ),
+ key: 'mods',
+ },
+ {
+ content: applyModsEl,
+ key: 'applyMods',
+ },
+ {
+ label: 'Уведомления',
+ content: createElement(Notifications, props),
+ key: 'notifications',
+ },
+ ],
+ alwaysShownWith: {
+ 'applyMods': ['ownProxies', 'mods'],
+ },
+ });
+
+ }
+
+ }
+
+};
diff --git a/extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/components/ModList.js b/extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/components/ModList.js
index e14fc40..972833f 100644
--- a/extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/components/ModList.js
+++ b/extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/components/ModList.js
@@ -1,71 +1,23 @@
import Inferno from 'inferno';
-import Component from 'inferno-component';
-import createElement from 'inferno-create-element';
-
import getInfoLi from './InfoLi';
-import getApplyMods from './ApplyMods';
export default function getModList(theState) {
const InfoLi = getInfoLi(theState);
- const ApplyMods = getApplyMods(theState);
- return class ModList extends Component {
+ return function ModList(props) {
- constructor(props) {
-
- super(props);
- this.state = {
- orderedConfigs: props.apis.pacKitchen.getOrderedConfigs(props.category),
- ifChangesStashed: false,
- };
-
- }
-
- render(props) {
-
- return (
-
- { this.setState({ifChangesStashed: true}); }}>
- {
- this.state.orderedConfigs.map((conf, index) =>
- {
-
- const newConfigs = this.state.orderedConfigs.map((c) => Object.assign({}, c)); // Shallow.
- newConfigs[index].value = !newConfigs[index].value;
- this.setState({orderedConfigs: newConfigs});
-
- }}>{props.modToChildren && props.modToChildren[conf.key]}
- )
- }
-
- {createElement(ApplyMods, Object.assign({}, props,
- {
- disabled: !this.state.ifChangesStashed || props.ifInputsDisabled,
- onClick: () => {
-
- const oldMods = this.props.apis.pacKitchen.getPacMods();
- const newMods = this.state.orderedConfigs.reduce((acc, conf) => {
-
- acc[conf.key] = conf.value;
- return acc;
-
- }, oldMods);
-
- this.props.funs.conduct(
- 'Применяем настройки...',
- (cb) => this.props.apis.pacKitchen.keepCookedNowAsync(newMods, cb),
- 'Настройки применены.',
- () => this.setState({ifChangesStashed: false})
- );
-
- }
- }
- ))}
-
- );
-
- }
+ return (
+
+ {
+ props.orderedConfigs.map((conf, index) => (
+
+ {props.childrenOfMod && props.childrenOfMod[conf.key]}
+ )
+ )
+ }
+
+ );
};
diff --git a/extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/components/TabPanel.js b/extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/components/TabPanel.js
index 56787e3..7683b08 100644
--- a/extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/components/TabPanel.js
+++ b/extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/components/TabPanel.js
@@ -6,9 +6,9 @@ export default function getTabPannel({ flags, baseCss }) {
const scopedCss = css`
- .tabContainer {
- padding: 0.6em 0 1em;
- }
+ /*.tabContainer {
+ padding: 0;
+ }*/
.tabContainer li label {
display: inline-block; /* Needed for ::first-letter below. */
}
@@ -16,9 +16,9 @@ export default function getTabPannel({ flags, baseCss }) {
text-transform: uppercase;
}
:root.ifInsideOptionsPage .tabContainer {
- padding-bottom: 0.6em;
+ padding: 0.3em 0 0.4em 0;
}
- :root.ifInsideOptionsPage nav.mainNav > div:not(:last-child) {
+ :root.ifInsideOptionsPage nav.mainNav > section:not(:last-child):not([data-key=ownProxies]):not([data-key=mods]) {
border-bottom: 1px solid var(--cr-options-headline);
}
@@ -98,6 +98,11 @@ export default function getTabPannel({ flags, baseCss }) {
/* LABELS ends. */
+ .mainNav {
+ padding-top: 0.6em;
+ padding-bottom: 1em;
+ }
+
`;
if (flags.ifInsideOptionsPage) {
@@ -117,12 +122,15 @@ export default function getTabPannel({ flags, baseCss }) {
render(props) {
+ const indexedTabs = props.tabs.filter((tab) => tab.label);
+ const chosenTabKey = indexedTabs[this.state.chosenTabIndex].key;
+
return (