adjustments to block output when no tickers are available
Always show the first label and display spinner or message below.
This commit is contained in:
parent
dd074293a7
commit
61a3e4a104
@ -92,26 +92,41 @@
|
|||||||
tickers: select( 'scliveticker/ticker' ).receiveTickers(),
|
tickers: select( 'scliveticker/ticker' ).receiveTickers(),
|
||||||
};
|
};
|
||||||
} )( function( props ) {
|
} )( function( props ) {
|
||||||
|
var label = [
|
||||||
|
el(
|
||||||
|
wp.components.Dashicon,
|
||||||
|
{ icon: 'rss' }
|
||||||
|
),
|
||||||
|
__( 'Liveticker', 'stklcode-liveticker' ),
|
||||||
|
];
|
||||||
var content;
|
var content;
|
||||||
if ( null === props.tickers ) {
|
if ( null === props.tickers ) {
|
||||||
// Tickers not yet loaded.
|
// Tickers not yet loaded.
|
||||||
content = el( wp.components.Spinner );
|
content = [
|
||||||
} else if ( 0 === props.length ) {
|
el(
|
||||||
|
'span',
|
||||||
|
{ className: 'components-base-control label' },
|
||||||
|
label
|
||||||
|
),
|
||||||
|
el( wp.components.Spinner ),
|
||||||
|
];
|
||||||
|
} else if ( 0 === props.tickers.length ) {
|
||||||
// No tickers available.
|
// No tickers available.
|
||||||
content = el( 'p', null, 'No tickers available' );
|
content = [
|
||||||
|
el(
|
||||||
|
'span',
|
||||||
|
{ className: 'components-base-control label' },
|
||||||
|
label
|
||||||
|
),
|
||||||
|
el( 'span', null, __( 'No tickers available', 'stklcode-liveticker' ) ),
|
||||||
|
];
|
||||||
} else {
|
} else {
|
||||||
// Tickers loaded and available.
|
// Tickers loaded and available.
|
||||||
content = [
|
content = [
|
||||||
el(
|
el(
|
||||||
wp.components.SelectControl,
|
wp.components.SelectControl,
|
||||||
{
|
{
|
||||||
label: [
|
label: label,
|
||||||
el(
|
|
||||||
wp.components.Dashicon,
|
|
||||||
{ icon: 'rss' }
|
|
||||||
),
|
|
||||||
__( 'Liveticker', 'stklcode-liveticker' ),
|
|
||||||
],
|
|
||||||
value: props.attributes.ticker,
|
value: props.attributes.ticker,
|
||||||
options: props.tickers.map( function( t ) {
|
options: props.tickers.map( function( t ) {
|
||||||
return {
|
return {
|
||||||
|
@ -1,7 +1,9 @@
|
|||||||
div.wp-block-scliveticker-ticker div.components-base-control:first-child label {
|
div.wp-block-scliveticker-ticker div.components-base-control:first-child label,
|
||||||
|
div.wp-block-scliveticker-ticker .label {
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
div.wp-block-scliveticker-ticker .label > .dashicon,
|
||||||
div.wp-block-scliveticker-ticker div.components-base-control:first-child label > .dashicon {
|
div.wp-block-scliveticker-ticker div.components-base-control:first-child label > .dashicon {
|
||||||
margin-right: 8px;
|
margin-right: 8px;
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user