From 705d04354064463a931032c4b8f1635fda54c6fc Mon Sep 17 00:00:00 2001 From: Nick O'Leary Date: Sat, 18 Jul 2015 15:33:31 +0100 Subject: [PATCH] Replace bootstrap popover --- Gruntfile.js | 1 + editor/js/ui/menu.js | 11 ------ editor/js/ui/palette.js | 24 +++++++----- editor/js/ui/popover.js | 79 ++++++++++++++++++++++++++++++++++++++++ editor/js/ui/tab-info.js | 9 ++++- editor/js/ui/tabs.js | 2 +- editor/sass/jquery.scss | 3 +- editor/sass/mixins.scss | 6 +++ editor/sass/popover.scss | 53 +++++++++++++++++++++++++++ editor/sass/style.scss | 2 +- 10 files changed, 164 insertions(+), 26 deletions(-) create mode 100644 editor/js/ui/popover.js create mode 100644 editor/sass/popover.scss diff --git a/Gruntfile.js b/Gruntfile.js index 63284b55a..ba35b0b20 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -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", diff --git a/editor/js/ui/menu.js b/editor/js/ui/menu.js index 47fe824fc..fdc0d28e2 100644 --- a/editor/js/ui/menu.js +++ b/editor/js/ui/menu.js @@ -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 - }); - } - } diff --git a/editor/js/ui/palette.js b/editor/js/ui/palette.js index d239afb8f..e0f193032 100644 --- a/editor/js/ui/palette.js +++ b/editor/js/ui/palette.js @@ -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 = '
'+($("script[data-help-name|='"+d.type+"']").html()||"")+"
"; - $("#tab-info").html(help); + RED.sidebar.info.set(help); }); $(d).draggable({ helper: 'clone', diff --git a/editor/js/ui/popover.js b/editor/js/ui/popover.js new file mode 100644 index 000000000..05e758072 --- /dev/null +++ b/editor/js/ui/popover.js @@ -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 = $('
').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 + } + +})(); diff --git a/editor/js/ui/tab-info.js b/editor/js/ui/tab-info.js index b093154cb..d8d53ec94 100644 --- a/editor/js/ui/tab-info.js +++ b/editor/js/ui/tab-info.js @@ -167,9 +167,13 @@ 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) { if (selection.nodes) { if (selection.nodes.length == 1) { @@ -194,6 +198,7 @@ RED.sidebar.info = (function() { init: init, show: show, refresh:refresh, - clear: clear + clear: clear, + set: set } })(); diff --git a/editor/js/ui/tabs.js b/editor/js/ui/tabs.js index 413b544e7..b7add37bb 100644 --- a/editor/js/ui/tabs.js +++ b/editor/js/ui/tabs.js @@ -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. diff --git a/editor/sass/jquery.scss b/editor/sass/jquery.scss index 7e73810f8..88045ead2 100644 --- a/editor/sass/jquery.scss +++ b/editor/sass/jquery.scss @@ -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; diff --git a/editor/sass/mixins.scss b/editor/sass/mixins.scss index 5455a3818..881eb8317 100644 --- a/editor/sass/mixins.scss +++ b/editor/sass/mixins.scss @@ -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); + +} diff --git a/editor/sass/popover.scss b/editor/sass/popover.scss new file mode 100644 index 000000000..7a9e6bf78 --- /dev/null +++ b/editor/sass/popover.scss @@ -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; + } diff --git a/editor/sass/style.scss b/editor/sass/style.scss index 16f2c57cf..2a7efe54d 100644 --- a/editor/sass/style.scss +++ b/editor/sass/style.scss @@ -38,7 +38,7 @@ @import "tabs"; @import "tab-config"; @import "tab-info"; - +@import "popover"; @import "flow"; @import "dragdrop";