rayelliott
/
wp-red-orbital
1
0
Fork 0
Code Issues Pull Requests Projects 2 Releases Wiki Activity

tidy up inspector controls

This commit is contained in:
Ray Elliott 2022-07-25 16:24:56 +01:00
parent fb31dcbb8d
commit d9edaab279
2 changed files with 56 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/controls.js vendored
View File

@ -35,6 +35,10 @@ export default function Controls({
/> />
</PanelRow> </PanelRow>
<PanelRow className="row-inner-imgs">
<h2>Inner Images</h2>
</PanelRow>
<PanelRow> <PanelRow>
<MediaPlaceholder <MediaPlaceholder
onSelect={(img) => { onSelect={(img) => {
@ -42,6 +46,7 @@ export default function Controls({
}} }}
allowedTypes={["image"]} allowedTypes={["image"]}
multiple={false} multiple={false}
className="img-selector"
mediaPreview={ mediaPreview={
attributes.imgUrl !== "" ? ( attributes.imgUrl !== "" ? (
<div> <div>
@ -52,9 +57,10 @@ export default function Controls({
}} }}
isSmall={true} isSmall={true}
isDestructive={true} isDestructive={true}
> icon="dismiss"
Remove label="Remove"
</Button> className="remove-img"
/>
</div> </div>
) : ( ) : (
<p>No image selected.</p> <p>No image selected.</p>
@ -63,8 +69,6 @@ export default function Controls({
/> />
</PanelRow> </PanelRow>
<PanelRow></PanelRow>
<PanelRow> <PanelRow>
<MediaPlaceholder <MediaPlaceholder
onSelect={(img) => { onSelect={(img) => {
@ -72,6 +76,7 @@ export default function Controls({
}} }}
allowedTypes={["image"]} allowedTypes={["image"]}
multiple={false} multiple={false}
className="img-selector"
mediaPreview={ mediaPreview={
attributes.imgUrlHover !== "" ? ( attributes.imgUrlHover !== "" ? (
<div> <div>
@ -80,11 +85,12 @@ export default function Controls({
onClick={() => { onClick={() => {
setAttributes({ imgUrlHover: "" }); setAttributes({ imgUrlHover: "" });
}} }}
icon="dismiss"
label="Remove"
isSmall={true} isSmall={true}
isDestructive={true} isDestructive={true}
> className="remove-img"
Remove />
</Button>
</div> </div>
) : ( ) : (
<p>No image selected.</p> <p>No image selected.</p>

42
src/editor.scss
View File

@ -78,3 +78,45 @@
.block-list { .block-list {
margin-top: 0; margin-top: 0;
} }
#red-orbital-controls {
.row-inner-imgs {
border-top: 1px solid #e0e0e0;
margin-top: 1.5em;
padding-top: 0.5em;
}
.img-selector {
box-shadow: inset 0 0 0 1px #e0e0e0;
img {
margin: 0 0 6px 0;
border: 1px solid #e0e0e0;
padding: 2px;
}
.remove-img {
position: absolute;
top: 15px;
left: 15px;
min-width: auto;
box-shadow: none;
background-color: transparent;
}
.components-placeholder__label {
display: none;
}
.components-placeholder__fieldset {
display: flex;
justify-content: flex-start;
flex-direction: row;
align-items: center;
button,
input {
margin: 0 12px 0 0;
}
}
}
}