superdesk-ui-framework 3.1.15 → 3.1.17

package/app/styles/components/_sd-loader.scss

@@ -1,6 +1,24 @@
 // Animated loader
 
+.sd-loader--inline {
+    display: inline-flex;
+    width: 100%;
+    min-width: 90px;
+    height: 100%;
+    min-height: 30px;
+
+    // inlining img/three-dots.svg as base64 encoded URL to have loader ready on application start
+    // otherwise, loader image would only start downloading when it already needs to be shown
+    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIwIiBoZWlnaHQ9IjMwIiB2aWV3Qm94PSIwIDAgMTIwIDMwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiM3YjdiN2IiPjxjaXJjbGUgY3g9IjE1IiBjeT0iMTUiIHI9IjE1Ij48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJyIiBmcm9tPSIxNSIgdG89IjE1IiBiZWdpbj0iMHMiIGR1cj0iMC44cyIgdmFsdWVzPSIxNTs5OzE1IiBjYWxjTW9kZT0ibGluZWFyIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJmaWxsLW9wYWNpdHkiIGZyb209IjEiIHRvPSIxIiBiZWdpbj0iMHMiIGR1cj0iMC44cyIgdmFsdWVzPSIxOy41OzEiIGNhbGNNb2RlPSJsaW5lYXIiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPjwvY2lyY2xlPjxjaXJjbGUgY3g9IjYwIiBjeT0iMTUiIHI9IjkiIGZpbGwtb3BhY2l0eT0iMC4zIj48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJyIiBmcm9tPSI5IiB0bz0iOSIgYmVnaW49IjBzIiBkdXI9IjAuOHMiIHZhbHVlcz0iOTsxNTs5IiBjYWxjTW9kZT0ibGluZWFyIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJmaWxsLW9wYWNpdHkiIGZyb209IjAuNSIgdG89IjAuNSIgYmVnaW49IjBzIiBkdXI9IjAuOHMiIHZhbHVlcz0iLjU7MTsuNSIgY2FsY01vZGU9ImxpbmVhciIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIC8+PC9jaXJjbGU+PGNpcmNsZSBjeD0iMTA1IiBjeT0iMTUiIHI9IjE1Ij48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJyIiBmcm9tPSIxNSIgdG89IjE1IiBiZWdpbj0iMHMiIGR1cj0iMC44cyIgdmFsdWVzPSIxNTs5OzE1IiBjYWxjTW9kZT0ibGluZWFyIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJmaWxsLW9wYWNpdHkiIGZyb209IjEiIHRvPSIxIiBiZWdpbj0iMHMiIGR1cj0iMC44cyIgdmFsdWVzPSIxOy41OzEiIGNhbGNNb2RlPSJsaW5lYXIiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPjwvY2lyY2xlPjwvc3ZnPg==");
+
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: 60px;
+    background-color: var(--sd-colour-overlay-actioning);
+}
+
 .sd-loader {
+    @extend .sd-loader--inline;
     content: '';
     display: block;
     position: absolute;
@@ -9,9 +27,4 @@
     inset-block-end: 0;
     inset-inline-start: 0;
     z-index: 99999;
-    background-image: url(../img/three-dots.svg);
-    background-repeat: no-repeat;
-    background-position: center center;
-    background-size: 60px;
-    background-color: var(--sd-colour-overlay-actioning);
 }

package/app-typescript/components/Layouts/Panel.tsx

@@ -111,11 +111,13 @@ class PanelHeader extends React.PureComponent<IPropsPanelHeader> {
                                     && this.props.iconButtons
                                 }
                                 {this.props.onClose != null
-                                    && <IconButton
-                                        icon='close-small'
-                                        ariaValue='Close'
-                                        onClick={this.props.onClose}
-                                    />
+                                    && (
+                                        <IconButton
+                                            icon='close-small'
+                                            ariaValue='Close'
+                                            onClick={this.props.onClose}
+                                        />
+                                    )
                                 }
                             </ButtonGroup>
                         )

package/app-typescript/components/Loader.tsx

@@ -1,18 +1,36 @@
 import * as React from 'react';
 
-interface IProps {
-    overlay?: boolean;
+interface IPropsOverlay {
+    overlay: true;
+    backgroundColor?: React.CSSProperties['backgroundColor'];
 }
 
+interface IPropsInline {
+    overlay?: false;
+    width?: React.CSSProperties['width'];
+    height?: React.CSSProperties['height'];
+    backgroundColor?: React.CSSProperties['backgroundColor'];
+}
+
+type IProps = IPropsOverlay | IPropsInline;
+
 export class Loader extends React.Component<IProps> {
     render() {
-
         if (this.props.overlay) {
             return (
-                <div className='sd-loader'></div>
+                <div className="sd-loader" style={{backgroundColor: this.props.backgroundColor}} />
             );
         } else {
-            return null;
+            return (
+                <div
+                    className="sd-loader--inline"
+                    style={{
+                        width: this.props.width,
+                        height: this.props.height,
+                        backgroundColor: this.props.backgroundColor,
+                    }}
+                />
+            );
         }
     }
 }

package/app-typescript/components/Navigation/SideBarTabs.tsx

@@ -8,6 +8,7 @@ interface IProps {
     onActiveTabChange(val: string | null): void;
     items: Array<ISideBarTab | 'divider'>;
     side?: 'none' | 'left' | 'right';
+    disabled?: boolean;
 }
 
 export interface ISideBarTab {
@@ -53,12 +54,15 @@ export class SideBarTabs extends React.PureComponent<IProps> {
                         } else {
                             return (
                                 <li key={index} data-sd-tooltip={item.tooltip} data-flow='left'>
-                                    <a
+                                    <button
+                                        disabled={this.props.disabled}
                                         role='button'
                                         aria-label={item.tooltip}
                                         className={classNames(
                                             'sd-sidetab-menu__btn',
-                                            {'sd-sidetab-menu__btn--active': item.id === this.props.activeTab},
+                                            {'sd-sidetab-menu__btn--active':
+                                                item.id === this.props.activeTab && this.props.disabled !== true,
+                                            },
                                         )}
                                         onClick={() => this.handleClick(item)}
                                     >
@@ -71,7 +75,7 @@ export class SideBarTabs extends React.PureComponent<IProps> {
                                         </span>
 
                                         <i className='sd-sidetab-menu__helper-icon icon-close-small'></i>
-                                    </a>
+                                    </button>
                                 </li>
                             );
                         }

package/dist/components/Index.tsx

@@ -84,6 +84,7 @@ import { BorderUtilitiesDoc } from './utilities/BorderUtilities';
 import { OpacityUtilitiesDoc } from './utilities/OpacityUtilities';
 import { ObjectFitUtilitiesDoc } from './utilities/ObjectFitUtilities';
 import { ObjectPositionUtilitiesDoc } from './utilities/ObjectPositionUtilities';
+import LoaderDoc from './Loader';
 
 
 interface IPages {
@@ -181,7 +182,11 @@ const pages: IPages = {
             "illustration-button": {
                 name: 'Illustration Button',
                 component: IllustrationButtonDoc,
-            }
+            },
+            "loader": {
+                name: 'Loader',
+                component: LoaderDoc,
+            },
         }
     },
     navigationComponents: {

package/dist/components/Loader.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import * as Markup from '../../js/react';
+import {Loader} from '../../../app-typescript';
+
+export default class LoaderDoc extends React.Component {
+    render() {
+        return (
+            <section className='docs-page__container'>
+                <h2 className='docs-page__h2'>Loader</h2>
+
+                <Markup.ReactMarkup>
+                    <Markup.ReactMarkupPreview>
+                        <Loader />
+                    </Markup.ReactMarkupPreview>
+
+                    <Markup.ReactMarkupCode>{`
+                        <Loader />
+                    `}
+                    </Markup.ReactMarkupCode>
+                </Markup.ReactMarkup>
+            </section>
+        )
+    }
+}