mirror of
https://github.com/node-red/node-red.git
synced 2025-03-01 10:36:34 +00:00
Add workspace statusBar
This commit is contained in:
50
packages/node_modules/@node-red/editor-client/src/js/ui/statusBar.js
vendored
Normal file
50
packages/node_modules/@node-red/editor-client/src/js/ui/statusBar.js
vendored
Normal file
@@ -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 = $('<span class="red-ui-statusbar-widget"></span>');
|
||||
options.element.appendTo(el);
|
||||
if (options.align === 'left') {
|
||||
leftBucket.append(el);
|
||||
} else if (options.align === 'right') {
|
||||
rightBucket.prepend(el);
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
init: function() {
|
||||
leftBucket = $('<span class="red-ui-statusbar-bucket red-ui-statusbar-bucket-left">').appendTo("#workspace-footer");
|
||||
rightBucket = $('<span class="red-ui-statusbar-bucket red-ui-statusbar-bucket-right">').appendTo("#workspace-footer");
|
||||
},
|
||||
add: addWidget
|
||||
}
|
||||
|
||||
})();
|
@@ -74,13 +74,13 @@ RED.sidebar.info = (function() {
|
||||
tipBox = $('<div class="node-info-tip"></div>').appendTo(tipContainer);
|
||||
var tipButtons = $('<div class="node-info-tips-buttons"></div>').appendTo(tipContainer);
|
||||
|
||||
var tipRefresh = $('<a href="#" class="workspace-footer-button"><i class="fa fa-refresh"></a>').appendTo(tipButtons);
|
||||
var tipRefresh = $('<a href="#" class="red-ui-footer-button"><i class="fa fa-refresh"></a>').appendTo(tipButtons);
|
||||
tipRefresh.on("click", function(e) {
|
||||
e.preventDefault();
|
||||
tips.next();
|
||||
})
|
||||
|
||||
var tipClose = $('<a href="#" class="workspace-footer-button"><i class="fa fa-times"></a>').appendTo(tipButtons);
|
||||
var tipClose = $('<a href="#" class="red-ui-footer-button"><i class="fa fa-times"></a>').appendTo(tipButtons);
|
||||
tipClose.on("click", function(e) {
|
||||
e.preventDefault();
|
||||
RED.actions.invoke("core:toggle-show-tips");
|
||||
|
@@ -153,6 +153,11 @@
|
||||
|
||||
navVis = navBox.append("svg:g")
|
||||
|
||||
RED.statusBar.add({
|
||||
id: "view-navigator",
|
||||
align: "right",
|
||||
element: $('<button class="red-ui-footer-button-toggle single" id="btn-navigate"><i class="fa fa-map-o"></i></button>')
|
||||
})
|
||||
|
||||
$("#btn-navigate").on("click", function(evt) {
|
||||
evt.preventDefault();
|
||||
|
@@ -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: $('<span>'+
|
||||
'<button class="red-ui-footer-button" id="btn-zoom-out"><i class="fa fa-minus"></i></button>'+
|
||||
'<button class="red-ui-footer-button" id="btn-zoom-zero"><i class="fa fa-circle-o"></i></button>'+
|
||||
'<button class="red-ui-footer-button" id="btn-zoom-in"><i class="fa fa-plus"></i></button>'+
|
||||
'</span>')
|
||||
})
|
||||
|
||||
$("#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');
|
||||
|
Reference in New Issue
Block a user