From 183fa59c833da8ee59ae79cb3068345098544a18 Mon Sep 17 00:00:00 2001 From: Nick O'Leary Date: Wed, 26 Aug 2020 00:15:36 +0100 Subject: [PATCH] Add tgz upload button to palette manager --- .../editor-client/locales/en-US/editor.json | 4 +- .../editor-client/src/js/ui/palette-editor.js | 91 ++++++++++++++++++- .../src/sass/palette-editor.scss | 38 ++++++++ 3 files changed, 127 insertions(+), 6 deletions(-) diff --git a/packages/node_modules/@node-red/editor-client/locales/en-US/editor.json b/packages/node_modules/@node-red/editor-client/locales/en-US/editor.json index 309f9db89..f12d56f00 100755 --- a/packages/node_modules/@node-red/editor-client/locales/en-US/editor.json +++ b/packages/node_modules/@node-red/editor-client/locales/en-US/editor.json @@ -22,7 +22,8 @@ "color": "Color", "position": "Position", "enable": "Enable", - "disable": "Disable" + "disable": "Disable", + "upload": "Upload" }, "type": { "string": "string", @@ -532,6 +533,7 @@ "sortAZ": "a-z", "sortRecent": "recent", "more": "+ __count__ more", + "upload": "Upload module tgz file", "errors": { "catalogLoadFailed": "

Failed to load node catalogue.

Check the browser console for more information

", "installFailed": "

Failed to install: __module__

__message__

Check the log for more information

", diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/palette-editor.js b/packages/node_modules/@node-red/editor-client/src/js/ui/palette-editor.js index f89d6ab9e..e2bb3b30f 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/palette-editor.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/palette-editor.js @@ -542,8 +542,6 @@ RED.palette.editor = (function() { return settingsPane; } - - function createSettingsPane() { settingsPane = $('
'); var content = $('
'+ @@ -574,7 +572,11 @@ RED.palette.editor = (function() { minimumActiveTabWidth: 110 }); + createNodeTab(content); + createInstallTab(content); + } + function createNodeTab(content) { var modulesTab = $('
',{class:"red-ui-palette-editor-tab"}).appendTo(content); editorTabs.addTab({ @@ -726,9 +728,9 @@ RED.palette.editor = (function() { } } }); + } - - + function createInstallTab(content) { var installTab = $('
',{class:"red-ui-palette-editor-tab hide"}).appendTo(content); editorTabs.addTab({ @@ -761,7 +763,6 @@ RED.palette.editor = (function() { } }); - $('').text(RED._("palette.editor.sort")+' ').appendTo(toolBar); var sortGroup = $('').appendTo(toolBar); var sortRelevance = $('').appendTo(sortGroup); @@ -795,6 +796,7 @@ RED.palette.editor = (function() { loadedIndex = {}; initInstallTab(); }) + RED.popover.tooltip(refreshButton,"NLS-TODO: Refresh module list"); packageList = $('
    ',{style:"position: absolute;top: 79px;bottom: 0;left: 0;right: 0px;"}).appendTo(installTab).editableList({ addButton: false, @@ -878,8 +880,87 @@ RED.palette.editor = (function() { } }); + if (RED.settings.theme('palette.upload') !== false) { + var uploadSpan = $('').prependTo(toolBar); + var uploadButton = $('').appendTo(uploadSpan); + + var uploadInput = uploadButton.find('input[type="file"]'); + uploadInput.on("change", function(evt) { + if (this.files.length > 0) { + uploadFilenameLabel.text(this.files[0].name) + uploadToolbar.slideDown(200); + } + }) + + var uploadToolbar = $('
    ').appendTo(installTab); + var uploadForm = $('
    ').appendTo(uploadToolbar); + var uploadFilename = $('
    ').appendTo(uploadForm); + var uploadFilenameLabel = $('').appendTo(uploadFilename); + var uploadButtons = $('
    ').appendTo(uploadForm); + $('').text(RED._("common.label.cancel")).appendTo(uploadButtons).on("click", function(evt) { + evt.preventDefault(); + uploadToolbar.slideUp(200); + uploadInput.val(""); + }); + $('').text(RED._("common.label.upload")).appendTo(uploadButtons).on("click", function(evt) { + evt.preventDefault(); + + var spinner = RED.utils.addSpinnerOverlay(uploadToolbar, true); + var buttonRow = $('
    ').appendTo(spinner); + $('').text(RED._("eventLog.view")).appendTo(buttonRow).on("click", function(evt) { + evt.preventDefault(); + RED.actions.invoke("core:show-event-log"); + }); + RED.eventLog.startEvent(RED._("palette.editor.confirm.button.install")+" : "+uploadInput[0].files[0].name); + + var data = new FormData(); + data.append("tarball",uploadInput[0].files[0]); + var filename = uploadInput[0].files[0].name; + $.ajax({ + url: 'nodes', + data: data, + cache: false, + contentType: false, + processData: false, + method: 'POST', + }).always(function(data,textStatus,xhr) { + spinner.remove(); + uploadInput.val(""); + uploadToolbar.slideUp(200); + }).fail(function(xhr,textStatus,err) { + var message = textStatus; + if (xhr.responseJSON) { + message = xhr.responseJSON.message; + } + var notification = RED.notify(RED._('palette.editor.errors.installFailed',{module: filename,message:message}),{ + type: 'error', + modal: true, + fixed: true, + buttons: [ + { + text: RED._("common.label.close"), + click: function() { + notification.close(); + } + },{ + text: RED._("eventLog.view"), + click: function() { + notification.close(); + RED.actions.invoke("core:show-event-log"); + } + } + ] + }); + uploadInput.val(""); + uploadToolbar.slideUp(200); + }) + }) + RED.popover.tooltip(uploadButton,RED._("palette.editor.upload")); + } + $('
    ').appendTo(installTab); } + function update(entry,version,url,container,done) { if (RED.settings.theme('palette.editable') === false) { done(new Error('Palette not editable')); diff --git a/packages/node_modules/@node-red/editor-client/src/sass/palette-editor.scss b/packages/node_modules/@node-red/editor-client/src/sass/palette-editor.scss index 7e167e4a4..7ed9bc7e4 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/palette-editor.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/palette-editor.scss @@ -237,3 +237,41 @@ ul.red-ui-palette-module-error-list { #red-ui-palette-module-install-shade { padding-top: 80px; } +button.red-ui-palette-editor-upload-button { + padding: 0; + height: 25px; + margin-top: -1px; + + input[type="file"] { + opacity: 0; + margin: 0; + height: 0; + width: 0; + } + .red-ui-settings-tabs-content & label { + margin: 0; + min-width: 0; + padding: 2px 8px; + } +} +.red-ui-palette-editor-upload { + display: none; + position: absolute; + left: 0; + right: 0; + top: 44px; + padding: 20px; + background: $secondary-background; + border-bottom: 1px $secondary-border-color solid; + box-shadow: 1px 1px 4px $shadow; + + .placeholder-input { + width: calc(100% - 180px); + } +} +.red-ui-palette-editor-upload-buttons { + float: right; + button { + margin-left: 10px; + } +} \ No newline at end of file