Refactor all blocks placeholder and block control.
This commit is contained in:
Mateus Machado Luna
parent
a7f349a620
commit
768993845a
|
|
@ -3,11 +3,6 @@
|
|||
.wp-block-tainacan-terms-list .components-spinner {
|
||||
position: absolute;
|
||||
right: 0; }
|
||||
.wp-block-tainacan-terms-list .block-control {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
padding: 12px; }
|
||||
.wp-block-tainacan-terms-list ul.terms-list.terms-layout-grid,
|
||||
.wp-block-tainacan-terms-list ul.terms-list-edit.terms-layout-grid {
|
||||
padding: 0;
|
||||
|
|
@ -137,11 +132,6 @@
|
|||
.wp-block-tainacan-items-list .components-spinner {
|
||||
position: absolute;
|
||||
right: 0; }
|
||||
.wp-block-tainacan-items-list .block-control {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
padding: 12px; }
|
||||
.wp-block-tainacan-items-list ul.items-list.items-list-without-margin,
|
||||
.wp-block-tainacan-items-list ul.items-list-edit.items-list-without-margin {
|
||||
grid-template-columns: repeat(auto-fill, 185px);
|
||||
|
|
@ -271,11 +261,6 @@
|
|||
.wp-block-tainacan-collections-list .components-spinner {
|
||||
position: absolute;
|
||||
right: 0; }
|
||||
.wp-block-tainacan-collections-list .block-control {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
padding: 12px; }
|
||||
.wp-block-tainacan-collections-list ul.collections-list.collections-list-without-margin,
|
||||
.wp-block-tainacan-collections-list ul.collections-list-edit.collections-list-without-margin {
|
||||
grid-template-columns: repeat(auto-fill, 185px);
|
||||
|
|
@ -419,11 +404,6 @@
|
|||
margin: 2rem 0px; }
|
||||
.wp-block-tainacan-dynamic-items-list .components-spinner {
|
||||
margin: 1rem 50%; }
|
||||
.wp-block-tainacan-dynamic-items-list .block-control {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
padding: 12px; }
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list.items-list-without-margin,
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-list-without-margin {
|
||||
grid-template-columns: repeat(auto-fill, 185px);
|
||||
|
|
@ -548,6 +528,37 @@
|
|||
color: #454647;
|
||||
text-decoration: none; }
|
||||
|
||||
.block-control {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 5px;
|
||||
position: relative;
|
||||
top: -14px;
|
||||
left: -14px;
|
||||
width: calc(100% + 28px);
|
||||
background: #f2f2f2; }
|
||||
.block-control p {
|
||||
font-size: 0.875rem !important;
|
||||
margin: 12px 1.5rem 16px 0;
|
||||
fill: #555758; }
|
||||
.block-control p svg {
|
||||
top: 4px;
|
||||
margin-right: 0.75rem;
|
||||
position: relative;
|
||||
fill: #555758; }
|
||||
|
||||
.components-placeholder__fieldset p {
|
||||
font-size: 0.875rem !important;
|
||||
margin-top: -2px;
|
||||
fill: #555758; }
|
||||
.components-placeholder__fieldset p svg {
|
||||
margin-right: 1rem;
|
||||
top: 4px;
|
||||
position: relative;
|
||||
fill: #555758; }
|
||||
|
||||
.wp-block-tainacan-modal {
|
||||
width: 50%; }
|
||||
@media only screen and (max-width: 1024px) {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -5,7 +5,46 @@
|
|||
@import 'tainacan-items/dynamic-items-list/dynamic-items-list';
|
||||
|
||||
// COMMON TO MOST BLOCKS
|
||||
// Generic style for selection modals
|
||||
// Control and placeholder region ----------------------------------------------------
|
||||
.block-control {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 5px;
|
||||
position: relative;
|
||||
top: -14px;
|
||||
left: -14px;
|
||||
width: calc(100% + 28px);
|
||||
background: #f2f2f2;
|
||||
|
||||
p {
|
||||
font-size: 0.875rem !important;
|
||||
margin: 12px 1.5rem 16px 0;
|
||||
fill: #555758;
|
||||
|
||||
svg {
|
||||
top: 4px;
|
||||
margin-right: 0.75rem;
|
||||
position: relative;
|
||||
fill: #555758;
|
||||
}
|
||||
}
|
||||
}
|
||||
.components-placeholder__fieldset p {
|
||||
font-size: 0.875rem !important;
|
||||
margin-top: -2px;
|
||||
fill: #555758;
|
||||
|
||||
svg {
|
||||
margin-right: 1rem;
|
||||
top: 4px;
|
||||
position: relative;
|
||||
fill: #555758;
|
||||
}
|
||||
}
|
||||
|
||||
// Generic style for selection modals ---------------------------
|
||||
.wp-block-tainacan-modal {
|
||||
width: 50%;
|
||||
|
||||
|
|
|
|||
|
|
@ -7,13 +7,6 @@
|
|||
right: 0;
|
||||
}
|
||||
|
||||
// Control region ----------------------------------------------------
|
||||
.block-control {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
// Grid View Mode ----------------------------------------------------
|
||||
ul.collections-list.collections-list-without-margin,
|
||||
|
|
|
|||
|
|
@ -274,16 +274,25 @@ registerBlockType('tainacan/collections-list', {
|
|||
onCancelSelection={ () => setAttributes({ isModalOpen: false }) }/>
|
||||
: null
|
||||
}
|
||||
|
||||
<div className="block-control">
|
||||
<Button
|
||||
isPrimary
|
||||
type="submit"
|
||||
onClick={ () => openCollectionsModal() }>
|
||||
{__('Select collections', 'tainacan')}
|
||||
</Button>
|
||||
</div>
|
||||
<hr/>
|
||||
{ selectedCollectionsHTML.length ? (
|
||||
<div className="block-control">
|
||||
<p>
|
||||
<svg width="24" height="24" viewBox="0 -5 12 16">
|
||||
<path
|
||||
d="M10,8.8v1.3H1.2C0.6,10.1,0,9.5,0,8.8V2.5h1.3v6.3H10z M6.9,0H3.8C3.1,0,2.5,0.6,2.5,1.3l0,5c0,0.7,0.6,1.2,1.3,1.2h7.5
|
||||
c0.7,0,1.3-0.6,1.3-1.2V2.5c0-0.7-0.6-1.2-1.3-1.2H8.2L6.9,0z"/>
|
||||
</svg>
|
||||
{__('Expose collections from your Tainacan repository', 'tainacan')}
|
||||
</p>
|
||||
<Button
|
||||
isPrimary
|
||||
type="submit"
|
||||
onClick={ () => openCollectionsModal() }>
|
||||
{__('Select collections', 'tainacan')}
|
||||
</Button>
|
||||
</div>
|
||||
): null
|
||||
}
|
||||
</div>
|
||||
) : null
|
||||
}
|
||||
|
|
@ -295,8 +304,23 @@ registerBlockType('tainacan/collections-list', {
|
|||
width={148}
|
||||
src={ `${tainacan_plugin.base_url}/admin/images/tainacan_logo_header.svg` }
|
||||
alt="Tainacan Logo"/>
|
||||
)}
|
||||
/>) : null
|
||||
)}>
|
||||
<p>
|
||||
<svg width="24" height="24" viewBox="0 -5 12 16">
|
||||
<path
|
||||
d="M10,8.8v1.3H1.2C0.6,10.1,0,9.5,0,8.8V2.5h1.3v6.3H10z M6.9,0H3.8C3.1,0,2.5,0.6,2.5,1.3l0,5c0,0.7,0.6,1.2,1.3,1.2h7.5
|
||||
c0.7,0,1.3-0.6,1.3-1.2V2.5c0-0.7-0.6-1.2-1.3-1.2H8.2L6.9,0z"/>
|
||||
</svg>
|
||||
{__('Expose collections from your Tainacan repository', 'tainacan')}
|
||||
</p>
|
||||
<Button
|
||||
isPrimary
|
||||
type="submit"
|
||||
onClick={ () => openCollectionsModal() }>
|
||||
{__('Select collections', 'tainacan')}
|
||||
</Button>
|
||||
</Placeholder>
|
||||
) : null
|
||||
}
|
||||
|
||||
<ul
|
||||
|
|
|
|||
|
|
@ -6,14 +6,6 @@
|
|||
margin: 1rem 50%;
|
||||
}
|
||||
|
||||
// Control region ----------------------------------------------------
|
||||
.block-control {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
// Grid View Mode ----------------------------------------------------
|
||||
ul.items-list.items-list-without-margin,
|
||||
ul.items-list-edit.items-list-without-margin {
|
||||
|
|
|
|||
|
|
@ -329,15 +329,25 @@ registerBlockType('tainacan/dynamic-items-list', {
|
|||
: null
|
||||
}
|
||||
|
||||
<div className="block-control">
|
||||
<Button
|
||||
isPrimary
|
||||
type="submit"
|
||||
onClick={ () => openDynamicItemsModal() }>
|
||||
{__('Configure items search', 'tainacan')}
|
||||
</Button>
|
||||
</div>
|
||||
<hr/>
|
||||
{ items.length ? (
|
||||
<div className="block-control">
|
||||
<p>
|
||||
<svg width="24" height="24" viewBox="0 -2 12 16">
|
||||
<path
|
||||
d="M8.8,1.2H1.2V10H0V1.2C0,0.6,0.6,0,1.2,0h7.5V1.2z M3.8,2.5c-0.7,0-1.2,0.6-1.2,1.3v8.8c0,0.7,0.6,1.2,1.2,1.2h6.9
|
||||
c0.7,0,1.2-0.6,1.2-1.2V6.3L8.1,2.5H3.8z M7.5,3.4L11,6.9H7.5V3.4z"/>
|
||||
</svg>
|
||||
{__('Dynamically list items from a Tainacan items search', 'tainacan')}
|
||||
</p>
|
||||
<Button
|
||||
isPrimary
|
||||
type="submit"
|
||||
onClick={ () => openDynamicItemsModal() }>
|
||||
{__('Configure search', 'tainacan')}
|
||||
</Button>
|
||||
</div>
|
||||
): null
|
||||
}
|
||||
</div>
|
||||
) : null
|
||||
}
|
||||
|
|
@ -349,8 +359,23 @@ registerBlockType('tainacan/dynamic-items-list', {
|
|||
width={148}
|
||||
src={ `${tainacan_plugin.base_url}/admin/images/tainacan_logo_header.svg` }
|
||||
alt="Tainacan Logo"/>
|
||||
)}
|
||||
/>) : null
|
||||
)}>
|
||||
<p>
|
||||
<svg width="24" height="24" viewBox="0 -2 12 16">
|
||||
<path
|
||||
d="M8.8,1.2H1.2V10H0V1.2C0,0.6,0.6,0,1.2,0h7.5V1.2z M3.8,2.5c-0.7,0-1.2,0.6-1.2,1.3v8.8c0,0.7,0.6,1.2,1.2,1.2h6.9
|
||||
c0.7,0,1.2-0.6,1.2-1.2V6.3L8.1,2.5H3.8z M7.5,3.4L11,6.9H7.5V3.4z"/>
|
||||
</svg>
|
||||
{__('Dynamically list items from a Tainacan items search', 'tainacan')}
|
||||
</p>
|
||||
<Button
|
||||
isPrimary
|
||||
type="submit"
|
||||
onClick={ () => openDynamicItemsModal() }>
|
||||
{__('Select items', 'tainacan')}
|
||||
</Button>
|
||||
</Placeholder>
|
||||
) : null
|
||||
}
|
||||
{ isLoading ? <Spinner /> :
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -284,16 +284,25 @@ registerBlockType('tainacan/items-list', {
|
|||
onCancelSelection={ () => setAttributes({ isModalOpen: false }) }/>
|
||||
: null
|
||||
}
|
||||
|
||||
<div className="block-control">
|
||||
<Button
|
||||
isPrimary
|
||||
type="submit"
|
||||
onClick={ () => openItemsModal() }>
|
||||
{__('Select items', 'tainacan')}
|
||||
</Button>
|
||||
</div>
|
||||
<hr/>
|
||||
{ selectedItemsHTML.length ? (
|
||||
<div className="block-control">
|
||||
<p>
|
||||
<svg width="24" height="24" viewBox="0 -2 12 16">
|
||||
<path
|
||||
d="M8.8,1.2H1.2V10H0V1.2C0,0.6,0.6,0,1.2,0h7.5V1.2z M3.8,2.5c-0.7,0-1.2,0.6-1.2,1.3v8.8c0,0.7,0.6,1.2,1.2,1.2h6.9
|
||||
c0.7,0,1.2-0.6,1.2-1.2V6.3L8.1,2.5H3.8z M7.5,3.4L11,6.9H7.5V3.4z"/>
|
||||
</svg>
|
||||
{__('Expose items from your Tainacan collections', 'tainacan')}
|
||||
</p>
|
||||
<Button
|
||||
isPrimary
|
||||
type="submit"
|
||||
onClick={ () => openItemsModal() }>
|
||||
{__('Select items', 'tainacan')}
|
||||
</Button>
|
||||
</div>
|
||||
): null
|
||||
}
|
||||
</div>
|
||||
) : null
|
||||
}
|
||||
|
|
@ -305,8 +314,23 @@ registerBlockType('tainacan/items-list', {
|
|||
width={148}
|
||||
src={ `${tainacan_plugin.base_url}/admin/images/tainacan_logo_header.svg` }
|
||||
alt="Tainacan Logo"/>
|
||||
)}
|
||||
/>) : null
|
||||
)}>
|
||||
<p>
|
||||
<svg width="24" height="24" viewBox="0 -2 12 16">
|
||||
<path
|
||||
d="M8.8,1.2H1.2V10H0V1.2C0,0.6,0.6,0,1.2,0h7.5V1.2z M3.8,2.5c-0.7,0-1.2,0.6-1.2,1.3v8.8c0,0.7,0.6,1.2,1.2,1.2h6.9
|
||||
c0.7,0,1.2-0.6,1.2-1.2V6.3L8.1,2.5H3.8z M7.5,3.4L11,6.9H7.5V3.4z"/>
|
||||
</svg>
|
||||
{__('Expose items from your Tainacan collections', 'tainacan')}
|
||||
</p>
|
||||
<Button
|
||||
isPrimary
|
||||
type="submit"
|
||||
onClick={ () => openItemsModal() }>
|
||||
{__('Select items', 'tainacan')}
|
||||
</Button>
|
||||
</Placeholder>
|
||||
) : null
|
||||
}
|
||||
|
||||
<ul
|
||||
|
|
|
|||
|
|
@ -7,14 +7,6 @@
|
|||
right: 0;
|
||||
}
|
||||
|
||||
// Control region ----------------------------------------------------
|
||||
.block-control {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
// Grid View Mode ----------------------------------------------------
|
||||
ul.items-list.items-list-without-margin,
|
||||
ul.items-list-edit.items-list-without-margin {
|
||||
|
|
|
|||
|
|
@ -260,14 +260,24 @@ registerBlockType('tainacan/terms-list', {
|
|||
onCancelSelection={ () => setAttributes({ isModalOpen: false }) }/>
|
||||
: null
|
||||
}
|
||||
<div className="block-control">
|
||||
<Button
|
||||
isPrimary
|
||||
onClick={ () => openTermsModal() }>
|
||||
{__('Select terms', 'tainacan')}
|
||||
</Button>
|
||||
</div>
|
||||
<hr/>
|
||||
{ selectedTermsHTML.length ? (
|
||||
<div className="block-control">
|
||||
<p>
|
||||
<svg width="24" height="24" viewBox="0 -2 12 16">
|
||||
<path
|
||||
d="M 4.4,2.5 H 0 V 0 h 4.4 l 1.2,1.3 z m -1.9,5 v 3.1 H 5 v 1.2 H 1.3 v -8 H 2.5 V 6.3 H 5 V 7.6 H 2.5 Z m 8.2,0.7 H 6.3 V 5.7 h 4.4 l 1.2,1.2 z M 11.9,11.3 10.7,10 H 6.3 v 2.5 h 4.4 z"/>
|
||||
</svg>
|
||||
{__('Expose terms from your Tainacan taxonomies', 'tainacan')}
|
||||
</p>
|
||||
<Button
|
||||
isPrimary
|
||||
type="submit"
|
||||
onClick={ () => openTermsModal() }>
|
||||
{__('Select terms', 'tainacan')}
|
||||
</Button>
|
||||
</div>
|
||||
): null
|
||||
}
|
||||
</div>
|
||||
) : null
|
||||
}
|
||||
|
|
@ -279,8 +289,22 @@ registerBlockType('tainacan/terms-list', {
|
|||
width={148}
|
||||
src={ `${tainacan_plugin.base_url}/admin/images/tainacan_logo_header.svg` }
|
||||
alt="Tainacan Logo"/>
|
||||
)}
|
||||
/>) : null
|
||||
)}>
|
||||
<p>
|
||||
<svg width="24" height="24" viewBox="0 -2 12 16">
|
||||
<path
|
||||
d="M 4.4,2.5 H 0 V 0 h 4.4 l 1.2,1.3 z m -1.9,5 v 3.1 H 5 v 1.2 H 1.3 v -8 H 2.5 V 6.3 H 5 V 7.6 H 2.5 Z m 8.2,0.7 H 6.3 V 5.7 h 4.4 l 1.2,1.2 z M 11.9,11.3 10.7,10 H 6.3 v 2.5 h 4.4 z"/>
|
||||
</svg>
|
||||
{__('Expose terms from your Tainacan taxonomies', 'tainacan')}
|
||||
</p>
|
||||
<Button
|
||||
isPrimary
|
||||
type="submit"
|
||||
onClick={ () => openTermsModal() }>
|
||||
{__('Select terms', 'tainacan')}
|
||||
</Button>
|
||||
</Placeholder>
|
||||
) : null
|
||||
}
|
||||
|
||||
<ul className={'terms-list-edit terms-layout-' + layout}>{ selectedTermsHTML }</ul>
|
||||
|
|
|
|||
|
|
@ -7,14 +7,6 @@
|
|||
right: 0;
|
||||
}
|
||||
|
||||
// Control region ----------------------------------------------------
|
||||
.block-control {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
// Grid View Mode ----------------------------------------------------
|
||||
ul.terms-list.terms-layout-grid,
|
||||
ul.terms-list-edit.terms-layout-grid {
|
||||
|
|
|
|||
Loading…
Reference in New Issue