From 5e8279cf51bc99f8a949f21e1d1051ce4d5598ca Mon Sep 17 00:00:00 2001 From: Nick O'Leary Date: Tue, 26 Mar 2019 22:22:13 +0000 Subject: [PATCH 01/32] Add workspace statusBar --- Gruntfile.js | 1 + .../editor-client/src/js/ui/statusBar.js | 50 ++++++++++++++++ .../editor-client/src/js/ui/tab-info.js | 4 +- .../editor-client/src/js/ui/view-navigator.js | 5 ++ .../@node-red/editor-client/src/js/ui/view.js | 12 ++++ .../editor-client/src/sass/mixins.scss | 59 ++++++++++++++++--- .../editor-client/src/sass/palette.scss | 10 +--- .../editor-client/src/sass/sidebar.scss | 4 -- .../editor-client/src/sass/workspace.scss | 20 ++++--- .../editor-client/templates/index.mst | 15 ++--- 10 files changed, 137 insertions(+), 43 deletions(-) create mode 100644 packages/node_modules/@node-red/editor-client/src/js/ui/statusBar.js diff --git a/Gruntfile.js b/Gruntfile.js index 6a8a4002f..f834bc264 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -150,6 +150,7 @@ module.exports = function(grunt) { "packages/node_modules/@node-red/editor-client/src/js/ui/diff.js", "packages/node_modules/@node-red/editor-client/src/js/ui/keyboard.js", "packages/node_modules/@node-red/editor-client/src/js/ui/workspaces.js", + "packages/node_modules/@node-red/editor-client/src/js/ui/statusBar.js", "packages/node_modules/@node-red/editor-client/src/js/ui/view.js", "packages/node_modules/@node-red/editor-client/src/js/ui/view-navigator.js", "packages/node_modules/@node-red/editor-client/src/js/ui/view-tools.js", diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/statusBar.js b/packages/node_modules/@node-red/editor-client/src/js/ui/statusBar.js new file mode 100644 index 000000000..809f2c315 --- /dev/null +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/statusBar.js @@ -0,0 +1,50 @@ +/** + * 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.statusBar.add({ + id: "widget-identifier", + align: "left|right", + element: widgetElement + }) +*/ + +RED.statusBar = (function() { + + var widgets = {}; + var leftBucket; + var rightBucket; + + function addWidget(options) { + widgets[options.id] = options; + var el = $(''); + options.element.appendTo(el); + if (options.align === 'left') { + leftBucket.append(el); + } else if (options.align === 'right') { + rightBucket.prepend(el); + } + } + + return { + init: function() { + leftBucket = $('').appendTo("#workspace-footer"); + rightBucket = $('').appendTo("#workspace-footer"); + }, + add: addWidget + } + +})(); diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/tab-info.js b/packages/node_modules/@node-red/editor-client/src/js/ui/tab-info.js index 1101454ac..b66288c43 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/tab-info.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/tab-info.js @@ -74,13 +74,13 @@ RED.sidebar.info = (function() { tipBox = $('
').appendTo(tipContainer); var tipButtons = $('
').appendTo(tipContainer); - var tipRefresh = $('').appendTo(tipButtons); + var tipRefresh = $('').appendTo(tipButtons); tipRefresh.on("click", function(e) { e.preventDefault(); tips.next(); }) - var tipClose = $('').appendTo(tipButtons); + var tipClose = $('').appendTo(tipButtons); tipClose.on("click", function(e) { e.preventDefault(); RED.actions.invoke("core:toggle-show-tips"); diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view-navigator.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view-navigator.js index 8cab19558..b78e6acb7 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/view-navigator.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view-navigator.js @@ -153,6 +153,11 @@ navVis = navBox.append("svg:g") + RED.statusBar.add({ + id: "view-navigator", + align: "right", + element: $('') + }) $("#btn-navigate").on("click", function(evt) { evt.preventDefault(); diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js index 6920c60f4..25c8ae155 100755 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js @@ -321,6 +321,7 @@ RED.view = (function() { } function init() { + RED.statusBar.init(); RED.events.on("workspace:change",function(event) { if (event.old !== 0) { @@ -363,7 +364,18 @@ RED.view = (function() { RED.view.navigator.init(); + RED.statusBar.add({ + id: "view-zoom-controls", + align: "right", + element: $(''+ + ''+ + ''+ + ''+ + '') + }) + $("#btn-zoom-out").on("click", function() {zoomOut();}); + RED.popover.tooltip($("#btn-zoom-out"),RED._('actions.zoom-out'),'core:zoom-out'); $("#btn-zoom-zero").on("click", function() {zoomZero();}); RED.popover.tooltip($("#btn-zoom-zero"),RED._('actions.zoom-reset'),'core:zoom-reset'); diff --git a/packages/node_modules/@node-red/editor-client/src/sass/mixins.scss b/packages/node_modules/@node-red/editor-client/src/sass/mixins.scss index aacda031c..9f07f66ef 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/mixins.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/mixins.scss @@ -227,7 +227,7 @@ left: 0; right: 0; height: 25px; - line-height: 23px; + line-height: 25px; padding: 0 10px; user-select: none; @@ -239,10 +239,11 @@ @mixin component-footer-button { @include workspace-button; - font-size: 11px; - line-height: 17px; - width: 18px; - height: 18px; + font-size: 12px; + line-height: 18px; + width: 19px; + height: 19px; + padding: 0; &.text-button { width: auto; padding: 0 5px; @@ -250,10 +251,11 @@ } @mixin component-footer-button-toggle { @include workspace-button-toggle; - font-size: 11px; - line-height: 17px; - height: 18px; - width: 18px; + font-size: 12px; + line-height: 18px; + height: 19px; + width: 19px; + padding: 0; &.text-button { width: auto; padding: 0 5px; @@ -278,3 +280,42 @@ .component-shade { @include shade } + + +.red-ui-component-footer { + @include component-footer; +} + +.red-ui-footer-button { + @include component-footer-button; +} + +.red-ui-footer-button-toggle { + @include component-footer-button-toggle; +} + +.red-ui-statusbar-widget { + margin: 0 2px; + display: inline-block; + vertical-align: middle; + height: 100%; + line-height: 20px; +} + +.red-ui-statusbar-bucket { + position: absolute; + top: 0; + bottom: 0; +} +.red-ui-statusbar-bucket-left { + left: 10px; + .red-ui-statusbar-widget:first-child { + margin-left: 0; + } +} +.red-ui-statusbar-bucket-right { + right: 10px; + .red-ui-statusbar-widget:last-child { + margin-right: 0; + } +} diff --git a/packages/node_modules/@node-red/editor-client/src/sass/palette.scss b/packages/node_modules/@node-red/editor-client/src/sass/palette.scss index 78b2a73ee..a51c7c3e5 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/palette.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/palette.scss @@ -32,8 +32,7 @@ #palette { width: 8px; } #palette-search { display: none; } #palette-container { display: none; } - #palette-collapse-all { display: none; } - #palette-expand-all { display: none; } + #palette-footer { display: none; } } .palette-expanded { @@ -75,13 +74,6 @@ box-sizing:border-box; } -#palette-footer { - @include component-footer; -} -.palette-button { - @include component-footer-button; -} - .palette-category { border-bottom: 1px solid #ccc; } diff --git a/packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss b/packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss index d06b3d3cc..77dcbb34c 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss @@ -74,10 +74,6 @@ white-space: nowrap; } -#sidebar-footer { - @include component-footer; -} - .sidebar-footer-button { @include component-footer-button; } diff --git a/packages/node_modules/@node-red/editor-client/src/sass/workspace.scss b/packages/node_modules/@node-red/editor-client/src/sass/workspace.scss index 726c67dee..9b2b750c7 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/workspace.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/workspace.scss @@ -48,15 +48,17 @@ left: 7px; } -.workspace-footer-button { - @include component-footer-button; -} -.workspace-footer-button-toggle { - @include component-footer-button-toggle; -} -#workspace-footer { - @include component-footer; -} +// .workspace-footer-button { +// @include component-footer-button; +// margin-left: 2px; +// margin-right: 2px; +// } +// +// .workspace-footer-button-toggle { +// @include component-footer-button-toggle; +// margin-left: 2px; +// margin-right: 2px; +// } #workspace-tabs:not(.workspace-focussed) { opacity:0.8; diff --git a/packages/node_modules/@node-red/editor-client/templates/index.mst b/packages/node_modules/@node-red/editor-client/templates/index.mst index e69e04264..c56c78e2a 100644 --- a/packages/node_modules/@node-red/editor-client/templates/index.mst +++ b/packages/node_modules/@node-red/editor-client/templates/index.mst @@ -47,12 +47,7 @@
    - +
    @@ -62,16 +57,16 @@
    - From 10c818474ced54f6af2ac28779480208c0d690f5 Mon Sep 17 00:00:00 2001 From: Nick O'Leary Date: Mon, 29 Apr 2019 20:53:04 +0100 Subject: [PATCH 02/32] Tidy zoom control statusBar widget --- .../@node-red/editor-client/src/js/ui/view.js | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js index 25c8ae155..aadfe239b 100755 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js @@ -367,20 +367,20 @@ RED.view = (function() { RED.statusBar.add({ id: "view-zoom-controls", align: "right", - element: $(''+ - ''+ - ''+ - ''+ + element: $(''+ + ''+ + ''+ + ''+ '') }) - $("#btn-zoom-out").on("click", function() {zoomOut();}); + $("#red-ui-view-zoom-out").on("click", function() {zoomOut();}); - RED.popover.tooltip($("#btn-zoom-out"),RED._('actions.zoom-out'),'core:zoom-out'); - $("#btn-zoom-zero").on("click", function() {zoomZero();}); - RED.popover.tooltip($("#btn-zoom-zero"),RED._('actions.zoom-reset'),'core:zoom-reset'); - $("#btn-zoom-in").on("click", function() {zoomIn();}); - RED.popover.tooltip($("#btn-zoom-in"),RED._('actions.zoom-in'),'core:zoom-in'); + RED.popover.tooltip($("#red-ui-view-zoom-out"),RED._('actions.zoom-out'),'core:zoom-out'); + $("#red-ui-view-zoom-zero").on("click", function() {zoomZero();}); + RED.popover.tooltip($("#red-ui-view-zoom-zero"),RED._('actions.zoom-reset'),'core:zoom-reset'); + $("#red-ui-view-zoom-in").on("click", function() {zoomIn();}); + RED.popover.tooltip($("#red-ui-view-zoom-in"),RED._('actions.zoom-in'),'core:zoom-in'); $("#chart").on("DOMMouseScroll mousewheel", function (evt) { if ( evt.altKey ) { evt.preventDefault(); From a2632fdcc88f68dfa6fd1d51a4a2454a67912ef6 Mon Sep 17 00:00:00 2001 From: Nick O'Leary Date: Mon, 29 Apr 2019 22:38:14 +0100 Subject: [PATCH 03/32] Namespace all palette css --- .../@node-red/editor-client/src/js/red.js | 6 +- .../editor-client/src/js/ui/common/stack.js | 4 +- .../editor-client/src/js/ui/deploy.js | 8 +- .../@node-red/editor-client/src/js/ui/diff.js | 2 +- .../editor-client/src/js/ui/editor.js | 4 +- .../editor-client/src/js/ui/palette-editor.js | 8 +- .../editor-client/src/js/ui/palette.js | 172 ++++++++++-------- .../src/js/ui/projects/projects.js | 4 +- .../editor-client/src/js/ui/search.js | 8 +- .../editor-client/src/js/ui/tab-config.js | 20 +- .../editor-client/src/js/ui/tab-info.js | 6 +- .../@node-red/editor-client/src/js/ui/tray.js | 4 +- .../editor-client/src/js/ui/typeSearch.js | 2 +- .../editor-client/src/js/ui/utils.js | 8 +- .../@node-red/editor-client/src/js/ui/view.js | 2 +- .../editor-client/src/js/ui/workspaces.js | 4 +- .../editor-client/src/sass/diff.scss | 10 +- .../editor-client/src/sass/editor.scss | 6 +- .../editor-client/src/sass/palette.scss | 77 ++++---- .../editor-client/src/sass/projects.scss | 2 +- .../editor-client/src/sass/search.scss | 10 +- .../editor-client/src/sass/tab-config.scss | 4 +- .../editor-client/src/sass/tab-context.scss | 2 +- .../src/sass/ui/common/stack.scss | 2 +- .../editor-client/src/sass/workspace.scss | 2 +- .../editor-client/templates/index.mst | 13 +- .../@node-red/nodes/core/core/60-link.html | 4 +- 27 files changed, 192 insertions(+), 202 deletions(-) diff --git a/packages/node_modules/@node-red/editor-client/src/js/red.js b/packages/node_modules/@node-red/editor-client/src/js/red.js index 787166c00..0a9775ca2 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/red.js +++ b/packages/node_modules/@node-red/editor-client/src/js/red.js @@ -115,9 +115,9 @@ var RED = (function() { var stepConfig = function() { if (configs.length === 0) { $("body").i18n(); - $("#palette > .palette-spinner").hide(); - $(".palette-scroll").removeClass("hide"); - $("#palette-search").removeClass("hide"); + $("#red-ui-palette > .red-ui-palette-spinner").hide(); + $(".red-ui-palette-scroll").removeClass("hide"); + $("#red-ui-palette-search").removeClass("hide"); loadFlows(function() { if (RED.settings.theme("projects.enabled",false)) { RED.projects.refresh(function(activeProject) { diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/common/stack.js b/packages/node_modules/@node-red/editor-client/src/js/ui/common/stack.js index 0cb410b29..ddb88b549 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/common/stack.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/common/stack.js @@ -45,11 +45,11 @@ RED.stack = (function() { return { add: function(entry) { entries.push(entry); - entry.container = $('
    ').appendTo(container); + entry.container = $('
    ').appendTo(container); if (!visible) { entry.container.hide(); } - var header = $('
    ').appendTo(entry.container); + var header = $('
    ').appendTo(entry.container); entry.header = header; entry.contentWrap = $('
    ',{style:"position:relative"}).appendTo(entry.container); if (options.fill) { diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/deploy.js b/packages/node_modules/@node-red/editor-client/src/js/ui/deploy.js index 5fe8be1e3..9a5a56d99 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/deploy.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/deploy.js @@ -273,7 +273,7 @@ RED.deploy = (function() { deployInflight = true; $("#header-shade").show(); $("#editor-shade").show(); - $("#palette-shade").show(); + $("#red-ui-palette-shade").show(); $("#sidebar-shade").show(); $.ajax({ @@ -308,7 +308,7 @@ RED.deploy = (function() { $(".deploy-button-spinner").hide(); $("#header-shade").hide(); $("#editor-shade").hide(); - $("#palette-shade").hide(); + $("#red-ui-palette-shade").hide(); $("#sidebar-shade").hide(); },delta); }); @@ -424,7 +424,7 @@ RED.deploy = (function() { deployInflight = true; $("#header-shade").show(); $("#editor-shade").show(); - $("#palette-shade").show(); + $("#red-ui-palette-shade").show(); $("#sidebar-shade").show(); $.ajax({ url:"flows", @@ -494,7 +494,7 @@ RED.deploy = (function() { $(".deploy-button-spinner").hide(); $("#header-shade").hide(); $("#editor-shade").hide(); - $("#palette-shade").hide(); + $("#red-ui-palette-shade").hide(); $("#sidebar-shade").hide(); },delta); }); diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/diff.js b/packages/node_modules/@node-red/editor-client/src/js/ui/diff.js index e73dc7ec1..fd7a9bc7d 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/diff.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/diff.js @@ -497,7 +497,7 @@ RED.diff = (function() { } nodeDiv.css('backgroundColor',colour); - var iconContainer = $('
    ',{class:"palette_icon_container"}).appendTo(nodeDiv); + var iconContainer = $('
    ',{class:"red-ui-palette-icon-container"}).appendTo(nodeDiv); RED.utils.createIconElement(icon_url, iconContainer, false); return nodeDiv; diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/editor.js b/packages/node_modules/@node-red/editor-client/src/js/ui/editor.js index 6288afc7b..aa4dd1f16 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/editor.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/editor.js @@ -913,7 +913,7 @@ RED.editor = (function() { var icon_url = RED.settings.apiRootUrl+"icons/"+moduleName+"/"+icon; iconDiv.data('icon',icon_url); nodeDiv.css('backgroundColor',colour); - var iconContainer = $('
    ',{class:"palette_icon_container"}).appendTo(nodeDiv); + var iconContainer = $('
    ',{class:"red-ui-palette-icon-container"}).appendTo(nodeDiv); RED.utils.createIconElement(icon_url, iconContainer, true); if (iconPath.module === moduleName && iconPath.file === icon) { @@ -983,7 +983,7 @@ RED.editor = (function() { var colour = RED.utils.getNodeColor(node.type, node._def); var icon_url = RED.utils.getNodeIcon(node._def,node); nodeDiv.css('backgroundColor',colour); - var iconContainer = $('
    ',{class:"palette_icon_container"}).appendTo(nodeDiv); + var iconContainer = $('
    ',{class:"red-ui-palette-icon-container"}).appendTo(nodeDiv); RED.utils.createIconElement(icon_url, iconContainer, true); iconButton.on("click", function(e) { 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 7e224b524..7962e83bc 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 @@ -580,7 +580,7 @@ RED.palette.editor = (function() { content: modulesTab }) - var filterDiv = $('
    ',{class:"palette-search"}).appendTo(modulesTab); + var filterDiv = $('
    ',{class:"red-ui-palette-search"}).appendTo(modulesTab); filterInput = $('') .appendTo(filterDiv) .searchBox({ @@ -643,7 +643,7 @@ RED.palette.editor = (function() { var enableButton = $('').text(RED._('palette.editor.disableall')).appendTo(buttonGroup); var contentRow = $('
    ',{class:"palette-module-content"}).appendTo(container); - var shade = $('
    ').appendTo(container); + var shade = $('
    ').appendTo(container); object.elements = { updateButton: updateButton, @@ -736,7 +736,7 @@ RED.palette.editor = (function() { var toolBar = $('
    ',{class:"palette-editor-toolbar"}).appendTo(installTab); - var searchDiv = $('
    ',{class:"palette-search"}).appendTo(installTab); + var searchDiv = $('
    ',{class:"red-ui-palette-search"}).appendTo(installTab); searchInput = $('') .appendTo(searchDiv) .searchBox({ @@ -875,7 +875,7 @@ RED.palette.editor = (function() { } }); - $('
    ').appendTo(installTab); + $('
    ').appendTo(installTab); } function update(entry,version,container,done) { if (RED.settings.theme('palette.editable') === false) { diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/palette.js b/packages/node_modules/@node-red/editor-client/src/js/ui/palette.js index 8a22eecbb..a4268140e 100755 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/palette.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/palette.js @@ -23,43 +23,43 @@ RED.palette = (function() { var sidebarControls; function createCategory(originalCategory,rootCategory,category,ns) { - if ($("#palette-base-category-"+rootCategory).length === 0) { + if ($("#red-ui-palette-base-category-"+rootCategory).length === 0) { createCategoryContainer(originalCategory,rootCategory, ns+":palette.label."+rootCategory); } - $("#palette-container-"+rootCategory).show(); - if ($("#palette-"+category).length === 0) { - $("#palette-base-category-"+rootCategory).append('
    '); + $("#red-ui-palette-container-"+rootCategory).show(); + if ($("#red-ui-palette-"+category).length === 0) { + $("#red-ui-palette-base-category-"+rootCategory).append('
    '); } } function createCategoryContainer(originalCategory,category, labelId) { var label = RED._(labelId, {defaultValue:category}); label = (label || category).replace(/_/g, " "); - var catDiv = $('
    '+ - '
    '+label+'
    '+ - '
    '+ - '
    '+ - '
    '+ - '
    '+ + var catDiv = $('
    '+ + '
    '+label+'
    '+ + '
    '+ + '
    '+ + '
    '+ + '
    '+ '
    '+ - '
    ').appendTo("#palette-container"); + '
    ').appendTo("#red-ui-palette-container"); catDiv.data('category',originalCategory); catDiv.data('label',label); categoryContainers[category] = { container: catDiv, close: function() { - catDiv.removeClass("palette-open"); - catDiv.addClass("palette-closed"); - $("#palette-base-category-"+category).slideUp(); - $("#palette-header-"+category+" i").removeClass("expanded"); + catDiv.removeClass("red-ui-palette-open"); + catDiv.addClass("red-ui-palette-closed"); + $("#red-ui-palette-base-category-"+category).slideUp(); + $("#red-ui-palette-header-"+category+" i").removeClass("expanded"); }, open: function() { - catDiv.addClass("palette-open"); - catDiv.removeClass("palette-closed"); - $("#palette-base-category-"+category).slideDown(); - $("#palette-header-"+category+" i").addClass("expanded"); + catDiv.addClass("red-ui-palette-open"); + catDiv.removeClass("red-ui-palette-closed"); + $("#red-ui-palette-base-category-"+category).slideDown(); + $("#red-ui-palette-header-"+category+" i").addClass("expanded"); }, toggle: function() { - if (catDiv.hasClass("palette-open")) { + if (catDiv.hasClass("red-ui-palette-open")) { categoryContainers[category].close(); } else { categoryContainers[category].open(); @@ -67,7 +67,7 @@ RED.palette = (function() { } }; - $("#palette-header-"+category).on('click', function(e) { + $("#red-ui-palette-header-"+category).on('click', function(e) { categoryContainers[category].toggle(); }); } @@ -85,17 +85,17 @@ RED.palette = (function() { var displayLines = []; var currentLine = words[0]; - var currentLineWidth = RED.view.calculateTextWidth(currentLine, "palette_label", 0); + var currentLineWidth = RED.view.calculateTextWidth(currentLine, "red-ui-palette-label", 0); for (var i=1;i', { - class: "palette_label" - + (((!def.align && def.inputs !== 0 && def.outputs === 0) || "right" === def.align) ? " palette_label_right" : "") + class: "red-ui-palette-label" + + (((!def.align && def.inputs !== 0 && def.outputs === 0) || "right" === def.align) ? " red-ui-palette-label-right" : "") }).appendTo(d); - d.className="palette_node"; + d.className="red-ui-palette-node"; if (def.icon) { var icon_url = RED.utils.getNodeIcon(def); var iconContainer = $('
    ', { - class: "palette_icon_container" - + (((!def.align && def.inputs !== 0 && def.outputs === 0) || "right" === def.align) ? " palette_icon_container_right" : "") + class: "red-ui-palette-icon-container" + + (((!def.align && def.inputs !== 0 && def.outputs === 0) || "right" === def.align) ? " red-ui-palette-icon-container-right" : "") }).appendTo(d); RED.utils.createIconElement(icon_url, iconContainer, true); } @@ -197,19 +197,19 @@ RED.palette = (function() { if (def.outputs > 0) { var portOut = document.createElement("div"); - portOut.className = "palette_port palette_port_output"; + portOut.className = "red-ui-palette-port red-ui-palette-port-output"; d.appendChild(portOut); } if (def.inputs > 0) { var portIn = document.createElement("div"); - portIn.className = "palette_port palette_port_input"; + portIn.className = "red-ui-palette-port red-ui-palette-port-input"; d.appendChild(portIn); } createCategory(def.category,rootCategory,category,(coreCategories.indexOf(rootCategory) !== -1)?"node-red":def.set.id); - $("#palette-"+category).append(d); + $("#red-ui-palette-"+category).append(d); $(d).data('category',rootCategory); @@ -258,8 +258,8 @@ RED.palette = (function() { revertDuration: 300, containment:'#main-container', start: function() { - paletteWidth = $("#palette").width(); - paletteTop = $("#palette").parent().position().top + $("#palette-container").position().top; + paletteWidth = $("#red-ui-palette").width(); + paletteTop = $("#red-ui-palette").parent().position().top + $("#red-ui-palette-container").position().top; RED.view.focus(); }, stop: function() { d3.select('.link_splice').classed('link_splice',false); if (spliceTimer) { clearTimeout(spliceTimer); spliceTimer = null;}}, @@ -338,8 +338,8 @@ RED.palette = (function() { } setLabel(nt,$(d),label,nodeInfo); - var categoryNode = $("#palette-container-"+rootCategory); - if (categoryNode.find(".palette_node").length === 1) { + var categoryNode = $("#red-ui-palette-container-"+rootCategory); + if (categoryNode.find(".red-ui-palette-node").length === 1) { categoryContainers[rootCategory].open(); } @@ -348,12 +348,12 @@ RED.palette = (function() { function removeNodeType(nt) { var nodeTypeId = escapeNodeType(nt); - var paletteNode = $("#palette_node_"+nodeTypeId); - var categoryNode = paletteNode.closest(".palette-category"); + var paletteNode = $("#red-ui-palette-node_"+nodeTypeId); + var categoryNode = paletteNode.closest(".red-ui-palette-category"); paletteNode.remove(); - if (categoryNode.find(".palette_node").length === 0) { + if (categoryNode.find(".red-ui-palette-node").length === 0) { if (categoryNode.find("i").hasClass("expanded")) { - categoryNode.find(".palette-content").slideToggle(); + categoryNode.find(".red-ui-palette-content").slideToggle(); categoryNode.find("i").toggleClass("expanded"); } } @@ -361,10 +361,10 @@ RED.palette = (function() { function hideNodeType(nt) { var nodeTypeId = escapeNodeType(nt); - var paletteNode = $("#palette_node_"+nodeTypeId); + var paletteNode = $("#red-ui-palette-node_"+nodeTypeId); paletteNode.hide(); - var categoryNode = paletteNode.closest(".palette-category"); - var cl = categoryNode.find(".palette_node"); + var categoryNode = paletteNode.closest(".red-ui-palette-category"); + var cl = categoryNode.find(".red-ui-palette-node"); var c = 0; for (var i = 0; i < cl.length; i++) { if ($(cl[i]).css('display') === 'none') { c += 1; } @@ -374,32 +374,32 @@ RED.palette = (function() { function showNodeType(nt) { var nodeTypeId = escapeNodeType(nt); - var paletteNode = $("#palette_node_"+nodeTypeId); - var categoryNode = paletteNode.closest(".palette-category"); + var paletteNode = $("#red-ui-palette-node_"+nodeTypeId); + var categoryNode = paletteNode.closest(".red-ui-palette-category"); categoryNode.show(); paletteNode.show(); } function refreshNodeTypes() { RED.nodes.eachSubflow(function(sf) { - var paletteNode = $("#palette_node_subflow_"+sf.id.replace(".","_")); - var portInput = paletteNode.find(".palette_port_input"); - var portOutput = paletteNode.find(".palette_port_output"); + var paletteNode = $("#red-ui-palette-node_subflow_"+sf.id.replace(".","_")); + var portInput = paletteNode.find(".red-ui-palette-port-input"); + var portOutput = paletteNode.find(".red-ui-palette-port-output"); - var paletteLabel = paletteNode.find(".palette_label"); - paletteLabel.attr("class","palette_label" - + (((!sf._def.align && sf.in.length !== 0 && sf.out.length === 0) || "right" === sf._def.align) ? " palette_label_right" : "") + var paletteLabel = paletteNode.find(".red-ui-palette-label"); + paletteLabel.attr("class","red-ui-palette-label" + + (((!sf._def.align && sf.in.length !== 0 && sf.out.length === 0) || "right" === sf._def.align) ? " red-ui-palette-label-right" : "") ); - var paletteIconContainer = paletteNode.find(".palette_icon_container"); - paletteIconContainer.attr("class","palette_icon_container" - + (((!sf._def.align && sf.in.length !== 0 && sf.out.length === 0) || "right" === sf._def.align) ? " palette_icon_container_right" : "") + var paletteIconContainer = paletteNode.find(".red-ui-palette-icon-container"); + paletteIconContainer.attr("class","red-ui-palette-icon-container" + + (((!sf._def.align && sf.in.length !== 0 && sf.out.length === 0) || "right" === sf._def.align) ? " red-ui-palette-icon-container-right" : "") ); if (portInput.length === 0 && sf.in.length > 0) { var portIn = document.createElement("div"); - portIn.className = "palette_port palette_port_input"; + portIn.className = "red-ui-palette-port red-ui-palette-port-input"; paletteNode.append(portIn); } else if (portInput.length !== 0 && sf.in.length === 0) { portInput.remove(); @@ -407,7 +407,7 @@ RED.palette = (function() { if (portOutput.length === 0 && sf.out.length > 0) { var portOut = document.createElement("div"); - portOut.className = "palette_port palette_port_output"; + portOut.className = "red-ui-palette-port red-ui-palette-port-output"; paletteNode.append(portOut); } else if (portOutput.length !== 0 && sf.out.length === 0) { portOutput.remove(); @@ -421,17 +421,17 @@ RED.palette = (function() { var category = newCategory.replace(/ /g,"_"); createCategory(newCategory,category,category,"node-red"); - var currentCategoryNode = paletteNode.closest(".palette-category"); + var currentCategoryNode = paletteNode.closest(".red-ui-palette-category"); var newCategoryNode = $("#palette-"+category); newCategoryNode.append(paletteNode); - if (newCategoryNode.find(".palette_node").length === 1) { + if (newCategoryNode.find(".red-ui-palette-node").length === 1) { categoryContainers[category].open(); } paletteNode.data('category',newCategory); - if (currentCategoryNode.find(".palette_node").length === 0) { + if (currentCategoryNode.find(".red-ui-palette-node").length === 0) { if (currentCategoryNode.find("i").hasClass("expanded")) { - currentCategoryNode.find(".palette-content").slideToggle(); + currentCategoryNode.find(".red-ui-palette-content").slideToggle(); currentCategoryNode.find("i").toggleClass("expanded"); } } @@ -444,8 +444,8 @@ RED.palette = (function() { function filterChange(val) { var re = new RegExp(val.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'),'i'); - $("#palette-container .palette_node").each(function(i,el) { - var currentLabel = $(el).find(".palette_label").text(); + $("#red-ui-palette-container .red-ui-palette-node").each(function(i,el) { + var currentLabel = $(el).find(".red-ui-palette-label").text(); if (val === "" || re.test(el.id) || re.test(currentLabel)) { $(this).show(); } else { @@ -456,7 +456,7 @@ RED.palette = (function() { for (var category in categoryContainers) { if (categoryContainers.hasOwnProperty(category)) { if (categoryContainers[category].container - .find(".palette_node") + .find(".red-ui-palette-node") .filter(function() { return $(this).css('display') !== 'none'}).length === 0) { categoryContainers[category].close(); } else { @@ -468,6 +468,13 @@ RED.palette = (function() { function init() { + $('').appendTo("#red-ui-palette"); + $('').appendTo("#red-ui-palette"); + $('
    ').appendTo("#red-ui-palette"); + $('
    ').appendTo("#red-ui-palette"); + $('
    ').appendTo("#red-ui-palette"); + + RED.events.on('registry:node-type-added', function(nodeType) { var def = RED.nodes.getType(nodeType); addNodeType(nodeType,def); @@ -508,25 +515,26 @@ RED.palette = (function() { } }); - $("#palette > .palette-spinner").show(); + $("#red-ui-palette > .red-ui-palette-spinner").show(); - $("#palette-search input").searchBox({ + + $("#red-ui-palette-search input").searchBox({ delay: 100, change: function() { filterChange($(this).val()); } }) - sidebarControls = $('
    ').appendTo($("#palette")); + sidebarControls = $('
    ').appendTo($("#red-ui-palette")); RED.popover.tooltip(sidebarControls,RED._("keyboard.togglePalette"),"core:toggle-palette"); sidebarControls.on("click", function() { RED.menu.toggleSelected("menu-item-palette"); }) - $("#palette").on("mouseenter", function() { + $("#red-ui-palette").on("mouseenter", function() { sidebarControls.toggle("slide", { direction: "left" }, 200); }) - $("#palette").on("mouseleave", function() { + $("#red-ui-palette").on("mouseleave", function() { sidebarControls.hide(); }) @@ -546,7 +554,10 @@ RED.palette = (function() { createCategoryContainer(category, category, "palette.label."+category); }); - $("#palette-collapse-all").on("click", function(e) { + + var paletteFooterButtons = $('').appendTo("#red-ui-palette .red-ui-component-footer"); + var paletteCollapseAll = $('').appendTo(paletteFooterButtons); + paletteCollapseAll.on("click", function(e) { e.preventDefault(); for (var cat in categoryContainers) { if (categoryContainers.hasOwnProperty(cat)) { @@ -554,9 +565,10 @@ RED.palette = (function() { } } }); - RED.popover.tooltip($("#palette-collapse-all"),RED._('palette.actions.collapse-all')); + RED.popover.tooltip(paletteCollapseAll,RED._('palette.actions.collapse-all')); - $("#palette-expand-all").on("click", function(e) { + var paletteExpandAll = $('').appendTo(paletteFooterButtons); + paletteExpandAll.on("click", function(e) { e.preventDefault(); for (var cat in categoryContainers) { if (categoryContainers.hasOwnProperty(cat)) { @@ -564,7 +576,7 @@ RED.palette = (function() { } } }); - RED.popover.tooltip($("#palette-expand-all"),RED._('palette.actions.expand-all')); + RED.popover.tooltip(paletteExpandAll,RED._('palette.actions.expand-all')); RED.actions.add("core:toggle-palette", function(state) { if (state === undefined) { @@ -576,11 +588,11 @@ RED.palette = (function() { } function togglePalette(state) { if (!state) { - $("#main-container").addClass("palette-closed"); + $("#main-container").addClass("red-ui-palette-closed"); sidebarControls.hide(); sidebarControls.find("i").addClass("fa-chevron-right").removeClass("fa-chevron-left"); } else { - $("#main-container").removeClass("palette-closed"); + $("#main-container").removeClass("red-ui-palette-closed"); sidebarControls.find("i").removeClass("fa-chevron-right").addClass("fa-chevron-left"); } setTimeout(function() { $(window).trigger("resize"); } ,200); @@ -589,7 +601,7 @@ RED.palette = (function() { function getCategories() { var categories = []; - $("#palette-container .palette-category").each(function(i,d) { + $("#red-ui-palette-container .red-ui-palette-category").each(function(i,d) { categories.push({id:$(d).data('category'),label:$(d).data('label')}); }) return categories; diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/projects/projects.js b/packages/node_modules/@node-red/editor-client/src/js/ui/projects/projects.js index 11732d211..8749a2a88 100755 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/projects/projects.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/projects/projects.js @@ -2228,13 +2228,13 @@ RED.projects = (function() { $(this).parent().find(".ui-dialog-titlebar-close").hide(); // $("#header-shade").show(); // $("#editor-shade").show(); - // $("#palette-shade").show(); + // $("#red-ui-palette-shade").show(); // $("#sidebar-shade").show(); }, close: function(e) { // $("#header-shade").hide(); // $("#editor-shade").hide(); - // $("#palette-shade").hide(); + // $("#red-ui-palette-shade").hide(); // $("#sidebar-shade").hide(); } }); diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/search.js b/packages/node_modules/@node-red/editor-client/src/js/ui/search.js index 85bfbb31b..bdd9f138d 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/search.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/search.js @@ -213,7 +213,7 @@ RED.search = (function() { } nodeDiv.css('backgroundColor',colour); - var iconContainer = $('
    ',{class:"palette_icon_container"}).appendTo(nodeDiv); + var iconContainer = $('
    ',{class:"red-ui-palette-icon-container"}).appendTo(nodeDiv); RED.utils.createIconElement(icon_url, iconContainer, true); var contentDiv = $('
    ',{class:"red-ui-search-result-description"}).appendTo(div); @@ -256,7 +256,7 @@ RED.search = (function() { RED.keyboard.add("*","escape",function(){hide()}); $("#header-shade").show(); $("#editor-shade").show(); - $("#palette-shade").show(); + $("#red-ui-palette-shade").show(); $("#sidebar-shade").show(); $("#sidebar-separator").hide(); indexWorkspace(); @@ -277,7 +277,7 @@ RED.search = (function() { visible = false; $("#header-shade").hide(); $("#editor-shade").hide(); - $("#palette-shade").hide(); + $("#red-ui-palette-shade").hide(); $("#sidebar-shade").hide(); $("#sidebar-separator").show(); if (dialog !== null) { @@ -301,7 +301,7 @@ RED.search = (function() { $("#header-shade").on('mousedown',hide); $("#editor-shade").on('mousedown',hide); - $("#palette-shade").on('mousedown',hide); + $("#red-ui-palette-shade").on('mousedown',hide); $("#sidebar-shade").on('mousedown',hide); } diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/tab-config.js b/packages/node_modules/@node-red/editor-client/src/js/ui/tab-config.js index af62ab8e7..067d23175 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/tab-config.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/tab-config.js @@ -44,7 +44,7 @@ RED.sidebar.config = (function() { function getOrCreateCategory(name,parent,label) { name = name.replace(/\./i,"-"); if (!categories[name]) { - var container = $('
    ').appendTo(parent); + var container = $('
    ').appendTo(parent); var header = $('
    ').appendTo(container); if (label) { $('').text(label).appendTo(header); @@ -52,7 +52,7 @@ RED.sidebar.config = (function() { $('').appendTo(header); } $('').appendTo(header); - category = $('
      ').appendTo(container); + category = $('
        ').appendTo(container); container.i18n(); var icon = header.find("i"); var result = { @@ -139,11 +139,11 @@ RED.sidebar.config = (function() { currentType = node.type; } - var entry = $('
      • ').appendTo(list); + var entry = $('
      • ').appendTo(list); entry.data('node',node.id); - $('
        ').text(label).appendTo(entry); + $('
        ').text(label).appendTo(entry); if (node._def.hasUsers !== false) { - var iconContainer = $('
        ',{class:"palette_icon_container palette_icon_container_right"}).appendTo(entry); + var iconContainer = $('
        ',{class:"red-ui-palette-icon-container red-ui-palette-icon-container-right"}).appendTo(entry); if (node.users.length === 0) { iconContainer.text(0); } else { @@ -163,7 +163,7 @@ RED.sidebar.config = (function() { if (e.metaKey) { $(this).toggleClass("selected"); } else { - $(content).find(".palette_node").removeClass("selected"); + $(content).find(".red-ui-palette-node").removeClass("selected"); $(this).addClass("selected"); } RED.sidebar.info.refresh(node); @@ -246,11 +246,11 @@ RED.sidebar.config = (function() { }); RED.actions.add("core:show-config-tab", function() {RED.sidebar.show('config')}); RED.actions.add("core:select-all-config-nodes", function() { - $(content).find(".palette_node").addClass("selected"); + $(content).find(".red-ui-palette-node").addClass("selected"); }) RED.actions.add("core:delete-config-selection", function() { var selectedNodes = []; - $(content).find(".palette_node.selected").each(function() { + $(content).find(".red-ui-palette-node.selected").each(function() { selectedNodes.push($(this).data('node')); }); if (selectedNodes.length > 0) { @@ -296,7 +296,7 @@ RED.sidebar.config = (function() { RED.events.on("view:selection-changed",function() { - $(content).find(".palette_node").removeClass("selected"); + $(content).find(".red-ui-palette-node").removeClass("selected"); }); $("#workspace-config-node-collapse-all").on("click", function(e) { @@ -352,7 +352,7 @@ RED.sidebar.config = (function() { $('#workspace-config-node-filter-all').trigger("click"); id = id.replace(/\./g,"-"); setTimeout(function() { - var node = $(".palette_node_id_"+id); + var node = $(".red-ui-palette-node_id_"+id); var y = node.position().top; var h = node.height(); var scrollWindow = $(".sidebar-node-config"); diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/tab-info.js b/packages/node_modules/@node-red/editor-client/src/js/ui/tab-info.js index b66288c43..f0f93070e 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/tab-info.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/tab-info.js @@ -268,12 +268,12 @@ RED.sidebar.info = (function() { var container = propRow.children()[1]; var div = $('',{class:""}).appendTo(container); - var nodeDiv = $('
        ',{class:"palette_node palette_node_small"}).appendTo(div); + var nodeDiv = $('
        ',{class:"red-ui-palette-node red-ui-palette-node-small"}).appendTo(div); var colour = RED.utils.getNodeColor(configNode.type,configNode._def); var icon_url = RED.utils.getNodeIcon(configNode._def); nodeDiv.css({'backgroundColor':colour, "cursor":"pointer"}); - var iconContainer = $('
        ',{class:"palette_icon_container"}).appendTo(nodeDiv); - $('
        ',{class:"palette_icon",style:"background-image: url("+icon_url+")"}).appendTo(iconContainer); + var iconContainer = $('
        ',{class:"red-ui-palette-icon-container"}).appendTo(nodeDiv); + $('
        ',{class:"red-ui-palette-icon",style:"background-image: url("+icon_url+")"}).appendTo(iconContainer); var nodeContainer = $('').css({"verticalAlign":"top","marginLeft":"6px"}).text(configLabel).appendTo(container); nodeDiv.on('dblclick',function() { diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/tray.js b/packages/node_modules/@node-red/editor-client/src/js/ui/tray.js index af579fde2..a7c9c8d07 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/tray.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/tray.js @@ -117,7 +117,7 @@ RED.tray = (function() { function finishBuild() { $("#header-shade").show(); $("#editor-shade").show(); - $("#palette-shade").show(); + $("#red-ui-palette-shade").show(); $(".sidebar-shade").show(); tray.preferredWidth = Math.max(el.width(),500); if (!options.maximized) { @@ -269,7 +269,7 @@ RED.tray = (function() { if (stack.length === 0) { $("#header-shade").hide(); $("#editor-shade").hide(); - $("#palette-shade").hide(); + $("#red-ui-palette-shade").hide(); $(".sidebar-shade").hide(); RED.events.emit("editor:close"); RED.view.focus(); diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/typeSearch.js b/packages/node_modules/@node-red/editor-client/src/js/ui/typeSearch.js index 544f66782..7a1a70dd0 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/typeSearch.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/typeSearch.js @@ -145,7 +145,7 @@ RED.typeSearch = (function() { var icon_url = RED.utils.getNodeIcon(def); nodeDiv.css('backgroundColor',colour); - var iconContainer = $('
        ',{class:"palette_icon_container"}).appendTo(nodeDiv); + var iconContainer = $('
        ',{class:"red-ui-palette-icon-container"}).appendTo(nodeDiv); RED.utils.createIconElement(icon_url, iconContainer, false); if (def.inputs > 0) { diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/utils.js b/packages/node_modules/@node-red/editor-client/src/js/ui/utils.js index 2d65c2fff..d2948ee68 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/utils.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/utils.js @@ -923,12 +923,12 @@ RED.utils = (function() { /** * Create or update an icon element and append it to iconContainer. * @param iconUrl - Url of icon. - * @param iconContainer - Icon container element with palette_icon_container class. + * @param iconContainer - Icon container element with red-ui-palette-icon-container class. * @param isLarge - Whether the icon size is large. */ function createIconElement(iconUrl, iconContainer, isLarge) { // Removes the previous icon when icon was changed. - var iconElement = iconContainer.find(".palette_icon"); + var iconElement = iconContainer.find(".red-ui-palette-icon"); if (iconElement.length !== 0) { iconElement.remove(); } @@ -944,13 +944,13 @@ RED.utils = (function() { if (fontAwesomeUnicode) { var faIconElement = $('').appendTo(iconContainer); var faLarge = isLarge ? "fa-lg " : ""; - faIconElement.addClass("palette_icon_fa fa fa-fw " + faLarge + iconPath.file); + faIconElement.addClass("red-ui-palette-icon-fa fa fa-fw " + faLarge + iconPath.file); return; } // If the specified name is not defined in font-awesome, show arrow-in icon. iconUrl = RED.settings.apiRootUrl+"icons/node-red/arrow-in.png" } - var imageIconElement = $('
        ',{class:"palette_icon"}).appendTo(iconContainer); + var imageIconElement = $('
        ',{class:"red-ui-palette-icon"}).appendTo(iconContainer); imageIconElement.css("backgroundImage", "url("+iconUrl+")"); } diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js index aadfe239b..2bec92f81 100755 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js @@ -393,7 +393,7 @@ RED.view = (function() { // Handle nodes dragged from the palette $("#chart").droppable({ - accept:".palette_node", + accept:".red-ui-palette-node", drop: function( event, ui ) { d3.event = event; var selected_tool = ui.draggable[0].type; diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/workspaces.js b/packages/node_modules/@node-red/editor-client/src/js/ui/workspaces.js index bd6bd2331..478a34001 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/workspaces.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/workspaces.js @@ -296,13 +296,13 @@ RED.workspaces = (function() { if (selectedTabs.length === 0) { $("#chart svg").css({"pointer-events":"auto",filter:"none"}) $("#workspace-toolbar").css({"pointer-events":"auto",filter:"none"}) - $("#palette-container").css({"pointer-events":"auto",filter:"none"}) + $("#red-ui-palette-container").css({"pointer-events":"auto",filter:"none"}) $(".sidebar-shade").hide(); } else { RED.view.select(false) $("#chart svg").css({"pointer-events":"none",filter:"opacity(60%)"}) $("#workspace-toolbar").css({"pointer-events":"none",filter:"opacity(60%)"}) - $("#palette-container").css({"pointer-events":"none",filter:"opacity(60%)"}) + $("#red-ui-palette-container").css({"pointer-events":"none",filter:"opacity(60%)"}) $(".sidebar-shade").show(); } }, diff --git a/packages/node_modules/@node-red/editor-client/src/sass/diff.scss b/packages/node_modules/@node-red/editor-client/src/sass/diff.scss index 0a46364c6..fecdc5dc2 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/diff.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/diff.scss @@ -253,16 +253,16 @@ background-size: contain; position: relative; - .palette_icon { + .red-ui-palette-icon { background-position: 49% 50%; width: 15px; } - .palette_icon_fa { + .red-ui-palette-icon-fa { position: relative; top: -2.5px; left: 0px; } - .palette_icon_container { + .red-ui-palette-icon-container { width: 18px; } } @@ -410,10 +410,10 @@ width: 18px; height: 15px; } - .palette_icon_container { + .red-ui-palette-icon-container { width: 18px; } - .palette_icon { + .red-ui-palette-icon { width: 15px; } ul,li,ol { diff --git a/packages/node_modules/@node-red/editor-client/src/sass/editor.scss b/packages/node_modules/@node-red/editor-client/src/sass/editor.scss index 2d39cc108..76735c761 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/editor.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/editor.scss @@ -57,7 +57,7 @@ .editor-tray-content { overflow: auto; position: relative; - .palette_icon_fa { + .red-ui-palette-icon-fa { top: 6px; left: 4px; } @@ -154,7 +154,7 @@ background: $background-color; color: $workspace-button-color; } -#palette-shade, #editor-shade, #header-shade, #sidebar-shade { +#red-ui-palette-shade, #editor-shade, #header-shade, #sidebar-shade { @include shade; z-index: 2; } @@ -443,7 +443,7 @@ border-color: white; } } - .palette_icon_fa { + .red-ui-palette-icon-fa { top: 6px; left: 3px; } diff --git a/packages/node_modules/@node-red/editor-client/src/sass/palette.scss b/packages/node_modules/@node-red/editor-client/src/sass/palette.scss index a51c7c3e5..5be07764a 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/palette.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/palette.scss @@ -15,7 +15,7 @@ **/ -#palette { +#red-ui-palette{ position: absolute; top: 0px; bottom: 0px; @@ -28,29 +28,18 @@ transition: width 0.2s ease-in-out; } -.palette-closed { - #palette { width: 8px; } - #palette-search { display: none; } - #palette-container { display: none; } - #palette-footer { display: none; } -} - -.palette-expanded { - & #palette { - width: 380px; - box-shadow: 1px 0 6px rgba(0,0,0,0.1); +.red-ui-palette-closed { + #red-ui-palette { + width: 8px; + .red-ui-component-footer { + display: none; + } } - & #workspace { left: 379px !important; } - & #palette-collapse-all { display: none; } - & #palette-expand-all { display: none; } - & #palette-container { display: none !important; } - & #palette-search { display: none !important; } - & #palette-edit { background: $workspace-button-background-active } - & #palette-editor { display: block !important } + #red-ui-palette-search { display: none; } + #red-ui-palette-container { display: none; } } - -.palette-scroll { +.red-ui-palette-scroll { position: absolute; top: 35px; right: 0; @@ -60,10 +49,10 @@ overflow-y: auto; box-sizing:border-box; } -#palette > .palette-spinner { +#red-ui-palette> .red-ui-palette-spinner { padding-top: 80px; } -.palette-search { +.red-ui-palette-search { position: relative; overflow: hidden; background: #ffffff; @@ -74,15 +63,15 @@ box-sizing:border-box; } -.palette-category { +.red-ui-palette-category { border-bottom: 1px solid #ccc; } -.palette-content { +.red-ui-palette-content { background: #fff; padding: 3px; } -.palette-header { +.red-ui-palette-header { position: relative; background: $palette-header-background; cursor: pointer; @@ -96,7 +85,7 @@ background: $palette-header-background !important; } } -.palette-header > i { +.red-ui-palette-header > i { position: absolute; left: 11px; top: 12px; @@ -107,15 +96,15 @@ -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); } -.palette-header i.expanded { +.red-ui-palette-header i.expanded { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); } -.palette-header span { +.red-ui-palette-header span { clear: both; } -.palette_label { +.red-ui-palette-label { font-size: 13px; margin: 4px 0 4px 32px; line-height: 20px; @@ -123,11 +112,11 @@ text-align: center; @include disable-selection; } -.palette_label_right { +.red-ui-palette-label-right { margin: 4px 32px 4px 0; } -.palette_node { +.red-ui-palette-node { display: block; cursor:move; background: #ddd; @@ -141,11 +130,11 @@ background-size: contain; position: relative; } -.palette_node:hover { +.red-ui-palette-node:hover { border-color: $node-selected-color; background-color: #eee; } -.palette_port { +.red-ui-palette-port { position: absolute; top:8px; left: -5px; @@ -157,16 +146,16 @@ height: 10px; border: 1px solid #999; } -.palette_port_output { +.red-ui-palette-port-output { left:auto; right: -6px; } -.palette_node:hover .palette_port { +.red-ui-palette-node:hover .red-ui-palette-port { border-color: #999; background-color: #eee; } -.palette_icon_container { +.red-ui-palette-icon-container { position: absolute; text-align: center; top:0; @@ -176,13 +165,13 @@ border-right: 1px solid rgba(0,0,0,0.1); background-color: rgba(0,0,0,0.05); } -.palette_icon_container_right { +.red-ui-palette-icon-container-right { left: auto; right: 0; border-right: none; border-left: 1px solid rgba(0,0,0,0.1); } -.palette_icon { +.red-ui-palette-icon { display: inline-block; width: 20px; height: 100%; @@ -190,13 +179,13 @@ background-size: contain; background-repeat: no-repeat; } -.palette_icon_fa { +.red-ui-palette-icon-fa { color: white; position: absolute; top: 7px; left: 3px; } -.palette_node_small { +.red-ui-palette-node-small { display: inline-block; position: relative; width: 18px; @@ -205,15 +194,15 @@ vertical-align: middle; cursor: default; - .palette_icon_container { + .red-ui-palette-icon-container { width: 18px; border-right: none; } - .palette_icon { + .red-ui-palette-icon { margin-left: -1px; width: 15px; } - .palette_icon_fa { + .red-ui-palette-icon-fa { top: 2px; left: 1px; } diff --git a/packages/node_modules/@node-red/editor-client/src/sass/projects.scss b/packages/node_modules/@node-red/editor-client/src/sass/projects.scss index 3ef582bc3..96965fde5 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/projects.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/projects.scss @@ -283,7 +283,7 @@ right: 0; overflow: hidden; - .palette-category { + .red-ui-palette-category { &:not(.palette-category-expanded) button { display: none; } diff --git a/packages/node_modules/@node-red/editor-client/src/sass/search.scss b/packages/node_modules/@node-red/editor-client/src/sass/search.scss index 3926d6f5f..692d4e9e2 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/search.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/search.scss @@ -62,7 +62,7 @@ font-size: 13px; border-left-width: 3px; border-right-width: 3px; - .palette_icon_fa { + .red-ui-palette-icon-fa { position: relative; top: -2.5px; left: 0px; @@ -91,10 +91,10 @@ .red-ui-search-result-node-output{ left: 16px; } - .palette_icon_container { + .red-ui-palette-icon-container { width: 18px; } - .palette_icon { + .red-ui-palette-icon { width: 15px; } .red-ui-search-result-description { @@ -150,7 +150,7 @@ display: table; clear: both; } - .palette_icon_fa { + .red-ui-palette-icon-fa { top: 6px; left: 3px; } @@ -169,7 +169,7 @@ background-size: contain; position: relative; - .palette_icon_container { + .red-ui-palette-icon-container { border-right: none; } diff --git a/packages/node_modules/@node-red/editor-client/src/sass/tab-config.scss b/packages/node_modules/@node-red/editor-client/src/sass/tab-config.scss index 78cd8628a..9b3a1b2f1 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/tab-config.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/tab-config.scss @@ -25,7 +25,7 @@ .config-node-list { margin: 0; list-style-type: none; - .palette_node { + .red-ui-palette-node { overflow: hidden; &.selected { border-color: $node-selected-color; @@ -40,7 +40,7 @@ overflow: hidden; text-overflow: ellipsis; } - .palette_icon_container { + .red-ui-palette-icon-container { font-size: 12px; line-height: 30px; background-color: #e8e8e8; diff --git a/packages/node_modules/@node-red/editor-client/src/sass/tab-context.scss b/packages/node_modules/@node-red/editor-client/src/sass/tab-context.scss index 16404c136..4ccfe5f3f 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/tab-context.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/tab-context.scss @@ -22,7 +22,7 @@ right: 0; overflow-y: scroll; - .palette-category { + .red-ui-palette-category { &:not(.palette-category-expanded) button { display: none; } diff --git a/packages/node_modules/@node-red/editor-client/src/sass/ui/common/stack.scss b/packages/node_modules/@node-red/editor-client/src/sass/ui/common/stack.scss index f76dbe32f..625bdafd1 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/ui/common/stack.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/ui/common/stack.scss @@ -16,7 +16,7 @@ .red-ui-stack { background: white; - .palette-category { + .red-ui-palette-category { background: white; &:last-child { diff --git a/packages/node_modules/@node-red/editor-client/src/sass/workspace.scss b/packages/node_modules/@node-red/editor-client/src/sass/workspace.scss index 9b2b750c7..d8b0aa0d6 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/workspace.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/workspace.scss @@ -44,7 +44,7 @@ } -.palette-closed #workspace { +.red-ui-palette-closed #workspace { left: 7px; } diff --git a/packages/node_modules/@node-red/editor-client/templates/index.mst b/packages/node_modules/@node-red/editor-client/templates/index.mst index c56c78e2a..23e420e29 100644 --- a/packages/node_modules/@node-red/editor-client/templates/index.mst +++ b/packages/node_modules/@node-red/editor-client/templates/index.mst @@ -51,18 +51,7 @@
        -
        - - -
        - -
        -
        +