Skip to content
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

Open
wants to merge 3 commits into
base: master
Choose a base branch
from

Conversation

jlorenzen
Copy link

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.

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.
@usmonster
Copy link
Collaborator

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 fn-gantt-hint class?

@jlorenzen
Copy link
Author

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.

@usmonster
Copy link
Collaborator

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 detach() instead of continually creating and remove()ing the element.)

This would give us a clean selector (e.g. .fn-gantt .bar.ganttRed .fn-gantt-hint) that allows us to style the hint how we want without having to change or override existing rules for the bar's custom class. Would you be willing to try that out and maybe make a new pull request? Thanks again!

@jlorenzen
Copy link
Author

Yeah I can give that a shot.
I'm not sure I understand your first comment though. I don't think it would
hurt any existing users unless they have modified the source themselves, at
which point I don't think you can avoid preventing issues if they modify
the source and upgrade to a newer version. Currently, the only selector
that gives them control for the hover is .fn-gantt-hint. I don't think
adding another class to the hover div tag would break anything in that
situation. For example, let's say I wanted to make the text bold in the
hover, I would add this selector to my css:

.fn-gantt-hint{font-weight: bold;}

And if that developer got a new version where we add the customClass to the
hover div tag, that developers style still works.

Again, I may not understand everything completely and might/probably am
missing something.

If you still want me to, I can try to make those other changes you
recommended. Let me know.

On a side note, I also thought it was strange how it was getting added to
the body. I was looking for it in chrome and could never find it. I finally
had to comment the remove call so I could inspect it.

Let me know if my changes are still good enough or if you think it's worth
it to make the changes you suggest.

On Mon, Oct 7, 2013 at 5:22 PM, usmonster notifications@github.com wrote:

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: Calling detach() instead of remove()on mouseout would also be a better practice.)

This would give us a clean selector (e.g. .fn-gantt .bar.ganttRed
.fn-gantt-hint) that allows us to style the hint how we want without
having to change or override existing rules for the bar's custom class.
Would you be willing to try that out and maybe make a new pull request?
Thanks again!


Reply to this email directly or view it on GitHubhttps://github.com//pull/98#issuecomment-25850561
.

@usmonster
Copy link
Collaborator

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 customClass that current users of the plugin expect only to appear on the bars. Thus the styles are newly applied to the hint element, which is a change in the default behavior of the plugin. This might be unwanted by many users and may require that they rework their existing CSS after an upgrade if they wanted to go back to the old/default appearance.

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!

@jlorenzen
Copy link
Author

Oh right. I see now. I think the only way current users would see that
issue with the current patch as-is would be if they defined a selector
override of just .ganttRed instead of say .bar.ganttRed.

Either way, I'm guessing you'd prefer I implement a new pull request with
your suggestions? I'll try to look into that tonight.

On Tue, Oct 8, 2013 at 9:58 AM, usmonster notifications@github.com 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 customClass that
current users of the plugin expect only to appear on the bars. Thus the
styles are newly applied to the hint element, which is a change in the
default behavior of the plugin. This might be unwanted by many users and
may require that they rework their existing CSS after an upgrade if they
wanted to go back to the old/default appearance.

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!


Reply to this email directly or view it on GitHubhttps://github.com//pull/98#issuecomment-25897363
.

@usmonster
Copy link
Collaborator

The other common use case to watch for would be when the customClass isn't one that's given in the plugin's own stylesheet, but one that is used in externally-defined styles. In this case, we cannot predict the effect of adding the class to the hint div.

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. :]

@jlorenzen
Copy link
Author

Ah very good point on externally defined styles. I hadn't thought of that.

On Tue, Oct 8, 2013 at 10:40 AM, usmonster notifications@github.com wrote:

The other common use case to watch for would be when the customClassisn't one that's given in the plugin's own stylesheet, but one that is used
in externally-defined styles. In this case, we cannot predict the effect of
adding the class to the hint div.

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. :]


Reply to this email directly or view it on GitHubhttps://github.com//pull/98#issuecomment-25901376
.

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.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants