Privacy Policy popup covers collapsed admin menu

[littler.chicken]

On logging in to trunk this morning, saw the new Privacy Policy admin pointer pointing to the admin menu. I have my menu collapsed, and so the popup completely covers the menu icons. Assume it's a positioning issue to be tweaked in the $js_args for the pointer? If the menu is not collapsed, the positioning is okay, although it seems like it's between Tools and Settings.

The $position maybe needs to check if the menu is folded for the at position value in addition to is_rtl(). (My setup is not RTL, but that may be affected as well.)

[littler.chicken]

screen shot of privacy policy pointer blocking admin menu

[ianbelanger]

screenshot of privacy policy popup alignment 1920px screen

[desrosj]

Related #43996.

Edit: Changed to correct ticket number.

[desrosj]

Good catch, @littler.chicken!

43961.diff​ should fix the issue. It also fixes the issue described in #43996.

A few changes in 43961.diff​ that I am not sure are ideal:

• The pointer is no longer pulled over the tools menu item
• The pointer is no longer positioned in the exact middle of the Tools and Settings menu items.

The approach accounts for all RTL, screen size, and plugins adding menu item scenarios.

[ianbelanger]

After seeing the patch, I think the initial placement actually made more sense. The new pages are under both Tools and Settings. Furthermore, I think that the Privacy Policy headline and paragraph should be placed under the Personal Data Export and Erasure headline and paragraph, because that's where it is located in the Admin Menu. My 2 cents

[ianbelanger]

Patch that changes the order of the popup text to match menu items order

[melchoyce]

Is 43961-privacy-popup-text.PNG​ using the default pointer spacing? (It's kind of uneven, but if it's just the way pointers are styled, I'll deal.)

[ianbelanger]

Updated screenshot with 43961.diff applied

[melchoyce]

I have a couple recommended styling tweaks in Shot 2018-05-09 at 12.27.52 PM.png:

.wp-pointer-content h4 {
    margin: 1.33em 20px 1em;
    font-size: 1.15em;
}

.wp-pointer-content p {
    padding: 0 20px;
}

[desrosj]

43961.3.diff​ combines @ianbelanger's suggestion to flip the text, and @melchoyce's style changes with the bug fix.

[ianbelanger]

Tested on Windows 10, Chrome, 1920 screen, looks good

[ianbelanger]

merged @desrosj 43961.3.diff and reversed the Popup Headline text to Personal Data and Privacy to match order

[ianbelanger]

Updated screenshot with 43961.4.diff applied

[ianbelanger]

Tablet screenshot with 43961.4.diff applied

[iandunn]

In 43210:

Privacy: Reposition admin pointer to avoid covering collapsed menu.

Previously the pointer overlapped the menu in order to draw attention to the fact that it applies to both the Tools and Settings menus. That caused a conflict if the menu was collapsed, though, because the icons were covered by the pointer and therefore inaccessible.

Additionally, minor tweaks were made to the text order and formatting. The order of the two sections was swapped in the title and paragraph, in order to match the order of the corresponding menu items. The spacing around headings and paragraphs was tweaked to remove extraneous whitespace.

Props littler.chicken, desrosj, ianbelanger, melchoyce.
Fixes #43961.

[iandunn]

Reopening for backport to 4.9.

[SergeyBiryukov]

In 43214:

Privacy: Reposition admin pointer to avoid covering collapsed menu.

Previously the pointer overlapped the menu in order to draw attention to the fact that it applies to both the Tools and Settings menus. That caused a conflict if the menu was collapsed, though, because the icons were covered by the pointer and therefore inaccessible.

Additionally, minor tweaks were made to the text order and formatting. The order of the two sections was swapped in the title and paragraph, in order to match the order of the corresponding menu items. The spacing around headings and paragraphs was tweaked to remove extraneous whitespace.

Props littler.chicken, desrosj, ianbelanger, melchoyce.
Merges [43210] to the 4.9 branch.
Fixes #43961.

[desrosj]

Moving to the new Privacy component.