WordPress.org

Make WordPress Core

Opened 7 months ago

Closed 4 months ago

Last modified 3 months ago

#26672 closed task (blessed) (invalid)

Flatten modals

Reported by: tillkruess Owned by:
Milestone: Priority: normal
Severity: normal Version: 3.8
Component: Administration Keywords: has-patch
Focuses: ui Cc:

Description

The ThickBox and Media Modal can lose their shadows to match the 3.8 admin style.

Attachments (8)

26672.diff (1.6 KB) - added by tillkruess 7 months ago.
26672.patch (1.8 KB) - added by tillkruess 7 months ago.
26672.2.patch (1.8 KB) - added by avryl 4 months ago.
26672.3.patch (2.4 KB) - added by tillkruess 4 months ago.
light-overlay-mce-window.png (254.5 KB) - added by tillkruess 4 months ago.
Media Library with light overlay
light-overlay-thickbox.png (227.2 KB) - added by tillkruess 4 months ago.
Thickbox modal with light overlay
light-overlay-media-lib.png (116.1 KB) - added by tillkruess 4 months ago.
Media Library with light overlay
26672.4.patch (6.5 KB) - added by avryl 4 months ago.

Download all attachments as: .zip

Change History (29)

tillkruess7 months ago

comment:1 SergeyBiryukov7 months ago

  • Keywords ui-focus has-patch added
  • Version changed from trunk to 3.8

comment:2 tillkruess7 months ago

That attached patch removes the shadows from the media-modal and the thickbox-modals.

It additionally removes the 1px border from the thickbox-modals and sets it's background color to transparent to prevent the 3px overlay at the bottom.

tillkruess7 months ago

comment:3 tillkruess7 months ago

26672.patch removes the TinyMCE modal window shadow as well

comment:4 SergeyBiryukov7 months ago

  • Milestone changed from Awaiting Review to 3.9

comment:6 helen4 months ago

  • Keywords needs-refresh added

comment:7 tillkruess4 months ago

Ticket can be closed. I just checked, all CSS properties have already been removed in core.

comment:8 nacin4 months ago

I see the thickbox.css rules still there. Unsure about the others.

avryl4 months ago

comment:9 avryl4 months ago

  • Keywords needs-refresh removed

Have they? I can still see a shadow around the media modal and TinyMCE modals (and ThickBox modals). Patch above.

tillkruess4 months ago

comment:10 tillkruess4 months ago

26672.3.patch additionally overrides -moz-box-shadow (where needed) and removes the Thickbox shadow.

Last edited 4 months ago by tillkruess (previous) (diff)

comment:11 nacin4 months ago

I'm not convinced this is something we should do. While 3.8 flatted much of the visual elements in the admin, should that also apply to dialogs/modals? I'm not convinced that's the intent. I've asked iammattthomas to also weigh in here.

If we're not going to remove them, I think it'd be nice if they all used the same background overlay and shadow. The theme overlay (not covered here) uses a much lighter appearance, while Thickbox and TinyMCE uses much darker one. The media modal's style is really great — a good balance of being a visual cue and yet also being subtle.

tillkruess4 months ago

Media Library with light overlay

tillkruess4 months ago

Thickbox modal with light overlay

tillkruess4 months ago

Media Library with light overlay

comment:12 tillkruess4 months ago

We talked about removing the modal shadows in the MP6 Skype group a while ago, that's why I created the ticket.

I've attached 3 (rough) screenshots of how the modals with the shadow and overlay styles of the theme modal.

comment:13 follow-up: nacin4 months ago

  • Type changed from enhancement to task (blessed)

I have a feeling the dark media modal overlay might look a bit better, but maybe I'm just jarred by the change. Waiting for MT to weigh in.

comment:14 avryl4 months ago

I also think the dark overlays are better. In the case of the theme modals, a light overlay fits better because you still want access to the adminbar and menu, and it 'blurs' the content immediately around it. It's okay that it feels like it's part of the page. But for any of the other modals you put an overlay over the entire page. The light colours of the modal and the light overlay make it feel like it's one huge block.

comment:15 in reply to: ↑ 13 iammattthomas4 months ago

Replying to nacin:

I have a feeling the dark media modal overlay might look a bit better, but maybe I'm just jarred by the change. Waiting for MT to weigh in.

Agreed. The light background doesn't provide the contrast against the interior of the lightbox the way the dark one does, which more easily focuses the eye on the important bits.

Not that important, but it could be worth making the lightbox header use a light background instead of a dark gray, which kind of blends into the background.

comment:16 ircbot4 months ago

This ticket was mentioned in IRC in #wordpress-dev by nacin. View the logs.

avryl4 months ago

comment:17 avryl4 months ago

Patch above gives all overlays an opacity of 0.7 (also added the filter property for all of them for IE) and sets all shadows to 0 3px 6px rgba( 0, 0, 0, 0.3 ).

comment:18 ircbot4 months ago

This ticket was mentioned in IRC in #wordpress-ui by avryl. View the logs.

comment:19 avryl4 months ago

Updated patch in #26952: 26952.11.patch.

comment:20 avryl4 months ago

  • Resolution set to invalid
  • Status changed from new to closed

All the overlays and shadows have been updated in [27532]. We decided to keep the shadow and dark backdrop, but to tone the shadow down a bit for smaller modals.

comment:21 SergeyBiryukov3 months ago

  • Milestone 3.9 deleted
Note: See TracTickets for help on using tickets.