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

Add workspace statusBar

Browse Source
This commit is contained in:
Nick O'Leary 2019-03-26 22:22:13 +00:00
parent 4c8c081c31
commit 5e8279cf51
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
10 changed files with 137 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
Gruntfile.js
View File

@ -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",

50
packages/node_modules/@node-red/editor-client/src/js/ui/statusBar.js vendored Normal file
View 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
}
})();

4
packages/node_modules/@node-red/editor-client/src/js/ui/tab-info.js vendored
View File

@ -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");

5
packages/node_modules/@node-red/editor-client/src/js/ui/view-navigator.js vendored
View File

@ -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();

12
packages/node_modules/@node-red/editor-client/src/js/ui/view.js vendored
View File

@ -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');

59
packages/node_modules/@node-red/editor-client/src/sass/mixins.scss vendored
View File

@ -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;
}
}

10
packages/node_modules/@node-red/editor-client/src/sass/palette.scss vendored
View File

@ -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;
}

4
packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss vendored
View File

@ -74,10 +74,6 @@
white-space: nowrap;
}
#sidebar-footer {
@include component-footer;
}
.sidebar-footer-button {
@include component-footer-button;
}

20
packages/node_modules/@node-red/editor-client/src/sass/workspace.scss vendored
View File

@ -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;

15
packages/node_modules/@node-red/editor-client/templates/index.mst vendored
View File

@ -47,12 +47,7 @@
<ul id="workspace-tabs"></ul>
<div id="chart" tabindex="1"></div>
<div id="workspace-toolbar"></div>
<div id="workspace-footer">
<a class="workspace-footer-button" id="btn-zoom-out" href="#"><i class="fa fa-minus"></i></a>
<a class="workspace-footer-button" id="btn-zoom-zero" href="#"><i class="fa fa-circle-o"></i></a>
<a class="workspace-footer-button" id="btn-zoom-in" href="#"><i class="fa fa-plus"></i></a>
<a class="workspace-footer-button-toggle single" id="btn-navigate" href="#"><i class="fa fa-map-o"></i></a>
</div>
<div id="workspace-footer" class="red-ui-component-footer"></div>
<div id="editor-shade" class="hide"></div>
</div>
<div id="editor-stack"></div>
@ -62,16 +57,16 @@
<input type="text" data-i18n="[placeholder]palette.filter"></input>
</div>
<div id="palette-container" class="palette-scroll hide"></div>
<div id="palette-footer">
<a class="palette-button" id="palette-collapse-all" href="#"><i class="fa fa-angle-double-up"></i></a>
<a class="palette-button" id="palette-expand-all" href="#"><i class="fa fa-angle-double-down"></i></a>
<div id="palette-footer" class="red-ui-component-footer">
<a class="red-ui-footer-button" id="palette-collapse-all" href="#"><i class="fa fa-angle-double-up"></i></a>
<a class="red-ui-footer-button" id="palette-expand-all" href="#"><i class="fa fa-angle-double-down"></i></a>
</div>
<div id="palette-shade" class="hide"></div>
</div><!-- /palette -->
<div id="sidebar">
<ul id="sidebar-tabs"></ul>
<div id="sidebar-content"></div>
<div id="sidebar-footer"></div>
<div id="sidebar-footer" class="red-ui-component-footer"></div>
<div id="sidebar-shade" class="hide"></div>
</div>