Make WordPress Core

Opened 11 years ago

Closed 10 years ago

Last modified 10 years ago

#26672 closed task (blessed) (invalid)

Flatten modals

Reported by: tillkruess's profile 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 11 years ago.
26672.patch (1.8 KB) - added by tillkruess 11 years ago.
26672.2.patch (1.8 KB) - added by iseulde 10 years ago.
26672.3.patch (2.4 KB) - added by tillkruess 10 years ago.
light-overlay-mce-window.png (254.5 KB) - added by tillkruess 10 years ago.
Media Library with light overlay
light-overlay-thickbox.png (227.2 KB) - added by tillkruess 10 years ago.
Thickbox modal with light overlay
light-overlay-media-lib.png (116.1 KB) - added by tillkruess 10 years ago.
Media Library with light overlay
26672.4.patch (6.5 KB) - added by iseulde 10 years ago.

Download all attachments as: .zip

Change History (29)

@tillkruess
11 years ago

#1 @SergeyBiryukov
11 years ago

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

#2 @tillkruess
11 years 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.

@tillkruess
11 years ago

#3 @tillkruess
11 years ago

26672.patch removes the TinyMCE modal window shadow as well

#4 @SergeyBiryukov
11 years ago

  • Milestone changed from Awaiting Review to 3.9

#6 @helen
10 years ago

  • Keywords needs-refresh added

#7 @tillkruess
10 years ago

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

#8 @nacin
10 years ago

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

@iseulde
10 years ago

#9 @iseulde
10 years 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.

@tillkruess
10 years ago

#10 @tillkruess
10 years ago

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

Last edited 10 years ago by tillkruess (previous) (diff)

#11 @nacin
10 years 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.

@tillkruess
10 years ago

Media Library with light overlay

@tillkruess
10 years ago

Thickbox modal with light overlay

@tillkruess
10 years ago

Media Library with light overlay

#12 @tillkruess
10 years 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.

#13 follow-up: @nacin
10 years 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.

#14 @iseulde
10 years 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.

#15 in reply to: ↑ 13 @iammattthomas
10 years 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.

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


10 years ago

@iseulde
10 years ago

#17 @iseulde
10 years 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 ).

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


10 years ago

#20 @iseulde
10 years 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.

#21 @SergeyBiryukov
10 years ago

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