Tooltip on item update time #2247

Merged
merged 10 commits into from Nov 4, 2016

Projects

None yet

2 participants

@yotamberk
Contributor

see #1506

@yotamberk yotamberk added the Timeline label Oct 31, 2016
@mojoaxel

Very nice!! This is fabulous!
Maybe you can change these small details and then we have a cool new feature!

@@ -90,6 +90,16 @@
padding: 5px;
}
+.vis-item .vis-onUpdateTime-tooltip {
@mojoaxel
mojoaxel Nov 1, 2016 Member

Please add text-align: center and white-space: nowrap, make it autosize and remove the double background:

.vis-item .vis-onUpdateTime-tooltip {
    position: absolute;
    color: white;
    width: auto;
    background: #4f81bd;
    padding: 5px;
    border-radius: 1px;
    text-align: center;
    white-space: nowrap;
}
@yotamberk
yotamberk Nov 4, 2016 Contributor

Done!

lib/timeline/component/item/Item.js
+ * @protected
+ */
+Item.prototype._repaintOnItemUpdateTimeTooltip = function (anchor) {
+ if (!this.options.tooltipOnItemUpdateTime) return
@mojoaxel
mojoaxel Nov 1, 2016 Member

Please add a semicolon at the end of the line. Without it the code is more error-prone.

@yotamberk
yotamberk Nov 4, 2016 Contributor

done!

+
+ <script src="../../../dist/vis.js"></script>
+ <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
+
@mojoaxel
mojoaxel Nov 1, 2016 Member

Maybe it would be nice to demonstrate also how to overwrite the tooltip style. e.g. with something simple like:

.vis-item .vis-onUpdateTime-tooltip {
    border-radius: 4px;
}
@yotamberk
yotamberk Nov 4, 2016 Contributor

good idea! done

+
+<script>
+
+ // create groups
@mojoaxel
mojoaxel Nov 1, 2016 Member

I personally would prefer a much more simple example without groups and stuff. Just something like the basicExample.

+
+ // specify options
+ var options = {
+ orientation: 'top',
@mojoaxel
mojoaxel Nov 1, 2016 Member

We only should change options that are necessary to show the new feature.

+ maxHeight: 400,
+ start: new Date(),
+ end: new Date(1000*60*60*24 + (new Date()).valueOf()),
+ tooltipOnItemUpdateTime: true,
@mojoaxel
mojoaxel Nov 1, 2016 Member

I really would like to see the new template option here to show how it works. Can you please add an simple example!?

+ <td>Show a tooltip on updating an item's time. Note: <code>editable.updateTime</code> must be <code>true</code></td>
+ </tr>
+ <tr parent="tooltipOnItemUpdateTime" class="hidden">
+ <td class="indent">template</td>
@mojoaxel
mojoaxel Nov 1, 2016 Member

There already is a option template. Maybe we should call it tooltipTemplate or hoverTemplate or something like this? I'm not sure.

@yotamberk
yotamberk Nov 4, 2016 Contributor

Well, it's in the tooltipOnItemUpdateTime so I don't think we need to change the name.

@mojoaxel mojoaxel merged commit 51528ba into almende:develop Nov 4, 2016
@mojoaxel
Member
mojoaxel commented Nov 4, 2016

@yotamberk Thanks! Thats a nice new feature!

@mjmaix mjmaix referenced this pull request in luciuschoi/visjs-rails Nov 30, 2016
Open

Upgrade v4.17 #4

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment