frodovdr
/
node-red
mirror of https://github.com/node-red/node-red.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Namespace context/config sidebar css

This commit is contained in:
Nick O'Leary 2019-04-30 23:28:35 +01:00
parent 9dac679b72
commit 5866dad79a
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
4 changed files with 31 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
packages/node_modules/@node-red/editor-client/src/js/ui/tab-config.js vendored
View File

@ -47,19 +47,19 @@ RED.sidebar.config = (function() {
var container = $('<div class="red-ui-palette-category workspace-config-node-category" id="workspace-config-node-category-'+name+'"></div>').appendTo(parent); var container = $('<div class="red-ui-palette-category workspace-config-node-category" id="workspace-config-node-category-'+name+'"></div>').appendTo(parent);
var header = $('<div class="workspace-config-node-tray-header red-ui-palette-header"><i class="fa fa-angle-down expanded"></i></div>').appendTo(container); var header = $('<div class="workspace-config-node-tray-header red-ui-palette-header"><i class="fa fa-angle-down expanded"></i></div>').appendTo(container);
if (label) { if (label) {
$('<span class="config-node-label"/>').text(label).appendTo(header); $('<span class="red-ui-palette-node-config-label"/>').text(label).appendTo(header);
} else { } else {
$('<span class="config-node-label" data-i18n="sidebar.config.'+name+'">').appendTo(header); $('<span class="red-ui-palette-node-config-label" data-i18n="sidebar.config.'+name+'">').appendTo(header);
} }
$('<span class="config-node-filter-info"></span>').appendTo(header); $('<span class="red-ui-sidebar-node-config-filter-info"></span>').appendTo(header);
category = $('<ul class="red-ui-palette-content config-node-list"></ul>').appendTo(container); category = $('<ul class="red-ui-palette-content red-ui-sidebar-node-config-list"></ul>').appendTo(container);
container.i18n(); container.i18n();
var icon = header.find("i"); var icon = header.find("i");
var result = { var result = {
label: label, label: label,
list: category, list: category,
size: function() { size: function() {
return result.list.find("li:not(.config_node_none)").length return result.list.find("li:not(.red-ui-palette-node-config-none)").length
}, },
open: function(snap) { open: function(snap) {
if (!icon.hasClass("expanded")) { if (!icon.hasClass("expanded")) {
@ -96,7 +96,7 @@ RED.sidebar.config = (function() {
categories[name] = result; categories[name] = result;
} else { } else {
if (categories[name].label !== label) { if (categories[name].label !== label) {
categories[name].list.parent().find('.config-node-label').text(label); categories[name].list.parent().find('.red-ui-palette-node-config-label').text(label);
categories[name].label = label; categories[name].label = label;
} }
} }
@ -119,27 +119,27 @@ RED.sidebar.config = (function() {
}) })
hiddenCount = hiddenCount - nodes.length; hiddenCount = hiddenCount - nodes.length;
if (hiddenCount > 0) { if (hiddenCount > 0) {
list.parent().find('.config-node-filter-info').text(RED._('sidebar.config.filtered',{count:hiddenCount})).show(); list.parent().find('.red-ui-sidebar-node-config-filter-info').text(RED._('sidebar.config.filtered',{count:hiddenCount})).show();
} else { } else {
list.parent().find('.config-node-filter-info').hide(); list.parent().find('.red-ui-sidebar-node-config-filter-info').hide();
} }
} else { } else {
list.parent().find('.config-node-filter-info').hide(); list.parent().find('.red-ui-sidebar-node-config-filter-info').hide();
} }
list.empty(); list.empty();
if (nodes.length === 0) { if (nodes.length === 0) {
$('<li class="config_node_none" data-i18n="sidebar.config.none">NONE</li>').i18n().appendTo(list); $('<li class="red-ui-palette-node-config-none" data-i18n="sidebar.config.none">NONE</li>').i18n().appendTo(list);
category.close(true); category.close(true);
} else { } else {
var currentType = ""; var currentType = "";
nodes.forEach(function(node) { nodes.forEach(function(node) {
var label = RED.utils.getNodeLabel(node,node.id); var label = RED.utils.getNodeLabel(node,node.id);
if (node.type != currentType) { if (node.type != currentType) {
$('<li class="config_node_type">'+node.type+'</li>').appendTo(list); $('<li class="red-ui-palette-node-config-type">'+node.type+'</li>').appendTo(list);
currentType = node.type; currentType = node.type;
} }
var entry = $('<li class="red-ui-palette-node config_node red-ui-palette-node_id_'+node.id.replace(/\./g,"-")+'"></li>').appendTo(list); var entry = $('<li class="red-ui-palette-node red-ui-palette-node-config red-ui-palette-node_id_'+node.id.replace(/\./g,"-")+'"></li>').appendTo(list);
entry.data('node',node.id); entry.data('node',node.id);
$('<div class="red-ui-palette-label"></div>').text(label).appendTo(entry); $('<div class="red-ui-palette-label"></div>').text(label).appendTo(entry);
if (node._def.hasUsers !== false) { if (node._def.hasUsers !== false) {
@ -155,7 +155,7 @@ RED.sidebar.config = (function() {
} }
RED.popover.tooltip(iconContainer,RED._('editor.nodesUse',{count:node.users.length})); RED.popover.tooltip(iconContainer,RED._('editor.nodesUse',{count:node.users.length}));
if (node.users.length === 0) { if (node.users.length === 0) {
entry.addClass("config_node_unused"); entry.addClass("red-ui-palette-node-config-unused");
} }
} }
entry.on('click',function(e) { entry.on('click',function(e) {

14
packages/node_modules/@node-red/editor-client/src/js/ui/tab-context.js vendored
View File

@ -32,13 +32,13 @@ RED.sidebar.context = (function() {
function init() { function init() {
content = $("<div>").css({"position":"relative","height":"100%"}); content = $("<div>").css({"position":"relative","height":"100%"});
content.className = "sidebar-context" content.className = "red-ui-sidebar-context"
var footerToolbar = $('<div></div>'); var footerToolbar = $('<div></div>');
var stackContainer = $("<div>",{class:"sidebar-context-stack"}).appendTo(content); var stackContainer = $("<div>",{class:"red-ui-sidebar-context-stack"}).appendTo(content);
sections = RED.stack.create({ sections = RED.stack.create({
container: stackContainer container: stackContainer
}); });
@ -52,7 +52,7 @@ RED.sidebar.context = (function() {
}); });
nodeSection.expand(); nodeSection.expand();
nodeSection.content.css({height:"100%"}); nodeSection.content.css({height:"100%"});
nodeSection.timestamp = $('<div class="sidebar-context-updated">&nbsp;</div>').appendTo(nodeSection.content); nodeSection.timestamp = $('<div class="red-ui-sidebar-context-updated">&nbsp;</div>').appendTo(nodeSection.content);
var table = $('<table class="node-info"></table>').appendTo(nodeSection.content); var table = $('<table class="node-info"></table>').appendTo(nodeSection.content);
nodeSection.table = $('<tbody>').appendTo(table); nodeSection.table = $('<tbody>').appendTo(table);
var bg = $('<div style="float: right"></div>').appendTo(nodeSection.header); var bg = $('<div style="float: right"></div>').appendTo(nodeSection.header);
@ -86,7 +86,7 @@ RED.sidebar.context = (function() {
}); });
flowSection.expand(); flowSection.expand();
flowSection.content.css({height:"100%"}); flowSection.content.css({height:"100%"});
flowSection.timestamp = $('<div class="sidebar-context-updated">&nbsp;</div>').appendTo(flowSection.content); flowSection.timestamp = $('<div class="red-ui-sidebar-context-updated">&nbsp;</div>').appendTo(flowSection.content);
var table = $('<table class="node-info"></table>').appendTo(flowSection.content); var table = $('<table class="node-info"></table>').appendTo(flowSection.content);
flowSection.table = $('<tbody>').appendTo(table); flowSection.table = $('<tbody>').appendTo(table);
bg = $('<div style="float: right"></div>').appendTo(flowSection.header); bg = $('<div style="float: right"></div>').appendTo(flowSection.header);
@ -104,7 +104,7 @@ RED.sidebar.context = (function() {
}); });
globalSection.expand(); globalSection.expand();
globalSection.content.css({height:"100%"}); globalSection.content.css({height:"100%"});
globalSection.timestamp = $('<div class="sidebar-context-updated">&nbsp;</div>').appendTo(globalSection.content); globalSection.timestamp = $('<div class="red-ui-sidebar-context-updated">&nbsp;</div>').appendTo(globalSection.content);
var table = $('<table class="node-info"></table>').appendTo(globalSection.content); var table = $('<table class="node-info"></table>').appendTo(globalSection.content);
globalSection.table = $('<tbody>').appendTo(table); globalSection.table = $('<tbody>').appendTo(table);
@ -230,7 +230,7 @@ RED.sidebar.context = (function() {
sortedData[keys[i]].forEach(function(v) { sortedData[keys[i]].forEach(function(v) {
var k = keys[i]; var k = keys[i];
var l2 = sortedData[k].length; var l2 = sortedData[k].length;
var propRow = $('<tr class="node-info-node-row"><td class="sidebar-context-property"></td><td></td></tr>').appendTo(container); var propRow = $('<tr class="node-info-node-row"><td class="red-ui-sidebar-context-property"></td><td></td></tr>').appendTo(container);
var obj = $(propRow.children()[0]); var obj = $(propRow.children()[0]);
obj.text(k); obj.text(k);
var tools = $('<span class="button-group"></span>'); var tools = $('<span class="button-group"></span>');
@ -312,7 +312,7 @@ RED.sidebar.context = (function() {
tools: tools tools: tools
}).appendTo(propRow.children()[1]); }).appendTo(propRow.children()[1]);
if (contextStores.length > 1) { if (contextStores.length > 1) {
$("<span>",{class:"sidebar-context-property-storename"}).text(v.store).appendTo($(propRow.children()[0])) $("<span>",{class:"red-ui-sidebar-context-property-storename"}).text(v.store).appendTo($(propRow.children()[0]))
} }
}); });
} }

14
packages/node_modules/@node-red/editor-client/src/sass/tab-config.scss vendored
View File

@ -22,7 +22,7 @@
@include disable-selection; @include disable-selection;
} }
.config-node-list { .red-ui-sidebar-node-config-list {
margin: 0; margin: 0;
list-style-type: none; list-style-type: none;
.red-ui-palette-node { .red-ui-palette-node {
@ -32,7 +32,7 @@
background-color: #eee; background-color: #eee;
} }
} }
.palette_label { .red-ui-palette-label {
margin-left: 8px; margin-left: 8px;
line-height: 24px; line-height: 24px;
text-align: left; text-align: left;
@ -60,14 +60,14 @@
} }
} }
} }
.config_node { .red-ui-palette-node-config {
width: 160px; width: 160px;
height: 30px; height: 30px;
background: #f3f3f3; background: #f3f3f3;
color: #666; color: #666;
cursor: pointer; cursor: pointer;
} }
.config_node_type { .red-ui-palette-node-config-type {
color: #999; color: #999;
text-align: right; text-align: right;
padding-right: 3px; padding-right: 3px;
@ -75,18 +75,18 @@
margin-top: 20px; margin-top: 20px;
} }
} }
.config_node_none { .red-ui-palette-node-config-none {
color: #ddd; color: #ddd;
text-align:right; text-align:right;
padding-right: 3px; padding-right: 3px;
} }
.config_node_unused { .red-ui-palette-node-config-unused {
border-color: #aaa; border-color: #aaa;
background: #f9f9f9; background: #f9f9f9;
border-style: dashed; border-style: dashed;
color: #aaa; color: #aaa;
} }
.config-node-filter-info { .red-ui-sidebar-node-config-filter-info {
position: absolute; position: absolute;
top: 0; top: 0;
right:0; right:0;

8
packages/node_modules/@node-red/editor-client/src/sass/tab-context.scss vendored
View File

@ -14,7 +14,7 @@
* limitations under the License. * limitations under the License.
**/ **/
.sidebar-context-stack { .red-ui-sidebar-context-stack {
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0; bottom: 0;
@ -29,7 +29,7 @@
} }
} }
.sidebar-context-property { .red-ui-sidebar-context-property {
position: relative; position: relative;
.debug-message-tools { .debug-message-tools {
right: 0px; right: 0px;
@ -40,13 +40,13 @@
display: inline-block; display: inline-block;
} }
} }
.sidebar-context-updated { .red-ui-sidebar-context-updated {
text-align: right; text-align: right;
font-size: 11px; font-size: 11px;
color: #bbb; color: #bbb;
padding: 1px 3px; padding: 1px 3px;
} }
.sidebar-context-property-storename { .red-ui-sidebar-context-property-storename {
display: block; display: block;
font-size: 0.8em; font-size: 0.8em;
font-style: italic; font-style: italic;