Improved FlowStream components

We have improved declaring of FlowStream components. If you provide your own version of Total.js FlowStream Designer, please update it from GitHub.

New improvements

CSS

FlowStream designer compiler replaces all phrases CLASS for the component name in inline CSS <style> of the component. The old declaration will work too.

Old declaration:

.f-hdd footer { padding: 10px; font-size: 11px; }
.f-hdd footer > div > div { height: 16px; }
.f-hdd footer b { float: right; }

New declaration:

.CLASS footer { padding: 10px; font-size: 11px; }
.CLASS footer > div > div { height: 16px; }
.CLASS footer b { float: right; }

HTML

FlowStream designer compiler replaces all phrases CONFIG, STATUS, NAME, and ICON. So you don't need to declare complicated phrases, duplicate icons, or names. The old declaration will work too.

Code form has been updated too:

Syntax

Old declaration:

<body>
    <header>
        <i class="fa fa-recycle"></i>File Watcher
    </header>
    <footer>
        <div><i class="far fa-calendar mr5"></i><span data-bind="?.status.{0}.used__text__format:yyyy-MM-dd HH:mm:ss__empty"></span></div>
        <div><i class="fa fa-calculator mr5"></i><span data-bind="?.status.{0}.size__text__helper:filesize__empty"></span></div>
        <hr />
        <div data-bind="?.config.{0}.path__text__empty"></div>
    </footer>
</body>

New declaration:

<body>
    <header>
        <i class="ICON"></i>NAME
    </header>
    <footer>
        <div><i class="far fa-calendar mr5"></i><span data-bind="STATUS.used__text__format:yyyy-MM-dd HH:mm:ss__empty"></span></div>
        <div><i class="fa fa-calculator mr5"></i><span data-bind="STATUS.size__text__helper:filesize__empty"></span></div>
        <hr />
        <div data-bind="CONFIG.path__text__empty"></div>
    </footer>
</body>

Warning:
If you use your own version of Total.js FlowStream Designer, you need to update it from GitHub.

Improved FlowStream components

New improvements

CSS

HTML

Keep reading