Hi LUCI author:
I am trying to build a new LUCI theme according to our product GUI design.
But I didn't found a coding guideline about how to develop a LUCI theme.
Do you have some document or some existed wiki page about how to create a new theme or change a existed theme step by step?
For example, let's look at the render function of htmlview.js from luci-app-example:
render: function(data) {
var body = E([
E('h2', _('Example HTML Page'))
]);
var sections = uci.sections('example');
var listContainer = E('div');
var list = E('ul');
list.appendChild(E('li', { 'class': 'css-class' }, ['First Option in first section: ', E('em', {}, [sections[0].first_option])]));
list.appendChild(E('li', { 'class': 'css-class' }, ['Flag in second section: ', E('em', {}, [sections[1].flag])]));
list.appendChild(E('li', { 'class': 'css-class' }, ['Select in second section: ', E('em', {}, [sections[1].select])]));
listContainer.appendChild(list);
body.appendChild(listContainer);
console.log(sections);
return body;
}
Obviously the "css-class" should be the selector of the cascade.css.Then we can define/customize it to change the UI style.
But if we look at the render function of form.js from luci-app-example:
render: function() {
var m, s, o;
m = new form.Map('example', _('Example Form'),
_('Example Form Configuration.'));
s = m.section(form.TypedSection, 'first', _('first section'));
s.anonymous = true;
s.option(form.Value, 'first_option', _('First Option'),
_('Input for the first option'));
s = m.section(form.TypedSection, 'second', _('second section'));
s.anonymous = true;
o = s.option(form.Flag, 'flag', _('Flag Option'),
_('A boolean option'));
o.default = '1';
o.rmempty = false;
o = s.option(form.ListValue, 'select', _('Select Option'),
_('A select option'));
o.placeholder = 'placeholder';
o.value('key1', 'value1');
o.value('key2', 'value2');
o.rmempty = false;
o.editable = true;
return m.render();
We cannot know what kind of DOM element will be applied, and which selector will be used as well.