207 lines
9.0 KiB
HTML
207 lines
9.0 KiB
HTML
<script type="text/javascript">
|
|
RED.nodes.registerType('ui-theme', {
|
|
category: 'config',
|
|
defaults: {
|
|
name: {
|
|
value: RED._('@flowfuse/node-red-dashboard/ui-theme:ui-theme.label.themeName'),
|
|
required: true
|
|
},
|
|
// colors
|
|
colors: {
|
|
value: {
|
|
surface: '#ffffff',
|
|
primary: '#0094CE',
|
|
bgPage: '#eeeeee',
|
|
groupBg: '#ffffff',
|
|
groupOutline: '#cccccc'
|
|
}
|
|
},
|
|
// sizes
|
|
sizes: {
|
|
value: {
|
|
density: 'default',
|
|
pagePadding: '12px',
|
|
groupGap: '12px',
|
|
groupBorderRadius: '4px',
|
|
widgetGap: '12px'
|
|
}
|
|
}
|
|
},
|
|
oneditprepare: function () {
|
|
function hasProperty (obj, prop) {
|
|
return !!Object.prototype.hasOwnProperty.call(obj, prop)
|
|
}
|
|
|
|
if (!this.colors) {
|
|
this.colors = {}
|
|
// set default values
|
|
this.colors.surface = '#ffffff'
|
|
this.colors.primary = '#0094CE'
|
|
// pages
|
|
this.colors.bgPage = '#eeeeee'
|
|
// groups
|
|
this.colors.groupBg = '#ffffff'
|
|
this.colors.groupOutline = '#cccccc'
|
|
}
|
|
|
|
if (!this.sizes) {
|
|
this.sizes = {}
|
|
}
|
|
// set default values
|
|
if (!hasProperty(this.sizes, 'density')) {
|
|
this.sizes.density = 'default'
|
|
}
|
|
if (!hasProperty(this.sizes, 'pagePadding')) {
|
|
this.sizes.pagePadding = '12px'
|
|
}
|
|
if (!hasProperty(this.sizes, 'groupGap')) {
|
|
this.sizes.groupGap = '12px'
|
|
}
|
|
if (!hasProperty(this.sizes, 'groupBorderRadius')) {
|
|
this.sizes.groupBorderRadius = '4px'
|
|
}
|
|
if (!hasProperty(this.sizes, 'widgetGap')) {
|
|
this.sizes.widgetGap = '12px'
|
|
}
|
|
|
|
// loop over keys in this.colors
|
|
Object.keys(this.colors).forEach((color) => {
|
|
// get the value of the key
|
|
const value = this.colors[color]
|
|
// set the value of the input
|
|
$('#node-config-input-' + color).val(value)
|
|
})
|
|
|
|
// loop over keys in this.sizes
|
|
Object.keys(this.sizes).forEach((size) => {
|
|
// get the value of the key
|
|
let value = this.sizes[size]
|
|
// value is a number, add `px` to the end
|
|
value += (parseFloat(value).toString() === value) ? 'px' : ''
|
|
// set the value of the input
|
|
$('#node-config-input-' + size).val(value)
|
|
})
|
|
|
|
// update label b/g to match the colour input values
|
|
// this provides nicer styling than the default browser styling
|
|
const colorWrappers = $('.color-picker-wrapper')
|
|
colorWrappers.each(function (i) {
|
|
const wrapper = $(this)
|
|
const colorPicker = wrapper.children("input[type='color']").eq(0)
|
|
colorPicker.on('change', () => {
|
|
wrapper.css('background-color', colorPicker.val())
|
|
})
|
|
wrapper.css('background-color', colorPicker.val())
|
|
})
|
|
},
|
|
oneditsave: function () {
|
|
// update our config values from the input values
|
|
Object.keys(this.colors).forEach((color) => {
|
|
// set the value of the input
|
|
this.colors[color] = $('#node-config-input-' + color).val()
|
|
})
|
|
|
|
// update our config values from the input values
|
|
Object.keys(this.sizes).forEach((size) => {
|
|
// get the value of the key
|
|
let value = $('#node-config-input-' + size).val()
|
|
// value is a number, add `px` to the end
|
|
value += (parseFloat(value).toString() === value) ? 'px' : ''
|
|
|
|
// set the value of the input
|
|
this.sizes[size] = value
|
|
})
|
|
},
|
|
label: function () {
|
|
return `${this.name}` || 'UI Theme'
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<script type="text/html" data-template-name="ui-theme">
|
|
<div class="form-row">
|
|
<label for="node-config-input-name"><i class="fa fa-tag"></i> <span data-i18n="node-red:common.label.name"></label>
|
|
<input type="text" id="node-config-input-name" data-i18n="[placeholder]node-red:common.label.name">
|
|
</div>
|
|
<h3 style="margin: 0; margin-bottom: 6px; border-bottom: 1px solid #eee; padding-bottom: 3px;" data-i18n="ui-theme.label.colors"></h3>
|
|
<div class="form-row" style="margin-bottom: 3px;">
|
|
<h4 style="margin-bottom: 0;"><i class="fa fa-bar-chart"></i> <span data-i18n="ui-theme.label.dashboard"></h4>
|
|
</div>
|
|
<div class="form-row form-row-flex labels-right" style="margin-bottom: 3px; gap: 9px;">
|
|
<div>
|
|
<label data-i18n="ui-theme.label.header"></label>
|
|
<label class="color-picker-wrapper" for="node-config-input-primary" style="width: 100px; height: 32px; border-radius: 6px; border: 1px solid #ccc">
|
|
<input type="color" id="node-config-input-surface" style="opacity: 0; width: 100%;"/>
|
|
</label>
|
|
</div>
|
|
<div>
|
|
<label data-i18n="ui-theme.label.primary"></label>
|
|
<label class="color-picker-wrapper" for="node-config-input-primary" style="width: 100px; height: 32px; border-radius: 6px; border: 1px solid #ccc">
|
|
<input type="color" id="node-config-input-primary" style="opacity: 0; width: 100%;"/>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="form-row" style="margin-bottom: 3px;">
|
|
<h4 style="margin-bottom: 0;"><i class="fa fa-object-group"></i> <span data-i18n="ui-theme.label.pages"></h4>
|
|
</div>
|
|
<div class="form-row labels-right" style="margin-bottom: 3px;">
|
|
<label data-i18n="ui-theme.label.background"></label>
|
|
<label class="color-picker-wrapper" for="node-config-input-background" style="width: 100px; height: 32px; border-radius: 6px; border: 1px solid #ccc">
|
|
<input type="color" id="node-config-input-bgPage" style="opacity: 0; width: 100%;"/>
|
|
</label>
|
|
</div>
|
|
<div class="form-row" style="margin-bottom: 3px;">
|
|
<h4 style="margin-bottom: 0;"><i class="fa fa-table"></i> <span data-i18n="ui-theme.label.groups"></h4>
|
|
</div>
|
|
<div class="form-row form-row-flex labels-right" style="margin-bottom: 3px; gap: 9px;">
|
|
<div>
|
|
<label data-i18n="ui-theme.label.background"></label>
|
|
<label class="color-picker-wrapper" for="node-config-input-background" style="width: 100px; height: 32px; border-radius: 6px; border: 1px solid #ccc">
|
|
<input type="color" id="node-config-input-groupBg" style="opacity: 0; width: 100%;"/>
|
|
</label>
|
|
</div>
|
|
<div>
|
|
<label data-i18n="ui-theme.label.outline"></label>
|
|
<label class="color-picker-wrapper" for="node-config-input-background" style="width: 100px; height: 32px; border-radius: 6px; border: 1px solid #ccc">
|
|
<input type="color" id="node-config-input-groupOutline" style="opacity: 0; width: 100%;"/>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<h3 style="margin: 12px 0 6px; border-bottom: 1px solid #eee; padding-bottom: 3px;" data-i18n="ui-theme.label.sizings"></h3>
|
|
<div class="form-row">
|
|
<label for="node-config-input-density" data-i18n="ui-theme.label.density"></label>
|
|
<select type="text" id="node-config-input-density">
|
|
<option value="default" data-i18n="ui-theme.label.default"></option>
|
|
<option value="comfortable" data-i18n="ui-theme.label.comfortable"></option>
|
|
<option value="compact" data-i18n="ui-theme.label.compact"></option>
|
|
</select>
|
|
</div>
|
|
<div class="form-row">
|
|
<label for="node-config-input-pagePadding" data-i18n="ui-theme.label.pagePadding"></label>
|
|
<input type="text" id="node-config-input-pagePadding">
|
|
</div>
|
|
<div class="form-row">
|
|
<label for="node-config-input-groupGap" data-i18n="ui-theme.label.groupGap"></label>
|
|
<input type="text" id="node-config-input-groupGap">
|
|
</div>
|
|
<div class="form-row">
|
|
<label for="node-config-input-groupBorderRadius" data-i18n="ui-theme.label.groupBorderRadius"></label>
|
|
<input type="text" id="node-config-input-groupBorderRadius">
|
|
</div>
|
|
<div class="form-row">
|
|
<label for="node-config-input-widgetGap" data-i18n="ui-theme.label.widgetGap"></label>
|
|
<input type="text" id="node-config-input-widgetGap">
|
|
</div>
|
|
</script>
|
|
|
|
<style>
|
|
.labels-right label {
|
|
text-align: right;
|
|
}
|
|
.labels-right label:first-child {
|
|
padding-right: 3px;
|
|
}
|
|
.labels-right label:first-child:after {
|
|
content: ':';
|
|
}
|
|
</style> |