Customize the version info popover

Clicking on the i icon in the status bar on the bottom right opens the VersionInfoPopover.
This popover displays the SDK version number, Editor build date, and SDK build date. There is also a button called "License info" to open a modal which shows the (open source) licenses of all 3rd party dependencies the Fonto SDK uses.

You can customise this popover by creating your own Popover and registering it with the uiManager under the "VersionInfoPopover" name:

install.js
import uiManager from 'fontoxml-modular-ui/src/uiManager.js';
import RecipePopover from './ui/MyCustomVersionInfoPopover.jsx';
 
export default function install() {
    uiManager.registerReactComponent('VersionInfoPopover', MyCustomVersionInfoPopover);
}

Here is the definition of the default version info popover that is used if you do not register your own component.

Note the prop/@param descriptions. Make sure your own popover implements these props correctly.

DefaultVersionInfoPopover.jsx
import React, { useCallback } from 'react';

import {
    Button,
    Flex,
    Label,
    Popover,
    PopoverBody,
    PopoverFooter,
    PopoverHeader
} from 'fds/components';

import t from 'fontoxml-localization/src/t.js';

/**
 * @param  {function():void}  openLicenseInfoModal  A callback that opens the license info modal.
 *                                                    Note: You must implement a TextLink or Button
 *                                                    somewhere in your popover that onClick
 *                                                    executes this callback.
 * @param  {function():void}  togglePopover         A callback to close the popover.
 * @param  {object}           versionInfo           The version info data to display.
 * @param  {string}           versionInfo.sdkVersion
 * @param  {Date}             versionInfo.appBuildDate
 * @param  {Date}             versionInfo.sdkBuildDate
 *
 * @return {React.ReactElement}
 **/
export default function DefaultVersionInfoPopover({ openLicenseInfoModal, togglePopover, versionInfo }) {
    const handleLicenseInfoButtonClick = useCallback(() => {
        togglePopover();
        openLicenseInfoModal();
    }, [openLicenseInfoModal, togglePopover]);

    return (
        <Popover>
            <PopoverHeader
                icon="fonto-logo-icon"
                title={t('SDK: {SDK_VERSION}', { SDK_VERSION: versionInfo.sdkVersion })}
            />

            <PopoverBody>
                <Flex flex="none" flexDirection="column" spaceSize="s" alignItems="flex-start">
                    <Label flex="none">
                        {t('Editor built on: {DATE, fonto_date}, {DATE, time, short}', {
                            DATE: versionInfo.appBuildDate
                        })}
                    </Label>

                    <Label flex="none">
                        {t('SDK built on: {DATE, fonto_date}, {DATE, time, short}', {
                            DATE: versionInfo.sdkBuildDate
                        })}
                    </Label>
                </Flex>
            </PopoverBody>

            <PopoverFooter>
                <Button
                    label={t('License info')}
                    type="default"
                    icon="list-alt"
                    onClick={handleLicenseInfoButtonClick}
                />
            </PopoverFooter>
        </Popover>
    );
}
Was this page helpful?