From 7512bb697f7bfa1850f73d3037b163daadf7c858 Mon Sep 17 00:00:00 2001 From: "Ilya Ig. Petrov" Date: Sat, 20 May 2017 04:20:35 -0700 Subject: [PATCH] Finish the view part of popup (almost) --- .../pages/options/src/components/App.js | 31 ++++++++++++----- .../pages/options/src/components/InfoLi.js | 19 ++++++++--- .../src/components/{Mods.js => ModList.js} | 15 +++----- .../options/src/components/PacChooser.js | 13 ++----- .../options/src/components/ProxyEditor.js | 34 +++++++++++++++++++ .../pages/options/src/components/TabPanel.js | 4 +-- .../pages/options/src/index.js | 2 +- 7 files changed, 81 insertions(+), 37 deletions(-) rename extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/components/{Mods.js => ModList.js} (86%) create mode 100644 extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/components/ProxyEditor.js 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 84ba3ae..8adf487 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 @@ -8,7 +8,8 @@ import getTabPanel from './TabPanel'; import getPacChooser from './PacChooser'; import getNotifications from './Notifications'; import getExceptions from './Exceptions'; -import getMods from './Mods'; +import getModList from './ModList'; +import getProxyEditor from './ProxyEditor'; import getFooter from './Footer'; @@ -20,7 +21,8 @@ export default function getApp(theState) { const PacChooser = getPacChooser(theState); const Notifications = getNotifications(theState); const Exceptions = getExceptions(theState); - const Mods = getMods(theState); + const ModList = getModList(theState); + const ProxyEditor = getProxyEditor(theState); const Footer = getFooter(theState); @@ -138,8 +140,9 @@ export default function getApp(theState) { return createElement('div', null, [ ...( props.flags.ifNotControlled ? [createElement(NotControlledWarning, props)] : [] ), + // WARNIGN ENDS. createElement(TabPanel, { - tabs:[ + tabs: [ { label: 'PAC-скрипт', content: createElement(PacChooser, props), @@ -150,18 +153,30 @@ export default function getApp(theState) { }, { label: 'Свои прокси', - content: "OwnProxies().render(this.props)", + content: createElement( + ModList, + Object.assign({}, props, { + category: 'ownProxies', + modToChildren: { + customProxyStringRaw: createElement(ProxyEditor), + }, + }) + ), }, { label: 'Модификаторы', - content: createElement(Mods, props), + content: createElement( + ModList, + Object.assign({}, props, {category: 'general'}) + ), }, { label: 'Уведомления', content: createElement(Notifications, props), - } - ] + }, + ], }), + // FOOTER. createElement(Footer, Object.assign({ status: this.state.status }, props)), ]); @@ -169,4 +184,4 @@ export default function getApp(theState) { } -};; +}; 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 ab59796..17bc2db 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 @@ -1,7 +1,7 @@ import Inferno from 'inferno'; import css from 'csjs-inject'; -export default function getInfoRow() { +export default function getInfoLi() { const scopedCss = css` /* CONTROL RAW = BUTTON + LINK */ @@ -23,6 +23,7 @@ export default function getInfoRow() { .infoRow { position: relative; + flex-wrap: wrap; } .rightBottomIcon { margin-left: 0.1em; @@ -80,6 +81,16 @@ export default function getInfoRow() { left: 75%; width: calc(25% + 0.6em); } + + /* CHILDREN */ + + input:not(:checked) ~ .children { + display: none; + } + .children { + flex-grow: 9999; + } + `; const camelToDash = (name) => name.replace(/([A-Z])/g, (_, p1) => '-' + p1.toLowerCase()); @@ -95,12 +106,11 @@ export default function getInfoRow() { }; - return function InfoRow(props) { + return function InfoLi(props) { props = Object.assign({}, { idPrefix: '', ifDashify: false, - htmlAfterLabel: '', }, props); const iddy = props.idPrefix + ( props.ifDashify ? camelToDash(props.conf.key) : props.conf.key ); @@ -116,7 +126,7 @@ export default function getInfoRow() { />
- {props.children} +  {props.nodeAfterLabel}
{props.conf.desc ? ( @@ -129,6 +139,7 @@ export default function getInfoRow() { : ( ) // Affects vertical align of flexbox items. ) } + {props.children && (
{props.children}
)} ); diff --git a/extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/components/Mods.js b/extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/components/ModList.js similarity index 86% rename from extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/components/Mods.js rename to extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/components/ModList.js index cd8a15b..8904a66 100644 --- a/extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/components/Mods.js +++ b/extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/components/ModList.js @@ -1,29 +1,22 @@ import Inferno from 'inferno'; import Component from 'inferno-component'; import createElement from 'inferno-create-element'; -import css from 'csjs-inject'; import getInfoLi from './InfoLi'; import getApplyMods from './ApplyMods'; -export default function getMods(theState) { +export default function getModList(theState) { const InfoLi = getInfoLi(theState); const ApplyMods = getApplyMods(theState); - return class Mods extends Component { - - getOrderedConfigs() { - - return this.props.apis.pacKitchen.getOrderedConfigs('general'); - - } + return class ModList extends Component { constructor(props) { super(props); this.state = { - orderedConfigs: this.getOrderedConfigs(), + orderedConfigs: props.apis.pacKitchen.getOrderedConfigs(props.category), ifChangesStashed: false, }; @@ -42,7 +35,7 @@ export default function getMods(theState) { newConfigs[index].value = !newConfigs[index].value; this.setState({orderedConfigs: newConfigs}); - }}/> + }}>{props.modToChildren && props.modToChildren[conf.key]} ) } diff --git a/extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/components/PacChooser.js b/extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/components/PacChooser.js index 4ca2737..1dcc388 100644 --- a/extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/components/PacChooser.js +++ b/extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/components/PacChooser.js @@ -124,18 +124,9 @@ export default function getPacChooser(theState) { name="pacProvider" checked={iddyToCheck === provConf.key} disabled={props.ifInputsDisabled} - > -   { evt.preventDefault(); updatePac(); }}>[обновить] - ) + nodeAfterLabel={ { evt.preventDefault(); updatePac(); }}>[обновить]} + />) ) - /**/ }
diff --git a/extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/components/ProxyEditor.js b/extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/components/ProxyEditor.js new file mode 100644 index 0000000..55517e9 --- /dev/null +++ b/extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/components/ProxyEditor.js @@ -0,0 +1,34 @@ +import Inferno from 'inferno'; +import css from 'csjs-inject'; + +export default function getProxyEditor(theState) { + + const scopedCss = css` + + .texty { + width: 100%; + max-width: 38.5em; /* ~418px, layout breaks if more */ + height: 7em; + margin-top: 0.3em; + font-size: 0.9em; + } + + `; + + const uiRaw = 'ui-proxy-string-raw'; + + return function ProxyEditor(props) { + + return (