@flowfuse/node-red-dashboard 0.7.0

package/nodes/widgets/ui_template.html

@@ -0,0 +1,283 @@
+<script type="text/javascript">
+    (function () {
+        // convert to i18 text
+        function c_ (x) {
+            return RED._('@flowforge/node-red-dashboard/ui-template:ui-template.' + x)
+        }
+        // TODO: move this to util.js for reuse & unit testing
+        function hasProperty (obj, prop) {
+            return Object.prototype.hasOwnProperty.call(obj, prop)
+        }
+        RED.nodes.registerType('ui-template', {
+            category: RED._('@flowforge/node-red-dashboard/ui-base:ui-base.label.category'),
+            color: RED._('@flowforge/node-red-dashboard/ui-base:ui-base.colors.dark'),
+            defaults: {
+                group: { type: 'ui-group', required: true }, // for when template is scoped to 'local' (default)
+                dashboard: { type: 'ui-base', required: false }, // for when template is scoped to 'site'
+                page: { type: 'ui-page', required: false }, // for when template is scoped to 'page'
+                name: { value: '' },
+                order: { value: 0 },
+                width: {
+                    value: 0,
+                    validate: function (v) {
+                        let valid = true
+                        if (this.templateScope !== 'global') {
+                            const width = v || 0
+                            const currentGroup = $('#node-input-group').val() || this.group
+                            const groupNode = RED.nodes.node(currentGroup)
+                            valid = !groupNode || +width <= +groupNode.width
+                            $('#node-input-size').toggleClass('input-error', !valid)
+                        }
+                        return valid
+                    }
+                },
+                height: { value: 0 },
+                head: { value: '' },
+                format: { value: '<div>{{ msg.payload }}</div>' },
+                storeOutMessages: { value: true },
+                fwdInMessages: { value: true },
+                resendOnRefresh: { value: true },
+                templateScope: { value: 'local' },
+                className: { value: '' }
+            },
+            inputs: 1,
+            outputs: 1,
+            icon: 'font-awesome/fa-code',
+            paletteLabel: 'template',
+            label: function () {
+                if (this.name) { return this.name }
+                const knownLabels = {
+                    local: 'template',
+                    'site:style': 'site style',
+                    'page:style': 'page style'
+                }
+                return knownLabels[this.templateScope] || 'template'
+            },
+            labelStyle: function () { return this.name ? 'node_label_italic' : '' },
+            oneditprepare: function () {
+                if (RED.editor.__debug === true) {
+                    console.log('ui-template: oneditprepare') // useful for locating this code in the browser debugger
+                }
+                if (hasProperty(RED.editor, 'editText') && typeof RED.editor.editText === 'function') {
+                    $('#node-template-expand-editor').show()
+                } else {
+                    $('#node-template-expand-editor').hide()
+                }
+                const that = this
+                const $templateScope = $('#node-input-templateScope')
+    
+                $('#node-input-size').elementSizer({
+                    width: '#node-input-width',
+                    height: '#node-input-height',
+                    group: '#node-input-group'
+                })
+
+                if (typeof this.storeOutMessages === 'undefined') {
+                    this.storeOutMessages = true
+                    $('#node-input-storeOutMessages').prop('checked', true)
+                }
+
+                if (typeof this.fwdInMessages === 'undefined') {
+                    this.fwdInMessages = true
+                    $('#node-input-fwdInMessages').prop('checked', true)
+                }
+
+                if (typeof this.templateScope === 'undefined') {
+                    this.templateScope = 'local'
+                    $templateScope.val(this.templateScope)
+                }
+
+                $templateScope.on('change', function () {
+                    that._def.defaults.group.required = false
+                    that._def.defaults.page.required = false
+                    that._def.defaults.dashboard.required = false
+                    $('#template-row-group, #template-row-page, #template-row-dashboard, #template-row-class').hide()
+                    switch ($templateScope.val()) {
+                    case 'site:style':
+                        $('#template-row-dashboard').show()
+                        that._def.defaults.dashboard.required = true
+                        that.editor.getSession().setMode('ace/mode/css')
+                        break
+                    case 'page:style':
+                        $('#template-row-page').show()
+                        that._def.defaults.dashboard.required = true
+                        that.editor.getSession().setMode('ace/mode/css')
+                        break
+                    case 'site:script':
+                        $('#template-row-dashboard').show()
+                        that._def.defaults.dashboard.required = true
+                        that.editor.getSession().setMode('ace/mode/javascript')
+                        break
+                    case 'page:script':
+                        $('#template-row-page').show()
+                        that._def.defaults.dashboard.required = true
+                        that.editor.getSession().setMode('ace/mode/javascript')
+                        break
+                    default:
+                        $('#template-row-group, #template-row-class').show()
+                        that._def.defaults.group.required = true
+                        that.editor.getSession().setMode('ace/mode/html')
+                        break
+                    }
+                    resize.call(that)
+                })
+
+                this.editor = RED.editor.createEditor({
+                    id: 'node-input-format-editor',
+                    mode: 'ace/mode/html',
+                    value: $('#node-input-format').val()
+                })
+
+                RED.library.create({
+                    url: 'uitemplates', // where to get the data from
+                    type: 'ui-template', // the type of object the library is for
+                    editor: this.editor, // the field name the main text body goes to
+                    mode: 'ace/mode/html',
+                    fields: ['name']
+                })
+
+                this.editor.focus()
+
+                RED.popover.tooltip($('#node-template-expand-editor'), c_('label.expand'))
+
+                $('#node-template-expand-editor').on('click', function (e) {
+                    e.preventDefault()
+                    const value = that.editor.getValue()
+                    RED.editor.editText({
+                        mode: $templateScope.val() === 'global' ? 'css' : 'html',
+                        value,
+                        width: 'Infinity',
+                        cursor: that.editor.getCursorPosition(),
+                        complete: function (v, cursor) {
+                            that.editor.setValue(v, -1)
+                            that.editor.gotoLine(cursor.row + 1, cursor.column, false)
+                            setTimeout(function () { that.editor.focus() }, 300)
+                        }
+                    })
+                })
+
+                // use jQuery UI tooltip to convert the plain old title attribute to a nice tooltip
+                $('.ui-node-popover-title').tooltip({
+                    show: {
+                        effect: 'slideDown',
+                        delay: 150
+                    }
+                })
+
+                $templateScope.trigger('change') // trigger the change event to hide/show the group/dashboard row
+            },
+            oneditsave: function () {
+                const annot = this.editor.getSession().getAnnotations()
+                this.noerr = 0
+                $('#node-input-noerr').val(0)
+                for (let k = 0; k < annot.length; k++) {
+                    if (annot[k].type === 'error') {
+                        $('#node-input-noerr').val(annot.length)
+                        this.noerr = annot.length
+                    }
+                }
+                $('#node-input-format').val(this.editor.getValue())
+                this.editor.destroy()
+                delete this.editor
+            },
+            oneditcancel: function () {
+                this.editor.destroy()
+                delete this.editor
+            },
+            oneditresize: resize.bind(this)
+        })
+
+        function resize (size) {
+            const rows = $('#dialog-form>div:not(.node-text-editor-row)')
+            let fixRowsHeight = 0
+            for (let i = 0; i < rows.size(); i++) {
+                fixRowsHeight += $(rows[i]).height()
+            }
+            const dialogHeight = $('#dialog-form').height()
+            const height = dialogHeight - fixRowsHeight
+            $('.node-text-editor').css('height', height + 'px')
+            if (RED.editor.__debug === true) {
+                console.log('dialogHeight', dialogHeight, 'fixRowsHeight', fixRowsHeight, 'height', height, 'editorRow')
+            }
+            this.editor && this.editor.resize()
+        }
+    })()
+</script>
+
+<script type="text/html" data-template-name="ui-template">
+    <div class="form-row">
+        <label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="node-red:common.label.name"></span></label>
+        <div style="display:inline-block; width:calc(100% - 105px)">
+            <input type="text" id="node-input-name" data-i18n="[placeholder]node-red:common.label.name">
+        </div>
+    </div>
+    <div class="form-row">
+        <label for="node-input-temlplateScope"><i class="fa fa-dot-circle-o"></i> <span data-i18n="ui-template.label.scope"></span></label>
+        <select style="width:76%" id="node-input-templateScope">
+            <option value="local" data-i18n="ui-template.label.local"></option>
+            <option value="site:style" data-i18n="ui-template.label.site-style"></option>
+            <option value="page:style" data-i18n="ui-template.label.page-style"></option>
+            <!-- FUTURE? <option value="site:script" data-i18n="ui-template.label.site-script"></option>
+            <option value="page:script" data-i18n="ui-template.label.page-script"></option> -->
+        </select>
+    </div>
+    <div id="template-row-group" class="form-row">
+        <label for="node-input-group"><i class="fa fa-table"></i> Group</label>
+        <input type="text" id="node-input-group">
+    </div>
+    <div id="template-row-dashboard" class="form-row">
+        <label for="node-input-dashboard"><i class="fa fa-bookmark"></i> Dashboard</label>
+        <input type="text" id="node-input-dashboard">
+    </div>
+    <div id="template-row-page" class="form-row">
+        <label for="node-input-page"><i class="fa fa-bookmark"></i> Page</label>
+        <input type="text" id="node-input-page">
+    </div>
+    <div class="form-row">
+        <label><i class="fa fa-object-group"></i> Size</label>
+        <input type="hidden" id="node-input-width">
+        <input type="hidden" id="node-input-height">
+        <button class="editor-button" id="node-input-size"></button>
+    </div>
+    <!--<div class="form-row" id="template-row-size">
+        <label><i class="fa fa-object-group"></i> <span data-i18n="ui-template.label.size"></span></label>
+        <input type="hidden" id="node-input-width">
+        <input type="hidden" id="node-input-height">
+        <button class="editor-button" id="node-input-size"></button>
+    </div>-->
+    <div class="form-row">
+        <label for="node-input-className"><i class="fa fa-code"></i> Class</label>
+        <div style="display: inline;">
+            <input style="width: 70%;" type="text" id="node-input-className" placeholder="Optional CSS class name(s)" style="flex-grow: 1;">
+            <a
+                data-html="true"
+                title="Dynamic Property: Class names can also be set by sending a message to the node with a msg.topic of 'ui-property:class' and a payload containing the class name(s) to be applied. NOTE: classes set at runtime will be applied in addition to any class(es) set in the nodes class field."
+                class="red-ui-button ui-node-popover-title"
+                style="margin-left: 4px; cursor: help; font-size: 0.625rem; border-radius: 50%; width: 24px; height: 24px; display: inline-flex; justify-content: center; align-items: center;">
+                <i style="font-family: ui-serif;">fx</i>
+            </a>
+        </div>
+    </div>
+    <div class="form-row" style="margin-bottom:0px;">
+        <label for="node-input-format"><i class="fa fa-copy"></i> <span data-i18n="ui-template.label.template"></span></label>
+        <input type="hidden" id="node-input-format">
+        <button id="node-template-expand-editor" class="red-ui-button red-ui-button-small" style="float:right"><i class="fa fa-expand"></i></button>
+    </div>
+    <div class="form-row node-text-editor-row" style="display: block;">
+        <div style="height:250px; min-height:100px" class="node-text-editor" id="node-input-format-editor" ></div>
+    </div>
+    <!--<div id="template-pass-store">
+        <div class="form-row" style="margin-bottom:0px;">
+            <input type="checkbox" id="node-input-fwdInMessages" style="display:inline-block; margin-left:8px; width:auto; vertical-align:top;">
+            <label for="node-input-fwdInMessages" style="width:70%;"> <span data-i18n="ui-template.label.pass-through"></span></label>
+        </div>
+        <div class="form-row" style="margin-bottom:0px;">
+            <input type="checkbox" id="node-input-storeOutMessages" style="display:inline-block; margin-left:8px; width:auto; vertical-align:top;">
+            <label for="node-input-storeOutMessages" style="width:70%;"> <span data-i18n="ui-template.label.store-state"></span></label>
+        </div>
+        <div class="form-row" style="margin-bottom:0px;">
+            <input type="checkbox" id="node-input-resendOnRefresh" style="display:inline-block; margin-left:8px; width:auto; vertical-align:top;">
+            <label for="node-input-resendOnRefresh" style="width:70%;"> <span data-i18n="ui-template.label.resend"></span></label>
+        </div>
+    </div> -->
+</script>

package/nodes/widgets/ui_template.js

@@ -0,0 +1,19 @@
+module.exports = function (RED) {
+    function TemplateNode (config) {
+        const node = this
+
+        // create node in Node-RED
+        RED.nodes.createNode(this, config)
+
+        // which group are we rendering this widget
+        const group = RED.nodes.getNode(config.group)
+
+        const evts = {
+            onAction: true // TODO: think we need an onSend event for template nodes that matches up with a `widget-send` message
+        }
+        // inform the dashboard UI that we are adding this node
+        group.register(node, config, evts)
+    }
+
+    RED.nodes.registerType('ui-template', TemplateNode)
+}

package/nodes/widgets/ui_text.html

@@ -0,0 +1,358 @@
+<script type="text/javascript">
+    (function () {
+        const fonts = [
+            {
+                value: 'Arial,Arial,Helvetica,sans-serif',
+                name: 'Arial'
+            },
+            {
+                value: 'Arial Black,Arial Black,Gadget,sans-serif',
+                name: 'Arial Black'
+            },
+            {
+                value: 'Arial Narrow,Nimbus Sans L,sans-serif',
+                name: 'Arial Narrow'
+            },
+            {
+                value: 'Century Gothic,CenturyGothic,AppleGothic,sans-serif',
+                name: 'Century Gothic'
+            },
+            {
+                value: 'Copperplate,Copperplate Gothic Light,fantasy',
+                name: 'Copperplate'
+            },
+            {
+                value: 'Courier,monospace',
+                name: 'Courier'
+            },
+            {
+                value: 'Georgia,Georgia,serif',
+                name: 'Georgia'
+            },
+            {
+                value: 'Gill Sans,Geneva,sans-serif',
+                name: 'Gill Sans'
+            },
+            {
+                value: 'Impact,Impact,Charcoal,sans-serif',
+                name: 'Impact'
+            },
+            {
+                value: 'Lucida Sans Typewriter,Lucida Console,Monaco,monospace',
+                name: 'Lucida Console'
+            },
+            {
+                value: 'Lucida Sans Unicode,Lucida Grande,sans-serif',
+                name: 'Lucida Sans'
+            },
+            {
+                value: 'Palatino Linotype,Palatino,Book Antiqua,serif',
+                name: 'Palatino Linotype'
+            },
+            {
+                value: 'Tahoma,Geneva,sans-serif',
+                name: 'Tahoma'
+            },
+            {
+                value: 'Times New Roman,Times,serif',
+                name: 'Times New Roman'
+            },
+            {
+                value: 'Trebuchet MS,Helvetica,sans-serif',
+                name: 'Trebuchet MS'
+            },
+            {
+                value: 'Verdana,Verdana,Geneva,sans-serif',
+                name: 'Verdana'
+            }
+        ]
+
+        RED.nodes.registerType('ui-text', {
+            category: RED._('@flowforge/node-red-dashboard/ui-base:ui-base.label.category'),
+            color: RED._('@flowforge/node-red-dashboard/ui-base:ui-base.colors.medium'),
+            defaults: {
+                group: { type: 'ui-group', required: true },
+                order: { value: 0 },
+                width: {
+                    value: 0,
+                    validate: function (v) {
+                        const width = v || 0
+                        const currentGroup = $('#node-input-group').val() || this.group
+                        const groupNode = RED.nodes.node(currentGroup)
+                        const valid = !groupNode || +width <= +groupNode.width
+                        $('#node-input-size').toggleClass('input-error', !valid)
+                        return valid
+                    }
+                },
+                height: { value: 0 },
+                name: { value: '' },
+                label: { value: 'text' },
+                format: { value: '{{msg.payload}}' },
+                layout: { value: 'row-spread' },
+                style: { value: false },
+                font: { value: '' },
+                fontSize: { value: 16 },
+                color: { value: '#000' },
+                className: { value: '' }
+            },
+            inputs: 1,
+            outputs: 0,
+            align: 'right',
+            icon: 'font-awesome/fa-font',
+            paletteLabel: 'text',
+            label: function () { return this.name || (~this.label.indexOf('{' + '{') ? null : this.label) || 'text' },
+            labelStyle: function () { return this.name ? 'node_label_italic' : '' },
+            oneditprepare: function () {
+                $('#node-input-size').elementSizer({
+                    width: '#node-input-width',
+                    height: '#node-input-height',
+                    group: '#node-input-group'
+                })
+
+                $('.nr-db-text-layout-' + (this.layout || 'row-spread')).addClass('selected');
+                ['.nr-db-text-layout-row-left', '.nr-db-text-layout-row-center', '.nr-db-text-layout-row-right', '.nr-db-text-layout-row-spread', '.nr-db-text-layout-col-center']
+                    .forEach(function (id) {
+                        $(id).click(function (e) {
+                            $('.nr-db-text-layout').removeClass('selected')
+                            $(this).addClass('selected')
+                            $('#node-input-layout').val(id.substring('.nr-db-text-layout-'.length))
+                            e.preventDefault()
+                        })
+                    })
+
+                const select = $('#node-select-font')
+
+                // add font options
+                fonts.forEach((font) => {
+                    const name = font.name
+                    const val = font.value
+                    $('<option/>', {
+                        value: val
+                    }).text(name).appendTo(select)
+                })
+
+                // when a font is selected
+                $(select).change(() => {
+                    const val = $('#node-select-font').val()
+                    // update hidden input
+                    $('#node-input-font').val(val)
+                    // update test text
+                    $('#node-test-text').css({
+                        'font-family': val
+                    })
+                })
+                $(select).val(this.font)
+                $(select).change()
+
+                // make the fontsize a numeric spinner
+                $('#node-input-fontSize').spinner({
+                    min: 1,
+                    max: 100,
+                    spin: () => {
+                        // update the test text when value is changed
+                        const val = $('#node-input-fontSize').val()
+                        $('#node-test-text').css({
+                            'font-size': val + 'px'
+                        })
+                    }
+                })
+
+                // add change handler to color picker to update test text
+                $('#node-input-color').change(() => {
+                    const val = $('#node-input-color').val()
+                    $('#node-test-text').css({
+                        color: val
+                    })
+                })
+
+                // add change handler to show/hide style config options
+                $('#node-input-style').change(() => {
+                    const val = $('#node-input-style').prop('checked')
+                    if (val) {
+                        $('#node-styles').show()
+                    } else {
+                        $('#node-styles').hide()
+                    }
+                })
+                $('#node-input-style').change()
+
+                // when opening the config, make sure the test text is updated
+                if (this.fontSize) {
+                    $('#node-test-text').css({
+                        'font-size': this.fontSize + 'px'
+                    })
+                }
+                if (this.color) {
+                    $('#node-test-text').css({
+                        color: this.color
+                    })
+                }
+
+                // use jQuery UI tooltip to convert the plain old title attribute to a nice tooltip
+                $('.ui-node-popover-title').tooltip({
+                    show: {
+                        effect: 'slideDown',
+                        delay: 150
+                    }
+                })
+            }
+        })
+    })()
+</script>
+
+<script type="text/html" data-template-name="ui-text">
+    <div class="form-row">
+        <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
+        <input type="text" id="node-input-name">
+    </div>
+    <div class="form-row">
+        <label for="node-input-group"><i class="fa fa-table"></i> Group</label>
+        <input type="text" id="node-input-group">
+    </div>
+    <div class="form-row">
+        <label><i class="fa fa-object-group"></i> Size</label>
+        <input type="hidden" id="node-input-width">
+        <input type="hidden" id="node-input-height">
+        <button class="editor-button" id="node-input-size"></button>
+    </div>
+    <div class="form-row">
+        <label for="node-input-label"><i class="fa fa-i-cursor"></i> Label</label>
+        <input type="text" id="node-input-label">
+    </div>
+    <div class="form-row">
+        <label for="node-input-className"><i class="fa fa-code"></i> Class</label>
+        <div style="display: inline;">
+            <input style="width: 70%;" type="text" id="node-input-className" placeholder="Optional CSS class name(s)" style="flex-grow: 1;">
+            <a
+                data-html="true"
+                title="Dynamic Property: Class names can also be set by sending a message to the node with a msg.topic of 'ui-property:class' and a payload containing the class name(s) to be applied. NOTE: classes set at runtime will be applied in addition to any class(es) set in the nodes class field."
+                class="red-ui-button ui-node-popover-title"
+                style="margin-left: 4px; cursor: help; font-size: 0.625rem; border-radius: 50%; width: 24px; height: 24px; display: inline-flex; justify-content: center; align-items: center;">
+                <i style="font-family: ui-serif;">fx</i>
+            </a>
+        </div>
+    </div>
+    <!--<div class="form-row">
+        <label for="node-input-format"><i class="fa fa-i-cursor"></i> Value format</label>
+        <input type="text" id="node-input-format" placeholder="{{msg.payload}}">
+    </div>-->
+    <div class="form-row">
+        <label style="vertical-align: top"><i class="fa fa-th-large"></i> Layout</label>
+        <div style="display:inline-block">
+            <input type="hidden" id="node-input-layout">
+            <input type="hidden" id="node-input-layoutAlign" >
+            <div>
+                <a href="#" class="nr-db-text-layout nr-db-text-layout-row nr-db-text-layout-row-left">
+                    <span class="nr-db-text-layout-label">label</span>
+                    <span class="nr-db-text-layout-value">value</span>
+                    <div class="nr-db-text-layout-checkbox"></div>
+                </a>
+                <a href="#" class="nr-db-text-layout nr-db-text-layout-row nr-db-text-layout-row-center">
+                    <span class="nr-db-text-layout-label">label</span>
+                    <span class="nr-db-text-layout-value">value</span>
+                    <div class="nr-db-text-layout-checkbox"></div>
+                </a>
+                <a href="#" class="nr-db-text-layout nr-db-text-layout-row nr-db-text-layout-row-right">
+                    <span class="nr-db-text-layout-label">label</span>
+                    <span class="nr-db-text-layout-value">value</span>
+                    <div class="nr-db-text-layout-checkbox"></div>
+                </a>
+            </div>
+            <div>
+                <a href="#" class="nr-db-text-layout nr-db-text-layout-row nr-db-text-layout-row-spread">
+                    <span class="nr-db-text-layout-label">label</span>
+                    <span class="nr-db-text-layout-value">value</span>
+                    <div class="nr-db-text-layout-checkbox"></div>
+                </a>
+                <a href="#" class="nr-db-text-layout nr-db-text-layout-col nr-db-text-layout-col-center">
+                    <span class="nr-db-text-layout-label">label</span>
+                    <span class="nr-db-text-layout-value">value</span>
+                    <div class="nr-db-text-layout-checkbox"></div>
+                </a>
+            </div>
+        </div>
+    </div>
+
+    <div class="form-row">
+        <label><i class="fa fa-cog"></i> Style</label>
+        <input type="checkbox" id="node-input-style" style="display: inline-block; width: auto; vertical-align: top; margin: 0 3px 0 0;"/>
+        <label for="node-input-style" style="width: 70%;"> Apply Style</label>
+    </div>
+
+    <div id="node-styles">
+        <div class="form-row">
+            <label for="node-input-font"><i class="fa fa-font"></i>  Font</label>
+            <select id="node-select-font">
+            </select>
+            <input type="hidden" id="node-input-font"/>
+        </div>
+        <div class="form-row">
+            <label for="node-input-fontSize"><i class="fa fa-text-height"></i>  Text Size</label>
+            <input id="node-input-fontSize" value="16" style="width: 50px;"/>
+        </div>
+        <div class="form-row">
+            <label for="node-input-color"><i class="fa fa-tint"></i>  Text Color</label>
+            <input type="color" id="node-input-color" style="width: 50px;"/>
+        </div>
+        <div class="form-row">
+            <label>&nbsp;</label>
+            <input id="node-test-text" value="Enter Sample Here"/ style="width: 280px;">
+        </div>
+    </div>
+</script>
+
+<style>
+    .nr-db-text-layout {
+        position:relative;
+        display: inline-block;
+        width: 90px;
+        height: 60px;
+        border-radius:3px;
+        border:1px solid var(--red-ui-form-input-border-color, #bbb);
+        cursor:pointer;
+        color: #666;
+        margin-right: 10px;
+        margin-bottom: 10px;
+    }
+    .nr-db-text-layout.selected, .nr-db-text-layout:hover {
+        border-color: var(--red-ui-form-input-border-selected-color, #333);
+        color: var(--red-ui-secondary-text-color-selected, #333);
+    }
+    .nr-db-text-layout span {
+        position: absolute;
+    }
+    .nr-db-text-layout-value {
+        font-weight: bold;
+    }
+    .nr-db-text-layout-row span { top: 20px; }
+    .nr-db-text-layout-row-left .nr-db-text-layout-label { left: 2px; }
+    .nr-db-text-layout-row-left .nr-db-text-layout-value { left: 34px; }
+    .nr-db-text-layout-row-spread .nr-db-text-layout-label { left: 2px; }
+    .nr-db-text-layout-row-spread .nr-db-text-layout-value { right: 2px; }
+    .nr-db-text-layout-row-center .nr-db-text-layout-label { left: 11px; }
+    .nr-db-text-layout-row-center .nr-db-text-layout-value { right: 11px; }
+    .nr-db-text-layout-row-right .nr-db-text-layout-label { right: 40px; }
+    .nr-db-text-layout-row-right .nr-db-text-layout-value { right: 2px; }
+
+    .nr-db-text-layout-col span { width: 90px;  text-align: center; left: 0px;}
+    .nr-db-text-layout-col-center .nr-db-text-layout-label { top: 12px; }
+    .nr-db-text-layout-col-center .nr-db-text-layout-value { top: 26px; }
+    .nr-db-text-layout-checkbox {
+        display: none;
+        width: 10px;
+        height: 10px;
+        border-radius: 10px;
+        border: 1px solid var(--red-ui-primary-border-color, #bbb);
+        position: absolute;
+        right: -5px;
+        top: -5px;
+        background: var(--red-ui-secondary-background, #fff);
+    }
+    .nr-db-text-layout.selected .nr-db-text-layout-checkbox {
+        display:inline-block;
+        box-shadow: inset 0px 0px 0px 2px #fff;
+        background: #333;
+        border-color: #333;
+    }
+
+</style>