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:
Stefan Kalscheuer 2019-11-24 17:26:26 +01:00
parent dd074293a7
commit 61a3e4a104
2 changed files with 28 additions and 11 deletions

View File

@ -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 {

View File

@ -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;
} }