Extra Notes Popover doesn't automatically re-align

[ghost]

When editing text in the Extra Notes Popup, while having mouse over task, Popup acts a bit abnormal:

While deleting a majority of large text in the popup, the mini arrow of popup, will reposition to the right hand side. See image.

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

[crookedneighbor]

Duplicate of #4307

[ghost]

It's not exactly the same. The issue I have presented is caused when there is a CHANGE in the text of Extra Notes.

Once task is saved, and the mouse scrolls out of and back into the task, the popup will be in the correct place again.

[crookedneighbor]

You are correct, I misread a key detail. I thought looking at the screenshots, that they were behaving the same way as the issue I linked to, but you're right, it's different.

This is happening because the popover placement is not dynamic, it gets generated at the time of appearance based on the width of the popover. So when the notes field gets changed, either made longer or shorter, it adjusts the width, but not the placement, causing it to behave as illustrated in the screenshots.

A possible fix would be to hide the popover when editing the task, since there is no reason to see it while editing the field.

[ghost]

Actually markdown emoticons as well as markdown effects can only be seen through the popup, and it is quite usefull. A better solution would be to keep the div the same size when editing, and the only have the placement change when the mouse goes over it after the task has been updated.

[crookedneighbor]

I'll concede to your point about the markdown. I've been working on the popovers on the inventory screen and figured out how to fix the other issue I mentioned. It also fixes the initial misplacement of the popover on the tasks, but it does not fix the popover misplacement after changing the text.

After some more research, it turns out that this is a bug with the angular-ui popover library that we're using. You can demo it here by changing the popover text to something much longer than is there, clicking the Dynamic popover button and then changing the text to something shorter.

Any developers that want to work on this should git clone this repo: https://github.com/angular-ui/bootstrap/ and submit a PR there. Here is an issue that is talking about the problem. Note: Popovers inherit from tooltip.

I don't think patching it by setting a fixed width and height to the popover would work, since the issue also occurs when starting with a small amount of text to a larger amount of text:

And really, all you need to do to re-align it again is to hover away from the task and then hover back over the top of it:

So I'm not sure it's worth patching here, especially when the problem is with the angular-ui library.

Do other devs have thoughts?

[gkjt]

I'm new to the habitrpg code so this may not help, but who's code does the size update, the habit code or the library? Would it be possible to have it update position as well as the width? Even if it was just horizontally, it would look better in the meantime to have it stay central at least I would think.

(Edit: Just realised how late I am to this party, was just browsing the priority - minor tag)

[kangabell]

@gkjt I'm pretty sure it's bootstrap (http://getbootstrap.com/2.3.2/javascript.html#popovers), but had trouble identifying what file(s) are doing this.

What would be the benefit to having it positioned horizontally?

[crookedneighbor]

@kangabell Very close, it's actually http://angular-ui.github.io/bootstrap/#/popover that is managing almost all of the popovers.

[gkjt]

@kangabell @crookedneighbor Ah, ok, so there is no easy way of getting it to update. And I was thinking having horizontal placement would be an easy way of making it look better without doing everything.

What if on a keypress the popover was hidden then recreated? That way you could still see a preview, and it would do the same as moving the mouse over and back.

[kangabell]

@gkjt How would switching to a keypress resolve the placement issue?

[crookedneighbor]

@kangabell If the popover is destroyed and then recreated on every keypress, the placement should update as well, since the placement is determined on creation.

@gkjt Seems kind of expensive to me. Maybe if there was some kind of delay built in, I'd be more for it.

[gkjt]

@crookedneighbor That would be the thing, but a delay would help solve it. On a key press close the popover, and reset a 1 or 2 second delay? Then once the delay is finished control is handed back to the mouse.

If the mouse is already in the hover area, would the popover show again, as there is no event to trigger it, or would we need to manually check for the mouse being in the area still?

[SabreCat]

Client display issue. Pending until after the frontend redesign.

[lemoness]

This now behaves differently, so I am closing this ticket.