-
Notifications
You must be signed in to change notification settings - Fork 303
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add customClass to bar hover hint #98
base: master
Are you sure you want to change the base?
Conversation
Updated the bar mouseover hint to also include the customClass. This will give developers more control over the color of the hover. Currently is defaults to a yellow. Now developers can customize the color of the hover based on the gantt Color passed in to the values.
Thanks for using the plugin, and even more for submitting a pull request! And while I wholeheartedly agree that the popover should be customizable, I'm not sure what generic advantage the custom class would have to a simple CSS override of the |
If you just override fn-gantt-hint that will apply to all hovers. For example, by default all hovers are yellow no matter what the customClass value is. So my progress bar is ganttRed, but the hover is yellow. I want to be able to customize the hover to be red as well, if the progress bar is ganttRed. |
Ah, yes, good idea. Nice straightforward implementation, though it may have unexpected side effects where users of the plugin already have very specific rules for their custom classes. Merging this would require these users to take action, which can be disruptive. I would instead propose changing how the hint itself is appended. It might be best to attach the hint to the bar itself, instead of to the body as it is done now. (Related note to self: It would also be a better practice to keep a reference to the hint and call This would give us a clean selector (e.g. |
Yeah I can give that a shot. .fn-gantt-hint{font-weight: bold;} And if that developer got a new version where we add the customClass to the Again, I may not understand everything completely and might/probably am If you still want me to, I can try to make those other changes you On a side note, I also thought it was strange how it was getting added to Let me know if my changes are still good enough or if you think it's worth On Mon, Oct 7, 2013 at 5:22 PM, usmonster [email protected] wrote:
|
Thanks for the response! Regarding my comment on possible side effects, I was referring to the fact that your patch as-is adds to the hint div the same The modifications I proposed should avoid this side effect since the class is not directly applied to the hint, but I haven't tested it out. Please let me know if you decide to implement the suggestions in a new pull request! |
Oh right. I see now. I think the only way current users would see that Either way, I'm guessing you'd prefer I implement a new pull request with On Tue, Oct 8, 2013 at 9:58 AM, usmonster [email protected] wrote:
|
The other common use case to watch for would be when the In any case, a new PR would be great, though no worries if you can't get around to it. It's all open development, and the change may eventually be implemented anyway. :] |
Ah very good point on externally defined styles. I hadn't thought of that. On Tue, Oct 8, 2013 at 10:40 AM, usmonster [email protected] wrote:
|
This reverts commit 63f711c.
Second pass at attempting to support allowing the user to control the color of the progress bar hover. Currently it's hardcoded to be yellow. Some users, like myself, might want to match the hover color with the progress bar color. My first attempt I added the customClass to the hint div. However, usmonster suggested to better support backwards compatibility that I instead try to append the hint div to the bar div since the bar div already has the customClass. This would give developers control over the hint div with a selector like .bar.ganttRed .fn-gantt-hint. These changes accomplish these use cases. However, I think the changes were more involved than we originally anticipated. There were two main issues I had to work around: position and z-index. First, now that we append to the bar div and not body, the left/top positioning had to be updated since the hint div is now relative to the bar div. So I had to use event.offsetX/Y, but those values were only available in Chrome and IE and not in Firefox. According to this jquery bug, http://bugs.jquery.com/ticket/8523, it's best to calculate the offset when offsetX/Y are not present. The second issue, was a z-index issue. I was curious to see how the hover worked if I had another progress bar right below another. Turns out that when you do this, with these changes, the hover is behind the other progress bar even though the z-index is correct. It appears that when the hint div was moved to the bar div this caused the issue. Moving it back to being appended to the body I don't see this issue. The solution was to remove the z-index for the .fn-gantt .bar style. This didn't seem to have any negative side effects, but it may not be the solution we want. I also applied an additional offset of 15 for both top and left. Previously we were only adding 15 for top and that was only on the mousemove. I added 15 to both top and left, and during mouseover and mousemove. Also doing it in mouseover prevents the hint from jumping, which I only noticed in IE. Finally, at the suggestion of usmonster, I replaced hint.remove() with hint.detach() in mouseout. I've tested all these changes in Chrome 30, Firefox 24, and IE9.
Updated the bar mouseover hint to also include the customClass. This
will give developers more control over the color of the hover. Currently
is defaults to a yellow. Now developers can customize the color of the
hover based on the gantt Color passed in to the values.