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

Replace bootstrap popover

Browse Source
This commit is contained in:
Nick O'Leary 2015-07-18 15:33:31 +01:00
parent 5462e251f8
commit 705d043540
10 changed files with 164 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
Gruntfile.js
View File

@ -106,6 +106,7 @@ module.exports = function(grunt) {
"editor/js/ui/menu.js",
"editor/js/ui/keyboard.js",
"editor/js/ui/tabs.js",
"editor/js/ui/popover.js",
"editor/js/ui/workspaces.js",
"editor/js/ui/view.js",
"editor/js/ui/sidebar.js",

11
editor/js/ui/menu.js
View File

@ -133,17 +133,6 @@ RED.menu = (function() {
if (opt.disabled) {
item.addClass("disabled");
}
if (opt.tip) {
item.popover({
placement:"left",
trigger: "hover",
delay: { show: 350, hide: 20 },
html: true,
container:'body',
content: opt.tip
});
}
}

24
editor/js/ui/palette.js
View File

@ -115,7 +115,7 @@ RED.palette = (function() {
}
el.data('popover').options.content = popOverContent;
el.data('popover').setContent(popOverContent);
}
function escapeNodeType(nt) {
@ -188,18 +188,24 @@ RED.palette = (function() {
$("#palette-"+category).append(d);
d.onmousedown = function(e) { e.preventDefault(); };
$(d).popover({
title:d.type,
placement:"right",
trigger: "hover",
delay: { show: 750, hide: 50 },
html: true,
container:'body'
RED.popover.create({
target:$(d),
content: "hi",
delay: { show: 750, hide: 50 }
});
// $(d).popover({
// title:d.type,
// placement:"right",
// trigger: "hover",
// delay: { show: 750, hide: 50 },
// html: true,
// container:'body'
// });
$(d).click(function() {
RED.view.focus();
var help = '<div class="node-help">'+($("script[data-help-name|='"+d.type+"']").html()||"")+"</div>";
$("#tab-info").html(help);
RED.sidebar.info.set(help);
});
$(d).draggable({
helper: 'clone',

79
editor/js/ui/popover.js Normal file
View File

@ -0,0 +1,79 @@
/**
* Copyright 2015 IBM Corp.
*
* 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.popover = (function() {
function createPopover(options) {
var target = options.target;
var content = options.content;
var delay = options.delay;
var timer = null;
var active;
var div;
var openPopup = function() {
if (active) {
div = $('<div class="red-ui-popover"></div>').html(content).appendTo("body");
var targetPos = target.offset();
var targetWidth = target.width();
var targetHeight = target.height();
var divHeight = div.height();
div.css({top: targetPos.top+targetHeight/2-divHeight/2-10,left:targetPos.left+targetWidth+17});
div.fadeIn("fast");
}
}
var closePopup = function() {
if (!active) {
if (div) {
div.fadeOut("fast",function() {
$(this).remove();
});
div = null;
}
}
}
target.on('mouseenter',function(e) {
clearTimeout(timer);
active = true;
timer = setTimeout(openPopup,delay.show);
});
target.on('mouseleave', function(e) {
if (timer) {
clearTimeout(timer);
}
active = false;
setTimeout(closePopup,delay.hide);
});
var res = {
setContent: function(_content) {
content = _content;
}
}
target.data('popover',res);
return res;
}
return {
create: createPopover
}
})();

9
editor/js/ui/tab-info.js
View File

@ -167,7 +167,11 @@ RED.sidebar.info = (function() {
}
function clear() {
$("#tab-info").html("");
$(content).html("");
}
function set(html) {
$(content).html(html);
}
RED.events.on("view:selection-changed",function(selection) {
@ -194,6 +198,7 @@ RED.sidebar.info = (function() {
init: init,
show: show,
refresh:refresh,
clear: clear
clear: clear,
set: set
}
})();

2
editor/js/ui/tabs.js
View File

@ -1,5 +1,5 @@
/**
* Copyright 2013 IBM Corp.
* Copyright 2013, 2015 IBM Corp.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.

3
editor/sass/jquery.scss
View File

@ -27,10 +27,9 @@
.ui-dialog {
border-radius: 1px;
border: 1px solid #eee;
background: #fff;
padding: 0;
box-shadow: 2px 2px 12px rgba(0,0,0,0.2);
@include component-shadow;
}
.ui-dialog .ui-dialog-content {
padding: 25px 25px 10px 25px;

6
editor/sass/mixins.scss
View File

@ -76,3 +76,9 @@
width: 18px;
height: 18px;
}
@mixin component-shadow {
border: 1px solid $secondary-border-color;
box-shadow: 1px 1px 4px rgba(0,0,0,0.2);
}

53
editor/sass/popover.scss Normal file
View File

@ -0,0 +1,53 @@
/**
* Copyright 2015 IBM Corp.
*
* 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-ui-popover {
display: none;
position: absolute;
width: 300px;
padding: 10px;
height: auto;
background: #fff;
z-index: 1000;
font-size: 14px;
line-height: 1.4em;
@include component-shadow;
}
.red-ui-popover:after, .red-ui-popover:before {
right: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.red-ui-popover:after {
border-color: rgba(136, 183, 213, 0);
border-right-color: #fff;
border-width: 10px;
margin-top: -10px;
}
.red-ui-popover:before {
border-color: rgba(194, 225, 245, 0);
border-right-color: $primary-border-color;
border-width: 11px;
margin-top: -11px;
}

2
editor/sass/style.scss
View File

@ -38,7 +38,7 @@
@import "tabs";
@import "tab-config";
@import "tab-info";
@import "popover";
@import "flow";
@import "dragdrop";