diff options
Diffstat (limited to 'ui/imports/ui/components/graph-tooltip-window')
3 files changed, 99 insertions, 0 deletions
diff --git a/ui/imports/ui/components/graph-tooltip-window/graph-tooltip-window.html b/ui/imports/ui/components/graph-tooltip-window/graph-tooltip-window.html new file mode 100644 index 0000000..53537ca --- /dev/null +++ b/ui/imports/ui/components/graph-tooltip-window/graph-tooltip-window.html @@ -0,0 +1,17 @@ +<!-- +######################################################################################## +# Copyright (c) 2017 Koren Lev (Cisco Systems), Yaron Yogev (Cisco Systems) and others # +# # +# All rights reserved. This program and the accompanying materials # +# are made available under the terms of the Apache License, Version 2.0 # +# which accompanies this distribution, and is available at # +# http://www.apache.org/licenses/LICENSE-2.0 # +######################################################################################## + --> +<template name="GraphTooltipWindow"> + <div class="os-graph-tooltip-window {{#if show}}cl-visible{{/if}}" + style="top: {{ top }}px; left: {{ left }}px;"> + <div class="sm-label"><u>{{ label }}</u></div> + <div class="sm-title">{{{ title }}}</div> +</div> +</template> diff --git a/ui/imports/ui/components/graph-tooltip-window/graph-tooltip-window.js b/ui/imports/ui/components/graph-tooltip-window/graph-tooltip-window.js new file mode 100644 index 0000000..48b1903 --- /dev/null +++ b/ui/imports/ui/components/graph-tooltip-window/graph-tooltip-window.js @@ -0,0 +1,57 @@ +///////////////////////////////////////////////////////////////////////////////////////// +// Copyright (c) 2017 Koren Lev (Cisco Systems), Yaron Yogev (Cisco Systems) and others / +// / +// All rights reserved. This program and the accompanying materials / +// are made available under the terms of the Apache License, Version 2.0 / +// which accompanies this distribution, and is available at / +// http://www.apache.org/licenses/LICENSE-2.0 / +///////////////////////////////////////////////////////////////////////////////////////// +/* + * Template Component: GraphTooltipWindow + */ + +//import { Meteor } from 'meteor/meteor'; +import { Template } from 'meteor/templating'; +//import { ReactiveDict } from 'meteor/reactive-dict'; +import { SimpleSchema } from 'meteor/aldeed:simple-schema'; + +import './graph-tooltip-window.html'; + +/* + * Lifecycles + */ + +Template.GraphTooltipWindow.onCreated(function() { + let instance = this; + + instance.autorun(() => { + new SimpleSchema({ + label: { type: String }, + title: { type: String }, + left: { type: Number }, + top: { type: Number }, + show: { type: Boolean } + }).validate(Template.currentData()); + }); +}); + +/* +Template.GraphTooltipWindow.rendered = function() { +}; +*/ + +/* + * Events + */ + +Template.GraphTooltipWindow.events({ +}); + +/* + * Helpers + */ + +Template.GraphTooltipWindow.helpers({ +}); + + diff --git a/ui/imports/ui/components/graph-tooltip-window/graph-tooltip-window.styl b/ui/imports/ui/components/graph-tooltip-window/graph-tooltip-window.styl new file mode 100644 index 0000000..ec94023 --- /dev/null +++ b/ui/imports/ui/components/graph-tooltip-window/graph-tooltip-window.styl @@ -0,0 +1,25 @@ +/* Set the component style here */ +// "GraphTooltipWindow" +.os-graph-tooltip-window + visibility: hidden; + + position: absolute; + text-align: left; + opacity: 0 + font: normal 18px sans-serif !important; + /* width: 60px; */ + /* height: 28px; */ + padding: 20px; + font: 16px sans-serif; + background: dk-gray1; + color white + border: 2px solid stark-blue + pointer-events: none; + + transition: visibility 0.5s, opacity 0.5s linear + +.os-graph-tooltip-window.cl-visible + visibility: visible + opacity: 0.9 + transition: visibility 0.2s, opacity 0.2s linear + |