tidy up inspector controls
This commit is contained in:
parent
fb31dcbb8d
commit
d9edaab279
|
@ -35,6 +35,10 @@ export default function Controls({
|
|||
/>
|
||||
</PanelRow>
|
||||
|
||||
<PanelRow className="row-inner-imgs">
|
||||
<h2>Inner Images</h2>
|
||||
</PanelRow>
|
||||
|
||||
<PanelRow>
|
||||
<MediaPlaceholder
|
||||
onSelect={(img) => {
|
||||
|
@ -42,6 +46,7 @@ export default function Controls({
|
|||
}}
|
||||
allowedTypes={["image"]}
|
||||
multiple={false}
|
||||
className="img-selector"
|
||||
mediaPreview={
|
||||
attributes.imgUrl !== "" ? (
|
||||
<div>
|
||||
|
@ -52,9 +57,10 @@ export default function Controls({
|
|||
}}
|
||||
isSmall={true}
|
||||
isDestructive={true}
|
||||
>
|
||||
Remove
|
||||
</Button>
|
||||
icon="dismiss"
|
||||
label="Remove"
|
||||
className="remove-img"
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<p>No image selected.</p>
|
||||
|
@ -63,8 +69,6 @@ export default function Controls({
|
|||
/>
|
||||
</PanelRow>
|
||||
|
||||
<PanelRow></PanelRow>
|
||||
|
||||
<PanelRow>
|
||||
<MediaPlaceholder
|
||||
onSelect={(img) => {
|
||||
|
@ -72,6 +76,7 @@ export default function Controls({
|
|||
}}
|
||||
allowedTypes={["image"]}
|
||||
multiple={false}
|
||||
className="img-selector"
|
||||
mediaPreview={
|
||||
attributes.imgUrlHover !== "" ? (
|
||||
<div>
|
||||
|
@ -80,11 +85,12 @@ export default function Controls({
|
|||
onClick={() => {
|
||||
setAttributes({ imgUrlHover: "" });
|
||||
}}
|
||||
icon="dismiss"
|
||||
label="Remove"
|
||||
isSmall={true}
|
||||
isDestructive={true}
|
||||
>
|
||||
Remove
|
||||
</Button>
|
||||
className="remove-img"
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<p>No image selected.</p>
|
||||
|
|
|
@ -78,3 +78,45 @@
|
|||
.block-list {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue