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 ( -
- - {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 (