frodovdr/node-red
1
0
Fork 0
mirror of https://github.com/node-red/node-red.git synced 2025-03-01 10:36:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Better CSS namespace of base form elements

Browse Source
This commit is contained in:
Nick O'Leary
2019-05-09 19:22:40 +01:00
parent 59093f1721
commit 4418f8bfce
37 changed files with 1018 additions and 912 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/node_modules/@node-red/editor-client/src/js/red.js vendored
View File

@@ -578,6 +578,8 @@ var RED = (function() {
options.apiRootUrl = options.apiRootUrl+"/";
}
options.target = $("#red-ui-editor");
options.target.addClass("red-ui-editor");
buildEditor(options);
RED.i18n.init(options, function() {
RED.settings.init(options, loadEditor);

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

@@ -28,13 +28,18 @@ RED.clipboard = (function() {
var libraryBrowser;
function setupDialogs() {
dialog = $('<div id="red-ui-clipboard-dialog" class="hide node-red-dialog"><form class="dialog-form form-horizontal"></form></div>')
dialog = $('<div id="red-ui-clipboard-dialog" class="hide"><form class="dialog-form form-horizontal"></form></div>')
.appendTo("#red-ui-editor")
.dialog({
modal: true,
autoOpen: false,
width: 700,
resizable: false,
classes: {
"ui-dialog": "red-ui-editor-dialog",
"ui-dialog-titlebar-close": "hide",
"ui-widget-overlay": "red-ui-editor-dialog"
},
buttons: [
{
id: "red-ui-clipboard-dialog-cancel",
@@ -148,9 +153,6 @@ RED.clipboard = (function() {
}
}
],
open: function(e) {
$(this).parent().find(".ui-dialog-titlebar-close").hide();
},
close: function(e) {
if (popover) {
popover.close(true);
@@ -171,7 +173,7 @@ RED.clipboard = (function() {
'</span>'+
'</div>'+
'<div style="height: 400px; position:relative; border:1px solid #999;">'+
'<div style="position: absolute; top:0;left:0;bottom:0;width:120px;background: #f3f3f3;">'+
'<div class="red-ui-clipboard-dialog-tabs">'+
'<ul id="red-ui-clipboard-dialog-export-tabs"></ul>'+
'</div>'+
'<div id="red-ui-clipboard-dialog-export-tabs-content" class="red-ui-clipboard-dialog-tabs-content">'+
@@ -199,7 +201,7 @@ RED.clipboard = (function() {
importNodesDialog =
'<div style="height: 400px; position:relative; border:1px solid #999; margin-bottom: 12px">'+
'<div style="position: absolute; top:0;left:0;bottom:0;width:120px;background: #f3f3f3;">'+
'<div class="red-ui-clipboard-dialog-tabs">'+
'<ul id="red-ui-clipboard-dialog-import-tabs"></ul>'+
'</div>'+
'<div id="red-ui-clipboard-dialog-import-tabs-content" class="red-ui-clipboard-dialog-tabs-content">'+

1
packages/node_modules/@node-red/editor-client/src/js/ui/common/searchBox.js vendored
View File

@@ -35,6 +35,7 @@
this.currentTimeout = null;
this.lastSent = "";
this.element.val("");
this.element.addClass("red-ui-searchBox-input");
this.uiContainer = this.element.wrap("<div>").parent();
this.uiContainer.addClass("red-ui-searchBox-container");

2
packages/node_modules/@node-red/editor-client/src/js/ui/common/treeList.js vendored
View File

@@ -276,7 +276,7 @@
}
if (item.hasOwnProperty('selected')) {
var selectWrapper = $('<span class="red-ui-treeList-icon"></span>').appendTo(label);
var cb = $('<input type="checkbox">').prop('checked',item.selected).appendTo(selectWrapper);
var cb = $('<input class="red-ui-treeList-checkbox" type="checkbox">').prop('checked',item.selected).appendTo(selectWrapper);
cb.on('click', function(e) {
e.stopPropagation();
});

9
packages/node_modules/@node-red/editor-client/src/js/ui/common/typedInput.js vendored
View File

@@ -124,7 +124,7 @@
}
var contextStores = RED.settings.context.stores;
var contextOptions = contextStores.map(function(store) {
return {value:store,label: store, icon:'<i class="red-ui-typedInput-icon fa fa-database" style="color: #'+(store==='memory'?'ddd':'777')+'"></i>'}
return {value:store,label: store, icon:'<i class="red-ui-typedInput-icon fa fa-database"></i>'}
})
if (contextOptions.length < 2) {
allOptions.flow.options = [];
@@ -138,12 +138,12 @@
var that = this;
this.disarmClick = false;
this.input = $('<input type="text"></input>');
this.input = $('<input class="red-ui-typedInput-input" type="text"></input>');
this.input.insertAfter(this.element);
this.input.val(this.element.val());
this.element.addClass('red-ui-typedInput');
this.uiWidth = this.element.outerWidth();
this.elementDiv = this.input.wrap("<div>").parent().addClass('red-ui-typedInput-input');
this.elementDiv = this.input.wrap("<div>").parent().addClass('red-ui-typedInput-input-wrap');
this.uiSelect = this.elementDiv.wrap( "<div>" ).parent();
var attrStyle = this.element.attr('style');
var m;
@@ -171,7 +171,7 @@
this.options.types = this.options.types||Object.keys(allOptions);
this.selectTrigger = $('<button tabindex="0"></button>').prependTo(this.uiSelect);
this.selectTrigger = $('<button class="red-ui-typedInput-type-select" tabindex="0"></button>').prependTo(this.uiSelect);
$('<i class="red-ui-typedInput-icon fa fa-sort-desc"></i>').toggle(this.options.types.length > 1).appendTo(this.selectTrigger);
this.selectLabel = $('<span class="red-ui-typedInput-type-label"></span>').appendTo(this.selectTrigger);
@@ -363,7 +363,6 @@
var container = $('<div class="red-ui-typedInput-container"></div>').css({
position:"absolute",
top:0,
left:-1000
}).appendTo(document.body);
var newTrigger = label.clone().appendTo(container);
labelWidth = newTrigger.outerWidth();

4
packages/node_modules/@node-red/editor-client/src/js/ui/diff.js vendored
View File

@@ -1029,9 +1029,9 @@ RED.diff = (function() {
}
var localSelectDiv = $('<label>',{class:"red-ui-diff-selectbox",for:safeNodeId+"-local"}).on("click", function(e) { e.stopPropagation();}).appendTo(localDiv);
var localRadio = $('<input>',{id:safeNodeId+"-local",type:'radio',value:"local",name:safeNodeId,class:className+"-local"+(titleRow?"":" node-diff-select-node")}).data('node-id',node.id).on("change", changeHandler).appendTo(localSelectDiv);
var localRadio = $('<input>',{class:"red-ui-diff-selectbox-input",id:safeNodeId+"-local",type:'radio',value:"local",name:safeNodeId,class:className+"-local"+(titleRow?"":" node-diff-select-node")}).data('node-id',node.id).on("change", changeHandler).appendTo(localSelectDiv);
var remoteSelectDiv = $('<label>',{class:"red-ui-diff-selectbox",for:safeNodeId+"-remote"}).on("click", function(e) { e.stopPropagation();}).appendTo(remoteDiv);
var remoteRadio = $('<input>',{id:safeNodeId+"-remote",type:'radio',value:"remote",name:safeNodeId,class:className+"-remote"+(titleRow?"":" node-diff-select-node")}).data('node-id',node.id).on("change", changeHandler).appendTo(remoteSelectDiv);
var remoteRadio = $('<input>',{class:"red-ui-diff-selectbox-input",id:safeNodeId+"-remote",type:'radio',value:"remote",name:safeNodeId,class:className+"-remote"+(titleRow?"":" node-diff-select-node")}).data('node-id',node.id).on("change", changeHandler).appendTo(remoteSelectDiv);
if (state === 'local') {
localRadio.prop('checked',true);
} else if (state === 'remote') {

10
packages/node_modules/@node-red/editor-client/src/js/ui/library.js vendored
View File

@@ -433,6 +433,11 @@ RED.library = (function() {
autoOpen: false,
width: 800,
resizable: false,
classes: {
"ui-dialog": "red-ui-editor-dialog",
"ui-dialog-titlebar-close": "hide",
"ui-widget-overlay": "red-ui-editor-dialog"
},
buttons: [
{
text: RED._("common.label.cancel"),
@@ -449,10 +454,7 @@ RED.library = (function() {
$( this ).dialog( "close" );
}
}
],
open: function(e) {
$(this).parent().find(".ui-dialog-titlebar-close").hide();
}
]
});
saveLibraryBrowser = RED.library.createBrowser({

5
packages/node_modules/@node-red/editor-client/src/js/ui/palette-editor.js vendored
View File

@@ -235,12 +235,7 @@ RED.palette.editor = (function() {
if (def && def.color) {
swatch.css({background:RED.utils.getNodeColor(t,def)});
swatch.css({border: "1px solid "+getContrastingBorder(swatch.css('backgroundColor'))})
} else {
swatch.css({background:"#eee",border:"1px dashed #999"})
}
} else {
swatch.css({background:"#eee",border:"1px dashed #999"})
}
}
nodeEntries[module].setUseCount[setName] = inUseCount;

1
packages/node_modules/@node-red/editor-client/src/js/ui/palette.js vendored
View File

@@ -535,6 +535,7 @@ RED.palette = (function() {
sidebarControls.toggle("slide", { direction: "left" }, 200);
})
$("#red-ui-palette").on("mouseleave", function() {
sidebarControls.stop(false,true);
sidebarControls.hide();
})

2
packages/node_modules/@node-red/editor-client/src/js/ui/projects/projectSettings.js vendored
View File

@@ -231,7 +231,7 @@ RED.projects.settings = (function() {
var pane = $('<div id="red-ui-project-settings-tab-main" class="red-ui-project-settings-tab-pane node-help"></div>');
$('<h1>').text(activeProject.name).appendTo(pane);
var summary = $('<div style="position: relative">').appendTo(pane);
var summaryContent = $('<div></div>',{style:"color: #999"}).appendTo(summary);
var summaryContent = $('<div></div>').appendTo(summary);
updateProjectSummary(activeProject.summary, summaryContent);
if (RED.user.hasPermission("projects.write")) {
$('<button class="editor-button editor-button-small" style="float: right;">' + RED._('sidebar.project.editDescription') + '</button>')

6
packages/node_modules/@node-red/editor-client/src/js/ui/projects/projectUserSettings.js vendored
View File

@@ -27,7 +27,7 @@ RED.projects.userSettings = (function() {
var title = $('<h3></h3>').text(RED._("editor:sidebar.project.userSettings.committerDetail")).appendTo(pane);
var gitconfigContainer = $('<div class="red-ui-settings-section"></div>').appendTo(pane);
$('<div style="color:#aaa;"></div>').appendTo(gitconfigContainer).text(RED._("editor:sidebar.project.userSettings.committerTip"));
$('<div class="red-ui-settings-section-description"></div>').appendTo(gitconfigContainer).text(RED._("editor:sidebar.project.userSettings.committerTip"));
var row = $('<div class="red-ui-settings-row"></div>').appendTo(gitconfigContainer);
$('<label for=""></label>').text(RED._("editor:sidebar.project.userSettings.userName")).appendTo(row);
@@ -45,7 +45,7 @@ RED.projects.userSettings = (function() {
var container = $('<div class="red-ui-settings-section"></div>').appendTo(pane);
var popover;
var title = $('<h3></h3>').text(RED._("editor:sidebar.project.userSettings.sshKeys")).appendTo(container);
var subtitle = $('<div style="color:#aaa;"></div>').appendTo(container).text(RED._("editor:sidebar.project.userSettings.sshKeysTip"));
var subtitle = $('<div class="red-ui-settings-section-description"></div>').appendTo(container).text(RED._("editor:sidebar.project.userSettings.sshKeysTip"));
var addKeyButton = $('<button id="user-settings-gitconfig-add-key" class="editor-button editor-button-small" style="float: right; margin-right: 10px;">'+RED._("editor:sidebar.project.userSettings.add")+'</button>')
.appendTo(subtitle)
@@ -95,7 +95,7 @@ RED.projects.userSettings = (function() {
var addKeyDialogBody = $('<div>').appendTo(addKeyDialog);
row = $('<div class="red-ui-settings-row"></div>').appendTo(addKeyDialogBody);
$('<div style="color:#aaa;"></div>').appendTo(row).text(RED._("editor:sidebar.project.userSettings.addSshKeyTip"));
$('<div class="red-ui-settings-section-description"></div>').appendTo(row).text(RED._("editor:sidebar.project.userSettings.addSshKeyTip"));
// var bg = $('<div></div>',{class:"button-group", style:"text-align: center"}).appendTo(row);
// var addLocalButton = $('<button class="editor-button toggle selected">use local key</button>').appendTo(bg);
// var uploadButton = $('<button class="editor-button toggle">upload key</button>').appendTo(bg);

70
packages/node_modules/@node-red/editor-client/src/js/ui/projects/projects.js vendored
View File

@@ -852,14 +852,14 @@ RED.projects = (function() {
var row = $('<div class="form-row red-ui-projects-dialog-screen-create-row red-ui-projects-dialog-screen-create-row-empty"></div>').appendTo(body);
$('<label>'+RED._("projects.encryption-config.credentials")+'</label>').appendTo(row);
var credentialsBox = $('<div style="width: 550px">').appendTo(row);
var credentialsRightBox = $('<div style="min-height:150px; box-sizing: border-box; float: right; vertical-align: top; width: 331px; margin-left: -1px; padding: 15px; margin-top: -15px; border: 1px solid #ccc; border-radius: 3px; display: inline-block">').appendTo(credentialsBox);
var credentialsLeftBox = $('<div style="vertical-align: top; width: 220px; display: inline-block">').appendTo(credentialsBox);
var credentialsBox = $('<div class="red-ui-projects-dialog-credentials-box">').appendTo(row);
var credentialsRightBox = $('<div class="red-ui-projects-dialog-credentials-box-right">').appendTo(credentialsBox);
var credentialsLeftBox = $('<div class="red-ui-projects-dialog-credentials-box-left">').appendTo(credentialsBox);
var credentialsEnabledBox = $('<div class="form-row" style="padding: 7px 8px 3px 8px;border: 1px solid #ccc;border-radius: 4px;border-top-right-radius: 0;border-bottom-right-radius: 0;border-right-color: white;"></div>').appendTo(credentialsLeftBox);
$('<label class="red-ui-projects-edit-form-inline-label" style="margin-left: 5px"><input type="radio" style="vertical-align: middle; margin-top:0; margin-right: 10px;" name="projects-encryption-type" value="enabled"> <i style="font-size: 1.4em; margin-right: 8px; vertical-align: middle; color: #888;" class="fa fa-lock"></i> <span style="vertical-align: middle;">'+RED._("projects.encryption-config.enable")+'</span></label>').appendTo(credentialsEnabledBox);
var credentialsDisabledBox = $('<div class="form-row" style="padding: 7px 8px 3px 8px;border: 1px solid white;border-radius: 4px;border-top-right-radius: 0;border-bottom-right-radius: 0;border-right-color: #ccc; "></div>').appendTo(credentialsLeftBox);
$('<label class="red-ui-projects-edit-form-inline-label" style="margin-left: 5px"><input type="radio" style="vertical-align: middle; margin-top:0; margin-right: 10px;" name="projects-encryption-type" value="disabled"> <i style="font-size: 1.4em; margin-right: 8px; vertical-align: middle; color: #888;" class="fa fa-unlock"></i> <span style="vertical-align: middle;">'+RED._("projects.encryption-config.disable")+'</span></label>').appendTo(credentialsDisabledBox);
var credentialsEnabledBox = $('<div class="form-row red-ui-projects-dialog-credentials-box-enabled"></div>').appendTo(credentialsLeftBox);
$('<label class="red-ui-projects-edit-form-inline-label"><input type="radio" name="projects-encryption-type" value="enabled"> <i class="fa fa-lock"></i> <span>'+RED._("projects.encryption-config.enable")+'</span></label>').appendTo(credentialsEnabledBox);
var credentialsDisabledBox = $('<div class="form-row red-ui-projects-dialog-credentials-box-disabled"></div>').appendTo(credentialsLeftBox);
$('<label class="red-ui-projects-edit-form-inline-label"><input type="radio" name="projects-encryption-type" value="disabled"> <i class="fa fa-unlock"></i> <span>'+RED._("projects.encryption-config.disable")+'</span></label>').appendTo(credentialsDisabledBox);
credentialsLeftBox.find("input[name=projects-encryption-type]").on("click", function(e) {
var val = $(this).val();
@@ -881,15 +881,8 @@ RED.projects = (function() {
$(".projects-encryption-disabled-row").show();
}
toEnable.css({
borderColor: "#ccc",
borderRightColor: "white"
});
toDisable.css({
borderColor: "white",
borderRightColor: "#ccc"
});
toEnable.removeClass("disabled");
toDisable.addClass("disabled");
validateForm();
})
@@ -1266,14 +1259,14 @@ RED.projects = (function() {
row = $('<div class="form-row red-ui-projects-dialog-screen-create-row red-ui-projects-dialog-screen-create-row-empty"></div>').appendTo(container);
$('<label>'+RED._("projects.create.credentials")+'</label>').appendTo(row);
var credentialsBox = $('<div style="width: 550px">').appendTo(row);
var credentialsRightBox = $('<div style="min-height:150px; box-sizing: border-box; float: right; vertical-align: top; width: 331px; margin-left: -1px; padding: 15px; margin-top: -15px; border: 1px solid #ccc; border-radius: 3px; display: inline-block">').appendTo(credentialsBox);
var credentialsLeftBox = $('<div style="vertical-align: top; width: 220px; display: inline-block">').appendTo(credentialsBox);
var credentialsBox = $('<div class="red-ui-projects-dialog-credentials-box">').appendTo(row);
var credentialsRightBox = $('<div class="red-ui-projects-dialog-credentials-box-right">').appendTo(credentialsBox);
var credentialsLeftBox = $('<div class="red-ui-projects-dialog-credentials-box-left">').appendTo(credentialsBox);
var credentialsEnabledBox = $('<div class="form-row" style="padding: 7px 8px 3px 8px;border: 1px solid #ccc;border-radius: 4px;border-top-right-radius: 0;border-bottom-right-radius: 0;border-right-color: white;"></div>').appendTo(credentialsLeftBox);
$('<label class="red-ui-projects-edit-form-inline-label" style="margin-left: 5px"><input type="radio" checked style="vertical-align: middle; margin-top:0; margin-right: 10px;" name="projects-encryption-type" value="enabled"> <i style="font-size: 1.4em; margin-right: 8px; vertical-align: middle; color: #888;" class="fa fa-lock"></i> <span style="vertical-align: middle;">'+RED._("projects.create.enable-encryption")+'</span></label>').appendTo(credentialsEnabledBox);
var credentialsDisabledBox = $('<div class="form-row" style="padding: 7px 8px 3px 8px;border: 1px solid white;border-radius: 4px;border-top-right-radius: 0;border-bottom-right-radius: 0;border-right-color: #ccc; "></div>').appendTo(credentialsLeftBox);
$('<label class="red-ui-projects-edit-form-inline-label" style="margin-left: 5px"><input type="radio" style="vertical-align: middle; margin-top:0; margin-right: 10px;" name="projects-encryption-type" value="disabled"> <i style="font-size: 1.4em; margin-right: 8px; vertical-align: middle; color: #888;" class="fa fa-unlock"></i> <span style="vertical-align: middle;">'+RED._("projects.create.disable-encryption")+'</span></label>').appendTo(credentialsDisabledBox);
var credentialsEnabledBox = $('<div class="form-row red-ui-projects-dialog-credentials-box-enabled"></div>').appendTo(credentialsLeftBox);
$('<label class="red-ui-projects-edit-form-inline-label"><input type="radio" name="projects-encryption-type" value="enabled"> <i class="fa fa-lock"></i> <span>'+RED._("projects.encryption-config.enable")+'</span></label>').appendTo(credentialsEnabledBox);
var credentialsDisabledBox = $('<div class="form-row red-ui-projects-dialog-credentials-box-disabled disabled"></div>').appendTo(credentialsLeftBox);
$('<label class="red-ui-projects-edit-form-inline-label"><input type="radio" name="projects-encryption-type" value="disabled"> <i class="fa fa-unlock"></i> <span>'+RED._("projects.encryption-config.disable")+'</span></label>').appendTo(credentialsDisabledBox);
credentialsLeftBox.find("input[name=projects-encryption-type]").on("click", function(e) {
var val = $(this).val();
@@ -1294,15 +1287,8 @@ RED.projects = (function() {
$(".projects-encryption-disabled-row").show();
}
toEnable.css({
borderColor: "#ccc",
borderRightColor: "white"
});
toDisable.css({
borderColor: "white",
borderRightColor: "#ccc"
})
toEnable.removeClass("disabled");
toDisable.addClass("disabled");
validateForm();
})
@@ -1689,7 +1675,7 @@ RED.projects = (function() {
dialogBody.append(container);
dialog.dialog('option','title',screen.title||"");
dialog.dialog("open");
dialog.dialog({position: { 'my': 'center top', 'at': 'center top+10%', 'of': window }});
dialog.dialog({position: { 'my': 'center top', 'at': 'center top+20', 'of': window }});
}
function createProjectList(options) {
@@ -2217,25 +2203,17 @@ RED.projects = (function() {
}
function init() {
dialog = $('<div id="red-ui-projects-dialog" class="hide node-red-dialog red-ui-projects-edit-form"><form class="form-horizontal"></form><div class="red-ui-component-spinner hide"><img src="red/images/spin.svg"/></div></div>')
dialog = $('<div id="red-ui-projects-dialog" class="hide red-ui-projects-edit-form"><form class="form-horizontal"></form><div class="red-ui-component-spinner hide"><img src="red/images/spin.svg"/></div></div>')
.appendTo("#red-ui-editor")
.dialog({
modal: true,
autoOpen: false,
width: 600,
resizable: false,
open: function(e) {
$(this).parent().find(".ui-dialog-titlebar-close").hide();
// $("#red-ui-header-shade").show();
// $("#red-ui-editor-shade").show();
// $("#red-ui-palette-shade").show();
// $("#red-ui-sidebar-shade").show();
},
close: function(e) {
// $("#red-ui-header-shade").hide();
// $("#red-ui-editor-shade").hide();
// $("#red-ui-palette-shade").hide();
// $("#red-ui-sidebar-shade").hide();
classes: {
"ui-dialog": "red-ui-editor-dialog",
"ui-dialog-titlebar-close": "hide",
"ui-widget-overlay": "red-ui-editor-dialog"
}
});
dialogBody = dialog.find("form");

1
packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js vendored
View File

@@ -178,6 +178,7 @@ RED.sidebar = (function() {
})
$("#red-ui-sidebar-separator").on("mouseleave", function() {
if (!sidebarSeparator.dragging) {
sidebarControls.stop(false,true);
sidebarControls.hide();
}
});

6
packages/node_modules/@node-red/editor-client/src/js/user.js vendored
View File

@@ -30,7 +30,11 @@ RED.user = (function() {
dialog.dialog({
autoOpen: false,
dialogClass: "ui-dialog-no-close",
classes: {
"ui-dialog": "red-ui-editor-dialog",
"ui-dialog-titlebar-close": "hide",
"ui-widget-overlay": "red-ui-editor-dialog"
},
modal: true,
closeOnEscape: !!opts.cancelable,
width: 600,