WordPress.org

Make WordPress Core

Opened 5 years ago

Closed 5 years ago

#28966 closed defect (bug) (fixed)

Checkbox icon is a bit out of place in RTL

Reported by: iseulde Owned by:
Milestone: 4.0 Priority: normal
Severity: normal Version:
Component: Build/Test Tools Keywords: has-patch commit
Focuses: ui, rtl Cc:

Description

See screenshots.

Attachments (6)

Screen Shot 2014-07-20 at 13.59.46.png (10.3 KB) - added by iseulde 5 years ago.
Screen Shot 2014-07-20 at 13.59.15.png (8.6 KB) - added by iseulde 5 years ago.
28966.patch (449 bytes) - added by SergeyBiryukov 5 years ago.
28966.2.patch (663 bytes) - added by SergeyBiryukov 5 years ago.
28966.flipped.png (5.0 KB) - added by SergeyBiryukov 5 years ago.
28966.current.png (5.0 KB) - added by SergeyBiryukov 5 years ago.

Download all attachments as: .zip

Change History (15)

#1 @iseulde
5 years ago

It probably also needs to be flipped.

#2 @SergeyBiryukov
5 years ago

  • Component changed from General to Build/Test Tools
  • Focuses rtl added
  • Keywords has-patch commit added
  • Milestone changed from Awaiting Review to 4.0

We have forms-rtl.css and l10n-rtl.css, but login-rtl.css still includes non-RTL versions.

There's a Grunt task to replace imported CSS file names in wp-admin-rtl.css, but not in other RTL files.

28966.patch should take care of that.

#3 @SergeyBiryukov
5 years ago

In 29256:

Gruntfile: Change import rules to include RTL stylesheets when running CSSJanus.

see #28966.

#4 follow-up: @SergeyBiryukov
5 years ago

28966.2.patch flips checkboxes in RTL: 28966.flipped.png. Removing width: 16px is intentional and doesn't seem to affect LTR.

#5 in reply to: ↑ 4 ; follow-up: @ramiy
5 years ago

Sergey, removing the width: 16px fixes the UI glitch. But the rotateY(180deg) is irrelevant.

#6 in reply to: ↑ 5 ; follow-up: @SergeyBiryukov
5 years ago

Replying to ramiy:

Sergey, removing the width: 16px fixes the UI glitch. But the rotateY(180deg) is irrelevant.

Without rotateY(180deg), I don't see a UI glitch: 28966.current.png. And removing width: 16px doesn't seem to make a difference in that case.

Should we just leave it as is then?

#7 in reply to: ↑ 6 @ramiy
5 years ago

Replying to SergeyBiryukov:

Replying to ramiy:

Sergey, removing the width: 16px fixes the UI glitch. But the rotateY(180deg) is irrelevant.

Without rotateY(180deg), I don't see a UI glitch: 28966.current.png. And removing width: 16px doesn't seem to make a difference in that case.

Should we just leave it as is then?

Sergey, try width: initial; it works too. RotateY is still irrelevant.

#8 @SergeyBiryukov
5 years ago

I mean, 28966.current.png is what I see in current trunk after [29256]. Removing width: 16px or changing it to width: initial doesn't make any difference. If the checkbox does not need to be flipped, we can leave it as is.

The results of [29256] are not in the current nightly build yet, should be in the next one.

To see the changes sooner, try updating these two lines in wp-admin/css/login-rtl.css:

@import url(forms.css);
@import url(l10n.css);

to use forms-rtl.css and l10n-rtl.css.

#9 @SergeyBiryukov
5 years ago

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

Closing as fixed in [29256].

Note: See TracTickets for help on using tickets.