schnabu/maputnik
1
0
Fork 0
mirror of https://github.com/a-nyx/maputnik-with-pmtiles.git synced 2024-12-27 09:45:29 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Added back in action buttons to input label/fieldset

Browse source
This commit is contained in:
orangemug 2020-06-10 10:59:44 +01:00
parent f3906c8dd8
commit 40579c3e0c
4 changed files with 21 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/components/Block.jsx
View file

@ -72,6 +72,9 @@ export default class Block extends React.Component {
<div className="maputnik-input-block-label"> <div className="maputnik-input-block-label">
{this.props.label} {this.props.label}
</div> </div>
<div className="maputnik-input-block-action">
{this.props.action}
</div>
<div className="maputnik-input-block-content" ref={el => this._blockEl = el}> <div className="maputnik-input-block-content" ref={el => this._blockEl = el}>
{this.props.children} {this.props.children}
</div> </div>

7
src/components/Fieldset.jsx
View file

@ -14,7 +14,12 @@ export default class Fieldset extends React.Component {
const {props} = this; const {props} = this;
return <div className="maputnik-input-block" role="group" aria-labelledby={this._labelId}> return <div className="maputnik-input-block" role="group" aria-labelledby={this._labelId}>
<div className="maputnik-input-block-label" id={this._labelId}>{props.label}</div> <div className="maputnik-input-block-label" id={this._labelId}>
{props.label}
</div>
<div className="maputnik-input-block-action">
{this.props.action}
</div>
<div className="maputnik-input-block-content"> <div className="maputnik-input-block-content">
{props.children} {props.children}
</div> </div>

2
src/components/SpecField.jsx
View file

@ -33,7 +33,7 @@ export default class SpecField extends React.Component {
TypeBlock = Block; TypeBlock = Block;
} }
return <TypeBlock label={props.label}> return <TypeBlock label={props.label} action={props.action}>
<InputSpec {...props} /> <InputSpec {...props} />
</TypeBlock> </TypeBlock>
} }

12
src/styles/_components.scss
View file

@ -168,11 +168,21 @@
color: $color-lowgray; color: $color-lowgray;
display: inline-block; display: inline-block;
user-select: none; user-select: none;
width: 50%; width: 32%;
vertical-align: top; vertical-align: top;
font-size: 12px; font-size: 12px;
} }
&-action {
color: $color-lowgray;
display: inline-block;
user-select: none;
width: 18%;
vertical-align: top;
font-size: 12px;
text-align: right;
}
&-content { &-content {
display: inline-block; display: inline-block;
width: 50%; width: 50%;