WordPress.org

Make WordPress Core

Opened 4 years ago

Closed 4 years ago

Last modified 4 years ago

#31898 closed defect (bug) (fixed)

Icons in selection view have two blue borders

Reported by: iseulde Owned by: helen
Milestone: 4.2 Priority: normal
Severity: normal Version: 4.0
Component: Media Keywords: has-patch commit
Focuses: ui Cc:

Description (last modified by DrewAPicture)

From the Insert Media modal, when you select media that only have icons for a preview (such as PDFs), the icon in the selection list at the bottom of the modal has a double border.

See screenshots.

Attachments (15)

Screen Shot 2015-04-05 at 18.51.25.png (22.1 KB) - added by iseulde 4 years ago.
4.1
Screen Shot 2015-04-05 at 18.51.39.png (10.8 KB) - added by iseulde 4 years ago.
4.2 beta
icon_selection_41.png (13.5 KB) - added by DrewAPicture 4 years ago.
31898.patch (709 bytes) - added by tyxla 4 years ago.
Removing double border and fixing icon centering in selection section of media modal
Screen Shot 2015-04-06 at 11.58.06.png (18.4 KB) - added by iseulde 4 years ago.
The focus style in 4.1 is also weird.
31898.2.patch (765 bytes) - added by iseulde 4 years ago.
31898.3.patch (1.4 KB) - added by iseulde 4 years ago.
Screen Shot 2015-04-07 at 07.23.38.png (37.7 KB) - added by iseulde 4 years ago.
trunk
Screen Shot 2015-04-07 at 07.24.08.png (37.6 KB) - added by iseulde 4 years ago.
trunk
Screen Shot 2015-04-07 at 07.25.59.png (37.7 KB) - added by iseulde 4 years ago.
.3
Screen Shot 2015-04-07 at 07.26.12.png (37.7 KB) - added by iseulde 4 years ago.
.3
31898.4.patch (1.3 KB) - added by iseulde 4 years ago.
Screen Shot 2015-04-07 at 08.04.04.png (37.7 KB) - added by iseulde 4 years ago.
.4
Screen Shot 2015-04-07 at 08.04.20.png (37.7 KB) - added by iseulde 4 years ago.
.4
Screen Shot 2015-04-07 at 08.04.55.png (38.4 KB) - added by iseulde 4 years ago.
.4

Download all attachments as: .zip

Change History (30)

#1 @DrewAPicture
4 years ago

  • Description modified (diff)
  • Focuses ui added
  • Keywords needs-patch added
  • Milestone changed from Awaiting Review to 4.2

Confirmed, and this also seems to be a regression from 4.1:

.

@tyxla
4 years ago

Removing double border and fixing icon centering in selection section of media modal

#2 @tyxla
4 years ago

  • Keywords has-patch added; needs-patch removed

#3 @tyxla
4 years ago

Confirmed here too - I was able to replicate that on all browsers I've tested on.
Attached a patch that addresses the 2 issues:

  • Double border for non-image selection icons;
  • Vertical centering of the non-image selection icons within their bounding box.

@iseulde
4 years ago

The focus style in 4.1 is also weird.

#4 @DrewAPicture
4 years ago

  • Milestone changed from 4.2 to Future Release
  • Version changed from trunk to 4.0

My badness, this goes all the way back to 4.0 as aptly pointed out by @iseulde. Let's look at this in 4.3 instead.

#5 @tyxla
4 years ago

Just to mention that the patch I've submitted above resolves the focus style issue as well.

@iseulde
4 years ago

#6 @DrewAPicture
4 years ago

  • Milestone changed from Future Release to 4.2

And we're back in the game!

#7 @iseulde
4 years ago

@tyxla Does .2 work for you?

#8 @iseulde
4 years ago

  • Owner set to helen
  • Status changed from new to reviewing

#9 @DrewAPicture
4 years ago

  • Keywords commit added

@iseulde
4 years ago

#10 @tyxla
4 years ago

Hey @iseulde,

Patch .2 not quite working for me - there's still a double border, and a weird box shadow.

Patch .3 does work for me, but it makes too many changes IMHO, and adds a constant double border as well, which I'd personally avoid. Also, previously the blue border of the selected state was outside of the item's border, making the selected item more easy to notice. With your patch, the selected blue border is using the item border, which looks fine, but it would probably need UI feedback, as it changes the current appearance a bit. I personally like the previous one more, with the border being outside - my patch compliments that previous appearance.

I still think my patch is doing the job while doing as little changes as needed.

#11 @iseulde
4 years ago

Also, previously the blue border of the selected state was outside of the item's border, making the selected item more easy to notice. With your patch, the selected blue border is using the item border, which looks fine, but it would probably need UI feedback, as it changes the current appearance a bit.

It uses box shadow and moves it from inside the box to outside the box.

and adds a constant double border as well

It does not add it, it just moves it outside, like the attachments in the browser. It may be better without it. I will look at the original design.

@iseulde
4 years ago

#12 @iseulde
4 years ago

.4 is .3 and removes the grey border (as it is in 3.5).

#13 @tyxla
4 years ago

31898.4.patch looks good to me.

#14 @helen
4 years ago

  • Resolution set to fixed
  • Status changed from reviewing to closed

In 32072:

Media: Fix focus and selected state for the selected attachments set.

props iseulde.
fixes #31898.

#15 @helen
4 years ago

Missed the initial patch from tyxla in props - sorry about that.

Note: See TracTickets for help on using tickets.