frodovdr/node-red
1
0
Fork 0
mirror of https://github.com/node-red/node-red.git synced 2023-10-10 13:36:53 +02:00
Code Issues Releases Wiki Activity

Move editor project files and add search to open dialog

Browse Source
This commit is contained in:
Nick O'Leary 2018-01-08 23:14:37 +00:00
parent 1c2ea56f42
commit 8a6488b067
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
6 changed files with 203 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
Gruntfile.js
View File

@ -153,10 +153,10 @@ module.exports = function(grunt) {
"editor/js/ui/typeSearch.js",
"editor/js/ui/subflow.js",
"editor/js/ui/userSettings.js",
"editor/js/ui/projects.js",
"editor/js/ui/projectSettings.js",
"editor/js/ui/projectUserSettings.js",
"editor/js/ui/tab-versionControl.js",
"editor/js/ui/projects/projects.js",
"editor/js/ui/projects/projectSettings.js",
"editor/js/ui/projects/projectUserSettings.js",
"editor/js/ui/projects/tab-versionControl.js",
"editor/js/ui/touch/radialMenu.js"
],
dest: "public/red/red.js"

0
editor/js/ui/projectSettings.js → editor/js/ui/projects/projectSettings.js
View File

0
editor/js/ui/projectUserSettings.js → editor/js/ui/projects/projectUserSettings.js
View File

150
editor/js/ui/projects.js → editor/js/ui/projects/projects.js
View File

@ -42,17 +42,6 @@ RED.projects = (function() {
$('<p>').text("To get started you can create your first project using your current flow files in a few easy steps.").appendTo(body);
$('<p>').text("If you are not sure, you can skip this for now. You will still be able to create your first project from the 'Projects' menu option at any time.").appendTo(body);
// var buttons = $('<div style="margin: 30px"></div>').appendTo(container);
// var createNew = $('<button class="editor-button"><i class="fa fa-archive fa-2x"></i><i class="fa fa-plus-circle" style="position:absolute"></i><br/>Create a project</button>').appendTo(buttons);
// createNew.click(function(e) {
// e.preventDefault();
// show('create');
// });
// var openExisting = $('<button class="editor-button"><i class="fa fa-folder-open-o fa-2x"></i><br/>Open a project</button>').appendTo(buttons);
// openExisting.click(function(e) {
// e.preventDefault();
// show('open')
// });
return container;
},
buttons: [
@ -1075,14 +1064,19 @@ RED.projects = (function() {
]
}
})(),
'open': {
'open': (function() {
var selectedProject;
return {
title: "Open a project", // TODO: NLS
content: function() {
return createProjectList({
canSelectActive: false,
dblclick: function() {
dblclick: function(project) {
selectedProject = project;
$("#projects-dialog-open").click();
},
select: function() {
select: function(project) {
selectedProject = project;
$("#projects-dialog-open").prop('disabled',false).removeClass('disabled ui-button-disabled ui-state-disabled');
}
})
@ -1112,16 +1106,20 @@ RED.projects = (function() {
}
}
]
},
'delete': {
}
})(),
'delete': (function() {
var selectedProject;
return {
content: function() {
return createProjectList({
canSelectActive: false,
dblclick: function() {
dblclick: function(project) {
selectedProject = project;
$("#projects-dialog-delete").click();
},
select: function() {
select: function(project) {
selectedProject = project;
$("#projects-dialog-delete").prop('disabled',false).removeClass('disabled ui-button-disabled ui-state-disabled');
}
})
@ -1154,8 +1152,8 @@ RED.projects = (function() {
}
}
]
}
})()
}
}
@ -1222,15 +1220,107 @@ RED.projects = (function() {
dialog.dialog({position: { 'my': 'center top', 'at': 'center top+10%', 'of': window }});
}
var selectedProject = null;
function createProjectList(options) {
options = options||{};
var height = options.height || "300px";
selectedProject = null;
var container = $('<div></div>',{style:"min-height: "+height+"; height: "+height+";"});
var container = $('<div></div>',{class:"projects-dialog-project-list-container" });
var filterTerm = "";
var list = $('<ol>',{class:"projects-dialog-project-list", style:"height:"+height}).appendTo(container).editableList({
var searchDiv = $("<div>",{class:"red-ui-search-container"}).appendTo(container);
var searchInput = $('<input type="text" placeholder="search your projects">').appendTo(searchDiv).searchBox({
//data-i18n="[placeholder]menu.label.searchInput"
delay: 200,
change: function() {
filterTerm = $(this).val();
list.editableList('filter');
if (selectedListItem && !selectedListItem.is(":visible")) {
selectedListItem.children().children().removeClass('selected');
selectedListItem = list.children(":visible").first();
selectedListItem.children().children().addClass('selected');
if (options.select) {
options.select(selectedListItem.children().data('data'));
}
}
ensureSelectedIsVisible();
}
});
var selectedListItem;
searchInput.on('keydown',function(evt) {
if (evt.keyCode === 40) {
evt.preventDefault();
// Down
var next = selectedListItem;
if (selectedListItem) {
do {
next = next.next();
} while(next.length !== 0 && !next.is(":visible"));
if (next.length === 0) {
return;
}
selectedListItem.children().children().removeClass('selected');
} else {
next = list.children(":visible").first();
}
selectedListItem = next;
selectedListItem.children().children().addClass('selected');
if (options.select) {
options.select(selectedListItem.children().data('data'));
}
ensureSelectedIsVisible();
} else if (evt.keyCode === 38) {
evt.preventDefault();
// Up
var prev = selectedListItem;
if (selectedListItem) {
do {
prev = prev.prev();
} while(prev.length !== 0 && !prev.is(":visible"));
if (prev.length === 0) {
return;
}
selectedListItem.children().children().removeClass('selected');
} else {
prev = list.children(":visible").first();
}
selectedListItem = prev;
selectedListItem.children().children().addClass('selected');
if (options.select) {
options.select(selectedListItem.children().data('data'));
}
ensureSelectedIsVisible();
} else if (evt.keyCode === 13) {
evt.preventDefault();
// Enter
if (selectedListItem) {
if (options.dblclick) {
options.dblclick(selectedListItem.children().data('data'));
}
}
}
});
searchInput.i18n();
var ensureSelectedIsVisible = function() {
var selectedEntry = list.find(".projects-dialog-project-list-entry.selected").parent().parent();
if (selectedEntry.length === 1) {
var scrollWindow = listContainer;
var scrollHeight = scrollWindow.height();
var scrollOffset = scrollWindow.scrollTop();
var y = selectedEntry.position().top;
var h = selectedEntry.height();
if (y > scrollHeight) {
scrollWindow.animate({scrollTop: '-='+(scrollHeight-y+10)},50);
} else if (y-h<0) {
scrollWindow.animate({scrollTop: '+='+(y-h-10)},50);
}
}
}
var listContainer = $('<div></div>',{class:"projects-dialog-project-list-inner-container" }).appendTo(container);
var list = $('<ol>',{class:"projects-dialog-project-list"}).appendTo(listContainer).editableList({
addButton: false,
scrollOnAdd: false,
addItem: function(row,index,entry) {
@ -1249,17 +1339,23 @@ RED.projects = (function() {
row.click(function(evt) {
$('.projects-dialog-project-list-entry').removeClass('selected');
header.addClass('selected');
selectedProject = entry;
selectedListItem = row.parent();
if (options.select) {
options.select(entry);
}
ensureSelectedIsVisible();
searchInput.focus();
})
if (options.dblclick) {
row.dblclick(function(evt) {
evt.preventDefault();
options.dblclick();
options.dblclick(entry);
})
}
},
filter: function(data) {
if (filterTerm === "") { return true; }
return data.name.toLowerCase().indexOf(filterTerm) !== -1;
}
});
if (options.small) {

0
editor/js/ui/tab-versionControl.js → editor/js/ui/projects/tab-versionControl.js
View File

11
editor/sass/projects.scss
View File

@ -166,6 +166,17 @@
.projects-dialog-screen-secret {
min-height: auto;
}
.projects-dialog-project-list-container {
border: 1px solid $secondary-border-color;
border-radius: 2px;
}
.projects-dialog-project-list-inner-container {
height: 300px;
overflow-y: scroll;
.red-ui-editableList-border {
border: none;
}
}
.projects-dialog-project-list {
li {
padding: 0 !important;