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

Move project sidebar to project settings dialog

This commit is contained in:
Nick O'Leary 2017-09-20 22:51:28 +01:00
parent b1cd13d629
commit edc2310599
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
11 changed files with 365 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
Gruntfile.js
View File

@ -154,6 +154,7 @@ module.exports = function(grunt) {
"editor/js/ui/subflow.js",
"editor/js/ui/userSettings.js",
"editor/js/ui/projects.js",
"editor/js/ui/projectSettings.js",
"editor/js/ui/touch/radialMenu.js"
],
dest: "public/red/red.js"

9
editor/js/main.js
View File

@ -43,7 +43,7 @@
$(".palette-scroll").removeClass("hide");
$("#palette-search").removeClass("hide");
loadFlows(function() {
RED.projects.refreshSidebar();
RED.projects.refresh();
var persistentNotifications = {};
RED.comms.subscribe("notification/#",function(topic,msg) {
@ -60,10 +60,11 @@
if (notificationId === "project-change") {
RED.nodes.clear();
RED.history.clear();
RED.projects.refreshSidebar();
RED.projects.showSidebar();
RED.view.redraw(true);
RED.projects.refresh();
loadFlows(function() {
RED.notify("NLS: Project changed to "+msg.project);
RED.sidebar.info.refresh()
});
return;
}
@ -74,8 +75,6 @@
text += '<p><a href="#" onclick="RED.projects.showCredentialsPrompt(); return false;">'+'Setup credentials'+'</a></p>';
}
}
if (!persistentNotifications.hasOwnProperty(notificationId)) {
persistentNotifications[notificationId] = RED.notify(text,msg.type,msg.timeout === undefined,msg.timeout);
} else {

262
editor/js/ui/projectSettings.js Normal file
View File

@ -0,0 +1,262 @@
/**
* Copyright JS Foundation and other contributors, http://js.foundation
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
**/
RED.projects.settings = (function() {
var trayWidth = 700;
var settingsVisible = false;
var panes = [];
function addPane(options) {
panes.push(options);
}
// TODO: DRY - tab-info.js
function addTargetToExternalLinks(el) {
$(el).find("a").each(function(el) {
var href = $(this).attr('href');
if (/^https?:/.test(href)) {
$(this).attr('target','_blank');
}
});
return el;
}
function show(initialTab) {
if (settingsVisible) {
return;
}
settingsVisible = true;
var tabContainer;
var trayOptions = {
title: "NLS: Project Information",// RED._("menu.label.userSettings"),
buttons: [
{
id: "node-dialog-ok",
text: RED._("common.label.close"),
class: "primary",
click: function() {
RED.tray.close();
}
}
],
resize: function(dimensions) {
trayWidth = dimensions.width;
},
open: function(tray) {
var project = RED.projects.getActiveProject();
var trayBody = tray.find('.editor-tray-body');
var settingsContent = $('<div></div>').appendTo(trayBody);
var tabContainer = $('<div></div>',{id:"user-settings-tabs-container"}).appendTo(settingsContent);
$('<ul></ul>',{id:"user-settings-tabs"}).appendTo(tabContainer);
var settingsTabs = RED.tabs.create({
id: "user-settings-tabs",
vertical: true,
onchange: function(tab) {
setTimeout(function() {
$("#user-settings-tabs-content").children().hide();
$("#" + tab.id).show();
if (tab.pane.focus) {
tab.pane.focus();
}
},50);
}
});
var tabContents = $('<div></div>',{id:"user-settings-tabs-content"}).appendTo(settingsContent);
panes.forEach(function(pane) {
settingsTabs.addTab({
id: "project-settings-tab-"+pane.id,
label: pane.title,
pane: pane
});
pane.get(project).hide().appendTo(tabContents);
});
settingsContent.i18n();
settingsTabs.activateTab("project-settings-tab-"+(initialTab||'view'))
$("#sidebar-shade").show();
},
close: function() {
settingsVisible = false;
panes.forEach(function(pane) {
if (pane.close) {
pane.close();
}
});
$("#sidebar-shade").hide();
},
show: function() {}
}
if (trayWidth !== null) {
trayOptions.width = trayWidth;
}
RED.tray.show(trayOptions);
}
function addSpinnerOverlay(container) {
var spinner = $('<div class="projects-dialog-spinner projects-dialog-spinner-sidebar"><img src="red/images/spin.svg"/></div>').appendTo(container);
return spinner;
}
function editDescription(activeProject, container) {
RED.editor.editMarkdown({
title: RED._('sidebar.project.editDescription'),
value: activeProject.description,
complete: function(v) {
container.empty();
var spinner = addSpinnerOverlay(container);
var done = function(err,res) {
if (err) {
return editDescription(activeProject, container);
}
activeProject.description = v;
updateProjectDescription(activeProject, container);
}
utils.sendRequest({
url: "projects/"+activeProject.name,
type: "PUT",
responses: {
0: function(error) {
done(error,null);
},
200: function(data) {
done(null,data);
},
400: {
'unexpected_error': function(error) {
done(error,null);
}
},
}
},{description:v}).always(function() {
spinner.remove();
});
}
});
}
function updateProjectDescription(activeProject, container) {
container.empty();
var desc = marked(activeProject.description||"");
var description = addTargetToExternalLinks($('<span class="bidiAware" dir=\"'+RED.text.bidi.resolveBaseTextDir(desc)+'">'+desc+'</span>')).appendTo(container);
description.find(".bidiAware").contents().filter(function() { return this.nodeType === 3 && this.textContent.trim() !== "" }).wrap( "<span></span>" );
}
function editSummary(activeProject, summary, container) {
var editButton = container.prev();
editButton.hide();
container.empty();
var bg = $('<span class="button-group" style="position: relative; float: right; margin-right:0;"></span>').appendTo(container);
var input = $('<input type="text" style="width: calc(100% - 150px); margin-right: 10px;">').val(summary||"").appendTo(container);
$('<button class="editor-button">Cancel</button>')
.appendTo(bg)
.click(function(evt) {
evt.preventDefault();
updateProjectSummary(activeProject.summary, container);
editButton.show();
});
$('<button class="editor-button">Done</button>')
.appendTo(bg)
.click(function(evt) {
evt.preventDefault();
var v = input.val();
updateProjectSummary(v, container);
var spinner = addSpinnerOverlay(container);
var done = function(err,res) {
if (err) {
spinner.remove();
return editSummary(activeProject, summary, container);
}
activeProject.summary = v;
spinner.remove();
updateProjectSummary(activeProject.summary, container);
editButton.show();
}
utils.sendRequest({
url: "projects/"+activeProject.name,
type: "PUT",
responses: {
0: function(error) {
done(error,null);
},
200: function(data) {
done(null,data);
},
400: {
'unexpected_error': function(error) {
done(error,null);
}
},
}
},{summary:v});
});
}
function updateProjectSummary(summary, container) {
container.empty();
if (summary) {
container.text(summary).removeClass('node-info-node');
} else {
container.text("NLS: No summary available").addClass('node-info-none');
}
}
function createViewPane(activeProject) {
var pane = $('<div id="project-settings-tab-main" class="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);
updateProjectSummary(activeProject.summary, summaryContent);
$('<button class="editor-button editor-button-small" style="float: right;">edit</button>')
.prependTo(summary)
.click(function(evt) {
evt.preventDefault();
editSummary(activeProject, activeProject.summary, summaryContent);
});
$('<hr>').appendTo(pane);
var description = $('<div class="node-help" style="position: relative"></div>').appendTo(pane);
var descriptionContent = $('<div>',{style:"min-height: 200px"}).appendTo(description);
updateProjectDescription(activeProject, descriptionContent);
$('<button class="editor-button editor-button-small" style="float: right;">edit</button>')
.prependTo(description)
.click(function(evt) {
evt.preventDefault();
editDescription(activeProject, descriptionContent);
});
return pane;
}
var utils;
function init(_utils) {
utils = _utils;
addPane({
id:'main',
title: "NLS: Project",
get: createViewPane,
close: function() { }
})
}
return {
init: init,
show: show
};
})();

56
editor/js/ui/projects.js
View File

@ -464,6 +464,7 @@ RED.projects = (function() {
// dialogBody.hide();
console.log(options.url);
var start = Date.now();
// TODO: this is specific to the dialog-based requests
$(".projects-dialog-spinner").show();
$("#projects-dialog").parent().find(".ui-dialog-buttonset").children().css("visibility","hidden")
if (body) {
@ -535,8 +536,10 @@ RED.projects = (function() {
RED.actions.add("core:new-project",RED.projects.newProject);
RED.actions.add("core:open-project",RED.projects.selectProject);
RED.projects.settings.init({sendRequest:sendRequest});
initScreens();
initSidebar();
// initSidebar();
}
// function getRepoAuthDetails(req) {
@ -598,6 +601,7 @@ RED.projects = (function() {
// ])
// }
/*
var sidebarContent;
var sidebarSections;
@ -876,7 +880,6 @@ RED.projects = (function() {
function addSpinnerOverlay(container) {
var spinner = $('<div class="projects-dialog-spinner projects-dialog-spinner-sidebar"><img src="red/images/spin.svg"/></div>').appendTo(container);
return spinner;
}
function updateProjectSummary() {
sidebarSectionsInfo.empty();
@ -928,18 +931,6 @@ RED.projects = (function() {
}
}
function refreshSidebar() {
$.getJSON("projects",function(data) {
if (data.active) {
$.getJSON("projects/"+data.active, function(project) {
activeProject = project;
updateProjectSummary();
updateProjectDescription();
updateProjectDependencies();
});
}
});
}
// function getUsedModules() {
// var inuseModules = {};
@ -966,6 +957,24 @@ RED.projects = (function() {
});
return el;
}
*/
function refresh() {
$.getJSON("projects",function(data) {
if (data.active) {
$.getJSON("projects/"+data.active, function(project) {
activeProject = project;
// updateProjectSummary();
// updateProjectDescription();
// updateProjectDependencies();
console.log("project triggering a info refresh for ",activeProject)
RED.sidebar.info.refresh();
});
}
});
}
return {
init: init,
@ -981,15 +990,16 @@ RED.projects = (function() {
showCredentialsPrompt: function() {
show('credentialSecret');
},
showSidebar: showSidebar,
refreshSidebar: refreshSidebar,
showProjectEditor: function() {
RED.editor.editProject({
project: activeProject,
complete: function(result) {
console.log(result);
}
});
// showSidebar: showSidebar,
refresh: refresh,
editProject: function() {
RED.projects.settings.show();
// RED.editor.editProject({
// project: activeProject,
// complete: function(result) {
// console.log(result);
// }
// });
},
getActiveProject: function() {
return activeProject;

42
editor/js/ui/tab-info.js
View File

@ -109,6 +109,11 @@ RED.sidebar.info = (function() {
return el;
}
function refresh(node) {
console.log('sidebar.info.refresh');
if (node === undefined) {
refreshSelection();
return;
}
sections.show();
$(nodeSection.content).empty();
$(infoSection.content).empty();
@ -123,17 +128,22 @@ RED.sidebar.info = (function() {
var activeProject = RED.projects.getActiveProject();
if (activeProject) {
propRow = $('<tr class="node-info-node-row"><td>Project</td><td></td></tr>').appendTo(tableBody);
$(propRow.children()[1]).html('&nbsp;'+(activeProject.name||""))
$(propRow.children()[1]).text(activeProject.name||"");
$('<tr class="node-info-property-expand blank"><td colspan="2"></td></tr>').appendTo(tableBody);
$('<button class="editor-button editor-button-small" style="position:absolute;right:2px;"><i class="fa fa-ellipsis-h"></i></button>')
.appendTo(propRow.children()[1])
.click(function(evt) {
evt.preventDefault();
RED.projects.editProject();
});
}
infoSection.container.show();
if (node === undefined) {
if (node === null) {
return;
} else if (Array.isArray(node)) {
infoSection.container.hide();
propRow = $('<tr class="node-info-node-row"><td>'+RED._("sidebar.info.selection")+"</td><td></td></tr>").appendTo(tableBody);
$(propRow.children()[1]).html('&nbsp;'+RED._("sidebar.info.nodes",{count:node.length}))
$(propRow.children()[1]).text(RED._("sidebar.info.nodes",{count:node.length}))
} else {
var m = /^subflow(:(.+))?$/.exec(node.type);
if (m) {
@ -155,7 +165,7 @@ RED.sidebar.info = (function() {
propRow = $('<tr class="node-info-node-row"><td>'+RED._("sidebar.info."+(node.type==='tab'?'flow':'subflow'))+'</td><td></td></tr>').appendTo(tableBody);
RED.utils.createObjectElement(node.id).appendTo(propRow.children()[1]);
propRow = $('<tr class="node-info-node-row"><td>'+RED._("sidebar.info.tabName")+"</td><td></td></tr>").appendTo(tableBody);
$(propRow.children()[1]).html('&nbsp;'+(node.label||node.name||""))
$(propRow.children()[1]).text(node.label||node.name||"");
if (node.type === "tab") {
propRow = $('<tr class="node-info-node-row"><td>'+RED._("sidebar.info.status")+'</td><td></td></tr>').appendTo(tableBody);
$(propRow.children()[1]).html((!!!node.disabled)?RED._("sidebar.info.enabled"):RED._("sidebar.info.disabled"))
@ -166,10 +176,10 @@ RED.sidebar.info = (function() {
if (node.type !== "subflow" && node.name) {
$('<tr class="node-info-node-row"><td>'+RED._("common.label.name")+'</td><td>&nbsp;<span class="bidiAware" dir="'+RED.text.bidi.resolveBaseTextDir(node.name)+'">'+node.name+'</span></td></tr>').appendTo(tableBody);
$('<tr class="node-info-node-row"><td>'+RED._("common.label.name")+'</td><td><span class="bidiAware" dir="'+RED.text.bidi.resolveBaseTextDir(node.name)+'">'+node.name+'</span></td></tr>').appendTo(tableBody);
}
if (!m) {
$('<tr class="node-info-node-row"><td>'+RED._("sidebar.info.type")+"</td><td>&nbsp;"+node.type+"</td></tr>").appendTo(tableBody);
$('<tr class="node-info-node-row"><td>'+RED._("sidebar.info.type")+"</td><td>"+node.type+"</td></tr>").appendTo(tableBody);
}
if (!m && node.type != "subflow" && node.type != "comment") {
@ -357,7 +367,7 @@ RED.sidebar.info = (function() {
function clear() {
// sections.hide();
refresh();
refresh(null);
}
function set(html,title) {
@ -365,15 +375,16 @@ RED.sidebar.info = (function() {
// sections.show();
// nodeSection.container.hide();
infoSection.title.text(title||"");
refresh();
refresh(null);
$(infoSection.content).empty();
setInfoText(html);
$(".sidebar-node-info-stack").scrollTop(0);
}
RED.events.on("view:selection-changed",function(selection) {
function refreshSelection(selection) {
if (selection === undefined) {
selection = RED.view.selection();
}
if (selection.nodes) {
if (selection.nodes.length == 1) {
var node = selection.nodes[0];
@ -396,12 +407,15 @@ RED.sidebar.info = (function() {
if (workspace && workspace.info) {
refresh(workspace);
} else {
refresh()
refresh(null)
// clear();
}
}
}
});
}
RED.events.on("view:selection-changed",refreshSelection);
return {
init: init,

1
editor/js/ui/view.js
View File

@ -1141,7 +1141,6 @@ RED.view = (function() {
}
}
}
var selectionJSON = activeWorkspace+":"+JSON.stringify(selection,function(key,value) {
if (key === 'nodes') {
return value.map(function(n) { return n.id })

3
editor/js/ui/workspaces.js
View File

@ -312,6 +312,9 @@ RED.workspaces = (function() {
workspace_tabs.removeTab(ws.id);
}
}
if (ws.id === activeWorkspace) {
activeWorkspace = 0;
}
}
function setWorkspaceOrder(order) {

20
editor/sass/projects.scss
View File

@ -34,7 +34,8 @@
input[type=checkbox], input[type=radio] {
width: auto;
vertical-align: top;
} }
}
}
}
.projects-dialog-spinner {
position: absolute;
@ -58,10 +59,10 @@
width: 80px;
}
&.projects-dialog-spinner-sidebar {
padding: 20px;
background: $shade-color;
background: white;
padding:0;
img {
width: 50px;
width: 40px;
}
}
@ -231,3 +232,14 @@
}
}
}
.project-settings-tab-pane {
position: absolute;
top:0;
left:0;
right:0;
bottom:0;
overflow-y: scroll;
padding: 8px 20px 20px;
}

1
editor/sass/tab-info.scss
View File

@ -102,6 +102,7 @@ table.node-info tr:not(.blank) td:first-child{
table.node-info tr:not(.blank) td:last-child{
padding: 3px 3px 3px 6px;
color: #666;
overflow-y: hidden;
}
div.node-info {
margin: 5px;

9
red/api/editor/projects/index.js
View File

@ -80,9 +80,14 @@ module.exports = {
} else {
res.redirect(303,req.baseUrl + '/');
}
} else if (req.body.credentialSecret || req.body.description || req.body.dependencies) {
} else if (req.body.hasOwnProperty('credentialSecret') ||
req.body.hasOwnProperty('description') ||
req.body.hasOwnProperty('dependencies')||
req.body.hasOwnProperty('summary')) {
runtime.storage.projects.updateProject(req.params.id, req.body).then(function() {
res.redirect(303,req.baseUrl + '/');
setTimeout(function() {
res.redirect(303,req.baseUrl + '/');
},5000);
}).otherwise(function(err) {
if (err.code) {
res.status(400).json({error:err.code, message: err.message});

13
red/runtime/storage/localfilesystem/projects/index.js
View File

@ -143,6 +143,7 @@ function getProject(project) {
if (missingFiles.indexOf('package.json') === -1) {
promises.push(nodeFn.call(fs.readFile,fspath.join(projectPath,"package.json"),"utf8").then(function(content) {
var package = util.parseJSON(content);
projectData.summary = package.description||"";
projectData.dependencies = package.dependencies||{};
}));
}
@ -424,16 +425,22 @@ function updateProject(project,data) {
return setCredentialSecret(project,data.credentialSecret).then(function() {
return reloadActiveProject(project);
})
} else if (data.description) {
} else if (data.hasOwnProperty('description')) {
var projectPath = fspath.join(projectsDir,project);
var readmeFile = fspath.join(projectPath,"README.md");
return util.writeFile(readmeFile, data.description);
} else if (data.dependencies) {
} else if (data.hasOwnProperty('dependencies') || data.hasOwnProperty('summary')) {
var projectPath = fspath.join(projectsDir,project);
var packageJSON = fspath.join(projectPath,"package.json");
return nodeFn.call(fs.readFile,packageJSON,"utf8").then(function(content) {
var package = util.parseJSON(content);
package.dependencies = data.dependencies;
if (data.dependencies) {
package.dependencies = data.dependencies;
}
if (data.summary) {
package.description = data.summary;
}
return util.writeFile(packageJSON,JSON.stringify(package,"",4));
});
}