WordPress.org

Make WordPress Core

#42214 closed task (blessed) (fixed)

Code Editors: Minor style improvements

Reported by: melchoyce Owned by: melchoyce
Milestone: 4.9 Priority: normal
Severity: normal Version:
Component: General Keywords: has-patch
Focuses: ui Cc:

Description

The code editors could use some minor design tweaks. See attached mockup, where I've...:

  • Added a 1px solid #ddd background around the entire editor
  • Increased the width of the the file contents to 100%
  • Removed any margin-left on the file list
  • Added a background (#f7f7f7, to match the line numbers background) behind the file list
  • Also added a border-left of 1px solid #ddd to the file list
  • Increased the padding inside the file list to 5px 5px 8px
  • Made the current file styling full-width inside the file list
  • Removed the border-bottom on the "Theme/Plugin Files" header

Anyone want to take a stab at patching this?

Attachments (4)

file-list.png (844.0 KB) - added by melchoyce 23 months ago.
42214.diff (1.7 KB) - added by melchoyce 23 months ago.
42214.2.diff (1.9 KB) - added by helen 22 months ago.
42214-mobile.diff (1.3 KB) - added by melchoyce 22 months ago.

Download all attachments as: .zip

Change History (15)

@melchoyce
23 months ago

@melchoyce
23 months ago

#1 @melchoyce
23 months ago

42214.diff is a first stab at making some design improvements.

It needs a review, and could still use some additional padding inside of #templateside. This is also ridiculously minor, but it'd be great to get the current file styling when the first file is selected to be flush with the top of the list, so there's no gap.

This ticket was mentioned in Slack in #core by melchoyce. View the logs.


22 months ago

@helen
22 months ago

#3 @helen
22 months ago

In 41882:

Code Editors: Minor style improvements.

props melchoyce.
see #42214.

#4 @helen
22 months ago

The focus styling is not really awesome and this could use testing/tweaking on touch devices/small screens, so leaving this open for now.

#5 @westonruter
22 months ago

  • Owner set to melchoyce
  • Status changed from new to assigned

This ticket was mentioned in Slack in #design by melchoyce. View the logs.


22 months ago

#7 @jbpaul17
22 months ago

  • Keywords has-patch added; needs-patch removed

This ticket was mentioned in Slack in #core by jeffpaul. View the logs.


22 months ago

#9 follow-up: @melchoyce
22 months ago

Added some minor small-screen style improvements in 42214-mobile.diff.

#10 in reply to: ↑ 9 @helen
22 months ago

Replying to melchoyce:

Added some minor small-screen style improvements in 42214-mobile.diff.

👍

#11 @melchoyce
22 months ago

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

Referenced the ticket incorrectly (whoops) but just committed those styles: https://core.trac.wordpress.org/changeset/41999

Going to close this out for now. Any future enhancements can happen in new tickets.

Note: See TracTickets for help on using tickets.