Fix input props and ProxyEditor css accordingly

This commit is contained in:
Ilya Ig. Petrov 2017-06-02 16:40:13 +05:00
parent 48943c77cd
commit 74d85965d2
2 changed files with 27 additions and 17 deletions

View File

@ -88,9 +88,6 @@ export default function getInfoLi() {
/* CHILDREN */ /* CHILDREN */
input:not(:checked) ~ .children {
display: none;
}
.children { .children {
flex-grow: 9999; flex-grow: 9999;
} }
@ -118,9 +115,21 @@ export default function getInfoLi() {
}, props); }, props);
const iddy = props.idPrefix + ( props.ifDashify ? camelToDash(props.conf.key) : props.conf.key ); const iddy = props.idPrefix + ( props.ifDashify ? camelToDash(props.conf.key) : props.conf.key );
const inputProps = {
id: iddy,
name: props.name,
type: props.type,
checked: props.checked,
onClick: props.onClick,
onChange: props.onChange,
class: props.class,
};
delete inputProps.children;
return ( return (
<li class={scopedCss.infoRow + ' horFlex'} style={ props.children && 'flex-wrap: wrap'}> <li class={scopedCss.infoRow + ' horFlex'} style={ props.children && 'flex-wrap: wrap'}>
{ createElement('input', Object.assign({}, props, {id: iddy})) } {createElement('input', inputProps)}
<div class={scopedCss.labelContainer}> <div class={scopedCss.labelContainer}>
<label for={iddy} dangerouslySetInnerHTML={{__html: props.conf.label}}></label> <label for={iddy} dangerouslySetInnerHTML={{__html: props.conf.label}}></label>
{props.nodeAfterLabel} {props.nodeAfterLabel}
@ -136,8 +145,8 @@ export default function getInfoLi() {
: (<span>&nbsp;</span>) // Affects vertical align of flexbox items. : (<span>&nbsp;</span>) // Affects vertical align of flexbox items.
) )
} }
{ props.checked && props.children } {/* props.checked && props.children */}
{/* props.checked && (<div class={scopedCss.children}>{props.children}</div>)*/} {props.checked && props.children && (<div class={scopedCss.children}>{props.children}</div>)}
</li> </li>
); );

View File

@ -7,10 +7,6 @@ export default function getProxyEditor(theState) {
const scopedCss = css` const scopedCss = css`
form.root {
width: 100%;
}
table.editor { table.editor {
border-collapse: collapse; border-collapse: collapse;
/*border-style: hidden;*/ /*border-style: hidden;*/
@ -19,6 +15,10 @@ export default function getProxyEditor(theState) {
background-color: #f3f5f6; background-color: #f3f5f6;
} }
.tabledEditor, .exportsEditor {
/* Empty, but not undefined. */
}
table.editor ::-webkit-input-placeholder { table.editor ::-webkit-input-placeholder {
color: #c9c9c9; color: #c9c9c9;
} }
@ -110,9 +110,10 @@ export default function getProxyEditor(theState) {
} }
/* LAST COLUMN: BUTTONS */ /* LAST COLUMN: BUTTONS */
table.editor tr > *:nth-last-child(1), table.editor tr > *:nth-last-child(1), /* Buttons */
table.editor tr > *:nth-last-child(2), table.tabledEditor tr > *:nth-last-child(2), /* Port */
table.editor tr.proxyRow > td:first-child { table.tabledEditor tr.proxyRow > td:first-child /* Type */
{
text-align: center; text-align: center;
padding: 0; padding: 0;
position: relative; position: relative;
@ -258,8 +259,8 @@ export default function getProxyEditor(theState) {
render(props) { render(props) {
return ( return (
<form onSubmit={linkEvent(this, this.handleSubmit)} class={scopedCss.root}> <form onSubmit={linkEvent(this, this.handleSubmit)}>
<table class={scopedCss.editor}> <table class={scopedCss.editor + ' ' + scopedCss.tabledEditor}>
<thead> <thead>
<tr> <tr>
<th colspan="2" class={scopedCss.shrink}>протокол</th> <th colspan="2" class={scopedCss.shrink}>протокол</th>
@ -453,8 +454,8 @@ export default function getProxyEditor(theState) {
const reset = linkEvent(this, this.resetState); const reset = linkEvent(this, this.resetState);
return ( return (
<form onSubmit={linkEvent(this, this.handleSubmit)} class={scopedCss.root}> <form onSubmit={linkEvent(this, this.handleSubmit)}>
<table class={scopedCss.editor}> <table class={scopedCss.editor + ' ' + scopedCss.exportsEditor}>
<thead> <thead>
<tr> <tr>
<th style="width: 100%"> <th style="width: 100%">