Upcoming changes to contextual hover menu styling (beta)

[fu]

For those of you on beta, expect some changes to the contextual hover menu styling. The changes are not live yet; this is just so you don't suddenly wake up to find your journals have changed with no explanation.

If you haven't turned on the JS on Journal beta, you won't notice any changes.

If you are on the beta, then you'll notice that the contextual hover menu will look like this:

The changes to appearance are relatively minor: we've spaced things out a bit more and given each link more room to breath; unshrunk the text; made the border less abrupt; increased the icon size.

The bigger change is in behavior, to trigger the menu only when you've hovered over a userhead / icon deliberately, rather than just passed your mouse over, and to get rid of some annoying bugs where the menu would show up when you might not want it / not show up when you did want it. Which isn't precisely relevant to this community, but just so you know!

What is more relevant: if you're interested in styling it further for your own styles, the soon-to-be new markup is under the cut.

The biggest change is that we no longer have an .Inner, and that some of the elements have been reordered.

Old markup:

<div class="ippu ContextualPopup">
    <div>
        <div class="Inner">
            <div class="Userpic">
                <a href=""><img src="" width="" height=""></a>
            </div>
            <div class="Content">
                <div class="Relation RelationshipStatus">
                    You have granted access to username
                    <br>
                    You have subscribed to username
                </div>
                <span>
                    <a href="">Send message</a>
                </span>
                <br>
                <span>
                    <span class="RemoveTrust">
                        <a href="">Remove access</a>
                    </span>
                </span>
                <br>
                <span>
                    <span class="RemoveWatch">
                        <a href="h">Remove subscription</a>
                    </span>
                </span>
                <br>
                <span>
                    <span class="SetBan">
                        <a href="">Ban user</a>
                    </span>
                </span>
                <br>
                <span>
                    View:
                </span>
                <a href="">Journal</a>
                <span>
                    &nbsp;|
                </span>
                <a href="">Profile</a>
                <div class="ljclear">
                    &nbsp;
                </div>
            </div>
        </div>
    </div>
</div>

New markup:

<div class="ui-tooltip ui-widget ... ContextualPopup">
    <div class="ui-tooltip-content">
            <div class="Userpic">
                <a href=""><img src="" alt=""></a>
            </div>
            <div class="Content">
                <div class="Relation">Current relationship status</div>
                <div class="Actions">
                    <div><a href="">Subscribe to username</a></div>
                    <div><a href="">Grant access to username</a></div>
                    <div><a href="">Ban username</a></div>
                </div>
            </div>
    </div>
</div>

Comments

[swaldman]

Ooh, that new pop up box looks really nice :-)

[ninetydegrees]

<3

[musyc]

Oh oh oh, I was going to ask if there could be a "cancel" button somewhere in the tracking popup, because I'm accidentally hitting it all the time on my iThingie, but now with the new design I can see the X-cancel and it's SO BEAUTIFUL. *sparkly eyes*

Dreamwidth, where they think of things I want before I know I want them.

[fu]

Pleasure to be of service, and glad you like it :D

I'm just...

[marahmarie]

In Firefox the menu and text are both huge, the entire menu is tilted and the background is (incorrectly by the way I have it coded) showing up pure white; while in IE it's still displaying exactly the way I wanted it (small, with small font and a black background).

I mean, I'll look through my CSS, but I'm not even sure where to start if it's displaying my CSS overrides correctly in one browser but not in the other (because if I "fix" things for Fx then what happens in IE?).

Also, in Fx the hover menu is taking just forever; I have to wiggle the mouse over an icon five or six times to get it to show up at all.

Sorry to be the one to notice all this, but...

ETA: It was being in the Beta Testing. Turned it off and all the problems went away. Never mind, I guess? Or does something still need to be fixed for Beta users?

Re: I&#39;m just...

[fu]

I think the difference between the two is that you'd have been logged into Firefox on an account with the beta turned on,and either logged off on IE, or else on a different account!

You'll probably need to slightly adjust your CSS to account for the new HTML structure -- we have someone looking into making things work for official layouts; it might be useful to wait for thoes and base your changes upon them!

Re: hover menu it's actually a deliberate thing. If you hold your mouse over the icon rather than moving it away at once, then it'll show up. (This is to account for someone scrolling down the page where their mouse goes over an icon, where they don't really mean to get the icon, they're just trying to go through their read page)

Re: I&#39;m just...

[marahmarie]

OK, well, point being, the behavior with Beta turned on was bizarre. Like deliberately pointing at the icon five or six times without moving the mouse away for several seconds each time in order to get the hover menu to show up just once is 1) not the expected, normal behavior even to this day and 2) really annoying and weird (perhaps I didn't describe this behavior adequately in my first reply, either, and if not I really do apologize for that). But I read the post you made recently saying you want us to report any new icon/hover/JS problems happening for those of us in Beta so when I get some more time I'm going to turn it back on and if that behavior persists (and I'm pretty sure it will, at least in Firefox) I'll report it again here and/or to Support (or just tell me where you think is best to let y'all know).

And yeah, definitely concur IE was behaving correctly because I was logged out in IE/Beta is not enabled while logged out (good point! *slaps head*).

ETA: Just turned Beta back on again and viewed in Firefox (but turning it off again until I have time to re-style the hover menu to match its non-Beta appearance) and here's how it went (I should make a video for you, it's that bizarre):

1) Pass One with mouse: hovermenu showed up immediately.
2) Pass Two, Three, Four, Five and Six: no hovermenu, just hovertext (in my case, that's where it says "Sheep go to heaven").
3) Pass Seven: hovermenu showed up, but only when I hit the top-middle of the icon or higher with mouse, which went for Passes Eight, Nine and Ten as well.
4) Passes Ten-Twenty: No hovermenu. Just hovertext.

I'll be glad to turn Beta back on again before I have time to re-style the hovermenu if you want me to for debugging purposes, but otherwise I'd rather just keep it off until I get time to play with it again.

[tamerlane]

This is late, but I assume it's the best place for feedback on it. It's a little clunky and unattractive. I think removing the "Grant Access" and/or "Subscribe" would make it less... intrusive? The old one with slightly larger text would have been better.

Additionally, it seems to lag a little. I don't know if this is just me, but it stays around a little too long.

It would also be nice to have it so when I hover over a username it offers the name in the "About" section as opposed to my username. You know my username already, you can see it right beside the icon you're hovering over!